@bergetai/ui 0.1.91 → 0.2.0

package/dist/index.js

@@ -528,15 +528,449 @@ var Alert2 = React9.forwardRef(
 );
 Alert2.displayName = "Alert";
 
-// src/components/input/Input.tsx
+// src/components/dialog/Dialog.tsx
+import * as React10 from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
+var Dialog = DialogPrimitive.Root;
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogPortal = DialogPrimitive.Portal;
+var DialogClose = DialogPrimitive.Close;
+var DialogOverlay = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-berget-dialog-overlay-bg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var DialogContent = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs3(DialogPortal, { children: [
+  /* @__PURE__ */ jsx11(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs3(
+    DialogPrimitive.Content,
+    {
+      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-berget-dialog-bg border-berget-dialog-border rounded-berget-sm p-6 shadow-berget-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs3(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-berget-xs opacity-70 ring-offset-berget-dialog-bg transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-berget-focus-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-berget-muted data-[state=open]:text-berget-muted-foreground", children: [
+          /* @__PURE__ */ jsx11(X, { className: "size-4" }),
+          /* @__PURE__ */ jsx11("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx11("div", { className: cn("flex flex-col gap-1.5 text-center sm:text-left", className), ...props });
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx11(
+  "div",
+  {
+    className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+    ...props
+  }
+);
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx11(DialogPrimitive.Title, { ref, asChild: true, ...props, children: /* @__PURE__ */ jsx11(Typography, { variant: "h5", color: "default", as: "h2", className, children }) }));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+var DialogDescription = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx11(DialogPrimitive.Description, { ref, asChild: true, ...props, children: /* @__PURE__ */ jsx11(Typography, { variant: "small", color: "muted", className, children }) }));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+// src/components/table/Table.tsx
+import * as React12 from "react";
+
+// src/primitives/table.tsx
 import * as React11 from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var Table = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx12("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx12("table", { ref, className: cn("w-full caption-bottom text-sm", className), ...props }) })
+);
+Table.displayName = "Table";
+var TableHeader = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx12("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+TableHeader.displayName = "TableHeader";
+var TableBody = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx12("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props }));
+TableBody.displayName = "TableBody";
+var TableFooter = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
+  "tfoot",
+  {
+    ref,
+    className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className),
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+var TableRow = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
+    "tr",
+    {
+      ref,
+      className: cn(
+        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      ),
+      ...props
+    }
+  )
+);
+TableRow.displayName = "TableRow";
+var TableHead = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
+  "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 = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
+  "td",
+  {
+    ref,
+    className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className),
+    ...props
+  }
+));
+TableCell.displayName = "TableCell";
+var TableCaption = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx12("caption", { ref, className: cn("mt-4 text-sm text-muted-foreground", className), ...props }));
+TableCaption.displayName = "TableCaption";
+
+// src/components/table/Table.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var Table2 = React12.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx13(Table, { ref, className, ...props })
+);
+Table2.displayName = "Table";
+var TableHeader2 = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(TableHeader, { ref, className: cn("[&_tr]:border-b", className), ...props }));
+TableHeader2.displayName = "TableHeader";
+var TableBody2 = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
+  TableBody,
+  {
+    ref,
+    className: cn("[&_tr:last-child]:border-0", className),
+    ...props
+  }
+));
+TableBody2.displayName = "TableBody";
+var TableFooter2 = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
+  TableFooter,
+  {
+    ref,
+    className: cn("border-t bg-berget-table-footer-bg font-medium [&>tr]:last:border-0", className),
+    ...props
+  }
+));
+TableFooter2.displayName = "TableFooter";
+var TableRow2 = React12.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
+    TableRow,
+    {
+      ref,
+      className: cn(
+        "border-b transition-colors hover:bg-berget-table-row-hover data-[state=selected]:bg-berget-table-row-selected",
+        className
+      ),
+      ...props
+    }
+  )
+);
+TableRow2.displayName = "TableRow";
+var TableHead2 = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
+  TableHead,
+  {
+    ref,
+    className: cn(
+      "h-12 px-4 text-left align-middle font-medium text-berget-table-head-text [&:has([role=checkbox])]:pr-0",
+      className
+    ),
+    ...props
+  }
+));
+TableHead2.displayName = "TableHead";
+var TableCell2 = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
+  TableCell,
+  {
+    ref,
+    className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className),
+    ...props
+  }
+));
+TableCell2.displayName = "TableCell";
+var TableCaption2 = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
+  TableCaption,
+  {
+    ref,
+    className: cn("mt-4 text-sm text-berget-table-caption-text", className),
+    ...props
+  }
+));
+TableCaption2.displayName = "TableCaption";
+
+// src/components/item/Item.tsx
+import * as React14 from "react";
+
+// src/primitives/item.tsx
+import { Slot as Slot2 } from "@radix-ui/react-slot";
+import { cva as cva7 } from "class-variance-authority";
+
+// src/primitives/separator.tsx
+import * as React13 from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var Separator = React13.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx14(
+  SeparatorPrimitive.Root,
+  {
+    ref,
+    decorative,
+    orientation,
+    className: cn(
+      "shrink-0 bg-border",
+      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+      className
+    ),
+    ...props
+  }
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+// src/primitives/item.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+function ItemGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      role: "list",
+      "data-slot": "item-group",
+      className: cn("group/item-group flex flex-col", className),
+      ...props
+    }
+  );
+}
+function ItemSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx15(
+    Separator,
+    {
+      "data-slot": "item-separator",
+      orientation: "horizontal",
+      className: cn("my-0", className),
+      ...props
+    }
+  );
+}
+var itemVariants = cva7(
+  "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]",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border-border",
+        muted: "bg-muted/50"
+      },
+      size: {
+        default: "gap-4 p-4 ",
+        sm: "gap-2.5 px-4 py-3"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot2 : "div";
+  return /* @__PURE__ */ jsx15(
+    Comp,
+    {
+      "data-slot": "item",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(itemVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+var itemMediaVariants = cva7(
+  "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"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      "data-slot": "item-media",
+      "data-variant": variant,
+      className: cn(itemMediaVariants({ variant, className })),
+      ...props
+    }
+  );
+}
+function ItemContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      "data-slot": "item-content",
+      className: cn("flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none", className),
+      ...props
+    }
+  );
+}
+function ItemTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      "data-slot": "item-title",
+      className: cn("flex w-fit items-center gap-2 text-sm font-medium leading-snug", className),
+      ...props
+    }
+  );
+}
+function ItemDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx15(
+    "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
+      ),
+      ...props
+    }
+  );
+}
+function ItemActions({ className, ...props }) {
+  return /* @__PURE__ */ jsx15("div", { "data-slot": "item-actions", className: cn("flex items-center gap-2", className), ...props });
+}
+function ItemHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      "data-slot": "item-header",
+      className: cn("flex basis-full items-center justify-between gap-2", className),
+      ...props
+    }
+  );
+}
+function ItemFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      "data-slot": "item-footer",
+      className: cn("flex basis-full items-center justify-between gap-2", className),
+      ...props
+    }
+  );
+}
+
+// src/components/item/Item.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+function Item2({ className, asChild, ...props }) {
+  return /* @__PURE__ */ jsx16(
+    Item,
+    {
+      asChild,
+      className: cn(
+        /* Variant colours — override primitive defaults */
+        "data-[variant=outline]:border-berget-item-outline-border",
+        "data-[variant=muted]:bg-berget-item-muted-bg",
+        "data-[variant=muted]:text-berget-item-muted-fg",
+        /* Hover / focus */
+        "[&_a]:hover:bg-berget-item-link-hover-surface",
+        "focus-visible:border-berget-item-focus-ring focus-visible:ring-berget-item-focus-ring/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var ItemMedia2 = React14.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx16(
+    ItemMedia,
+    {
+      ref,
+      className: cn("data-[variant=icon]:bg-berget-item-media-icon-bg", className),
+      ...props
+    }
+  );
+});
+ItemMedia2.displayName = "ItemMedia";
+var ItemTitle2 = React14.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx16(
+    ItemTitle,
+    {
+      ref,
+      className: cn("text-berget-item-default-fg", className),
+      ...props
+    }
+  );
+});
+ItemTitle2.displayName = "ItemTitle";
+var ItemDescription2 = React14.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx16(
+    ItemDescription,
+    {
+      ref,
+      className: cn("text-berget-item-description-fg", className),
+      ...props
+    }
+  );
+});
+ItemDescription2.displayName = "ItemDescription";
+var ItemSeparator2 = React14.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx16(
+    ItemSeparator,
+    {
+      ref,
+      className: cn("bg-berget-item-separator", className),
+      ...props
+    }
+  );
+});
+ItemSeparator2.displayName = "ItemSeparator";
+
+// src/components/input/Input.tsx
+import * as React16 from "react";
 
 // src/primitives/input.tsx
