@bergetai/ui 0.12.1 → 0.13.0

package/dist/index.cjs

@@ -101,7 +101,7 @@ __export(src_exports, {
   FogIllustration: () => FogIllustration,
   Grid: () => Grid,
   Icon: () => Icon,
-  Input: () => Input2,
+  Input: () => Input,
   Item: () => Item2,
   ItemActions: () => ItemActions,
   ItemContent: () => ItemContent,
@@ -128,7 +128,17 @@ __export(src_exports, {
   NavigationMenuList: () => NavigationMenuList,
   NavigationMenuPositioner: () => NavigationMenuPositioner,
   NavigationMenuTrigger: () => NavigationMenuTrigger,
-  Select: () => Select2,
+  SearchInput: () => SearchInput,
+  Select: () => Select,
+  SelectContent: () => SelectContent,
+  SelectGroup: () => SelectGroup,
+  SelectItem: () => SelectItem,
+  SelectLabel: () => SelectLabel,
+  SelectScrollDownButton: () => SelectScrollDownButton,
+  SelectScrollUpButton: () => SelectScrollUpButton,
+  SelectSeparator: () => SelectSeparator,
+  SelectTrigger: () => SelectTrigger,
+  SelectValue: () => SelectValue,
   Sidebar: () => Sidebar,
   SidebarContent: () => SidebarContent,
   SidebarFooter: () => SidebarFooter2,
@@ -163,7 +173,7 @@ __export(src_exports, {
   TableHead: () => TableHead2,
   TableHeader: () => TableHeader2,
   TableRow: () => TableRow2,
-  TextArea: () => TextArea,
+  Textarea: () => Textarea,
   ThemeProvider: () => ThemeProvider,
   ThemeToggle: () => ThemeToggle,
   Typography: () => Typography,
@@ -182,10 +192,8 @@ __export(src_exports, {
   isEUCountry: () => isEUCountry,
   linkVariants: () => linkVariants,
   navigationMenuTriggerStyle: () => navigationMenuTriggerStyle2,
-  selectVariants: () => selectVariants,
   switchRootVariants: () => switchRootVariants,
   switchThumbVariants: () => switchThumbVariants,
-  textAreaVariants: () => textAreaVariants,
   typographyVariants: () => typographyVariants,
   useSidebar: () => useSidebar,
   useTheme: () => useTheme
@@ -1819,7 +1827,7 @@ function Input({ className, type, ...props }) {
       type,
       "data-slot": "input",
       className: (0, import_cn5.cn)(
-        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-berget-brand-granite-900 px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-berget-brand-moss-400 focus-visible:ring-3 focus-visible:ring-berget-brand-moss-300/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className
       ),
       ...props
@@ -3183,100 +3191,46 @@ var ItemSeparator2 = React17.forwardRef(({ className, ...props }, ref) => {
 });
 ItemSeparator2.displayName = "ItemSeparator";
 
-// src/components/input/Input.tsx
-var React18 = __toESM(require("react"), 1);
+// src/components/search-input/SearchInput.tsx
+var import_lucide_react8 = require("lucide-react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
-var Input2 = React18.forwardRef(
-  ({ className, icon, actionButton, label, description, error, id, disabled, ...props }, ref) => {
-    const generatedId = React18.useId();
-    const inputId = id || generatedId;
-    const errorId = `${inputId}-error`;
-    const descriptionId = `${inputId}-description`;
-    const inputElement = /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-      Input,
-      {
-        ref,
-        id: inputId,
-        disabled,
-        "aria-invalid": !!error,
-        "aria-describedby": cn(error && errorId, description && descriptionId),
-        className: cn(
-          "isolate rounded-berget-xs bg-card focus-visible:border-berget-form-focus-border focus-visible:ring-0 focus-visible:ring-offset-0 hover:bg-berget-surface-hover transition-colors duration-200 px-3 sm:px-4 py-2 sm:py-2.5 text-sm",
-          icon && "pl-10",
-          actionButton && "pr-12",
-          error && "border-berget-destructive-foreground/50 bg-berget-destructive",
-          disabled && "cursor-not-allowed",
-          className
-        ),
-        ...props
-      }
-    );
-    if (!icon && !actionButton) {
-      return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col gap-2", children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-          "label",
-          {
-            htmlFor: inputId,
-            className: cn(
-              "text-sm font-sans leading-none",
-              disabled ? "text-muted-foreground cursor-not-allowed" : "text-foreground",
-              error && "text-berget-destructive-foreground"
-            ),
-            children: label
-          }
-        ),
-        inputElement,
-        (description || error) && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col gap-1", children: [
-          description && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Typography, { variant: "xs", color: "muted", id: descriptionId, children: description }),
-          error && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-            Typography,
-            {
-              variant: "xs",
-              id: errorId,
-              className: "text-berget-destructive-foreground",
-              children: error
-            }
-          )
-        ] })
-      ] });
+var SearchInput = ({
+  type = "search",
+  placeholder = "Search...",
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "relative flex w-full items-center", "data-slot": "search-input", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    import_lucide_react8.Search,
+    {
+      "aria-hidden": "true",
+      className: "pointer-events-none absolute left-2.5 size-4 text-berget-muted-foreground"
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col gap-2", children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-        "label",
-        {
-          htmlFor: inputId,
-          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__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "relative w-full", children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "absolute left-3 top-1/2 -translate-y-1/2", children: icon }),
-        inputElement,
-        actionButton && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "absolute right-2 top-1/2 -translate-y-1/2", children: actionButton })
-      ] }),
-      (description || error) && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col gap-1", children: [
-        description && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Typography, { variant: "xs", color: "muted", id: descriptionId, children: description }),
-        error && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Typography, { variant: "xs", id: errorId, className: "text-berget-destructive-foreground", children: error })
-      ] })
-    ] });
-  }
-);
-Input2.displayName = "Input";
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    Input,
+    {
+      ref,
+      type,
+      placeholder,
+      className: cn("rounded-full pl-8", className),
+      ...props
+    }
+  )
+] });
+SearchInput.displayName = "SearchInput";
 
 // src/components/checkbox/Checkbox.tsx
