@bubo-squared/ui-framework 0.1.6 → 0.1.9

package/dist/index.js

@@ -63,8 +63,8 @@ var buttonTextVariants = cva("flex text-center justify-center font-normal", {
     size: {
       sm: ["text-xl", "leading-7"],
       md: ["text-2xl", "leading-8"],
-      lg: ["h-10", "text-3xl", "leading-9"],
-      xl: ["h-11", "text-4xl", "leading-10"]
+      lg: ["text-3xl", "leading-9"],
+      xl: ["text-4xl", "leading-11"]
     }
   }
 });
@@ -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,300 @@ 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" }) });
-};
-var LogoIconExtraLarge_default = LogoIconExtraLarge;
-
-// 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/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/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" }) });
+// 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 LogoIconMedium_default = LogoIconMedium;
+Popover2.displayName = "Popover";
 
-// 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" }) });
-};
-var LogoIconSmall_default = LogoIconSmall;
+// 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/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)" })
-  ] });
+// src/components/Logo/LogoIcon.tsx
+import { cva as cva20 } from "class-variance-authority";
+import { jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
+var LogoIconSvg = (props) => /* @__PURE__ */ jsxs28("svg", { width: "89", height: "88", viewBox: "0 0 89 88", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx38("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M83.7156 3.88535C78.5352 -1.29512 70.136 -1.29512 64.9555 3.88535L43.9999 24.8409L43.9995 24.8405L62.3536 6.48637C52.2379 16.5949 35.8584 16.6179 25.7142 6.55523L23.4434 4.28438C18.2629 -0.896082 9.86373 -0.89608 4.68327 4.28438C-0.497191 9.46484 -0.49719 17.864 4.68327 23.0445L6.88526 25.2465C17.0191 35.3875 17.0168 51.8235 6.87859 61.9618L25.2395 43.6008L25.2398 43.601L3.88534 64.9555C-1.29512 70.136 -1.29511 78.5351 3.88535 83.7156C9.06581 88.8961 17.465 88.8961 22.6455 83.7156L25.6458 80.7151L25.6864 80.6747C35.7981 70.6137 52.1313 70.597 62.2636 80.6248L65.7534 84.1146C70.9339 89.2951 79.3331 89.2951 84.5135 84.1146C89.694 78.9342 89.694 70.535 84.5135 65.3545L62.76 43.601L62.7602 43.6009L81.1144 61.9552C70.9806 51.8142 70.9829 35.3782 81.1211 25.24L83.7156 22.6455C88.8961 17.465 88.8961 9.06581 83.7156 3.88535Z", fill: "#1685FF" }),
+  /* @__PURE__ */ jsx38("path", { d: "M44.0667 50.4863C44.1213 50.4317 44.21 50.4317 44.2646 50.4863L48.6465 54.8682C48.6942 54.9158 48.7011 54.9907 48.663 55.0463L44.2812 61.4453C44.2256 61.5265 44.1057 61.5265 44.0501 61.4453L39.6683 55.0463C39.6302 54.9907 39.6371 54.9158 39.6848 54.8682L44.0667 50.4863Z", fill: "white" }),
+  /* @__PURE__ */ jsx38("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M44.107 45.3938C44.0536 45.289 43.9013 45.289 43.8479 45.3938C41.8622 49.293 37.8104 51.9638 33.1347 51.9638C26.4991 51.9638 21.1199 46.5846 21.1199 39.9489C21.1199 33.3133 26.4991 27.9341 33.1347 27.9341C37.8104 27.9341 41.8622 30.6049 43.8479 34.5041C43.9013 34.6089 44.0536 34.6089 44.107 34.5041C46.0926 30.6049 50.1445 27.9341 54.8201 27.9341C61.4558 27.9341 66.835 33.3133 66.835 39.9489C66.835 46.5846 61.4558 51.9638 54.8201 51.9638C50.1445 51.9638 46.0926 49.293 44.107 45.3938Z", fill: "white" }),
+  /* @__PURE__ */ jsx38("path", { d: "M60.1113 40.0006C60.1113 43.052 57.6377 45.5256 54.5863 45.5256C51.535 45.5256 49.0614 43.052 49.0614 40.0006C49.0614 36.9493 51.535 34.4757 54.5863 34.4757C57.6377 34.4757 60.1113 36.9493 60.1113 40.0006Z", fill: "#1685FF" }),
+  /* @__PURE__ */ jsx38("path", { d: "M38.8954 40.0006C38.8954 43.052 36.4218 45.5256 33.3705 45.5256C30.3192 45.5256 27.8456 43.052 27.8456 40.0006C27.8456 36.9493 30.3192 34.4757 33.3705 34.4757C36.4218 34.4757 38.8954 36.9493 38.8954 40.0006Z", fill: "#1685FF" })
+] });
+var logoIconVariants = 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 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 LogoIcon = ({ className, size = "md" }) => {
+  return /* @__PURE__ */ jsx38("div", { className: cn(logoIconVariants({ size }), className), children: /* @__PURE__ */ jsx38(LogoIconSvg, { className: logoIconSizeClass[size] }) });
 };
