@bubo-squared/ui-framework 0.2.13 → 0.2.15

package/dist/index.cjs

@@ -30,23 +30,34 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  Accordion: () => Accordion,
+  Autocomplete: () => Autocomplete,
   Avatar: () => Avatar,
   Badge: () => Badge,
   BadgeDigit: () => BadgeDigit,
   BadgeDot: () => BadgeDot,
   BadgeStatus: () => BadgeStatus,
-  Breadcrumb: () => Breadcrumb,
+  Breadcrumbs: () => Breadcrumbs,
   Button: () => Button,
   ButtonGroup: () => ButtonGroup,
   Checkbox: () => Checkbox,
   Divider: () => Divider,
-  Dropdown: () => Dropdown,
   Field: () => Field,
   IconButton: () => IconButton,
   IconButtonGroup: () => IconButtonGroup,
   LinkButton: () => LinkButton,
   Logo: () => Logo,
   LogoIcon: () => LogoIcon,
+  Menu: () => Menu,
+  MenuGroup: () => MenuGroup,
+  MenuItem: () => MenuItem,
+  MenuLabel: () => MenuLabel,
+  MenuPortal: () => MenuPortal,
+  MenuSeparator: () => MenuSeparator,
+  MenuShortcut: () => MenuShortcut,
+  MenuSub: () => MenuSub,
+  MenuSubContent: () => MenuSubContent,
+  MenuSubTrigger: () => MenuSubTrigger,
   MessageButton: () => MessageButton,
   PasswordInput: () => PasswordInput,
   PhoneInput: () => PhoneInput,
@@ -54,12 +65,15 @@ __export(index_exports, {
   Progress: () => Progress,
   RadioGroup: () => RadioGroup,
   SearchInput: () => SearchInput,
+  Select: () => Select,
   Slider: () => Slider,
   StatusAvatar: () => StatusAvatar,
   Tag: () => Tag,
   TextArea: () => TextArea,
   TextInput: () => TextInput,
   Toggle: () => Toggle,
+  Tooltip: () => Tooltip,
+  TooltipProvider: () => TooltipProvider,
   Typography: () => Typography,
   WebsiteInput: () => WebsiteInput,
   cn: () => cn
@@ -444,12 +458,77 @@ var MessageButton = (props) => {
 };
 MessageButton.displayName = "MessageButton";
 
-// src/components/Content/Avatar.tsx
+// src/components/Content/Accordion.tsx
 var React6 = __toESM(require("react"), 1);
-var import_react_slot4 = require("@radix-ui/react-slot");
-var import_class_variance_authority6 = require("class-variance-authority");
+var AccordionPrimitive = __toESM(require("@radix-ui/react-accordion"), 1);
 var import_icons = require("@bubo-squared/icons");
 var import_jsx_runtime8 = require("react/jsx-runtime");
+var Accordion = React6.forwardRef(
+  (props, ref) => {
+    const {
+      title,
+      expandIcon,
+      children,
+      className,
+      defaultOpen = false,
+      bordered = false,
+      ...rootProps
+    } = props;
+    const {
+      value,
+      defaultValue,
+      onValueChange,
+      ...restRootProps
+    } = rootProps;
+    const resolvedDefaultValue = value === void 0 && defaultValue === void 0 && defaultOpen ? "item" : defaultValue;
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      AccordionPrimitive.Root,
+      {
+        ref,
+        type: "single",
+        collapsible: true,
+        className: cn("w-full", className),
+        value,
+        defaultValue: resolvedDefaultValue,
+        onValueChange,
+        ...restRootProps,
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          AccordionPrimitive.Item,
+          {
+            value: "item",
+            className: cn(bordered ? "border rounded-4" : "border-b", "border-(--border-secondary) px-4"),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                AccordionPrimitive.Trigger,
+                {
+                  className: cn(
+                    "flex w-full items-center justify-between gap-2 py-3 text-left",
+                    "paragraph-md text-primary",
+                    "[&[data-state=open]_.accordion-icon]:rotate-180",
+                    "disabled:cursor-not-allowed disabled:text-primary-disabled cursor-pointer"
+                  ),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "flex-1", children: title }),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "accordion-icon inline-flex shrink-0 transition-transform duration-200 [&>svg]:size-5", children: expandIcon ?? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons.ChevronDownIcon, {}) })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AccordionPrimitive.Content, { className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "pb-3", children }) })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+Accordion.displayName = "Accordion";
+
+// src/components/Content/Avatar.tsx
+var React7 = __toESM(require("react"), 1);
+var import_react_slot4 = require("@radix-ui/react-slot");
+var import_class_variance_authority6 = require("class-variance-authority");
+var import_icons2 = require("@bubo-squared/icons");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var avatarVariants = (0, import_class_variance_authority6.cva)(
   "relative inline-flex items-center justify-center rounded-full border-(--border-secondary) border-1 bg-(--background-primary) text-primary overflow-hidden hover:border-(--focus-secondary) focus-visible:border-(--focus-primary) focus-visible:outline-none",
   {
@@ -507,7 +586,7 @@ var avatarIconVariants = (0, import_class_variance_authority6.cva)(
     }
   }
 );
-var Avatar = React6.forwardRef(
+var Avatar = React7.forwardRef(
   (props, ref) => {
     const {
       asChild = false,
@@ -521,14 +600,14 @@ var Avatar = React6.forwardRef(
     } = props;
     const Comp = asChild ? import_react_slot4.Slot : "button";
     const hasImage = variant === "image" && typeof src === "string" && src.length > 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       Comp,
       {
         ref,
         className: cn(avatarVariants({ size }), className),
         ...rest,
         children: [
-          hasImage ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          hasImage ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "img",
             {
               src,
@@ -536,8 +615,8 @@ var Avatar = React6.forwardRef(
               className: "w-full h-full object-cover"
             }
           ) : null,
-          !hasImage && variant === "initial" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: cn(avatarInitialsVariants({ size }), "relative bottom-px"), children: initials }),
-          !hasImage && variant === "icon" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: cn(avatarIconVariants({ size })), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons.UserIcon, {}) })
+          !hasImage && variant === "initial" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: cn(avatarInitialsVariants({ size }), "relative bottom-px"), children: initials }),
+          !hasImage && variant === "icon" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: cn(avatarIconVariants({ size })), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons2.UserIcon, {}) })
         ]
       }
     );
