@bubo-squared/ui-framework 0.1.5 → 0.1.8

package/dist/index.js

@@ -102,7 +102,7 @@ Button.displayName = "Button";
 import { cva as cva2 } from "class-variance-authority";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var buttonGroupVariants = cva2(
-  "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: {
@@ -1099,7 +1099,7 @@ var Dropdown = (props) => {
           ]
         }
       ),
-      isOpen && options.length > 0 && /* @__PURE__ */ jsx18("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__ */ jsx18("ul", { role: "listbox", className: "flex flex-1 flex-col", children: options.map((opt) => {
+      isOpen && options.length > 0 && /* @__PURE__ */ jsx18("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__ */ jsx18("ul", { role: "listbox", className: "flex flex-1 flex-col", children: options.map((opt) => {
         const selected = opt.value === currentValue;
         return /* @__PURE__ */ jsx18(
           "li",
@@ -1141,39 +1141,9 @@ var Dropdown = (props) => {
 };
 Dropdown.displayName = "Dropdown";
 
-// src/components/Inputs/PasswordInput.tsx
-import * as React20 from "react";
-import { cva as cva14 } from "class-variance-authority";
-
-// src/components/ui/input.tsx
-import * as React17 from "react";
-import { jsx as jsx19 } from "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__ */ jsx19(
-      "input",
-      {
-        ref,
-        type,
-        "data-slot": "input",
-        className: cn(
-          base,
-          variant === "default" ? defaultStyles : bareStyles,
-          className
-        ),
-        ...props
-      }
-    );
-  }
-);
-Input.displayName = "Input";
-
 // src/components/Inputs/Field.tsx
