@bergetai/ui 0.3.6 → 0.5.0

package/dist/index.cjs

@@ -85,6 +85,7 @@ __export(index_exports, {
   DropdownMenuSubTrigger: () => DropdownMenuSubTrigger,
   DropdownMenuTrigger: () => DropdownMenuTrigger,
   EU_COUNTRY_CODES: () => EU_COUNTRY_CODES,
+  FOG_BRAND_PALETTE: () => FOG_BRAND_PALETTE,
   FeatureList: () => FeatureList,
   Field: () => Field,
   FieldContent: () => FieldContent,
@@ -96,6 +97,7 @@ __export(index_exports, {
   FieldSeparator: () => FieldSeparator,
   FieldSet: () => FieldSet,
   FieldTitle: () => FieldTitle,
+  FogIllustration: () => FogIllustration,
   Grid: () => Grid,
   HeroBlock: () => HeroBlock,
   Icon: () => Icon,
@@ -122,8 +124,8 @@ __export(index_exports, {
   NavigationMenuItem: () => NavigationMenuItem,
   NavigationMenuLink: () => NavigationMenuLink,
   NavigationMenuList: () => NavigationMenuList,
+  NavigationMenuPositioner: () => NavigationMenuPositioner,
   NavigationMenuTrigger: () => NavigationMenuTrigger,
-  NavigationMenuViewport: () => NavigationMenuViewport,
   Select: () => Select2,
   Switch: () => Switch,
   Table: () => Table2,
@@ -151,7 +153,7 @@ __export(index_exports, {
   gridVariants: () => gridVariants,
   isEUCountry: () => isEUCountry,
   linkVariants: () => linkVariants,
-  navigationMenuTriggerStyle: () => navigationMenuTriggerStyle,
+  navigationMenuTriggerStyle: () => navigationMenuTriggerStyle2,
   selectVariants: () => selectVariants,
   switchRootVariants: () => switchRootVariants,
   switchThumbVariants: () => switchThumbVariants,
@@ -361,31 +363,31 @@ var ThemeToggle = React3.forwardRef(
 ThemeToggle.displayName = "ThemeToggle";
 
 // src/primitives/button.tsx
-var React4 = __toESM(require("react"), 1);
-var import_class_variance_authority = require("class-variance-authority");
 var import_button = require("@base-ui/react/button");
+var import_class_variance_authority = require("class-variance-authority");
+var import_cn = require("cn");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority.cva)(
-  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
-        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
         link: "text-primary underline-offset-4 hover:underline"
       },
       size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10"
+        default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9"
       }
     },
     defaultVariants: {
@@ -394,22 +396,21 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
     }
   }
 );
-var Button = React4.forwardRef(
-  ({ className, variant, size, asChild = false, children, ...props }, ref) => {
-    const Comp = import_button.Button;
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      Comp,
-      {
-        ref,
-        className: cn(buttonVariants({ variant, size }), className),
-        render: asChild ? children : void 0,
-        ...props,
-        children: asChild ? void 0 : children
-      }
-    );
-  }
-);
-Button.displayName = "Button";
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_button.Button,
+    {
+      "data-slot": "button",
+      className: (0, import_cn.cn)(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
 
 // src/components/button/Button.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -462,11 +463,21 @@ function Button2({
     className
   );
   const content = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: cn("inline-flex items-center", !isIcon && "gap-2"), children });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Button, { className: baseClass, ref, asChild, type, ...props, children: asChild ? children : content });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    Button,
+    {
+      className: baseClass,
+      ref,
+      render: asChildRender(asChild, children),
+      type,
+      ...props,
+      children: asChild ? void 0 : content
+    }
+  );
 }
 
 // src/components/typography/Typography.tsx
-var React5 = __toESM(require("react"), 1);
+var React4 = __toESM(require("react"), 1);
 var import_class_variance_authority2 = require("class-variance-authority");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var typographyVariants = (0, import_class_variance_authority2.cva)("", {
@@ -513,7 +524,7 @@ var defaultElementMap = {
   mono: "p",
   code: "span"
 };
-var Typography = React5.forwardRef(
+var Typography = React4.forwardRef(
   ({ className, variant = "body", color = "default", as, children, ...props }, ref) => {
     const Component = as ?? defaultElementMap[variant ?? "body"] ?? "p";
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -530,43 +541,89 @@ var Typography = React5.forwardRef(
 Typography.displayName = "Typography";
 
 // src/components/card/Card.tsx
-var React7 = __toESM(require("react"), 1);
+var React5 = __toESM(require("react"), 1);
 var import_class_variance_authority3 = require("class-variance-authority");
 
 // src/primitives/card.tsx
-var React6 = __toESM(require("react"), 1);
+var import_cn2 = require("cn");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var Card = React6.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+function Card({
+  className,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
-      ref,
-      className: cn("rounded-lg border bg-card text-card-foreground shadow-sm", className),
+      "data-slot": "card",
+      "data-size": size,
+      className: (0, import_cn2.cn)(
+        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className
+      ),
       ...props
     }
-  )
-);
-Card.displayName = "Card";
-var CardHeader = React6.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
-);
-CardHeader.displayName = "CardHeader";
-var CardTitle = React6.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { ref, className: cn("text-2xl leading-none tracking-tight", className), ...props })
-);
-CardTitle.displayName = "CardTitle";
-var CardDescription = React6.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, className: cn("text-sm text-muted-foreground", className), ...props })
-);
-CardDescription.displayName = "CardDescription";
-var CardContent = React6.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, className: cn("p-6 pt-0", className), ...props })
-);
-CardContent.displayName = "CardContent";
-var CardFooter = React6.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, className: cn("flex items-center p-6 pt-0", className), ...props })
-);
-CardFooter.displayName = "CardFooter";
+  );
+}
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: (0, import_cn2.cn)(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: (0, import_cn2.cn)(
+        "text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      "data-slot": "card-description",
+      className: (0, import_cn2.cn)("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: (0, import_cn2.cn)("px-(--card-spacing)", className),
+      ...props
+    }
+  );
+}
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      "data-slot": "card-footer",
+      className: (0, import_cn2.cn)(
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",
+        className
+      ),
+      ...props
+    }
+  );
+}
 
 // src/components/card/Card.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
@@ -588,7 +645,7 @@ var cardVariants = (0, import_class_variance_authority3.cva)("rounded-berget-sm"
     padding: "md"
   }
 });