-var React19 = __toESM(require("react"), 1);
+var React18 = __toESM(require("react"), 1);
 var import_checkbox2 = require("@base-ui/react/checkbox");
-var import_lucide_react9 = require("lucide-react");
+var import_lucide_react10 = require("lucide-react");
 var import_class_variance_authority11 = require("class-variance-authority");
 
 // src/primitives/checkbox.tsx
 var import_checkbox = require("@base-ui/react/checkbox");
 var import_cn13 = require("cn");
-var import_lucide_react8 = require("lucide-react");
+var import_lucide_react9 = require("lucide-react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 function Checkbox({ className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
@@ -3294,7 +3248,7 @@ function Checkbox({ className, ...props }) {
           "data-slot": "checkbox-indicator",
           className: "grid place-content-center text-current transition-none [&>svg]:size-3.5",
           children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-            import_lucide_react8.CheckIcon,
+            import_lucide_react9.CheckIcon,
             {}
           )
         }
@@ -3326,7 +3280,7 @@ var checkboxVariants = (0, import_class_variance_authority11.cva)(
     }
   }
 );
-var Checkbox2 = React19.forwardRef(
+var Checkbox2 = React18.forwardRef(
   ({
     "aria-label": ariaLabel,
     className,
@@ -3339,7 +3293,7 @@ var Checkbox2 = React19.forwardRef(
     disabled,
     ...props
   }, ref) => {
-    const generatedId = React19.useId();
+    const generatedId = React18.useId();
     const checkboxId = id || generatedId;
     const errorId = `${checkboxId}-error`;
     return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-start gap-3", children: [
@@ -3361,7 +3315,7 @@ var Checkbox2 = React19.forwardRef(
           ),
           ...props,
           children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_checkbox2.Checkbox.Indicator, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-            import_lucide_react9.Check,
+            import_lucide_react10.Check,
             {
               className: "h-4 w-4 text-current stroke-current",
               style: { color: "currentColor", stroke: "currentColor" }
@@ -3391,7 +3345,7 @@ var Checkbox2 = React19.forwardRef(
 Checkbox2.displayName = "Checkbox";
 
 // src/components/switch/Switch.tsx
-var React20 = __toESM(require("react"), 1);
+var React19 = __toESM(require("react"), 1);
 var import_switch = require("@base-ui/react/switch");
 var import_class_variance_authority12 = require("class-variance-authority");
 var import_jsx_runtime33 = require("react/jsx-runtime");
@@ -3431,7 +3385,7 @@ var switchThumbVariants = (0, import_class_variance_authority12.cva)(
     }
   }
 );
-var Switch = React20.forwardRef(
+var Switch = React19.forwardRef(
   ({
     "aria-label": ariaLabel,
     className,
@@ -3444,7 +3398,7 @@ var Switch = React20.forwardRef(
     disabled,
     ...props
   }, ref) => {
-    const generatedId = React20.useId();
+    const generatedId = React19.useId();
     const switchId = id || generatedId;
     const errorId = `${switchId}-error`;
     return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-3", children: [
@@ -3487,16 +3441,22 @@ var Switch = React20.forwardRef(
 );
 Switch.displayName = "Switch";
 
-// src/components/select/Select.tsx
-var React21 = __toESM(require("react"), 1);
-var import_class_variance_authority13 = require("class-variance-authority");
-
 // src/primitives/select.tsx
 var import_select = require("@base-ui/react/select");
 var import_cn14 = require("cn");
-var import_lucide_react10 = require("lucide-react");
+var import_lucide_react11 = require("lucide-react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var Select = import_select.Select.Root;
+function SelectGroup({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    import_select.Select.Group,
+    {
+      "data-slot": "select-group",
+      className: (0, import_cn14.cn)("scroll-my-1 p-1", className),
+      ...props
+    }
+  );
+}
 function SelectValue({ className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     import_select.Select.Value,
@@ -3519,7 +3479,7 @@ function SelectTrigger({
       "data-slot": "select-trigger",
       "data-size": size,
       className: (0, import_cn14.cn)(
-        "flex w-fit cursor-pointer items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex w-fit cursor-pointer items-center justify-between gap-1.5 rounded-lg border border-input bg-berget-brand-granite-900 py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
@@ -3528,7 +3488,7 @@ function SelectTrigger({
         /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           import_select.Select.Icon,
           {
-            render: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react10.ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" })
+            render: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react11.ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" })
           }
         )
       ]
@@ -3571,6 +3531,19 @@ function SelectContent({
     }
   ) });
 }
+function SelectLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    import_select.Select.GroupLabel,
+    {
+      "data-slot": "select-label",
+      className: (0, import_cn14.cn)("px-1.5 py-1 text-xs text-muted-foreground", className),
+      ...props
+    }
+  );
+}
 function SelectItem({
   className,
   children,
@@ -3591,13 +3564,26 @@ function SelectItem({
           import_select.Select.ItemIndicator,
           {
             render: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react10.CheckIcon, { className: "pointer-events-none" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react11.CheckIcon, { className: "pointer-events-none" })
           }
         )
       ]
     }
   );
 }
+function SelectSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    import_select.Select.Separator,
+    {
+      "data-slot": "select-separator",
+      className: (0, import_cn14.cn)("pointer-events-none -mx-1 my-1 h-px bg-border", className),
+      ...props
+    }
+  );
+}
 function SelectScrollUpButton({
   className,
   ...props
@@ -3612,7 +3598,7 @@ function SelectScrollUpButton({
       ),
       ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-        import_lucide_react10.ChevronUpIcon,
+        import_lucide_react11.ChevronUpIcon,
         {}
       )
     }
@@ -3632,122 +3618,26 @@ function SelectScrollDownButton({
       ),
       ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-        import_lucide_react10.ChevronDownIcon,
+        import_lucide_react11.ChevronDownIcon,
         {}
       )
     }
   );
 }
 
-// src/components/select/Select.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var selectVariants = (0, import_class_variance_authority13.cva)(
-  "flex w-full items-center justify-between rounded-berget-xs border bg-card px-4 py-3 text-sm transition-colors duration-200 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-berget-form-focus-border disabled:cursor-not-allowed disabled:opacity-50",
-  {
-    variants: {
-      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__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-2", children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-        "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__ */ (0, import_jsx_runtime35.jsxs)(
-        Select,
-        {
-          value,
-          defaultValue,
-          onValueChange: onValueChange ? (value2) => onValueChange(value2 ?? "") : void 0,
-          disabled,
-          name,
-          required,
-          items: options,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-              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__ */ (0, import_jsx_runtime35.jsx)(SelectValue, { placeholder })
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectContent, { children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectItem, { value: option.value, disabled: option.disabled, children: option.label }, option.value)) })
-          ]
-        }
-      ),
-      description && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Typography, { variant: "xs", color: "muted", id: descriptionId, children: description }),
-      error && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Typography, { variant: "xs", id: errorId, className: "text-berget-destructive-foreground", children: error })
-    ] });
-  }
-);
-Select2.displayName = "Select";
-
 // src/components/country-select/CountrySelect.tsx