-var LogoInlineSmall_default = LogoInline2;
 
-// 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 { cva as cva21 } from "class-variance-authority";
+import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
+var LogoIconSvg2 = (props) => /* @__PURE__ */ jsxs29("svg", { width: "89", height: "88", viewBox: "0 0 89 88", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx39("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M83.7156 3.88535C78.5352 -1.29512 70.136 -1.29512 64.9555 3.88535L43.9999 24.8409L43.9995 24.8405L62.3536 6.48637C52.2379 16.5949 35.8584 16.6179 25.7142 6.55523L23.4434 4.28438C18.2629 -0.896082 9.86373 -0.89608 4.68327 4.28438C-0.497191 9.46484 -0.49719 17.864 4.68327 23.0445L6.88526 25.2465C17.0191 35.3875 17.0168 51.8235 6.87859 61.9618L25.2395 43.6008L25.2398 43.601L3.88534 64.9555C-1.29512 70.136 -1.29511 78.5351 3.88535 83.7156C9.06581 88.8961 17.465 88.8961 22.6455 83.7156L25.6458 80.7151L25.6864 80.6747C35.7981 70.6137 52.1313 70.597 62.2636 80.6248L65.7534 84.1146C70.9339 89.2951 79.3331 89.2951 84.5135 84.1146C89.694 78.9342 89.694 70.535 84.5135 65.3545L62.76 43.601L62.7602 43.6009L81.1144 61.9552C70.9806 51.8142 70.9829 35.3782 81.1211 25.24L83.7156 22.6455C88.8961 17.465 88.8961 9.06581 83.7156 3.88535Z", fill: "#1685FF" }),
+  /* @__PURE__ */ jsx39("path", { d: "M44.0667 50.4863C44.1213 50.4317 44.21 50.4317 44.2646 50.4863L48.6465 54.8682C48.6942 54.9158 48.7011 54.9907 48.663 55.0463L44.2812 61.4453C44.2256 61.5265 44.1057 61.5265 44.0501 61.4453L39.6683 55.0463C39.6302 54.9907 39.6371 54.9158 39.6848 54.8682L44.0667 50.4863Z", fill: "white" }),
+  /* @__PURE__ */ jsx39("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M44.107 45.3938C44.0536 45.289 43.9013 45.289 43.8479 45.3938C41.8622 49.293 37.8104 51.9638 33.1347 51.9638C26.4991 51.9638 21.1199 46.5846 21.1199 39.9489C21.1199 33.3133 26.4991 27.9341 33.1347 27.9341C37.8104 27.9341 41.8622 30.6049 43.8479 34.5041C43.9013 34.6089 44.0536 34.6089 44.107 34.5041C46.0926 30.6049 50.1445 27.9341 54.8201 27.9341C61.4558 27.9341 66.835 33.3133 66.835 39.9489C66.835 46.5846 61.4558 51.9638 54.8201 51.9638C50.1445 51.9638 46.0926 49.293 44.107 45.3938Z", fill: "white" }),
+  /* @__PURE__ */ jsx39("path", { d: "M60.1113 40.0006C60.1113 43.052 57.6377 45.5256 54.5863 45.5256C51.535 45.5256 49.0614 43.052 49.0614 40.0006C49.0614 36.9493 51.535 34.4757 54.5863 34.4757C57.6377 34.4757 60.1113 36.9493 60.1113 40.0006Z", fill: "#1685FF" }),
+  /* @__PURE__ */ jsx39("path", { d: "M38.8954 40.0006C38.8954 43.052 36.4218 45.5256 33.3705 45.5256C30.3192 45.5256 27.8456 43.052 27.8456 40.0006C27.8456 36.9493 30.3192 34.4757 33.3705 34.4757C36.4218 34.4757 38.8954 36.9493 38.8954 40.0006Z", fill: "#1685FF" })
+] });
+var LogoTextSvg = (props) => /* @__PURE__ */ jsxs29("svg", { width: "111", height: "32", viewBox: "0 0 111 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx39("path", { d: "M72.7324 20.9658C72.7324 14.4559 77.4246 9.9751 83.8922 9.9751C90.3598 9.9751 95.052 14.4559 95.052 20.9658C95.052 27.4757 90.3598 31.9565 83.8922 31.9565C77.4246 31.9565 72.7324 27.4757 72.7324 20.9658ZM77.8896 20.9658C77.8896 24.7703 80.3414 27.3489 83.8922 27.3489C87.4431 27.3489 89.8948 24.7703 89.8948 20.9658C89.8948 17.1613 87.4431 14.5827 83.8922 14.5827C80.3414 14.5827 77.8896 17.1613 77.8896 20.9658Z", fill: "currentColor" }),
+  /* @__PURE__ */ jsx39("path", { d: "M53.4056 31.4503H48.6289V0H53.7861V13.6116C55.1388 11.2866 57.9287 9.89163 61.0991 9.89163C67.0595 9.89163 70.6949 14.5415 70.6949 21.136C70.6949 27.5613 66.7636 31.9998 60.761 31.9998C57.6328 31.9998 54.9697 30.6049 53.7438 28.1954L53.4056 31.4503ZM53.8284 20.9246C53.8284 24.6868 56.1533 27.2654 59.7042 27.2654C63.3395 27.2654 65.4954 24.6445 65.4954 20.9246C65.4954 17.2047 63.3395 14.5415 59.7042 14.5415C56.1533 14.5415 53.8284 17.1624 53.8284 20.9246Z", fill: "currentColor" }),
+  /* @__PURE__ */ jsx39("path", { d: "M38.9929 10.5681H44.15V31.4504H39.3733L38.9929 28.6605C37.7247 30.6473 35.0193 32 32.2293 32C27.4103 32 24.5781 28.745 24.5781 23.6301V10.5681H29.7353V21.8124C29.7353 25.786 31.2994 27.3923 34.1739 27.3923C37.4288 27.3923 38.9929 25.4901 38.9929 21.5165V10.5681Z", fill: "currentColor" }),
+  /* @__PURE__ */ jsx39("path", { d: "M4.77673 31.4503H0V0H5.15718V13.6116C6.50988 11.2866 9.29983 9.89163 12.4702 9.89163C18.4306 9.89163 22.066 14.5415 22.066 21.136C22.066 27.5613 18.1347 31.9998 12.132 31.9998C9.00392 31.9998 6.34079 30.6049 5.1149 28.1954L4.77673 31.4503ZM5.19945 20.9246C5.19945 24.6868 7.52441 27.2654 11.0752 27.2654C14.7106 27.2654 16.8665 24.6445 16.8665 20.9246C16.8665 17.2047 14.7106 14.5415 11.0752 14.5415C7.52441 14.5415 5.19945 17.1624 5.19945 20.9246Z", fill: "currentColor" }),
+  /* @__PURE__ */ jsx39("path", { d: "M103.555 0.5C107.084 0.5 109.944 3.36029 109.944 6.88867C109.944 10.4172 107.084 13.2773 103.555 13.2773C100.027 13.2772 97.1667 10.4171 97.1667 6.88867C97.1669 3.36036 100.027 0.500118 103.555 0.5Z", stroke: "currentColor" }),
+  /* @__PURE__ */ jsx39("path", { d: "M105.778 9.98355L101.687 10.0001V9.00978L103.578 7.33457C104.19 6.79817 104.445 6.41856 104.445 5.91517C104.445 5.29625 104.159 4.96616 103.647 4.96616C103.113 4.96616 102.803 5.35402 102.803 6.03896H101.556C101.556 4.66908 102.377 3.77783 103.64 3.77783C104.949 3.77783 105.731 4.52879 105.731 5.83265C105.731 6.66613 105.259 7.34282 104.546 7.97825L103.686 8.74571H105.778V9.98355Z", fill: "currentColor" })
+] });
+var logoWrapperVariants = 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__ */ jsxs29("div", { className: cn(logoWrapperVariants({ variant }), className), children: [
+    /* @__PURE__ */ jsx39(LogoIconSvg2, { className: logoIconSizeVariants({ variant }) }),
+    /* @__PURE__ */ jsx39(LogoTextSvg, { 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,