@@ -546,8 +625,8 @@ var Avatar = React6.forwardRef(
 Avatar.displayName = "Avatar";
 
 // src/components/Content/Typography.tsx
-var React7 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var React8 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var mbCapableBaseClasses = /* @__PURE__ */ new Set([
   "h1-intro",
   "h2-intro",
@@ -583,10 +662,10 @@ var Typography = (props) => {
   const Comp = as ?? "span";
   const mbClassName = useMargin ? getMbClassName(variant) : null;
   const weightClassName = weight === "regular" ? null : `${variant}-${weight}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     Comp,
     {
-      className: cn(variant, weightClassName, mbClassName, className),
+      className: cn("text-primary", variant, weightClassName, mbClassName, className),
       ...rest,
       children
     }
@@ -595,10 +674,10 @@ var Typography = (props) => {
 Typography.displayName = "Typography";
 
 // src/components/Content/Badge.tsx
-var React8 = __toESM(require("react"), 1);
+var React9 = __toESM(require("react"), 1);
 var import_react_slot5 = require("@radix-ui/react-slot");
 var import_class_variance_authority7 = require("class-variance-authority");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var badgeVariants = (0, import_class_variance_authority7.cva)(
   "inline-flex items-center justify-center rounded-4 leading-none whitespace-nowrap gap-1 px-1 py-0",
   {
@@ -628,7 +707,7 @@ var badgeVariants = (0, import_class_variance_authority7.cva)(
     }
   }
 );
-var Badge = React8.forwardRef(
+var Badge = React9.forwardRef(
   (props, ref) => {
     const {
       asChild = false,
@@ -640,17 +719,17 @@ var Badge = React8.forwardRef(
       ...rest
     } = props;
     const Comp = asChild ? import_react_slot5.Slot : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       Comp,
       {
         ref,
         className: cn(badgeVariants({ size, variant }), className),
         ...rest,
-        children: value ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-normal", children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-normal", children: ":" }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-medium", children: value })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-normal", children: label })
+        children: value ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "font-normal", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "font-normal", children: ":" }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "font-medium", children: value })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "font-normal", children: label })
       }
     );
   }
@@ -658,9 +737,9 @@ var Badge = React8.forwardRef(
 Badge.displayName = "Badge";
 
 // src/components/Content/BadgeDigit.tsx
-var React9 = __toESM(require("react"), 1);
+var React10 = __toESM(require("react"), 1);
 var import_class_variance_authority8 = require("class-variance-authority");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var badgeDigitVariants = (0, import_class_variance_authority8.cva)(
   "inline-flex items-center justify-center leading-none whitespace-nowrap text-(--color-b-white)",
   {
@@ -685,7 +764,7 @@ var badgeDigitVariants = (0, import_class_variance_authority8.cva)(
     }
   }
 );
-var BadgeDigit = React9.forwardRef(
+var BadgeDigit = React10.forwardRef(
   (props, ref) => {
     const {
       value,
@@ -694,7 +773,7 @@ var BadgeDigit = React9.forwardRef(
       className,
       ...rest
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "div",
       {
         ref,
@@ -708,9 +787,9 @@ var BadgeDigit = React9.forwardRef(
 BadgeDigit.displayName = "BadgeDigit";
 
 // src/components/Content/BadgeDot.tsx
-var React10 = require("react");
+var React11 = require("react");
 var import_class_variance_authority9 = require("class-variance-authority");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var badgeDotVariants = (0, import_class_variance_authority9.cva)("rounded-12 size-3", {
   variants: {
     status: {
@@ -726,14 +805,14 @@ var badgeDotVariants = (0, import_class_variance_authority9.cva)("rounded-12 siz
   }
 });
 var BadgeDot = ({ status, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cn(badgeDotVariants({ status }), className) });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn(badgeDotVariants({ status }), className) });
 };
 BadgeDot.displayName = "BadgeDot";
 
 // src/components/Content/BadgeStatus.tsx
-var React11 = __toESM(require("react"), 1);
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var BadgeStatus = React11.forwardRef(
+var React12 = __toESM(require("react"), 1);
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var BadgeStatus = React12.forwardRef(
   (props, ref) => {
     const {
       label,
@@ -744,14 +823,14 @@ var BadgeStatus = React11.forwardRef(
     } = props;
     const textClasses = active ? "caption-medium text-primary" : "caption-medium text-primary-disabled";
     const dotClasses = active ? "bg-(--background-informal)" : "bg-(--background-primary)";
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       "div",
       {
         ref,
         className: cn("inline-flex items-center gap-2", className),
         ...rest,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "span",
             {
               className: cn(
@@ -761,7 +840,7 @@ var BadgeStatus = React11.forwardRef(
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: textClasses, children: label })
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: textClasses, children: label })
         ]
       }
     );
@@ -770,9 +849,9 @@ var BadgeStatus = React11.forwardRef(
 BadgeStatus.displayName = "BadgeStatus";
 
 // src/components/Content/Divider.tsx
-var React12 = require("react");
-var import_icons2 = require("@bubo-squared/icons");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var React13 = require("react");
+var import_icons3 = require("@bubo-squared/icons");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var gapBySize = {
   sm: "gap-2",
   md: "gap-3",
@@ -807,14 +886,14 @@ var Divider = (props) => {
       className: _className,
       ...divProps
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "div",
       {
         className: wrapperClass,
         role: "separator",
         "aria-orientation": ariaOrientation,
         ...divProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: lineClass })
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: lineClass })
       }
     );
   }
@@ -828,7 +907,7 @@ var Divider = (props) => {
       ...divProps
     } = props;
     const textLabel = label ? label : "OR";
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "div",
       {
         className: wrapperClass,
@@ -836,8 +915,8 @@ var Divider = (props) => {
         "aria-orientation": ariaOrientation,
         ...divProps,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: lineClass }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: lineClass }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "span",
             {
               className: cn(
@@ -847,7 +926,7 @@ var Divider = (props) => {
               children: textLabel
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: lineClass })
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: lineClass })
         ]
       }
     );
@@ -864,7 +943,7 @@ var Divider = (props) => {
       className: _className,
       ...divProps
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "div",
       {
         className: wrapperClass,
@@ -872,18 +951,18 @@ var Divider = (props) => {
         "aria-orientation": ariaOrientation,
         ...divProps,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: lineClass }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: lineClass }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             IconButton,
             {
               variant: iconButtonVariant ?? "secondary",
               size: resolvedSize,
               "aria-label": ariaLabel ?? "More options",
-              icon: icon ?? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons2.TargetIcon, {}),
+              icon: icon ?? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons3.TargetIcon, {}),
               onClick: onIconClick
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: lineClass })
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: lineClass })
         ]
       }
     );
@@ -897,7 +976,7 @@ var Divider = (props) => {
       className: _className,
       ...divProps
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "div",
       {
         className: wrapperClass,
@@ -905,8 +984,8 @@ var Divider = (props) => {
         "aria-orientation": ariaOrientation,
         ...divProps,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: lineClass }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: lineClass }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             IconButtonGroup,
             {
               className: resolvedOrientation === "vertical" ? "flex-col" : "flex-row",
@@ -914,7 +993,7 @@ var Divider = (props) => {
               size: resolvedSize
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: lineClass })
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: lineClass })
         ]
       }
     );
@@ -930,7 +1009,7 @@ var Divider = (props) => {
       className: _className,
       ...divProps
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "div",
       {
         className: wrapperClass,
@@ -938,8 +1017,8 @@ var Divider = (props) => {
         "aria-orientation": ariaOrientation,
         ...divProps,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: lineClass }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: lineClass }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             Button,
             {
               variant: buttonVariant ?? "secondary",
@@ -948,7 +1027,7 @@ var Divider = (props) => {
               children: buttonLabel
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: lineClass })
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: lineClass })
         ]
       }
     );
@@ -958,11 +1037,11 @@ var Divider = (props) => {
 Divider.displayName = "Divider";
 
 // src/components/Content/Progress.tsx
-var React14 = __toESM(require("react"), 1);
+var React15 = __toESM(require("react"), 1);
 
 // src/components/Inputs/Field.tsx
-var React13 = __toESM(require("react"), 1);
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var React14 = __toESM(require("react"), 1);
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var fieldBase = "flex flex-col gap-2 items-start";
 var Field = (props) => {
   const {
@@ -975,18 +1054,18 @@ var Field = (props) => {
     className,
     children
   } = props;
-  const fieldId = React13.useId();
+  const fieldId = React14.useId();
   const labelId = label ? `${fieldId}-label` : void 0;
   const hintId = hint ? `${fieldId}-hint` : void 0;
   const hintColorClass = disabled ? "text-primary-disabled" : status === "success" ? "text-(--color-success)" : status === "error" ? "text-(--color-error)" : "text-(--color-secondary)";
   const labelColorClass = disabled ? "text-primary-disabled" : "text-primary";
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn(fieldBase, className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex w-full items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", { id: labelId, className: cn("paragraph-sm", labelColorClass), children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: cn(fieldBase, className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex w-full items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { id: labelId, className: cn("paragraph-sm", labelColorClass), children: label }),
       labelRight
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "relative w-full", children }),
-    !hideHint && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "relative w-full", children }),
+    !hideHint && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "p",
       {
         id: hint ? hintId : void 0,
@@ -999,13 +1078,13 @@ var Field = (props) => {
 Field.displayName = "Field";
 
 // src/components/Content/Progress.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var sizeToBarClasses = {
   lg: "h-4 rounded-16",
   md: "h-2 rounded-8",
   sm: "h-1 rounded-4"
 };
-var Progress = React14.forwardRef(
+var Progress = React15.forwardRef(
   (props, ref) => {
     const {
       value,
@@ -1022,17 +1101,17 @@ var Progress = React14.forwardRef(
     const clamped = Number.isFinite(value) ? Math.min(100, Math.max(0, value)) : 0;
     const percentageLabel = `${Math.round(clamped)}%`;
     const barHeightClasses = sizeToBarClasses[size];
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       Field,
       {
         label,
-        labelRight: showProgressLabel && label ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "footnote text-(--color-secondary)", children: percentageLabel }) : void 0,
+        labelRight: showProgressLabel && label ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "footnote text-(--color-secondary)", children: percentageLabel }) : void 0,
         hint,
         hideHint,
         status,
         disabled,
         className: cn("w-full", className),
-        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "div",
           {
             ref,
@@ -1042,7 +1121,7 @@ var Progress = React14.forwardRef(
             "aria-valuemax": 100,
             "aria-label": label,
             ...rest,
-            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               "div",
               {
                 className: cn(
@@ -1050,7 +1129,7 @@ var Progress = React14.forwardRef(
                   barHeightClasses,
                   disabled && "opacity-50"
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                   "div",
                   {
                     className: cn(
@@ -1071,10 +1150,10 @@ var Progress = React14.forwardRef(
 Progress.displayName = "Progress";
 
 // src/components/Content/StatusAvatar.tsx
-var React15 = __toESM(require("react"), 1);
+var React16 = __toESM(require("react"), 1);
 var import_class_variance_authority10 = require("class-variance-authority");
-var import_icons3 = require("@bubo-squared/icons");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_icons4 = require("@bubo-squared/icons");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var iconStatusVariants = (0, import_class_variance_authority10.cva)(
   "inline-flex size-5 items-center justify-center rounded-full border-1 border-(--color-primary-inverse) p-1",
   {
@@ -1099,11 +1178,11 @@ var presenceDotByVariant = {
   away: "bg-(--background-warning) border-1 border-(--color-primary-inverse)",
   busy: "bg-(--background-error) border-1 border-(--color-primary-inverse)"
 };
-var StatusAvatar = React15.forwardRef((props, ref) => {
+var StatusAvatar = React16.forwardRef((props, ref) => {
   const { variant = "verified", className, ...rest } = props;
   if (variant === "offline" || variant === "online" || variant === "away" || variant === "busy") {
     const dotClasses = presenceDotByVariant[variant];
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "div",
       {
         ref,
@@ -1112,23 +1191,23 @@ var StatusAvatar = React15.forwardRef((props, ref) => {
           className
         ),
         ...rest,
-        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: cn(dotClasses, "size-3.5 rounded-full") })
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: cn(dotClasses, "size-3.5 rounded-full") })
       }
     );
   }
   const iconVariant = variant;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "div",
     {
       ref,
       className: cn(iconStatusVariants({ variant: iconVariant }), className),
       ...rest,
       children: [
-        iconVariant === "verified" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons3.CheckIcon, { className: "size-3 text-button-white" }),
-        iconVariant === "bookmark" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons3.BookmarkCheckIcon, { className: "size-3 text-button-white" }),
-        iconVariant === "favorite" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons3.StarIcon, { className: "size-3 text-button-white" }),
-        iconVariant === "add" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons3.PlusIcon, { className: "size-3 text-button-white" }),
-        iconVariant === "remove" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons3.CrossIcon, { className: "size-3 text-button-white" })
+        iconVariant === "verified" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons4.CheckIcon, { className: "size-3 text-button-white" }),
+        iconVariant === "bookmark" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons4.BookmarkCheckIcon, { className: "size-3 text-button-white" }),
+        iconVariant === "favorite" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons4.StarIcon, { className: "size-3 text-button-white" }),
+        iconVariant === "add" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons4.PlusIcon, { className: "size-3 text-button-white" }),
+        iconVariant === "remove" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons4.CrossIcon, { className: "size-3 text-button-white" })
       ]
     }
   );
@@ -1136,10 +1215,10 @@ var StatusAvatar = React15.forwardRef((props, ref) => {
 StatusAvatar.displayName = "StatusAvatar";
 
 // src/components/Content/Tag.tsx
-var React16 = __toESM(require("react"), 1);
+var React17 = __toESM(require("react"), 1);
 var import_react_slot6 = require("@radix-ui/react-slot");
 var import_class_variance_authority11 = require("class-variance-authority");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var tagVariants = (0, import_class_variance_authority11.cva)(
   "inline-flex flex-row items-center justify-center rounded-6 gap-2 px-3 overflow-hidden border-1 border-(--border-secondary) bg-(--background-neutral) hover:border-(--border-secondary-hover) focus:border-(--border-brand) focus-ring-primary ",
   {
@@ -1156,7 +1235,7 @@ var tagVariants = (0, import_class_variance_authority11.cva)(
 );
 var disabledTag = "pointer-events-none border-(--border-secondary-disabled) bg-(--background-neutral-disabled) text-primary-disabled";
 var iconClasses = "flex items-center justify-center w-5 h-5 [&>*]:w-5 [&>*]:h-5 shrink-0 text-primary";
-var Tag = React16.forwardRef(
+var Tag = React17.forwardRef(
   (props, ref) => {
     const {
       size = "sm",
@@ -1168,37 +1247,295 @@ var Tag = React16.forwardRef(
       ...rest
     } = props;
     const Comp = asChild ? import_react_slot6.Slot : "div";
-    const leading = props.leadingIcon && React16.isValidElement(props.leadingIcon) ? React16.cloneElement(props.leadingIcon, { disabled, ...props.leadingIcon.props }) : null;
-    const trailing = props.trailingIcon && React16.isValidElement(props.trailingIcon) ? React16.cloneElement(props.trailingIcon, { disabled, ...props.trailingIcon.props }) : null;
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    const leading = props.leadingIcon && React17.isValidElement(props.leadingIcon) ? React17.cloneElement(props.leadingIcon, { disabled, ...props.leadingIcon.props }) : null;
+    const trailing = props.trailingIcon && React17.isValidElement(props.trailingIcon) ? React17.cloneElement(props.trailingIcon, { disabled, ...props.trailingIcon.props }) : null;
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       Comp,
       {
         className: cn(tagVariants({ size }), disabled && disabledTag, className),
         ref,
         ...rest,
         children: [
-          leading && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: iconClasses, children: leading }),
-          value ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-row gap-1 items-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-primary paragraph-lg mb-0! cursor-default font-normal", children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-primary paragraph-lg mb-0! cursor-default font-normal", children: ":" }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-primary paragraph-lg-medium mb-0! cursor-default font-medium", children: value })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-primary paragraph-lg mb-0! cursor-default", children: label }),
-          trailing && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: iconClasses, children: trailing })
+          leading && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: iconClasses, children: leading }),
+          value ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-row gap-1 items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-primary paragraph-lg mb-0! cursor-default font-normal", children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-primary paragraph-lg mb-0! cursor-default font-normal", children: ":" }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-primary paragraph-lg-medium mb-0! cursor-default font-medium", children: value })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-primary paragraph-lg mb-0! cursor-default", children: label }),
+          trailing && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: iconClasses, children: trailing })
         ]
       }
     );
   }
 );
 
+// src/components/Content/Menu.tsx
+var React19 = require("react");
+
+// src/components/ui/dropdown-menu.tsx
+var React18 = __toESM(require("react"), 1);
+var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
+var import_icons5 = require("@bubo-squared/icons");
+
+// src/components/ui/dropdown-styles.ts
+var import_class_variance_authority12 = require("class-variance-authority");
+var dropdownSurfaceClass = "z-50 rounded-4 border border-(--border-secondary-hover) bg-(--background-neutral) shadow-card-md";
+var dropdownScrollClass = "max-h-79 overflow-y-auto dropdown-scrollbar";
+var dropdownRowVariants = (0, import_class_variance_authority12.cva)(
+  "flex w-full items-center gap-2 pl-(--space-8) pr-(--space-16) text-left text-primary cursor-pointer hover:bg-(--background-secondary)",
+  {
+    variants: {
+      size: {
+        sm: "paragraph-sm py-(--space-4)",
+        md: "paragraph-md py-(--space-6)",
+        lg: "paragraph-lg py-(--space-8)",
+        xl: "subtitle py-(--space-10)"
+      },
+      inset: {
+        true: "pl-(--space-16)"
+      }
+    },
+    defaultVariants: {
+      size: "lg"
+    }
+  }
+);
+
+// src/components/ui/dropdown-menu.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var DropdownMenuSizeContext = React18.createContext("lg");
+function useDropdownMenuSize(explicitSize) {
+  const contextSize = React18.useContext(DropdownMenuSizeContext);
+  return explicitSize ?? contextSize;
+}
+function DropdownMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    DropdownMenuPrimitive.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      ...props
+    }
+  );
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  size = "lg",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownMenuSizeContext.Provider, { value: size, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    DropdownMenuPrimitive.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn(
+        dropdownSurfaceClass,
+        dropdownScrollClass,
+        "min-w-37.5 p-0",
+        className
+      ),
+      ...props
+    }
+  ) }) });
+}
+function DropdownMenuGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  size,
+  variant = "default",
+  ...props
+}) {
+  const resolvedSize = useDropdownMenuSize(size);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    DropdownMenuPrimitive.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        dropdownRowVariants({ size: resolvedSize, inset }),
+        "data-highlighted:bg-(--background-secondary) data-highlighted:outline-none",
+        "data-disabled:pointer-events-none data-disabled:opacity-50 data-disabled:text-primary-disabled",
+        variant === "destructive" ? "text-(--color-error)" : null,
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuLabel({
+  className,
+  inset,
+  size,
+  ...props
+}) {
+  const resolvedSize = useDropdownMenuSize(size);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    DropdownMenuPrimitive.Label,
+    {
+      "data-slot": "dropdown-menu-label",
+      "data-inset": inset,
+      className: cn(
+        dropdownRowVariants({ size: resolvedSize, inset }),
+        "text-secondary cursor-default hover:bg-transparent caption",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    DropdownMenuPrimitive.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("my-1 h-px bg-(--border-secondary)", className),
+      ...props
+    }
+  );
+}
+function DropdownMenuShortcut({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "span",
+    {
+      "data-slot": "dropdown-menu-shortcut",
+      className: cn(
+        "ml-auto paragraph-sm text-secondary",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuSub({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  size,
+  children,
+  ...props
+}) {
+  const resolvedSize = useDropdownMenuSize(size);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    DropdownMenuPrimitive.SubTrigger,
+    {
+      "data-slot": "dropdown-menu-sub-trigger",
+      "data-inset": inset,
+      className: cn(
+        dropdownRowVariants({ size: resolvedSize, inset }),
+        "data-highlighted:bg-(--background-secondary) data-highlighted:outline-none",
+        "data-[state=open]:bg-(--background-secondary)",
+        "data-disabled:pointer-events-none data-disabled:opacity-50 data-disabled:text-primary-disabled",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons5.ChevronRightIcon, { className: "ml-auto size-4 text-(--icon-primary)" })
+      ]
+    }
+  );
+}
+function DropdownMenuSubContent({
+  className,
+  size,
+  ...props
+}) {
+  const resolvedSize = useDropdownMenuSize(size);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownMenuSizeContext.Provider, { value: resolvedSize, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    DropdownMenuPrimitive.SubContent,
+    {
+      "data-slot": "dropdown-menu-sub-content",
+      className: cn(
+        dropdownSurfaceClass,
+        dropdownScrollClass,
+        "min-w-37.5 p-0",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+
+// src/components/Content/Menu.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var Menu = (props) => {
+  const {
+    trigger,
+    children,
+    size = "lg",
+    align = "start",
+    side,
+    offset = 4,
+    className,
+    open,
+    onOpenChange,
+    modal
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DropdownMenu, { open, onOpenChange, modal, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      DropdownMenuContent,
+      {
+        align,
+        side,
+        sideOffset: offset,
+        size,
+        className: cn(className),
+        children
+      }
+    )
+  ] });
+};
+Menu.displayName = "Menu";
+var MenuGroup = DropdownMenuGroup;
+var MenuItem = DropdownMenuItem;
+var MenuLabel = DropdownMenuLabel;
+var MenuPortal = DropdownMenuPortal;
+var MenuSeparator = DropdownMenuSeparator;
+var MenuShortcut = DropdownMenuShortcut;
+var MenuSub = DropdownMenuSub;
+var MenuSubContent = DropdownMenuSubContent;
+var MenuSubTrigger = DropdownMenuSubTrigger;
+
 // src/components/Inputs/Checkbox.tsx
-var React17 = require("react");
+var React20 = require("react");
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"), 1);
-var import_icons4 = require("@bubo-squared/icons");
-var import_icons5 = require("@bubo-squared/icons");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_icons6 = require("@bubo-squared/icons");
+var import_icons7 = require("@bubo-squared/icons");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function Checkbox({ label, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "inline-flex items-center gap-(--space-12) cursor-pointer select-none", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { className: "inline-flex items-center gap-(--space-12) cursor-pointer select-none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       CheckboxPrimitive.Root,
       {
         className: cn(
@@ -1214,35 +1551,41 @@ function Checkbox({ label, className, ...props }) {
           className
         ),
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons4.CheckIcon, { className: "h-5 w-5 hidden group-data-[state=checked]:block" }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons5.MinusIcon, { className: "h-5 w-5 hidden group-data-[state=indeterminate]:block" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons6.CheckIcon, { className: "h-5 w-5 hidden group-data-[state=checked]:block" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons7.MinusIcon, { className: "h-5 w-5 hidden group-data-[state=indeterminate]:block" })
         ] })
       }
     ),
-    label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "paragraph-md-medium text-primary", children: label })
+    label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "paragraph-md-medium text-primary", children: label })
   ] });
 }
 
-// src/components/Inputs/Dropdown.tsx
-var React18 = __toESM(require("react"), 1);
-var import_class_variance_authority12 = require("class-variance-authority");
-var import_icons6 = require("@bubo-squared/icons");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var dropdownTriggerVariants = (0, import_class_variance_authority12.cva)(
-  "group flex w-full items-center justify-between rounded-4 border bg-(--background-primary) px-3 py-2 text-left transition-colors cursor-pointer focus-ring-primary focus:border-(--border-brand) hover:bg-(--background-primary-hover) disabled:bg-(--background-primary) disabled:border-(--border-secondary-disabled) disabled:text-primary-disabled disabled:cursor-default",
+// src/components/Inputs/Autocomplete.tsx
+var React23 = __toESM(require("react"), 1);
+var import_class_variance_authority14 = require("class-variance-authority");
+
+// src/components/Inputs/InputShell.tsx
+var React21 = __toESM(require("react"), 1);
+var import_class_variance_authority13 = require("class-variance-authority");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var inputShellVariants = (0, import_class_variance_authority13.cva)(
+  "group flex w-full items-center rounded-4 border bg-(--background-primary) text-left cursor-text border-(--border-secondary)",
   {
     variants: {
       size: {
-        sm: "h-8 py-1",
-        md: "h-10 py-2",
-        lg: "h-11",
-        xl: "h-14"
+        sm: "gap-2 px-2 py-1 h-8",
+        md: "gap-2 px-2 py-2 h-10",
+        lg: "gap-2 px-2 py-2 h-11",
+        xl: "gap-2 px-[10px] py-2 h-14"
       },
       status: {
-        default: "border-(--border-secondary)",
-        success: "border-(--border-success)",
-        error: "border-(--border-error)"
+        default: "input-default",
+        success: "input-success",
+        error: "input-error"
+      },
+      disabled: {
+        true: "bg-(--background-primary-disabled) border-(--border-secondary-disabled) text-primary-disabled cursor-default"
       }
     },
     defaultVariants: {
@@ -1251,16 +1594,362 @@ var dropdownTriggerVariants = (0, import_class_variance_authority12.cva)(
     }
   }
 );
-var dropdownTextVariants = (0, import_class_variance_authority12.cva)("truncate", {
-  variants: {
-    size: {
-      sm: "paragraph-md",
-      md: "paragraph-lg",
-      lg: "subtitle",
-      xl: "h6-title"
-    },
+var InputShell = React21.forwardRef(
+  ({ size, status, disabled, className, ...rest }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      "div",
+      {
+        ref,
+        "aria-disabled": disabled || void 0,
+        className: cn(
+          inputShellVariants({ size, status, disabled }),
+          className
+        ),
+        ...rest
+      }
+    );
+  }
+);
+InputShell.displayName = "InputShell";
+
+// src/components/ui/input.tsx
+var React22 = __toESM(require("react"), 1);
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var Input = React22.forwardRef(
+  ({ className, type, variant = "default", ...props }, ref) => {
+    const base = "text-primary placeholder:text-(--color-secondary) disabled:text-primary-disabled disabled:placeholder:text-primary-disabled selection:bg-primary selection:text-primary-foreground file:text-foreground";
+    const defaultStyles = "dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 shadow-xs transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:border-ring focus-visible:ring-0 focus-visible:shadow-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive";
+    const bareStyles = "bg-transparent outline-none w-full";
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      "input",
+      {
+        ref,
+        type,
+        "data-slot": "input",
+        className: cn(
+          base,
+          variant === "default" ? defaultStyles : bareStyles,
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// src/components/Inputs/Autocomplete.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var inputTextVariants = (0, import_class_variance_authority14.cva)("truncate", {
+  variants: {
+    size: {
+      sm: "paragraph-md",
+      md: "paragraph-lg",
+      lg: "subtitle",
+      xl: "h6-title"
+    }
+  },
+  defaultVariants: {
+    size: "lg"
+  }
+});
+var optionVariants = (0, import_class_variance_authority14.cva)(
+  "w-full text-left hover:bg-(--background-secondary)",
+  {
+    variants: {
+      size: {
+        sm: "paragraph-sm py-(--space-4) ",
+        md: "paragraph-md py-(--space-6) ",
+        lg: "paragraph-lg py-(--space-8) ",
+        xl: "subtitle py-(--space-10) "
+      },
+      active: {
+        true: "bg-(--background-secondary)"
+      }
+    },
+    defaultVariants: {
+      size: "lg",
+      active: false
+    }
+  }
+);
+var iconWrapperVariants = (0, import_class_variance_authority14.cva)(
+  "flex items-center justify-center shrink-0 text-(--icon-primary)",
+  {
+    variants: {
+      size: {
+        sm: "size-4 [&>svg]:size-4",
+        md: "size-5 [&>svg]:size-5",
+        lg: "size-5 [&>svg]:size-5",
+        xl: "size-6 [&>svg]:size-6"
+      },
+      disabled: {
+        true: "text-(--icon-primary-disabled)"
+      }
+    },
+    defaultVariants: {
+      size: "lg"
+    }
+  }
+);
+var Autocomplete = (props) => {
+  const {
+    label,
+    hint,
+    hideHint,
+    status = "default",
+    size = "lg",
+    disabled,
+    className,
+    leadingIcon,
+    trailingIcon,
+    options,
+    loading = false,
+    loadingText = "Loading\u2026",
+    noOptionsText = "No matches",
+    value,
+    defaultValue,
+    onChange,
+    inputValue,
+    defaultInputValue,
+    onInputChange,
+    placeholder = "Search\u2026",
+    onKeyDown,
+    onFocus,
+    onBlur,
+    id,
+    ...inputProps
+  } = props;
+  const isValueControlled = value !== void 0;
+  const [internalValue, setInternalValue] = React23.useState(
+    defaultValue ?? ""
+  );
+  const isInputControlled = inputValue !== void 0;
+  const [internalInputValue, setInternalInputValue] = React23.useState(
+    defaultInputValue ?? ""
+  );
+  const [isFocused, setIsFocused] = React23.useState(false);
+  const [activeIndex, setActiveIndex] = React23.useState(-1);
+  const inputRef = React23.useRef(null);
+  const baseId = React23.useId();
+  const inputId = id ?? baseId;
+  const listboxId = `${inputId}-listbox`;
+  const currentValue = (isValueControlled ? value : internalValue) ?? "";
+  const currentInput = (isInputControlled ? inputValue : internalInputValue) ?? "";
+  React23.useEffect(() => {
+    if (isFocused) return;
+    if (isInputControlled) return;
+    if (!isValueControlled) return;
+    setInternalInputValue(currentValue);
+  }, [currentValue, isFocused, isInputControlled, isValueControlled]);
+  const showDropdown = isFocused && (loading || options.length > 0 || currentInput.trim().length > 0);
+  const setInputText = (next) => {
+    if (!isInputControlled) {
+      setInternalInputValue(next);
+    }
+    onInputChange?.(next);
+  };
+  const commitValue = (next) => {
+    if (!isValueControlled) {
+      setInternalValue(next);
+    }
+    onChange?.(next);
+    setInputText(next);
+    setActiveIndex(-1);
+  };
+  const handleContainerClick = () => {
+    if (disabled) return;
+    inputRef.current?.focus();
+  };
+  const handleInputChange = (event) => {
+    const next = event.target.value;
+    setInputText(next);
+    setActiveIndex(-1);
+  };
+  const handleFocus = (event) => {
+    setIsFocused(true);
+    onFocus?.(event);
+  };
+  const handleBlur = (event) => {
+    setIsFocused(false);
+    setActiveIndex(-1);
+    onBlur?.(event);
+  };
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    if (!showDropdown && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+      setIsFocused(true);
+      return;
+    }
+    switch (event.key) {
+      case "ArrowDown": {
+        event.preventDefault();
+        setActiveIndex((prev) => {
+          if (options.length === 0) return -1;
+          const next = prev < 0 ? 0 : Math.min(prev + 1, options.length - 1);
+          return next;
+        });
+        break;
+      }
+      case "ArrowUp": {
+        event.preventDefault();
+        setActiveIndex((prev) => {
+          if (options.length === 0) return -1;
+          const next = prev <= 0 ? 0 : prev - 1;
+          return next;
+        });
+        break;
+      }
+      case "Enter": {
+        if (activeIndex >= 0 && activeIndex < options.length) {
+          event.preventDefault();
+          commitValue(options[activeIndex]);
+          setIsFocused(false);
+        }
+        break;
+      }
+      case "Escape": {
+        event.preventDefault();
+        setIsFocused(false);
+        setActiveIndex(-1);
+        break;
+      }
+      default:
+        break;
+    }
+  };
+  const handleOptionMouseDown = (event) => {
+    event.preventDefault();
+  };
+  const handleOptionClick = (option) => {
+    commitValue(option);
+    setIsFocused(false);
+  };
+  const activeDescendantId = activeIndex >= 0 ? `${inputId}-option-${activeIndex}` : void 0;
+  const showLeadingIcon = !!leadingIcon;
+  const showTrailingIcon = !!trailingIcon;
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Field, { label, hint, hideHint, status, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "relative w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+      InputShell,
+      {
+        size,
+        status,
+        disabled,
+        className,
+        onClick: handleContainerClick,
+        children: [
+          showLeadingIcon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: cn(iconWrapperVariants({ size, disabled: !!disabled })), children: leadingIcon }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            Input,
+            {
+              ref: inputRef,
+              id: inputId,
+              type: "text",
+              disabled: disabled ?? void 0,
+              placeholder,
+              value: currentInput,
+              onChange: handleInputChange,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              onKeyDown: handleKeyDown,
+              role: "combobox",
+              "aria-autocomplete": "list",
+              "aria-controls": listboxId,
+              "aria-expanded": showDropdown,
+              "aria-activedescendant": activeDescendantId,
+              variant: "bare",
+              className: cn(inputTextVariants({ size }), "bg-transparent outline-none w-full"),
+              ...inputProps
+            }
+          ),
+          showTrailingIcon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: cn(iconWrapperVariants({ size, disabled: !!disabled })), children: trailingIcon })
+        ]
+      }
+    ),
+    showDropdown && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      "div",
+      {
+        className: cn(
+          "absolute left-0 right-0 mt-1",
+          dropdownSurfaceClass,
+          dropdownScrollClass
+        ),
+        children: loading ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          "div",
+          {
+            className: cn(optionVariants({ size }), "px-(--space-8) pr-(--space-16) text-secondary"),
+            "aria-live": "polite",
+            children: loadingText
+          }
+        ) : options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          "div",
+          {
+            className: cn(optionVariants({ size }), "px-(--space-8) pr-(--space-16) text-secondary"),
+            "aria-live": "polite",
+            children: noOptionsText
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ul", { id: listboxId, role: "listbox", className: "flex flex-col", children: options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          "li",
+          {
+            id: `${inputId}-option-${index}`,
+            role: "option",
+            "aria-selected": index === activeIndex,
+            className: cn(
+              optionVariants({ size, active: index === activeIndex }),
+              "px-(--space-8) pr-(--space-16) text-primary cursor-pointer"
+            ),
+            onMouseDown: handleOptionMouseDown,
+            onMouseEnter: () => setActiveIndex(index),
+            onClick: () => handleOptionClick(option),
+            children: option
+          },
+          `${option}-${index}`
+        )) })
+      }
+    )
+  ] }) });
+};
+Autocomplete.displayName = "Autocomplete";
+
+// src/components/Inputs/Select.tsx
+var React24 = __toESM(require("react"), 1);
+var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
+var import_class_variance_authority15 = require("class-variance-authority");
+var import_icons8 = require("@bubo-squared/icons");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var selectTriggerVariants = (0, import_class_variance_authority15.cva)(
+  "group flex w-full items-center justify-between rounded-4 border bg-(--background-primary) p-2 text-left transition-colors cursor-pointer focus-ring-primary focus:border-(--border-brand) hover:bg-(--background-primary-hover) disabled:bg-(--background-primary) disabled:border-(--border-secondary-disabled) disabled:text-primary-disabled disabled:cursor-default",
+  {
+    variants: {
+      size: {
+        sm: "h-8 py-1",
+        md: "h-10 py-2",
+        lg: "h-11",
+        xl: "h-14"
+      },
+      status: {
+        default: "border-(--border-secondary)",
+        success: "border-(--border-success)",
+        error: "border-(--border-error)"
+      }
+    },
+    defaultVariants: {
+      size: "lg",
+      status: "default"
+    }
+  }
+);
+var textVariants = (0, import_class_variance_authority15.cva)("truncate", {
+  variants: {
+    size: {
+      sm: "paragraph-md",
+      md: "paragraph-lg",
+      lg: "subtitle",
+      xl: "h6-title"
+    },
     hasValue: {
-      false: "text-(--color-secondary)",
+      false: "text-secondary",
       true: "text-primary"
     },
     disabled: {
@@ -1272,13 +1961,13 @@ var dropdownTextVariants = (0, import_class_variance_authority12.cva)("truncate"
     hasValue: false
   }
 });
-var dropdownIconVariants = (0, import_class_variance_authority12.cva)("flex items-center justify-center shrink-0", {
+var selectIconVariants = (0, import_class_variance_authority15.cva)("flex items-center justify-center shrink-0", {
   variants: {
     size: {
-      sm: "w-4 h-4",
-      md: "w-5 h-5",
-      lg: "w-5 h-5",
-      xl: "w-6 h-6"
+      sm: "size-4",
+      md: "size-5",
+      lg: "size-5",
+      xl: "size-6"
     },
     disabled: {
       false: "text-(--icon-primary)",
@@ -1290,31 +1979,25 @@ var dropdownIconVariants = (0, import_class_variance_authority12.cva)("flex item
     disabled: false
   }
 });
-var dropdownItemVariants = (0, import_class_variance_authority12.cva)("", {
-  variants: {
-    size: {
-      sm: "h-8",
-      md: "h-10",
-      lg: "h-11",
-      xl: "h-14"
-    }
-  }
-});
-var dropdownButtonVariants = (0, import_class_variance_authority12.cva)("flex w-full items-center gap-2 pl-(--space-8) pr-(--space-16) text-left paragraph-lg text-primary hover:bg-(--background-secondary)", {
-  variants: {
-    size: {
-      sm: "paragraph-sm py-(--space-4) ",
-      md: "paragraph-md py-(--space-6) ",
-      lg: "paragraph-lg py-(--space-8) ",
-      xl: "subtitle py-(--space-10) "
+var selectButtonVariants = (0, import_class_variance_authority15.cva)(
+  "flex w-full items-center gap-2 pl-(--space-8) pr-(--space-16) text-left paragraph-lg text-primary hover:bg-(--background-secondary)",
+  {
+    variants: {
+      size: {
+        sm: "paragraph-sm py-(--space-4) ",
+        md: "paragraph-md py-(--space-6) ",
+        lg: "paragraph-lg py-(--space-8) ",
+        xl: "subtitle py-(--space-10) "
+      }
     }
   }
-});
-var Dropdown = (props) => {
+);
+var Select = (props) => {
   const {
     label = "Field Label",
     hint = "This is a hint text to help user.",
     hideHint = false,
+    name,
     placeholder = "Placeholder text",
     size = "lg",
     status = "default",
@@ -1325,47 +2008,44 @@ var Dropdown = (props) => {
     onChange,
     className,
     showMenu,
+    required = false,
     ...buttonProps
   } = props;
-  const dropdownRef = React18.useRef(null);
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = React18.useState(
-    defaultValue
+  const controlledValue = value ?? "";
+  const [internalValue, setInternalValue] = React24.useState(
+    defaultValue ?? ""
   );
-  const [open, setOpen] = React18.useState(false);
-  const currentValue = isControlled ? value : internalValue;
-  const selectedOption = options.find((opt) => opt.value === currentValue);
+  const [open, setOpen] = React24.useState(false);
+  const rawValue = isControlled ? controlledValue : internalValue;
+  const selectedOption = options.find((opt) => opt.value === rawValue);
+  const currentValue = selectedOption ? selectedOption.value : "";
   const hasValue = !!selectedOption;
   const isOpen = showMenu ?? open;
-  const handleToggle = () => {
-    if (disabled) return;
+  const handleOpenChange = (nextOpen) => {
     if (showMenu === void 0) {
-      setOpen((prev) => !prev);
+      setOpen(nextOpen);
     }
   };
-  const handleSelect = (optionValue) => {
+  const handleValueChange = (nextValue) => {
     if (!isControlled) {
-      setInternalValue(optionValue);
+      setInternalValue(nextValue);
     }
-    onChange?.(optionValue);
+    onChange?.(nextValue);
     if (showMenu === void 0) {
       setOpen(false);
     }
   };
-  React18.useEffect(() => {
-    if (showMenu !== void 0) return;
-    const handleClickOutside = (event) => {
-      if (!dropdownRef.current) return;
-      if (!dropdownRef.current.contains(event.target)) {
-        setOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [showMenu]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ref: dropdownRef, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  const handleClear = () => {
+    if (!isControlled) {
+      setInternalValue("");
+    }
+    onChange?.("");
+    if (showMenu === void 0) {
+      setOpen(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     Field,
     {
       label,
@@ -1373,170 +2053,103 @@ var Dropdown = (props) => {
       hideHint,
       status,
       disabled,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-          "button",
-          {
-            type: "button",
-            "aria-haspopup": "listbox",
-            "aria-expanded": isOpen,
-            disabled,
-            className: cn(dropdownTriggerVariants({ size, status }), className),
-            onClick: handleToggle,
-            "data-open": isOpen || void 0,
-            ...buttonProps,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                "span",
-                {
-                  className: cn(
-                    dropdownTextVariants({
-                      size,
-                      hasValue,
-                      disabled: !!disabled
-                    })
-                  ),
-                  children: hasValue ? selectedOption?.label : placeholder
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: cn(dropdownIconVariants({ size, disabled: !!disabled })), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons6.ChevronDownIcon, {}) })
-            ]
-          }
-        ),
-        isOpen && options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "absolute z-10 mt-1 w-full min-w-343 rounded-4 border border-(--border-secondary-hover) bg-(--background-neutral) shadow-card-md flex overflow-y-scroll dropdown-scrollbar max-h-79", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("ul", { role: "listbox", className: "flex flex-1 flex-col", children: [
-          hasValue && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            "li",
-            {
-              className: cn(
-                "bg-(--background-neutral) border-b border-(--border-secondary)",
-                dropdownItemVariants({ size })
-              ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                "button",
-                {
-                  type: "button",
-                  className: cn(dropdownButtonVariants({ size }), "text-secondary"),
-                  role: "option",
-                  "aria-selected": false,
-                  onClick: () => handleSelect(""),
-                  children: "Clear"
-                }
-              )
-            }
-          ),
-          options.map((opt) => {
-            const selected = opt.value === currentValue;
-            return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              "li",
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+        SelectPrimitive.Root,
+        {
+          value: currentValue,
+          onValueChange: handleValueChange,
+          open: isOpen,
+          onOpenChange: handleOpenChange,
+          disabled,
+          name,
+          required,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+              "button",
               {
+                type: "button",
+                "aria-haspopup": "listbox",
+                "aria-expanded": isOpen,
+                disabled,
                 className: cn(
-                  "bg-(--background-neutral) border-b border-(--border-secondary) last:border-b-0 ",
-                  selected && "bg-(--background-secondary)",
-                  dropdownItemVariants({ size })
+                  selectTriggerVariants({ size, status }),
+                  textVariants({
+                    size,
+                    hasValue,
+                    disabled: !!disabled
+                  }),
+                  hasValue ? "text-primary" : "text-secondary",
+                  className
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                  "button",
-                  {
-                    type: "button",
-                    className: dropdownButtonVariants({ size }),
-                    role: "option",
-                    "aria-selected": selected,
-                    onClick: () => handleSelect(opt.value),
-                    children: opt.label
-                  }
-                )
-              },
-              opt.value
-            );
-          })
-        ] }) })
-      ]
-    }
-  ) });
-};
-Dropdown.displayName = "Dropdown";
-
-// src/components/Inputs/PasswordInput.tsx
-var React21 = __toESM(require("react"), 1);
-var import_class_variance_authority14 = require("class-variance-authority");
-
-// src/components/ui/input.tsx
-var React19 = __toESM(require("react"), 1);
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var Input = React19.forwardRef(
-  ({ className, type, variant = "default", ...props }, ref) => {
-    const base = "text-primary placeholder:text-(--color-secondary) disabled:text-primary-disabled disabled:placeholder:text-primary-disabled selection:bg-primary selection:text-primary-foreground file:text-foreground";
-    const defaultStyles = "dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 shadow-xs transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:border-ring focus-visible:ring-0 focus-visible:shadow-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive";
-    const bareStyles = "bg-transparent outline-none w-full";
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-      "input",
-      {
-        ref,
-        type,
-        "data-slot": "input",
-        className: cn(
-          base,
-          variant === "default" ? defaultStyles : bareStyles,
-          className
-        ),
-        ...props
-      }
-    );
-  }
-);
-Input.displayName = "Input";
-
-// src/components/Inputs/InputShell.tsx
-var React20 = __toESM(require("react"), 1);
-var import_class_variance_authority13 = require("class-variance-authority");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var inputShellVariants = (0, import_class_variance_authority13.cva)(
-  "group flex w-full items-center rounded-4 border bg-(--background-primary) text-left cursor-text border-(--border-secondary)",
-  {
-    variants: {
-      size: {
-        sm: "gap-2 px-2 py-1 h-8",
-        md: "gap-2 px-2 py-2 h-10",
-        lg: "gap-2 px-2 py-2 h-11",
-        xl: "gap-2 px-[10px] py-2 h-14"
-      },
-      status: {
-        default: "input-default",
-        success: "input-success",
-        error: "input-error"
-      },
-      disabled: {
-        true: "bg-(--background-primary-disabled) border-(--border-secondary-disabled) text-primary-disabled cursor-default"
-      }
-    },
-    defaultVariants: {
-      size: "lg",
-      status: "default"
+                "data-open": isOpen || void 0,
+                ...buttonProps,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectPrimitive.Value, { placeholder }),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                    "span",
+                    {
+                      className: cn(selectIconVariants({ size, disabled: !!disabled })),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_icons8.ChevronDownIcon, {})
+                    }
+                  ) })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              SelectPrimitive.Content,
+              {
+                position: "popper",
+                align: "start",
+                sideOffset: 4,
+                className: cn(
+                  dropdownSurfaceClass,
+                  dropdownScrollClass,
+                  "min-w-343"
+                ),
+                style: { minWidth: "var(--radix-select-trigger-width)" },
+                children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectPrimitive.Viewport, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-col", children: [
+                  hasValue && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: cn("bg-(--background-neutral)"), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      className: cn(
+                        selectButtonVariants({ size }),
+                        "text-secondary"
+                      ),
+                      onClick: handleClear,
+                      children: "Clear"
+                    }
+                  ) }),
+                  options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                    SelectPrimitive.Item,
+                    {
+                      value: opt.value,
+                      className: cn(
+                        "bg-(--background-neutral)",
+                        "data-highlighted:bg-(--background-secondary) data-highlighted:outline-none",
+                        "data-[state=checked]:bg-(--background-secondary)"
+                      ),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: selectButtonVariants({ size }), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectPrimitive.ItemText, { children: opt.label }) })
+                    },
+                    opt.value
+                  ))
+                ] }) })
+              }
+            ) })
+          ]
+        }
+      )
     }
-  }
-);
-var InputShell = React20.forwardRef(
-  ({ size, status, disabled, className, ...rest }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-      "div",
-      {
-        ref,
-        "aria-disabled": disabled || void 0,
-        className: cn(
-          inputShellVariants({ size, status, disabled }),
-          className
-        ),
-        ...rest
-      }
-    );
-  }
-);
-InputShell.displayName = "InputShell";
+  );
+};
+Select.displayName = "Select";
 
 // src/components/Inputs/PasswordInput.tsx
-var import_icons7 = require("@bubo-squared/icons");
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var passwordTextVariants = (0, import_class_variance_authority14.cva)("truncate", {
+var React25 = __toESM(require("react"), 1);
+var import_class_variance_authority16 = require("class-variance-authority");
+var import_icons9 = require("@bubo-squared/icons");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var passwordTextVariants = (0, import_class_variance_authority16.cva)("truncate", {
   variants: {
     size: {
       sm: "paragraph-md",
@@ -1554,7 +2167,7 @@ var passwordTextVariants = (0, import_class_variance_authority14.cva)("truncate"
     disabled: false
   }
 });
-var iconWrapperVariants = (0, import_class_variance_authority14.cva)(
+var iconWrapperVariants2 = (0, import_class_variance_authority16.cva)(
   "flex items-center justify-center shrink-0 text-(--icon-primary)",
   {
     variants: {
@@ -1573,7 +2186,7 @@ var iconWrapperVariants = (0, import_class_variance_authority14.cva)(
     }
   }
 );
-var actionButtonVariants = (0, import_class_variance_authority14.cva)(
+var actionButtonVariants = (0, import_class_variance_authority16.cva)(
   "flex items-center justify-center shrink-0 cursor-pointer bg-transparent border-0 p-0 text-left paragraph-sm text-(--icon-primary) hover:text-(--icon-primary-hover) focus:outline-none ",
   {
     variants: {
@@ -1610,12 +2223,12 @@ var PasswordInput = (props) => {
     ...inputProps
   } = props;
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = React21.useState(
+  const [internalValue, setInternalValue] = React25.useState(
     defaultValue ?? ""
   );
-  const [isRevealed, setIsRevealed] = React21.useState(false);
+  const [isRevealed, setIsRevealed] = React25.useState(false);
   const currentValue = (isControlled ? value : internalValue) ?? "";
-  const inputRef = React21.useRef(null);
+  const inputRef = React25.useRef(null);
   const showLeadingIcon = !!leadingIcon;
   const handleContainerClick = () => {
     if (disabled) return;
@@ -1627,7 +2240,7 @@ var PasswordInput = (props) => {
     }
     onChange?.(event);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     Field,
     {
       label,
@@ -1635,7 +2248,7 @@ var PasswordInput = (props) => {
       hideHint,
       status,
       disabled,
-      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
         InputShell,
         {
           size,
@@ -1644,16 +2257,16 @@ var PasswordInput = (props) => {
           className,
           onClick: handleContainerClick,
           children: [
-            showLeadingIcon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            showLeadingIcon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "span",
               {
                 className: cn(
-                  iconWrapperVariants({ size, disabled: !!disabled })
+                  iconWrapperVariants2({ size, disabled: !!disabled })
                 ),
                 children: leadingIcon
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               Input,
               {
                 ref: inputRef,
@@ -1668,7 +2281,7 @@ var PasswordInput = (props) => {
                 ...inputProps
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "button",
               {
                 type: "button",
@@ -1681,9 +2294,9 @@ var PasswordInput = (props) => {
                 "aria-label": isRevealed ? "Hide password" : "Show password",
                 className: cn(
                   "cursor-pointer",
-                  variant === "text" ? actionButtonVariants({ size, disabled: !!disabled }) : iconWrapperVariants({ size, disabled: !!disabled })
+                  variant === "text" ? actionButtonVariants({ size, disabled: !!disabled }) : iconWrapperVariants2({ size, disabled: !!disabled })
                 ),
-                children: variant === "icon" ? isRevealed ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons7.EyeSlashIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons7.EyeIcon, {}) : isRevealed ? "Hide" : "Show"
+                children: variant === "icon" ? isRevealed ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons9.EyeSlashIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons9.EyeIcon, {}) : isRevealed ? "Hide" : "Show"
               }
             )
           ]
@@ -1695,17 +2308,17 @@ var PasswordInput = (props) => {
 PasswordInput.displayName = "PasswordInput";
 
 // src/components/Inputs/PhoneInput.tsx
-var React27 = __toESM(require("react"), 1);
-var import_icons9 = require("@bubo-squared/icons");
+var React31 = __toESM(require("react"), 1);
+var import_icons11 = require("@bubo-squared/icons");
 var RPNInput = __toESM(require("react-phone-number-input"), 1);
 var import_flags = __toESM(require("react-phone-number-input/flags"), 1);
 
 // src/components/ui/button.tsx
-var React22 = require("react");
+var React26 = require("react");
 var import_react_slot7 = require("@radix-ui/react-slot");
-var import_class_variance_authority15 = require("class-variance-authority");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var buttonVariants2 = (0, import_class_variance_authority15.cva)(
+var import_class_variance_authority17 = require("class-variance-authority");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var buttonVariants2 = (0, import_class_variance_authority17.cva)(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-0 focus-visible:shadow-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
@@ -1740,7 +2353,7 @@ function Button2({
   ...props
 }) {
   const Comp = asChild ? import_react_slot7.Slot : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     Comp,
     {
       "data-slot": "button",
@@ -1753,22 +2366,125 @@ function Button2({
 }
 
 // src/components/ui/command.tsx
-var React24 = require("react");
+var React28 = require("react");
 var import_cmdk = require("cmdk");
-var import_icons8 = require("@bubo-squared/icons");
+var import_icons10 = require("@bubo-squared/icons");
 
 // src/components/ui/dialog.tsx
-var React23 = require("react");
+var React27 = require("react");
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
-var import_jsx_runtime25 = require("react/jsx-runtime");
+
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/createLucideIcon.js
+var import_react2 = require("react");
+
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/shared/src/utils.js
+var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+var toCamelCase = (string) => string.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
+);
+var toPascalCase = (string) => {
+  const camelCase = toCamelCase(string);
+  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+};
+var mergeClasses = (...classes) => classes.filter((className, index, array) => {
+  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
+}).join(" ").trim();
+var hasA11yProp = (props) => {
+  for (const prop in props) {
+    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
+      return true;
+    }
+  }
+};
+
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/Icon.js
+var import_react = require("react");
+
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/defaultAttributes.js
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/Icon.js
+var Icon2 = (0, import_react.forwardRef)(
+  ({
+    color = "currentColor",
+    size = 24,
+    strokeWidth = 2,
+    absoluteStrokeWidth,
+    className = "",
+    children,
+    iconNode,
+    ...rest
+  }, ref) => (0, import_react.createElement)(
+    "svg",
+    {
+      ref,
+      ...defaultAttributes,
+      width: size,
+      height: size,
+      stroke: color,
+      strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+      className: mergeClasses("lucide", className),
+      ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
+      ...rest
+    },
+    [
+      ...iconNode.map(([tag, attrs]) => (0, import_react.createElement)(tag, attrs)),
+      ...Array.isArray(children) ? children : [children]
+    ]
+  )
+);
+
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/createLucideIcon.js
+var createLucideIcon = (iconName, iconNode) => {
+  const Component = (0, import_react2.forwardRef)(
+    ({ className, ...props }, ref) => (0, import_react2.createElement)(Icon2, {
+      ref,
+      iconNode,
+      className: mergeClasses(
+        `lucide-${toKebabCase(toPascalCase(iconName))}`,
+        `lucide-${iconName}`,
+        className
+      ),
+      ...props
+    })
+  );
+  Component.displayName = toPascalCase(iconName);
+  return Component;
+};
+
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-right.js
+var __iconNode = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+var ChevronRight = createLucideIcon("chevron-right", __iconNode);
+
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/ellipsis.js
+var __iconNode2 = [
+  ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
+  ["circle", { cx: "19", cy: "12", r: "1", key: "1wjl8i" }],
+  ["circle", { cx: "5", cy: "12", r: "1", key: "1pcz8c" }]
+];
+var Ellipsis = createLucideIcon("ellipsis", __iconNode2);
+
+// src/components/ui/dialog.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
 
 // src/components/ui/command.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function Command({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     import_cmdk.Command,
     {
       "data-slot": "command",
@@ -1784,14 +2500,14 @@ function CommandInput({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "div",
     {
       "data-slot": "command-input-wrapper",
       className: "flex h-9 items-center gap-2 border-b px-3",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_icons8.SearchIcon, { className: "size-4 shrink-0 opacity-50 text-(--color-secondary)" }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons10.SearchIcon, { className: "size-4 shrink-0 opacity-50 text-(--color-secondary)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           import_cmdk.Command.Input,
           {
             "data-slot": "command-input",
@@ -1810,7 +2526,7 @@ function CommandList({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     import_cmdk.Command.List,
     {
       "data-slot": "command-list",
@@ -1825,7 +2541,7 @@ function CommandList({
 function CommandEmpty({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     import_cmdk.Command.Empty,
     {
       "data-slot": "command-empty",
@@ -1838,7 +2554,7 @@ function CommandGroup({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     import_cmdk.Command.Group,
     {
       "data-slot": "command-group",
@@ -1854,7 +2570,7 @@ function CommandItem({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     import_cmdk.Command.Item,
     {
       "data-slot": "command-item",
@@ -1868,18 +2584,18 @@ function CommandItem({
 }
 
 // src/components/ui/popover.tsx
-var React25 = require("react");
+var React29 = require("react");
 var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function Popover({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
 }
 function PopoverTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
 }
 function PopoverContent({
   className,
@@ -1887,7 +2603,7 @@ function PopoverContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     PopoverPrimitive.Content,
     {
       "data-slot": "popover-content",
@@ -1903,22 +2619,22 @@ function PopoverContent({
 }
 
 // src/components/ui/scroll-area.tsx
-var React26 = require("react");
+var React30 = require("react");
 var ScrollAreaPrimitive = __toESM(require("@radix-ui/react-scroll-area"), 1);
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function ScrollArea({
   className,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     ScrollAreaPrimitive.Root,
     {
       "data-slot": "scroll-area",
       className: cn("relative", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           ScrollAreaPrimitive.Viewport,
           {
             "data-slot": "scroll-area-viewport",
@@ -1926,8 +2642,8 @@ function ScrollArea({
             children
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ScrollBar, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ScrollAreaPrimitive.Corner, {})
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ScrollBar, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ScrollAreaPrimitive.Corner, {})
       ]
     }
   );
@@ -1937,7 +2653,7 @@ function ScrollBar({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     ScrollAreaPrimitive.ScrollAreaScrollbar,
     {
       "data-slot": "scroll-area-scrollbar",
@@ -1950,7 +2666,7 @@ function ScrollBar({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         ScrollAreaPrimitive.ScrollAreaThumb,
         {
           "data-slot": "scroll-area-thumb",
@@ -1962,10 +2678,10 @@ function ScrollBar({
 }
 
 // src/components/Inputs/PhoneInput.tsx
-var import_class_variance_authority16 = require("class-variance-authority");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_class_variance_authority18 = require("class-variance-authority");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var inputBase = "h-full rounded-4 border-(--border-secondary) bg-(--background-primary) hover:border-(--border-secondary-hover)";
-var sizeBase = (0, import_class_variance_authority16.cva)(
+var sizeBase = (0, import_class_variance_authority18.cva)(
   "flex w-full",
   {
     variants: {
@@ -1978,7 +2694,7 @@ var sizeBase = (0, import_class_variance_authority16.cva)(
     }
   }
 );
-var inputTextVariants = (0, import_class_variance_authority16.cva)("", {
+var inputTextVariants2 = (0, import_class_variance_authority18.cva)("", {
   variants: {
     size: {
       sm: "paragraph-md",
@@ -1994,12 +2710,41 @@ var inputTextVariants = (0, import_class_variance_authority16.cva)("", {
     size: "lg"
   }
 });
+var dropdownWidthVariants = (0, import_class_variance_authority18.cva)("", {
+  variants: {
+    size: {
+      sm: "min-w-70",
+      md: "min-w-72",
+      lg: "min-w-80",
+      xl: "min-w-96"
+    }
+  },
+  defaultVariants: {
+    size: "lg"
+  }
+});
 var wrapperStatusClass = {
   default: "input-default-nested",
   success: "input-success-nested",
   error: "input-error-nested"
 };
-var PhoneInput = React27.forwardRef(
+var countryOptionVariants = (0, import_class_variance_authority18.cva)(
+  "gap-2 pl-(--space-8) pr-(--space-16) text-left text-primary cursor-pointer hover:bg-(--background-secondary) data-[selected=true]:bg-(--background-secondary) data-[selected=true]:text-primary",
+  {
+    variants: {
+      size: {
+        sm: "paragraph-sm py-(--space-4)",
+        md: "paragraph-md py-(--space-6)",
+        lg: "paragraph-lg py-(--space-8)",
+        xl: "subtitle py-(--space-10)"
+      }
+    },
+    defaultVariants: {
+      size: "lg"
+    }
+  }
+);
+var PhoneInput = React31.forwardRef(
   (props, ref) => {
     const {
       className,
@@ -2014,7 +2759,7 @@ var PhoneInput = React27.forwardRef(
       status = "default",
       ...rest
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       Field,
       {
         label,
@@ -2023,16 +2768,16 @@ var PhoneInput = React27.forwardRef(
         status,
         disabled,
         className,
-        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cn("w-full", wrapperStatusClass[status]), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn("w-full", wrapperStatusClass[status]), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           RPNInput.default,
           {
             ref,
             className: cn(
               sizeBase({ size }),
-              inputTextVariants({ size, disabled })
+              inputTextVariants2({ size, disabled })
             ),
             flagComponent: FlagComponent,
-            countrySelectComponent: CountrySelect,
+            countrySelectComponent: (countrySelectProps) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CountrySelect, { ...countrySelectProps, size }),
             inputComponent: InputComponent,
             smartCaret: false,
             value: value || void 0,
@@ -2049,9 +2794,9 @@ var PhoneInput = React27.forwardRef(
   }
 );
 PhoneInput.displayName = "PhoneInput";
-var InputComponent = React27.forwardRef((props, ref) => {
+var InputComponent = React31.forwardRef((props, ref) => {
   const { className, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     Input,
     {
       ref,
@@ -2066,22 +2811,25 @@ var CountrySelect = ({
   disabled,
   value: selectedCountry,
   options: countryList,
-  onChange
+  onChange,
+  size = "lg"
 }) => {
-  const scrollAreaRef = React27.useRef(null);
-  const [searchValue, setSearchValue] = React27.useState("");
-  const [isOpen, setIsOpen] = React27.useState(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  const scrollAreaRef = React31.useRef(null);
+  const [searchValue, setSearchValue] = React31.useState("");
+  const [isOpen, setIsOpen] = React31.useState(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     Popover,
     {
       open: isOpen,
       modal: true,
       onOpenChange: (open) => {
         setIsOpen(open);
-        open && setSearchValue("");
+        if (open) {
+          setSearchValue("");
+        }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
           Button2,
           {
             type: "button",
@@ -2089,15 +2837,15 @@ var CountrySelect = ({
             className: cn(inputBase, "flex gap-1 rounded-4 px-3 focus:z-10 mr-(--space-12) text-primary-disabled hover:text-(--color-primary-hover) focus:text-(--color-primary-focus)"),
             disabled,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                 FlagComponent,
                 {
                   country: selectedCountry,
                   countryName: selectedCountry
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                import_icons9.CodeIcon,
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                import_icons11.CodeIcon,
                 {
                   className: cn(
                     "-mr-2 size-4 opacity-50 rotate-90",
@@ -2108,13 +2856,17 @@ var CountrySelect = ({
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           PopoverContent,
           {
             align: "start",
-            className: "p-0 bg-(--background-primary) shadow-card-md rounded-4 border-none outline-1 outline-solid outline-(--border-secondary-hover) **:data-[slot='command-input-wrapper']:border-b-(--border-secondary)",
-            children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Command, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            className: cn(
+              "p-0 **:data-[slot='command-input-wrapper']:border-b-(--border-secondary)",
+              dropdownWidthVariants({ size }),
+              dropdownSurfaceClass
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Command, { className: "bg-transparent", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                 CommandInput,
                 {
                   value: searchValue,
@@ -2134,17 +2886,18 @@ var CountrySelect = ({
                   placeholder: "Search country..."
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CommandList, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(ScrollArea, { ref: scrollAreaRef, className: "h-72", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CommandEmpty, { children: "No country found." }),
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CommandGroup, { className: "[&>div>div]:pl-4 [&>div>div]:pr-2 [&>div>div]:py-2 [&>div>div]:border-b [&>div>div]:border-b-(--border-secondary) [&>div>div]:cursor-pointer [&>div>div]:hover:bg-(--background-primary-hover) [&>div>div]:text-primary [&>div>div]:hover:text-primary p-0 pr-4", children: countryList.map(
-                  ({ value, label }) => value ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CommandList, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ScrollArea, { ref: scrollAreaRef, className: "max-h-79", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CommandEmpty, { children: "No country found." }),
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CommandGroup, { className: "p-0", children: countryList.map(
+                  ({ value, label }) => value ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                     CountrySelectOption,
                     {
                       country: value,
                       countryName: label,
                       selectedCountry,
                       onChange,
-                      onSelectComplete: () => setIsOpen(false)
+                      onSelectComplete: () => setIsOpen(false),
+                      size
                     },
                     value
                   ) : null
@@ -2163,23 +2916,24 @@ var CountrySelectOption = (props) => {
     countryName,
     selectedCountry,
     onChange,
-    onSelectComplete
+    onSelectComplete,
+    size = "lg"
   } = props;
   const handleSelect = () => {
     onChange(country);
     onSelectComplete();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     CommandItem,
     {
-      className: "gap-2 data-[selected=true]:text-primary",
+      className: cn(countryOptionVariants({ size })),
       onSelect: handleSelect,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(FlagComponent, { country, countryName }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "flex-1 text-sm", children: countryName }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-sm text-foreground/50", children: `+${RPNInput.getCountryCallingCode(country)}` }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-          import_icons9.CheckIcon,
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(FlagComponent, { country, countryName }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "flex-1", children: countryName }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-foreground/50", children: `+${RPNInput.getCountryCallingCode(country)}` }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          import_icons11.CheckIcon,
           {
             className: `ml-auto size-4 ${country === selectedCountry ? "opacity-100" : "opacity-0"}`
           }
@@ -2190,14 +2944,13 @@ var CountrySelectOption = (props) => {
 };
 var FlagComponent = ({ country, countryName }) => {
   const Flag = import_flags.default[country];
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "flex h-4 w-6 overflow-hidden rounded-2 bg-foreground/20 [&_svg:not([class*='size-'])]:size-full", children: Flag && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Flag, { title: countryName }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "flex h-4 w-6 overflow-hidden rounded-2 bg-foreground/20 [&_svg:not([class*='size-'])]:size-full", children: Flag && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Flag, { title: countryName }) });
 };
 
 // src/components/Inputs/RadioGroup.tsx
-var React28 = __toESM(require("react"), 1);
+var React32 = __toESM(require("react"), 1);
 var RadioGroupPrimitive = __toESM(require("@radix-ui/react-radio-group"), 1);
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var wrapperBase = "flex flex-col gap-2 items-start";
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var RadioGroup = ({
   label,
   hint,
@@ -2211,131 +2964,110 @@ var RadioGroup = ({
   className,
   ...rootProps
 }) => {
-  const groupId = React28.useId();
+  const groupId = React32.useId();
   const hintId = hint ? `${groupId}-hint` : void 0;
   const handleValueChange = (next) => {
     onValueChange?.(next);
   };
   const isHorizontal = orientation === "horizontal";
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: wrapperBase, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-      "span",
-      {
-        className: cn(
-          "paragraph-sm text-primary",
-          disabled && "text-primary-disabled"
-        ),
-        children: label
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-      RadioGroupPrimitive.Root,
-      {
-        ...rootProps,
-        value,
-        defaultValue,
-        onValueChange: handleValueChange,
-        "aria-describedby": hintId,
-        className: cn(
-          "flex",
-          isHorizontal ? "flex-row gap-6" : "flex-col gap-2",
-          className
-        ),
-        children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-          RadioGroupPrimitive.Item,
-          {
-            value: option.value,
-            disabled: disabled || option.disabled,
-            asChild: true,
-            children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
-              "button",
-              {
-                type: "button",
-                className: cn(
-                  "group inline-flex items-center gap-2 outline-none",
-                  "data-[disabled]:pointer-events-none",
-                  disabled || option.disabled ? "cursor-default" : "cursor-pointer"
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    Field,
+    {
+      label,
+      hint,
+      hideHint,
+      disabled,
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        RadioGroupPrimitive.Root,
+        {
+          ...rootProps,
+          value,
+          defaultValue,
+          onValueChange: handleValueChange,
+          disabled,
+          "aria-describedby": hintId,
+          className: cn(
+            "flex",
+            isHorizontal ? "flex-row gap-6" : "flex-col gap-2",
+            className
+          ),
+          children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "relative inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+            RadioGroupPrimitive.Item,
+            {
+              value: option.value,
+              disabled: disabled || option.disabled,
+              className: cn(
+                "group inline-flex items-center gap-2 outline-none",
+                "data-disabled:pointer-events-none",
+                disabled || option.disabled ? "cursor-default" : "cursor-pointer"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                  "span",
+                  {
+                    className: cn(
+                      "flex items-center justify-center shrink-0 h-5 w-5 rounded-full border bg-(--background-primary) transition-all",
+                      // 1: enabled, unchecked, unfocused, unhovered
+                      "group-data-[state=unchecked]:border-(--border-secondary)",
+                      // 2: enabled, checked, unfocused, unhovered
+                      "group-data-[state=checked]:border-(--border-brand)",
+                      // 3: enabled, unchecked, hovered, unfocused
+                      "group-data-[state=unchecked]:group-hover:border-(--border-secondary-hover)",
+                      // 4: enabled, checked, hovered, unfocused
+                      "group-data-[state=checked]:group-hover:border-(--border-brand-hover)",
+                      "group-data-[state=checked]:group-hover:shadow-[0_0_0_var(--focus-ring-spread)_var(--focus-secondary)]",
+                      // 5: enabled, unchecked, focused (override 1/3)
+                      "group-data-[state=unchecked]:group-focus-visible:border-(--border-secondary-hover)",
+                      // 6: enabled, checked, focused (override 2/4)
+                      "group-data-[state=checked]:group-focus-visible:border-(--border-brand-focus)",
+                      "group-data-[state=checked]:group-focus-visible:shadow-[0_0_0_var(--focus-ring-spread)_var(--focus-primary)]",
+                      // 7: disabled, unchecked (override everything above)
+                      "group-[&[data-disabled][data-state=unchecked]]:border-none",
+                      "group-[&[data-disabled][data-state=unchecked]]:bg-(--background-primary-disabled)",
+                      // 8: disabled, checked (override everything above)
+                      "group-[&[data-disabled][data-state=checked]]:border-(--border-primary-disabled)",
+                      "group-[&[data-disabled][data-state=checked]]:bg-(--background-primary-disabled)"
+                    ),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                      "span",
+                      {
+                        className: cn(
+                          "h-4 w-4 rounded-full bg-(--background-brand) scale-0 transition-transform",
+                          "group-data-[state=checked]:scale-100",
+                          "group-data-[state=checked]:group-hover:bg-(--background-brand-hover)",
+                          "group-data-[state=checked]:group-focus-visible:bg-(--background-brand-hover)",
+                          "group-[&[data-disabled][data-state=checked]]:bg-(--background-brand-disabled)",
+                          "group-[&[data-disabled][data-state=unchecked]]:scale-0"
+                        )
+                      }
+                    )
+                  }
                 ),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-                    "span",
-                    {
-                      className: cn(
-                        "flex items-center justify-center shrink-0 h-5 w-5 rounded-full border bg-(--background-primary) transition-all",
-                        // 1: enabled, unchecked, unfocused, unhovered
-                        "group-data-[state=unchecked]:border-(--border-secondary)",
-                        // 2: enabled, checked, unfocused, unhovered
-                        "group-data-[state=checked]:border-(--border-brand)",
-                        // 3: enabled, unchecked, hovered, unfocused
-                        "group-data-[state=unchecked]:group-hover:border-(--border-secondary-hover)",
-                        // 4: enabled, checked, hovered, unfocused
-                        "group-data-[state=checked]:group-hover:border-(--border-brand-hover)",
-                        "group-data-[state=checked]:group-hover:shadow-[0_0_0_var(--focus-ring-spread)_var(--focus-secondary)]",
-                        // 5: enabled, unchecked, focused (override 1/3)
-                        "group-data-[state=unchecked]:group-focus-visible:border-(--border-secondary-hover)",
-                        // 6: enabled, checked, focused (override 2/4)
-                        "group-data-[state=checked]:group-focus-visible:border-(--border-brand-focus)",
-                        "group-data-[state=checked]:group-focus-visible:shadow-[0_0_0_var(--focus-ring-spread)_var(--focus-primary)]",
-                        // 7: disabled, unchecked (override everything above)
-                        "group-[&[data-disabled][data-state=unchecked]]:border-none",
-                        "group-[&[data-disabled][data-state=unchecked]]:bg-(--background-primary-disabled)",
-                        // 8: disabled, checked (override everything above)
-                        "group-[&[data-disabled][data-state=checked]]:border-(--border-primary-disabled)",
-                        "group-[&[data-disabled][data-state=checked]]:bg-(--background-primary-disabled)"
-                      ),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-                        "span",
-                        {
-                          className: cn(
-                            "h-4 w-4 rounded-full bg-(--background-brand) scale-0 transition-transform",
-                            "group-data-[state=checked]:scale-100",
-                            "group-data-[state=checked]:group-hover:bg-(--background-brand-hover)",
-                            "group-data-[state=checked]:group-focus-visible:bg-(--background-brand-hover)",
-                            "group-[&[data-disabled][data-state=checked]]:bg-(--background-brand-disabled)",
-                            "group-[&[data-disabled][data-state=unchecked]]:scale-0"
-                          )
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-                    "span",
-                    {
-                      className: cn(
-                        "paragraph-sm text-primary",
-                        "group-data-[disabled]:text-primary-disabled whitespace-nowrap"
-                      ),
-                      children: option.label
-                    }
-                  )
-                ]
-              }
-            )
-          },
-          option.value
-        ))
-      }
-    ),
-    !hideHint && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-      "p",
-      {
-        id: hintId,
-        className: cn(
-          "caption text-(--color-secondary)",
-          disabled && "text-primary-disabled"
-        ),
-        children: hint ?? "\xA0"
-      }
-    )
-  ] });
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                  "span",
+                  {
+                    className: cn(
+                      "paragraph-sm text-primary",
+                      "group-data-disabled:text-primary-disabled whitespace-nowrap"
+                    ),
+                    children: option.label
+                  }
+                )
+              ]
+            }
+          ) }, option.value))
+        }
+      )
+    }
+  );
 };
 
 // src/components/Inputs/SearchInput.tsx
-var React29 = __toESM(require("react"), 1);
-var import_class_variance_authority17 = require("class-variance-authority");
-var import_icons10 = require("@bubo-squared/icons");
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var searchTextVariants = (0, import_class_variance_authority17.cva)("truncate", {
+var React33 = __toESM(require("react"), 1);
+var import_class_variance_authority19 = require("class-variance-authority");
+var import_icons12 = require("@bubo-squared/icons");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var searchTextVariants = (0, import_class_variance_authority19.cva)("truncate", {
   variants: {
     size: {
       sm: "paragraph-md",
@@ -2348,7 +3080,7 @@ var searchTextVariants = (0, import_class_variance_authority17.cva)("truncate",
     size: "lg"
   }
 });
-var iconWrapperVariants2 = (0, import_class_variance_authority17.cva)("flex items-center justify-center shrink-0 text-(--icon-primary)", {
+var iconWrapperVariants3 = (0, import_class_variance_authority19.cva)("flex items-center justify-center shrink-0 text-(--icon-primary)", {
   variants: {
     size: {
       sm: "size-4 [&>svg]:size-4",
@@ -2375,13 +3107,13 @@ var SearchInput = (props) => {
     trailingIcon,
     ...inputProps
   } = props;
-  const inputRef = React29.useRef(null);
+  const inputRef = React33.useRef(null);
   const handleContainerClick = () => {
     if (disabled) return;
     inputRef.current?.focus();
   };
   const showTrailingIcon = !!trailingIcon;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex flex-col gap-2 items-start", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "relative w-full", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex flex-col gap-2 items-start w-full", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "relative w-full", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     InputShell,
     {
       size,
@@ -2390,8 +3122,8 @@ var SearchInput = (props) => {
       className,
       onClick: handleContainerClick,
       children: [
-        showLeadingIcon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: cn(iconWrapperVariants2({ size, disabled: !!disabled })), children: leadingIcon ?? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons10.SearchIcon, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        showLeadingIcon && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: cn(iconWrapperVariants3({ size, disabled: !!disabled })), children: leadingIcon ?? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_icons12.SearchIcon, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           Input,
           {
             ref: inputRef,
@@ -2405,7 +3137,7 @@ var SearchInput = (props) => {
             ...inputProps
           }
         ),
-        showTrailingIcon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: cn("cursor-pointer", iconWrapperVariants2({ size, disabled: !!disabled })), children: trailingIcon })
+        showTrailingIcon && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: cn("cursor-pointer", iconWrapperVariants3({ size, disabled: !!disabled })), children: trailingIcon })
       ]
     }
   ) }) });
@@ -2413,9 +3145,9 @@ var SearchInput = (props) => {
 SearchInput.displayName = "SearchInput";
 
 // src/components/Inputs/Slider.tsx
-var React30 = __toESM(require("react"), 1);
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var wrapperBase2 = "flex flex-col gap-2 items-start";
+var React34 = __toESM(require("react"), 1);
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var wrapperBase = "flex flex-col gap-2 items-start";
 var isRangeProps = (props) => {
   return Array.isArray(props.value) || Array.isArray(props.defaultValue);
 };
@@ -2425,6 +3157,7 @@ var toArray = (value) => {
 };
 var Slider = (props) => {
   const {
+    name,
     display = "flat",
     tooltipPlacement = "top",
     tooltipFormatter,
@@ -2440,7 +3173,7 @@ var Slider = (props) => {
   const isRange = isRangeProps(props);
   const isControlled = value !== void 0;
   const expectedLength = isRange ? 2 : 1;
-  const normalizeArray = React30.useCallback(
+  const normalizeArray = React34.useCallback(
     (arr, fallback) => {
       if (!arr || arr.length === 0) return fallback;
       if (arr.length === expectedLength) return arr;
@@ -2452,16 +3185,16 @@ var Slider = (props) => {
     },
     [expectedLength, max]
   );
-  const defaultInternal = React30.useMemo(() => {
+  const defaultInternal = React34.useMemo(() => {
     const defaultValueArray = toArray(defaultValue);
     if (defaultValueArray) return normalizeArray(defaultValueArray, []);
     if (isRange) return [min, Math.min(min + (max - min) / 4, max)];
     return [min + (max - min) / 3];
   }, [defaultValue, min, max, isRange, normalizeArray]);
-  const [internalValue, setInternalValue] = React30.useState(
+  const [internalValue, setInternalValue] = React34.useState(
     () => normalizeArray(isControlled ? toArray(value) : defaultInternal, defaultInternal)
   );
-  React30.useEffect(() => {
+  React34.useEffect(() => {
     if (isControlled) {
       setInternalValue(
         (current2) => normalizeArray(toArray(value), current2.length ? current2 : defaultInternal)
@@ -2469,32 +3202,15 @@ var Slider = (props) => {
     }
   }, [isControlled, value, normalizeArray, defaultInternal]);
   const current = internalValue;
-  const trackRef = React30.useRef(null);
-  const [draggingThumbIndex, setDraggingThumbIndex] = React30.useState(null);
-  const [hoveredThumbIndex, setHoveredThumbIndex] = React30.useState(null);
-  const clamp = (val) => {
+  const trackRef = React34.useRef(null);
+  const [draggingThumbIndex, setDraggingThumbIndex] = React34.useState(null);
+  const [hoveredThumbIndex, setHoveredThumbIndex] = React34.useState(null);
+  const clamp = React34.useCallback((val) => {
     if (val < min) return min;
     if (val > max) return max;
     return val;
-  };
-  React30.useEffect(() => {
-    if (!isControlled) {
-      setInternalValue((prev) => {
-        const clamped = prev.map((v) => clamp(v));
-        if (isRange && clamped.length === 2 && step > 0) {
-          return enforceMinGap(clamped, prev);
-        }
-        return clamped;
-      });
-    }
-  }, [isControlled, min, max, isRange]);
-  const snap = (val) => {
-    const range = max - min;
-    if (range <= 0 || step <= 0) return clamp(val);
-    const stepsFromMin = Math.round((val - min) / step);
-    return clamp(min + stepsFromMin * step);
-  };
-  const enforceMinGap = (next, prev) => {
+  }, [min, max]);
+  const enforceMinGap = React34.useCallback((next, prev) => {
     if (!isRange || next.length !== 2 || step <= 0) return next;
     let [low, high] = next;
     const [prevLow, prevHigh] = prev.length === 2 ? prev : next;
@@ -2517,6 +3233,23 @@ var Slider = (props) => {
       }
     }
     return [low, high];
+  }, [isRange, step, clamp]);
+  React34.useEffect(() => {
+    if (!isControlled) {
+      setInternalValue((prev) => {
+        const clamped = prev.map((v) => clamp(v));
+        if (isRange && clamped.length === 2 && step > 0) {
+          return enforceMinGap(clamped, prev);
+        }
+        return clamped;
+      });
+    }
+  }, [isControlled, clamp, enforceMinGap, isRange, step]);
+  const snap = (val) => {
+    const range = max - min;
+    if (range <= 0 || step <= 0) return clamp(val);
+    const stepsFromMin = Math.round((val - min) / step);
+    return clamp(min + stepsFromMin * step);
   };
   const updateValue = (next) => {
     let normalized = normalizeArray(next, current);
@@ -2670,7 +3403,7 @@ var Slider = (props) => {
   const trackHeight = 32;
   const thumbWidth = 18;
   const thumbRadius = thumbWidth / 2;
-  const renderTooltipBubble = (key, percent, labelText, isVisible) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  const renderTooltipBubble = (key, percent, labelText, isVisible) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "div",
     {
       className: cn(
@@ -2685,12 +3418,12 @@ var Slider = (props) => {
         marginBottom: isTooltipAbove ? 8 : void 0,
         marginTop: isTooltipAbove ? void 0 : 8
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
         "div",
         {
           className: cn("relative rounded-4 shadow-card-md px-(--space-8) py-(--space-4) bg-(--background-tooltip)"),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               "p",
               {
                 className: cn(
@@ -2700,7 +3433,7 @@ var Slider = (props) => {
                 children: labelText
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               "div",
               {
                 className: cn(
@@ -2718,7 +3451,7 @@ var Slider = (props) => {
   const renderHandle = (index, percent, ariaValueText) => {
     const val = index === 0 ? primary : secondary;
     const isDragging = draggingThumbIndex === index;
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       "button",
       {
         type: "button",
@@ -2739,7 +3472,7 @@ var Slider = (props) => {
         style: {
           left: `${percent}%`,
           top: `calc(50% - ${trackHeight / 2}px)`,
-          ["--slider-halo-color"]: "color-mix(in srgb, var(--color-brand) 10%, transparent)"
+          "--slider-halo-color": "color-mix(in srgb, var(--color-brand) 10%, transparent)"
         },
         onPointerEnter: () => {
           setHoveredThumbIndex(index);
@@ -2758,76 +3491,97 @@ var Slider = (props) => {
       index
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     "div",
     {
-      className: wrapperBase2,
+      className: wrapperBase,
       style: { marginInline: `${thumbRadius}px` },
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cn("w-full flex flex-col gap-1", className), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "relative w-full", children: [
-          showTooltip && primary !== void 0 && renderTooltipBubble(
-            "primary",
-            primaryPercent,
-            formatDisplayValue(primary),
-            hoveredThumbIndex === 0 || draggingThumbIndex === 0
-          ),
-          showTooltip && isRange && secondary !== void 0 && renderTooltipBubble(
-            "secondary",
-            secondaryPercent,
-            formatDisplayValue(secondary),
-            hoveredThumbIndex === 1 || draggingThumbIndex === 1
+      children: [
+        name && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            "input",
+            {
+              type: "hidden",
+              name,
+              value: primary === void 0 ? "" : String(primary),
+              disabled
+            }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-            "div",
+          isRange && secondary !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            "input",
+            {
+              type: "hidden",
+              name,
+              value: String(secondary),
+              disabled
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cn("w-full flex flex-col gap-1", className), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "relative w-full", children: [
+            showTooltip && primary !== void 0 && renderTooltipBubble(
+              "primary",
+              primaryPercent,
+              formatDisplayValue(primary),
+              hoveredThumbIndex === 0 || draggingThumbIndex === 0
+            ),
+            showTooltip && isRange && secondary !== void 0 && renderTooltipBubble(
+              "secondary",
+              secondaryPercent,
+              formatDisplayValue(secondary),
+              hoveredThumbIndex === 1 || draggingThumbIndex === 1
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+              "div",
+              {
+                className: cn(
+                  "relative w-full flex items-center rounded-4",
+                  disabled ? "bg-(--background-primary-disabled) cursor-default" : "bg-(--background-secondary) cursor-pointer"
+                ),
+                style: { height: `${trackHeight}px` },
+                ref: trackRef,
+                onPointerDown: handleTrackPointerDown,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                    "div",
+                    {
+                      className: cn(
+                        "absolute h-full rounded-4",
+                        disabled ? "bg-(--background-primary-disabled)" : "bg-(--background-secondary)"
+                      ),
+                      style: {
+                        width: `calc(100% + ${thumbWidth}px)`,
+                        left: `-${thumbRadius}px`
+                      }
+                    }
+                  ),
+                  renderHandle(0, primaryPercent, formatDisplayValue(primary)),
+                  isRange && secondary !== void 0 && renderHandle(1, secondaryPercent, formatDisplayValue(secondary))
+                ]
+              }
+            )
+          ] }),
+          showNumeric && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            "p",
             {
               className: cn(
-                "relative w-full flex items-center rounded-4",
-                disabled ? "bg-(--background-primary-disabled) cursor-default" : "bg-(--background-secondary) cursor-pointer"
+                "paragraph-sm text-primary",
+                disabled && "text-primary-disabled"
               ),
-              style: { height: `${trackHeight}px` },
-              ref: trackRef,
-              onPointerDown: handleTrackPointerDown,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-                  "div",
-                  {
-                    className: cn(
-                      "absolute h-full rounded-4",
-                      disabled ? "bg-(--background-primary-disabled)" : "bg-(--background-secondary)"
-                    ),
-                    style: {
-                      width: `calc(100% + ${thumbWidth}px)`,
-                      left: `-${thumbRadius}px`
-                    }
-                  }
-                ),
-                renderHandle(0, primaryPercent, formatDisplayValue(primary)),
-                isRange && secondary !== void 0 && renderHandle(1, secondaryPercent, formatDisplayValue(secondary))
-              ]
+              children: formatNumericLabel()
             }
           )
-        ] }),
-        showNumeric && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-          "p",
-          {
-            className: cn(
-              "paragraph-sm text-primary",
-              disabled && "text-primary-disabled"
-            ),
-            children: formatNumericLabel()
-          }
-        )
-      ] })
+        ] })
+      ]
     }
   );
 };
 Slider.displayName = "Slider";
 
 // src/components/Inputs/TextArea.tsx
-var React31 = __toESM(require("react"), 1);
-var import_icons11 = require("@bubo-squared/icons");
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var wrapperBase3 = "flex flex-col gap-2 items-start w-full";
+var React35 = __toESM(require("react"), 1);
+var import_icons13 = require("@bubo-squared/icons");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var TextArea = (props) => {
   const {
     label,
@@ -2842,10 +3596,12 @@ var TextArea = (props) => {
     defaultValue,
     onChange,
     rows = 3,
+    id,
+    name,
     ...textareaProps
   } = props;
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = React31.useState(
+  const [internalValue, setInternalValue] = React35.useState(
     defaultValue ?? ""
   );
   const currentValue = (isControlled ? value : internalValue) ?? "";
@@ -2853,10 +3609,10 @@ var TextArea = (props) => {
   const currentLength = currentValue.length;
   const effectiveMaxLength = type === "character-limit" ? maxLength ?? 144 : void 0;
   const showCharacterLimit = type === "character-limit" && typeof effectiveMaxLength === "number";
-  const textareaRef = React31.useRef(null);
-  const containerRef = React31.useRef(null);
-  const [height, setHeight] = React31.useState(void 0);
-  const [width, setWidth] = React31.useState(void 0);
+  const textareaRef = React35.useRef(null);
+  const containerRef = React35.useRef(null);
+  const [height, setHeight] = React35.useState(void 0);
+  const [width, setWidth] = React35.useState(void 0);
   const minHeight = 80;
   const minWidth = 240;
   const handleContainerClick = () => {
@@ -2869,9 +3625,8 @@ var TextArea = (props) => {
     }
     onChange?.(event);
   };
-  const inputId = React31.useId();
-  const labelId = `${inputId}-label`;
-  const hintId = `${inputId}-hint`;
+  const generatedId = React35.useId();
+  const textareaId = id ?? generatedId;
   const statusBorderClass = {
     default: "",
     success: "border-(--border-success)",
@@ -2882,7 +3637,6 @@ var TextArea = (props) => {
     success: "focus-within:border-(--border-success) focus-within:hover:border-(--border-success) focus-within:shadow-[0_0_0_var(--focus-ring-spread)_var(--focus-success)]",
     error: "focus-within:border-(--border-error) focus-within:hover:border-(--border-error) focus-within:shadow-[0_0_0_var(--focus-ring-spread)_var(--focus-error)]"
   };
-  const hintColorClass = disabled ? "text-primary-disabled" : status === "success" ? "text-(--color-success)" : status === "error" ? "text-(--color-error)" : "text-(--color-secondary)";
   const counterColorClass = disabled ? "text-primary-disabled" : status === "success" ? "text-(--color-success)" : status === "error" ? "text-(--color-error)" : "text-primary";
   const handleResizePointerDown = (event) => {
     if (disabled) return;
@@ -2908,110 +3662,98 @@ var TextArea = (props) => {
     window.addEventListener("pointermove", handlePointerMove);
     window.addEventListener("pointerup", handlePointerUp);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: wrapperBase3, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-      "label",
-      {
-        htmlFor: inputId,
-        id: labelId,
-        className: cn(
-          "paragraph-sm",
-          disabled ? "text-primary-disabled" : "text-primary"
-        ),
-        children: label
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "relative w-full", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-      "div",
-      {
-        className: cn(
-          "relative flex w-full rounded-4 border bg-(--background-primary) cursor-text transition-colors",
-          "border-(--border-secondary) hover:border-(--border-secondary-hover) hover:bg-(--background-primary-hover)",
-          disabled && "bg-(--background-primary-disabled) border-(--border-secondary-disabled) cursor-default",
-          statusBorderClass[status],
-          !disabled && statusFocusClass[status],
-          className
-        ),
-        ref: containerRef,
-        style: {
-          ...type === "responsive" && height !== void 0 ? { height } : {},
-          ...type === "responsive" && width !== void 0 ? { width } : {}
-        },
-        onClick: handleContainerClick,
-        "aria-disabled": disabled || void 0,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-            "textarea",
-            {
-              id: inputId,
-              ref: textareaRef,
-              "aria-labelledby": label ? labelId : void 0,
-              "aria-describedby": hint ? hintId : void 0,
-              disabled: disabled ?? void 0,
-              value: isControlled ? value : currentValue,
-              defaultValue: isControlled ? void 0 : defaultValue,
-              onChange: handleChange,
-              rows,
-              maxLength: effectiveMaxLength,
-              className: cn(
-                "paragraph-md bg-transparent outline-none w-full h-full resize-none px-2 py-2 pr-8",
-                disabled ? "text-primary-disabled" : hasValue ? "text-primary" : "text-(--color-secondary)",
-                showCharacterLimit && "pr-16"
-              ),
-              ...textareaProps
-            }
-          ),
-          showCharacterLimit && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-            "span",
-            {
-              className: cn(
-                "absolute bottom-1 right-1 footnote mb-0!",
-                counterColorClass
-              ),
-              children: [
-                currentLength,
-                "/",
-                effectiveMaxLength
-              ]
-            }
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    Field,
+    {
+      className: "w-full",
+      label,
+      hint,
+      hideHint,
+      status,
+      disabled,
+      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+        "div",
+        {
+          className: cn(
+            "relative flex w-full rounded-4 border bg-(--background-primary) cursor-text transition-colors",
+            "border-(--border-secondary) hover:border-(--border-secondary-hover) hover:bg-(--background-primary-hover)",
+            disabled && "bg-(--background-primary-disabled) border-(--border-secondary-disabled) cursor-default",
+            statusBorderClass[status],
+            !disabled && statusFocusClass[status],
+            className
           ),
-          type === "responsive" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-            "div",
-            {
-              className: "absolute bottom-1 right-1 h-3 w-3 " + (disabled ? "cursor-auto" : "cursor-nwse-resize"),
-              onPointerDown: disabled ? void 0 : handleResizePointerDown,
-              children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                "span",
-                {
-                  className: cn(
-                    "absolute bottom-0 right-0 flex h-4 w-4 items-center justify-center text-(--icon-primary)",
-                    disabled && "text-(--icon-primary-disabled)"
-                  ),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_icons11.MaximizeIcon, {})
-                }
-              )
-            }
-          )
-        ]
-      }
-    ) }),
-    hint && !hideHint && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-      "p",
-      {
-        id: hint ? hintId : void 0,
-        className: cn("caption", hint ? hintColorClass : "invisible"),
-        children: hint || "\xA0"
-      }
-    )
-  ] });
+          ref: containerRef,
+          style: {
+            ...type === "responsive" && height !== void 0 ? { height } : {},
+            ...type === "responsive" && width !== void 0 ? { width } : {}
+          },
+          onClick: handleContainerClick,
+          "aria-disabled": disabled || void 0,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              "textarea",
+              {
+                id: textareaId,
+                name,
+                ref: textareaRef,
+                disabled: disabled ?? void 0,
+                value: isControlled ? value : currentValue,
+                defaultValue: isControlled ? void 0 : defaultValue,
+                onChange: handleChange,
+                rows,
+                maxLength: effectiveMaxLength,
+                className: cn(
+                  "paragraph-md bg-transparent outline-none w-full h-full resize-none px-2 py-2 pr-8",
+                  disabled ? "text-primary-disabled" : hasValue ? "text-primary" : "text-(--color-secondary)",
+                  showCharacterLimit && "pr-16"
+                ),
+                ...textareaProps
+              }
+            ),
+            showCharacterLimit && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+              "span",
+              {
+                className: cn(
+                  "absolute bottom-1 right-1 footnote mb-0!",
+                  counterColorClass
+                ),
+                children: [
+                  currentLength,
+                  "/",
+                  effectiveMaxLength
+                ]
+              }
+            ),
+            type === "responsive" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              "div",
+              {
+                className: "absolute bottom-1 right-1 h-3 w-3 " + (disabled ? "cursor-auto" : "cursor-nwse-resize"),
+                onPointerDown: disabled ? void 0 : handleResizePointerDown,
+                children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                  "span",
+                  {
+                    className: cn(
+                      "absolute bottom-0 right-0 flex h-4 w-4 items-center justify-center text-(--icon-primary)",
+                      disabled && "text-(--icon-primary-disabled)"
+                    ),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.MaximizeIcon, {})
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
 };
 TextArea.displayName = "TextArea";
 
 // src/components/Inputs/TextInput.tsx
-var React32 = __toESM(require("react"), 1);
-var import_class_variance_authority18 = require("class-variance-authority");
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var inputTextVariants2 = (0, import_class_variance_authority18.cva)("truncate", {
+var React36 = __toESM(require("react"), 1);
+var import_class_variance_authority20 = require("class-variance-authority");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var inputTextVariants3 = (0, import_class_variance_authority20.cva)("truncate", {
   variants: {
     size: {
       sm: "paragraph-md",
@@ -3024,7 +3766,7 @@ var inputTextVariants2 = (0, import_class_variance_authority18.cva)("truncate",
     size: "lg"
   }
 });
-var iconWrapperVariants3 = (0, import_class_variance_authority18.cva)(
+var iconWrapperVariants4 = (0, import_class_variance_authority20.cva)(
   "flex items-center justify-center shrink-0 text-(--icon-primary)",
   {
     variants: {
@@ -3061,11 +3803,11 @@ var TextInput = (props) => {
     ...inputProps
   } = props;
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = React32.useState(
+  const [internalValue, setInternalValue] = React36.useState(
     defaultValue ?? ""
   );
   const currentValue = (isControlled ? value : internalValue) ?? "";
-  const inputRef = React32.useRef(null);
+  const inputRef = React36.useRef(null);
   const handleContainerClick = () => {
     if (disabled) return;
     inputRef.current?.focus();
@@ -3078,7 +3820,7 @@ var TextInput = (props) => {
   };
   const showLeadingIcon = !!leadingIcon;
   const showTrailingIcon = !!trailingIcon;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     Field,
     {
       label,
@@ -3086,7 +3828,7 @@ var TextInput = (props) => {
       hideHint,
       status,
       disabled,
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
         InputShell,
         {
           size,
@@ -3095,16 +3837,16 @@ var TextInput = (props) => {
           className,
           onClick: handleContainerClick,
           children: [
-            showLeadingIcon && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            showLeadingIcon && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               "span",
               {
                 className: cn(
-                  iconWrapperVariants3({ size, disabled })
+                  iconWrapperVariants4({ size, disabled })
                 ),
                 children: leadingIcon
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               Input,
               {
                 ref: inputRef,
@@ -3116,17 +3858,17 @@ var TextInput = (props) => {
                 onChange: handleChange,
                 variant: "bare",
                 className: cn(
-                  inputTextVariants2({ size }),
+                  inputTextVariants3({ size }),
                   "bg-transparent outline-none w-full"
                 ),
                 ...inputProps
               }
             ),
-            showTrailingIcon && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            showTrailingIcon && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               "span",
               {
                 className: cn(
-                  iconWrapperVariants3({ size, disabled: !!disabled })
+                  iconWrapperVariants4({ size, disabled: !!disabled })
                 ),
                 children: trailingIcon
               }
@@ -3140,11 +3882,11 @@ var TextInput = (props) => {
 TextInput.displayName = "TextInput";
 
 // src/components/Inputs/Toggle.tsx
-var React33 = require("react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var React37 = require("react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var Toggle = (props) => {
   const { label, className, disabled, ...inputProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
     "label",
     {
       className: cn(
@@ -3152,8 +3894,8 @@ var Toggle = (props) => {
         disabled ? "cursor-default" : "cursor-pointer"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "relative inline-flex items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "relative inline-flex items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             "input",
             {
               type: "checkbox",
@@ -3162,7 +3904,7 @@ var Toggle = (props) => {
               ...inputProps
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             "span",
             {
               className: cn(
@@ -3202,7 +3944,7 @@ var Toggle = (props) => {
                 "peer-disabled:[&>.knob]:peer-checked:bg-(--background-primary-hover)",
                 className
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                 "span",
                 {
                   className: cn(
@@ -3214,7 +3956,7 @@ var Toggle = (props) => {
             }
           )
         ] }),
-        label && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        label && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           "span",
           {
             className: cn(
@@ -3231,8 +3973,8 @@ var Toggle = (props) => {
 Toggle.displayName = "Toggle";
 
 // src/components/Inputs/WebsiteInput.tsx
-var React34 = require("react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var React38 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var WebsiteInput = (props) => {
   const {
     hierarchy = "leading",
@@ -3269,15 +4011,15 @@ var WebsiteInput = (props) => {
     size === "xl" ? "[&>svg]:w-6 [&>svg]:h-6" : size === "sm" ? "[&>svg]:w-4 [&>svg]:h-4" : "[&>svg]:w-5 [&>svg]:h-5",
     disabled ? "text-(--icon-primary-disabled)" : "text-(--icon-primary) group-hover:text-(--icon-primary-hover) group-focus-within:text-(--icon-primary-focus)"
   );
-  const leadingAddon = /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: baseAddonClass, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: addonTextClass, children: protocolLabel }),
-    icon != null && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: iconWrapperClass, children: icon })
+  const leadingAddon = /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: baseAddonClass, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: addonTextClass, children: protocolLabel }),
+    icon != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: iconWrapperClass, children: icon })
   ] });
-  const trailingAddon = /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: baseAddonClass, children: [
-    icon != null && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: iconWrapperClass, children: icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: addonTextClass, children: protocolLabel })
+  const trailingAddon = /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: baseAddonClass, children: [
+    icon != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: iconWrapperClass, children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: addonTextClass, children: protocolLabel })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     TextInput,
     {
       ...rest,
@@ -3292,9 +4034,9 @@ var WebsiteInput = (props) => {
 WebsiteInput.displayName = "WebsiteInput";
 
 // src/components/Feedback/Popover.tsx
-var React35 = __toESM(require("react"), 1);
+var React39 = __toESM(require("react"), 1);
 var PopoverPrimitive2 = __toESM(require("@radix-ui/react-popover"), 1);
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var PopoverArrow = PopoverPrimitive2.Arrow;
 var Popover2 = (props) => {
   const {
@@ -3311,7 +4053,7 @@ var Popover2 = (props) => {
     offset = 10,
     children
   } = props;
-  const [open, setOpen] = React35.useState(false);
+  const [open, setOpen] = React39.useState(false);
   const handleCancel = () => {
     onCancel?.();
     setOpen(false);
@@ -3320,9 +4062,9 @@ var Popover2 = (props) => {
     onOk?.();
     setOpen(false);
   };
-  const popoverClasses = "group bg-(--background-popover) popover w-80 max-w-[calc(100vw-2rem)] shadow-card-md border-none [&_span]:scale-240 rounded-4";
-  const popoverArrowClasses = "relative fill-(--background-popover) transition-[filter,transform] group-data-[side=top]:top-[-2px] group-data-[side=top]:drop-shadow-[0px_2px_1px_var(--color-b-black-12)] group-data-[side=bottom]:drop-shadow-[0px_-1px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)] group-data-[side=left]:drop-shadow-[0px_2px_1px_var(--color-b-black-12)] group-data-[side=right]:drop-shadow-[0px_2px_1px_var(--color-b-black-12)]";
-  const mapPlacementToSideAndAlign = (placement2) => {
+  const popoverClasses = "group bg-(--background-popover) popover w-80 max-w-[calc(100vw-2rem)] shadow-card-md border-none [&>span]:scale-240 rounded-4";
+  const popoverArrowClasses = "relative fill-(--background-popover) transition-[filter,transform] group-data-[side=top]:top-[-2px] group-data-[side=top]:drop-shadow-[0px_2px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)] group-data-[side=bottom]:drop-shadow-[0px_1px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)] group-data-[side=left]:drop-shadow-[0px_2px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)] group-data-[side=right]:drop-shadow-[0px_2px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)]";
+  const mapPlacementToSideAndAlign2 = (placement2) => {
     switch (placement2) {
       case "top":
         return { side: "top", align: "center" };
@@ -3352,10 +4094,10 @@ var Popover2 = (props) => {
         return { side: "bottom", align: "center" };
     }
   };
-  const { side, align } = mapPlacementToSideAndAlign(placement);
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PopoverTrigger, { asChild: true, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  const { side, align } = mapPlacementToSideAndAlign2(placement);
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PopoverTrigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
       PopoverContent,
       {
         side,
@@ -3363,16 +4105,16 @@ var Popover2 = (props) => {
         sideOffset: offset,
         className: cn(popoverClasses, className),
         children: [
-          showArrow && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PopoverArrow, { className: popoverArrowClasses }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "grid gap-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "caption text-secondary", children: strapline }),
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h4", { className: "subtitle-medium text-primary", children: title }),
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "paragraph-sm text-primary", children: description })
+          showArrow && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PopoverArrow, { className: popoverArrowClasses }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "grid gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "caption text-secondary", children: strapline }),
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h4", { className: "subtitle-medium text-primary", children: title }),
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "paragraph-sm text-primary", children: description })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex justify-start items-center gap-4 flex-wrap", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { size: "sm", variant: "secondary", onClick: handleCancel, children: cancelText || "Cancel" }),
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { size: "sm", variant: "primary", onClick: handleOk, children: okText || "Ok" })
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex justify-start items-center gap-4 flex-wrap", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Button, { size: "sm", variant: "secondary", onClick: handleCancel, children: cancelText || "Cancel" }),
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Button, { size: "sm", variant: "primary", onClick: handleOk, children: okText || "Ok" })
             ] })
           ] })
         ]
@@ -3382,82 +4124,280 @@ var Popover2 = (props) => {
 };
 Popover2.displayName = "Popover";
 
-// src/components/Navigation/Breadcrumb.tsx
-var React36 = __toESM(require("react"), 1);
-var import_react_slot8 = require("@radix-ui/react-slot");
-var import_class_variance_authority19 = require("class-variance-authority");
-var import_icons12 = require("@bubo-squared/icons");
-var import_jsx_runtime38 = require("react/jsx-runtime");
-var breadcrumbBase = "group inline-flex items-center gap-[var(--space-8)] pl-0 pr-[var(--space-8)] py-[6px] rounded-full transition-colors select-none disabled:cursor-default disabled:pointer-events-none";
-var breadcrumbIconVariants = (0, import_class_variance_authority19.cva)(
-  "flex shrink-0 items-center justify-center w-5 h-5 *:w-5 *:h-5",
-  {
-    variants: {
-      variant: {
-        colored: "text-(--icon-brand) group-hover:text-(--icon-brand-hover) group-focus-visible:text-(--icon-brand-focus) group-disabled:text-(--icon-brand-disabled)",
-        flat: "text-(--icon-primary) group-hover:text-(--icon-primary-hover) group-focus-visible:text-(--icon-primary-focus) group-disabled:text-(--icon-primary-disabled)"
-      }
-    },
-    defaultVariants: {
-      variant: "flat"
-    }
-  }
-);
-var breadcrumbTextVariants = (0, import_class_variance_authority19.cva)(
-  "font-normal text-[length:var(--font-size-paragraph-lg-18)] leading-[var(--font-line-height-28)] tracking-[var(--font-letter-spacing-02)] whitespace-nowrap",
-  {
-    variants: {
-      variant: {
-        colored: "text-(--color-brand) group-hover:text-(--color-brand-hover) group-focus-visible:text-(--color-brand-focus) group-disabled:text-(--color-brand-disabled)",
-        flat: "text-primary group-hover:text-(--color-primary-hover) group-focus-visible:text-(--color-primary-focus) group-disabled:text-primary-disabled"
-      }
-    },
-    defaultVariants: {
-      variant: "flat"
-    }
+// src/components/Feedback/Tooltip.tsx
+var React40 = require("react");
+var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var TooltipArrow = TooltipPrimitive.Arrow;
+var mapPlacementToSideAndAlign = (placement) => {
+  switch (placement) {
+    case "top":
+      return { side: "top", align: "center" };
+    case "topLeft":
+      return { side: "top", align: "start" };
+    case "topRight":
+      return { side: "top", align: "end" };
+    case "bottom":
+      return { side: "bottom", align: "center" };
+    case "bottomLeft":
+      return { side: "bottom", align: "start" };
+    case "bottomRight":
+      return { side: "bottom", align: "end" };
+    case "left":
+      return { side: "left", align: "center" };
+    case "leftTop":
+      return { side: "left", align: "start" };
+    case "leftBottom":
+      return { side: "left", align: "end" };
+    case "right":
+      return { side: "right", align: "center" };
+    case "rightTop":
+      return { side: "right", align: "start" };
+    case "rightBottom":
+      return { side: "right", align: "end" };
+    default:
+      return { side: "top", align: "center" };
   }
-);
-var Breadcrumb = React36.forwardRef((props, ref) => {
+};
+var Tooltip = (props) => {
   const {
-    asChild = false,
-    variant = "flat",
-    label = "Header",
-    showIcon = true,
-    showText = true,
-    icon,
+    strapline,
+    title,
+    description,
+    showArrow = true,
     className,
+    placement = "top",
+    offset = 10,
+    disableHoverableContent,
+    open,
+    defaultOpen,
+    onOpenChange,
+    children
+  } = props;
+  const { side, align } = mapPlacementToSideAndAlign(placement);
+  const tooltipClasses = "group bg-(--background-popover) max-w-[calc(100vw-2rem)] shadow-card-md border-none rounded-4 p-4 [&>span]:scale-200 data-[state=delayed-open]:animate-in data-[state=instant-open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0 data-[state=instant-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-[state=instant-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";
+  const tooltipArrowClasses = "relative fill-(--background-popover) transition-[filter,transform] group-data-[side=top]:top-[-2px] group-data-[side=top]:drop-shadow-[0px_1px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)] group-data-[side=bottom]:drop-shadow-[0px_1px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)] group-data-[side=left]:drop-shadow-[0px_2px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)] group-data-[side=right]:drop-shadow-[0px_2px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)]";
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+    TooltipPrimitive.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      disableHoverableContent,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipPrimitive.Trigger, { asChild: true, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+          TooltipPrimitive.Content,
+          {
+            side,
+            align,
+            sideOffset: offset,
+            className: cn(tooltipClasses, className),
+            children: [
+              showArrow && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipArrow, { className: tooltipArrowClasses }),
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "grid gap-2", children: [
+                (strapline ?? "") !== "" && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "caption text-secondary", children: strapline }),
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h4", { className: "subtitle-medium text-primary", children: title }),
+                (description ?? "") !== "" && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "paragraph-sm text-primary", children: description })
+              ] })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+};
+Tooltip.displayName = "Tooltip";
+
+// src/components/Feedback/TooltipProvider.tsx
+var React41 = require("react");
+var TooltipPrimitive2 = __toESM(require("@radix-ui/react-tooltip"), 1);
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var TooltipProvider = (props) => {
+  const {
     children,
-    ...rest
+    delayDuration = 200,
+    skipDelayDuration = 300,
+    disableHoverableContent = false
   } = props;
-  const Comp = asChild ? import_react_slot8.Slot : "button";
-  const content = showText ? children ?? label : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
-    Comp,
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    TooltipPrimitive2.Provider,
     {
-      type: asChild ? void 0 : "button",
-      className: cn(breadcrumbBase, className),
-      ref,
-      ...rest,
+      delayDuration,
+      skipDelayDuration,
+      disableHoverableContent,
+      children
+    }
+  );
+};
+TooltipProvider.displayName = "TooltipProvider";
+
+// src/components/Navigation/Breadcrumbs.tsx
+var React43 = __toESM(require("react"), 1);
+
+// src/components/ui/breadcrumb.tsx
+var React42 = require("react");
+var import_react_slot8 = require("@radix-ui/react-slot");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var breadcrumbItemClasses = "h6-title inline-flex items-center gap-1.5 text-(--color-secondary) hover:text-(--color-primary-hover) focus-within:text-(--color-secondary-focus) [&_[aria-current=page]]:font-medium [&_[aria-current=page]]:text-primary";
+var disabledItemClasses = "text-primary-disabled cursor-default pointer-events-none";
+function Breadcrumb({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...props });
+}
+function BreadcrumbList({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    "ol",
+    {
+      "data-slot": "breadcrumb-list",
+      className: cn(
+        "flex flex-wrap items-center gap-1.5 wrap-break-word sm:gap-2.5",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function BreadcrumbItem({ className, disabled, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    "li",
+    {
+      "data-slot": "breadcrumb-item",
+      className: cn(breadcrumbItemClasses, disabled && disabledItemClasses, className),
+      style: { marginBottom: "7px" },
+      ...props
+    }
+  );
+}
+function BreadcrumbPage({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    "span",
+    {
+      "data-slot": "breadcrumb-page",
+      role: "link",
+      "aria-disabled": "true",
+      "aria-current": "page",
+      className: cn(className),
+      ...props
+    }
+  );
+}
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    "li",
+    {
+      "data-slot": "breadcrumb-separator",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: cn("[&>svg]:size-6 [&>svg]:text-(--color-secondary)", className),
+      ...props,
+      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ChevronRight, {})
+    }
+  );
+}
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    "span",
+    {
+      "data-slot": "breadcrumb-ellipsis",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: cn("flex size-9 items-center justify-center", className),
+      ...props,
       children: [
-        showIcon && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: cn(breadcrumbIconVariants({ variant })), children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons12.ChevronRightIcon, {}) }),
-        content && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: cn(breadcrumbTextVariants({ variant })), children: content })
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Ellipsis, { className: "size-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "sr-only", children: "More" })
       ]
     }
   );
-});
-Breadcrumb.displayName = "Breadcrumb";
+}
+
+// src/components/Navigation/Breadcrumbs.tsx
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var breadcrumbSeparatorVariants = "size-5 relative bottom-1 [&>svg]:text-secondary group-disabled:text-secondary";
+var breadcrumbItemBase = "h6-title text-secondary hover:text-primary-hover";
+var Breadcrumbs = React43.forwardRef(
+  (props, ref) => {
+    const { separator, ellipsis, children, className, ...rest } = props;
+    const items = React43.Children.toArray(children).filter(Boolean);
+    const shouldCollapse = Boolean(ellipsis) && items.length >= 5;
+    const hiddenItems = shouldCollapse ? items.slice(1, -2) : [];
+    const displayItems = shouldCollapse ? [items[0], "__ELLIPSIS__", items[items.length - 2], items[items.length - 1]] : items;
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Breadcrumb, { ref, className, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BreadcrumbList, { children: displayItems.map((child, index) => {
+      const isEllipsis = child === "__ELLIPSIS__";
+      const key = isEllipsis ? "__ellipsis" : React43.isValidElement(child) && child.key != null ? String(child.key) : String(index);
+      const isLast = index === displayItems.length - 1;
+      return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(React43.Fragment, { children: [
+        isEllipsis ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BreadcrumbItem, { className: cn(breadcrumbItemBase, props.breadcrumbItemClassName), children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(DropdownMenu, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "inline-flex size-8 items-center justify-center rounded-4 hover:bg-(--background-secondary) focus-ring-primary text-secondary",
+              "aria-label": "Open breadcrumb menu",
+              children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BreadcrumbEllipsis, {})
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            DropdownMenuContent,
+            {
+              align: "start",
+              className: "bg-(--background-neutral) border-(--border-secondary-hover) shadow-card-md rounded-4",
+              children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DropdownMenuGroup, { children: hiddenItems.map((hidden, hiddenIndex) => {
+                const hiddenKey = React43.isValidElement(hidden) && hidden.key != null ? String(hidden.key) : `hidden-${hiddenIndex}`;
+                if (React43.isValidElement(hidden)) {
+                  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                    DropdownMenuItem,
+                    {
+                      asChild: true,
+                      className: "cursor-pointer paragraph-md text-primary focus:bg-(--background-secondary)",
+                      children: hidden
+                    },
+                    hiddenKey
+                  );
+                }
+                return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                  DropdownMenuItem,
+                  {
+                    className: "cursor-pointer paragraph-md text-primary focus:bg-(--background-secondary)",
+                    children: String(hidden)
+                  },
+                  hiddenKey
+                );
+              }) })
+            }
+          )
+        ] }) }) : isLast ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BreadcrumbItem, { className: cn(breadcrumbItemBase, props.breadcrumbItemClassName), children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          BreadcrumbPage,
+          {
+            className: cn("h6-title-medium cursor-pointer", props.breadcrumbPageClassName),
+            children: child
+          }
+        ) }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BreadcrumbItem, { className: cn(breadcrumbItemBase, props.breadcrumbItemClassName), children: child }),
+        !isLast && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BreadcrumbSeparator, { className: cn(breadcrumbSeparatorVariants, props.separatorClassName), children: separator })
+      ] }, key);
+    }) }) });
+  }
+);
+Breadcrumbs.displayName = "Breadcrumbs";
 
 // src/components/Logo/LogoIcon.tsx
-var import_class_variance_authority20 = require("class-variance-authority");
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var LogoIconSvg = (props) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("svg", { width: "89", height: "88", viewBox: "0 0 89 88", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M83.7156 3.88535C78.5352 -1.29512 70.136 -1.29512 64.9555 3.88535L43.9999 24.8409L43.9995 24.8405L62.3536 6.48637C52.2379 16.5949 35.8584 16.6179 25.7142 6.55523L23.4434 4.28438C18.2629 -0.896082 9.86373 -0.89608 4.68327 4.28438C-0.497191 9.46484 -0.49719 17.864 4.68327 23.0445L6.88526 25.2465C17.0191 35.3875 17.0168 51.8235 6.87859 61.9618L25.2395 43.6008L25.2398 43.601L3.88534 64.9555C-1.29512 70.136 -1.29511 78.5351 3.88535 83.7156C9.06581 88.8961 17.465 88.8961 22.6455 83.7156L25.6458 80.7151L25.6864 80.6747C35.7981 70.6137 52.1313 70.597 62.2636 80.6248L65.7534 84.1146C70.9339 89.2951 79.3331 89.2951 84.5135 84.1146C89.694 78.9342 89.694 70.535 84.5135 65.3545L62.76 43.601L62.7602 43.6009L81.1144 61.9552C70.9806 51.8142 70.9829 35.3782 81.1211 25.24L83.7156 22.6455C88.8961 17.465 88.8961 9.06581 83.7156 3.88535Z", fill: "#1685FF" }),
-  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("path", { d: "M44.0667 50.4863C44.1213 50.4317 44.21 50.4317 44.2646 50.4863L48.6465 54.8682C48.6942 54.9158 48.7011 54.9907 48.663 55.0463L44.2812 61.4453C44.2256 61.5265 44.1057 61.5265 44.0501 61.4453L39.6683 55.0463C39.6302 54.9907 39.6371 54.9158 39.6848 54.8682L44.0667 50.4863Z", fill: "white" }),
-  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M44.107 45.3938C44.0536 45.289 43.9013 45.289 43.8479 45.3938C41.8622 49.293 37.8104 51.9638 33.1347 51.9638C26.4991 51.9638 21.1199 46.5846 21.1199 39.9489C21.1199 33.3133 26.4991 27.9341 33.1347 27.9341C37.8104 27.9341 41.8622 30.6049 43.8479 34.5041C43.9013 34.6089 44.0536 34.6089 44.107 34.5041C46.0926 30.6049 50.1445 27.9341 54.8201 27.9341C61.4558 27.9341 66.835 33.3133 66.835 39.9489C66.835 46.5846 61.4558 51.9638 54.8201 51.9638C50.1445 51.9638 46.0926 49.293 44.107 45.3938Z", fill: "white" }),
-  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("path", { d: "M60.1113 40.0006C60.1113 43.052 57.6377 45.5256 54.5863 45.5256C51.535 45.5256 49.0614 43.052 49.0614 40.0006C49.0614 36.9493 51.535 34.4757 54.5863 34.4757C57.6377 34.4757 60.1113 36.9493 60.1113 40.0006Z", fill: "#1685FF" }),
-  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("path", { d: "M38.8954 40.0006C38.8954 43.052 36.4218 45.5256 33.3705 45.5256C30.3192 45.5256 27.8456 43.052 27.8456 40.0006C27.8456 36.9493 30.3192 34.4757 33.3705 34.4757C36.4218 34.4757 38.8954 36.9493 38.8954 40.0006Z", fill: "#1685FF" })
+var import_class_variance_authority21 = require("class-variance-authority");
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var LogoIconSvg = (props) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("svg", { width: "89", height: "88", viewBox: "0 0 89 88", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M83.7156 3.88535C78.5352 -1.29512 70.136 -1.29512 64.9555 3.88535L43.9999 24.8409L43.9995 24.8405L62.3536 6.48637C52.2379 16.5949 35.8584 16.6179 25.7142 6.55523L23.4434 4.28438C18.2629 -0.896082 9.86373 -0.89608 4.68327 4.28438C-0.497191 9.46484 -0.49719 17.864 4.68327 23.0445L6.88526 25.2465C17.0191 35.3875 17.0168 51.8235 6.87859 61.9618L25.2395 43.6008L25.2398 43.601L3.88534 64.9555C-1.29512 70.136 -1.29511 78.5351 3.88535 83.7156C9.06581 88.8961 17.465 88.8961 22.6455 83.7156L25.6458 80.7151L25.6864 80.6747C35.7981 70.6137 52.1313 70.597 62.2636 80.6248L65.7534 84.1146C70.9339 89.2951 79.3331 89.2951 84.5135 84.1146C89.694 78.9342 89.694 70.535 84.5135 65.3545L62.76 43.601L62.7602 43.6009L81.1144 61.9552C70.9806 51.8142 70.9829 35.3782 81.1211 25.24L83.7156 22.6455C88.8961 17.465 88.8961 9.06581 83.7156 3.88535Z", fill: "#1685FF" }),
+  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("path", { d: "M44.0667 50.4863C44.1213 50.4317 44.21 50.4317 44.2646 50.4863L48.6465 54.8682C48.6942 54.9158 48.7011 54.9907 48.663 55.0463L44.2812 61.4453C44.2256 61.5265 44.1057 61.5265 44.0501 61.4453L39.6683 55.0463C39.6302 54.9907 39.6371 54.9158 39.6848 54.8682L44.0667 50.4863Z", fill: "white" }),
+  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M44.107 45.3938C44.0536 45.289 43.9013 45.289 43.8479 45.3938C41.8622 49.293 37.8104 51.9638 33.1347 51.9638C26.4991 51.9638 21.1199 46.5846 21.1199 39.9489C21.1199 33.3133 26.4991 27.9341 33.1347 27.9341C37.8104 27.9341 41.8622 30.6049 43.8479 34.5041C43.9013 34.6089 44.0536 34.6089 44.107 34.5041C46.0926 30.6049 50.1445 27.9341 54.8201 27.9341C61.4558 27.9341 66.835 33.3133 66.835 39.9489C66.835 46.5846 61.4558 51.9638 54.8201 51.9638C50.1445 51.9638 46.0926 49.293 44.107 45.3938Z", fill: "white" }),
+  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("path", { d: "M60.1113 40.0006C60.1113 43.052 57.6377 45.5256 54.5863 45.5256C51.535 45.5256 49.0614 43.052 49.0614 40.0006C49.0614 36.9493 51.535 34.4757 54.5863 34.4757C57.6377 34.4757 60.1113 36.9493 60.1113 40.0006Z", fill: "#1685FF" }),
+  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("path", { d: "M38.8954 40.0006C38.8954 43.052 36.4218 45.5256 33.3705 45.5256C30.3192 45.5256 27.8456 43.052 27.8456 40.0006C27.8456 36.9493 30.3192 34.4757 33.3705 34.4757C36.4218 34.4757 38.8954 36.9493 38.8954 40.0006Z", fill: "#1685FF" })
 ] });
-var logoIconVariants = (0, import_class_variance_authority20.cva)(
+var logoIconVariants = (0, import_class_variance_authority21.cva)(
   "relative bg-linear-to-t from-gray-800 to-gray-950 overflow-hidden flex justify-center items-center",
   {
     variants: {
@@ -3482,28 +4422,28 @@ var logoIconSizeClass = {
   xl: "size-96"
 };
 var LogoIcon = ({ className, size = "md" }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cn(logoIconVariants({ size }), className), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(LogoIconSvg, { className: logoIconSizeClass[size] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: cn(logoIconVariants({ size }), className), children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(LogoIconSvg, { className: logoIconSizeClass[size] }) });
 };
 
 // src/components/Logo/Logo.tsx
-var import_class_variance_authority21 = require("class-variance-authority");
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var LogoIconSvg2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("svg", { width: "89", height: "88", viewBox: "0 0 89 88", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M83.7156 3.88535C78.5352 -1.29512 70.136 -1.29512 64.9555 3.88535L43.9999 24.8409L43.9995 24.8405L62.3536 6.48637C52.2379 16.5949 35.8584 16.6179 25.7142 6.55523L23.4434 4.28438C18.2629 -0.896082 9.86373 -0.89608 4.68327 4.28438C-0.497191 9.46484 -0.49719 17.864 4.68327 23.0445L6.88526 25.2465C17.0191 35.3875 17.0168 51.8235 6.87859 61.9618L25.2395 43.6008L25.2398 43.601L3.88534 64.9555C-1.29512 70.136 -1.29511 78.5351 3.88535 83.7156C9.06581 88.8961 17.465 88.8961 22.6455 83.7156L25.6458 80.7151L25.6864 80.6747C35.7981 70.6137 52.1313 70.597 62.2636 80.6248L65.7534 84.1146C70.9339 89.2951 79.3331 89.2951 84.5135 84.1146C89.694 78.9342 89.694 70.535 84.5135 65.3545L62.76 43.601L62.7602 43.6009L81.1144 61.9552C70.9806 51.8142 70.9829 35.3782 81.1211 25.24L83.7156 22.6455C88.8961 17.465 88.8961 9.06581 83.7156 3.88535Z", fill: "#1685FF" }),
-  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { d: "M44.0667 50.4863C44.1213 50.4317 44.21 50.4317 44.2646 50.4863L48.6465 54.8682C48.6942 54.9158 48.7011 54.9907 48.663 55.0463L44.2812 61.4453C44.2256 61.5265 44.1057 61.5265 44.0501 61.4453L39.6683 55.0463C39.6302 54.9907 39.6371 54.9158 39.6848 54.8682L44.0667 50.4863Z", fill: "white" }),
-  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M44.107 45.3938C44.0536 45.289 43.9013 45.289 43.8479 45.3938C41.8622 49.293 37.8104 51.9638 33.1347 51.9638C26.4991 51.9638 21.1199 46.5846 21.1199 39.9489C21.1199 33.3133 26.4991 27.9341 33.1347 27.9341C37.8104 27.9341 41.8622 30.6049 43.8479 34.5041C43.9013 34.6089 44.0536 34.6089 44.107 34.5041C46.0926 30.6049 50.1445 27.9341 54.8201 27.9341C61.4558 27.9341 66.835 33.3133 66.835 39.9489C66.835 46.5846 61.4558 51.9638 54.8201 51.9638C50.1445 51.9638 46.0926 49.293 44.107 45.3938Z", fill: "white" }),
-  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { d: "M60.1113 40.0006C60.1113 43.052 57.6377 45.5256 54.5863 45.5256C51.535 45.5256 49.0614 43.052 49.0614 40.0006C49.0614 36.9493 51.535 34.4757 54.5863 34.4757C57.6377 34.4757 60.1113 36.9493 60.1113 40.0006Z", fill: "#1685FF" }),
-  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { d: "M38.8954 40.0006C38.8954 43.052 36.4218 45.5256 33.3705 45.5256C30.3192 45.5256 27.8456 43.052 27.8456 40.0006C27.8456 36.9493 30.3192 34.4757 33.3705 34.4757C36.4218 34.4757 38.8954 36.9493 38.8954 40.0006Z", fill: "#1685FF" })
+var import_class_variance_authority22 = require("class-variance-authority");
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var LogoIconSvg2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("svg", { width: "89", height: "88", viewBox: "0 0 89 88", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M83.7156 3.88535C78.5352 -1.29512 70.136 -1.29512 64.9555 3.88535L43.9999 24.8409L43.9995 24.8405L62.3536 6.48637C52.2379 16.5949 35.8584 16.6179 25.7142 6.55523L23.4434 4.28438C18.2629 -0.896082 9.86373 -0.89608 4.68327 4.28438C-0.497191 9.46484 -0.49719 17.864 4.68327 23.0445L6.88526 25.2465C17.0191 35.3875 17.0168 51.8235 6.87859 61.9618L25.2395 43.6008L25.2398 43.601L3.88534 64.9555C-1.29512 70.136 -1.29511 78.5351 3.88535 83.7156C9.06581 88.8961 17.465 88.8961 22.6455 83.7156L25.6458 80.7151L25.6864 80.6747C35.7981 70.6137 52.1313 70.597 62.2636 80.6248L65.7534 84.1146C70.9339 89.2951 79.3331 89.2951 84.5135 84.1146C89.694 78.9342 89.694 70.535 84.5135 65.3545L62.76 43.601L62.7602 43.6009L81.1144 61.9552C70.9806 51.8142 70.9829 35.3782 81.1211 25.24L83.7156 22.6455C88.8961 17.465 88.8961 9.06581 83.7156 3.88535Z", fill: "#1685FF" }),
+  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { d: "M44.0667 50.4863C44.1213 50.4317 44.21 50.4317 44.2646 50.4863L48.6465 54.8682C48.6942 54.9158 48.7011 54.9907 48.663 55.0463L44.2812 61.4453C44.2256 61.5265 44.1057 61.5265 44.0501 61.4453L39.6683 55.0463C39.6302 54.9907 39.6371 54.9158 39.6848 54.8682L44.0667 50.4863Z", fill: "white" }),
+  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M44.107 45.3938C44.0536 45.289 43.9013 45.289 43.8479 45.3938C41.8622 49.293 37.8104 51.9638 33.1347 51.9638C26.4991 51.9638 21.1199 46.5846 21.1199 39.9489C21.1199 33.3133 26.4991 27.9341 33.1347 27.9341C37.8104 27.9341 41.8622 30.6049 43.8479 34.5041C43.9013 34.6089 44.0536 34.6089 44.107 34.5041C46.0926 30.6049 50.1445 27.9341 54.8201 27.9341C61.4558 27.9341 66.835 33.3133 66.835 39.9489C66.835 46.5846 61.4558 51.9638 54.8201 51.9638C50.1445 51.9638 46.0926 49.293 44.107 45.3938Z", fill: "white" }),
+  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { d: "M60.1113 40.0006C60.1113 43.052 57.6377 45.5256 54.5863 45.5256C51.535 45.5256 49.0614 43.052 49.0614 40.0006C49.0614 36.9493 51.535 34.4757 54.5863 34.4757C57.6377 34.4757 60.1113 36.9493 60.1113 40.0006Z", fill: "#1685FF" }),
+  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { d: "M38.8954 40.0006C38.8954 43.052 36.4218 45.5256 33.3705 45.5256C30.3192 45.5256 27.8456 43.052 27.8456 40.0006C27.8456 36.9493 30.3192 34.4757 33.3705 34.4757C36.4218 34.4757 38.8954 36.9493 38.8954 40.0006Z", fill: "#1685FF" })
 ] });
-var LogoTextSvg = (props) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("svg", { width: "111", height: "32", viewBox: "0 0 111 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { d: "M72.7324 20.9658C72.7324 14.4559 77.4246 9.9751 83.8922 9.9751C90.3598 9.9751 95.052 14.4559 95.052 20.9658C95.052 27.4757 90.3598 31.9565 83.8922 31.9565C77.4246 31.9565 72.7324 27.4757 72.7324 20.9658ZM77.8896 20.9658C77.8896 24.7703 80.3414 27.3489 83.8922 27.3489C87.4431 27.3489 89.8948 24.7703 89.8948 20.9658C89.8948 17.1613 87.4431 14.5827 83.8922 14.5827C80.3414 14.5827 77.8896 17.1613 77.8896 20.9658Z", fill: "currentColor" }),
-  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { d: "M53.4056 31.4503H48.6289V0H53.7861V13.6116C55.1388 11.2866 57.9287 9.89163 61.0991 9.89163C67.0595 9.89163 70.6949 14.5415 70.6949 21.136C70.6949 27.5613 66.7636 31.9998 60.761 31.9998C57.6328 31.9998 54.9697 30.6049 53.7438 28.1954L53.4056 31.4503ZM53.8284 20.9246C53.8284 24.6868 56.1533 27.2654 59.7042 27.2654C63.3395 27.2654 65.4954 24.6445 65.4954 20.9246C65.4954 17.2047 63.3395 14.5415 59.7042 14.5415C56.1533 14.5415 53.8284 17.1624 53.8284 20.9246Z", fill: "currentColor" }),
-  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { d: "M38.9929 10.5681H44.15V31.4504H39.3733L38.9929 28.6605C37.7247 30.6473 35.0193 32 32.2293 32C27.4103 32 24.5781 28.745 24.5781 23.6301V10.5681H29.7353V21.8124C29.7353 25.786 31.2994 27.3923 34.1739 27.3923C37.4288 27.3923 38.9929 25.4901 38.9929 21.5165V10.5681Z", fill: "currentColor" }),
-  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { d: "M4.77673 31.4503H0V0H5.15718V13.6116C6.50988 11.2866 9.29983 9.89163 12.4702 9.89163C18.4306 9.89163 22.066 14.5415 22.066 21.136C22.066 27.5613 18.1347 31.9998 12.132 31.9998C9.00392 31.9998 6.34079 30.6049 5.1149 28.1954L4.77673 31.4503ZM5.19945 20.9246C5.19945 24.6868 7.52441 27.2654 11.0752 27.2654C14.7106 27.2654 16.8665 24.6445 16.8665 20.9246C16.8665 17.2047 14.7106 14.5415 11.0752 14.5415C7.52441 14.5415 5.19945 17.1624 5.19945 20.9246Z", fill: "currentColor" }),
-  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { d: "M103.555 0.5C107.084 0.5 109.944 3.36029 109.944 6.88867C109.944 10.4172 107.084 13.2773 103.555 13.2773C100.027 13.2772 97.1667 10.4171 97.1667 6.88867C97.1669 3.36036 100.027 0.500118 103.555 0.5Z", stroke: "currentColor" }),
-  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { d: "M105.778 9.98355L101.687 10.0001V9.00978L103.578 7.33457C104.19 6.79817 104.445 6.41856 104.445 5.91517C104.445 5.29625 104.159 4.96616 103.647 4.96616C103.113 4.96616 102.803 5.35402 102.803 6.03896H101.556C101.556 4.66908 102.377 3.77783 103.64 3.77783C104.949 3.77783 105.731 4.52879 105.731 5.83265C105.731 6.66613 105.259 7.34282 104.546 7.97825L103.686 8.74571H105.778V9.98355Z", fill: "currentColor" })
+var LogoTextSvg = (props) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("svg", { width: "111", height: "32", viewBox: "0 0 111 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { d: "M72.7324 20.9658C72.7324 14.4559 77.4246 9.9751 83.8922 9.9751C90.3598 9.9751 95.052 14.4559 95.052 20.9658C95.052 27.4757 90.3598 31.9565 83.8922 31.9565C77.4246 31.9565 72.7324 27.4757 72.7324 20.9658ZM77.8896 20.9658C77.8896 24.7703 80.3414 27.3489 83.8922 27.3489C87.4431 27.3489 89.8948 24.7703 89.8948 20.9658C89.8948 17.1613 87.4431 14.5827 83.8922 14.5827C80.3414 14.5827 77.8896 17.1613 77.8896 20.9658Z", fill: "currentColor" }),
+  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { d: "M53.4056 31.4503H48.6289V0H53.7861V13.6116C55.1388 11.2866 57.9287 9.89163 61.0991 9.89163C67.0595 9.89163 70.6949 14.5415 70.6949 21.136C70.6949 27.5613 66.7636 31.9998 60.761 31.9998C57.6328 31.9998 54.9697 30.6049 53.7438 28.1954L53.4056 31.4503ZM53.8284 20.9246C53.8284 24.6868 56.1533 27.2654 59.7042 27.2654C63.3395 27.2654 65.4954 24.6445 65.4954 20.9246C65.4954 17.2047 63.3395 14.5415 59.7042 14.5415C56.1533 14.5415 53.8284 17.1624 53.8284 20.9246Z", fill: "currentColor" }),
+  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { d: "M38.9929 10.5681H44.15V31.4504H39.3733L38.9929 28.6605C37.7247 30.6473 35.0193 32 32.2293 32C27.4103 32 24.5781 28.745 24.5781 23.6301V10.5681H29.7353V21.8124C29.7353 25.786 31.2994 27.3923 34.1739 27.3923C37.4288 27.3923 38.9929 25.4901 38.9929 21.5165V10.5681Z", fill: "currentColor" }),
+  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { d: "M4.77673 31.4503H0V0H5.15718V13.6116C6.50988 11.2866 9.29983 9.89163 12.4702 9.89163C18.4306 9.89163 22.066 14.5415 22.066 21.136C22.066 27.5613 18.1347 31.9998 12.132 31.9998C9.00392 31.9998 6.34079 30.6049 5.1149 28.1954L4.77673 31.4503ZM5.19945 20.9246C5.19945 24.6868 7.52441 27.2654 11.0752 27.2654C14.7106 27.2654 16.8665 24.6445 16.8665 20.9246C16.8665 17.2047 14.7106 14.5415 11.0752 14.5415C7.52441 14.5415 5.19945 17.1624 5.19945 20.9246Z", fill: "currentColor" }),
+  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { d: "M103.555 0.5C107.084 0.5 109.944 3.36029 109.944 6.88867C109.944 10.4172 107.084 13.2773 103.555 13.2773C100.027 13.2772 97.1667 10.4171 97.1667 6.88867C97.1669 3.36036 100.027 0.500118 103.555 0.5Z", stroke: "currentColor" }),
+  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { d: "M105.778 9.98355L101.687 10.0001V9.00978L103.578 7.33457C104.19 6.79817 104.445 6.41856 104.445 5.91517C104.445 5.29625 104.159 4.96616 103.647 4.96616C103.113 4.96616 102.803 5.35402 102.803 6.03896H101.556C101.556 4.66908 102.377 3.77783 103.64 3.77783C104.949 3.77783 105.731 4.52879 105.731 5.83265C105.731 6.66613 105.259 7.34282 104.546 7.97825L103.686 8.74571H105.778V9.98355Z", fill: "currentColor" })
 ] });
-var logoWrapperVariants = (0, import_class_variance_authority21.cva)("inline-flex", {
+var logoWrapperVariants = (0, import_class_variance_authority22.cva)("inline-flex", {
   variants: {
     variant: {
       inline: ["w-44", "h-12", "justify-start", "items-center", "gap-4"],
@@ -3515,7 +4455,7 @@ var logoWrapperVariants = (0, import_class_variance_authority21.cva)("inline-fle
     variant: "inline"
   }
 });
-var logoIconSizeVariants = (0, import_class_variance_authority21.cva)("", {
+var logoIconSizeVariants = (0, import_class_variance_authority22.cva)("", {
   variants: {
     variant: {
       inline: "size-12",
@@ -3527,7 +4467,7 @@ var logoIconSizeVariants = (0, import_class_variance_authority21.cva)("", {
     variant: "inline"
   }
 });
-var logoTextSizeVariants = (0, import_class_variance_authority21.cva)("", {
+var logoTextSizeVariants = (0, import_class_variance_authority22.cva)("", {
   variants: {
     variant: {
       inline: "h-8 w-27.5",
@@ -3541,30 +4481,41 @@ var logoTextSizeVariants = (0, import_class_variance_authority21.cva)("", {
 });
 var Logo = ({ className, textColor, variant = "inline" }) => {
   const textColorClass = textColor === "light" ? "text-(--color-b-white)" : textColor === "dark" ? "text-(--color-b-black)" : "text-primary";
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: cn(logoWrapperVariants({ variant }), className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(LogoIconSvg2, { className: logoIconSizeVariants({ variant }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(LogoTextSvg, { className: cn(logoTextSizeVariants({ variant }), textColorClass) })
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: cn(logoWrapperVariants({ variant }), className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(LogoIconSvg2, { className: logoIconSizeVariants({ variant }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(LogoTextSvg, { className: cn(logoTextSizeVariants({ variant }), textColorClass) })
   ] });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Accordion,
+  Autocomplete,
   Avatar,
   Badge,
   BadgeDigit,
   BadgeDot,
   BadgeStatus,
-  Breadcrumb,
+  Breadcrumbs,
   Button,
   ButtonGroup,
   Checkbox,
   Divider,
-  Dropdown,
   Field,
   IconButton,
   IconButtonGroup,
   LinkButton,
   Logo,
   LogoIcon,
+  Menu,
+  MenuGroup,
+  MenuItem,
+  MenuLabel,
+  MenuPortal,
+  MenuSeparator,
+  MenuShortcut,
+  MenuSub,
+  MenuSubContent,
+  MenuSubTrigger,
   MessageButton,
   PasswordInput,
   PhoneInput,
@@ -3572,14 +4523,33 @@ var Logo = ({ className, textColor, variant = "inline" }) => {
   Progress,
   RadioGroup,
   SearchInput,
+  Select,
   Slider,
   StatusAvatar,
   Tag,
   TextArea,
   TextInput,
   Toggle,
+  Tooltip,
+  TooltipProvider,
   Typography,
   WebsiteInput,
   cn
 });
+/*! Bundled license information:
+
+lucide-react/dist/esm/shared/src/utils.js:
+lucide-react/dist/esm/defaultAttributes.js:
+lucide-react/dist/esm/Icon.js:
+lucide-react/dist/esm/createLucideIcon.js:
+lucide-react/dist/esm/icons/chevron-right.js:
+lucide-react/dist/esm/icons/ellipsis.js:
+lucide-react/dist/esm/lucide-react.js:
+  (**
+   * @license lucide-react v0.555.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+*/
 //# sourceMappingURL=index.cjs.map