-import * as React10 from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
-var Input = React10.forwardRef(
+import * as React15 from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var Input = React15.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx17(
       "input",
       {
         type,
@@ -553,14 +987,14 @@ var Input = React10.forwardRef(
 Input.displayName = "Input";
 
 // src/components/input/Input.tsx
-import { jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
-var Input2 = React11.forwardRef(
+import { jsx as jsx18, jsxs as jsxs4 } from "react/jsx-runtime";
+var Input2 = React16.forwardRef(
   ({ className, icon, actionButton, label, description, error, id, disabled, ...props }, ref) => {
-    const generatedId = React11.useId();
+    const generatedId = React16.useId();
     const inputId = id || generatedId;
     const errorId = `${inputId}-error`;
     const descriptionId = `${inputId}-description`;
-    const inputElement = /* @__PURE__ */ jsx12(
+    const inputElement = /* @__PURE__ */ jsx18(
       Input,
       {
         ref,
@@ -580,8 +1014,8 @@ var Input2 = React11.forwardRef(
       }
     );
     if (!icon && !actionButton) {
-      return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2", children: [
-        label && /* @__PURE__ */ jsx12(
+      return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2", children: [
+        label && /* @__PURE__ */ jsx18(
           "label",
           {
             htmlFor: inputId,
@@ -594,9 +1028,9 @@ var Input2 = React11.forwardRef(
           }
         ),
         inputElement,
-        (description || error) && /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-1", children: [
-          description && /* @__PURE__ */ jsx12(Typography, { variant: "xs", color: "muted", id: descriptionId, children: description }),
-          error && /* @__PURE__ */ jsx12(
+        (description || error) && /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-1", children: [
+          description && /* @__PURE__ */ jsx18(Typography, { variant: "xs", color: "muted", id: descriptionId, children: description }),
+          error && /* @__PURE__ */ jsx18(
             Typography,
             {
               variant: "xs",
@@ -608,8 +1042,8 @@ var Input2 = React11.forwardRef(
         ] })
       ] });
     }
-    return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2", children: [
-      label && /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2", children: [
+      label && /* @__PURE__ */ jsx18(
         "label",
         {
           htmlFor: inputId,
@@ -621,14 +1055,14 @@ var Input2 = React11.forwardRef(
           children: label
         }
       ),
-      /* @__PURE__ */ jsxs3("div", { className: "relative w-full", children: [
-        icon && /* @__PURE__ */ jsx12("div", { className: "absolute left-3 top-1/2 -translate-y-1/2", children: icon }),
+      /* @__PURE__ */ jsxs4("div", { className: "relative w-full", children: [
+        icon && /* @__PURE__ */ jsx18("div", { className: "absolute left-3 top-1/2 -translate-y-1/2", children: icon }),
         inputElement,
-        actionButton && /* @__PURE__ */ jsx12("div", { className: "absolute right-2 top-1/2 -translate-y-1/2", children: actionButton })
+        actionButton && /* @__PURE__ */ jsx18("div", { className: "absolute right-2 top-1/2 -translate-y-1/2", children: actionButton })
       ] }),
-      (description || error) && /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-1", children: [
-        description && /* @__PURE__ */ jsx12(Typography, { variant: "xs", color: "muted", id: descriptionId, children: description }),
-        error && /* @__PURE__ */ jsx12(Typography, { variant: "xs", id: errorId, className: "text-berget-destructive-foreground", children: error })
+      (description || error) && /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-1", children: [
+        description && /* @__PURE__ */ jsx18(Typography, { variant: "xs", color: "muted", id: descriptionId, children: description }),
+        error && /* @__PURE__ */ jsx18(Typography, { variant: "xs", id: errorId, className: "text-berget-destructive-foreground", children: error })
       ] })
     ] });
   }
@@ -636,17 +1070,17 @@ var Input2 = React11.forwardRef(
 Input2.displayName = "Input";
 
 // src/components/checkbox/Checkbox.tsx
-import * as React13 from "react";
+import * as React18 from "react";
 import * as CheckboxPrimitive2 from "@radix-ui/react-checkbox";
 import { Check as Check2 } from "lucide-react";
-import { cva as cva7 } from "class-variance-authority";
+import { cva as cva8 } from "class-variance-authority";
 
 // src/primitives/checkbox.tsx
-import * as React12 from "react";
+import * as React17 from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check } from "lucide-react";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var Checkbox = React12.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx13(
+import { jsx as jsx19 } from "react/jsx-runtime";
+var Checkbox = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx19(
   CheckboxPrimitive.Root,
   {
     ref,
@@ -655,24 +1089,24 @@ var Checkbox = React12.forwardRef(({ className, children, ...props }, ref) => /*
       className
     ),
     ...props,
-    children: children ?? /* @__PURE__ */ jsx13(CheckboxPrimitive.Indicator, { className: cn("grid place-content-center"), children: /* @__PURE__ */ jsx13(Check, { className: "h-4 w-4" }) })
+    children: children ?? /* @__PURE__ */ jsx19(CheckboxPrimitive.Indicator, { className: cn("grid place-content-center"), children: /* @__PURE__ */ jsx19(Check, { className: "h-4 w-4" }) })
   }
 ));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-var CheckboxIndicator = React12.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx13(
+var CheckboxIndicator = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx19(
   CheckboxPrimitive.Indicator,
   {
     ref,
     className: cn("grid place-content-center", className),
     ...props,
-    children: children ?? /* @__PURE__ */ jsx13(Check, { className: "h-4 w-4" })
+    children: children ?? /* @__PURE__ */ jsx19(Check, { className: "h-4 w-4" })
   }
 ));
 CheckboxIndicator.displayName = CheckboxPrimitive.Indicator.displayName;
 
 // src/components/checkbox/Checkbox.tsx
-import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
-var checkboxVariants = cva7(
+import { jsx as jsx20, jsxs as jsxs5 } from "react/jsx-runtime";
+var checkboxVariants = cva8(
   "inline-flex items-center justify-center rounded-md transition-all duration-200 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
@@ -693,13 +1127,13 @@ var checkboxVariants = cva7(
     }
   }
 );
-var Checkbox2 = React13.forwardRef(
+var Checkbox2 = React18.forwardRef(
   ({ className, variant, size, label, description, error, id, disabled, ...props }, ref) => {
-    const generatedId = React13.useId();
+    const generatedId = React18.useId();
     const checkboxId = id || generatedId;
     const errorId = `${checkboxId}-error`;
-    return /* @__PURE__ */ jsxs4("div", { className: "flex items-start gap-3", children: [
-      /* @__PURE__ */ jsx14("div", { className: "relative flex items-start pt-0.5", children: /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsxs5("div", { className: "flex items-start gap-3", children: [
+      /* @__PURE__ */ jsx20("div", { className: "relative flex items-start pt-0.5", children: /* @__PURE__ */ jsx20(
         Checkbox,
         {
           ref,
@@ -714,7 +1148,7 @@ var Checkbox2 = React13.forwardRef(
             className
           ),
           ...props,
-          children: /* @__PURE__ */ jsx14(CheckboxPrimitive2.Indicator, { children: /* @__PURE__ */ jsx14(
+          children: /* @__PURE__ */ jsx20(CheckboxPrimitive2.Indicator, { children: /* @__PURE__ */ jsx20(
             Check2,
             {
               className: "h-4 w-4 text-current stroke-current",
@@ -723,8 +1157,8 @@ var Checkbox2 = React13.forwardRef(
           ) })
         }
       ) }),
-      (label || description || error) && /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-1", children: [
-        label && /* @__PURE__ */ jsx14(
+      (label || description || error) && /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-1", children: [
+        label && /* @__PURE__ */ jsx20(
           "label",
           {
             htmlFor: checkboxId,
@@ -736,8 +1170,8 @@ var Checkbox2 = React13.forwardRef(
             children: label
           }
         ),
-        description && /* @__PURE__ */ jsx14(Typography, { variant: "xs", color: "muted", children: description }),
-        error && /* @__PURE__ */ jsx14(Typography, { variant: "xs", id: errorId, className: "text-berget-destructive-foreground", children: error })
+        description && /* @__PURE__ */ jsx20(Typography, { variant: "xs", color: "muted", children: description }),
+        error && /* @__PURE__ */ jsx20(Typography, { variant: "xs", id: errorId, className: "text-berget-destructive-foreground", children: error })
       ] })
     ] });
   }
@@ -745,11 +1179,11 @@ var Checkbox2 = React13.forwardRef(
 Checkbox2.displayName = "Checkbox";
 
 // src/components/switch/Switch.tsx
-import * as React14 from "react";
+import * as React19 from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
-import { cva as cva8 } from "class-variance-authority";
-import { jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
-var switchRootVariants = cva8(
+import { cva as cva9 } from "class-variance-authority";
+import { jsx as jsx21, jsxs as jsxs6 } from "react/jsx-runtime";
+var switchRootVariants = cva9(
   "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: {
@@ -770,7 +1204,7 @@ var switchRootVariants = cva8(
     }
   }
 );
-var switchThumbVariants = cva8(
+var switchThumbVariants = cva9(
   "pointer-events-none block rounded-full ring-0 transition-transform shadow-berget-sm bg-berget-foreground",
   {
     variants: {
@@ -785,13 +1219,13 @@ var switchThumbVariants = cva8(
     }
   }
 );
-var Switch = React14.forwardRef(
+var Switch = React19.forwardRef(
   ({ className, variant, size, label, description, error, id, disabled, ...props }, ref) => {
-    const generatedId = React14.useId();
+    const generatedId = React19.useId();
     const switchId = id || generatedId;
     const errorId = `${switchId}-error`;
-    return /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx21(
         SwitchPrimitives.Root,
         {
           ref,
@@ -805,11 +1239,11 @@ var Switch = React14.forwardRef(
             className
           ),
           ...props,
-          children: /* @__PURE__ */ jsx15(SwitchPrimitives.Thumb, { className: cn(switchThumbVariants({ size })) })
+          children: /* @__PURE__ */ jsx21(SwitchPrimitives.Thumb, { className: cn(switchThumbVariants({ size })) })
         }
       ),
-      (label || description || error) && /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-1", children: [
-        label && /* @__PURE__ */ jsx15(
+      (label || description || error) && /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-1", children: [
+        label && /* @__PURE__ */ jsx21(
           "label",
           {
             htmlFor: switchId,
@@ -820,8 +1254,8 @@ var Switch = React14.forwardRef(
             children: label
           }
         ),
-        description && /* @__PURE__ */ jsx15(Typography, { variant: "xs", color: "muted", children: description }),
-        error && /* @__PURE__ */ jsx15(Typography, { variant: "xs", id: errorId, className: "text-berget-destructive-foreground", children: error })
+        description && /* @__PURE__ */ jsx21(Typography, { variant: "xs", color: "muted", children: description }),
+        error && /* @__PURE__ */ jsx21(Typography, { variant: "xs", id: errorId, className: "text-berget-destructive-foreground", children: error })
       ] })
     ] });
   }
@@ -829,17 +1263,17 @@ var Switch = React14.forwardRef(
 Switch.displayName = "Switch";
 
 // src/components/select/Select.tsx
-import * as React16 from "react";
-import { cva as cva9 } from "class-variance-authority";
+import * as React21 from "react";
+import { cva as cva10 } from "class-variance-authority";
 
 // src/primitives/select.tsx
-import * as React15 from "react";
+import * as React20 from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check as Check3, ChevronDown, ChevronUp } from "lucide-react";
-import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs7 } from "react/jsx-runtime";
 var Select = SelectPrimitive.Root;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs6(
+var SelectTrigger = React20.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs7(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -850,199 +1284,669 @@ var SelectTrigger = React15.forwardRef(({ className, children, ...props }, ref)
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx16(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx16(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+      /* @__PURE__ */ jsx22(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx22(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
     ]
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+var SelectScrollUpButton = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
-    className: cn("flex cursor-default items-center justify-center py-1", className),
-    ...props,
-    children: /* @__PURE__ */ jsx16(ChevronUp, { className: "h-4 w-4" })
+    className: cn("flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx22(ChevronUp, { className: "h-4 w-4" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn("flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx22(ChevronDown, { className: "h-4 w-4" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React20.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx22(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs7(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx22(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx22(
+        SelectPrimitive.Viewport,
+        {
+          className: cn(
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx22(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn("py-1.5 pl-8 pr-2 text-sm ", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React20.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs7(
+  SelectPrimitive.Item,
+  {
+    ref,
+    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
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx22("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx22(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx22(Check3, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx22(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+// src/components/select/Select.tsx
+import { jsx as jsx23, jsxs as jsxs8 } from "react/jsx-runtime";
+var selectVariants = cva10(
+  "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: {
+      variant: {
+        default: "border-berget-border-interactive hover:bg-berget-surface-hover",
+        primary: "border-berget-primary-border bg-berget-primary-tint hover:bg-berget-surface-hover",
+        subtle: "border-berget-border-subtle hover:bg-berget-surface-hover",
+        muted: "border-berget-border-subtle/50 hover:bg-berget-surface-hover"
+      },
+      size: {
+        sm: "px-3 py-2 text-xs",
+        default: "px-4 py-3 text-sm",
+        lg: "px-5 py-4 text-base"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Select2 = React21.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    label,
+    description,
+    error,
+    placeholder,
+    options,
+    id,
+    disabled,
+    value,
+    defaultValue,
+    onValueChange,
+    name,
+    required
+  }, ref) => {
+    const generatedId = React21.useId();
+    const selectId = id || generatedId;
+    const errorId = `${selectId}-error`;
+    const descriptionId = `${selectId}-description`;
+    return /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-2", children: [
+      label && /* @__PURE__ */ jsx23(
+        "label",
+        {
+          htmlFor: selectId,
+          className: cn(
+            "text-sm font-sans leading-none",
+            disabled ? "text-muted-foreground cursor-not-allowed" : "text-foreground",
+            error && "text-berget-destructive-foreground"
+          ),
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsxs8(
+        Select,
+        {
+          value,
+          defaultValue,
+          onValueChange,
+          disabled,
+          name,
+          required,
+          children: [
+            /* @__PURE__ */ jsx23(
+              SelectTrigger,
+              {
+                ref,
+                id: selectId,
+                "aria-invalid": !!error,
+                "aria-describedby": cn(error && errorId, description && descriptionId),
+                className: cn(
+                  selectVariants({ variant, size }),
+                  error && "border-berget-destructive-foreground/50 bg-berget-destructive",
+                  className
+                ),
+                children: /* @__PURE__ */ jsx23(SelectValue, { placeholder })
+              }
+            ),
+            /* @__PURE__ */ jsx23(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx23(SelectItem, { value: option.value, disabled: option.disabled, children: option.label }, option.value)) })
+          ]
+        }
+      ),
+      description && /* @__PURE__ */ jsx23(Typography, { variant: "xs", color: "muted", id: descriptionId, children: description }),
+      error && /* @__PURE__ */ jsx23(Typography, { variant: "xs", id: errorId, className: "text-berget-destructive-foreground", children: error })
+    ] });
+  }
+);
+Select2.displayName = "Select";
+
+// src/components/country-select/CountrySelect.tsx
+import * as React26 from "react";
+import { ChevronDown as ChevronDown2, Globe } from "lucide-react";
+
+// src/components/icon/Icon.tsx
+import * as React22 from "react";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var iconStrokeMap = {
+  16: 1.4,
+  24: 1.6,
+  32: 1.8
+};
+var Icon2 = React22.forwardRef(
+  ({
+    icon: IconComponent,
+    size,
+    className,
+    "aria-label": ariaLabel,
+    "aria-hidden": ariaHidden = true,
+    ...props
+  }, ref) => {
+    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__ */ jsx24(
+      IconComponent,
+      {
+        ref,
+        className: cn(sizeClass, className),
+        strokeWidth,
+        ...ariaAttributes,
+        ...props
+      }
+    );
+  }
+);
+Icon2.displayName = "Icon";
+
+// src/primitives/popover.tsx
+import * as React23 from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverContent = React23.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx25(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx25(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+// src/primitives/command.tsx
+import * as React25 from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+
+// src/primitives/dialog.tsx
+import * as React24 from "react";
+import * as DialogPrimitive2 from "@radix-ui/react-dialog";
+import { X as X2 } from "lucide-react";
+import { jsx as jsx26, jsxs as jsxs9 } from "react/jsx-runtime";
+var DialogPortal2 = DialogPrimitive2.Portal;
+var DialogOverlay2 = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
+  DialogPrimitive2.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay2.displayName = DialogPrimitive2.Overlay.displayName;
+var DialogContent2 = React24.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs9(DialogPortal2, { children: [
+  /* @__PURE__ */ jsx26(DialogOverlay2, {}),
+  /* @__PURE__ */ jsxs9(
+    DialogPrimitive2.Content,
+    {
+      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 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs9(DialogPrimitive2.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-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+          /* @__PURE__ */ jsx26(X2, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx26("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+DialogContent2.displayName = DialogPrimitive2.Content.displayName;
+var DialogHeader2 = ({ className, ...props }) => /* @__PURE__ */ jsx26("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__ */ jsx26(
+  "div",
+  {
+    className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
+    ...props
+  }
+);
+DialogFooter2.displayName = "DialogFooter";
+var DialogTitle2 = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
+  DialogPrimitive2.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold leading-none tracking-tight", className),
+    ...props
   }
 ));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
-  SelectPrimitive.ScrollDownButton,
+DialogTitle2.displayName = DialogPrimitive2.Title.displayName;
+var DialogDescription2 = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
+  DialogPrimitive2.Description,
   {
     ref,
-    className: cn("flex cursor-default items-center justify-center py-1", className),
-    ...props,
-    children: /* @__PURE__ */ jsx16(ChevronDown, { className: "h-4 w-4" })
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
   }
 ));
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React15.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx16(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs6(
-  SelectPrimitive.Content,
+DialogDescription2.displayName = DialogPrimitive2.Description.displayName;
+
+// src/primitives/command.tsx
+import { jsx as jsx27, jsxs as jsxs10 } from "react/jsx-runtime";
+var Command = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx27(
+  CommandPrimitive,
   {
     ref,
     className: cn(
-      "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
-      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
       className
     ),
-    position,
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx16(SelectScrollUpButton, {}),
-      /* @__PURE__ */ jsx16(
-        SelectPrimitive.Viewport,
-        {
-          className: cn(
-            "p-1",
-            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-          ),
-          children
-        }
-      ),
-      /* @__PURE__ */ jsx16(SelectScrollDownButton, {})
-    ]
+    ...props
   }
-) }));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
-  SelectPrimitive.Label,
+));
+Command.displayName = CommandPrimitive.displayName;
+var CommandInput = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs10("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ jsx27(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+  /* @__PURE__ */ jsx27(
+    CommandPrimitive.Input,
+    {
+      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",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+var CommandList = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx27(
+  CommandPrimitive.List,
   {
     ref,
-    className: cn("py-1.5 pl-8 pr-2 text-sm ", className),
+    className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
     ...props
   }
 ));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs6(
-  SelectPrimitive.Item,
+CommandList.displayName = CommandPrimitive.List.displayName;
+var CommandEmpty = React25.forwardRef((props, ref) => /* @__PURE__ */ jsx27(CommandPrimitive.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+var CommandGroup = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx27(
+  CommandPrimitive.Group,
   {
     ref,
     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",
+      "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,
-    children: [
-      /* @__PURE__ */ jsx16("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx16(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx16(Check3, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ jsx16(SelectPrimitive.ItemText, { children })
-    ]
+    ...props
   }
 ));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
-  SelectPrimitive.Separator,
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+var CommandSeparator = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx27(
+  CommandPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    className: cn("-mx-1 h-px bg-border", className),
     ...props
   }
 ));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-
-// src/components/select/Select.tsx
-import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
-var selectVariants = cva9(
-  "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",
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+var CommandItem = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx27(
+  CommandPrimitive.Item,
   {
-    variants: {
-      variant: {
-        default: "border-berget-border-interactive hover:bg-berget-surface-hover",
-        primary: "border-berget-primary-border bg-berget-primary-tint hover:bg-berget-surface-hover",
-        subtle: "border-berget-border-subtle hover:bg-berget-surface-hover",
-        muted: "border-berget-border-subtle/50 hover:bg-berget-surface-hover"
-      },
-      size: {
-        sm: "px-3 py-2 text-xs",
-        default: "px-4 py-3 text-sm",
-        lg: "px-5 py-4 text-base"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
+    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
+    ),
+    ...props
   }
-);
-var Select2 = React16.forwardRef(
+));
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+var CommandShortcut = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx27(
+    "span",
+    {
+      className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className),
+      ...props
+    }
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+// src/components/country-select/countries.ts
+var COUNTRIES = [
+  { code: "DZ", name: "Algeria", flag: "\u{1F1E9}\u{1F1FF}" },
+  { code: "AR", name: "Argentina", flag: "\u{1F1E6}\u{1F1F7}" },
+  { code: "AU", name: "Australia", flag: "\u{1F1E6}\u{1F1FA}" },
+  { code: "AT", name: "Austria", flag: "\u{1F1E6}\u{1F1F9}" },
+  { code: "BE", name: "Belgium", flag: "\u{1F1E7}\u{1F1EA}" },
+  { code: "BG", name: "Bulgaria", flag: "\u{1F1E7}\u{1F1EC}" },
+  { code: "BO", name: "Bolivia", flag: "\u{1F1E7}\u{1F1F4}" },
+  { code: "BR", name: "Brazil", flag: "\u{1F1E7}\u{1F1F7}" },
+  { code: "CA", name: "Canada", flag: "\u{1F1E8}\u{1F1E6}" },
+  { code: "CL", name: "Chile", flag: "\u{1F1E8}\u{1F1F1}" },
+  { code: "CN", name: "China", flag: "\u{1F1E8}\u{1F1F3}" },
+  { code: "CO", name: "Colombia", flag: "\u{1F1E8}\u{1F1F4}" },
+  { code: "CR", name: "Costa Rica", flag: "\u{1F1E8}\u{1F1F7}" },
+  { code: "CY", name: "Cyprus", flag: "\u{1F1E8}\u{1F1FE}" },
+  { code: "HR", name: "Croatia", flag: "\u{1F1ED}\u{1F1F7}" },
+  { code: "CZ", name: "Czech Republic", flag: "\u{1F1E8}\u{1F1FF}" },
+  { code: "DK", name: "Denmark", flag: "\u{1F1E9}\u{1F1F0}" },
+  { code: "DO", name: "Dominican Republic", flag: "\u{1F1E9}\u{1F1F4}" },
+  { code: "EC", name: "Ecuador", flag: "\u{1F1EA}\u{1F1E8}" },
+  { code: "EG", name: "Egypt", flag: "\u{1F1EA}\u{1F1EC}" },
+  { code: "EE", name: "Estonia", flag: "\u{1F1EA}\u{1F1EA}" },
+  { code: "ET", name: "Ethiopia", flag: "\u{1F1EA}\u{1F1F9}" },
+  { code: "FI", name: "Finland", flag: "\u{1F1EB}\u{1F1EE}" },
+  { code: "FR", name: "France", flag: "\u{1F1EB}\u{1F1F7}" },
+  { code: "DE", name: "Germany", flag: "\u{1F1E9}\u{1F1EA}" },
+  { code: "GR", name: "Greece", flag: "\u{1F1EC}\u{1F1F7}" },
+  { code: "GT", name: "Guatemala", flag: "\u{1F1EC}\u{1F1F9}" },
+  { code: "HN", name: "Honduras", flag: "\u{1F1ED}\u{1F1F3}" },
+  { code: "HK", name: "Hong Kong", flag: "\u{1F1ED}\u{1F1F0}" },
+  { code: "HU", name: "Hungary", flag: "\u{1F1ED}\u{1F1FA}" },
+  { code: "IN", name: "India", flag: "\u{1F1EE}\u{1F1F3}" },
+  { code: "ID", name: "Indonesia", flag: "\u{1F1EE}\u{1F1E9}" },
+  { code: "IE", name: "Ireland", flag: "\u{1F1EE}\u{1F1EA}" },
+  { code: "IL", name: "Israel", flag: "\u{1F1EE}\u{1F1F1}" },
+  { code: "IT", name: "Italy", flag: "\u{1F1EE}\u{1F1F9}" },
+  { code: "JP", name: "Japan", flag: "\u{1F1EF}\u{1F1F5}" },
+  { code: "KE", name: "Kenya", flag: "\u{1F1F0}\u{1F1EA}" },
+  { code: "LT", name: "Lithuania", flag: "\u{1F1F1}\u{1F1F9}" },
+  { code: "LV", name: "Latvia", flag: "\u{1F1F1}\u{1F1FB}" },
+  { code: "LU", name: "Luxembourg", flag: "\u{1F1F1}\u{1F1FA}" },
+  { code: "MA", name: "Morocco", flag: "\u{1F1F2}\u{1F1E6}" },
+  { code: "MT", name: "Malta", flag: "\u{1F1F2}\u{1F1F9}" },
+  { code: "MX", name: "Mexico", flag: "\u{1F1F2}\u{1F1FD}" },
+  { code: "MN", name: "Mongolia", flag: "\u{1F1F2}\u{1F1F3}" },
+  { code: "NL", name: "Netherlands", flag: "\u{1F1F3}\u{1F1F1}" },
+  { code: "NZ", name: "New Zealand", flag: "\u{1F1F3}\u{1F1FF}" },
+  { code: "NO", name: "Norway", flag: "\u{1F1F3}\u{1F1F4}" },
+  { code: "PK", name: "Pakistan", flag: "\u{1F1F5}\u{1F1F0}" },
+  { code: "PA", name: "Panama", flag: "\u{1F1F5}\u{1F1E6}" },
+  { code: "PE", name: "Peru", flag: "\u{1F1F5}\u{1F1EA}" },
+  { code: "PL", name: "Poland", flag: "\u{1F1F5}\u{1F1F1}" },
+  { code: "PT", name: "Portugal", flag: "\u{1F1F5}\u{1F1F9}" },
+  { code: "RO", name: "Romania", flag: "\u{1F1F7}\u{1F1F4}" },
+  { code: "SA", name: "Saudi Arabia", flag: "\u{1F1F8}\u{1F1E6}" },
+  { code: "SG", name: "Singapore", flag: "\u{1F1F8}\u{1F1EC}" },
+  { code: "SK", name: "Slovakia", flag: "\u{1F1F8}\u{1F1F0}" },
+  { code: "SI", name: "Slovenia", flag: "\u{1F1F8}\u{1F1EE}" },
+  { code: "ZA", name: "South Africa", flag: "\u{1F1FF}\u{1F1E6}" },
+  { code: "ES", name: "Spain", flag: "\u{1F1EA}\u{1F1F8}" },
+  { code: "SE", name: "Sweden", flag: "\u{1F1F8}\u{1F1EA}" },
+  { code: "CH", name: "Switzerland", flag: "\u{1F1E8}\u{1F1ED}" },
+  { code: "TW", name: "Taiwan", flag: "\u{1F1F9}\u{1F1FC}" },
+  { code: "TH", name: "Thailand", flag: "\u{1F1F9}\u{1F1ED}" },
+  { code: "TR", name: "Turkey", flag: "\u{1F1F9}\u{1F1F7}" },
+  { code: "AE", name: "United Arab Emirates", flag: "\u{1F1E6}\u{1F1EA}" },
+  { code: "GB", name: "United Kingdom", flag: "\u{1F1EC}\u{1F1E7}" },
+  { code: "UA", name: "Ukraine", flag: "\u{1F1FA}\u{1F1E6}" },
+  { code: "US", name: "United States", flag: "\u{1F1FA}\u{1F1F8}" },
+  { code: "UY", name: "Uruguay", flag: "\u{1F1FA}\u{1F1FE}" },
+  { code: "VE", name: "Venezuela", flag: "\u{1F1FB}\u{1F1EA}" },
+  { code: "VN", name: "Vietnam", flag: "\u{1F1FB}\u{1F1F3}" }
+];
+var getCountryByCode = (code) => {
+  return COUNTRIES.find((country) => country.code === code);
+};
+var getCountryByName = (name) => {
+  return COUNTRIES.find((country) => country.name.toLowerCase() === name.toLowerCase());
+};
+var EU_COUNTRY_CODES = [
+  "AT",
+  // Austria
+  "BE",
+  // Belgium
+  "BG",
+  // Bulgaria
+  "HR",
+  // Croatia
+  "CY",
+  // Cyprus
+  "CZ",
+  // Czech Republic
+  "DK",
+  // Denmark
+  "EE",
+  // Estonia
+  "FI",
+  // Finland
+  "FR",
+  // France
+  "DE",
+  // Germany
+  "GR",
+  // Greece
+  "HU",
+  // Hungary
+  "IE",
+  // Ireland
+  "IT",
+  // Italy
+  "LV",
+  // Latvia
+  "LT",
+  // Lithuania
+  "LU",
+  // Luxembourg
+  "MT",
+  // Malta
+  "NL",
+  // Netherlands
+  "PL",
+  // Poland
+  "PT",
+  // Portugal
+  "RO",
+  // Romania
+  "SK",
+  // Slovakia
+  "SI",
+  // Slovenia
+  "ES",
+  // Spain
+  "SE"
+  // Sweden
+];
+var isEUCountry = (countryCode) => {
+  return EU_COUNTRY_CODES.includes(countryCode);
+};
+
+// src/components/country-select/CountrySelect.tsx
+import { Fragment, jsx as jsx28, jsxs as jsxs11 } from "react/jsx-runtime";
+var CountrySelect = React26.forwardRef(
   ({
-    className,
-    variant,
-    size,
-    label,
-    description,
-    error,
-    placeholder,
-    options,
-    id,
-    disabled,
     value,
-    defaultValue,
     onValueChange,
-    name,
-    required
+    placeholder = "Select country",
+    disabled = false,
+    className,
+    align = "center",
+    sideOffset = 4
   }, ref) => {
-    const generatedId = React16.useId();
-    const selectId = id || generatedId;
-    const errorId = `${selectId}-error`;
-    const descriptionId = `${selectId}-description`;
-    return /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-2", children: [
-      label && /* @__PURE__ */ jsx17(
-        "label",
+    const [open, setOpen] = React26.useState(false);
+    const selectedCountry = React26.useMemo(() => COUNTRIES.find((c) => c.code === value), [value]);
+    return /* @__PURE__ */ jsxs11(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx28(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs11(
+        "button",
         {
-          htmlFor: selectId,
+          ref,
+          type: "button",
+          disabled,
+          "aria-expanded": open,
           className: cn(
-            "text-sm font-sans leading-none",
-            disabled ? "text-muted-foreground cursor-not-allowed" : "text-foreground",
-            error && "text-berget-destructive-foreground"
+            // 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: label
-        }
-      ),
-      /* @__PURE__ */ jsxs7(
-        Select,
-        {
-          value,
-          defaultValue,
-          onValueChange,
-          disabled,
-          name,
-          required,
           children: [
-            /* @__PURE__ */ jsx17(
-              SelectTrigger,
+            /* @__PURE__ */ jsx28("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: selectedCountry ? /* @__PURE__ */ jsxs11(Fragment, { children: [
+              /* @__PURE__ */ jsx28("span", { className: "text-xl flex-shrink-0", children: selectedCountry.flag }),
+              /* @__PURE__ */ jsx28("span", { className: "truncate", children: selectedCountry.name }),
+              /* @__PURE__ */ jsxs11("span", { className: "text-berget-muted-foreground text-xs flex-shrink-0", children: [
+                "(",
+                selectedCountry.code,
+                ")"
+              ] })
+            ] }) : /* @__PURE__ */ jsxs11(Fragment, { children: [
+              /* @__PURE__ */ jsx28(
+                Icon2,
+                {
+                  icon: Globe,
+                  size: 16,
+                  className: "flex-shrink-0 text-berget-muted-foreground"
+                }
+              ),
+              /* @__PURE__ */ jsx28("span", { className: "text-berget-muted-foreground truncate", children: placeholder })
+            ] }) }),
+            /* @__PURE__ */ jsx28(
+              Icon2,
               {
-                ref,
-                id: selectId,
-                "aria-invalid": !!error,
-                "aria-describedby": cn(error && errorId, description && descriptionId),
+                icon: ChevronDown2,
+                size: 16,
                 className: cn(
-                  selectVariants({ variant, size }),
-                  error && "border-berget-destructive-foreground/50 bg-berget-destructive",
-                  className
-                ),
-                children: /* @__PURE__ */ jsx17(SelectValue, { placeholder })
+                  "flex-shrink-0 text-berget-muted-foreground",
+                  "transition-transform duration-200",
+                  open && "rotate-180"
+                )
               }
-            ),
-            /* @__PURE__ */ jsx17(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx17(SelectItem, { value: option.value, disabled: option.disabled, children: option.label }, option.value)) })
+            )
           ]
         }
-      ),
-      description && /* @__PURE__ */ jsx17(Typography, { variant: "xs", color: "muted", id: descriptionId, children: description }),
-      error && /* @__PURE__ */ jsx17(Typography, { variant: "xs", id: errorId, className: "text-berget-destructive-foreground", children: error })
+      ) }),
+      /* @__PURE__ */ jsx28(
+        PopoverContent,
+        {
+          align,
+          sideOffset,
+          className: "w-[var(--radix-popover-trigger-width)] p-0",
+          children: /* @__PURE__ */ jsxs11(Command, { children: [
+            /* @__PURE__ */ jsx28(CommandInput, { placeholder: "Search country..." }),
+            /* @__PURE__ */ jsxs11(CommandList, { children: [
+              /* @__PURE__ */ jsx28(CommandEmpty, { children: "No countries found." }),
+              /* @__PURE__ */ jsx28(CommandGroup, { children: COUNTRIES.map((country) => /* @__PURE__ */ jsxs11(
+                CommandItem,
+                {
+                  value: `${country.name} ${country.code}`,
+                  onSelect: () => {
+                    onValueChange?.(country.code);
+                    setOpen(false);
+                  },
+                  className: cn(
+                    "flex items-center gap-3 px-3 py-2.5",
+                    "data-[selected='true']:bg-berget-brand-granite-700/40! data-[selected=true]:text-berget-foreground",
+                    value === country.code && "bg-berget-brand-granite-800/40"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx28("span", { className: "text-xl flex-shrink-0", children: country.flag }),
+                    /* @__PURE__ */ jsxs11("div", { className: "flex-1 min-w-0", children: [
+                      /* @__PURE__ */ jsx28("div", { className: "text-sm truncate", children: country.name }),
+                      /* @__PURE__ */ jsx28("div", { className: "text-xs text-berget-muted-foreground", children: country.code })
+                    ] }),
+                    value === country.code && /* @__PURE__ */ jsx28("div", { className: "w-2 h-2 rounded-full bg-berget-brand-granite-400 flex-shrink-0" })
+                  ]
+                },
+                country.code
+              )) })
+            ] })
+          ] })
+        }
+      )
     ] });
   }
 );
-Select2.displayName = "Select";
+CountrySelect.displayName = "CountrySelect";
 
 // src/components/text-area/TextArea.tsx
-import * as React18 from "react";
-import { cva as cva10 } from "class-variance-authority";
+import * as React28 from "react";
+import { cva as cva11 } from "class-variance-authority";
 
 // src/primitives/textarea.tsx
-import * as React17 from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
-var Textarea = React17.forwardRef(
+import * as React27 from "react";
+import { jsx as jsx29 } from "react/jsx-runtime";
+var Textarea = React27.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx29(
       "textarea",
       {
         className: cn(
@@ -1058,8 +1962,8 @@ var Textarea = React17.forwardRef(
 Textarea.displayName = "Textarea";
 
 // src/components/text-area/TextArea.tsx
-import { jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
-var textAreaVariants = cva10(
+import { jsx as jsx30, jsxs as jsxs12 } from "react/jsx-runtime";
+var textAreaVariants = cva11(
   "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: {
@@ -1081,7 +1985,7 @@ var textAreaVariants = cva10(
     }
   }
 );
-var TextArea = React18.forwardRef(
+var TextArea = React28.forwardRef(
   ({
     className,
     variant,
@@ -1101,13 +2005,13 @@ var TextArea = React18.forwardRef(
     actionButton,
     ...props
   }, ref) => {
-    const generatedId = React18.useId();
+    const generatedId = React28.useId();
     const textareaId = id || generatedId;
     const errorId = `${textareaId}-error`;
     const descriptionId = `${textareaId}-description`;
     const characterCount = typeof value === "string" ? value.length : 0;
-    return /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-2", children: [
-      label && /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-2", children: [
+      label && /* @__PURE__ */ jsx30(
         "label",
         {
           htmlFor: textareaId,
@@ -1119,9 +2023,9 @@ var TextArea = React18.forwardRef(
           children: label
         }
       ),
-      /* @__PURE__ */ jsxs8("div", { className: "relative", children: [
-        icon && /* @__PURE__ */ jsx19("div", { className: "absolute left-2 top-1/2 -translate-y-1/2", children: icon }),
-        /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsxs12("div", { className: "relative", children: [
+        icon && /* @__PURE__ */ jsx30("div", { className: "absolute left-2 top-1/2 -translate-y-1/2", children: icon }),
+        /* @__PURE__ */ jsx30(
           Textarea,
           {
             ref,
@@ -1146,13 +2050,13 @@ var TextArea = React18.forwardRef(
             ...props
           }
         ),
-        secondaryIcon && /* @__PURE__ */ jsx19("div", { className: "absolute right-12 top-1/2 -translate-y-1/2", children: secondaryIcon }),
-        actionButton && /* @__PURE__ */ jsx19("div", { className: "absolute right-2 top-1/2 -translate-y-1/2", children: actionButton })
+        secondaryIcon && /* @__PURE__ */ jsx30("div", { className: "absolute right-12 top-1/2 -translate-y-1/2", children: secondaryIcon }),
+        actionButton && /* @__PURE__ */ jsx30("div", { className: "absolute right-2 top-1/2 -translate-y-1/2", children: actionButton })
       ] }),
-      (description || error || showCount && maxLength) && /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between gap-2", children: [
-        description && /* @__PURE__ */ jsx19(Typography, { variant: "xs", color: "muted", id: descriptionId, children: description }),
-        (error || showCount && maxLength) && /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2 ml-auto", children: [
-          showCount && maxLength && /* @__PURE__ */ jsxs8(
+      (description || error || showCount && maxLength) && /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between gap-2", children: [
+        description && /* @__PURE__ */ jsx30(Typography, { variant: "xs", color: "muted", id: descriptionId, children: description }),
+        (error || showCount && maxLength) && /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2 ml-auto", children: [
+          showCount && maxLength && /* @__PURE__ */ jsxs12(
             Typography,
             {
               variant: "xs",
@@ -1166,7 +2070,7 @@ var TextArea = React18.forwardRef(
               ]
             }
           ),
-          error && /* @__PURE__ */ jsx19(
+          error && /* @__PURE__ */ jsx30(
             Typography,
             {
               variant: "xs",
@@ -1183,44 +2087,22 @@ var TextArea = React18.forwardRef(
 TextArea.displayName = "TextArea";
 
 // src/primitives/label.tsx
-import * as React19 from "react";
+import * as React29 from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
-import { cva as cva11 } from "class-variance-authority";
-import { jsx as jsx20 } from "react/jsx-runtime";
-var labelVariants = cva11(
+import { cva as cva12 } from "class-variance-authority";
+import { jsx as jsx31 } from "react/jsx-runtime";
+var labelVariants = cva12(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
-var Label2 = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx20(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props }));
+var Label2 = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props }));
 Label2.displayName = LabelPrimitive.Root.displayName;
 
 // src/primitives/field.tsx
-import { useMemo as useMemo2 } from "react";
-import { cva as cva12 } from "class-variance-authority";
-
-// src/primitives/separator.tsx
-import * as React20 from "react";
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import { jsx as jsx21 } from "react/jsx-runtime";
-var Separator2 = React20.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx21(
-  SeparatorPrimitive.Root,
-  {
-    ref,
-    decorative,
-    orientation,
-    className: cn(
-      "shrink-0 bg-border",
-      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-      className
-    ),
-    ...props
-  }
-));
-Separator2.displayName = SeparatorPrimitive.Root.displayName;
-
-// src/primitives/field.tsx
-import { jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
+import { useMemo as useMemo3 } from "react";
+import { cva as cva13 } from "class-variance-authority";
+import { jsx as jsx32, jsxs as jsxs13 } from "react/jsx-runtime";
 function FieldSet({ className, ...props }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx32(
     "fieldset",
     {
       "data-slot": "field-set",
@@ -1238,7 +2120,7 @@ function FieldLegend({
   variant = "legend",
   ...props
 }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx32(
     "legend",
     {
       "data-slot": "field-legend",
@@ -1254,7 +2136,7 @@ function FieldLegend({
   );
 }
 function FieldGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx32(
     "div",
     {
       "data-slot": "field-group",
@@ -1266,7 +2148,7 @@ function FieldGroup({ className, ...props }) {
     }
   );
 }
-var fieldVariants = cva12(
+var fieldVariants = cva13(
   "group/field data-[invalid=true]:text-berget-destructive-foreground flex w-full gap-3",
   {
     variants: {
@@ -1294,7 +2176,7 @@ function Field({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx32(
     "div",
     {
       role: "group",
@@ -1306,7 +2188,7 @@ function Field({
   );
 }
 function FieldContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx32(
     "div",
     {
       "data-slot": "field-content",
@@ -1316,7 +2198,7 @@ function FieldContent({ className, ...props }) {
   );
 }
 function FieldLabel({ className, ...props }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx32(
     Label2,
     {
       "data-slot": "field-label",
@@ -1331,7 +2213,7 @@ function FieldLabel({ className, ...props }) {
   );
 }
 function FieldTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx32(
     "div",
     {
       "data-slot": "field-label",
@@ -1344,7 +2226,7 @@ function FieldTitle({ className, ...props }) {
   );
 }
 function FieldDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx32(
     "p",
     {
       "data-slot": "field-description",
@@ -1363,7 +2245,7 @@ function FieldSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
       "data-slot": "field-separator",
@@ -1374,8 +2256,8 @@ function FieldSeparator({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx22(Separator2, { className: "absolute inset-0 top-1/2" }),
-        children && /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx32(Separator, { className: "absolute inset-0 top-1/2" }),
+        children && /* @__PURE__ */ jsx32(
           "span",
           {
             className: "bg-berget-background text-berget-muted-foreground relative mx-auto block w-fit px-2",
@@ -1393,7 +2275,7 @@ function FieldError({
   errors,
   ...props
 }) {
-  const content = useMemo2(() => {
+  const content = useMemo3(() => {
     if (children) {
       return children;
     }
@@ -1403,12 +2285,12 @@ function FieldError({
     if (errors?.length === 1 && errors[0]?.message) {
       return errors[0].message;
     }
-    return /* @__PURE__ */ jsx22("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: errors.map((error, index) => error?.message && /* @__PURE__ */ jsx22("li", { children: error.message }, index)) });
+    return /* @__PURE__ */ jsx32("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: errors.map((error, index) => error?.message && /* @__PURE__ */ jsx32("li", { children: error.message }, index)) });
   }, [children, errors]);
   if (!content) {
     return null;
   }
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx32(
     "div",
     {
       role: "alert",
@@ -1421,47 +2303,11 @@ function FieldError({
 }
 
 // src/components/link/Link.tsx
-import * as React22 from "react";
-import { cva as cva13 } from "class-variance-authority";
-
-// src/components/icon/Icon.tsx
-import * as React21 from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
-var iconStrokeMap = {
-  16: 1.4,
-  24: 1.6,
-  32: 1.8
-};
-var Icon2 = React21.forwardRef(
-  ({
-    icon: IconComponent,
-    size,
-    className,
-    "aria-label": ariaLabel,
-    "aria-hidden": ariaHidden = true,
-    ...props
-  }, ref) => {
-    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__ */ jsx23(
-      IconComponent,
-      {
-        ref,
-        className: cn(sizeClass, className),
-        strokeWidth,
-        ...ariaAttributes,
-        ...props
-      }
-    );
-  }
-);
-Icon2.displayName = "Icon";
-
-// src/components/link/Link.tsx
+import * as React30 from "react";
+import { cva as cva14 } from "class-variance-authority";
 import { ExternalLink } from "lucide-react";
-import { jsx as jsx24, jsxs as jsxs10 } from "react/jsx-runtime";
-var linkVariants = cva13(
+import { jsx as jsx33, jsxs as jsxs14 } from "react/jsx-runtime";
+var linkVariants = cva14(
   "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: {
@@ -1485,7 +2331,7 @@ var linkVariants = cva13(
     }
   }
 );
-var Link = React22.forwardRef(
+var Link = React30.forwardRef(
   ({
     className,
     variant,
@@ -1498,7 +2344,7 @@ var Link = React22.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__ */ jsxs10(
+    return /* @__PURE__ */ jsxs14(
       "a",
       {
         ref,
@@ -1514,8 +2360,8 @@ var Link = React22.forwardRef(
         },
         children: [
           children,
-          icon && /* @__PURE__ */ jsx24("span", { className: "inline-flex items-center", children: icon }),
-          showExternalIcon && isExternal && !disabled && /* @__PURE__ */ jsx24("span", { className: "inline-flex items-center ml-1 opacity-60", "aria-hidden": "true", children: /* @__PURE__ */ jsx24(Icon2, { icon: ExternalLink, size: 16 }) })
+          icon && /* @__PURE__ */ jsx33("span", { className: "inline-flex items-center", children: icon }),
+          showExternalIcon && isExternal && !disabled && /* @__PURE__ */ jsx33("span", { className: "inline-flex items-center ml-1 opacity-60", "aria-hidden": "true", children: /* @__PURE__ */ jsx33(Icon2, { icon: ExternalLink, size: 16 }) })
         ]
       }
     );
@@ -1524,11 +2370,11 @@ var Link = React22.forwardRef(
 Link.displayName = "Link";
 
 // src/components/container/Container.tsx
-import * as React23 from "react";
-import { Slot as Slot2 } from "@radix-ui/react-slot";
-import { cva as cva14 } from "class-variance-authority";
-import { jsx as jsx25 } from "react/jsx-runtime";
-var containerVariants = cva14("w-full mx-auto", {
+import * as React31 from "react";
+import { Slot as Slot3 } from "@radix-ui/react-slot";
+import { cva as cva15 } from "class-variance-authority";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var containerVariants = cva15("w-full mx-auto", {
   variants: {
     size: {
       sm: "max-w-3xl",
@@ -1549,10 +2395,10 @@ var containerVariants = cva14("w-full mx-auto", {
     padding: "md"
   }
 });
-var Container = React23.forwardRef(
+var Container = React31.forwardRef(
   ({ className, size, padding, asChild = false, children, ...props }, ref) => {
-    const Component = asChild ? Slot2 : "div";
-    return /* @__PURE__ */ jsx25(
+    const Component = asChild ? Slot3 : "div";
+    return /* @__PURE__ */ jsx34(
       Component,
       {
         ref,
@@ -1566,11 +2412,11 @@ var Container = React23.forwardRef(
 Container.displayName = "Container";
 
 // src/components/grid/Grid.tsx
-import * as React24 from "react";
-import { cva as cva15 } from "class-variance-authority";
-import { Slot as Slot3 } from "@radix-ui/react-slot";
-import { jsx as jsx26 } from "react/jsx-runtime";
-var gridVariants = cva15("grid", {
+import * as React32 from "react";
+import { cva as cva16 } from "class-variance-authority";
+import { Slot as Slot4 } from "@radix-ui/react-slot";
+import { jsx as jsx35 } from "react/jsx-runtime";
+var gridVariants = cva16("grid", {
   variants: {
     align: {
       start: "items-start",
@@ -1592,10 +2438,10 @@ var gridVariants = cva15("grid", {
     justify: "start"
   }
 });
-var Grid = React24.forwardRef(
+var Grid = React32.forwardRef(
   ({ className, align, justify, cols, rows, gap, gapX, gapY, asChild = false, children, ...props }, ref) => {
-    const Component = asChild ? Slot3 : "div";
-    return /* @__PURE__ */ jsx26(
+    const Component = asChild ? Slot4 : "div";
+    return /* @__PURE__ */ jsx35(
       Component,
       {
         ref,
@@ -1617,11 +2463,11 @@ var Grid = React24.forwardRef(
 Grid.displayName = "Grid";
 
 // src/components/box/Box.tsx
-import * as React25 from "react";
-import { cva as cva16 } from "class-variance-authority";
-import { Slot as Slot4 } from "@radix-ui/react-slot";
-import { jsx as jsx27 } from "react/jsx-runtime";
-var boxVariants = cva16("flex", {
+import * as React33 from "react";
+import { cva as cva17 } from "class-variance-authority";
+import { Slot as Slot5 } from "@radix-ui/react-slot";
+import { jsx as jsx36 } from "react/jsx-runtime";
+var boxVariants = cva17("flex", {
   variants: {
     direction: {
       row: "flex-row",
@@ -1657,10 +2503,10 @@ var boxVariants = cva16("flex", {
     wrap: "nowrap"
   }
 });
-var Box = React25.forwardRef(
+var Box = React33.forwardRef(
   ({ className, direction, align, justify, wrap, gap, asChild = false, children, ...props }, ref) => {
-    const Component = asChild ? Slot4 : "div";
-    return /* @__PURE__ */ jsx27(
+    const Component = asChild ? Slot5 : "div";
+    return /* @__PURE__ */ jsx36(
       Component,
       {
         ref,
@@ -1678,16 +2524,16 @@ var Box = React25.forwardRef(
 Box.displayName = "Box";
 
 // src/components/berget-logo/BergetLogo.tsx
-import * as React26 from "react";
-import { jsx as jsx28, jsxs as jsxs11 } from "react/jsx-runtime";
-var BergetLogo = React26.forwardRef(
+import * as React34 from "react";
+import { jsx as jsx37, jsxs as jsxs15 } from "react/jsx-runtime";
+var BergetLogo = React34.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__ */ jsx28(
+      return /* @__PURE__ */ jsx37(
         "svg",
         {
           ref,
@@ -1700,7 +2546,7 @@ var BergetLogo = React26.forwardRef(
           "aria-label": "Berget symbol",
           className: cn("inline-block", className),
           ...props,
-          children: /* @__PURE__ */ jsx28(
+          children: /* @__PURE__ */ jsx37(
             "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",
@@ -1713,7 +2559,7 @@ var BergetLogo = React26.forwardRef(
     const aspectRatio = 793.63 / 204.37;
     const width = size * aspectRatio;
     const height = size;
-    return /* @__PURE__ */ jsxs11(
+    return /* @__PURE__ */ jsxs15(
       "svg",
       {
         ref,
@@ -1727,59 +2573,59 @@ var BergetLogo = React26.forwardRef(
         className: cn("inline-block", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs11("g", { style: { fill: fillColor }, children: [
-            /* @__PURE__ */ jsx28(
+          /* @__PURE__ */ jsxs15("g", { style: { fill: fillColor }, children: [
+            /* @__PURE__ */ jsx37(
               "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__ */ jsx28(
+            /* @__PURE__ */ jsx37(
               "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__ */ jsx28(
+            /* @__PURE__ */ jsx37(
               "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__ */ jsx28(
+            /* @__PURE__ */ jsx37(
               "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__ */ jsx28(
+            /* @__PURE__ */ jsx37(
               "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__ */ jsx28(
+            /* @__PURE__ */ jsx37(
               "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__ */ jsx28(
+            /* @__PURE__ */ jsx37(
               "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__ */ jsx28("path", { className: "berget-logotype-fill", d: "M778.48,172.54v-96.04h15.15v96.04h-15.15Z" })
+            /* @__PURE__ */ jsx37("path", { className: "berget-logotype-fill", d: "M778.48,172.54v-96.04h15.15v96.04h-15.15Z" })
           ] }),
-          /* @__PURE__ */ jsx28(
+          /* @__PURE__ */ jsx37(
             "path",
             {
               style: { fill: fillColor },
@@ -1794,13 +2640,13 @@ var BergetLogo = React26.forwardRef(
 BergetLogo.displayName = "BergetLogo";
 
 // src/components/language-select/LanguageSelect.tsx
-import * as React27 from "react";
+import * as React35 from "react";
 import * as SelectPrimitive2 from "@radix-ui/react-select";
-import { Globe } from "lucide-react";
-import { jsx as jsx29, jsxs as jsxs12 } from "react/jsx-runtime";
-var LanguageSelect = React27.forwardRef(({ className, options, value, onValueChange }, ref) => {
-  return /* @__PURE__ */ jsxs12(SelectPrimitive2.Root, { value, onValueChange, children: [
-    /* @__PURE__ */ jsx29(
+import { Globe as Globe2 } from "lucide-react";
+import { jsx as jsx38, jsxs as jsxs16 } from "react/jsx-runtime";
+var LanguageSelect = React35.forwardRef(({ className, options, value, onValueChange }, ref) => {
+  return /* @__PURE__ */ jsxs16(SelectPrimitive2.Root, { value, onValueChange, children: [
+    /* @__PURE__ */ jsx38(
       SelectPrimitive2.Trigger,
       {
         ref,
@@ -1822,10 +2668,10 @@ var LanguageSelect = React27.forwardRef(({ className, options, value, onValueCha
           "disabled:cursor-not-allowed disabled:opacity-50",
           className
         ),
-        children: /* @__PURE__ */ jsx29(Icon2, { icon: Globe, size: 16 })
+        children: /* @__PURE__ */ jsx38(Icon2, { icon: Globe2, size: 16 })
       }
     ),
-    /* @__PURE__ */ jsx29(SelectPrimitive2.Portal, { children: /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx38(SelectPrimitive2.Portal, { children: /* @__PURE__ */ jsx38(
       SelectPrimitive2.Content,
       {
         className: cn(
@@ -1853,7 +2699,7 @@ var LanguageSelect = React27.forwardRef(({ className, options, value, onValueCha
           "origin-[--radix-select-content-transform-origin]"
         ),
         position: "popper",
-        children: /* @__PURE__ */ jsx29(SelectPrimitive2.Viewport, { className: "p-1", children: options.map((option) => /* @__PURE__ */ jsx29(
+        children: /* @__PURE__ */ jsx38(SelectPrimitive2.Viewport, { className: "p-1", children: options.map((option) => /* @__PURE__ */ jsx38(
           SelectPrimitive2.Item,
           {
             value: option.value,
@@ -1870,7 +2716,7 @@ var LanguageSelect = React27.forwardRef(({ className, options, value, onValueCha
               // Disabled state
               "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
             ),
-            children: /* @__PURE__ */ jsx29(SelectPrimitive2.ItemText, { children: option.label })
+            children: /* @__PURE__ */ jsx38(SelectPrimitive2.ItemText, { children: option.label })
           },
           option.value
         )) })
@@ -1881,13 +2727,13 @@ var LanguageSelect = React27.forwardRef(({ className, options, value, onValueCha
 LanguageSelect.displayName = "LanguageSelect";
 
 // src/components/list/List.tsx
-import * as React29 from "react";
+import * as React37 from "react";
 
 // src/components/divider/Divider.tsx
-import * as React28 from "react";
-import { cva as cva17 } from "class-variance-authority";
-import { jsx as jsx30, jsxs as jsxs13 } from "react/jsx-runtime";
-var dividerVariants = cva17("", {
+import * as React36 from "react";
+import { cva as cva18 } from "class-variance-authority";
+import { jsx as jsx39, jsxs as jsxs17 } from "react/jsx-runtime";
+var dividerVariants = cva18("", {
   variants: {
     variant: {
       default: "bg-berget-separator",
@@ -1907,7 +2753,7 @@ var dividerVariants = cva17("", {
     size: "thin"
   }
 });
-var Divider = React28.forwardRef(
+var Divider = React36.forwardRef(
   ({
     className,
     orientation = "horizontal",
@@ -1918,17 +2764,17 @@ var Divider = React28.forwardRef(
     ...props
   }, ref) => {
     if (label) {
-      return /* @__PURE__ */ jsxs13("div", { ref, className: cn("flex items-center w-full", className), ...props, children: [
-        labelPosition !== "right" && /* @__PURE__ */ jsx30(
-          Separator2,
+      return /* @__PURE__ */ jsxs17("div", { ref, className: cn("flex items-center w-full", className), ...props, children: [
+        labelPosition !== "right" && /* @__PURE__ */ jsx39(
+          Separator,
           {
             orientation: "horizontal",
             className: cn(dividerVariants({ variant, size }), "flex-1")
           }
         ),
-        /* @__PURE__ */ jsx30(Typography, { variant: "small", color: "muted", className: "px-4 whitespace-nowrap", children: label }),
-        labelPosition !== "left" && /* @__PURE__ */ jsx30(
-          Separator2,
+        /* @__PURE__ */ jsx39(Typography, { variant: "small", color: "muted", className: "px-4 whitespace-nowrap", children: label }),
+        labelPosition !== "left" && /* @__PURE__ */ jsx39(
+          Separator,
           {
             orientation: "horizontal",
             className: cn(dividerVariants({ variant, size }), "flex-1")
@@ -1936,8 +2782,8 @@ var Divider = React28.forwardRef(
         )
       ] });
     }
-    return /* @__PURE__ */ jsx30(
-      Separator2,
+    return /* @__PURE__ */ jsx39(
+      Separator,
       {
         ref,
         orientation,
@@ -1954,19 +2800,19 @@ Divider.displayName = "Divider";
 
 // src/components/list/List.tsx
 import { Check as Check4 } from "lucide-react";
-import { jsx as jsx31, jsxs as jsxs14 } from "react/jsx-runtime";
-var List = React29.forwardRef(
+import { jsx as jsx40, jsxs as jsxs18 } from "react/jsx-runtime";
+var List = React37.forwardRef(
   ({ className, children, ...props }, ref) => {
-    const childrenArray = React29.Children.toArray(children);
-    return /* @__PURE__ */ jsx31("div", { ref, className: cn("flex flex-col", className), ...props, children: childrenArray.map((child, index) => /* @__PURE__ */ jsxs14(React29.Fragment, { children: [
+    const childrenArray = React37.Children.toArray(children);
+    return /* @__PURE__ */ jsx40("div", { ref, className: cn("flex flex-col", className), ...props, children: childrenArray.map((child, index) => /* @__PURE__ */ jsxs18(React37.Fragment, { children: [
       child,
-      index < childrenArray.length - 1 && /* @__PURE__ */ jsx31(Divider, { variant: "subtle" })
+      index < childrenArray.length - 1 && /* @__PURE__ */ jsx40(Divider, { variant: "subtle" })
     ] }, index)) });
   }
 );
 List.displayName = "List";
-var ListItem = React29.forwardRef(
-  ({ className, icon, children, interactive = true, ...props }, ref) => /* @__PURE__ */ jsxs14(
+var ListItem = React37.forwardRef(
+  ({ className, icon, children, interactive = true, ...props }, ref) => /* @__PURE__ */ jsxs18(
     "div",
     {
       ref,
@@ -1977,15 +2823,15 @@ var ListItem = React29.forwardRef(
       ),
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsx31("div", { className: "flex-shrink-0 flex items-center justify-center", children: icon }),
-        /* @__PURE__ */ jsx31("div", { className: "flex-1 min-w-0", children })
+        icon && /* @__PURE__ */ jsx40("div", { className: "flex-shrink-0 flex items-center justify-center", children: icon }),
+        /* @__PURE__ */ jsx40("div", { className: "flex-1 min-w-0", children })
       ]
     }
   )
 );
 ListItem.displayName = "ListItem";
-var ListHeader = React29.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx31(
+var ListHeader = React37.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx40(
     "div",
     {
       ref,
@@ -1996,21 +2842,21 @@ var ListHeader = React29.forwardRef(
   )
 );
 ListHeader.displayName = "ListHeader";
-var FeatureList = React29.forwardRef(
+var FeatureList = React37.forwardRef(
   ({ items, variant = "bullet", className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx31("ul", { ref, className: cn("flex flex-col gap-fluid-md", className), ...props, children: items.map((item, index) => /* @__PURE__ */ jsxs14("li", { className: "flex items-start gap-fluid-md", children: [
-      variant === "bullet" ? /* @__PURE__ */ jsx31("span", { className: "w-1.5 h-1.5 rounded-full bg-berget-icon-muted flex-shrink-0 mt-2" }) : /* @__PURE__ */ jsx31("div", { className: "flex-shrink-0 mt-0.5", children: /* @__PURE__ */ jsx31(Icon2, { icon: Check4, size: 24, className: "text-berget-logo-light" }) }),
-      /* @__PURE__ */ jsx31(Typography, { variant: "body", color: "muted", children: item })
+    return /* @__PURE__ */ jsx40("ul", { ref, className: cn("flex flex-col gap-fluid-md", className), ...props, children: items.map((item, index) => /* @__PURE__ */ jsxs18("li", { className: "flex items-start gap-fluid-md", children: [
+      variant === "bullet" ? /* @__PURE__ */ jsx40("span", { className: "w-1.5 h-1.5 rounded-full bg-berget-icon-muted flex-shrink-0 mt-2" }) : /* @__PURE__ */ jsx40("div", { className: "flex-shrink-0 mt-0.5", children: /* @__PURE__ */ jsx40(Icon2, { icon: Check4, size: 24, className: "text-berget-logo-light" }) }),
+      /* @__PURE__ */ jsx40(Typography, { variant: "body", color: "muted", children: item })
     ] }, index)) });
   }
 );
 FeatureList.displayName = "FeatureList";
 
 // src/components/hero-block/HeroBlock.tsx
-import * as React30 from "react";
-import { cva as cva18 } from "class-variance-authority";
-import { jsx as jsx32, jsxs as jsxs15 } from "react/jsx-runtime";
-var heroBlockVariants = cva18(
+import * as React38 from "react";
+import { cva as cva19 } from "class-variance-authority";
+import { jsx as jsx41, jsxs as jsxs19 } from "react/jsx-runtime";
+var heroBlockVariants = cva19(
   "relative overflow-hidden min-h-[40dvh] flex items-center py-fluid-2xl",
   {
     variants: {
@@ -2030,7 +2876,7 @@ var heroBlockVariants = cva18(
     }
   }
 );
-var HeroBlock = React30.forwardRef(
+var HeroBlock = React38.forwardRef(
   ({
     className,
     variant,
@@ -2042,26 +2888,26 @@ var HeroBlock = React30.forwardRef(
     actions,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsx41(
       "div",
       {
         ref,
         className: cn(heroBlockVariants({ variant, withPattern }), className),
         ...props,
-        children: /* @__PURE__ */ jsx32("div", { className: "mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxs15("div", { className: "mx-auto text-center max-w-4xl", children: [
-          tagline && /* @__PURE__ */ jsx32(
+        children: /* @__PURE__ */ jsx41("div", { className: "mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxs19("div", { className: "mx-auto text-center max-w-4xl", children: [
+          tagline && /* @__PURE__ */ jsx41(
             Badge,
             {
               variant: "default",
-              icon: TaglineIcon ? /* @__PURE__ */ jsx32(Icon2, { icon: TaglineIcon, size: 16 }) : void 0,
+              icon: TaglineIcon ? /* @__PURE__ */ jsx41(Icon2, { icon: TaglineIcon, size: 16 }) : void 0,
               iconGap: 2,
               className: "mb-fluid-md",
               children: tagline
             }
           ),
-          /* @__PURE__ */ jsx32(Typography, { variant: "h1", className: "mb-fluid-md", children: title }),
-          /* @__PURE__ */ jsx32(Typography, { variant: "h3", color: "muted", className: "mb-fluid-lg", children: description }),
-          actions && /* @__PURE__ */ jsx32("div", { className: "flex flex-wrap gap-fluid-md justify-center", children: actions })
+          /* @__PURE__ */ jsx41(Typography, { variant: "h1", className: "mb-fluid-md", children: title }),
+          /* @__PURE__ */ jsx41(Typography, { variant: "h3", color: "muted", className: "mb-fluid-lg", children: description }),
+          actions && /* @__PURE__ */ jsx41("div", { className: "flex flex-wrap gap-fluid-md justify-center", children: actions })
         ] }) })
       }
     );
@@ -2070,12 +2916,12 @@ var HeroBlock = React30.forwardRef(
 HeroBlock.displayName = "HeroBlock";
 
 // src/components/code-block/CodeBlock.tsx
-import { useState as useState2, useEffect as useEffect2, useCallback as useCallback3 } from "react";
+import { useState as useState3, useEffect as useEffect2, useCallback as useCallback3 } from "react";
 import { Copy, Check as Check5 } from "lucide-react";
-import { jsx as jsx33, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs20 } from "react/jsx-runtime";
 function CodeBlock({ code, language = "text", title, className }) {
-  const [html, setHtml] = useState2(null);
-  const [copied, setCopied] = useState2(false);
+  const [html, setHtml] = useState3(null);
+  const [copied, setCopied] = useState3(false);
   useEffect2(() => {
     getHighlighter().then((highlighter) => {
       const loadedLangs = highlighter.getLoadedLanguages();
@@ -2088,16 +2934,16 @@ function CodeBlock({ code, language = "text", title, className }) {
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   }, [code]);
-  const copyButton = /* @__PURE__ */ jsx33(
+  const copyButton = /* @__PURE__ */ jsx42(
     "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__ */ jsx33(Check5, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsx33(Copy, { className: "w-3.5 h-3.5" })
+      children: copied ? /* @__PURE__ */ jsx42(Check5, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsx42(Copy, { className: "w-3.5 h-3.5" })
     }
   );
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs20(
     "div",
     {
       className: cn(
@@ -2105,27 +2951,27 @@ function CodeBlock({ code, language = "text", title, className }) {
         className
       ),
       children: [
-        title && /* @__PURE__ */ jsx33("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__ */ jsx33("span", { className: "text-berget-muted-foreground", children: title }) }),
-        /* @__PURE__ */ jsx33("div", { className: "absolute right-2 top-2 z-10", children: copyButton }),
-        html ? /* @__PURE__ */ jsx33(
+        title && /* @__PURE__ */ jsx42("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__ */ jsx42("span", { className: "text-berget-muted-foreground", children: title }) }),
+        /* @__PURE__ */ jsx42("div", { className: "absolute right-2 top-2 z-10", children: copyButton }),
+        html ? /* @__PURE__ */ jsx42(
           "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__ */ jsx33("pre", { className: "!p-4 !m-0 overflow-x-auto !text-sm !leading-relaxed text-berget-muted-foreground", children: /* @__PURE__ */ jsx33("code", { children: code }) })
+        ) : /* @__PURE__ */ jsx42("pre", { className: "!p-4 !m-0 overflow-x-auto !text-sm !leading-relaxed text-berget-muted-foreground", children: /* @__PURE__ */ jsx42("code", { children: code }) })
       ]
     }
   );
 }
 
 // src/components/window-frame/WindowFrame.tsx
-import * as React31 from "react";
-import { useState as useState3 } from "react";
-import { jsx as jsx34, jsxs as jsxs17 } from "react/jsx-runtime";
-var WindowFrame = React31.forwardRef(
+import * as React39 from "react";
+import { useState as useState4 } from "react";
+import { jsx as jsx43, jsxs as jsxs21 } from "react/jsx-runtime";
+var WindowFrame = React39.forwardRef(
   ({ title = "window", tabs, activeTab, onTabChange, children, className, ...props }, ref) => {
-    const [internalActive, setInternalActive] = useState3(tabs?.[0]?.id ?? "");
+    const [internalActive, setInternalActive] = useState4(tabs?.[0]?.id ?? "");
     const currentTab = activeTab ?? internalActive;
     const handleTabChange = (id) => {
       if (onTabChange) {
@@ -2134,7 +2980,7 @@ var WindowFrame = React31.forwardRef(
         setInternalActive(id);
       }
     };
-    return /* @__PURE__ */ jsxs17(
+    return /* @__PURE__ */ jsxs21(
       "div",
       {
         ref,
@@ -2144,13 +2990,13 @@ var WindowFrame = React31.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs17("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__ */ jsxs17("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
-              /* @__PURE__ */ jsx34("div", { className: "w-3 h-3 rounded-full bg-[#FF5F56]" }),
-              /* @__PURE__ */ jsx34("div", { className: "w-3 h-3 rounded-full bg-[#FFBD2E]" }),
-              /* @__PURE__ */ jsx34("div", { className: "w-3 h-3 rounded-full bg-[#27C93F]" })
+          /* @__PURE__ */ jsxs21("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__ */ jsxs21("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
+              /* @__PURE__ */ jsx43("div", { className: "w-3 h-3 rounded-full bg-[#FF5F56]" }),
+              /* @__PURE__ */ jsx43("div", { className: "w-3 h-3 rounded-full bg-[#FFBD2E]" }),
+              /* @__PURE__ */ jsx43("div", { className: "w-3 h-3 rounded-full bg-[#27C93F]" })
             ] }),
-            tabs && tabs.length > 0 ? /* @__PURE__ */ jsx34("div", { className: "ml-4 flex items-center gap-1", children: tabs.map((tab) => /* @__PURE__ */ jsx34(
+            tabs && tabs.length > 0 ? /* @__PURE__ */ jsx43("div", { className: "ml-4 flex items-center gap-1", children: tabs.map((tab) => /* @__PURE__ */ jsx43(
               "button",
               {
                 type: "button",
@@ -2162,9 +3008,9 @@ var WindowFrame = React31.forwardRef(
                 children: tab.label
               },
               tab.id
-            )) }) : /* @__PURE__ */ jsx34("span", { className: "ml-4 text-sm font-mono text-berget-brand-moss-400", children: title })
+            )) }) : /* @__PURE__ */ jsx43("span", { className: "ml-4 text-sm font-mono text-berget-brand-moss-400", children: title })
           ] }),
-          /* @__PURE__ */ jsx34("div", { children })
+          /* @__PURE__ */ jsx43("div", { children })
         ]
       }
     );
@@ -2179,6 +3025,7 @@ export {
   BergetLogo,
   Box,
   Button2 as Button,
+  COUNTRIES,
   Card2 as Card,
   CardContent,
   CardDescription,
@@ -2188,6 +3035,18 @@ export {
   Checkbox2 as Checkbox,
   CodeBlock,
   Container,
+  CountrySelect,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  EU_COUNTRY_CODES,
   FeatureList,
   Field,
   FieldContent,
@@ -2203,6 +3062,16 @@ export {
   HeroBlock,
   Icon2 as Icon,
   Input2 as Input,
+  Item2 as Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription2 as ItemDescription,
+  ItemFooter,
+  ItemGroup,
+  ItemHeader,
+  ItemMedia2 as ItemMedia,
+  ItemSeparator2 as ItemSeparator,
+  ItemTitle2 as ItemTitle,
   Label2 as Label,
   LanguageSelect,
   Link,
@@ -2211,6 +3080,14 @@ export {
   ListItem,
   Select2 as Select,
   Switch,
+  Table2 as Table,
+  TableBody2 as TableBody,
+  TableCaption2 as TableCaption,
+  TableCell2 as TableCell,
+  TableFooter2 as TableFooter,
+  TableHead2 as TableHead,
+  TableHeader2 as TableHeader,
+  TableRow2 as TableRow,
   TextArea,
   ThemeProvider,
   ThemeToggle,
@@ -2223,7 +3100,10 @@ export {
   cardVariants,
   checkboxVariants,
   containerVariants,
+  getCountryByCode,
+  getCountryByName,
   gridVariants,
+  isEUCountry,
   linkVariants,
   selectVariants,
   switchRootVariants,