@bubo-squared/ui-framework 0.1.5 → 0.1.8

package/dist/index.cjs

@@ -35,24 +35,22 @@ __export(index_exports, {
   BadgeDigit: () => BadgeDigit,
   BadgeDot: () => BadgeDot,
   BadgeStatus: () => BadgeStatus,
+  Breadcrumb: () => Breadcrumb,
   Button: () => Button,
   ButtonGroup: () => ButtonGroup,
   Checkbox: () => Checkbox,
   Divider: () => Divider,
   Dropdown: () => Dropdown,
+  Field: () => Field,
   IconButton: () => IconButton,
   IconButtonGroup: () => IconButtonGroup,
   LinkButton: () => LinkButton,
-  LogoIconExtraLarge: () => LogoIconExtraLarge_default,
-  LogoIconExtraSmall: () => LogoIconExtraSmall_default,
-  LogoIconLarge: () => LogoIconLarge_default,
-  LogoIconMedium: () => LogoIconMedium_default,
-  LogoIconSmall: () => LogoIconSmall_default,
-  LogoInline: () => LogoInline_default,
-  LogoInlineSmall: () => LogoInlineSmall_default,
-  LogoMultiline: () => LogoMultiline_default,
+  Logo: () => Logo,
+  LogoIcon: () => LogoIcon,
   MessageButton: () => MessageButton,
   PasswordInput: () => PasswordInput,
+  PhoneInput: () => PhoneInput,
+  Popover: () => Popover2,
   Progress: () => Progress,
   RadioGroup: () => RadioGroup,
   SearchInput: () => SearchInput,
@@ -171,7 +169,7 @@ Button.displayName = "Button";
 var import_class_variance_authority2 = require("class-variance-authority");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var buttonGroupVariants = (0, import_class_variance_authority2.cva)(
-  "flex items-center justify-center gap-4 pt-4 w-80 min-w-80",
+  "flex items-center justify-center gap-4 pt-4 w-[320px] min-w-[320px]",
   {
     variants: {
       variant: {
@@ -1162,7 +1160,7 @@ var Dropdown = (props) => {
           ]
         }
       ),
-      isOpen && options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "absolute z-10 mt-1 w-full min-w-343 rounded-4 border border-(--border-primary-hover) bg-(--background-neutral) shadow-card-md flex overflow-y-scroll dropdown-scrollbar max-h-[316px]", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("ul", { role: "listbox", className: "flex flex-1 flex-col", children: options.map((opt) => {
+      isOpen && options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "absolute z-10 mt-1 w-full min-w-343 rounded-4 border border-(--border-primary-hover) bg-(--background-neutral) shadow-card-md flex overflow-y-scroll dropdown-scrollbar max-h-79", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("ul", { role: "listbox", className: "flex flex-1 flex-col", children: options.map((opt) => {
         const selected = opt.value === currentValue;
         return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "li",
@@ -1204,39 +1202,9 @@ var Dropdown = (props) => {
 };
 Dropdown.displayName = "Dropdown";
 
-// src/components/Inputs/PasswordInput.tsx
-var React20 = __toESM(require("react"), 1);
-var import_class_variance_authority14 = require("class-variance-authority");
-
-// src/components/ui/input.tsx
+// src/components/Inputs/Field.tsx
 var React17 = __toESM(require("react"), 1);
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var Input = React17.forwardRef(
-  ({ className, type, variant = "default", ...props }, ref) => {
-    const base = "text-(--text-primary) placeholder:text-(--text-secondary) disabled:text-(--text-primary-disabled) disabled:placeholder:text-(--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_runtime19.jsx)(
-      "input",
-      {
-        ref,
-        type,
-        "data-slot": "input",
-        className: cn(
-          base,
-          variant === "default" ? defaultStyles : bareStyles,
-          className
-        ),
-        ...props
-      }
-    );
-  }
-);
-Input.displayName = "Input";
-
-// src/components/Inputs/Field.tsx
-var React18 = __toESM(require("react"), 1);
-var import_jsx_runtime20 = require("react/jsx-runtime");
 var fieldBase = "flex flex-col gap-2 items-start min-w-[343px]";
 var Field = (props) => {
   const {
@@ -1247,13 +1215,13 @@ var Field = (props) => {
     className,
     children
   } = props;
-  const fieldId = React18.useId();
+  const fieldId = React17.useId();
   const labelId = label ? `${fieldId}-label` : void 0;
   const hintId = hint ? `${fieldId}-hint` : void 0;
   const hintColorClass = disabled ? "text-(--text-primary-disabled)" : status === "success" ? "text-(--text-success)" : status === "error" ? "text-(--text-error)" : "text-(--text-secondary)";
   const labelColorClass = disabled ? "text-(--text-primary-disabled)" : "text-(--text-primary)";
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn(fieldBase, className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: cn(fieldBase, className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "label",
       {
         id: labelId,
@@ -1262,8 +1230,8 @@ var Field = (props) => {
         children: label
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "relative w-full", children }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "relative w-full", children }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "p",
       {
         id: hint ? hintId : void 0,
@@ -1276,6 +1244,36 @@ var Field = (props) => {
 };
 Field.displayName = "Field";
 
+// src/components/Inputs/PasswordInput.tsx
+var React20 = __toESM(require("react"), 1);
+var import_class_variance_authority14 = require("class-variance-authority");
+
+// src/components/ui/input.tsx
+var React18 = __toESM(require("react"), 1);
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var Input = React18.forwardRef(
+  ({ className, type, variant = "default", ...props }, ref) => {
+    const base = "text-(--text-primary) placeholder:text-(--text-secondary) disabled:text-(--text-primary-disabled) disabled:placeholder:text-(--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_runtime20.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 React19 = __toESM(require("react"), 1);
 var import_class_variance_authority13 = require("class-variance-authority");
@@ -1483,10 +1481,497 @@ var PasswordInput = (props) => {
 };
 PasswordInput.displayName = "PasswordInput";
 
+// src/components/Inputs/PhoneInput.tsx
+var React26 = __toESM(require("react"), 1);
+var import_icons8 = 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 React21 = require("react");
+var import_react_slot7 = require("@radix-ui/react-slot");
+var import_class_variance_authority15 = require("class-variance-authority");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var buttonVariants2 = (0, import_class_variance_authority15.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: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button2({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? import_react_slot7.Slot : "button";
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants2({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/command.tsx
+var React23 = require("react");
+var import_cmdk = require("cmdk");
+var import_icons7 = require("@bubo-squared/icons");
+
+// src/components/ui/dialog.tsx
+var React22 = require("react");
+var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
+var import_jsx_runtime24 = require("react/jsx-runtime");
+
+// src/components/ui/command.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function Command({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    import_cmdk.Command,
+    {
+      "data-slot": "command",
+      className: cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    "div",
+    {
+      "data-slot": "command-input-wrapper",
+      className: "flex h-9 items-center gap-2 border-b px-3",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_icons7.SearchIcon, { className: "size-4 shrink-0 opacity-50 text-(--text-secondary)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          import_cmdk.Command.Input,
+          {
+            "data-slot": "command-input",
+            className: cn(
+              "placeholder:text-(--text-secondary) text-(--text-primary) flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+              className
+            ),
+            ...props
+          }
+        )
+      ]
+    }
+  );
+}
+function CommandList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    import_cmdk.Command.List,
+    {
+      "data-slot": "command-list",
+      className: cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandEmpty({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    import_cmdk.Command.Empty,
+    {
+      "data-slot": "command-empty",
+      className: "py-6 text-center text-sm",
+      ...props
+    }
+  );
+}
+function CommandGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    import_cmdk.Command.Group,
+    {
+      "data-slot": "command-group",
+      className: cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    import_cmdk.Command.Item,
+    {
+      "data-slot": "command-item",
+      className: cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/popover.tsx
+var React24 = require("react");
+var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
+var import_jsx_runtime26 = require("react/jsx-runtime");
+function Popover({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    PopoverPrimitive.Content,
+    {
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+
+// src/components/ui/scroll-area.tsx
+var React25 = require("react");
+var ScrollAreaPrimitive = __toESM(require("@radix-ui/react-scroll-area"), 1);
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function ScrollArea({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    ScrollAreaPrimitive.Root,
+    {
+      "data-slot": "scroll-area",
+      className: cn("relative", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          ScrollAreaPrimitive.Viewport,
+          {
+            "data-slot": "scroll-area-viewport",
+            className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1",
+            children
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ScrollBar, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ScrollAreaPrimitive.Corner, {})
+      ]
+    }
+  );
+}
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    ScrollAreaPrimitive.ScrollAreaScrollbar,
+    {
+      "data-slot": "scroll-area-scrollbar",
+      orientation,
+      className: cn(
+        // Base scrollbar track styling
+        "flex touch-none transition-colors select-none ml-1 pt-1 pb-1",
+        orientation === "vertical" && "h-full w-4",
+        orientation === "horizontal" && "h-4 flex-col",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        ScrollAreaPrimitive.ScrollAreaThumb,
+        {
+          "data-slot": "scroll-area-thumb",
+          className: "bg-(--background-secondary) relative flex-1 rounded mr-1 w-full ml-1"
+        }
+      )
+    }
+  );
+}
+
+// src/components/Inputs/PhoneInput.tsx
+var import_class_variance_authority16 = require("class-variance-authority");
+var import_jsx_runtime28 = 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)(
+  "flex w-full",
+  {
+    variants: {
+      size: {
+        large: "h-11 [&_button]:gap-2",
+        "extra-large": "h-14 [&_button]:gap-3"
+      }
+    }
+  }
+);
+var inputTextVariants = (0, import_class_variance_authority16.cva)("", {
+  variants: {
+    size: {
+      large: "subtitle",
+      "extra-large": "h6-title"
+    },
+    disabled: {
+      true: "text-(--text-primary-disabled) border-(--border-secondary-disabled)"
+    }
+  },
+  defaultVariants: {
+    size: "large"
+  }
+});
+var wrapperStatusClass = {
+  default: "input-default-nested",
+  success: "input-success-nested",
+  error: "input-error-nested"
+};
+var PhoneInput = React26.forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      onChange,
+      value,
+      label,
+      hint,
+      placeholder,
+      size = "large",
+      disabled = false,
+      status = "default",
+      ...rest
+    } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      Field,
+      {
+        label,
+        hint,
+        status,
+        disabled,
+        className,
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: cn("w-full", wrapperStatusClass[status]), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          RPNInput.default,
+          {
+            ref,
+            className: cn(
+              sizeBase({ size }),
+              inputTextVariants({ size, disabled })
+            ),
+            style: { marginBottom: 0 },
+            flagComponent: FlagComponent,
+            countrySelectComponent: CountrySelect,
+            inputComponent: InputComponent,
+            smartCaret: false,
+            value: value || void 0,
+            international: true,
+            countryCallingCodeEditable: false,
+            onChange: (value2) => onChange?.(value2 || ""),
+            placeholder,
+            disabled,
+            ...rest
+          }
+        ) })
+      }
+    );
+  }
+);
+PhoneInput.displayName = "PhoneInput";
+var InputComponent = React26.forwardRef((props, ref) => {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    Input,
+    {
+      ref,
+      placeholder: rest.placeholder,
+      className: cn(inputBase, className),
+      ...rest
+    }
+  );
+});
+InputComponent.displayName = "InputComponent";
+var CountrySelect = ({
+  disabled,
+  value: selectedCountry,
+  options: countryList,
+  onChange
+}) => {
+  const scrollAreaRef = React26.useRef(null);
+  const [searchValue, setSearchValue] = React26.useState("");
+  const [isOpen, setIsOpen] = React26.useState(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    Popover,
+    {
+      open: isOpen,
+      modal: true,
+      onOpenChange: (open) => {
+        setIsOpen(open);
+        open && setSearchValue("");
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+          Button2,
+          {
+            type: "button",
+            variant: "outline",
+            className: cn(inputBase, "flex gap-1 rounded-4 px-3 focus:z-10 mr-(--space-12) text-(--text-primary-disabled) hover:text-(--text-primary-hover) focus:text-(--text-primary-focus)"),
+            disabled,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                FlagComponent,
+                {
+                  country: selectedCountry,
+                  countryName: selectedCountry
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                import_icons8.CodeIcon,
+                {
+                  className: cn(
+                    "-mr-2 size-4 opacity-50 rotate-90",
+                    disabled ? "hidden" : "opacity-100"
+                  )
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(PopoverContent, { className: "w-[300px] p-0 relative left-4.5 bg-(--background-primary) shadow-card-md rounded-4 border-none outline-1 outline-solid outline-(--border-primary-hover) **:data-[slot='command-input-wrapper']:border-b-(--border-secondary)", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Command, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            CommandInput,
+            {
+              value: searchValue,
+              onValueChange: (value) => {
+                setSearchValue(value);
+                setTimeout(() => {
+                  if (scrollAreaRef.current) {
+                    const viewportElement = scrollAreaRef.current.querySelector(
+                      "[data-radix-scroll-area-viewport]"
+                    );
+                    if (viewportElement) {
+                      viewportElement.scrollTop = 0;
+                    }
+                  }
+                }, 0);
+              },
+              placeholder: "Search country..."
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CommandList, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(ScrollArea, { ref: scrollAreaRef, className: "h-72", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CommandEmpty, { children: "No country found." }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.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-(--text-primary) [&>div>div]:hover:text-(--text-primary) p-0 pr-4", children: countryList.map(
+              ({ value, label }) => value ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                CountrySelectOption,
+                {
+                  country: value,
+                  countryName: label,
+                  selectedCountry,
+                  onChange,
+                  onSelectComplete: () => setIsOpen(false)
+                },
+                value
+              ) : null
+            ) })
+          ] }) })
+        ] }) })
+      ]
+    }
+  );
+};
+var CountrySelectOption = (props) => {
+  const {
+    country,
+    countryName,
+    selectedCountry,
+    onChange,
+    onSelectComplete
+  } = props;
+  const handleSelect = () => {
+    onChange(country);
+    onSelectComplete();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    CommandItem,
+    {
+      className: "gap-2 data-[selected=true]:text-(--text-primary)",
+      onSelect: handleSelect,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(FlagComponent, { country, countryName }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "flex-1 text-sm", children: countryName }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-sm text-foreground/50", children: `+${RPNInput.getCountryCallingCode(country)}` }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          import_icons8.CheckIcon,
+          {
+            className: `ml-auto size-4 ${country === selectedCountry ? "opacity-100" : "opacity-0"}`
+          }
+        )
+      ]
+    }
+  );
+};
+var FlagComponent = ({ country, countryName }) => {
+  const Flag = import_flags.default[country];
+  return /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime28.jsx)(Flag, { title: countryName }) });
+};
+
 // src/components/Inputs/RadioGroup.tsx
-var React21 = __toESM(require("react"), 1);
+var React27 = __toESM(require("react"), 1);
 var RadioGroupPrimitive = __toESM(require("@radix-ui/react-radio-group"), 1);
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var wrapperBase = "flex flex-col gap-2 items-start min-w-[343px]";
 var RadioGroup = ({
   label,
@@ -1500,14 +1985,14 @@ var RadioGroup = ({
   className,
   ...rootProps
 }) => {
-  const groupId = React21.useId();
+  const groupId = React27.useId();
   const hintId = hint ? `${groupId}-hint` : void 0;
   const handleValueChange = (next) => {
     onValueChange?.(next);
   };
   const isHorizontal = orientation === "horizontal";
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: wrapperBase, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: wrapperBase, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "span",
       {
         className: cn(
@@ -1518,7 +2003,7 @@ var RadioGroup = ({
         children: label
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       RadioGroupPrimitive.Root,
       {
         ...rootProps,
@@ -1531,13 +2016,13 @@ var RadioGroup = ({
           isHorizontal ? "flex-row gap-6" : "flex-col gap-2",
           className
         ),
-        children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           RadioGroupPrimitive.Item,
           {
             value: option.value,
             disabled: disabled || option.disabled,
             asChild: true,
-            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
               "button",
               {
                 type: "button",
@@ -1547,7 +2032,7 @@ var RadioGroup = ({
                   disabled || option.disabled ? "cursor-default" : "cursor-pointer"
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                     "span",
                     {
                       className: cn(
@@ -1573,7 +2058,7 @@ var RadioGroup = ({
                         "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_runtime23.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                         "span",
                         {
                           className: cn(
@@ -1588,7 +2073,7 @@ var RadioGroup = ({
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                     "span",
                     {
                       className: cn(
@@ -1607,7 +2092,7 @@ var RadioGroup = ({
         ))
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "p",
       {
         id: hintId,
@@ -1623,11 +2108,11 @@ var RadioGroup = ({
 };
 
 // src/components/Inputs/SearchInput.tsx
-var React22 = __toESM(require("react"), 1);
-var import_class_variance_authority15 = require("class-variance-authority");
-var import_icons7 = require("@bubo-squared/icons");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var searchTextVariants = (0, import_class_variance_authority15.cva)("truncate", {
+var React28 = __toESM(require("react"), 1);
+var import_class_variance_authority17 = require("class-variance-authority");
+var import_icons9 = require("@bubo-squared/icons");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var searchTextVariants = (0, import_class_variance_authority17.cva)("truncate", {
   variants: {
     size: {
       large: "subtitle",
@@ -1638,7 +2123,7 @@ var searchTextVariants = (0, import_class_variance_authority15.cva)("truncate",
     size: "large"
   }
 });
-var iconWrapperVariants2 = (0, import_class_variance_authority15.cva)("flex items-center justify-center shrink-0 text-(--icon-primary)", {
+var iconWrapperVariants2 = (0, import_class_variance_authority17.cva)("flex items-center justify-center shrink-0 text-(--icon-primary)", {
   variants: {
     size: {
       large: "size-5 [&>svg]:size-5",
@@ -1662,12 +2147,12 @@ var SearchInput = (props) => {
     showLeadingIcon = true,
     ...inputProps
   } = props;
-  const inputRef = React22.useRef(null);
+  const inputRef = React28.useRef(null);
   const handleContainerClick = () => {
     if (disabled) return;
     inputRef.current?.focus();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex flex-col gap-2 items-start min-w-[343px]", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "relative w-full", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex flex-col gap-2 items-start min-w-[343px]", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "relative w-full", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     InputShell,
     {
       size,
@@ -1676,8 +2161,8 @@ var SearchInput = (props) => {
       className,
       onClick: handleContainerClick,
       children: [
-        showLeadingIcon && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: cn(iconWrapperVariants2({ size, disabled: !!disabled })), children: leadingIcon ?? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons7.SearchIcon, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        showLeadingIcon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: cn(iconWrapperVariants2({ size, disabled: !!disabled })), children: leadingIcon ?? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons9.SearchIcon, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           Input,
           {
             ref: inputRef,
@@ -1699,8 +2184,8 @@ var SearchInput = (props) => {
 SearchInput.displayName = "SearchInput";
 
 // src/components/Inputs/Slider.tsx
-var React23 = __toESM(require("react"), 1);
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var React29 = __toESM(require("react"), 1);
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var wrapperBase2 = "flex flex-col gap-2 items-start min-w-[343px]";
 var Slider = (props) => {
   const {
@@ -1720,7 +2205,7 @@ var Slider = (props) => {
   } = props;
   const isControlled = value !== void 0;
   const expectedLength = type === "multi" ? 2 : 1;
-  const normalizeArray = React23.useCallback(
+  const normalizeArray = React29.useCallback(
     (arr, fallback) => {
       if (!arr || arr.length === 0) return fallback;
       if (arr.length === expectedLength) return arr;
@@ -1732,15 +2217,15 @@ var Slider = (props) => {
     },
     [expectedLength, max]
   );
-  const defaultInternal = React23.useMemo(() => {
+  const defaultInternal = React29.useMemo(() => {
     if (defaultValue) return normalizeArray(defaultValue, []);
     if (type === "multi") return [min, Math.min(min + (max - min) / 4, max)];
     return [min + (max - min) / 3];
   }, [defaultValue, min, max, type, normalizeArray]);
-  const [internalValue, setInternalValue] = React23.useState(
+  const [internalValue, setInternalValue] = React29.useState(
     () => normalizeArray(isControlled ? value : defaultInternal, defaultInternal)
   );
-  React23.useEffect(() => {
+  React29.useEffect(() => {
     if (isControlled) {
       setInternalValue(
         (current2) => normalizeArray(value, current2.length ? current2 : defaultInternal)
@@ -1748,13 +2233,13 @@ var Slider = (props) => {
     }
   }, [isControlled, value, normalizeArray, defaultInternal]);
   const current = internalValue;
-  const trackRef = React23.useRef(null);
+  const trackRef = React29.useRef(null);
   const clamp = (val) => {
     if (val < min) return min;
     if (val > max) return max;
     return val;
   };
-  React23.useEffect(() => {
+  React29.useEffect(() => {
     if (!isControlled) {
       setInternalValue((prev) => {
         const clamped = prev.map((v) => clamp(v));
@@ -1939,7 +2424,7 @@ var Slider = (props) => {
   const trackHeight = 32;
   const thumbWidth = 18;
   const thumbRadius = thumbWidth / 2;
-  const renderTooltipBubble = (key, percent, labelText) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  const renderTooltipBubble = (key, percent, labelText) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "div",
     {
       className: "absolute -translate-x-1/2 flex flex-col items-center",
@@ -1950,7 +2435,7 @@ var Slider = (props) => {
         marginBottom: isTooltipAbove ? 8 : void 0,
         marginTop: isTooltipAbove ? void 0 : 8
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
         "div",
         {
           className: cn(
@@ -1959,7 +2444,7 @@ var Slider = (props) => {
           ),
           style: { marginBottom: 0 },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
               "p",
               {
                 className: cn(
@@ -1970,7 +2455,7 @@ var Slider = (props) => {
                 children: labelText
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
               "div",
               {
                 className: cn(
@@ -1988,7 +2473,7 @@ var Slider = (props) => {
   );
   const renderHandle = (index, percent, ariaValueText) => {
     const val = index === 0 ? primary : secondary;
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "button",
       {
         type: "button",
@@ -2019,11 +2504,11 @@ var Slider = (props) => {
       index
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: wrapperBase2, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cn("w-[354px] flex flex-col gap-1", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "relative w-full", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: wrapperBase2, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cn("w-[354px] flex flex-col gap-1", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "relative w-full", children: [
       showTooltip && primary !== void 0 && renderTooltipBubble("primary", primaryPercent, formatDisplayValue(primary)),
       showTooltip && type === "multi" && secondary !== void 0 && renderTooltipBubble("secondary", secondaryPercent, formatDisplayValue(secondary)),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
         "div",
         {
           className: cn(
@@ -2034,7 +2519,7 @@ var Slider = (props) => {
           ref: trackRef,
           onPointerDown: handleTrackPointerDown,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
               "div",
               {
                 className: cn(
@@ -2053,7 +2538,7 @@ var Slider = (props) => {
         }
       )
     ] }),
-    showNumeric && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    showNumeric && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "p",
       {
         className: cn(
@@ -2069,9 +2554,9 @@ var Slider = (props) => {
 Slider.displayName = "Slider";
 
 // src/components/Inputs/TextArea.tsx
-var React24 = __toESM(require("react"), 1);
-var import_icons8 = require("@bubo-squared/icons");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var React30 = __toESM(require("react"), 1);
+var import_icons10 = require("@bubo-squared/icons");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var wrapperBase3 = "flex flex-col gap-2 items-start min-w-[343px]";
 var TextArea = (props) => {
   const {
@@ -2089,7 +2574,7 @@ var TextArea = (props) => {
     ...textareaProps
   } = props;
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = React24.useState(
+  const [internalValue, setInternalValue] = React30.useState(
     defaultValue ?? ""
   );
   const currentValue = (isControlled ? value : internalValue) ?? "";
@@ -2097,10 +2582,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 = React24.useRef(null);
-  const containerRef = React24.useRef(null);
-  const [height, setHeight] = React24.useState(void 0);
-  const [width, setWidth] = React24.useState(void 0);
+  const textareaRef = React30.useRef(null);
+  const containerRef = React30.useRef(null);
+  const [height, setHeight] = React30.useState(void 0);
+  const [width, setWidth] = React30.useState(void 0);
   const minHeight = 80;
   const minWidth = 240;
   const handleContainerClick = () => {
@@ -2113,7 +2598,7 @@ var TextArea = (props) => {
     }
     onChange?.(event);
   };
-  const inputId = React24.useId();
+  const inputId = React30.useId();
   const labelId = `${inputId}-label`;
   const hintId = `${inputId}-hint`;
   const statusBorderClass = {
@@ -2152,8 +2637,8 @@ var TextArea = (props) => {
     window.addEventListener("pointermove", handlePointerMove);
     window.addEventListener("pointerup", handlePointerUp);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: wrapperBase3, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: wrapperBase3, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "label",
       {
         htmlFor: inputId,
@@ -2166,7 +2651,7 @@ var TextArea = (props) => {
         children: label
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "relative w-full", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "relative w-full", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
       "div",
       {
         className: cn(
@@ -2185,7 +2670,7 @@ var TextArea = (props) => {
         onClick: handleContainerClick,
         "aria-disabled": disabled || void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "textarea",
             {
               id: inputId,
@@ -2207,7 +2692,7 @@ var TextArea = (props) => {
               ...textareaProps
             }
           ),
-          showCharacterLimit && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+          showCharacterLimit && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
             "span",
             {
               className: cn(
@@ -2221,19 +2706,19 @@ var TextArea = (props) => {
               ]
             }
           ),
-          type === "responsive" && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          type === "responsive" && /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime26.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime26.jsx)(import_icons8.MaximizeIcon, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons10.MaximizeIcon, {})
                 }
               )
             }
@@ -2241,7 +2726,7 @@ var TextArea = (props) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "p",
       {
         id: hint ? hintId : void 0,
@@ -2255,10 +2740,10 @@ var TextArea = (props) => {
 TextArea.displayName = "TextArea";
 
 // src/components/Inputs/TextInput.tsx
-var React25 = __toESM(require("react"), 1);
-var import_class_variance_authority16 = require("class-variance-authority");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var inputTextVariants = (0, import_class_variance_authority16.cva)("truncate", {
+var React31 = __toESM(require("react"), 1);
+var import_class_variance_authority18 = require("class-variance-authority");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var inputTextVariants2 = (0, import_class_variance_authority18.cva)("truncate", {
   variants: {
     size: {
       large: "subtitle",
@@ -2269,7 +2754,7 @@ var inputTextVariants = (0, import_class_variance_authority16.cva)("truncate", {
     size: "large"
   }
 });
-var iconWrapperVariants3 = (0, import_class_variance_authority16.cva)(
+var iconWrapperVariants3 = (0, import_class_variance_authority18.cva)(
   "flex items-center justify-center shrink-0 text-(--icon-primary)",
   {
     variants: {
@@ -2303,11 +2788,11 @@ var TextInput = (props) => {
     ...inputProps
   } = props;
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = React25.useState(
+  const [internalValue, setInternalValue] = React31.useState(
     defaultValue ?? ""
   );
   const currentValue = (isControlled ? value : internalValue) ?? "";
-  const inputRef = React25.useRef(null);
+  const inputRef = React31.useRef(null);
   const handleContainerClick = () => {
     if (disabled) return;
     inputRef.current?.focus();
@@ -2320,14 +2805,14 @@ var TextInput = (props) => {
   };
   const showLeadingIcon = !!leadingIcon;
   const showTrailingIcon = !!trailingIcon;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     Field,
     {
       label,
       hint,
       status,
       disabled,
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
         InputShell,
         {
           size,
@@ -2336,7 +2821,7 @@ var TextInput = (props) => {
           className,
           onClick: handleContainerClick,
           children: [
-            showLeadingIcon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            showLeadingIcon && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               "span",
               {
                 className: cn(
@@ -2345,7 +2830,7 @@ var TextInput = (props) => {
                 children: leadingIcon
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               Input,
               {
                 ref: inputRef,
@@ -2357,14 +2842,14 @@ var TextInput = (props) => {
                 onChange: handleChange,
                 variant: "bare",
                 className: cn(
-                  inputTextVariants({ size }),
+                  inputTextVariants2({ size }),
                   "bg-transparent outline-none w-full"
                 ),
                 style: { marginBottom: 0 },
                 ...inputProps
               }
             ),
-            showTrailingIcon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            showTrailingIcon && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               "span",
               {
                 className: cn(
@@ -2382,11 +2867,11 @@ var TextInput = (props) => {
 TextInput.displayName = "TextInput";
 
 // src/components/Inputs/Toggle.tsx
-var React26 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var React32 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var Toggle = (props) => {
   const { label, className, disabled, ...inputProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "label",
     {
       className: cn(
@@ -2394,8 +2879,8 @@ var Toggle = (props) => {
         disabled ? "cursor-default" : "cursor-pointer"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "relative inline-flex items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "relative inline-flex items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             "input",
             {
               type: "checkbox",
@@ -2404,7 +2889,7 @@ var Toggle = (props) => {
               ...inputProps
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             "span",
             {
               className: cn(
@@ -2444,7 +2929,7 @@ var Toggle = (props) => {
                 "peer-disabled:[&>.knob]:peer-checked:bg-(--background-primary-hover)",
                 className
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                 "span",
                 {
                   className: cn(
@@ -2456,7 +2941,7 @@ var Toggle = (props) => {
             }
           )
         ] }),
-        label && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        label && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "span",
           {
             className: cn(
@@ -2474,8 +2959,8 @@ var Toggle = (props) => {
 Toggle.displayName = "Toggle";
 
 // src/components/Inputs/WebsiteInput.tsx
-var React27 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var React33 = require("react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var WebsiteInput = (props) => {
   const {
     hierarchy = "prefix",
@@ -2511,15 +2996,15 @@ var WebsiteInput = (props) => {
     size === "extra-large" ? "[&>svg]:w-6 [&>svg]:h-6" : "[&>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 prefixAddon = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: baseAddonClass, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: addonTextClass, children: protocolLabel }),
-    icon != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: iconWrapperClass, children: icon })
+  const prefixAddon = /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: baseAddonClass, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: addonTextClass, children: protocolLabel }),
+    icon != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: iconWrapperClass, children: icon })
   ] });
-  const suffixAddon = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: baseAddonClass, children: [
-    icon != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: iconWrapperClass, children: icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: addonTextClass, children: protocolLabel })
+  const suffixAddon = /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: baseAddonClass, children: [
+    icon != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: iconWrapperClass, children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: addonTextClass, children: protocolLabel })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     TextInput,
     {
       ...rest,
@@ -2533,78 +3018,266 @@ var WebsiteInput = (props) => {
 };
 WebsiteInput.displayName = "WebsiteInput";
 
-// src/components/Logo/LogoIconExtraLarge.tsx
-var import_icons9 = require("@bubo-squared/icons");
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var LogoIconExtraLarge = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-lg h-[512px] relative bg-linear-to-t from-gray-800 to-gray-950 rounded-80 overflow-hidden flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons9.LogoIconLIcon, { className: "size-96" }) });
-};
-var LogoIconExtraLarge_default = LogoIconExtraLarge;
-
-// src/components/Logo/LogoIconExtraSmall.tsx
-var import_icons10 = require("@bubo-squared/icons");
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var LogoIconExtraSmall = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "size-8 relative bg-linear-to-t from-gray-800 to-gray-950 rounded-[5px] overflow-hidden flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons10.LogoIconMIcon, { className: "size-6" }) });
+// src/components/Feedback/Popover.tsx
+var React34 = __toESM(require("react"), 1);
+var PopoverPrimitive2 = __toESM(require("@radix-ui/react-popover"), 1);
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var PopoverArrow = PopoverPrimitive2.Arrow;
+var Popover2 = (props) => {
+  const {
+    strapline,
+    title,
+    description,
+    onOk,
+    okText,
+    onCancel,
+    cancelText,
+    showArrow = true,
+    className,
+    placement = "bottom",
+    offset = 10,
+    children
+  } = props;
+  const [open, setOpen] = React34.useState(false);
+  const handleCancel = () => {
+    onCancel?.();
+    setOpen(false);
+  };
+  const handleOk = () => {
+    onOk?.();
+    setOpen(false);
+  };
+  const popoverClasses = "bg-(--background-popover) fill-(--background-popover) popover w-80 shadow-card-md border-none [&_span]:scale-240 rounded-4";
+  const mapPlacementToSideAndAlign = (placement2) => {
+    switch (placement2) {
+      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: "bottom", align: "center" };
+    }
+  };
+  const arrowShadowClass = (side2) => {
+    switch (side2) {
+      case "top":
+        return "drop-shadow(0px 2px 1px var(--color-b-black-12))";
+      case "bottom":
+        return "drop-shadow(0px -1px 1px color-mix(in srgb, var(--color-b-black-10) 66%, transparent))";
+      case "left":
+      case "right":
+        return "drop-shadow(0px 2px 1px var(--color-b-black-12))";
+      default:
+        return "";
+    }
+  };
+  const { side, align } = mapPlacementToSideAndAlign(placement);
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PopoverTrigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+      PopoverContent,
+      {
+        side,
+        align,
+        sideOffset: offset,
+        className: cn(popoverClasses, side === "top" ? "[&_span]:bottom-1! " : "", className),
+        children: [
+          showArrow && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            PopoverArrow,
+            {
+              style: { filter: arrowShadowClass(side) }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "grid gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "caption text-secondary", style: { marginBottom: 0 }, children: strapline }),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h4", { className: "subtitle-medium text-primary", style: { marginBottom: 0 }, children: title }),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "paragraph-s text-primary", style: { marginBottom: 0 }, children: description })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex justify-start items-center gap-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Button, { size: "sm", variant: "secondary", onClick: handleCancel, children: cancelText || "Cancel" }),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Button, { size: "sm", variant: "primary", onClick: handleOk, children: okText || "Ok" })
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
 };
-var LogoIconExtraSmall_default = LogoIconExtraSmall;
+Popover2.displayName = "Popover";
 
-// src/components/Logo/LogoIconLarge.tsx
+// src/components/Navigation/Breadcrumb.tsx
+var React35 = __toESM(require("react"), 1);
+var import_react_slot8 = require("@radix-ui/react-slot");
+var import_class_variance_authority19 = require("class-variance-authority");
 var import_icons11 = require("@bubo-squared/icons");
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var LogoIconLarge = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "size-64 relative bg-linear-to-t from-gray-800 to-gray-950 rounded-40 overflow-hidden flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons11.LogoIconMIcon, { className: "size-44" }) });
-};
-var LogoIconLarge_default = LogoIconLarge;
+var import_jsx_runtime37 = 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-l-18)] leading-[var(--font-line-height-28)] tracking-[var(--font-letter-spacing-02)] whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        colored: "text-(--text-brand) group-hover:text-(--text-brand-hover) group-focus-visible:text-(--text-brand-focus) group-disabled:text-(--text-brand-disabled)",
+        flat: "text-(--text-primary) group-hover:text-(--text-primary-hover) group-focus-visible:text-(--text-primary-focus) group-disabled:text-(--text-primary-disabled)"
+      }
+    },
+    defaultVariants: {
+      variant: "flat"
+    }
+  }
+);
+var Breadcrumb = React35.forwardRef((props, ref) => {
+  const {
+    asChild = false,
+    variant = "flat",
+    label = "Header",
+    showIcon = true,
+    showText = true,
+    icon,
+    className,
+    children,
+    ...rest
+  } = props;
+  const Comp = asChild ? import_react_slot8.Slot : "button";
+  const content = showText ? children ?? label : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    Comp,
+    {
+      type: asChild ? void 0 : "button",
+      className: cn(breadcrumbBase, className),
+      ref,
+      ...rest,
+      children: [
+        showIcon && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: cn(breadcrumbIconVariants({ variant })), children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons11.ChevronRightIcon, {}) }),
+        content && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: cn(breadcrumbTextVariants({ variant })), children: content })
+      ]
+    }
+  );
+});
+Breadcrumb.displayName = "Breadcrumb";
 
-// src/components/Logo/LogoIconMedium.tsx
-var import_icons12 = require("@bubo-squared/icons");
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var LogoIconMedium = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "size-32 relative bg-linear-to-t from-gray-800 to-gray-950 rounded-20 overflow-hidden flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_icons12.LogoIconMIcon, { className: "size-24" }) });
-};
-var LogoIconMedium_default = LogoIconMedium;
+// src/components/Logo/LogoIcon.tsx
+var import_class_variance_authority20 = require("class-variance-authority");
 
-// src/components/Logo/LogoIconSmall.tsx
-var import_icons13 = require("@bubo-squared/icons");
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var LogoIconSmall = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "size-14 relative bg-linear-to-t from-gray-800 to-gray-950 rounded-8 overflow-hidden flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_icons13.LogoIconMIcon, { className: "size-10" }) });
-};
-var LogoIconSmall_default = LogoIconSmall;
+// src/components/Logo/assets/logo-icon.svg?react
+var logo_icon_default = "./logo-icon-575VOQEY.svg?react";
 
-// src/components/Logo/LogoInline.tsx
-var import_icons14 = require("@bubo-squared/icons");
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var LogoInline = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "w-44 h-12 inline-flex justify-start items-center gap-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_icons14.LogoIconMIcon, { className: "size-12" }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_icons14.LogoTextMIcon, { className: "h-8 w-[110px] text-(--text-primary)" })
-  ] });
+// src/components/Logo/LogoIcon.tsx
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var logoIconVariants = (0, import_class_variance_authority20.cva)(
+  "relative bg-linear-to-t from-gray-800 to-gray-950 overflow-hidden flex justify-center items-center",
+  {
+    variants: {
+      size: {
+        xs: ["size-8", "rounded-[5px]"],
+        sm: ["size-14", "rounded-8"],
+        md: ["size-32", "rounded-20"],
+        lg: ["size-64", "rounded-40"],
+        xl: ["size-128", "rounded-80"]
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var logoIconSizeClass = {
+  xs: "size-6",
+  sm: "size-10",
+  md: "size-24",
+  lg: "size-44",
+  xl: "size-96"
 };
-var LogoInline_default = LogoInline;
-
-// src/components/Logo/LogoInlineSmall.tsx
-var import_icons15 = require("@bubo-squared/icons");
-var import_jsx_runtime36 = require("react/jsx-runtime");
-var LogoInline2 = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "w-32 h-9 inline-flex justify-start items-center gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_icons15.LogoIconMIcon, { className: "size-9" }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_icons15.LogoTextMIcon, { className: "h-6 w-[83px] text-(--text-primary)" })
-  ] });
+var LogoIcon = ({ className, size = "md" }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: cn(logoIconVariants({ size }), className), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(logo_icon_default, { className: logoIconSizeClass[size] }) });
 };
-var LogoInlineSmall_default = LogoInline2;
 
-// src/components/Logo/LogoMultiline.tsx
-var import_icons16 = require("@bubo-squared/icons");
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var LogoMultiline = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "w-36 inline-flex flex-col justify-start items-start gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons16.LogoIconMIcon, { className: "size-12" }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons16.LogoTextMIcon, { className: "h-8 w-[111px] text-(--text-primary)" })
+// src/components/Logo/Logo.tsx
+var import_class_variance_authority21 = require("class-variance-authority");
+
+// src/components/Logo/assets/logo-text.svg?react
+var logo_text_default = "./logo-text-IUSWKNLN.svg?react";
+
+// src/components/Logo/Logo.tsx
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var logoWrapperVariants = (0, import_class_variance_authority21.cva)("inline-flex", {
+  variants: {
+    variant: {
+      inline: ["w-44", "h-12", "justify-start", "items-center", "gap-4"],
+      inlineSmall: ["w-32", "h-9", "justify-start", "items-center", "gap-3"],
+      multiline: ["w-36", "flex-col", "justify-start", "items-start", "gap-2"]
+    }
+  },
+  defaultVariants: {
+    variant: "inline"
+  }
+});
+var logoIconSizeVariants = (0, import_class_variance_authority21.cva)("", {
+  variants: {
+    variant: {
+      inline: "size-12",
+      inlineSmall: "size-9",
+      multiline: "size-12"
+    }
+  },
+  defaultVariants: {
+    variant: "inline"
+  }
+});
+var logoTextSizeVariants = (0, import_class_variance_authority21.cva)("", {
+  variants: {
+    variant: {
+      inline: "h-8 w-27.5",
+      inlineSmall: "h-6 w-20.75",
+      multiline: "h-8 w-27.75"
+    }
+  },
+  defaultVariants: {
+    variant: "inline"
+  }
+});
+var Logo = ({ className, textColor, variant = "inline" }) => {
+  const textColorClass = textColor === "light" ? "text-(--color-b-white)" : textColor === "dark" ? "text-(--color-b-black)" : "text-(--text-primary)";
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cn(logoWrapperVariants({ variant }), className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(logo_icon_default, { className: logoIconSizeVariants({ variant }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(logo_text_default, { className: cn(logoTextSizeVariants({ variant }), textColorClass) })
   ] });
 };
-var LogoMultiline_default = LogoMultiline;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Avatar,
@@ -2612,24 +3285,22 @@ var LogoMultiline_default = LogoMultiline;
   BadgeDigit,
   BadgeDot,
   BadgeStatus,
+  Breadcrumb,
   Button,
   ButtonGroup,
   Checkbox,
   Divider,
   Dropdown,
+  Field,
   IconButton,
   IconButtonGroup,
   LinkButton,
-  LogoIconExtraLarge,
-  LogoIconExtraSmall,
-  LogoIconLarge,
-  LogoIconMedium,
-  LogoIconSmall,
-  LogoInline,
-  LogoInlineSmall,
-  LogoMultiline,
+  Logo,
+  LogoIcon,
   MessageButton,
   PasswordInput,
+  PhoneInput,
+  Popover,
   Progress,
   RadioGroup,
   SearchInput,