-var React23 = __toESM(require("react"), 1);
-var import_lucide_react13 = require("lucide-react");
+var React21 = __toESM(require("react"), 1);
+var import_lucide_react14 = require("lucide-react");
 
 // src/components/icon/Icon.tsx
-var React22 = __toESM(require("react"), 1);
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var React20 = __toESM(require("react"), 1);
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var iconStrokeMap = {
   16: 1.4,
   24: 1.6,
   32: 1.8
 };
-var Icon = React22.forwardRef(
+var Icon = React20.forwardRef(
   ({
     icon: IconComponent,
     size,
@@ -3759,7 +3649,7 @@ var Icon = React22.forwardRef(
     const strokeWidth = iconStrokeMap[size];
     const sizeClass = size === 16 ? "w-4 h-4" : size === 24 ? "w-6 h-6" : "w-8 h-8";
     const ariaAttributes = ariaLabel ? { "aria-label": ariaLabel } : { "aria-hidden": ariaHidden };
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       IconComponent,
       {
         ref,
@@ -3776,12 +3666,12 @@ Icon.displayName = "Icon";
 // src/primitives/popover.tsx
 var import_popover = require("@base-ui/react/popover");
 var import_cn15 = require("cn");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function Popover({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_popover.Popover.Root, { "data-slot": "popover", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_popover.Popover.Root, { "data-slot": "popover", ...props });
 }
 function PopoverTrigger({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_popover.Popover.Trigger, { "data-slot": "popover-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_popover.Popover.Trigger, { "data-slot": "popover-trigger", ...props });
 }
 function PopoverContent({
   className,
@@ -3791,7 +3681,7 @@ function PopoverContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_popover.Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_popover.Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     import_popover.Popover.Positioner,
     {
       align,
@@ -3799,7 +3689,7 @@ function PopoverContent({
       side,
       sideOffset,
       className: "isolate z-50",
-      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         import_popover.Popover.Popup,
         {
           "data-slot": "popover-content",
@@ -3821,23 +3711,23 @@ var import_cn19 = require("cn");
 // src/primitives/dialog.tsx
 var import_dialog3 = require("@base-ui/react/dialog");
 var import_cn16 = require("cn");
-var import_lucide_react11 = require("lucide-react");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_lucide_react12 = require("lucide-react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 
 // src/primitives/input-group.tsx
-var import_class_variance_authority14 = require("class-variance-authority");
+var import_class_variance_authority13 = require("class-variance-authority");
 var import_cn18 = require("cn");
 
 // src/primitives/textarea.tsx
 var import_cn17 = require("cn");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function Textarea({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "textarea",
     {
       "data-slot": "textarea",
       className: (0, import_cn17.cn)(
-        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-berget-brand-granite-900 px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-berget-brand-moss-400 focus-visible:ring-3 focus-visible:ring-berget-brand-moss-300/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className
       ),
       ...props
@@ -3846,9 +3736,9 @@ function Textarea({ className, ...props }) {
 }
 
 // src/primitives/input-group.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function InputGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "div",
     {
       "data-slot": "input-group",
@@ -3861,7 +3751,7 @@ function InputGroup({ className, ...props }) {
     }
   );
 }
-var inputGroupAddonVariants = (0, import_class_variance_authority14.cva)(
+var inputGroupAddonVariants = (0, import_class_variance_authority13.cva)(
   "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
   {
     variants: {
@@ -3882,7 +3772,7 @@ function InputGroupAddon({
   align = "inline-start",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "div",
     {
       role: "group",
@@ -3899,7 +3789,7 @@ function InputGroupAddon({
     }
   );
 }
-var inputGroupButtonVariants = (0, import_class_variance_authority14.cva)(
+var inputGroupButtonVariants = (0, import_class_variance_authority13.cva)(
   "flex items-center gap-2 text-sm shadow-none",
   {
     variants: {
@@ -3917,13 +3807,13 @@ var inputGroupButtonVariants = (0, import_class_variance_authority14.cva)(
 );
 
 // src/primitives/command.tsx
-var import_lucide_react12 = require("lucide-react");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_lucide_react13 = require("lucide-react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function Command({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     import_cmdk.Command,
     {
       "data-slot": "command",
@@ -3939,8 +3829,8 @@ function CommandInput({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { "data-slot": "command-input-wrapper", className: "p-1 pb-0", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(InputGroup, { className: "h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { "data-slot": "command-input-wrapper", className: "p-1 pb-0", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(InputGroup, { className: "h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       import_cmdk.Command.Input,
       {
         "data-slot": "command-input",
@@ -3951,14 +3841,14 @@ function CommandInput({
         ...props
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(InputGroupAddon, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react12.SearchIcon, { className: "size-4 shrink-0 opacity-50" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(InputGroupAddon, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react13.SearchIcon, { className: "size-4 shrink-0 opacity-50" }) })
   ] }) });
 }
 function CommandList({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     import_cmdk.Command.List,
     {
       "data-slot": "command-list",
@@ -3974,7 +3864,7 @@ function CommandEmpty({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     import_cmdk.Command.Empty,
     {
       "data-slot": "command-empty",
@@ -3987,7 +3877,7 @@ function CommandGroup({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     import_cmdk.Command.Group,
     {
       "data-slot": "command-group",
@@ -4004,7 +3894,7 @@ function CommandItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     import_cmdk.Command.Item,
     {
       "data-slot": "command-item",
@@ -4015,7 +3905,7 @@ function CommandItem({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react12.CheckIcon, { className: "ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" })
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react13.CheckIcon, { className: "ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" })
       ]
     }
   );
@@ -4163,8 +4053,8 @@ var isEUCountry = (countryCode) => {
 };
 
 // src/components/country-select/CountrySelect.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
-var CountrySelect = React23.forwardRef(
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var CountrySelect = React21.forwardRef(
   ({
     value,
     onValueChange,
@@ -4174,14 +4064,14 @@ var CountrySelect = React23.forwardRef(
     align = "center",
     sideOffset = 4
   }, ref) => {
-    const [open, setOpen] = React23.useState(false);
-    const selectedCountry = React23.useMemo(() => COUNTRIES.find((c) => c.code === value), [value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+    const [open, setOpen] = React21.useState(false);
+    const selectedCountry = React21.useMemo(() => COUNTRIES.find((c) => c.code === value), [value]);
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
         PopoverTrigger,
         {
           ref,
-          render: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          render: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             "button",
             {
               type: "button",
@@ -4203,29 +4093,29 @@ var CountrySelect = React23.forwardRef(
             }
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: selectedCountry ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-xl flex-shrink-0", children: selectedCountry.flag }),
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "truncate", children: selectedCountry.name }),
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "text-berget-muted-foreground text-xs flex-shrink-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: selectedCountry ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-xl flex-shrink-0", children: selectedCountry.flag }),
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "truncate", children: selectedCountry.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "text-berget-muted-foreground text-xs flex-shrink-0", children: [
                 "(",
                 selectedCountry.code,
                 ")"
               ] })
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                 Icon,
                 {
-                  icon: import_lucide_react13.Globe,
+                  icon: import_lucide_react14.Globe,
                   size: 16,
                   className: "flex-shrink-0 text-berget-muted-foreground"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-berget-muted-foreground truncate", children: placeholder })
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-berget-muted-foreground truncate", children: placeholder })
             ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
               Icon,
               {
-                icon: import_lucide_react13.ChevronDown,
+                icon: import_lucide_react14.ChevronDown,
                 size: 16,
                 className: cn(
                   "flex-shrink-0 text-berget-muted-foreground",
@@ -4237,17 +4127,17 @@ var CountrySelect = React23.forwardRef(
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         PopoverContent,
         {
           align,
           sideOffset,
           className: "w-[var(--radix-popover-trigger-width)] p-0",
-          children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Command, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CommandInput, { placeholder: "Search country..." }),
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(CommandList, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CommandEmpty, { children: "No countries found." }),
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CommandGroup, { children: COUNTRIES.map((country) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Command, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CommandInput, { placeholder: "Search country..." }),
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(CommandList, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CommandEmpty, { children: "No countries found." }),
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CommandGroup, { children: COUNTRIES.map((country) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
                 CommandItem,
                 {
                   value: `${country.name} ${country.code}`,
@@ -4261,12 +4151,12 @@ var CountrySelect = React23.forwardRef(
                     value === country.code && "bg-berget-brand-granite-800/40"
                   ),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-xl flex-shrink-0", children: country.flag }),
-                    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex-1 min-w-0", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "text-sm truncate", children: country.name }),
-                      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "text-xs text-berget-muted-foreground", children: country.code })
+                    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-xl flex-shrink-0", children: country.flag }),
+                    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex-1 min-w-0", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "text-sm truncate", children: country.name }),
+                      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "text-xs text-berget-muted-foreground", children: country.code })
                     ] }),
-                    value === country.code && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "w-2 h-2 rounded-full bg-berget-brand-granite-400 flex-shrink-0" })
+                    value === country.code && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "w-2 h-2 rounded-full bg-berget-brand-granite-400 flex-shrink-0" })
                   ]
                 },
                 country.code
@@ -4280,138 +4170,11 @@ var CountrySelect = React23.forwardRef(
 );
 CountrySelect.displayName = "CountrySelect";
 
-// src/components/text-area/TextArea.tsx
-var React24 = __toESM(require("react"), 1);
-var import_class_variance_authority15 = require("class-variance-authority");
-var import_jsx_runtime43 = require("react/jsx-runtime");
-var textAreaVariants = (0, import_class_variance_authority15.cva)(
-  "rounded-berget-xs bg-card px-4 py-3 transition-colors duration-200 focus-visible:border-berget-form-focus-border focus-visible:ring-0 focus-visible:ring-offset-0 resize-y",
-  {
-    variants: {
-      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 sm:px-4 sm:py-2.5 text-xs sm:text-sm",
-        default: "px-4 py-3 sm:py-3.5 text-sm",
-        lg: "px-5 py-4 sm:py-5 text-base sm:text-lg"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-var TextArea = React24.forwardRef(
-  ({
-    className,
-    variant,
-    size,
-    label,
-    description,
-    error,
-    placeholder,
-    maxLength,
-    showCount,
-    rows,
-    id,
-    disabled,
-    value,
-    icon,
-    secondaryIcon,
-    actionButton,
-    ...props
-  }, ref) => {
-    const generatedId = React24.useId();
-    const textareaId = id || generatedId;
-    const errorId = `${textareaId}-error`;
-    const descriptionId = `${textareaId}-description`;
-    const characterCount = typeof value === "string" ? value.length : 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex flex-col gap-2", children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-        "label",
-        {
-          htmlFor: textareaId,
-          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__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "relative", children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "absolute left-2 top-1/2 -translate-y-1/2", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-          Textarea,
-          {
-            ref,
-            id: textareaId,
-            disabled,
-            "aria-invalid": !!error,
-            "aria-describedby": cn(error && errorId, description && descriptionId),
-            className: cn(
-              textAreaVariants({ variant, size }),
-              error && "border-berget-destructive-foreground/50 bg-berget-destructive",
-              disabled && "cursor-not-allowed",
-              icon && "pl-11",
-              secondaryIcon && "pr-20",
-              actionButton && !secondaryIcon && "pr-12",
-              secondaryIcon && actionButton && "pr-20",
-              className
-            ),
-            placeholder,
-            maxLength,
-            rows,
-            value,
-            ...props
-          }
-        ),
-        secondaryIcon && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "absolute right-12 top-1/2 -translate-y-1/2", children: secondaryIcon }),
-        actionButton && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "absolute right-2 top-1/2 -translate-y-1/2", children: actionButton })
-      ] }),
-      (description || error || showCount && maxLength) && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
-        description && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Typography, { variant: "xs", color: "muted", id: descriptionId, children: description }),
-        (error || showCount && maxLength) && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex items-center gap-2 ml-auto", children: [
-          showCount && maxLength && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
-            Typography,
-            {
-              variant: "xs",
-              className: cn(
-                characterCount >= maxLength ? "text-berget-destructive-foreground" : "text-muted-foreground"
-              ),
-              children: [
-                characterCount,
-                "/",
-                maxLength
-              ]
-            }
-          ),
-          error && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-            Typography,
-            {
-              variant: "xs",
-              id: errorId,
-              className: "text-berget-destructive-foreground",
-              children: error
-            }
-          )
-        ] })
-      ] })
-    ] });
-  }
-);
-TextArea.displayName = "TextArea";
-
 // src/primitives/label.tsx
 var import_cn20 = require("cn");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function Label({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     "label",
     {
       "data-slot": "label",
@@ -4426,11 +4189,11 @@ function Label({ className, ...props }) {
 
 // src/primitives/field.tsx
 var import_react = require("react");
-var import_class_variance_authority16 = require("class-variance-authority");
+var import_class_variance_authority14 = require("class-variance-authority");
 var import_cn21 = require("cn");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function FieldSet({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "fieldset",
     {
       "data-slot": "field-set",
@@ -4447,7 +4210,7 @@ function FieldLegend({
   variant = "legend",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "legend",
     {
       "data-slot": "field-legend",
@@ -4461,7 +4224,7 @@ function FieldLegend({
   );
 }
 function FieldGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "div",
     {
       "data-slot": "field-group",
@@ -4473,7 +4236,7 @@ function FieldGroup({ className, ...props }) {
     }
   );
 }
-var fieldVariants = (0, import_class_variance_authority16.cva)(
+var fieldVariants = (0, import_class_variance_authority14.cva)(
   "group/field flex w-full gap-2 data-[invalid=true]:text-destructive",
   {
     variants: {
@@ -4493,7 +4256,7 @@ function Field({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "div",
     {
       role: "group",
@@ -4505,7 +4268,7 @@ function Field({
   );
 }
 function FieldContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "div",
     {
       "data-slot": "field-content",
@@ -4521,7 +4284,7 @@ function FieldLabel({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     Label,
     {
       "data-slot": "field-label",
@@ -4535,7 +4298,7 @@ function FieldLabel({
   );
 }
 function FieldTitle({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "div",
     {
       "data-slot": "field-label",
@@ -4548,7 +4311,7 @@ function FieldTitle({ className, ...props }) {
   );
 }
 function FieldDescription({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "p",
     {
       "data-slot": "field-description",
@@ -4567,7 +4330,7 @@ function FieldSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     "div",
     {
       "data-slot": "field-separator",
@@ -4578,8 +4341,8 @@ function FieldSeparator({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Separator, { className: "absolute inset-0 top-1/2" }),
-        children && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Separator, { className: "absolute inset-0 top-1/2" }),
+        children && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           "span",
           {
             className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground",
@@ -4610,14 +4373,14 @@ function FieldError({
     if (uniqueErrors?.length == 1) {
       return uniqueErrors[0]?.message;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map(
-      (error, index) => error?.message && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("li", { children: error.message }, index)
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map(
+      (error, index) => error?.message && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("li", { children: error.message }, index)
     ) });
   }, [children, errors]);
   if (!content) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "div",
     {
       role: "alert",
@@ -4630,11 +4393,11 @@ function FieldError({
 }
 
 // src/components/link/Link.tsx
-var React25 = __toESM(require("react"), 1);
-var import_class_variance_authority17 = require("class-variance-authority");
-var import_lucide_react14 = require("lucide-react");
-var import_jsx_runtime46 = require("react/jsx-runtime");
-var linkVariants = (0, import_class_variance_authority17.cva)(
+var React22 = __toESM(require("react"), 1);
+var import_class_variance_authority15 = require("class-variance-authority");
+var import_lucide_react15 = require("lucide-react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var linkVariants = (0, import_class_variance_authority15.cva)(
   "inline-flex cursor-pointer items-center gap-2 transition-all duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
@@ -4658,7 +4421,7 @@ var linkVariants = (0, import_class_variance_authority17.cva)(
     }
   }
 );
-var Link = React25.forwardRef(
+var Link = React22.forwardRef(
   ({
     className,
     variant,
@@ -4671,7 +4434,7 @@ var Link = React25.forwardRef(
     ...props
   }, ref) => {
     const isExternal = external || typeof props.href === "string" && (props.href.startsWith("http://") || props.href.startsWith("https://") || props.href.startsWith("mailto:") || props.href.startsWith("tel:"));
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
       "a",
       {
         ref,
@@ -4687,8 +4450,8 @@ var Link = React25.forwardRef(
         },
         children: [
           children,
-          icon && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "inline-flex items-center", children: icon }),
-          showExternalIcon && isExternal && !disabled && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "inline-flex items-center ml-1 opacity-60", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Icon, { icon: import_lucide_react14.ExternalLink, size: 16 }) })
+          icon && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "inline-flex items-center", children: icon }),
+          showExternalIcon && isExternal && !disabled && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "inline-flex items-center ml-1 opacity-60", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icon, { icon: import_lucide_react15.ExternalLink, size: 16 }) })
         ]
       }
     );
@@ -4697,11 +4460,11 @@ var Link = React25.forwardRef(
 Link.displayName = "Link";
 
 // src/components/container/Container.tsx
-var React26 = __toESM(require("react"), 1);
+var React23 = __toESM(require("react"), 1);
 var import_merge_props3 = require("@base-ui/react/merge-props");
 var import_use_render3 = require("@base-ui/react/use-render");
-var import_class_variance_authority18 = require("class-variance-authority");
-var containerVariants = (0, import_class_variance_authority18.cva)("w-full mx-auto", {
+var import_class_variance_authority16 = require("class-variance-authority");
+var containerVariants = (0, import_class_variance_authority16.cva)("w-full mx-auto", {
   variants: {
     size: {
       sm: "max-w-3xl",
@@ -4722,7 +4485,7 @@ var containerVariants = (0, import_class_variance_authority18.cva)("w-full mx-au
     padding: "md"
   }
 });
-var Container = React26.forwardRef(
+var Container = React23.forwardRef(
   ({ className, size, padding, asChild = false, children, ...props }, ref) => {
     return (0, import_use_render3.useRender)({
       ref,
@@ -4741,11 +4504,11 @@ var Container = React26.forwardRef(
 Container.displayName = "Container";
 
 // src/components/grid/Grid.tsx
-var React27 = __toESM(require("react"), 1);
-var import_class_variance_authority19 = require("class-variance-authority");
+var React24 = __toESM(require("react"), 1);
+var import_class_variance_authority17 = require("class-variance-authority");
 var import_merge_props4 = require("@base-ui/react/merge-props");
 var import_use_render4 = require("@base-ui/react/use-render");
-var gridVariants = (0, import_class_variance_authority19.cva)("grid", {
+var gridVariants = (0, import_class_variance_authority17.cva)("grid", {
   variants: {
     align: {
       start: "items-start",
@@ -4767,7 +4530,7 @@ var gridVariants = (0, import_class_variance_authority19.cva)("grid", {
     justify: "start"
   }
 });
-var Grid = React27.forwardRef(
+var Grid = React24.forwardRef(
   ({ className, align, justify, cols, rows, gap, gapX, gapY, asChild = false, children, ...props }, ref) => {
     return (0, import_use_render4.useRender)({
       ref,
@@ -4794,11 +4557,11 @@ var Grid = React27.forwardRef(
 Grid.displayName = "Grid";
 
 // src/components/box/Box.tsx
-var React28 = __toESM(require("react"), 1);
-var import_class_variance_authority20 = require("class-variance-authority");
+var React25 = __toESM(require("react"), 1);
+var import_class_variance_authority18 = require("class-variance-authority");
 var import_merge_props5 = require("@base-ui/react/merge-props");
 var import_use_render5 = require("@base-ui/react/use-render");
-var boxVariants = (0, import_class_variance_authority20.cva)("flex", {
+var boxVariants = (0, import_class_variance_authority18.cva)("flex", {
   variants: {
     direction: {
       row: "flex-row",
@@ -4834,7 +4597,7 @@ var boxVariants = (0, import_class_variance_authority20.cva)("flex", {
     wrap: "nowrap"
   }
 });
-var Box = React28.forwardRef(
+var Box = React25.forwardRef(
   ({ className, direction, align, justify, wrap, gap, asChild = false, children, ...props }, ref) => {
     return (0, import_use_render5.useRender)({
       ref,
@@ -4857,22 +4620,22 @@ var Box = React28.forwardRef(
 Box.displayName = "Box";
 
 // src/components/language-select/LanguageSelect.tsx
-var React29 = __toESM(require("react"), 1);
-var import_lucide_react15 = require("lucide-react");
-var import_jsx_runtime47 = require("react/jsx-runtime");
-var LanguageSelect = React29.forwardRef(
+var React26 = __toESM(require("react"), 1);
+var import_lucide_react16 = require("lucide-react");
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var LanguageSelect = React26.forwardRef(
   ({ className, options, value, onValueChange }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(DropdownMenu, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(DropdownMenuTrigger, { ref, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Button2, { variant: "outline", size: "icon", className, "aria-label": "Select language", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "sr-only", children: "Select language" }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, { icon: import_lucide_react15.Globe, size: 16, "aria-hidden": true })
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(DropdownMenu, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DropdownMenuTrigger, { ref, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Button2, { variant: "outline", size: "icon", className, "aria-label": "Select language", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "sr-only", children: "Select language" }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Icon, { icon: import_lucide_react16.Globe, size: 16, "aria-hidden": true })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(DropdownMenuContent, { align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DropdownMenuContent, { align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         DropdownMenuRadioGroup,
         {
           value,
           onValueChange: onValueChange ? (v) => onValueChange(v) : void 0,
-          children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
             DropdownMenuRadioItem,
             {
               value: option.value,
@@ -4890,13 +4653,13 @@ var LanguageSelect = React29.forwardRef(
 LanguageSelect.displayName = "LanguageSelect";
 
 // src/components/list/List.tsx
-var React31 = __toESM(require("react"), 1);
+var React28 = __toESM(require("react"), 1);
 
 // src/components/divider/Divider.tsx
-var React30 = __toESM(require("react"), 1);
-var import_class_variance_authority21 = require("class-variance-authority");
-var import_jsx_runtime48 = require("react/jsx-runtime");
-var dividerVariants = (0, import_class_variance_authority21.cva)("", {
+var React27 = __toESM(require("react"), 1);
+var import_class_variance_authority19 = require("class-variance-authority");
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var dividerVariants = (0, import_class_variance_authority19.cva)("", {
   variants: {
     variant: {
       default: "bg-berget-separator",
@@ -4916,7 +4679,7 @@ var dividerVariants = (0, import_class_variance_authority21.cva)("", {
     size: "thin"
   }
 });
-var Divider = React30.forwardRef(
+var Divider = React27.forwardRef(
   ({
     className,
     orientation = "horizontal",
@@ -4927,16 +4690,16 @@ var Divider = React30.forwardRef(
     ...props
   }, ref) => {
     if (label) {
-      return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { ref, className: cn("flex items-center w-full", className), ...props, children: [
-        labelPosition !== "right" && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { ref, className: cn("flex items-center w-full", className), ...props, children: [
+        labelPosition !== "right" && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           Separator,
           {
             orientation: "horizontal",
             className: cn(dividerVariants({ variant, size }), "flex-1")
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Typography, { variant: "small", color: "muted", className: "px-4 whitespace-nowrap", children: label }),
-        labelPosition !== "left" && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Typography, { variant: "small", color: "muted", className: "px-4 whitespace-nowrap", children: label }),
+        labelPosition !== "left" && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           Separator,
           {
             orientation: "horizontal",
@@ -4945,7 +4708,7 @@ var Divider = React30.forwardRef(
         )
       ] });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       Separator,
       {
         ref,
@@ -4962,20 +4725,20 @@ var Divider = React30.forwardRef(
 Divider.displayName = "Divider";
 
 // src/components/list/List.tsx
-var import_lucide_react16 = require("lucide-react");
-var import_jsx_runtime49 = require("react/jsx-runtime");
-var List = React31.forwardRef(
+var import_lucide_react17 = require("lucide-react");
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var List = React28.forwardRef(
   ({ className, children, ...props }, ref) => {
-    const childrenArray = React31.Children.toArray(children);
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { ref, className: cn("flex flex-col", className), ...props, children: childrenArray.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(React31.Fragment, { children: [
+    const childrenArray = React28.Children.toArray(children);
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { ref, className: cn("flex flex-col", className), ...props, children: childrenArray.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(React28.Fragment, { children: [
       child,
-      index < childrenArray.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Divider, { variant: "subtle" })
+      index < childrenArray.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Divider, { variant: "subtle" })
     ] }, index)) });
   }
 );
 List.displayName = "List";
-var ListItem = React31.forwardRef(
-  ({ className, icon, children, interactive = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+var ListItem = React28.forwardRef(
+  ({ className, icon, children, interactive = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
     "div",
     {
       ref,
@@ -4986,15 +4749,15 @@ var ListItem = React31.forwardRef(
       ),
       ...props,
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex-shrink-0 flex items-center justify-center", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex-1 min-w-0", children })
+        icon && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex-shrink-0 flex items-center justify-center", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex-1 min-w-0", children })
       ]
     }
   )
 );
 ListItem.displayName = "ListItem";
-var ListHeader = React31.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+var ListHeader = React28.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     "div",
     {
       ref,
@@ -5005,11 +4768,11 @@ var ListHeader = React31.forwardRef(
   )
 );
 ListHeader.displayName = "ListHeader";
-var FeatureList = React31.forwardRef(
+var FeatureList = React28.forwardRef(
   ({ items, variant = "bullet", className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("ul", { ref, className: cn("flex flex-col gap-fluid-md", className), ...props, children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("li", { className: "flex items-start gap-fluid-md", children: [
-      variant === "bullet" ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-berget-icon-muted flex-shrink-0 mt-2" }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex-shrink-0 mt-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Icon, { icon: import_lucide_react16.Check, size: 24, className: "text-berget-logo-light" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Typography, { variant: "body", color: "muted", children: item })
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("ul", { ref, className: cn("flex flex-col gap-fluid-md", className), ...props, children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("li", { className: "flex items-start gap-fluid-md", children: [
+      variant === "bullet" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-berget-icon-muted flex-shrink-0 mt-2" }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex-shrink-0 mt-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, { icon: import_lucide_react17.Check, size: 24, className: "text-berget-logo-light" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Typography, { variant: "body", color: "muted", children: item })
     ] }, index)) });
   }
 );
@@ -5017,7 +4780,7 @@ FeatureList.displayName = "FeatureList";
 
 // src/components/code-block/CodeBlock.tsx
 var import_react2 = require("react");
-var import_lucide_react17 = require("lucide-react");
+var import_lucide_react18 = require("lucide-react");
 
 // src/lib/shiki.ts
 var import_core2 = require("shiki/core");
@@ -5058,7 +4821,7 @@ function getHighlighter() {
 }
 
 // src/components/code-block/CodeBlock.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function CodeBlock({ code, language = "text", title, className }) {
   const [html, setHtml] = (0, import_react2.useState)(null);
   const [copied, setCopied] = (0, import_react2.useState)(false);
@@ -5074,16 +4837,16 @@ function CodeBlock({ code, language = "text", title, className }) {
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   }, [code]);
-  const copyButton = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  const copyButton = /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     "button",
     {
       onClick: handleCopy,
       className: "flex items-center justify-center w-6 h-6 text-berget-muted-foreground hover:text-berget-foreground transition-colors",
       "aria-label": "Copy code",
-      children: copied ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react17.Check, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react17.Copy, { className: "w-3.5 h-3.5" })
+      children: copied ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react18.Check, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react18.Copy, { className: "w-3.5 h-3.5" })
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     "div",
     {
       className: cn(
@@ -5091,25 +4854,25 @@ function CodeBlock({ code, language = "text", title, className }) {
         className
       ),
       children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "!h-10 flex items-center !px-4 !text-xs !leading-normal border-b border-berget-border bg-berget-codeblock-header-bg", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-berget-muted-foreground", children: title }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "absolute right-2 top-2 z-10", children: copyButton }),
-        html ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        title && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "!h-10 flex items-center !px-4 !text-xs !leading-normal border-b border-berget-border bg-berget-codeblock-header-bg", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-berget-muted-foreground", children: title }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "absolute right-2 top-2 z-10", children: copyButton }),
+        html ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           "div",
           {
             className: "[&_.shiki]:!p-4 [&_.shiki]:!m-0 [&_.shiki]:overflow-x-auto [&_.shiki]:!text-sm [&_.shiki]:!leading-relaxed [&_.shiki]:bg-transparent",
             dangerouslySetInnerHTML: { __html: html }
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("pre", { className: "!p-4 !m-0 overflow-x-auto !text-sm !leading-relaxed text-berget-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("code", { children: code }) })
+        ) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("pre", { className: "!p-4 !m-0 overflow-x-auto !text-sm !leading-relaxed text-berget-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("code", { children: code }) })
       ]
     }
   );
 }
 
 // src/components/window-frame/WindowFrame.tsx
-var React32 = __toESM(require("react"), 1);
+var React29 = __toESM(require("react"), 1);
 var import_react3 = require("react");
-var import_jsx_runtime51 = require("react/jsx-runtime");
-var WindowFrame = React32.forwardRef(
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var WindowFrame = React29.forwardRef(
   ({ title = "window", tabs, activeTab, onTabChange, children, className, ...props }, ref) => {
     const [internalActive, setInternalActive] = (0, import_react3.useState)(tabs?.[0]?.id ?? "");
     const currentTab = activeTab ?? internalActive;
@@ -5120,7 +4883,7 @@ var WindowFrame = React32.forwardRef(
         setInternalActive(id);
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
       "div",
       {
         ref,
@@ -5130,13 +4893,13 @@ var WindowFrame = React32.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex items-center gap-2 px-4 py-3 border-b border-berget-brand-granite-700 bg-berget-brand-granite-900", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "w-3 h-3 rounded-full bg-berget-brand-muscaria-400" }),
-              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "w-3 h-3 rounded-full bg-berget-brand-chanterelle-200" }),
-              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "w-3 h-3 rounded-full bg-berget-brand-moss-400" })
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center gap-2 px-4 py-3 border-b border-berget-brand-granite-700 bg-berget-brand-granite-900", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "w-3 h-3 rounded-full bg-berget-brand-muscaria-400" }),
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "w-3 h-3 rounded-full bg-berget-brand-chanterelle-200" }),
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "w-3 h-3 rounded-full bg-berget-brand-moss-400" })
             ] }),
-            tabs && tabs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "ml-4 flex items-center gap-1", children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+            tabs && tabs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "ml-4 flex items-center gap-1", children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               "button",
               {
                 type: "button",
@@ -5148,9 +4911,9 @@ var WindowFrame = React32.forwardRef(
                 children: tab.label
               },
               tab.id
-            )) }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "ml-4 text-sm font-mono text-berget-brand-moss-400", children: title })
+            )) }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "ml-4 text-sm font-mono text-berget-brand-moss-400", children: title })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { children })
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { children })
         ]
       }
     );
@@ -5160,7 +4923,7 @@ WindowFrame.displayName = "WindowFrame";
 
 // src/components/fog-illustration/FogIllustration.tsx
 var import_react4 = require("react");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var FOG_BRAND_PALETTE = {
   ink: "#171a1a",
   milk: "#f7f5ed",
@@ -5473,7 +5236,7 @@ var FogIllustration = ({ palette, speed = 1, className }) => {
       gl.deleteFramebuffer(fbo);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("canvas", { ref, "aria-hidden": "true", className: cn("size-full", className) });
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("canvas", { ref, "aria-hidden": "true", className: cn("size-full", className) });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -5575,7 +5338,17 @@ var FogIllustration = ({ palette, speed = 1, className }) => {
   NavigationMenuList,
   NavigationMenuPositioner,
   NavigationMenuTrigger,
+  SearchInput,
   Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
   Sidebar,
   SidebarContent,
   SidebarFooter,
@@ -5610,7 +5383,7 @@ var FogIllustration = ({ palette, speed = 1, className }) => {
   TableHead,
   TableHeader,
   TableRow,
-  TextArea,
+  Textarea,
   ThemeProvider,
   ThemeToggle,
   Typography,
@@ -5629,10 +5402,8 @@ var FogIllustration = ({ palette, speed = 1, className }) => {
   isEUCountry,
   linkVariants,
   navigationMenuTriggerStyle,
-  selectVariants,
   switchRootVariants,
   switchThumbVariants,
-  textAreaVariants,
   typographyVariants,
   useSidebar,
   useTheme