-var Card2 = React7.forwardRef(
+var Card2 = React5.forwardRef(
   ({ className, variant, padding, children, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       Card,
@@ -604,7 +661,7 @@ var Card2 = React7.forwardRef(
 Card2.displayName = "Card";
 
 // src/components/badge/Badge.tsx
-var React8 = __toESM(require("react"), 1);
+var React6 = __toESM(require("react"), 1);
 var import_class_variance_authority4 = require("class-variance-authority");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var badgeVariants = (0, import_class_variance_authority4.cva)(
@@ -639,7 +696,7 @@ var badgeVariants = (0, import_class_variance_authority4.cva)(
     }
   }
 );
-var Badge = React8.forwardRef(
+var Badge = React6.forwardRef(
   ({ className, variant, status, size, icon, iconGap = 2, children, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cn(badgeVariants({ variant, status, size }), className), ref, ...props, children: [
       icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { marginRight: children ? `${iconGap * 0.25}rem` : "0" }, children: icon }),
@@ -650,20 +707,20 @@ var Badge = React8.forwardRef(
 Badge.displayName = "Badge";
 
 // src/components/alert/Alert.tsx
-var React10 = __toESM(require("react"), 1);
+var React7 = __toESM(require("react"), 1);
 var import_class_variance_authority6 = require("class-variance-authority");
 
 // src/primitives/alert.tsx
-var React9 = __toESM(require("react"), 1);
 var import_class_variance_authority5 = require("class-variance-authority");
+var import_cn3 = require("cn");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var alertVariants = (0, import_class_variance_authority5.cva)(
-  "relative w-full rounded-lg p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4",
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
-        default: "",
-        destructive: ""
+        default: "bg-card text-card-foreground",
+        destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current"
       }
     },
     defaultVariants: {
@@ -671,14 +728,50 @@ var alertVariants = (0, import_class_variance_authority5.cva)(
     }
   }
 );
-var Alert = React9.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref, role: "alert", className: cn(alertVariants({ variant }), className), ...props }));
-Alert.displayName = "Alert";
-var AlertTitle = React9.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h5", { ref, className: cn("mb-1 leading-none tracking-tight", className), ...props })
-);
-AlertTitle.displayName = "AlertTitle";
-var AlertDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref, className: cn("text-sm [&_p]:leading-relaxed", className), ...props }));
-AlertDescription.displayName = "AlertDescription";
+function Alert({
+  className,
+  variant,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      "data-slot": "alert",
+      role: "alert",
+      className: (0, import_cn3.cn)(alertVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function AlertTitle({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      "data-slot": "alert-title",
+      className: (0, import_cn3.cn)(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      "data-slot": "alert-description",
+      className: (0, import_cn3.cn)(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
 
 // src/components/alert/Alert.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
@@ -696,24 +789,24 @@ var alertVariants2 = (0, import_class_variance_authority6.cva)("", {
     variant: "default"
   }
 });
-var Alert2 = React10.forwardRef(
+var Alert2 = React7.forwardRef(
   ({ className, variant, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Alert, { ref, className: cn(alertVariants2({ variant }), className), ...props })
 );
 Alert2.displayName = "Alert";
 
 // src/components/dialog/Dialog.tsx
-var React11 = __toESM(require("react"), 1);
+var React8 = __toESM(require("react"), 1);
 var import_dialog = require("@base-ui/react/dialog");
 var import_lucide_react = require("lucide-react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var Dialog = import_dialog.Dialog.Root;
-var DialogTrigger = React11.forwardRef(
+var DialogTrigger = React8.forwardRef(
   ({ asChild, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_dialog.Dialog.Trigger, { ref, render: asChildRender(asChild, children), ...props, children: asChild ? void 0 : children })
 );
 DialogTrigger.displayName = "DialogTrigger";
 var DialogPortal = import_dialog.Dialog.Portal;
 var DialogClose = import_dialog.Dialog.Close;
-var DialogOverlay = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+var DialogOverlay = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
   import_dialog.Dialog.Backdrop,
   {
     ref,
@@ -725,7 +818,7 @@ var DialogOverlay = React11.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = "DialogOverlay";
-var DialogContent = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(DialogPortal, { children: [
+var DialogContent = React8.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(DialogPortal, { children: [
   /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DialogOverlay, {}),
   /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     import_dialog.Dialog.Popup,
@@ -757,7 +850,7 @@ var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_r
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+var DialogTitle = React8.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
   import_dialog.Dialog.Title,
   {
     ref,
@@ -767,7 +860,7 @@ var DialogTitle = React11.forwardRef(({ className, children, ...props }, ref) =>
   }
 ));
 DialogTitle.displayName = "DialogTitle";
-var DialogDescription = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+var DialogDescription = React8.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
   import_dialog.Dialog.Description,
   {
     ref,
@@ -779,16 +872,16 @@ var DialogDescription = React11.forwardRef(({ className, children, ...props }, r
 DialogDescription.displayName = "DialogDescription";
 
 // src/components/alert-dialog/AlertDialog.tsx
-var React12 = __toESM(require("react"), 1);
+var React9 = __toESM(require("react"), 1);
 var import_alert_dialog = require("@base-ui/react/alert-dialog");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var AlertDialog = import_alert_dialog.AlertDialog.Root;
-var AlertDialogTrigger = React12.forwardRef(
+var AlertDialogTrigger = React9.forwardRef(
   ({ asChild, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_alert_dialog.AlertDialog.Trigger, { ref, render: asChildRender(asChild, children), ...props, children: asChild ? void 0 : children })
 );
 AlertDialogTrigger.displayName = "AlertDialogTrigger";
 var AlertDialogPortal = import_alert_dialog.AlertDialog.Portal;
-var AlertDialogOverlay = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var AlertDialogOverlay = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
   import_alert_dialog.AlertDialog.Backdrop,
   {
     ref,
@@ -800,7 +893,7 @@ var AlertDialogOverlay = React12.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogOverlay.displayName = "AlertDialogOverlay";
-var AlertDialogContent = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(AlertDialogPortal, { children: [
+var AlertDialogContent = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(AlertDialogPortal, { children: [
   /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AlertDialogOverlay, {}),
   /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     import_alert_dialog.AlertDialog.Popup,
@@ -825,7 +918,7 @@ var AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_
   }
 );
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React12.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var AlertDialogTitle = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
   import_alert_dialog.AlertDialog.Title,
   {
     ref,
@@ -835,7 +928,7 @@ var AlertDialogTitle = React12.forwardRef(({ className, children, ...props }, re
   }
 ));
 AlertDialogTitle.displayName = "AlertDialogTitle";
-var AlertDialogDescription = React12.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var AlertDialogDescription = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
   import_alert_dialog.AlertDialog.Description,
   {
     ref,
@@ -845,7 +938,7 @@ var AlertDialogDescription = React12.forwardRef(({ className, children, ...props
   }
 ));
 AlertDialogDescription.displayName = "AlertDialogDescription";
-var AlertDialogAction = React12.forwardRef(({ className, asChild, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var AlertDialogAction = React9.forwardRef(({ className, asChild, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
   import_alert_dialog.AlertDialog.Close,
   {
     ref,
@@ -856,7 +949,7 @@ var AlertDialogAction = React12.forwardRef(({ className, asChild, children, ...p
   }
 ));
 AlertDialogAction.displayName = "AlertDialogAction";
-var AlertDialogCancel = React12.forwardRef(({ className, asChild, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var AlertDialogCancel = React9.forwardRef(({ className, asChild, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
   import_alert_dialog.AlertDialog.Close,
   {
     ref,
@@ -869,12 +962,12 @@ var AlertDialogCancel = React12.forwardRef(({ className, asChild, children, ...p
 AlertDialogCancel.displayName = "AlertDialogCancel";
 
 // src/components/dropdown-menu/DropdownMenu.tsx
-var React13 = __toESM(require("react"), 1);
+var React10 = __toESM(require("react"), 1);
 var import_menu = require("@base-ui/react/menu");
 var import_lucide_react2 = require("lucide-react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var DropdownMenu = import_menu.Menu.Root;
-var DropdownMenuTrigger = React13.forwardRef(
+var DropdownMenuTrigger = React10.forwardRef(
   ({ asChild, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_menu.Menu.Trigger, { ref, render: asChildRender(asChild, children), ...props, children: asChild ? void 0 : children })
 );
 DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
@@ -882,7 +975,7 @@ var DropdownMenuGroup = import_menu.Menu.Group;
 var DropdownMenuPortal = import_menu.Menu.Portal;
 var DropdownMenuSub = import_menu.Menu.SubmenuRoot;
 var DropdownMenuRadioGroup = import_menu.Menu.RadioGroup;
-var DropdownMenuSubTrigger = React13.forwardRef(({ className, inset, asChild, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+var DropdownMenuSubTrigger = React10.forwardRef(({ className, inset, asChild, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
   import_menu.Menu.SubmenuTrigger,
   {
     ref,
@@ -900,7 +993,7 @@ var DropdownMenuSubTrigger = React13.forwardRef(({ className, inset, asChild, ch
   }
 ));
 DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
-var DropdownMenuSubContent = React13.forwardRef(
+var DropdownMenuSubContent = React10.forwardRef(
   ({ className, side = "right", align = "start", alignOffset = -3, sideOffset = 0, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_menu.Menu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     import_menu.Menu.Positioner,
     {
@@ -924,7 +1017,7 @@ var DropdownMenuSubContent = React13.forwardRef(
   ) })
 );
 DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
-var DropdownMenuContent = React13.forwardRef(({ className, sideOffset = 4, align = "center", side, alignOffset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_menu.Menu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+var DropdownMenuContent = React10.forwardRef(({ className, sideOffset = 4, align = "center", side, alignOffset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_menu.Menu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
   import_menu.Menu.Positioner,
   {
     side,
@@ -946,7 +1039,7 @@ var DropdownMenuContent = React13.forwardRef(({ className, sideOffset = 4, align
   }
 ) }));
 DropdownMenuContent.displayName = "DropdownMenuContent";
-var DropdownMenuItem = React13.forwardRef(({ className, inset, asChild, children, textValue, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+var DropdownMenuItem = React10.forwardRef(({ className, inset, asChild, children, textValue, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
   import_menu.Menu.Item,
   {
     ref,
@@ -962,7 +1055,7 @@ var DropdownMenuItem = React13.forwardRef(({ className, inset, asChild, children
   }
 ));
 DropdownMenuItem.displayName = "DropdownMenuItem";
-var DropdownMenuCheckboxItem = React13.forwardRef(({ className, children, asChild, textValue, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+var DropdownMenuCheckboxItem = React10.forwardRef(({ className, children, asChild, textValue, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
   import_menu.Menu.CheckboxItem,
   {
     ref,
@@ -980,7 +1073,7 @@ var DropdownMenuCheckboxItem = React13.forwardRef(({ className, children, asChil
   }
 ));
 DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
-var DropdownMenuRadioItem = React13.forwardRef(({ className, children, asChild, textValue, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+var DropdownMenuRadioItem = React10.forwardRef(({ className, children, asChild, textValue, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
   import_menu.Menu.RadioItem,
   {
     ref,
@@ -998,7 +1091,7 @@ var DropdownMenuRadioItem = React13.forwardRef(({ className, children, asChild,
   }
 ));
 DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
-var DropdownMenuLabel = React13.forwardRef(({ className, inset, asChild, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+var DropdownMenuLabel = React10.forwardRef(({ className, inset, asChild, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
   import_menu.Menu.GroupLabel,
   {
     ref,
@@ -1013,7 +1106,7 @@ var DropdownMenuLabel = React13.forwardRef(({ className, inset, asChild, childre
   }
 ));
 DropdownMenuLabel.displayName = "DropdownMenuLabel";
-var DropdownMenuSeparator = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+var DropdownMenuSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
   import_menu.Menu.Separator,
   {
     ref,
@@ -1034,180 +1127,288 @@ var DropdownMenuShortcut = ({ className, ...props }) => {
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 // src/components/navigation-menu/NavigationMenu.tsx
-var React14 = __toESM(require("react"), 1);
+var import_navigation_menu2 = require("@base-ui/react/navigation-menu");
+var import_class_variance_authority8 = require("class-variance-authority");
+var import_lucide_react4 = require("lucide-react");
+
+// src/primitives/navigation-menu.tsx
 var import_navigation_menu = require("@base-ui/react/navigation-menu");
 var import_class_variance_authority7 = require("class-variance-authority");
+var import_cn4 = require("cn");
 var import_lucide_react3 = require("lucide-react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var NavigationMenu = React14.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-  import_navigation_menu.NavigationMenu.Root,
-  {
-    ref,
-    className: cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(NavigationMenuViewport, {})
-    ]
-  }
-));
-NavigationMenu.displayName = "NavigationMenu";
-var NavigationMenuList = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-  import_navigation_menu.NavigationMenu.List,
-  {
-    ref,
-    className: cn("group flex flex-1 list-none items-center justify-center gap-1", className),
-    ...props
-  }
-));
-NavigationMenuList.displayName = "NavigationMenuList";
-var NavigationMenuItem = import_navigation_menu.NavigationMenu.Item;
+function NavigationMenuList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_navigation_menu.NavigationMenu.List,
+    {
+      "data-slot": "navigation-menu-list",
+      className: (0, import_cn4.cn)(
+        "group flex flex-1 list-none items-center justify-center gap-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function NavigationMenuItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_navigation_menu.NavigationMenu.Item,
+    {
+      "data-slot": "navigation-menu-item",
+      className: (0, import_cn4.cn)("relative", className),
+      ...props
+    }
+  );
+}
 var navigationMenuTriggerStyle = (0, import_class_variance_authority7.cva)(
-  "group inline-flex h-10 w-max items-center justify-center rounded-berget-xs px-4 py-2 text-sm font-medium transition-colors hover:bg-berget-surface-02 hover:text-berget-foreground focus:bg-berget-surface-02 focus:text-berget-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-popup-open:text-berget-foreground data-popup-open:bg-berget-border data-popup-open:hover:bg-berget-border data-popup-open:focus:bg-berget-border"
+  "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted"
 );
-var NavigationMenuTrigger = React14.forwardRef(({ className, children, asChild, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-  import_navigation_menu.NavigationMenu.Trigger,
-  {
-    ref,
-    className: cn(navigationMenuTriggerStyle(), "group", className),
-    render: asChildRender(asChild, children),
-    ...props,
-    children: asChild ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-      children,
-      " ",
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        import_lucide_react3.ChevronDown,
-        {
-          className: "relative top-[1px] ml-1 size-3 transition duration-200 group-data-[data-popup-open]:rotate-180",
-          "aria-hidden": "true"
-        }
-      )
-    ] })
-  }
-));
-NavigationMenuTrigger.displayName = "NavigationMenuTrigger";
-var NavigationMenuContent = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-  import_navigation_menu.NavigationMenu.Content,
-  {
-    ref,
-    className: cn(
-      "left-0 top-0 w-full data-[activation-direction=left]:fade-in data-[activation-direction=right]:fade-out md:absolute md:w-auto",
-      className
-    ),
-    ...props
-  }
-));
-NavigationMenuContent.displayName = "NavigationMenuContent";
-var NavigationMenuLink = React14.forwardRef(({ className, asChild, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-  import_navigation_menu.NavigationMenu.Link,
-  {
-    ref,
-    className,
-    render: asChildRender(asChild, children),
-    ...props,
-    children: asChild ? void 0 : children
-  }
-));
-NavigationMenuLink.displayName = "NavigationMenuLink";
-var NavigationMenuViewport = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_navigation_menu.NavigationMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_navigation_menu.NavigationMenu.Positioner, { className: "isolate z-50 outline-none", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-  import_navigation_menu.NavigationMenu.Popup,
-  {
-    ref,
-    className: cn(
-      "origin-top-center relative mt-1.5 h-[var(--popup-height)] w-full overflow-hidden rounded-berget-xs border border-berget-border bg-berget-popover text-berget-popover-foreground shadow-berget-lg transition-[opacity,transform] data-starting-style:opacity-0 data-starting-style:scale-90 data-ending-style:opacity-0 data-ending-style:scale-90 md:w-[var(--popup-width)]",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_navigation_menu.NavigationMenu.Viewport, {})
-  }
-) }) }));
-NavigationMenuViewport.displayName = "NavigationMenuViewport";
-var NavigationMenuIndicator = React14.forwardRef(({ className, asChild, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-  import_navigation_menu.NavigationMenu.Icon,
-  {
-    ref,
-    className: cn(
-      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden transition-[opacity] data-starting-style:opacity-0 data-ending-style:opacity-0",
-      className
-    ),
-    render: asChildRender(asChild, children),
-    ...props,
-    children: [
-      asChild ? void 0 : children,
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-berget-border shadow-md" })
-    ]
-  }
-));
-NavigationMenuIndicator.displayName = "NavigationMenuIndicator";
-
-// src/components/table/Table.tsx
-var React16 = __toESM(require("react"), 1);
+function NavigationMenuContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_navigation_menu.NavigationMenu.Content,
+    {
+      "data-slot": "navigation-menu-content",
+      className: (0, import_cn4.cn)(
+        "data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function NavigationMenuIndicator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_navigation_menu.NavigationMenu.Icon,
+    {
+      "data-slot": "navigation-menu-indicator",
+      className: (0, import_cn4.cn)(
+        "top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" })
+    }
+  );
+}
 
-// src/primitives/table.tsx
-var React15 = __toESM(require("react"), 1);
+// src/components/navigation-menu/NavigationMenu.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var Table = React15.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("table", { ref, className: cn("w-full caption-bottom text-sm", className), ...props }) })
-);
-Table.displayName = "Table";
-var TableHeader = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
-TableHeader.displayName = "TableHeader";
-var TableBody = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props }));
-TableBody.displayName = "TableBody";
-var TableFooter = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-  "tfoot",
-  {
-    ref,
-    className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className),
-    ...props
-  }
-));
-TableFooter.displayName = "TableFooter";
-var TableRow = React15.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    "tr",
+function NavigationMenu({
+  align = "start",
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    import_navigation_menu2.NavigationMenu.Root,
     {
-      ref,
+      "data-slot": "navigation-menu",
       className: cn(
-        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
         className
       ),
-      ...props
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(NavigationMenuPositioner, { align })
+      ]
     }
-  )
+  );
+}
+var navigationMenuTriggerStyle2 = (0, import_class_variance_authority8.cva)(
+  "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-berget-xs px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-berget-surface-02 focus:bg-berget-surface-02 focus-visible:ring-3 focus-visible:ring-berget-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-berget-surface-02/50 data-popup-open:hover:bg-berget-surface-02 data-open:bg-berget-surface-02/50 data-open:hover:bg-berget-surface-02 data-open:focus:bg-berget-surface-02"
 );
-TableRow.displayName = "TableRow";
-var TableHead = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-  "th",
-  {
-    ref,
-    className: cn(
-      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
-      className
-    ),
-    ...props
-  }
-));
-TableHead.displayName = "TableHead";
-var TableCell = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-  "td",
-  {
-    ref,
-    className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className),
-    ...props
-  }
-));
-TableCell.displayName = "TableCell";
-var TableCaption = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("caption", { ref, className: cn("mt-4 text-sm text-muted-foreground", className), ...props }));
-TableCaption.displayName = "TableCaption";
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    import_navigation_menu2.NavigationMenu.Trigger,
+    {
+      "data-slot": "navigation-menu-trigger",
+      className: cn(navigationMenuTriggerStyle2(), "group", className),
+      ...props,
+      children: [
+        children,
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          import_lucide_react4.ChevronDown,
+          {
+            className: "relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180",
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+}
+function NavigationMenuLink({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_navigation_menu2.NavigationMenu.Link,
+    {
+      "data-slot": "navigation-menu-link",
+      className: cn(
+        "flex items-center gap-2 rounded-berget-xs p-2 text-sm transition-all outline-none hover:bg-berget-surface-02 focus:bg-berget-surface-02 focus-visible:ring-3 focus-visible:ring-berget-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-berget-xs data-active:bg-berget-surface-02/50 data-active:hover:bg-berget-surface-02 data-active:focus:bg-berget-surface-02 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function NavigationMenuPositioner({
+  className,
+  side = "bottom",
+  sideOffset = 8,
+  align = "start",
+  alignOffset = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_navigation_menu2.NavigationMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_navigation_menu2.NavigationMenu.Positioner,
+    {
+      side,
+      sideOffset,
+      align,
+      alignOffset,
+      className: cn(
+        "isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_navigation_menu2.NavigationMenu.Popup, { className: "data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-berget-xs bg-berget-popover text-berget-popover-foreground shadow-berget-lg ring-1 ring-berget-border transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_navigation_menu2.NavigationMenu.Viewport, { className: "relative size-full overflow-hidden" }) })
+    }
+  ) });
+}
 
 // src/components/table/Table.tsx
+var React11 = __toESM(require("react"), 1);
+
+// src/primitives/table.tsx
+var import_cn5 = require("cn");
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var Table2 = React16.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Table, { ref, className, ...props })
+function Table({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "div",
+    {
+      "data-slot": "table-container",
+      className: "relative w-full overflow-x-auto",
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "table",
+        {
+          "data-slot": "table",
+          className: (0, import_cn5.cn)("w-full caption-bottom text-sm", className),
+          ...props
+        }
+      )
+    }
+  );
+}
+function TableHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "thead",
+    {
+      "data-slot": "table-header",
+      className: (0, import_cn5.cn)("[&_tr]:border-b", className),
+      ...props
+    }
+  );
+}
+function TableBody({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "tbody",
+    {
+      "data-slot": "table-body",
+      className: (0, import_cn5.cn)("[&_tr:last-child]:border-0", className),
+      ...props
+    }
+  );
+}
+function TableFooter({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "tfoot",
+    {
+      "data-slot": "table-footer",
+      className: (0, import_cn5.cn)(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableRow({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "tr",
+    {
+      "data-slot": "table-row",
+      className: (0, import_cn5.cn)(
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableHead({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "th",
+    {
+      "data-slot": "table-head",
+      className: (0, import_cn5.cn)(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableCell({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "td",
+    {
+      "data-slot": "table-cell",
+      className: (0, import_cn5.cn)(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableCaption({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "caption",
+    {
+      "data-slot": "table-caption",
+      className: (0, import_cn5.cn)("mt-4 text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+
+// src/components/table/Table.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var Table2 = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Table, { ref, className, ...props })
 );
 Table2.displayName = "Table";
-var TableHeader2 = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+var TableHeader2 = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
   TableHeader,
   {
     ref,
@@ -1216,7 +1417,7 @@ var TableHeader2 = React16.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 TableHeader2.displayName = "TableHeader";
-var TableBody2 = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+var TableBody2 = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
   TableBody,
   {
     ref,
@@ -1225,7 +1426,7 @@ var TableBody2 = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 TableBody2.displayName = "TableBody";
-var TableFooter2 = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+var TableFooter2 = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
   TableFooter,
   {
     ref,
@@ -1237,8 +1438,8 @@ var TableFooter2 = React16.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 TableFooter2.displayName = "TableFooter";
-var TableRow2 = React16.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+var TableRow2 = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     TableRow,
     {
       ref,
@@ -1251,7 +1452,7 @@ var TableRow2 = React16.forwardRef(
   )
 );
 TableRow2.displayName = "TableRow";
-var TableHead2 = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+var TableHead2 = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
   TableHead,
   {
     ref,
@@ -1263,7 +1464,7 @@ var TableHead2 = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 TableHead2.displayName = "TableHead";
-var TableCell2 = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+var TableCell2 = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
   TableCell,
   {
     ref,
@@ -1272,7 +1473,7 @@ var TableCell2 = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 TableCell2.displayName = "TableCell";
-var TableCaption2 = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+var TableCaption2 = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
   TableCaption,
   {
     ref,
@@ -1283,68 +1484,80 @@ var TableCaption2 = React16.forwardRef(({ className, ...props }, ref) => /* @__P
 TableCaption2.displayName = "TableCaption";
 
 // src/components/item/Item.tsx
-var React18 = __toESM(require("react"), 1);
+var React12 = __toESM(require("react"), 1);
 
 // src/primitives/item.tsx
-var import_class_variance_authority8 = require("class-variance-authority");
 var import_merge_props = require("@base-ui/react/merge-props");
 var import_use_render = require("@base-ui/react/use-render");
+var import_class_variance_authority9 = require("class-variance-authority");
+var import_cn7 = require("cn");
 
 // src/primitives/separator.tsx
-var React17 = __toESM(require("react"), 1);
 var import_separator = require("@base-ui/react/separator");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var Separator = React17.forwardRef(({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-  import_separator.Separator,
-  {
-    ref,
-    orientation,
-    className: cn(
-      "shrink-0 bg-border",
-      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-      className
-    ),
-    ...props
-  }
-));
-Separator.displayName = "Separator";
+var import_cn6 = require("cn");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function Separator({
+  className,
+  orientation = "horizontal",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    import_separator.Separator,
+    {
+      "data-slot": "separator",
+      orientation,
+      className: (0, import_cn6.cn)(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      ),
+      ...props
+    }
+  );
+}
 
 // src/primitives/item.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function ItemGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "div",
     {
       role: "list",
       "data-slot": "item-group",
-      className: cn("group/item-group flex flex-col", className),
+      className: (0, import_cn7.cn)(
+        "group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
+        className
+      ),
       ...props
     }
   );
 }
-function ItemSeparator({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+function ItemSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     Separator,
     {
       "data-slot": "item-separator",
       orientation: "horizontal",
-      className: cn("my-0", className),
+      className: (0, import_cn7.cn)("my-2", className),
       ...props
     }
   );
 }
-var itemVariants = (0, import_class_variance_authority8.cva)(
-  "group/item [a]:hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-ring/50 [a]:transition-colors flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:ring-[3px]",
+var itemVariants = (0, import_class_variance_authority9.cva)(
+  "group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
   {
     variants: {
       variant: {
-        default: "bg-transparent",
+        default: "border-transparent",
         outline: "border-border",
-        muted: "bg-muted/50"
+        muted: "border-transparent bg-muted/50"
       },
       size: {
-        default: "gap-4 p-4 ",
-        sm: "gap-2.5 px-4 py-3"
+        default: "gap-2.5 px-3 py-2.5",
+        sm: "gap-2.5 px-3 py-2.5",
+        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0"
       }
     },
     defaultVariants: {
@@ -1362,26 +1575,28 @@ function Item({
 }) {
   return (0, import_use_render.useRender)({
     defaultTagName: "div",
-    render,
     props: (0, import_merge_props.mergeProps)(
       {
-        "data-slot": "item",
-        "data-variant": variant,
-        "data-size": size,
-        className: cn(itemVariants({ variant, size, className }))
+        className: (0, import_cn7.cn)(itemVariants({ variant, size, className }))
       },
       props
-    )
+    ),
+    render,
+    state: {
+      slot: "item",
+      variant,
+      size
+    }
   });
 }
-var itemMediaVariants = (0, import_class_variance_authority8.cva)(
-  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none",
+var itemMediaVariants = (0, import_class_variance_authority9.cva)(
+  "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
   {
     variants: {
       variant: {
         default: "bg-transparent",
-        icon: "bg-muted size-8 rounded-sm border [&_svg:not([class*='size-'])]:size-4",
-        image: "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover"
+        icon: "[&_svg:not([class*='size-'])]:size-4",
+        image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover"
       }
     },
     defaultVariants: {
@@ -1394,44 +1609,49 @@ function ItemMedia({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "div",
     {
       "data-slot": "item-media",
       "data-variant": variant,
-      className: cn(itemMediaVariants({ variant, className })),
+      className: (0, import_cn7.cn)(itemMediaVariants({ variant, className })),
       ...props
     }
   );
 }
 function ItemContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "div",
     {
       "data-slot": "item-content",
-      className: cn("flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none", className),
+      className: (0, import_cn7.cn)(
+        "flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none",
+        className
+      ),
       ...props
     }
   );
 }
 function ItemTitle({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "div",
     {
       "data-slot": "item-title",
-      className: cn("flex w-fit items-center gap-2 text-sm font-medium leading-snug", className),
+      className: (0, import_cn7.cn)(
+        "line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
+        className
+      ),
       ...props
     }
   );
 }
 function ItemDescription({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "p",
     {
       "data-slot": "item-description",
-      className: cn(
-        "text-muted-foreground line-clamp-2 text-balance text-sm font-normal leading-normal",
-        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+      className: (0, import_cn7.cn)(
+        "line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
       ),
       ...props
@@ -1439,33 +1659,46 @@ function ItemDescription({ className, ...props }) {
   );
 }
 function ItemActions({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { "data-slot": "item-actions", className: cn("flex items-center gap-2", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    "div",
+    {
+      "data-slot": "item-actions",
+      className: (0, import_cn7.cn)("flex items-center gap-2", className),
+      ...props
+    }
+  );
 }
 function ItemHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "div",
     {
       "data-slot": "item-header",
-      className: cn("flex basis-full items-center justify-between gap-2", className),
+      className: (0, import_cn7.cn)(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      ),
       ...props
     }
   );
 }
 function ItemFooter({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "div",
     {
       "data-slot": "item-footer",
-      className: cn("flex basis-full items-center justify-between gap-2", className),
+      className: (0, import_cn7.cn)(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      ),
       ...props
     }
   );
 }
 
 // src/components/item/Item.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function Item2({ className, asChild, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     Item,
     {
       render: asChild ? children : void 0,
@@ -1484,8 +1717,8 @@ function Item2({ className, asChild, children, ...props }) {
     }
   );
 }
-var ItemMedia2 = React18.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+var ItemMedia2 = React12.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     ItemMedia,
     {
       ref,
@@ -1495,8 +1728,8 @@ var ItemMedia2 = React18.forwardRef(({ className, ...props }, ref) => {
   );
 });
 ItemMedia2.displayName = "ItemMedia";
-var ItemTitle2 = React18.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+var ItemTitle2 = React12.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     ItemTitle,
     {
       ref,
@@ -1506,8 +1739,8 @@ var ItemTitle2 = React18.forwardRef(({ className, ...props }, ref) => {
   );
 });
 ItemTitle2.displayName = "ItemTitle";
-var ItemDescription2 = React18.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+var ItemDescription2 = React12.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     ItemDescription,
     {
       ref,
@@ -1517,8 +1750,8 @@ var ItemDescription2 = React18.forwardRef(({ className, ...props }, ref) => {
   );
 });
 ItemDescription2.displayName = "ItemDescription";
-var ItemSeparator2 = React18.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+var ItemSeparator2 = React12.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     ItemSeparator,
     {
       ref,
@@ -1530,38 +1763,36 @@ var ItemSeparator2 = React18.forwardRef(({ className, ...props }, ref) => {
 ItemSeparator2.displayName = "ItemSeparator";
 
 // src/components/input/Input.tsx
-var React20 = __toESM(require("react"), 1);
+var React13 = __toESM(require("react"), 1);
 
 // src/primitives/input.tsx
-var React19 = __toESM(require("react"), 1);
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var Input = React19.forwardRef(
-  ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      "input",
-      {
-        type,
-        className: cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file: file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          className
-        ),
-        ref,
-        ...props
-      }
-    );
-  }
-);
-Input.displayName = "Input";
+var import_input = require("@base-ui/react/input");
+var import_cn8 = require("cn");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_input.Input,
+    {
+      type,
+      "data-slot": "input",
+      className: (0, import_cn8.cn)(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      ),
+      ...props
+    }
+  );
+}
 
 // src/components/input/Input.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var Input2 = React20.forwardRef(
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var Input2 = React13.forwardRef(
   ({ className, icon, actionButton, label, description, error, id, disabled, ...props }, ref) => {
-    const generatedId = React20.useId();
+    const generatedId = React13.useId();
     const inputId = id || generatedId;
     const errorId = `${inputId}-error`;
     const descriptionId = `${inputId}-description`;
-    const inputElement = /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    const inputElement = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       Input,
       {
         ref,
@@ -1581,8 +1812,8 @@ var Input2 = React20.forwardRef(
       }
     );
     if (!icon && !actionButton) {
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col gap-2", children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col gap-2", children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "label",
           {
             htmlFor: inputId,
@@ -1595,9 +1826,9 @@ var Input2 = React20.forwardRef(
           }
         ),
         inputElement,
-        (description || error) && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col gap-1", children: [
-          description && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Typography, { variant: "xs", color: "muted", id: descriptionId, children: description }),
-          error && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        (description || error) && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col gap-1", children: [
+          description && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Typography, { variant: "xs", color: "muted", id: descriptionId, children: description }),
+          error && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             Typography,
             {
               variant: "xs",
@@ -1609,8 +1840,8 @@ var Input2 = React20.forwardRef(
         ] })
       ] });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col gap-2", children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "label",
         {
           htmlFor: inputId,
@@ -1622,14 +1853,14 @@ var Input2 = React20.forwardRef(
           children: label
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative w-full", children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "absolute left-3 top-1/2 -translate-y-1/2", children: icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "relative w-full", children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "absolute left-3 top-1/2 -translate-y-1/2", children: icon }),
         inputElement,
-        actionButton && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "absolute right-2 top-1/2 -translate-y-1/2", children: actionButton })
+        actionButton && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "absolute right-2 top-1/2 -translate-y-1/2", children: actionButton })
       ] }),
-      (description || error) && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col gap-1", children: [
-        description && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Typography, { variant: "xs", color: "muted", id: descriptionId, children: description }),
-        error && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Typography, { variant: "xs", id: errorId, className: "text-berget-destructive-foreground", children: error })
+      (description || error) && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col gap-1", children: [
+        description && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Typography, { variant: "xs", color: "muted", id: descriptionId, children: description }),
+        error && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Typography, { variant: "xs", id: errorId, className: "text-berget-destructive-foreground", children: error })
       ] })
     ] });
   }
@@ -1637,43 +1868,44 @@ var Input2 = React20.forwardRef(
 Input2.displayName = "Input";
 
 // src/components/checkbox/Checkbox.tsx
-var React22 = __toESM(require("react"), 1);
+var React14 = __toESM(require("react"), 1);
 var import_checkbox2 = require("@base-ui/react/checkbox");
-var import_lucide_react5 = require("lucide-react");
-var import_class_variance_authority9 = require("class-variance-authority");
+var import_lucide_react6 = require("lucide-react");
+var import_class_variance_authority10 = require("class-variance-authority");
 
 // src/primitives/checkbox.tsx
-var React21 = __toESM(require("react"), 1);
 var import_checkbox = require("@base-ui/react/checkbox");
-var import_lucide_react4 = require("lucide-react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var Checkbox = React21.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-  import_checkbox.Checkbox.Root,
-  {
-    ref,
-    className: cn(
-      "peer cursor-pointer ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50",
-      className
-    ),
-    ...props,
-    children: children ?? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_checkbox.Checkbox.Indicator, { className: cn("grid place-content-center"), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react4.Check, { className: "h-4 w-4" }) })
-  }
-));
-Checkbox.displayName = "Checkbox";
-var CheckboxIndicator = React21.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-  import_checkbox.Checkbox.Indicator,
-  {
-    ref,
-    className: cn("grid place-content-center", className),
-    ...props,
-    children: children ?? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react4.Check, { className: "h-4 w-4" })
-  }
-));
-CheckboxIndicator.displayName = "CheckboxIndicator";
+var import_cn9 = require("cn");
+var import_lucide_react5 = require("lucide-react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function Checkbox({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_checkbox.Checkbox.Root,
+    {
+      "data-slot": "checkbox",
+      className: (0, import_cn9.cn)(
+        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        import_checkbox.Checkbox.Indicator,
+        {
+          "data-slot": "checkbox-indicator",
+          className: "grid place-content-center text-current transition-none [&>svg]:size-3.5",
+          children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            import_lucide_react5.CheckIcon,
+            {}
+          )
+        }
+      )
+    }
+  );
+}
 
 // src/components/checkbox/Checkbox.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var checkboxVariants = (0, import_class_variance_authority9.cva)(
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var checkboxVariants = (0, import_class_variance_authority10.cva)(
   "inline-flex items-center justify-center rounded-md transition-all duration-200 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
@@ -1694,7 +1926,7 @@ var checkboxVariants = (0, import_class_variance_authority9.cva)(
     }
   }
 );
-var Checkbox2 = React22.forwardRef(
+var Checkbox2 = React14.forwardRef(
   ({
     "aria-label": ariaLabel,
     className,
@@ -1707,11 +1939,11 @@ var Checkbox2 = React22.forwardRef(
     disabled,
     ...props
   }, ref) => {
-    const generatedId = React22.useId();
+    const generatedId = React14.useId();
     const checkboxId = id || generatedId;
     const errorId = `${checkboxId}-error`;
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-start gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "relative flex items-start pt-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-start gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "relative flex items-start pt-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         Checkbox,
         {
           ref,
@@ -1728,8 +1960,8 @@ var Checkbox2 = React22.forwardRef(
             className
           ),
           ...props,
-          children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_checkbox2.Checkbox.Indicator, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-            import_lucide_react5.Check,
+          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_checkbox2.Checkbox.Indicator, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            import_lucide_react6.Check,
             {
               className: "h-4 w-4 text-current stroke-current",
               style: { color: "currentColor", stroke: "currentColor" }
@@ -1737,8 +1969,8 @@ var Checkbox2 = React22.forwardRef(
           ) })
         }
       ) }),
-      (label || description || error) && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col gap-1", children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      (label || description || error) && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col gap-1", children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "label",
           {
             htmlFor: checkboxId,
@@ -1750,8 +1982,8 @@ var Checkbox2 = React22.forwardRef(
             children: label
           }
         ),
-        description && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typography, { variant: "xs", color: "muted", children: description }),
-        error && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typography, { variant: "xs", id: errorId, className: "text-berget-destructive-foreground", children: error })
+        description && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typography, { variant: "xs", color: "muted", children: description }),
+        error && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typography, { variant: "xs", id: errorId, className: "text-berget-destructive-foreground", children: error })
       ] })
     ] });
   }
@@ -1759,11 +1991,11 @@ var Checkbox2 = React22.forwardRef(
 Checkbox2.displayName = "Checkbox";
 
 // src/components/switch/Switch.tsx
-var React23 = __toESM(require("react"), 1);
+var React15 = __toESM(require("react"), 1);
 var import_switch = require("@base-ui/react/switch");
-var import_class_variance_authority10 = require("class-variance-authority");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var switchRootVariants = (0, import_class_variance_authority10.cva)(
+var import_class_variance_authority11 = require("class-variance-authority");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var switchRootVariants = (0, import_class_variance_authority11.cva)(
   "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-berget-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
@@ -1784,7 +2016,7 @@ var switchRootVariants = (0, import_class_variance_authority10.cva)(
     }
   }
 );
-var switchThumbVariants = (0, import_class_variance_authority10.cva)(
+var switchThumbVariants = (0, import_class_variance_authority11.cva)(
   "pointer-events-none block rounded-full ring-0 transition-transform shadow-berget-sm bg-berget-foreground",
   {
     variants: {
@@ -1799,7 +2031,7 @@ var switchThumbVariants = (0, import_class_variance_authority10.cva)(
     }
   }
 );
-var Switch = React23.forwardRef(
+var Switch = React15.forwardRef(
   ({
     "aria-label": ariaLabel,
     className,
@@ -1812,11 +2044,11 @@ var Switch = React23.forwardRef(
     disabled,
     ...props
   }, ref) => {
-    const generatedId = React23.useId();
+    const generatedId = React15.useId();
     const switchId = id || generatedId;
     const errorId = `${switchId}-error`;
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         import_switch.Switch.Root,
         {
           ref,
@@ -1832,11 +2064,11 @@ var Switch = React23.forwardRef(
             className
           ),
           ...props,
-          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_switch.Switch.Thumb, { className: cn(switchThumbVariants({ size })) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_switch.Switch.Thumb, { className: cn(switchThumbVariants({ size })) })
         }
       ),
-      (label || description || error) && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col gap-1", children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      (label || description || error) && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col gap-1", children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "label",
           {
             htmlFor: switchId,
@@ -1847,8 +2079,8 @@ var Switch = React23.forwardRef(
             children: label
           }
         ),
-        description && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typography, { variant: "xs", color: "muted", children: description }),
-        error && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typography, { variant: "xs", id: errorId, className: "text-berget-destructive-foreground", children: error })
+        description && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typography, { variant: "xs", color: "muted", children: description }),
+        error && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typography, { variant: "xs", id: errorId, className: "text-berget-destructive-foreground", children: error })
       ] })
     ] });
   }
@@ -1856,135 +2088,160 @@ var Switch = React23.forwardRef(
 Switch.displayName = "Switch";
 
 // src/components/select/Select.tsx
-var React25 = __toESM(require("react"), 1);
-var import_class_variance_authority11 = require("class-variance-authority");
+var React16 = __toESM(require("react"), 1);
+var import_class_variance_authority12 = require("class-variance-authority");
 
 // src/primitives/select.tsx
-var React24 = __toESM(require("react"), 1);
 var import_select = require("@base-ui/react/select");
-var import_lucide_react6 = require("lucide-react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_cn10 = require("cn");
+var import_lucide_react7 = require("lucide-react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var Select = import_select.Select.Root;
-var SelectGroup = import_select.Select.Group;
-var SelectValue = import_select.Select.Value;
-var SelectTrigger = React24.forwardRef(({ className, children, asChild, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
-  import_select.Select.Trigger,
-  {
-    ref,
-    className: cn(
-      "flex h-10 w-full cursor-pointer items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:border-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className
-    ),
-    render: asChildRender(asChild, children),
-    ...props,
-    children: [
-      asChild ? void 0 : children,
-      asChild ? null : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_select.Select.Icon, { render: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react6.ChevronDown, { className: "h-4 w-4 opacity-50" }) })
-    ]
-  }
-));
-SelectTrigger.displayName = "SelectTrigger";
-var SelectScrollUpButton = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-  import_select.Select.ScrollUpArrow,
-  {
-    ref,
-    className: cn("flex cursor-default items-center justify-center py-1", className),
-    ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react6.ChevronUp, { className: "h-4 w-4" })
-  }
-));
-SelectScrollUpButton.displayName = "SelectScrollUpButton";
-var SelectScrollDownButton = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-  import_select.Select.ScrollDownArrow,
-  {
-    ref,
-    className: cn("flex cursor-default items-center justify-center py-1", className),
-    ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react6.ChevronDown, { className: "h-4 w-4" })
-  }
-));
-SelectScrollDownButton.displayName = "SelectScrollDownButton";
-var SelectContent = React24.forwardRef(
-  ({
-    className,
-    children,
-    alignItemWithTrigger = true,
-    sideOffset = 4,
-    align,
-    side,
-    alignOffset,
-    ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_select.Select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+function SelectValue({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    import_select.Select.Value,
+    {
+      "data-slot": "select-value",
+      className: (0, import_cn10.cn)("flex flex-1 text-left", className),
+      ...props
+    }
+  );
+}
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    import_select.Select.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: (0, import_cn10.cn)(
+        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          import_select.Select.Icon,
+          {
+            render: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react7.ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" })
+          }
+        )
+      ]
+    }
+  );
+}
+function SelectContent({
+  className,
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  alignItemWithTrigger = true,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_select.Select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     import_select.Select.Positioner,
     {
-      alignItemWithTrigger,
       side,
+      sideOffset,
       align,
       alignOffset,
-      sideOffset,
+      alignItemWithTrigger,
       className: "isolate z-50",
-      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
         import_select.Select.Popup,
         {
-          ref,
-          className: cn(
-            "z-50 max-h-[var(--available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md transition-[opacity,transform] data-starting-style:opacity-0 data-starting-style:scale-95 data-ending-style:opacity-0 data-ending-style:scale-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 origin-[--transform-origin]",
-            className
-          ),
+          "data-slot": "select-content",
+          "data-align-trigger": alignItemWithTrigger,
+          className: (0, import_cn10.cn)("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
           ...props,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SelectScrollUpButton, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_select.Select.List, { className: cn("p-1"), children }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SelectScrollDownButton, {})
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectScrollUpButton, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_select.Select.List, { children }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectScrollDownButton, {})
           ]
         }
       )
     }
-  ) })
-);
-SelectContent.displayName = "SelectContent";
-var SelectLabel = React24.forwardRef(({ className, asChild, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-  import_select.Select.GroupLabel,
-  {
-    ref,
-    className: cn("py-1.5 pl-8 pr-2 text-sm ", className),
-    render: asChildRender(asChild, children),
-    ...props,
-    children: asChild ? void 0 : children
-  }
-));
-SelectLabel.displayName = "SelectLabel";
-var SelectItem = React24.forwardRef(({ className, children, asChild, textValue, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-  import_select.Select.Item,
-  {
-    ref,
-    label: textValue,
-    className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      className
-    ),
-    render: asChildRender(asChild, children),
-    ...props,
-    children: asChild ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_select.Select.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react6.Check, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_select.Select.ItemText, { children })
-    ] })
-  }
-));
-SelectItem.displayName = "SelectItem";
-var SelectSeparator = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-  import_select.Select.Separator,
-  {
-    ref,
-    className: cn("-mx-1 my-1 h-px bg-muted", className),
-    ...props
-  }
-));
-SelectSeparator.displayName = "SelectSeparator";
+  ) });
+}
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    import_select.Select.Item,
+    {
+      "data-slot": "select-item",
+      className: (0, import_cn10.cn)(
+        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground 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",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_select.Select.ItemText, { className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap", children }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          import_select.Select.ItemIndicator,
+          {
+            render: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
+            children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react7.CheckIcon, { className: "pointer-events-none" })
+          }
+        )
+      ]
+    }
+  );
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    import_select.Select.ScrollUpArrow,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: (0, import_cn10.cn)(
+        "top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        import_lucide_react7.ChevronUpIcon,
+        {}
+      )
+    }
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    import_select.Select.ScrollDownArrow,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: (0, import_cn10.cn)(
+        "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        import_lucide_react7.ChevronDownIcon,
+        {}
+      )
+    }
+  );
+}
 
 // src/components/select/Select.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var selectVariants = (0, import_class_variance_authority11.cva)(
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var selectVariants = (0, import_class_variance_authority12.cva)(
   "flex w-full items-center justify-between rounded-berget-xs border bg-card px-4 py-3 text-sm transition-colors duration-200 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-berget-form-focus-border disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
@@ -2006,7 +2263,7 @@ var selectVariants = (0, import_class_variance_authority11.cva)(
     }
   }
 );
-var Select2 = React25.forwardRef(
+var Select2 = React16.forwardRef(
   ({
     className,
     variant,
@@ -2024,12 +2281,12 @@ var Select2 = React25.forwardRef(
     name,
     required
   }, ref) => {
-    const generatedId = React25.useId();
+    const generatedId = React16.useId();
     const selectId = id || generatedId;
     const errorId = `${selectId}-error`;
     const descriptionId = `${selectId}-description`;
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-col gap-2", children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         "label",
         {
           htmlFor: selectId,
@@ -2041,7 +2298,7 @@ var Select2 = React25.forwardRef(
           children: label
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
         Select,
         {
           value,
@@ -2052,7 +2309,7 @@ var Select2 = React25.forwardRef(
           required,
           items: options,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               SelectTrigger,
               {
                 ref,
@@ -2064,33 +2321,33 @@ var Select2 = React25.forwardRef(
                   error && "border-berget-destructive-foreground/50 bg-berget-destructive",
                   className
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectValue, { placeholder })
+                children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectValue, { placeholder })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectContent, { children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectItem, { value: option.value, disabled: option.disabled, children: option.label }, option.value)) })
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectContent, { children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectItem, { value: option.value, disabled: option.disabled, children: option.label }, option.value)) })
           ]
         }
       ),
-      description && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Typography, { variant: "xs", color: "muted", id: descriptionId, children: description }),
-      error && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Typography, { variant: "xs", id: errorId, className: "text-berget-destructive-foreground", children: error })
+      description && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Typography, { variant: "xs", color: "muted", id: descriptionId, children: description }),
+      error && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Typography, { variant: "xs", id: errorId, className: "text-berget-destructive-foreground", children: error })
     ] });
   }
 );
 Select2.displayName = "Select";
 
 // src/components/country-select/CountrySelect.tsx
-var React30 = __toESM(require("react"), 1);
-var import_lucide_react9 = require("lucide-react");
+var React18 = __toESM(require("react"), 1);
+var import_lucide_react10 = require("lucide-react");
 
 // src/components/icon/Icon.tsx
-var React26 = __toESM(require("react"), 1);
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var React17 = __toESM(require("react"), 1);
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var iconStrokeMap = {
   16: 1.4,
   24: 1.6,
   32: 1.8
 };
-var Icon = React26.forwardRef(
+var Icon = React17.forwardRef(
   ({
     icon: IconComponent,
     size,
@@ -2102,7 +2359,7 @@ var Icon = React26.forwardRef(
     const strokeWidth = iconStrokeMap[size];
     const sizeClass = size === 16 ? "w-4 h-4" : size === 24 ? "w-6 h-6" : "w-8 h-8";
     const ariaAttributes = ariaLabel ? { "aria-label": ariaLabel } : { "aria-hidden": ariaHidden };
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       IconComponent,
       {
         ref,
@@ -2117,193 +2374,252 @@ var Icon = React26.forwardRef(
 Icon.displayName = "Icon";
 
 // src/primitives/popover.tsx
-var React27 = __toESM(require("react"), 1);
 var import_popover = require("@base-ui/react/popover");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var Popover = import_popover.Popover.Root;
-var PopoverTrigger = React27.forwardRef(
-  ({ asChild, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_popover.Popover.Trigger, { ref, render: asChildRender(asChild, children), ...props, children: asChild ? void 0 : children })
-);
-PopoverTrigger.displayName = "PopoverTrigger";
-var PopoverContent = React27.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_popover.Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_popover.Popover.Positioner, { align, sideOffset, className: "isolate z-50", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-  import_popover.Popover.Popup,
-  {
-    ref,
-    className: cn(
-      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none transition-[opacity,transform] data-starting-style:opacity-0 data-starting-style:scale-95 data-ending-style:opacity-0 data-ending-style:scale-95 data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1 origin-[--transform-origin]",
-      className
-    ),
-    ...props
-  }
-) }) }));
-PopoverContent.displayName = "PopoverContent";
+var import_cn11 = require("cn");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+function Popover({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_popover.Popover.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_popover.Popover.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_popover.Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    import_popover.Popover.Positioner,
+    {
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      className: "isolate z-50",
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        import_popover.Popover.Popup,
+        {
+          "data-slot": "popover-content",
+          className: (0, import_cn11.cn)(
+            "z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          ),
+          ...props
+        }
+      )
+    }
+  ) });
+}
 
 // src/primitives/command.tsx
-var React29 = __toESM(require("react"), 1);
 var import_cmdk = require("cmdk");
-var import_lucide_react8 = require("lucide-react");
+var import_cn15 = require("cn");
 
 // src/primitives/dialog.tsx
-var React28 = __toESM(require("react"), 1);
 var import_dialog2 = require("@base-ui/react/dialog");
-var import_lucide_react7 = require("lucide-react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var Dialog2 = import_dialog2.Dialog.Root;
-var DialogTrigger2 = React28.forwardRef(
-  ({ asChild, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_dialog2.Dialog.Trigger, { ref, render: asChildRender(asChild, children), ...props, children: asChild ? void 0 : children })
-);
-DialogTrigger2.displayName = "DialogTrigger";
-var DialogPortal2 = import_dialog2.Dialog.Portal;
-var DialogClose2 = React28.forwardRef(
-  ({ asChild, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_dialog2.Dialog.Close, { ref, render: asChildRender(asChild, children), ...props, children: asChild ? void 0 : children })
-);
-DialogClose2.displayName = "DialogClose";
-var DialogOverlay2 = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-  import_dialog2.Dialog.Backdrop,
-  {
-    ref,
-    className: cn(
-      "fixed inset-0 z-50 bg-black/80 transition-[opacity] duration-200 data-starting-style:opacity-0 data-ending-style:opacity-0",
-      className
-    ),
-    ...props
-  }
-));
-DialogOverlay2.displayName = "DialogOverlay";
-var DialogContent2 = React28.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(DialogPortal2, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DialogOverlay2, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
-    import_dialog2.Dialog.Popup,
+var import_cn12 = require("cn");
+var import_lucide_react8 = require("lucide-react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+
+// src/primitives/input-group.tsx
+var import_class_variance_authority13 = require("class-variance-authority");
+var import_cn14 = require("cn");
+
+// src/primitives/textarea.tsx
+var import_cn13 = require("cn");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    "textarea",
     {
-      ref,
-      className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg transition-[opacity,transform] duration-200 data-starting-style:opacity-0 data-starting-style:scale-95 data-ending-style:opacity-0 data-ending-style:scale-95 sm:rounded-lg",
+      "data-slot": "textarea",
+      className: (0, import_cn13.cn)(
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className
       ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_dialog2.Dialog.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-open:bg-accent data-open:text-muted-foreground", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react7.X, { className: "h-4 w-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "sr-only", children: "Close" })
-        ] })
-      ]
+      ...props
     }
-  )
-] }));
-DialogContent2.displayName = "DialogContent";
-var DialogHeader2 = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
-DialogHeader2.displayName = "DialogHeader";
-var DialogFooter2 = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-  "div",
+  );
+}
+
+// src/primitives/input-group.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+function InputGroup({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    "div",
+    {
+      "data-slot": "input-group",
+      role: "group",
+      className: (0, import_cn14.cn)(
+        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var inputGroupAddonVariants = (0, import_class_variance_authority13.cva)(
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
   {
-    className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
-    ...props
+    variants: {
+      align: {
+        "inline-start": "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
+        "inline-end": "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
+        "block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+        "block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2"
+      }
+    },
+    defaultVariants: {
+      align: "inline-start"
+    }
   }
 );
-DialogFooter2.displayName = "DialogFooter";
-var DialogTitle2 = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-  import_dialog2.Dialog.Title,
-  {
-    ref,
-    className: cn("text-lg font-semibold leading-none tracking-tight", className),
-    ...props
-  }
-));
-DialogTitle2.displayName = "DialogTitle";
-var DialogDescription2 = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-  import_dialog2.Dialog.Description,
-  {
-    ref,
-    className: cn("text-sm text-muted-foreground", className),
-    ...props
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    "div",
+    {
+      role: "group",
+      "data-slot": "input-group-addon",
+      "data-align": align,
+      className: (0, import_cn14.cn)(inputGroupAddonVariants({ align }), className),
+      onClick: (e) => {
+        if (e.target.closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      },
+      ...props
+    }
+  );
+}
+var inputGroupButtonVariants = (0, import_class_variance_authority13.cva)(
+  "flex items-center gap-2 text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "",
+        "icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0"
+      }
+    },
+    defaultVariants: {
+      size: "xs"
+    }
   }
-));
-DialogDescription2.displayName = "DialogDescription";
+);
 
 // src/primitives/command.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var Command = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-  import_cmdk.Command,
-  {
-    ref,
-    className: cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className
-    ),
-    ...props
-  }
-));
-Command.displayName = import_cmdk.Command.displayName;
-var CommandInput = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react8.Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
-  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-    import_cmdk.Command.Input,
+var import_lucide_react9 = require("lucide-react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+function Command({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    import_cmdk.Command,
     {
-      ref,
-      className: cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+      "data-slot": "command",
+      className: (0, import_cn15.cn)(
+        "flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground",
         className
       ),
       ...props
     }
-  )
-] }));
-CommandInput.displayName = import_cmdk.Command.Input.displayName;
-var CommandList = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-  import_cmdk.Command.List,
-  {
-    ref,
-    className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
-    ...props
-  }
-));
-CommandList.displayName = import_cmdk.Command.List.displayName;
-var CommandEmpty = React29.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_cmdk.Command.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
-CommandEmpty.displayName = import_cmdk.Command.Empty.displayName;
-var CommandGroup = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-  import_cmdk.Command.Group,
-  {
-    ref,
-    className: cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      className
-    ),
-    ...props
-  }
-));
-CommandGroup.displayName = import_cmdk.Command.Group.displayName;
-var CommandSeparator = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-  import_cmdk.Command.Separator,
-  {
-    ref,
-    className: cn("-mx-1 h-px bg-border", className),
-    ...props
-  }
-));
-CommandSeparator.displayName = import_cmdk.Command.Separator.displayName;
-var CommandItem = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-  import_cmdk.Command.Item,
-  {
-    ref,
-    className: cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      className
+  );
+}
+function CommandInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { "data-slot": "command-input-wrapper", className: "p-1 pb-0", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(InputGroup, { className: "h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      import_cmdk.Command.Input,
+      {
+        "data-slot": "command-input",
+        className: (0, import_cn15.cn)(
+          "w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ...props
+      }
     ),
-    ...props
-  }
-));
-CommandItem.displayName = import_cmdk.Command.Item.displayName;
-var CommandShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-    "span",
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(InputGroupAddon, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react9.SearchIcon, { className: "size-4 shrink-0 opacity-50" }) })
+  ] }) });
+}
+function CommandList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    import_cmdk.Command.List,
     {
-      className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className),
+      "data-slot": "command-list",
+      className: (0, import_cn15.cn)(
+        "no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none",
+        className
+      ),
       ...props
     }
   );
-};
-CommandShortcut.displayName = "CommandShortcut";
+}
+function CommandEmpty({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    import_cmdk.Command.Empty,
+    {
+      "data-slot": "command-empty",
+      className: (0, import_cn15.cn)("py-6 text-center text-sm", className),
+      ...props
+    }
+  );
+}
+function CommandGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    import_cmdk.Command.Group,
+    {
+      "data-slot": "command-group",
+      className: (0, import_cn15.cn)(
+        "overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    import_cmdk.Command.Item,
+    {
+      "data-slot": "command-item",
+      className: (0, import_cn15.cn)(
+        "group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react9.CheckIcon, { className: "ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" })
+      ]
+    }
+  );
+}
 
 // src/components/country-select/countries.ts
 var COUNTRIES = [
@@ -2447,8 +2763,8 @@ var isEUCountry = (countryCode) => {
 };
 
 // src/components/country-select/CountrySelect.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var CountrySelect = React30.forwardRef(
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var CountrySelect = React18.forwardRef(
   ({
     value,
     onValueChange,
@@ -2458,53 +2774,58 @@ var CountrySelect = React30.forwardRef(
     align = "center",
     sideOffset = 4
   }, ref) => {
-    const [open, setOpen] = React30.useState(false);
-    const selectedCountry = React30.useMemo(() => COUNTRIES.find((c) => c.code === value), [value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
-        "button",
+    const [open, setOpen] = React18.useState(false);
+    const selectedCountry = React18.useMemo(() => COUNTRIES.find((c) => c.code === value), [value]);
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+        PopoverTrigger,
         {
           ref,
-          type: "button",
-          disabled,
-          "aria-expanded": open,
-          className: cn(
-            // Base layout — consistent with Select trigger
-            "flex w-full items-center justify-between",
-            "rounded-berget-xs border bg-card",
-            "px-4 py-3 text-sm",
-            "transition-colors duration-200",
-            "focus-visible:outline-none focus-visible:ring-0",
-            "focus-visible:ring-offset-0 focus-visible:border-berget-form-focus-border",
-            "disabled:cursor-not-allowed disabled:opacity-50",
-            // Default border & hover matching Select variant "default"
-            "border-berget-border-interactive hover:bg-berget-surface-hover",
-            className
+          render: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            "button",
+            {
+              type: "button",
+              disabled,
+              "aria-expanded": open,
+              className: cn(
+                // Base layout — consistent with Select trigger
+                "flex w-full items-center justify-between",
+                "rounded-berget-xs border bg-card",
+                "px-4 py-3 text-sm",
+                "transition-colors duration-200",
+                "focus-visible:outline-none focus-visible:ring-0",
+                "focus-visible:ring-offset-0 focus-visible:border-berget-form-focus-border",
+                "disabled:cursor-not-allowed disabled:opacity-50",
+                // Default border & hover matching Select variant "default"
+                "border-berget-border-interactive hover:bg-berget-surface-hover",
+                className
+              )
+            }
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: selectedCountry ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-xl flex-shrink-0", children: selectedCountry.flag }),
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "truncate", children: selectedCountry.name }),
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "text-berget-muted-foreground text-xs flex-shrink-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: selectedCountry ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-xl flex-shrink-0", children: selectedCountry.flag }),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "truncate", children: selectedCountry.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "text-berget-muted-foreground text-xs flex-shrink-0", children: [
                 "(",
                 selectedCountry.code,
                 ")"
               ] })
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                 Icon,
                 {
-                  icon: import_lucide_react9.Globe,
+                  icon: import_lucide_react10.Globe,
                   size: 16,
                   className: "flex-shrink-0 text-berget-muted-foreground"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-berget-muted-foreground truncate", children: placeholder })
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-berget-muted-foreground truncate", children: placeholder })
             ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               Icon,
               {
-                icon: import_lucide_react9.ChevronDown,
+                icon: import_lucide_react10.ChevronDown,
                 size: 16,
                 className: cn(
                   "flex-shrink-0 text-berget-muted-foreground",
@@ -2515,18 +2836,18 @@ var CountrySelect = React30.forwardRef(
             )
           ]
         }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         PopoverContent,
         {
           align,
           sideOffset,
           className: "w-[var(--radix-popover-trigger-width)] p-0",
-          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Command, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CommandInput, { placeholder: "Search country..." }),
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(CommandList, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CommandEmpty, { children: "No countries found." }),
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CommandGroup, { children: COUNTRIES.map((country) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Command, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CommandInput, { placeholder: "Search country..." }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(CommandList, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CommandEmpty, { children: "No countries found." }),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CommandGroup, { children: COUNTRIES.map((country) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
                 CommandItem,
                 {
                   value: `${country.name} ${country.code}`,
@@ -2540,12 +2861,12 @@ var CountrySelect = React30.forwardRef(
                     value === country.code && "bg-berget-brand-granite-800/40"
                   ),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-xl flex-shrink-0", children: country.flag }),
-                    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex-1 min-w-0", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "text-sm truncate", children: country.name }),
-                      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "text-xs text-berget-muted-foreground", children: country.code })
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-xl flex-shrink-0", children: country.flag }),
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex-1 min-w-0", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "text-sm truncate", children: country.name }),
+                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "text-xs text-berget-muted-foreground", children: country.code })
                     ] }),
-                    value === country.code && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-2 h-2 rounded-full bg-berget-brand-granite-400 flex-shrink-0" })
+                    value === country.code && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "w-2 h-2 rounded-full bg-berget-brand-granite-400 flex-shrink-0" })
                   ]
                 },
                 country.code
@@ -2560,32 +2881,10 @@ var CountrySelect = React30.forwardRef(
 CountrySelect.displayName = "CountrySelect";
 
 // src/components/text-area/TextArea.tsx
-var React32 = __toESM(require("react"), 1);
-var import_class_variance_authority12 = require("class-variance-authority");
-
-// src/primitives/textarea.tsx
-var React31 = __toESM(require("react"), 1);
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var Textarea = React31.forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-      "textarea",
-      {
-        className: cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          className
-        ),
-        ref,
-        ...props
-      }
-    );
-  }
-);
-Textarea.displayName = "Textarea";
-
-// src/components/text-area/TextArea.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var textAreaVariants = (0, import_class_variance_authority12.cva)(
+var React19 = __toESM(require("react"), 1);
+var import_class_variance_authority14 = require("class-variance-authority");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var textAreaVariants = (0, import_class_variance_authority14.cva)(
   "rounded-berget-xs bg-card px-4 py-3 transition-colors duration-200 focus-visible:border-berget-form-focus-border focus-visible:ring-0 focus-visible:ring-offset-0 resize-y",
   {
     variants: {
@@ -2607,7 +2906,7 @@ var textAreaVariants = (0, import_class_variance_authority12.cva)(
     }
   }
 );
-var TextArea = React32.forwardRef(
+var TextArea = React19.forwardRef(
   ({
     className,
     variant,
@@ -2627,13 +2926,13 @@ var TextArea = React32.forwardRef(
     actionButton,
     ...props
   }, ref) => {
-    const generatedId = React32.useId();
+    const generatedId = React19.useId();
     const textareaId = id || generatedId;
     const errorId = `${textareaId}-error`;
     const descriptionId = `${textareaId}-description`;
     const characterCount = typeof value === "string" ? value.length : 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col gap-2", children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         "label",
         {
           htmlFor: textareaId,
@@ -2645,9 +2944,9 @@ var TextArea = React32.forwardRef(
           children: label
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "relative", children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "absolute left-2 top-1/2 -translate-y-1/2", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "relative", children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "absolute left-2 top-1/2 -translate-y-1/2", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           Textarea,
           {
             ref,
@@ -2672,13 +2971,13 @@ var TextArea = React32.forwardRef(
             ...props
           }
         ),
-        secondaryIcon && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "absolute right-12 top-1/2 -translate-y-1/2", children: secondaryIcon }),
-        actionButton && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "absolute right-2 top-1/2 -translate-y-1/2", children: actionButton })
+        secondaryIcon && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "absolute right-12 top-1/2 -translate-y-1/2", children: secondaryIcon }),
+        actionButton && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "absolute right-2 top-1/2 -translate-y-1/2", children: actionButton })
       ] }),
-      (description || error || showCount && maxLength) && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
-        description && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Typography, { variant: "xs", color: "muted", id: descriptionId, children: description }),
-        (error || showCount && maxLength) && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-2 ml-auto", children: [
-          showCount && maxLength && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+      (description || error || showCount && maxLength) && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+        description && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Typography, { variant: "xs", color: "muted", id: descriptionId, children: description }),
+        (error || showCount && maxLength) && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center gap-2 ml-auto", children: [
+          showCount && maxLength && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
             Typography,
             {
               variant: "xs",
@@ -2692,7 +2991,7 @@ var TextArea = React32.forwardRef(
               ]
             }
           ),
-          error && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          error && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             Typography,
             {
               variant: "xs",
@@ -2709,27 +3008,34 @@ var TextArea = React32.forwardRef(
 TextArea.displayName = "TextArea";
 
 // src/primitives/label.tsx
-var React33 = __toESM(require("react"), 1);
-var import_class_variance_authority13 = require("class-variance-authority");
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var labelVariants = (0, import_class_variance_authority13.cva)(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-);
-var Label = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("label", { ref, className: cn(labelVariants(), className), ...props }));
-Label.displayName = "Label";
+var import_cn16 = require("cn");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+function Label({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    "label",
+    {
+      "data-slot": "label",
+      className: (0, import_cn16.cn)(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
 
 // src/primitives/field.tsx
 var import_react = require("react");
-var import_class_variance_authority14 = require("class-variance-authority");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_class_variance_authority15 = require("class-variance-authority");
+var import_cn17 = require("cn");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function FieldSet({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "fieldset",
     {
       "data-slot": "field-set",
-      className: cn(
-        "flex flex-col gap-6",
-        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+      className: (0, import_cn17.cn)(
+        "flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
         className
       ),
       ...props
@@ -2741,15 +3047,13 @@ function FieldLegend({
   variant = "legend",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "legend",
     {
       "data-slot": "field-legend",
       "data-variant": variant,
-      className: cn(
-        "mb-3 font-medium",
-        "data-[variant=legend]:text-base",
-        "data-[variant=label]:text-sm",
+      className: (0, import_cn17.cn)(
+        "mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
         className
       ),
       ...props
@@ -2757,34 +3061,26 @@ function FieldLegend({
   );
 }
 function FieldGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "div",
     {
       "data-slot": "field-group",
-      className: cn(
-        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+      className: (0, import_cn17.cn)(
+        "group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
         className
       ),
       ...props
     }
   );
 }
-var fieldVariants = (0, import_class_variance_authority14.cva)(
-  "group/field data-[invalid=true]:text-berget-destructive-foreground flex w-full gap-3",
+var fieldVariants = (0, import_class_variance_authority15.cva)(
+  "group/field flex w-full gap-2 data-[invalid=true]:text-destructive",
   {
     variants: {
       orientation: {
-        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
-        horizontal: [
-          "flex-row items-center",
-          "[&>[data-slot=field-label]]:flex-auto",
-          "has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px has-[>[data-slot=field-content]]:items-start"
-        ],
-        responsive: [
-          "@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto flex-col [&>*]:w-full [&>.sr-only]:w-auto",
-          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
-          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
-        ]
+        vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+        horizontal: "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        responsive: "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
       }
     },
     defaultVariants: {
@@ -2797,36 +3093,41 @@ function Field({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "div",
     {
       role: "group",
       "data-slot": "field",
       "data-orientation": orientation,
-      className: cn(fieldVariants({ orientation }), className),
+      className: (0, import_cn17.cn)(fieldVariants({ orientation }), className),
       ...props
     }
   );
 }
 function FieldContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "div",
     {
       "data-slot": "field-content",
-      className: cn("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", className),
+      className: (0, import_cn17.cn)(
+        "group/field-content flex flex-1 flex-col gap-0.5 leading-snug",
+        className
+      ),
       ...props
     }
   );
 }
-function FieldLabel({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+function FieldLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     Label,
     {
       "data-slot": "field-label",
-      className: cn(
-        "group/field-label peer/field-label flex w-fit gap-2 leading-snug text-berget-foreground group-data-[disabled=true]/field:text-berget-muted-foreground",
-        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>[data-slot=field]]:p-4",
-        "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
+      className: (0, import_cn17.cn)(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
         className
       ),
       ...props
@@ -2834,12 +3135,12 @@ function FieldLabel({ className, ...props }) {
   );
 }
 function FieldTitle({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "div",
     {
       "data-slot": "field-label",
-      className: cn(
-        "flex w-fit items-center gap-2 text-sm font-medium leading-snug group-data-[disabled=true]/field:opacity-50",
+      className: (0, import_cn17.cn)(
+        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
         className
       ),
       ...props
@@ -2847,14 +3148,14 @@ function FieldTitle({ className, ...props }) {
   );
 }
 function FieldDescription({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "p",
     {
       "data-slot": "field-description",
-      className: cn(
-        "text-berget-muted-foreground text-sm font-normal leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
-        "nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5",
-        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+      className: (0, import_cn17.cn)(
+        "text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "last:mt-0 nth-last-2:-mt-1",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
       ),
       ...props
@@ -2866,22 +3167,22 @@ function FieldSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "div",
     {
       "data-slot": "field-separator",
       "data-content": !!children,
-      className: cn(
+      className: (0, import_cn17.cn)(
         "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Separator, { className: "absolute inset-0 top-1/2" }),
-        children && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Separator, { className: "absolute inset-0 top-1/2" }),
+        children && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           "span",
           {
-            className: "bg-berget-background text-berget-muted-foreground relative mx-auto block w-fit px-2",
+            className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground",
             "data-slot": "field-separator-content",
             children
           }
@@ -2900,23 +3201,28 @@ function FieldError({
     if (children) {
       return children;
     }
-    if (!errors) {
+    if (!errors?.length) {
       return null;
     }
-    if (errors?.length === 1 && errors[0]?.message) {
-      return errors[0].message;
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values()
+    ];
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: errors.map((error, index) => error?.message && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("li", { children: error.message }, index)) });
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map(
+      (error, index) => error?.message && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { children: error.message }, index)
+    ) });
   }, [children, errors]);
   if (!content) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "div",
     {
       role: "alert",
       "data-slot": "field-error",
-      className: cn("text-berget-destructive-foreground text-sm font-normal", className),
+      className: (0, import_cn17.cn)("text-sm font-normal text-destructive", className),
       ...props,
       children: content
     }
@@ -2924,11 +3230,11 @@ function FieldError({
 }
 
 // src/components/link/Link.tsx
-var React34 = __toESM(require("react"), 1);
-var import_class_variance_authority15 = require("class-variance-authority");
-var import_lucide_react10 = require("lucide-react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
-var linkVariants = (0, import_class_variance_authority15.cva)(
+var React20 = __toESM(require("react"), 1);
+var import_class_variance_authority16 = require("class-variance-authority");
+var import_lucide_react11 = require("lucide-react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var linkVariants = (0, import_class_variance_authority16.cva)(
   "inline-flex cursor-pointer items-center gap-2 transition-all duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
@@ -2952,7 +3258,7 @@ var linkVariants = (0, import_class_variance_authority15.cva)(
     }
   }
 );
-var Link = React34.forwardRef(
+var Link = React20.forwardRef(
   ({
     className,
     variant,
@@ -2965,7 +3271,7 @@ var Link = React34.forwardRef(
     ...props
   }, ref) => {
     const isExternal = external || typeof props.href === "string" && (props.href.startsWith("http://") || props.href.startsWith("https://") || props.href.startsWith("mailto:") || props.href.startsWith("tel:"));
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
       "a",
       {
         ref,
@@ -2981,8 +3287,8 @@ var Link = React34.forwardRef(
         },
         children: [
           children,
-          icon && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "inline-flex items-center", children: icon }),
-          showExternalIcon && isExternal && !disabled && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "inline-flex items-center ml-1 opacity-60", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Icon, { icon: import_lucide_react10.ExternalLink, size: 16 }) })
+          icon && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "inline-flex items-center", children: icon }),
+          showExternalIcon && isExternal && !disabled && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "inline-flex items-center ml-1 opacity-60", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { icon: import_lucide_react11.ExternalLink, size: 16 }) })
         ]
       }
     );
@@ -2991,11 +3297,11 @@ var Link = React34.forwardRef(
 Link.displayName = "Link";
 
 // src/components/container/Container.tsx
-var React35 = __toESM(require("react"), 1);
+var React21 = __toESM(require("react"), 1);
 var import_merge_props2 = require("@base-ui/react/merge-props");
 var import_use_render2 = require("@base-ui/react/use-render");
-var import_class_variance_authority16 = require("class-variance-authority");
-var containerVariants = (0, import_class_variance_authority16.cva)("w-full mx-auto", {
+var import_class_variance_authority17 = require("class-variance-authority");
+var containerVariants = (0, import_class_variance_authority17.cva)("w-full mx-auto", {
   variants: {
     size: {
       sm: "max-w-3xl",
@@ -3016,7 +3322,7 @@ var containerVariants = (0, import_class_variance_authority16.cva)("w-full mx-au
     padding: "md"
   }
 });
-var Container = React35.forwardRef(
+var Container = React21.forwardRef(
   ({ className, size, padding, asChild = false, children, ...props }, ref) => {
     return (0, import_use_render2.useRender)({
       ref,
@@ -3035,11 +3341,11 @@ var Container = React35.forwardRef(
 Container.displayName = "Container";
 
 // src/components/grid/Grid.tsx
-var React36 = __toESM(require("react"), 1);
-var import_class_variance_authority17 = require("class-variance-authority");
+var React22 = __toESM(require("react"), 1);
+var import_class_variance_authority18 = require("class-variance-authority");
 var import_merge_props3 = require("@base-ui/react/merge-props");
 var import_use_render3 = require("@base-ui/react/use-render");
-var gridVariants = (0, import_class_variance_authority17.cva)("grid", {
+var gridVariants = (0, import_class_variance_authority18.cva)("grid", {
   variants: {
     align: {
       start: "items-start",
@@ -3061,7 +3367,7 @@ var gridVariants = (0, import_class_variance_authority17.cva)("grid", {
     justify: "start"
   }
 });
-var Grid = React36.forwardRef(
+var Grid = React22.forwardRef(
   ({ className, align, justify, cols, rows, gap, gapX, gapY, asChild = false, children, ...props }, ref) => {
     return (0, import_use_render3.useRender)({
       ref,
@@ -3088,11 +3394,11 @@ var Grid = React36.forwardRef(
 Grid.displayName = "Grid";
 
 // src/components/box/Box.tsx
-var React37 = __toESM(require("react"), 1);
-var import_class_variance_authority18 = require("class-variance-authority");
+var React23 = __toESM(require("react"), 1);
+var import_class_variance_authority19 = require("class-variance-authority");
 var import_merge_props4 = require("@base-ui/react/merge-props");
 var import_use_render4 = require("@base-ui/react/use-render");
-var boxVariants = (0, import_class_variance_authority18.cva)("flex", {
+var boxVariants = (0, import_class_variance_authority19.cva)("flex", {
   variants: {
     direction: {
       row: "flex-row",
@@ -3128,7 +3434,7 @@ var boxVariants = (0, import_class_variance_authority18.cva)("flex", {
     wrap: "nowrap"
   }
 });
-var Box = React37.forwardRef(
+var Box = React23.forwardRef(
   ({ className, direction, align, justify, wrap, gap, asChild = false, children, ...props }, ref) => {
     return (0, import_use_render4.useRender)({
       ref,
@@ -3151,16 +3457,16 @@ var Box = React37.forwardRef(
 Box.displayName = "Box";
 
 // src/components/berget-logo/BergetLogo.tsx
-var React38 = __toESM(require("react"), 1);
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var BergetLogo = React38.forwardRef(
+var React24 = __toESM(require("react"), 1);
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var BergetLogo = React24.forwardRef(
   ({ variant = "logotype", color = "auto", size = 48, className, ...props }, ref) => {
     const fillColor = color === "auto" ? "var(--berget-logo-light)" : color === "white" ? "var(--berget-logo-light)" : "var(--berget-logo-dark)";
     if (variant === "symbol") {
       const aspectRatio2 = 463 / 419;
       const width2 = size * aspectRatio2;
       const height2 = size;
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         "svg",
         {
           ref,
@@ -3173,7 +3479,7 @@ var BergetLogo = React38.forwardRef(
           "aria-label": "Berget symbol",
           className: cn("inline-block", className),
           ...props,
-          children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             "path",
             {
               d: "M208.739 17L255.261 17L446 403L398 403L313.5 255L261.5 176L233.163 96.1677L237.815 98.6522H226.185L230.837 96.1677L113 331L64.5 403L18 403L208.739 17Z",
@@ -3186,7 +3492,7 @@ var BergetLogo = React38.forwardRef(
     const aspectRatio = 793.63 / 204.37;
     const width = size * aspectRatio;
     const height = size;
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
       "svg",
       {
         ref,
@@ -3200,59 +3506,59 @@ var BergetLogo = React38.forwardRef(
         className: cn("inline-block", className),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("g", { style: { fill: fillColor }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("g", { style: { fill: fillColor }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               "path",
               {
                 className: "berget-logotype-fill",
                 d: "M268.78,172.54v-96.04h37.74c10.39,0,18.26,2.33,23.6,7,5.33,4.67,8.01,10.52,8.01,17.56,0,6.13-1.72,11-5.15,14.61-3.43,3.61-7.58,6.06-12.44,7.34,3.81.73,7.22,2.2,10.22,4.39,3.01,2.2,5.36,4.94,7.08,8.23,1.72,3.29,2.58,6.86,2.58,10.7,0,4.94-1.27,9.4-3.79,13.38-2.53,3.98-6.22,7.11-11.08,9.4-4.86,2.29-10.82,3.43-17.87,3.43h-38.89ZM283.93,117.66h20.74c5.81,0,10.24-1.3,13.29-3.91,3.05-2.61,4.58-6.19,4.58-10.77s-1.51-8.05-4.51-10.7c-3-2.65-7.55-3.98-13.65-3.98h-20.45v29.36ZM283.93,160.61h21.74c6.1,0,10.84-1.37,14.22-4.11,3.38-2.75,5.08-6.59,5.08-11.53s-1.76-8.85-5.29-11.73-8.29-4.32-14.3-4.32h-21.45v31.69Z"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               "path",
               {
                 className: "berget-logotype-fill",
                 d: "M382.45,174.19c-6.96,0-13.13-1.49-18.52-4.46-5.39-2.97-9.6-7.11-12.65-12.42-3.05-5.3-4.57-11.48-4.57-18.52s1.5-13.4,4.5-18.79,7.19-9.61,12.58-12.62c5.39-3.02,11.65-4.53,18.81-4.53s13,1.48,18.15,4.46c5.15,2.97,9.16,6.93,12.01,11.87,2.86,4.94,4.29,10.38,4.29,16.33,0,.92-.02,1.9-.07,2.95-.05,1.05-.12,2.22-.22,3.5h-55.19c.48,6.59,2.75,11.59,6.79,15.02,4.05,3.43,8.75,5.14,14.09,5.14,4.29,0,7.89-.93,10.79-2.81,2.91-1.88,5.08-4.41,6.51-7.61h15.16c-1.91,6.4-5.7,11.75-11.37,16.05-5.68,4.3-12.71,6.45-21.09,6.45ZM382.45,114.78c-5.05,0-9.54,1.44-13.44,4.32-3.91,2.88-6.29,7.2-7.15,12.97h40.04c-.29-5.3-2.24-9.51-5.87-12.62-3.62-3.11-8.15-4.67-13.58-4.67Z"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               "path",
               {
                 className: "berget-logotype-fill",
                 d: "M425.62,172.54v-68.05h13.59l1.29,12.9c2.47-4.48,5.93-8.03,10.37-10.63,4.43-2.61,9.79-3.91,16.08-3.91v15.23h-4.15c-4.19,0-7.93.67-11.22,1.99-3.29,1.33-5.91,3.57-7.86,6.72-1.96,3.16-2.93,7.53-2.93,13.1v32.65h-15.16Z"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               "path",
               {
                 className: "berget-logotype-fill",
                 d: "M500.25,151.69c-3.72,0-7.14-.41-10.29-1.24l-6.15,5.76c1.05.64,2.34,1.19,3.86,1.65,1.52.46,3.66.87,6.43,1.23,2.76.37,6.53.73,11.29,1.1,9.43.82,16.25,3,20.44,6.52,4.2,3.52,6.29,8.21,6.29,14.06,0,4.02-1.12,7.84-3.35,11.45-2.24,3.61-5.72,6.54-10.44,8.78s-10.74,3.36-18.09,3.36c-9.91,0-17.94-1.8-24.09-5.42-6.15-3.62-9.22-9.08-9.22-16.4,0-2.84.78-5.65,2.35-8.44,1.57-2.79,4.08-5.42,7.51-7.89-2-.83-3.74-1.72-5.22-2.68-1.48-.96-2.79-1.94-3.94-2.95v-3.29l12.3-12.07c-5.53-4.57-8.29-10.56-8.29-17.97,0-4.48,1.12-8.58,3.36-12.28,2.24-3.7,5.5-6.65,9.79-8.85,4.29-2.2,9.43-3.29,15.44-3.29,4.01,0,7.72.55,11.15,1.64h26.45v9.6l-12.58.69c2.28,3.75,3.43,7.91,3.43,12.49s-1.13,8.69-3.36,12.35c-2.24,3.66-5.48,6.59-9.72,8.78-4.25,2.2-9.37,3.29-15.37,3.29ZM481.24,181.19c0,3.93,1.81,6.88,5.44,8.85,3.62,1.97,8.15,2.95,13.58,2.95s9.48-1.07,12.72-3.22c3.24-2.15,4.86-5,4.86-8.57,0-2.65-1.09-4.92-3.29-6.79-2.19-1.87-6.34-3.04-12.44-3.5-4.57-.27-8.63-.68-12.15-1.23-3.34,1.74-5.63,3.61-6.86,5.63-1.25,2.01-1.86,3.98-1.86,5.9ZM500.25,140.3c4.38,0,7.93-1.12,10.66-3.36,2.71-2.24,4.07-5.42,4.07-9.53s-1.36-7.41-4.07-9.6c-2.72-2.2-6.27-3.29-10.66-3.29s-8.08,1.1-10.79,3.29c-2.71,2.2-4.08,5.4-4.08,9.6s1.36,7.3,4.08,9.53c2.71,2.24,6.31,3.36,10.79,3.36Z"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               "path",
               {
                 className: "berget-logotype-fill",
                 d: "M574.61,174.19c-6.96,0-13.13-1.49-18.52-4.46-5.39-2.97-9.6-7.11-12.65-12.42-3.05-5.3-4.57-11.48-4.57-18.52s1.5-13.4,4.5-18.79c3-5.4,7.19-9.61,12.58-12.62c5.39-3.02,11.65-4.53,18.81-4.53s13,1.48,18.15,4.46c5.15,2.97,9.16,6.93,12.01,11.87,2.86,4.94,4.29,10.38,4.29,16.33,0,.92-.02,1.9-.07,2.95-.05,1.05-.12,2.22-.22,3.5h-55.19c.48,6.59,2.75,11.59,6.79,15.02,4.05,3.43,8.75,5.14,14.09,5.14,4.29,0,7.89-.93,10.79-2.81s5.08-4.41,6.51-7.61h15.16c-1.91,6.4-5.7,11.75-11.37,16.05-5.68,4.3-12.71,6.45-21.09,6.45ZM574.61,114.78c-5.05,0-9.54,1.44-13.44,4.32-3.91,2.88-6.29,7.2-7.15,12.97h40.04c-.29-5.3-2.24-9.51-5.87-12.62-3.62-3.11-8.15-4.67-13.58-4.67Z"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               "path",
               {
                 className: "berget-logotype-fill",
                 d: "M646.23,172.54c-6.96,0-12.49-1.62-16.59-4.87-4.1-3.25-6.15-9.03-6.15-17.36v-33.61h-12.16v-12.21h12.16l1.86-17.29h13.29v17.29h20.02v12.21h-20.02v33.61c0,3.75.84,6.33,2.51,7.75,1.67,1.42,4.55,2.13,8.65,2.13h8.14v12.35h-11.72Z"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               "path",
               {
                 className: "berget-logotype-fill",
                 d: "M684.4,172.54l36.89-96.04h16.59l36.6,96.04h-16.01l-8.58-23.46h-40.88l-8.58,23.46h-16.01ZM713.28,137.56h32.31l-16.16-43.77-16.16,43.77Z"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { className: "berget-logotype-fill", d: "M778.48,172.54v-96.04h15.15v96.04h-15.15Z" })
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("path", { className: "berget-logotype-fill", d: "M778.48,172.54v-96.04h15.15v96.04h-15.15Z" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             "path",
             {
               style: { fill: fillColor },
@@ -3267,19 +3573,19 @@ var BergetLogo = React38.forwardRef(
 BergetLogo.displayName = "BergetLogo";
 
 // src/components/language-select/LanguageSelect.tsx
-var React39 = __toESM(require("react"), 1);
+var React25 = __toESM(require("react"), 1);
 var import_select3 = require("@base-ui/react/select");
-var import_lucide_react11 = require("lucide-react");
-var import_jsx_runtime38 = require("react/jsx-runtime");
-var LanguageSelect = React39.forwardRef(
+var import_lucide_react12 = require("lucide-react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var LanguageSelect = React25.forwardRef(
   ({ className, options, value, onValueChange }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       import_select3.Select.Root,
       {
         value,
         onValueChange: onValueChange ? (v) => onValueChange(v ?? "") : void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
             import_select3.Select.Trigger,
             {
               ref,
@@ -3302,12 +3608,12 @@ var LanguageSelect = React39.forwardRef(
                 className
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "sr-only", children: "Select language" }),
-                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { icon: import_lucide_react11.Globe, size: 16, "aria-hidden": true })
+                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "sr-only", children: "Select language" }),
+                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { icon: import_lucide_react12.Globe, size: 16, "aria-hidden": true })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_select3.Select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_select3.Select.Positioner, { alignItemWithTrigger: false, className: "isolate z-50", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_select3.Select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_select3.Select.Positioner, { alignItemWithTrigger: false, className: "isolate z-50", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             import_select3.Select.Popup,
             {
               className: cn(
@@ -3333,7 +3639,7 @@ var LanguageSelect = React39.forwardRef(
                 // Origin for transforms
                 "origin-[--transform-origin]"
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_select3.Select.List, { className: "p-1", children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_select3.Select.List, { className: "p-1", children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 import_select3.Select.Item,
                 {
                   value: option.value,
@@ -3350,7 +3656,7 @@ var LanguageSelect = React39.forwardRef(
                     // Disabled state
                     "data-disabled:pointer-events-none data-disabled:opacity-50"
                   ),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_select3.Select.ItemText, { children: option.label })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_select3.Select.ItemText, { children: option.label })
                 },
                 option.value
               )) })
@@ -3364,13 +3670,13 @@ var LanguageSelect = React39.forwardRef(
 LanguageSelect.displayName = "LanguageSelect";
 
 // src/components/list/List.tsx
-var React41 = __toESM(require("react"), 1);
+var React27 = __toESM(require("react"), 1);
 
 // src/components/divider/Divider.tsx
-var React40 = __toESM(require("react"), 1);
-var import_class_variance_authority19 = require("class-variance-authority");
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var dividerVariants = (0, import_class_variance_authority19.cva)("", {
+var React26 = __toESM(require("react"), 1);
+var import_class_variance_authority20 = require("class-variance-authority");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var dividerVariants = (0, import_class_variance_authority20.cva)("", {
   variants: {
     variant: {
       default: "bg-berget-separator",
@@ -3390,7 +3696,7 @@ var dividerVariants = (0, import_class_variance_authority19.cva)("", {
     size: "thin"
   }
 });
-var Divider = React40.forwardRef(
+var Divider = React26.forwardRef(
   ({
     className,
     orientation = "horizontal",
@@ -3401,16 +3707,16 @@ var Divider = React40.forwardRef(
     ...props
   }, ref) => {
     if (label) {
-      return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { ref, className: cn("flex items-center w-full", className), ...props, children: [
-        labelPosition !== "right" && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ref, className: cn("flex items-center w-full", className), ...props, children: [
+        labelPosition !== "right" && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           Separator,
           {
             orientation: "horizontal",
             className: cn(dividerVariants({ variant, size }), "flex-1")
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Typography, { variant: "small", color: "muted", className: "px-4 whitespace-nowrap", children: label }),
-        labelPosition !== "left" && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Typography, { variant: "small", color: "muted", className: "px-4 whitespace-nowrap", children: label }),
+        labelPosition !== "left" && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           Separator,
           {
             orientation: "horizontal",
@@ -3419,7 +3725,7 @@ var Divider = React40.forwardRef(
         )
       ] });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       Separator,
       {
         ref,
@@ -3436,20 +3742,20 @@ var Divider = React40.forwardRef(
 Divider.displayName = "Divider";
 
 // src/components/list/List.tsx
-var import_lucide_react12 = require("lucide-react");
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var List = React41.forwardRef(
+var import_lucide_react13 = require("lucide-react");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var List = React27.forwardRef(
   ({ className, children, ...props }, ref) => {
-    const childrenArray = React41.Children.toArray(children);
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ref, className: cn("flex flex-col", className), ...props, children: childrenArray.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(React41.Fragment, { children: [
+    const childrenArray = React27.Children.toArray(children);
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { ref, className: cn("flex flex-col", className), ...props, children: childrenArray.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(React27.Fragment, { children: [
       child,
-      index < childrenArray.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Divider, { variant: "subtle" })
+      index < childrenArray.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Divider, { variant: "subtle" })
     ] }, index)) });
   }
 );
 List.displayName = "List";
-var ListItem = React41.forwardRef(
-  ({ className, icon, children, interactive = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+var ListItem = React27.forwardRef(
+  ({ className, icon, children, interactive = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     "div",
     {
       ref,
@@ -3460,15 +3766,15 @@ var ListItem = React41.forwardRef(
       ),
       ...props,
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex-shrink-0 flex items-center justify-center", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex-1 min-w-0", children })
+        icon && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex-shrink-0 flex items-center justify-center", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex-1 min-w-0", children })
       ]
     }
   )
 );
 ListItem.displayName = "ListItem";
-var ListHeader = React41.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+var ListHeader = React27.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     "div",
     {
       ref,
@@ -3479,21 +3785,21 @@ var ListHeader = React41.forwardRef(
   )
 );
 ListHeader.displayName = "ListHeader";
-var FeatureList = React41.forwardRef(
+var FeatureList = React27.forwardRef(
   ({ items, variant = "bullet", className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("ul", { ref, className: cn("flex flex-col gap-fluid-md", className), ...props, children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("li", { className: "flex items-start gap-fluid-md", children: [
-      variant === "bullet" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-berget-icon-muted flex-shrink-0 mt-2" }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex-shrink-0 mt-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { icon: import_lucide_react12.Check, size: 24, className: "text-berget-logo-light" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Typography, { variant: "body", color: "muted", children: item })
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("ul", { ref, className: cn("flex flex-col gap-fluid-md", className), ...props, children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("li", { className: "flex items-start gap-fluid-md", children: [
+      variant === "bullet" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-berget-icon-muted flex-shrink-0 mt-2" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex-shrink-0 mt-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon, { icon: import_lucide_react13.Check, size: 24, className: "text-berget-logo-light" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Typography, { variant: "body", color: "muted", children: item })
     ] }, index)) });
   }
 );
 FeatureList.displayName = "FeatureList";
 
 // src/components/hero-block/HeroBlock.tsx
-var React42 = __toESM(require("react"), 1);
-var import_class_variance_authority20 = require("class-variance-authority");
-var import_jsx_runtime41 = require("react/jsx-runtime");
-var heroBlockVariants = (0, import_class_variance_authority20.cva)(
+var React28 = __toESM(require("react"), 1);
+var import_class_variance_authority21 = require("class-variance-authority");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var heroBlockVariants = (0, import_class_variance_authority21.cva)(
   "relative overflow-hidden min-h-[40dvh] flex items-center py-fluid-2xl",
   {
     variants: {
@@ -3513,7 +3819,7 @@ var heroBlockVariants = (0, import_class_variance_authority20.cva)(
     }
   }
 );
-var HeroBlock = React42.forwardRef(
+var HeroBlock = React28.forwardRef(
   ({
     className,
     variant,
@@ -3525,26 +3831,26 @@ var HeroBlock = React42.forwardRef(
     actions,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       "div",
       {
         ref,
         className: cn(heroBlockVariants({ variant, withPattern }), className),
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "mx-auto text-center max-w-4xl", children: [
-          tagline && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "mx-auto text-center max-w-4xl", children: [
+          tagline && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             Badge,
             {
               variant: "default",
-              icon: TaglineIcon ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { icon: TaglineIcon, size: 16 }) : void 0,
+              icon: TaglineIcon ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icon, { icon: TaglineIcon, size: 16 }) : void 0,
               iconGap: 2,
               className: "mb-fluid-md",
               children: tagline
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Typography, { variant: "h1", className: "mb-fluid-md", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Typography, { variant: "h3", color: "muted", className: "mb-fluid-lg", children: description }),
-          actions && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex flex-wrap gap-fluid-md justify-center", children: actions })
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Typography, { variant: "h1", className: "mb-fluid-md", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Typography, { variant: "h3", color: "muted", className: "mb-fluid-lg", children: description }),
+          actions && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex flex-wrap gap-fluid-md justify-center", children: actions })
         ] }) })
       }
     );
@@ -3554,7 +3860,7 @@ HeroBlock.displayName = "HeroBlock";
 
 // src/components/code-block/CodeBlock.tsx
 var import_react2 = require("react");
-var import_lucide_react13 = require("lucide-react");
+var import_lucide_react14 = require("lucide-react");
 
 // src/lib/shiki.ts
 var import_core2 = require("shiki/core");
@@ -3595,7 +3901,7 @@ function getHighlighter() {
 }
 
 // src/components/code-block/CodeBlock.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function CodeBlock({ code, language = "text", title, className }) {
   const [html, setHtml] = (0, import_react2.useState)(null);
   const [copied, setCopied] = (0, import_react2.useState)(false);
@@ -3611,16 +3917,16 @@ function CodeBlock({ code, language = "text", title, className }) {
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   }, [code]);
-  const copyButton = /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  const copyButton = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     "button",
     {
       onClick: handleCopy,
       className: "flex items-center justify-center w-6 h-6 text-berget-muted-foreground hover:text-berget-foreground transition-colors",
       "aria-label": "Copy code",
-      children: copied ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react13.Check, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react13.Copy, { className: "w-3.5 h-3.5" })
+      children: copied ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react14.Check, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react14.Copy, { className: "w-3.5 h-3.5" })
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     "div",
     {
       className: cn(
@@ -3628,25 +3934,25 @@ function CodeBlock({ code, language = "text", title, className }) {
         className
       ),
       children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "!h-10 flex items-center !px-4 !text-xs !leading-normal border-b border-berget-border bg-berget-codeblock-header-bg", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-berget-muted-foreground", children: title }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "absolute right-2 top-2 z-10", children: copyButton }),
-        html ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        title && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "!h-10 flex items-center !px-4 !text-xs !leading-normal border-b border-berget-border bg-berget-codeblock-header-bg", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-berget-muted-foreground", children: title }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "absolute right-2 top-2 z-10", children: copyButton }),
+        html ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           "div",
           {
             className: "[&_.shiki]:!p-4 [&_.shiki]:!m-0 [&_.shiki]:overflow-x-auto [&_.shiki]:!text-sm [&_.shiki]:!leading-relaxed [&_.shiki]:bg-transparent",
             dangerouslySetInnerHTML: { __html: html }
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("pre", { className: "!p-4 !m-0 overflow-x-auto !text-sm !leading-relaxed text-berget-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("code", { children: code }) })
+        ) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("pre", { className: "!p-4 !m-0 overflow-x-auto !text-sm !leading-relaxed text-berget-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("code", { children: code }) })
       ]
     }
   );
 }
 
 // src/components/window-frame/WindowFrame.tsx
-var React43 = __toESM(require("react"), 1);
+var React29 = __toESM(require("react"), 1);
 var import_react3 = require("react");
-var import_jsx_runtime43 = require("react/jsx-runtime");
-var WindowFrame = React43.forwardRef(
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var WindowFrame = React29.forwardRef(
   ({ title = "window", tabs, activeTab, onTabChange, children, className, ...props }, ref) => {
     const [internalActive, setInternalActive] = (0, import_react3.useState)(tabs?.[0]?.id ?? "");
     const currentTab = activeTab ?? internalActive;
@@ -3657,7 +3963,7 @@ var WindowFrame = React43.forwardRef(
         setInternalActive(id);
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
       "div",
       {
         ref,
@@ -3667,13 +3973,13 @@ var WindowFrame = React43.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex items-center gap-2 px-4 py-3 border-b border-berget-brand-granite-700 bg-berget-brand-granite-900", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-3 h-3 rounded-full bg-[#FF5F56]" }),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-3 h-3 rounded-full bg-[#FFBD2E]" }),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-3 h-3 rounded-full bg-[#27C93F]" })
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center gap-2 px-4 py-3 border-b border-berget-brand-granite-700 bg-berget-brand-granite-900", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "w-3 h-3 rounded-full bg-[#FF5F56]" }),
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "w-3 h-3 rounded-full bg-[#FFBD2E]" }),
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "w-3 h-3 rounded-full bg-[#27C93F]" })
             ] }),
-            tabs && tabs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "ml-4 flex items-center gap-1", children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            tabs && tabs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "ml-4 flex items-center gap-1", children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
               "button",
               {
                 type: "button",
@@ -3685,15 +3991,333 @@ var WindowFrame = React43.forwardRef(
                 children: tab.label
               },
               tab.id
-            )) }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "ml-4 text-sm font-mono text-berget-brand-moss-400", children: title })
+            )) }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ml-4 text-sm font-mono text-berget-brand-moss-400", children: title })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { children })
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { children })
         ]
       }
     );
   }
 );
 WindowFrame.displayName = "WindowFrame";
+
+// src/components/fog-illustration/FogIllustration.tsx
+var import_react4 = require("react");
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var FOG_BRAND_PALETTE = {
+  ink: "#171a1a",
+  milk: "#f7f5ed",
+  moss: "#598c6b"
+};
+var hexToRgb = (hex) => {
+  let h = hex.replace("#", "");
+  if (h.length === 3)
+    h = h.split("").map((c) => c + c).join("");
+  const n = Number.parseInt(h, 16);
+  return [(n >> 16 & 255) / 255, (n >> 8 & 255) / 255, (n & 255) / 255];
+};
+var hexToRgbAll = (p) => ({
+  ink: hexToRgb(p.ink),
+  milk: hexToRgb(p.milk),
+  moss: hexToRgb(p.moss)
+});
+var VERT = `#version 300 es
+void main() {
+  vec2 p = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2));
+  gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0);
+}`;
+var SCENE_FRAG = `#version 300 es
+precision highp float;
+out vec4 outColor;
+uniform vec2 uRes;
+uniform float uTime;
+uniform sampler2D uNoise;
+
+float noise(vec3 x) {
+  // 3D value noise from the 2D random texture \u2014 iq's two-slice trick:
+  // z slices are tiled into the u axis, two neighbours mixed by fract(z).
+  vec3 p = floor(x), f = fract(x);
+  f = f * f * (3.0 - 2.0 * f);
+  vec2 uv = (p.xy + vec2(37.0, 239.0) * p.z) + f.xy;
+  vec2 rg = texture(uNoise, (uv + 0.5) / 256.0).xy;
+  return mix(rg.x, rg.y, f.z) * 2.0 - 1.0;
+}
+
+float ground(vec3 pos, int oct) {
+  float f = 0.0;
+  float s = 1.4;
+  vec3 p = pos * s * 0.1;
+  for (int i = 0; i < 6; i++) {
+    if (i >= oct) break;
+    f += abs(noise(p)) * s;
+    p = vec3(p.z * 5.0, p.xy * 3.0 + p.yx * 4.0 * vec2(1, -1)) * 2.0 / 5.0;
+    s /= 2.0;
+  }
+  return (pos.y + f) * 0.8;
+}
+
+float fogD(vec3 pos, int oct) {
+  float f = 0.0;
+  float s = 1.0;
+  vec3 p = pos * 0.7;
+  p += uTime * vec3(0.0, -0.02, 0.02);
+  for (int i = 0; i < 6; i++) {
+    if (i >= oct) break;
+    f += noise(p) * s;
+    p = vec3(p.z * 5.0, p.xy * 3.0 + p.yx * 4.0 * vec2(1, -1)) * 2.0 / 5.0;
+    s /= 1.7;
+  }
+  f += smoothstep(0.2, 0.0, abs(pos.y + 1.0)) * 0.4;
+  f += smoothstep(0.35, 0.15, abs(pos.y - 0.02)) * 0.7;
+  f *= 1.0 - smoothstep(-0.1, 0.55, pos.y);
+  f = smoothstep(0.45, 1.7, f);
+  float g = ground(pos, 2);
+  f *= 1.0 - g / (abs(g) + 0.04);
+  return f;
+}
+
+float airD(vec3 pos) { return exp2(-pos.y / 5.0 - 3.0); }
+
+void main() {
+  float time = uTime * 0.2;
+  vec3 velocity = vec3(1.0, 0.0, 0.0);
+  vec3 camPos = vec3(sin(time * 0.618) * 0.4, 0.62 + 0.08 * sin(time), 0.0) + time * velocity;
+  vec3 camLook = vec3(-1.0, -0.3, 4.0) + (time - sin(time)) * velocity;
+
+  vec2 fc = gl_FragCoord.xy;
+  vec3 ray = vec3((fc - uRes * 0.5) / uRes.x, 1.0);
+  vec3 camDir = normalize(camLook - camPos);
+  vec3 camRight = normalize(cross(vec3(0.0, 1.0, 0.0), camDir));
+  vec3 camUp = cross(camDir, camRight);
+  ray = normalize(ray.x * camRight + ray.y * camUp + ray.z * camDir);
+
+  vec3 sunDir = normalize(vec3(-3.0, 2.0, 1.0));
+
+  vec3 pos = camPos;
+  float absorption = 1.0;
+  float emission = 0.0;
+  float fogFactor = 0.0;
+  float lastStride = 0.0;
+  float lastFog = 0.0;
+  float lastAir = 0.0;
+
+  for (int i = 0; i < 80; i++) {
+    float h = ground(pos, 4);
+    float fog = fogD(pos, 3);
+    float fogIntegral = lastStride * mix(fog, lastFog, 0.5);
+    float air = airD(pos);
+    float airIntegral = lastStride * mix(air, lastAir, 0.5);
+
+    float fogAbsDelta = pow(0.1, fogIntegral);
+    float fogEmiDelta = 1.0 - fogAbsDelta;
+    float shadowStep = 0.07;
+    float shadow = (fog - fogD(pos + sunDir * shadowStep, 2)) / shadowStep;
+    fogEmiDelta *= mix(0.2, 0.85, smoothstep(-1.0, 1.0, shadow));
+
+    float airAbsDelta = pow(0.55, airIntegral);
+    float airEmiDelta = (1.0 - pow(0.55, airIntegral)) * 0.5;
+
+    float absDelta = fogAbsDelta * airAbsDelta;
+    emission += absorption * sqrt(absDelta) * (fogEmiDelta + airEmiDelta);
+    absorption *= absDelta;
+
+    fogFactor = max(fogFactor, (1.0 - absorption) * step(0.05, fog));
+
+    lastFog = fog;
+    lastAir = air;
+    h = min(h, 0.1);
+    lastStride = h;
+    pos += h * ray;
+    if (h < 0.001) break;
+  }
+
+  float brightness;
+  if (absorption > 0.02) {
+    // terrain visible \u2014 light it
+    vec2 d = vec2(-1.0, 1.0) * 0.02;
+    vec3 normal = normalize(
+      ground(pos + d.xxx, 5) * d.xxx +
+      ground(pos + d.xyy, 5) * d.xyy +
+      ground(pos + d.yxy, 5) * d.yxy +
+      ground(pos + d.yyx, 5) * d.yyx
+    );
+    float ao = smoothstep(-0.2, 1.5, ground(pos + normal * 0.3, 5) / 0.3);
+    float shade = (0.5 * ao + 0.5 * max(dot(normal, sunDir), 0.0)) * 0.65;
+    brightness = shade * absorption + emission;
+  } else {
+    brightness = emission;
+  }
+
+  // Clear sky \u2014 rays that escape upward land on milk, whatever the
+  // haze did. The poster look: light sky, dark ridges, fog between.
+  float sky = smoothstep(-0.15, 0.35, ray.y) * 0.92;
+  brightness = max(brightness, sky * absorption);
+
+  outColor = vec4(clamp(brightness, 0.0, 1.0), clamp(fogFactor, 0.0, 1.0), 0.0, 1.0);
+}`;
+var DITHER_FRAG = `#version 300 es
+precision highp float;
+out vec4 outColor;
+uniform vec2 uRes;
+uniform float uDot;
+uniform sampler2D uScene;
+uniform vec3 uInk;
+uniform vec3 uMilk;
+uniform vec3 uMoss;
+
+float bayer2(vec2 a) { a = floor(a); return fract(a.x / 2.0 + a.y * a.y * 0.75); }
+float bayer4(vec2 a) { return bayer2(0.5 * a) * 0.25 + bayer2(a); }
+float hash12(vec2 p) {
+  vec3 p3 = fract(vec3(p.xyx) * 0.1031);
+  p3 += dot(p3, p3.yzx + 33.33);
+  return fract((p3.x + p3.y) * p3.z);
+}
+
+void main() {
+  // Chunky cells: one dot decision per uDot\xD7uDot block \u2014 the dither
+  // reads as visible pixels, not 1px noise.
+  vec2 cell = floor(gl_FragCoord.xy / uDot);
+  vec4 scene = texture(uScene, (cell * uDot + uDot * 0.5) / uRes);
+  float darkness = 1.0 - scene.r;
+  float jitter = (hash12(cell) - 0.5) * 0.3;
+  float on = step(darkness, bayer4(cell) + jitter);
+  vec3 col = scene.g > 0.5 ? uMoss : uInk;
+  outColor = vec4(mix(col, uMilk, on), 1.0);
+}`;
+var compile = (gl, type, src) => {
+  const sh = gl.createShader(type);
+  if (!sh) throw new Error("shader creation failed");
+  gl.shaderSource(sh, src);
+  gl.compileShader(sh);
+  if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
+    throw new Error(gl.getShaderInfoLog(sh) || "shader compile failed");
+  }
+  return sh;
+};
+var program = (gl, frag) => {
+  const p = gl.createProgram();
+  if (!p) throw new Error("program creation failed");
+  gl.attachShader(p, compile(gl, gl.VERTEX_SHADER, VERT));
+  gl.attachShader(p, compile(gl, gl.FRAGMENT_SHADER, frag));
+  gl.linkProgram(p);
+  if (!gl.getProgramParameter(p, gl.LINK_STATUS)) {
+    throw new Error(gl.getProgramInfoLog(p) || "program link failed");
+  }
+  return p;
+};
+var FogIllustration = ({ palette, speed = 1, className }) => {
+  const ref = (0, import_react4.useRef)(null);
+  const live = (0, import_react4.useRef)({ palette: { ...FOG_BRAND_PALETTE, ...palette }, speed });
+  live.current = { palette: { ...FOG_BRAND_PALETTE, ...palette }, speed };
+  (0, import_react4.useEffect)(() => {
+    const canvas = ref.current;
+    const parent = canvas?.parentElement;
+    if (!canvas || !parent) return;
+    const gl = canvas.getContext("webgl2", {
+      antialias: false,
+      alpha: false,
+      preserveDrawingBuffer: true
+    });
+    if (!gl) return;
+    let sceneProg;
+    let ditherProg;
+    try {
+      sceneProg = program(gl, SCENE_FRAG);
+      ditherProg = program(gl, DITHER_FRAG);
+    } catch (err) {
+      console.error("fog shader failed:", err);
+      return;
+    }
+    const noiseTex = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, noiseTex);
+    const N = 256;
+    const data = new Uint8Array(N * N * 4);
+    for (let i = 0; i < data.length; i += 4) {
+      data[i] = Math.random() * 256;
+      data[i + 1] = Math.random() * 256;
+      data[i + 2] = Math.random() * 256;
+      data[i + 3] = 255;
+    }
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, N, N, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    const sceneTex = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, sceneTex);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    const fbo = gl.createFramebuffer();
+    const SCALE = 0.3;
+    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const start = performance.now();
+    let raf = 0;
+    let last = 0;
+    const render = (elapsed) => {
+      const w = parent.clientWidth;
+      const h = parent.clientHeight;
+      if (w === 0 || h === 0) return;
+      const dpr = Math.min(window.devicePixelRatio || 1, 2);
+      if (canvas.width !== Math.round(w * dpr) || canvas.height !== Math.round(h * dpr)) {
+        canvas.width = Math.round(w * dpr);
+        canvas.height = Math.round(h * dpr);
+      }
+      const sceneW = Math.max(64, Math.round(w * SCALE));
+      const sceneH = Math.max(64, Math.round(h * SCALE));
+      gl.bindTexture(gl.TEXTURE_2D, sceneTex);
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, sceneW, sceneH, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+      const t = elapsed * live.current.speed;
+      gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+      gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, sceneTex, 0);
+      gl.viewport(0, 0, sceneW, sceneH);
+      gl.useProgram(sceneProg);
+      gl.activeTexture(gl.TEXTURE0);
+      gl.bindTexture(gl.TEXTURE_2D, noiseTex);
+      gl.uniform1i(gl.getUniformLocation(sceneProg, "uNoise"), 0);
+      gl.uniform2f(gl.getUniformLocation(sceneProg, "uRes"), sceneW, sceneH);
+      gl.uniform1f(gl.getUniformLocation(sceneProg, "uTime"), t);
+      gl.drawArrays(gl.TRIANGLES, 0, 3);
+      const { ink, milk, moss } = hexToRgbAll(live.current.palette);
+      gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+      gl.viewport(0, 0, canvas.width, canvas.height);
+      gl.useProgram(ditherProg);
+      gl.activeTexture(gl.TEXTURE0);
+      gl.bindTexture(gl.TEXTURE_2D, sceneTex);
+      gl.uniform1i(gl.getUniformLocation(ditherProg, "uScene"), 0);
+      gl.uniform2f(gl.getUniformLocation(ditherProg, "uRes"), canvas.width, canvas.height);
+      gl.uniform1f(gl.getUniformLocation(ditherProg, "uDot"), Math.max(3, Math.round(dpr * 2)));
+      gl.uniform3f(gl.getUniformLocation(ditherProg, "uInk"), ...ink);
+      gl.uniform3f(gl.getUniformLocation(ditherProg, "uMilk"), ...milk);
+      gl.uniform3f(gl.getUniformLocation(ditherProg, "uMoss"), ...moss);
+      gl.drawArrays(gl.TRIANGLES, 0, 3);
+    };
+    render(0);
+    if (!reduced) {
+      const frame = (now) => {
+        if (now - last >= 1e3 / 30) {
+          last = now;
+          render((now - start) / 1e3);
+        }
+        raf = requestAnimationFrame(frame);
+      };
+      raf = requestAnimationFrame(frame);
+    }
+    const observer = new ResizeObserver(() => render((performance.now() - start) / 1e3));
+    observer.observe(parent);
+    return () => {
+      cancelAnimationFrame(raf);
+      observer.disconnect();
+      gl.deleteProgram(sceneProg);
+      gl.deleteProgram(ditherProg);
+      gl.deleteTexture(noiseTex);
+      gl.deleteTexture(sceneTex);
+      gl.deleteFramebuffer(fbo);
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("canvas", { ref, "aria-hidden": "true", className: cn("size-full", className) });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
@@ -3751,6 +4375,7 @@ WindowFrame.displayName = "WindowFrame";
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
   EU_COUNTRY_CODES,
+  FOG_BRAND_PALETTE,
   FeatureList,
   Field,
   FieldContent,
@@ -3762,6 +4387,7 @@ WindowFrame.displayName = "WindowFrame";
   FieldSeparator,
   FieldSet,
   FieldTitle,
+  FogIllustration,
   Grid,
   HeroBlock,
   Icon,
@@ -3788,8 +4414,8 @@ WindowFrame.displayName = "WindowFrame";
   NavigationMenuItem,
   NavigationMenuLink,
   NavigationMenuList,
+  NavigationMenuPositioner,
   NavigationMenuTrigger,
-  NavigationMenuViewport,
   Select,
   Switch,
   Table,