-import * as React18 from "react";
-import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import * as React17 from "react";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 var fieldBase = "flex flex-col gap-2 items-start min-w-[343px]";
 var Field = (props) => {
   const {
@@ -1184,13 +1154,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__ */ jsxs13("div", { className: cn(fieldBase, className), children: [
-    label && /* @__PURE__ */ jsx20(
+    label && /* @__PURE__ */ jsx19(
       "label",
       {
         id: labelId,
@@ -1199,8 +1169,8 @@ var Field = (props) => {
         children: label
       }
     ),
-    /* @__PURE__ */ jsx20("div", { className: "relative w-full", children }),
-    /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx19("div", { className: "relative w-full", children }),
+    /* @__PURE__ */ jsx19(
       "p",
       {
         id: hint ? hintId : void 0,
@@ -1213,6 +1183,36 @@ var Field = (props) => {
 };
 Field.displayName = "Field";
 
+// src/components/Inputs/PasswordInput.tsx
+import * as React20 from "react";
+import { cva as cva14 } from "class-variance-authority";
+
+// src/components/ui/input.tsx
+import * as React18 from "react";
+import { jsx as jsx20 } from "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__ */ jsx20(
+      "input",
+      {
+        ref,
+        type,
+        "data-slot": "input",
+        className: cn(
+          base,
+          variant === "default" ? defaultStyles : bareStyles,
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
 // src/components/Inputs/InputShell.tsx
 import * as React19 from "react";
 import { cva as cva13 } from "class-variance-authority";
@@ -1420,10 +1420,497 @@ var PasswordInput = (props) => {
 };
 PasswordInput.displayName = "PasswordInput";
 
+// src/components/Inputs/PhoneInput.tsx
+import * as React26 from "react";
+import { CheckIcon as CheckIcon3, CodeIcon } from "@bubo-squared/icons";
+import * as RPNInput from "react-phone-number-input";
+import flags from "react-phone-number-input/flags";
+
+// src/components/ui/button.tsx
+import "react";
+import { Slot as Slot7 } from "@radix-ui/react-slot";
+import { cva as cva15 } from "class-variance-authority";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var buttonVariants2 = cva15(
+  "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 ? Slot7 : "button";
+  return /* @__PURE__ */ jsx23(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants2({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/command.tsx
+import "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { SearchIcon } from "@bubo-squared/icons";
+
+// src/components/ui/dialog.tsx
+import "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
+
+// src/components/ui/command.tsx
+import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
+function Command({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx25(
+    CommandPrimitive,
+    {
+      "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__ */ jsxs16(
+    "div",
+    {
+      "data-slot": "command-input-wrapper",
+      className: "flex h-9 items-center gap-2 border-b px-3",
+      children: [
+        /* @__PURE__ */ jsx25(SearchIcon, { className: "size-4 shrink-0 opacity-50 text-(--text-secondary)" }),
+        /* @__PURE__ */ jsx25(
+          CommandPrimitive.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__ */ jsx25(
+    CommandPrimitive.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__ */ jsx25(
+    CommandPrimitive.Empty,
+    {
+      "data-slot": "command-empty",
+      className: "py-6 text-center text-sm",
+      ...props
+    }
+  );
+}
+function CommandGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx25(
+    CommandPrimitive.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__ */ jsx25(
+    CommandPrimitive.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
+import "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { jsx as jsx26 } from "react/jsx-runtime";
+function Popover({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx26(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx26(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx26(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx26(
+    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
+import "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+function ScrollArea({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs17(
+    ScrollAreaPrimitive.Root,
+    {
+      "data-slot": "scroll-area",
+      className: cn("relative", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx27(
+          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__ */ jsx27(ScrollBar, {}),
+        /* @__PURE__ */ jsx27(ScrollAreaPrimitive.Corner, {})
+      ]
+    }
+  );
+}
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx27(
+    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__ */ jsx27(
+        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
+import { cva as cva16 } from "class-variance-authority";
+import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
+var inputBase = "h-full rounded-4 border-(--border-secondary) bg-(--background-primary) hover:border-(--border-secondary-hover)";
+var sizeBase = cva16(
+  "flex w-full",
+  {
+    variants: {
+      size: {
+        large: "h-11 [&_button]:gap-2",
+        "extra-large": "h-14 [&_button]:gap-3"
+      }
+    }
+  }
+);
+var inputTextVariants = cva16("", {
+  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__ */ jsx28(
+      Field,
+      {
+        label,
+        hint,
+        status,
+        disabled,
+        className,
+        children: /* @__PURE__ */ jsx28("div", { className: cn("w-full", wrapperStatusClass[status]), children: /* @__PURE__ */ jsx28(
+          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__ */ jsx28(
+    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__ */ jsxs18(
+    Popover,
+    {
+      open: isOpen,
+      modal: true,
+      onOpenChange: (open) => {
+        setIsOpen(open);
+        open && setSearchValue("");
+      },
+      children: [
+        /* @__PURE__ */ jsx28(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs18(
+          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__ */ jsx28(
+                FlagComponent,
+                {
+                  country: selectedCountry,
+                  countryName: selectedCountry
+                }
+              ),
+              /* @__PURE__ */ jsx28(
+                CodeIcon,
+                {
+                  className: cn(
+                    "-mr-2 size-4 opacity-50 rotate-90",
+                    disabled ? "hidden" : "opacity-100"
+                  )
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx28(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__ */ jsxs18(Command, { children: [
+          /* @__PURE__ */ jsx28(
+            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__ */ jsx28(CommandList, { children: /* @__PURE__ */ jsxs18(ScrollArea, { ref: scrollAreaRef, className: "h-72", children: [
+            /* @__PURE__ */ jsx28(CommandEmpty, { children: "No country found." }),
+            /* @__PURE__ */ jsx28(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__ */ jsx28(
+                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__ */ jsxs18(
+    CommandItem,
+    {
+      className: "gap-2 data-[selected=true]:text-(--text-primary)",
+      onSelect: handleSelect,
+      children: [
+        /* @__PURE__ */ jsx28(FlagComponent, { country, countryName }),
+        /* @__PURE__ */ jsx28("span", { className: "flex-1 text-sm", children: countryName }),
+        /* @__PURE__ */ jsx28("span", { className: "text-sm text-foreground/50", children: `+${RPNInput.getCountryCallingCode(country)}` }),
+        /* @__PURE__ */ jsx28(
+          CheckIcon3,
+          {
+            className: `ml-auto size-4 ${country === selectedCountry ? "opacity-100" : "opacity-0"}`
+          }
+        )
+      ]
+    }
+  );
+};
+var FlagComponent = ({ country, countryName }) => {
+  const Flag = flags[country];
+  return /* @__PURE__ */ jsx28("span", { className: "flex h-4 w-6 overflow-hidden rounded-2 bg-foreground/20 [&_svg:not([class*='size-'])]:size-full", children: Flag && /* @__PURE__ */ jsx28(Flag, { title: countryName }) });
+};
+
 // src/components/Inputs/RadioGroup.tsx
-import * as React21 from "react";
+import * as React27 from "react";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
 var wrapperBase = "flex flex-col gap-2 items-start min-w-[343px]";
 var RadioGroup = ({
   label,
@@ -1437,14 +1924,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__ */ jsxs15("div", { className: wrapperBase, children: [
-    label && /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsxs19("div", { className: wrapperBase, children: [
+    label && /* @__PURE__ */ jsx29(
       "span",
       {
         className: cn(
@@ -1455,7 +1942,7 @@ var RadioGroup = ({
         children: label
       }
     ),
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx29(
       RadioGroupPrimitive.Root,
       {
         ...rootProps,
@@ -1468,13 +1955,13 @@ var RadioGroup = ({
           isHorizontal ? "flex-row gap-6" : "flex-col gap-2",
           className
         ),
-        children: options.map((option) => /* @__PURE__ */ jsx23(
+        children: options.map((option) => /* @__PURE__ */ jsx29(
           RadioGroupPrimitive.Item,
           {
             value: option.value,
             disabled: disabled || option.disabled,
             asChild: true,
-            children: /* @__PURE__ */ jsxs15(
+            children: /* @__PURE__ */ jsxs19(
               "button",
               {
                 type: "button",
@@ -1484,7 +1971,7 @@ var RadioGroup = ({
                   disabled || option.disabled ? "cursor-default" : "cursor-pointer"
                 ),
                 children: [
-                  /* @__PURE__ */ jsx23(
+                  /* @__PURE__ */ jsx29(
                     "span",
                     {
                       className: cn(
@@ -1510,7 +1997,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__ */ jsx23(
+                      children: /* @__PURE__ */ jsx29(
                         "span",
                         {
                           className: cn(
@@ -1525,7 +2012,7 @@ var RadioGroup = ({
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsx23(
+                  /* @__PURE__ */ jsx29(
                     "span",
                     {
                       className: cn(
@@ -1544,7 +2031,7 @@ var RadioGroup = ({
         ))
       }
     ),
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx29(
       "p",
       {
         id: hintId,
@@ -1560,11 +2047,11 @@ var RadioGroup = ({
 };
 
 // src/components/Inputs/SearchInput.tsx
-import * as React22 from "react";
-import { cva as cva15 } from "class-variance-authority";
-import { SearchIcon } from "@bubo-squared/icons";
-import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
-var searchTextVariants = cva15("truncate", {
+import * as React28 from "react";
+import { cva as cva17 } from "class-variance-authority";
+import { SearchIcon as SearchIcon2 } from "@bubo-squared/icons";
+import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
+var searchTextVariants = cva17("truncate", {
   variants: {
     size: {
       large: "subtitle",
@@ -1575,7 +2062,7 @@ var searchTextVariants = cva15("truncate", {
     size: "large"
   }
 });
-var iconWrapperVariants2 = cva15("flex items-center justify-center shrink-0 text-(--icon-primary)", {
+var iconWrapperVariants2 = cva17("flex items-center justify-center shrink-0 text-(--icon-primary)", {
   variants: {
     size: {
       large: "size-5 [&>svg]:size-5",
@@ -1599,12 +2086,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__ */ jsx24("div", { className: "flex flex-col gap-2 items-start min-w-[343px]", children: /* @__PURE__ */ jsx24("div", { className: "relative w-full", children: /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsx30("div", { className: "flex flex-col gap-2 items-start min-w-[343px]", children: /* @__PURE__ */ jsx30("div", { className: "relative w-full", children: /* @__PURE__ */ jsxs20(
     InputShell,
     {
       size,
@@ -1613,8 +2100,8 @@ var SearchInput = (props) => {
       className,
       onClick: handleContainerClick,
       children: [
-        showLeadingIcon && /* @__PURE__ */ jsx24("span", { className: cn(iconWrapperVariants2({ size, disabled: !!disabled })), children: leadingIcon ?? /* @__PURE__ */ jsx24(SearchIcon, {}) }),
-        /* @__PURE__ */ jsx24(
+        showLeadingIcon && /* @__PURE__ */ jsx30("span", { className: cn(iconWrapperVariants2({ size, disabled: !!disabled })), children: leadingIcon ?? /* @__PURE__ */ jsx30(SearchIcon2, {}) }),
+        /* @__PURE__ */ jsx30(
           Input,
           {
             ref: inputRef,
@@ -1636,8 +2123,8 @@ var SearchInput = (props) => {
 SearchInput.displayName = "SearchInput";
 
 // src/components/Inputs/Slider.tsx
-import * as React23 from "react";
-import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
+import * as React29 from "react";
+import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
 var wrapperBase2 = "flex flex-col gap-2 items-start min-w-[343px]";
 var Slider = (props) => {
   const {
@@ -1657,7 +2144,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;
@@ -1669,15 +2156,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)
@@ -1685,13 +2172,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));
@@ -1876,7 +2363,7 @@ var Slider = (props) => {
   const trackHeight = 32;
   const thumbWidth = 18;
   const thumbRadius = thumbWidth / 2;
-  const renderTooltipBubble = (key, percent, labelText) => /* @__PURE__ */ jsx25(
+  const renderTooltipBubble = (key, percent, labelText) => /* @__PURE__ */ jsx31(
     "div",
     {
       className: "absolute -translate-x-1/2 flex flex-col items-center",
@@ -1887,7 +2374,7 @@ var Slider = (props) => {
         marginBottom: isTooltipAbove ? 8 : void 0,
         marginTop: isTooltipAbove ? void 0 : 8
       },
-      children: /* @__PURE__ */ jsxs17(
+      children: /* @__PURE__ */ jsxs21(
         "div",
         {
           className: cn(
@@ -1896,7 +2383,7 @@ var Slider = (props) => {
           ),
           style: { marginBottom: 0 },
           children: [
-            /* @__PURE__ */ jsx25(
+            /* @__PURE__ */ jsx31(
               "p",
               {
                 className: cn(
@@ -1907,7 +2394,7 @@ var Slider = (props) => {
                 children: labelText
               }
             ),
-            /* @__PURE__ */ jsx25(
+            /* @__PURE__ */ jsx31(
               "div",
               {
                 className: cn(
@@ -1925,7 +2412,7 @@ var Slider = (props) => {
   );
   const renderHandle = (index, percent, ariaValueText) => {
     const val = index === 0 ? primary : secondary;
-    return /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsx31(
       "button",
       {
         type: "button",
@@ -1956,11 +2443,11 @@ var Slider = (props) => {
       index
     );
   };
-  return /* @__PURE__ */ jsx25("div", { className: wrapperBase2, children: /* @__PURE__ */ jsxs17("div", { className: cn("w-[354px] flex flex-col gap-1", className), children: [
-    /* @__PURE__ */ jsxs17("div", { className: "relative w-full", children: [
+  return /* @__PURE__ */ jsx31("div", { className: wrapperBase2, children: /* @__PURE__ */ jsxs21("div", { className: cn("w-[354px] flex flex-col gap-1", className), children: [
+    /* @__PURE__ */ jsxs21("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__ */ jsxs17(
+      /* @__PURE__ */ jsxs21(
         "div",
         {
           className: cn(
@@ -1971,7 +2458,7 @@ var Slider = (props) => {
           ref: trackRef,
           onPointerDown: handleTrackPointerDown,
           children: [
-            /* @__PURE__ */ jsx25(
+            /* @__PURE__ */ jsx31(
               "div",
               {
                 className: cn(
@@ -1990,7 +2477,7 @@ var Slider = (props) => {
         }
       )
     ] }),
-    showNumeric && /* @__PURE__ */ jsx25(
+    showNumeric && /* @__PURE__ */ jsx31(
       "p",
       {
         className: cn(
@@ -2006,9 +2493,9 @@ var Slider = (props) => {
 Slider.displayName = "Slider";
 
 // src/components/Inputs/TextArea.tsx
-import * as React24 from "react";
+import * as React30 from "react";
 import { MaximizeIcon } from "@bubo-squared/icons";
-import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
 var wrapperBase3 = "flex flex-col gap-2 items-start min-w-[343px]";
 var TextArea = (props) => {
   const {
@@ -2026,7 +2513,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) ?? "";
@@ -2034,10 +2521,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 = () => {
@@ -2050,7 +2537,7 @@ var TextArea = (props) => {
     }
     onChange?.(event);
   };
-  const inputId = React24.useId();
+  const inputId = React30.useId();
   const labelId = `${inputId}-label`;
   const hintId = `${inputId}-hint`;
   const statusBorderClass = {
@@ -2089,8 +2576,8 @@ var TextArea = (props) => {
     window.addEventListener("pointermove", handlePointerMove);
     window.addEventListener("pointerup", handlePointerUp);
   };
-  return /* @__PURE__ */ jsxs18("div", { className: wrapperBase3, children: [
-    label && /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsxs22("div", { className: wrapperBase3, children: [
+    label && /* @__PURE__ */ jsx32(
       "label",
       {
         htmlFor: inputId,
@@ -2103,7 +2590,7 @@ var TextArea = (props) => {
         children: label
       }
     ),
-    /* @__PURE__ */ jsx26("div", { className: "relative w-full", children: /* @__PURE__ */ jsxs18(
+    /* @__PURE__ */ jsx32("div", { className: "relative w-full", children: /* @__PURE__ */ jsxs22(
       "div",
       {
         className: cn(
@@ -2122,7 +2609,7 @@ var TextArea = (props) => {
         onClick: handleContainerClick,
         "aria-disabled": disabled || void 0,
         children: [
-          /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx32(
             "textarea",
             {
               id: inputId,
@@ -2144,7 +2631,7 @@ var TextArea = (props) => {
               ...textareaProps
             }
           ),
-          showCharacterLimit && /* @__PURE__ */ jsxs18(
+          showCharacterLimit && /* @__PURE__ */ jsxs22(
             "span",
             {
               className: cn(
@@ -2158,19 +2645,19 @@ var TextArea = (props) => {
               ]
             }
           ),
-          type === "responsive" && /* @__PURE__ */ jsx26(
+          type === "responsive" && /* @__PURE__ */ jsx32(
             "div",
             {
               className: "absolute bottom-1 right-1 h-3 w-3 " + (disabled ? "cursor-auto" : "cursor-nwse-resize"),
               onPointerDown: disabled ? void 0 : handleResizePointerDown,
-              children: /* @__PURE__ */ jsx26(
+              children: /* @__PURE__ */ jsx32(
                 "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__ */ jsx26(MaximizeIcon, {})
+                  children: /* @__PURE__ */ jsx32(MaximizeIcon, {})
                 }
               )
             }
@@ -2178,7 +2665,7 @@ var TextArea = (props) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx32(
       "p",
       {
         id: hint ? hintId : void 0,
@@ -2192,10 +2679,10 @@ var TextArea = (props) => {
 TextArea.displayName = "TextArea";
 
 // src/components/Inputs/TextInput.tsx
-import * as React25 from "react";
-import { cva as cva16 } from "class-variance-authority";
-import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
-var inputTextVariants = cva16("truncate", {
+import * as React31 from "react";
+import { cva as cva18 } from "class-variance-authority";
+import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
+var inputTextVariants2 = cva18("truncate", {
   variants: {
     size: {
       large: "subtitle",
@@ -2206,7 +2693,7 @@ var inputTextVariants = cva16("truncate", {
     size: "large"
   }
 });
-var iconWrapperVariants3 = cva16(
+var iconWrapperVariants3 = cva18(
   "flex items-center justify-center shrink-0 text-(--icon-primary)",
   {
     variants: {
@@ -2240,11 +2727,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();
@@ -2257,14 +2744,14 @@ var TextInput = (props) => {
   };
   const showLeadingIcon = !!leadingIcon;
   const showTrailingIcon = !!trailingIcon;
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx33(
     Field,
     {
       label,
       hint,
       status,
       disabled,
-      children: /* @__PURE__ */ jsxs19(
+      children: /* @__PURE__ */ jsxs23(
         InputShell,
         {
           size,
@@ -2273,7 +2760,7 @@ var TextInput = (props) => {
           className,
           onClick: handleContainerClick,
           children: [
-            showLeadingIcon && /* @__PURE__ */ jsx27(
+            showLeadingIcon && /* @__PURE__ */ jsx33(
               "span",
               {
                 className: cn(
@@ -2282,7 +2769,7 @@ var TextInput = (props) => {
                 children: leadingIcon
               }
             ),
-            /* @__PURE__ */ jsx27(
+            /* @__PURE__ */ jsx33(
               Input,
               {
                 ref: inputRef,
@@ -2294,14 +2781,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__ */ jsx27(
+            showTrailingIcon && /* @__PURE__ */ jsx33(
               "span",
               {
                 className: cn(
@@ -2320,10 +2807,10 @@ TextInput.displayName = "TextInput";
 
 // src/components/Inputs/Toggle.tsx
 import "react";
-import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
 var Toggle = (props) => {
   const { label, className, disabled, ...inputProps } = props;
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs24(
     "label",
     {
       className: cn(
@@ -2331,8 +2818,8 @@ var Toggle = (props) => {
         disabled ? "cursor-default" : "cursor-pointer"
       ),
       children: [
-        /* @__PURE__ */ jsxs20("span", { className: "relative inline-flex items-center", children: [
-          /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsxs24("span", { className: "relative inline-flex items-center", children: [
+          /* @__PURE__ */ jsx34(
             "input",
             {
               type: "checkbox",
@@ -2341,7 +2828,7 @@ var Toggle = (props) => {
               ...inputProps
             }
           ),
-          /* @__PURE__ */ jsx28(
+          /* @__PURE__ */ jsx34(
             "span",
             {
               className: cn(
@@ -2381,7 +2868,7 @@ var Toggle = (props) => {
                 "peer-disabled:[&>.knob]:peer-checked:bg-(--background-primary-hover)",
                 className
               ),
-              children: /* @__PURE__ */ jsx28(
+              children: /* @__PURE__ */ jsx34(
                 "span",
                 {
                   className: cn(
@@ -2393,7 +2880,7 @@ var Toggle = (props) => {
             }
           )
         ] }),
-        label && /* @__PURE__ */ jsx28(
+        label && /* @__PURE__ */ jsx34(
           "span",
           {
             className: cn(
@@ -2412,7 +2899,7 @@ Toggle.displayName = "Toggle";
 
 // src/components/Inputs/WebsiteInput.tsx
 import "react";
-import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
 var WebsiteInput = (props) => {
   const {
     hierarchy = "prefix",
@@ -2448,15 +2935,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__ */ jsxs21("div", { className: baseAddonClass, children: [
-    /* @__PURE__ */ jsx29("div", { className: addonTextClass, children: protocolLabel }),
-    icon != null && /* @__PURE__ */ jsx29("span", { className: iconWrapperClass, children: icon })
+  const prefixAddon = /* @__PURE__ */ jsxs25("div", { className: baseAddonClass, children: [
+    /* @__PURE__ */ jsx35("div", { className: addonTextClass, children: protocolLabel }),
+    icon != null && /* @__PURE__ */ jsx35("span", { className: iconWrapperClass, children: icon })
   ] });
-  const suffixAddon = /* @__PURE__ */ jsxs21("div", { className: baseAddonClass, children: [
-    icon != null && /* @__PURE__ */ jsx29("span", { className: iconWrapperClass, children: icon }),
-    /* @__PURE__ */ jsx29("div", { className: addonTextClass, children: protocolLabel })
+  const suffixAddon = /* @__PURE__ */ jsxs25("div", { className: baseAddonClass, children: [
+    icon != null && /* @__PURE__ */ jsx35("span", { className: iconWrapperClass, children: icon }),
+    /* @__PURE__ */ jsx35("div", { className: addonTextClass, children: protocolLabel })
   ] });
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx35(
     TextInput,
     {
       ...rest,
@@ -2470,102 +2957,288 @@ var WebsiteInput = (props) => {
 };
 WebsiteInput.displayName = "WebsiteInput";
 
-// src/components/Logo/LogoIconExtraLarge.tsx
-import { LogoIconLIcon } from "@bubo-squared/icons";
-import { jsx as jsx30 } from "react/jsx-runtime";
-var LogoIconExtraLarge = () => {
-  return /* @__PURE__ */ jsx30("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__ */ jsx30(LogoIconLIcon, { className: "size-96" }) });
+// src/components/Feedback/Popover.tsx
+import * as React34 from "react";
+import * as PopoverPrimitive2 from "@radix-ui/react-popover";
+import { jsx as jsx36, jsxs as jsxs26 } from "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__ */ jsxs26(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx36(PopoverTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsxs26(
+      PopoverContent,
+      {
+        side,
+        align,
+        sideOffset: offset,
+        className: cn(popoverClasses, side === "top" ? "[&_span]:bottom-1! " : "", className),
+        children: [
+          showArrow && /* @__PURE__ */ jsx36(
+            PopoverArrow,
+            {
+              style: { filter: arrowShadowClass(side) }
+            }
+          ),
+          /* @__PURE__ */ jsxs26("div", { className: "grid gap-4", children: [
+            /* @__PURE__ */ jsxs26("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx36("span", { className: "caption text-secondary", style: { marginBottom: 0 }, children: strapline }),
+              /* @__PURE__ */ jsx36("h4", { className: "subtitle-medium text-primary", style: { marginBottom: 0 }, children: title }),
+              /* @__PURE__ */ jsx36("p", { className: "paragraph-s text-primary", style: { marginBottom: 0 }, children: description })
+            ] }),
+            /* @__PURE__ */ jsxs26("div", { className: "flex justify-start items-center gap-4", children: [
+              /* @__PURE__ */ jsx36(Button, { size: "sm", variant: "secondary", onClick: handleCancel, children: cancelText || "Cancel" }),
+              /* @__PURE__ */ jsx36(Button, { size: "sm", variant: "primary", onClick: handleOk, children: okText || "Ok" })
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
 };
-var LogoIconExtraLarge_default = LogoIconExtraLarge;
+Popover2.displayName = "Popover";
 
-// src/components/Logo/LogoIconExtraSmall.tsx
-import { LogoIconMIcon } from "@bubo-squared/icons";
-import { jsx as jsx31 } from "react/jsx-runtime";
-var LogoIconExtraSmall = () => {
-  return /* @__PURE__ */ jsx31("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__ */ jsx31(LogoIconMIcon, { className: "size-6" }) });
-};
-var LogoIconExtraSmall_default = LogoIconExtraSmall;
+// src/components/Navigation/Breadcrumb.tsx
+import * as React35 from "react";
+import { Slot as Slot8 } from "@radix-ui/react-slot";
+import { cva as cva19 } from "class-variance-authority";
+import { ChevronRightIcon } from "@bubo-squared/icons";
+import { jsx as jsx37, jsxs as jsxs27 } from "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 = cva19(
+  "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 = cva19(
+  "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 ? Slot8 : "button";
+  const content = showText ? children ?? label : null;
+  return /* @__PURE__ */ jsxs27(
+    Comp,
+    {
+      type: asChild ? void 0 : "button",
+      className: cn(breadcrumbBase, className),
+      ref,
+      ...rest,
+      children: [
+        showIcon && /* @__PURE__ */ jsx37("span", { className: cn(breadcrumbIconVariants({ variant })), children: icon ?? /* @__PURE__ */ jsx37(ChevronRightIcon, {}) }),
+        content && /* @__PURE__ */ jsx37("span", { className: cn(breadcrumbTextVariants({ variant })), children: content })
+      ]
+    }
+  );
+});
+Breadcrumb.displayName = "Breadcrumb";
 
-// src/components/Logo/LogoIconLarge.tsx
-import { LogoIconMIcon as LogoIconMIcon2 } from "@bubo-squared/icons";
-import { jsx as jsx32 } from "react/jsx-runtime";
-var LogoIconLarge = () => {
-  return /* @__PURE__ */ jsx32("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__ */ jsx32(LogoIconMIcon2, { className: "size-44" }) });
-};
-var LogoIconLarge_default = LogoIconLarge;
+// src/components/Logo/LogoIcon.tsx
+import { cva as cva20 } from "class-variance-authority";
 
-// src/components/Logo/LogoIconMedium.tsx
-import { LogoIconMIcon as LogoIconMIcon3 } from "@bubo-squared/icons";
-import { jsx as jsx33 } from "react/jsx-runtime";
-var LogoIconMedium = () => {
-  return /* @__PURE__ */ jsx33("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__ */ jsx33(LogoIconMIcon3, { className: "size-24" }) });
-};
-var LogoIconMedium_default = LogoIconMedium;
+// src/components/Logo/assets/logo-icon.svg?react
+var logo_icon_default = "./logo-icon-575VOQEY.svg?react";
 
-// src/components/Logo/LogoIconSmall.tsx
-import { LogoIconMIcon as LogoIconMIcon4 } from "@bubo-squared/icons";
-import { jsx as jsx34 } from "react/jsx-runtime";
-var LogoIconSmall = () => {
-  return /* @__PURE__ */ jsx34("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__ */ jsx34(LogoIconMIcon4, { className: "size-10" }) });
+// src/components/Logo/LogoIcon.tsx
+import { jsx as jsx38 } from "react/jsx-runtime";
+var logoIconVariants = cva20(
+  "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 LogoIconSmall_default = LogoIconSmall;
-
-// src/components/Logo/LogoInline.tsx
-import { LogoIconMIcon as LogoIconMIcon5, LogoTextMIcon } from "@bubo-squared/icons";
-import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
-var LogoInline = () => {
-  return /* @__PURE__ */ jsxs22("div", { className: "w-44 h-12 inline-flex justify-start items-center gap-4", children: [
-    /* @__PURE__ */ jsx35(LogoIconMIcon5, { className: "size-12" }),
-    /* @__PURE__ */ jsx35(LogoTextMIcon, { className: "h-8 w-[110px] text-(--text-primary)" })
-  ] });
+var LogoIcon = ({ className, size = "md" }) => {
+  return /* @__PURE__ */ jsx38("div", { className: cn(logoIconVariants({ size }), className), children: /* @__PURE__ */ jsx38(logo_icon_default, { className: logoIconSizeClass[size] }) });
 };
-var LogoInline_default = LogoInline;
 
-// src/components/Logo/LogoInlineSmall.tsx
-import { LogoIconMIcon as LogoIconMIcon6, LogoTextMIcon as LogoTextMIcon2 } from "@bubo-squared/icons";
-import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
-var LogoInline2 = () => {
-  return /* @__PURE__ */ jsxs23("div", { className: "w-32 h-9 inline-flex justify-start items-center gap-3", children: [
-    /* @__PURE__ */ jsx36(LogoIconMIcon6, { className: "size-9" }),
-    /* @__PURE__ */ jsx36(LogoTextMIcon2, { className: "h-6 w-[83px] text-(--text-primary)" })
-  ] });
-};
-var LogoInlineSmall_default = LogoInline2;
+// src/components/Logo/Logo.tsx
+import { cva as cva21 } from "class-variance-authority";
+
+// src/components/Logo/assets/logo-text.svg?react
+var logo_text_default = "./logo-text-IUSWKNLN.svg?react";
 
-// src/components/Logo/LogoMultiline.tsx
-import { LogoIconMIcon as LogoIconMIcon7, LogoTextMIcon as LogoTextMIcon3 } from "@bubo-squared/icons";
-import { jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
-var LogoMultiline = () => {
-  return /* @__PURE__ */ jsxs24("div", { className: "w-36 inline-flex flex-col justify-start items-start gap-2", children: [
-    /* @__PURE__ */ jsx37(LogoIconMIcon7, { className: "size-12" }),
-    /* @__PURE__ */ jsx37(LogoTextMIcon3, { className: "h-8 w-[111px] text-(--text-primary)" })
+// src/components/Logo/Logo.tsx
+import { jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
+var logoWrapperVariants = cva21("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 = cva21("", {
+  variants: {
+    variant: {
+      inline: "size-12",
+      inlineSmall: "size-9",
+      multiline: "size-12"
+    }
+  },
+  defaultVariants: {
+    variant: "inline"
+  }
+});
+var logoTextSizeVariants = cva21("", {
+  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__ */ jsxs28("div", { className: cn(logoWrapperVariants({ variant }), className), children: [
+    /* @__PURE__ */ jsx39(logo_icon_default, { className: logoIconSizeVariants({ variant }) }),
+    /* @__PURE__ */ jsx39(logo_text_default, { className: cn(logoTextSizeVariants({ variant }), textColorClass) })
   ] });
 };
-var LogoMultiline_default = LogoMultiline;
 export {
   Avatar,
   Badge,
   BadgeDigit,
   BadgeDot,
   BadgeStatus,
+  Breadcrumb,
   Button,
   ButtonGroup,
   Checkbox,
   Divider,
   Dropdown,
+  Field,
   IconButton,
   IconButtonGroup,
   LinkButton,
-  LogoIconExtraLarge_default as LogoIconExtraLarge,
-  LogoIconExtraSmall_default as LogoIconExtraSmall,
-  LogoIconLarge_default as LogoIconLarge,
-  LogoIconMedium_default as LogoIconMedium,
-  LogoIconSmall_default as LogoIconSmall,
-  LogoInline_default as LogoInline,
-  LogoInlineSmall_default as LogoInlineSmall,
-  LogoMultiline_default as LogoMultiline,
+  Logo,
+  LogoIcon,
   MessageButton,
   PasswordInput,
+  PhoneInput,
+  Popover2 as Popover,
   Progress,
   RadioGroup,
   SearchInput,