npm - @bubo-squared/ui-framework - Versions diffs - 0.2.28 → 0.2.29 - Mend

@bubo-squared/ui-framework 0.2.28 → 0.2.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/index.js CHANGED Viewed

@@ -1,7 +1,6 @@
 // src/components/Buttons/Button.tsx
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva } from "class-variance-authority";
+import * as React2 from "react";
+import { cva as cva2 } from "class-variance-authority";
 // src/lib/utils.tsx
 import { clsx } from "clsx";
@@ -41,14 +40,67 @@ function spawnRipple(target, clientX, clientY, options = {}) {
   window.setTimeout(cleanup, durationMs + 50);
 }
-// src/components/Buttons/Button.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+// src/components/ui/button.tsx
+import "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var buttonVariants = cva(
-  "relative inline-flex items-center justify-center whitespace-nowrap rounded-4 transition-colors disabled:pointer-events-none overflow-hidden cursor-pointer",
+  "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 Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx2(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className,
+      ...props
+    }
+  );
+}
+// src/components/Buttons/Button.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var buttonVariants2 = cva2(
+  "relative inline-flex items-center justify-center whitespace-nowrap rounded-8 transition-colors disabled:pointer-events-none overflow-hidden cursor-pointer",
   {
     variants: {
       variant: {
         primary: [
+          // BaseButton applies some defaults, but our classes will override via cn() in BaseButton
           "btn-primary",
           "focus-ring-primary"
         ],
@@ -85,7 +137,7 @@ var buttonVariants = cva(
     }
   }
 );
-var buttonIconVariants = cva("relative", {
+var buttonIconVariants = cva2("relative", {
   variants: {
     size: {
       sm: ["size-5", "*:size-5"],
@@ -95,7 +147,7 @@ var buttonIconVariants = cva("relative", {
     }
   }
 });
-var buttonTextVariants = cva("flex text-center justify-center font-normal", {
+var buttonTextVariants = cva2("flex text-center justify-center font-normal", {
   variants: {
     size: {
       sm: ["paragraph-sm"],
@@ -105,7 +157,7 @@ var buttonTextVariants = cva("flex text-center justify-center font-normal", {
     }
   }
 });
-var Button = React.forwardRef(
+var Button2 = React2.forwardRef(
   (props, ref) => {
     const {
       className,
@@ -118,7 +170,6 @@ var Button = React.forwardRef(
       onPointerDown,
       ...rest
     } = props;
-    const Comp = asChild ? Slot : "button";
     const handlePointerDown = (e) => {
       onPointerDown?.(e);
       if (e.defaultPrevented) return;
@@ -127,27 +178,28 @@ var Button = React.forwardRef(
       spawnRipple(e.currentTarget, e.clientX, e.clientY);
     };
     return /* @__PURE__ */ jsxs(
-      Comp,
+      Button,
       {
-        className: cn(buttonVariants({ variant, size, className })),
+        asChild,
         ref,
+        className: cn(buttonVariants2({ variant, size, className })),
         onPointerDown: handlePointerDown,
         ...rest,
         children: [
-          leadingIcon && /* @__PURE__ */ jsx2("div", { className: cn(buttonIconVariants({ size })), children: leadingIcon }),
-          /* @__PURE__ */ jsx2("div", { className: cn(buttonTextVariants({ size })), children }),
-          trailingIcon && /* @__PURE__ */ jsx2("div", { className: cn(buttonIconVariants({ size })), children: trailingIcon })
+          leadingIcon && /* @__PURE__ */ jsx3("div", { className: cn(buttonIconVariants({ size })), children: leadingIcon }),
+          /* @__PURE__ */ jsx3("div", { className: cn(buttonTextVariants({ size })), children }),
+          trailingIcon && /* @__PURE__ */ jsx3("div", { className: cn(buttonIconVariants({ size })), children: trailingIcon })
         ]
       }
     );
   }
 );
-Button.displayName = "Button";
+Button2.displayName = "Button";
 // src/components/Buttons/ButtonGroup.tsx
-import { cva as cva2 } from "class-variance-authority";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var buttonGroupVariants = cva2(
+import { cva as cva3 } from "class-variance-authority";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var buttonGroupVariants = cva3(
   "flex items-center justify-center gap-4 pt-4 w-fit",
   {
     variants: {
@@ -168,7 +220,7 @@ var ButtonGroup = (props) => {
     children,
     ...rest
   } = props;
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       className: cn(buttonGroupVariants({ orientation }), className),
@@ -179,11 +231,10 @@ var ButtonGroup = (props) => {
 };
 // src/components/Buttons/IconButton.tsx
-import * as React2 from "react";
-import { Slot as Slot2 } from "@radix-ui/react-slot";
-import { cva as cva3 } from "class-variance-authority";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var iconButtonVariants = cva3(
+import * as React3 from "react";
+import { cva as cva4 } from "class-variance-authority";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var iconButtonVariants = cva4(
   "relative inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none overflow-hidden p-2 cursor-pointer",
   {
     variants: {
@@ -221,7 +272,7 @@ var iconButtonVariants = cva3(
     }
   }
 );
-var IconButton = React2.forwardRef(
+var IconButton = React3.forwardRef(
   (props, ref) => {
     const {
       className,
@@ -233,7 +284,6 @@ var IconButton = React2.forwardRef(
       onPointerDown,
       ...rest
     } = props;
-    const Comp = asChild ? Slot2 : "button";
     const handlePointerDown = (e) => {
       onPointerDown?.(e);
       if (e.defaultPrevented) return;
@@ -241,14 +291,15 @@ var IconButton = React2.forwardRef(
       if (e.button !== 0 || !e.isPrimary) return;
       spawnRipple(e.currentTarget, e.clientX, e.clientY);
     };
-    return /* @__PURE__ */ jsx4(
-      Comp,
+    return /* @__PURE__ */ jsx5(
+      Button,
       {
-        className: cn(iconButtonVariants({ variant, size }), round ? "rounded-full" : "rounded-4", className),
+        className: cn(iconButtonVariants({ variant, size }), round ? "rounded-full" : "rounded-8", className),
         ref,
+        asChild,
         onPointerDown: handlePointerDown,
         ...rest,
-        children: /* @__PURE__ */ jsx4("div", { className: "buttonIcon flex items-center justify-center", children: icon })
+        children: /* @__PURE__ */ jsx5("div", { className: "buttonIcon flex items-center justify-center", children: icon })
       }
     );
   }
@@ -257,10 +308,10 @@ IconButton.displayName = "IconButton";
 // src/components/Buttons/IconButtonGroup.tsx
 import "react";
-import { cva as cva4 } from "class-variance-authority";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { cva as cva5 } from "class-variance-authority";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var IconGroupLinesClass = "inline-flex items-center justify-center gap-0 [&>button]:outline-none! [&>button]:rounded-none [&>button:focus]:shadow-none [&>button:focus]:bg-(--border-secondary) [&>button:first-child]:rounded-l-4 [&>button:last-child]:rounded-r-4";
-var IconGroupSizeVariants = cva4("", {
+var IconGroupSizeVariants = cva5("", {
   variants: {
     size: {
       sm: "[&>button]:px-1.5",
@@ -278,7 +329,7 @@ var IconButtonGroup = (props) => {
   if (!items || items.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       className: cn(
@@ -287,7 +338,7 @@ var IconButtonGroup = (props) => {
         className
       ),
       ...rest,
-      children: items.map((item, index) => /* @__PURE__ */ jsx5(
+      children: items.map((item, index) => /* @__PURE__ */ jsx6(
         IconButton,
         {
           variant: "secondary",
@@ -311,11 +362,11 @@ var IconButtonGroup = (props) => {
 IconButtonGroup.displayName = "IconButtonGroup";
 // src/components/Buttons/LinkButton.tsx
-import * as React4 from "react";
-import { Slot as Slot3 } from "@radix-ui/react-slot";
-import { cva as cva5 } from "class-variance-authority";
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
-var linkButtonVariants = cva5(
+import * as React5 from "react";
+import { Slot as Slot2 } from "@radix-ui/react-slot";
+import { cva as cva6 } from "class-variance-authority";
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+var linkButtonVariants = cva6(
   "inline-flex items-center justify-center whitespace-nowrap rounded-4 transition-colors disabled:pointer-events-none overflow-hidden gap-2 cursor-pointer",
   {
     variants: {
@@ -337,7 +388,7 @@ var linkButtonVariants = cva5(
     }
   }
 );
-var linkButtonIconVariants = cva5("relative", {
+var linkButtonIconVariants = cva6("relative", {
   variants: {
     size: {
       sm: ["size-5", "*:size-5"],
@@ -347,7 +398,7 @@ var linkButtonIconVariants = cva5("relative", {
     }
   }
 });
-var linkButtonTextVariants = cva5("inline-flex items-center text-center font-medium", {
+var linkButtonTextVariants = cva6("inline-flex items-center text-center font-medium", {
   variants: {
     size: {
       sm: ["text-sm", "leading-5"],
@@ -357,7 +408,7 @@ var linkButtonTextVariants = cva5("inline-flex items-center text-center font-med
     }
   }
 });
-var LinkButton = React4.forwardRef(
+var LinkButton = React5.forwardRef(
   (props, ref) => {
     const {
       className,
@@ -369,7 +420,7 @@ var LinkButton = React4.forwardRef(
       leadingIcon,
       ...rest
     } = props;
-    const Comp = asChild ? Slot3 : "button";
+    const Comp = asChild ? Slot2 : "button";
     return /* @__PURE__ */ jsxs2(
       Comp,
       {
@@ -377,9 +428,9 @@ var LinkButton = React4.forwardRef(
         ref,
         ...rest,
         children: [
-          leadingIcon && /* @__PURE__ */ jsx6("div", { className: cn(linkButtonIconVariants({ size })), children: leadingIcon }),
-          /* @__PURE__ */ jsx6("div", { className: cn(linkButtonTextVariants({ size })), children }),
-          trailingIcon && /* @__PURE__ */ jsx6("div", { className: cn(linkButtonIconVariants({ size })), children: trailingIcon })
+          leadingIcon && /* @__PURE__ */ jsx7("div", { className: cn(linkButtonIconVariants({ size })), children: leadingIcon }),
+          /* @__PURE__ */ jsx7("div", { className: cn(linkButtonTextVariants({ size })), children }),
+          trailingIcon && /* @__PURE__ */ jsx7("div", { className: cn(linkButtonIconVariants({ size })), children: trailingIcon })
         ]
       }
     );
@@ -388,8 +439,8 @@ var LinkButton = React4.forwardRef(
 LinkButton.displayName = "LinkButton";
 // src/components/Buttons/MessageButton.tsx
-import * as React5 from "react";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import * as React6 from "react";
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var MessageButton = (props) => {
   const {
     onClick,
@@ -401,7 +452,7 @@ var MessageButton = (props) => {
     className = "",
     ...buttonProps
   } = props;
-  const [status, setStatus] = React5.useState("idle");
+  const [status, setStatus] = React6.useState("idle");
   const handleClick = async (_event) => {
     if (status === "loading") return;
     setStatus("loading");
@@ -427,8 +478,8 @@ var MessageButton = (props) => {
       onClick: handleClick,
       className: `inline-flex items-center justify-center rounded-4 px-1.5 py-1 gap-1 text-sm transition-colors cursor-pointer ${statusClasses} ${className}`,
       children: [
-        props.icon && /* @__PURE__ */ jsx7("div", { className: "size-5 *:size-5 relative", children: props.icon }),
-        /* @__PURE__ */ jsx7("div", { className: "text-center text-xl font-normal leading-7", children: label })
+        props.icon && /* @__PURE__ */ jsx8("div", { className: "size-5 *:size-5 relative", children: props.icon }),
+        /* @__PURE__ */ jsx8("div", { className: "text-center text-xl font-normal leading-7", children: label })
       ]
     }
   );
@@ -436,11 +487,11 @@ var MessageButton = (props) => {
 MessageButton.displayName = "MessageButton";
 // src/components/Content/Accordion.tsx
-import * as React6 from "react";
+import * as React7 from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ChevronDownIcon } from "@bubo-squared/icons";
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
-var Accordion = React6.forwardRef(
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var Accordion = React7.forwardRef(
   (props, ref) => {
     const {
       title,
@@ -458,7 +509,7 @@ var Accordion = React6.forwardRef(
       ...restRootProps
     } = rootProps;
     const resolvedDefaultValue = value === void 0 && defaultValue === void 0 && defaultOpen ? "item" : defaultValue;
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9(
       AccordionPrimitive.Root,
       {
         ref,
@@ -475,7 +526,7 @@ var Accordion = React6.forwardRef(
             value: "item",
             className: cn(bordered ? "border rounded-4" : "border-b", "border-secondary px-4"),
             children: [
-              /* @__PURE__ */ jsx8(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs4(
+              /* @__PURE__ */ jsx9(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs4(
                 AccordionPrimitive.Trigger,
                 {
                   className: cn(
@@ -485,12 +536,12 @@ var Accordion = React6.forwardRef(
                     "disabled:cursor-not-allowed disabled:text-primary-disabled cursor-pointer"
                   ),
                   children: [
-                    /* @__PURE__ */ jsx8("span", { className: "flex-1", children: title }),
-                    /* @__PURE__ */ jsx8("span", { className: "accordion-icon inline-flex shrink-0 transition-transform duration-200 [&>svg]:size-5", children: expandIcon ?? /* @__PURE__ */ jsx8(ChevronDownIcon, {}) })
+                    /* @__PURE__ */ jsx9("span", { className: "flex-1", children: title }),
+                    /* @__PURE__ */ jsx9("span", { className: "accordion-icon inline-flex shrink-0 transition-transform duration-200 [&>svg]:size-5", children: expandIcon ?? /* @__PURE__ */ jsx9(ChevronDownIcon, {}) })
                   ]
                 }
               ) }),
-              /* @__PURE__ */ jsx8(AccordionPrimitive.Content, { className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden", children: /* @__PURE__ */ jsx8("div", { className: "pb-3", children }) })
+              /* @__PURE__ */ jsx9(AccordionPrimitive.Content, { className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden", children: /* @__PURE__ */ jsx9("div", { className: "pb-3", children }) })
             ]
           }
         )
@@ -501,12 +552,12 @@ var Accordion = React6.forwardRef(
 Accordion.displayName = "Accordion";
 // src/components/Content/Avatar.tsx
-import * as React7 from "react";
-import { Slot as Slot4 } from "@radix-ui/react-slot";
-import { cva as cva6 } from "class-variance-authority";
+import * as React8 from "react";
+import { Slot as Slot3 } from "@radix-ui/react-slot";
+import { cva as cva7 } from "class-variance-authority";
 import { UserIcon } from "@bubo-squared/icons";
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
-var avatarVariants = cva6(
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+var avatarVariants = cva7(
   "relative inline-flex items-center justify-center rounded-full border-secondary border-1 bg-(--background-primary) text-primary overflow-hidden hover:border-(--focus-secondary) focus-visible:border-(--focus-primary) focus-visible:outline-none",
   {
     variants: {
@@ -525,7 +576,7 @@ var avatarVariants = cva6(
     }
   }
 );
-var avatarInitialsVariants = cva6(
+var avatarInitialsVariants = cva7(
   "flex items-center justify-center text-primary leading-none ",
   {
     variants: {
@@ -544,7 +595,7 @@ var avatarInitialsVariants = cva6(
     }
   }
 );
-var avatarIconVariants = cva6(
+var avatarIconVariants = cva7(
   "flex items-center justify-center text-(--icon-primary)",
   {
     variants: {
@@ -563,7 +614,7 @@ var avatarIconVariants = cva6(
     }
   }
 );
-var Avatar = React7.forwardRef(
+var Avatar = React8.forwardRef(
   (props, ref) => {
     const {
       asChild = false,
@@ -575,7 +626,7 @@ var Avatar = React7.forwardRef(
       className,
       ...rest
     } = props;
-    const Comp = asChild ? Slot4 : "button";
+    const Comp = asChild ? Slot3 : "button";
     const hasImage = variant === "image" && typeof src === "string" && src.length > 0;
     return /* @__PURE__ */ jsxs5(
       Comp,
@@ -584,7 +635,7 @@ var Avatar = React7.forwardRef(
         className: cn(avatarVariants({ size }), className),
         ...rest,
         children: [
-          hasImage ? /* @__PURE__ */ jsx9(
+          hasImage ? /* @__PURE__ */ jsx10(
             "img",
             {
               src,
@@ -592,8 +643,8 @@ var Avatar = React7.forwardRef(
               className: "w-full h-full object-cover"
             }
           ) : null,
-          !hasImage && variant === "initials" && /* @__PURE__ */ jsx9("span", { className: cn(avatarInitialsVariants({ size }), "relative bottom-px"), children: initials }),
-          !hasImage && variant === "icon" && /* @__PURE__ */ jsx9("span", { className: cn(avatarIconVariants({ size })), children: /* @__PURE__ */ jsx9(UserIcon, {}) })
+          !hasImage && variant === "initials" && /* @__PURE__ */ jsx10("span", { className: cn(avatarInitialsVariants({ size }), "relative bottom-px"), children: initials }),
+          !hasImage && variant === "icon" && /* @__PURE__ */ jsx10("span", { className: cn(avatarIconVariants({ size })), children: /* @__PURE__ */ jsx10(UserIcon, {}) })
         ]
       }
     );
@@ -603,7 +654,7 @@ Avatar.displayName = "Avatar";
 // src/components/Content/Typography.tsx
 import "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var mbCapableBaseClasses = /* @__PURE__ */ new Set([
   "h1-intro",
   "h2-intro",
@@ -639,7 +690,7 @@ var Typography = (props) => {
   const Comp = as ?? "span";
   const mbClassName = useMargin ? getMbClassName(variant) : null;
   const weightClassName = weight === "regular" ? null : `${variant}-${weight}`;
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     Comp,
     {
       className: cn("text-primary", variant, weightClassName, mbClassName, className),
@@ -651,11 +702,11 @@ var Typography = (props) => {
 Typography.displayName = "Typography";
 // src/components/Content/Badge.tsx
-import * as React9 from "react";
-import { Slot as Slot5 } from "@radix-ui/react-slot";
-import { cva as cva7 } from "class-variance-authority";
-import { Fragment, jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
-var badgeVariants = cva7(
+import * as React10 from "react";
+import { Slot as Slot4 } from "@radix-ui/react-slot";
+import { cva as cva8 } from "class-variance-authority";
+import { Fragment, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+var badgeVariants = cva8(
   "inline-flex items-center justify-center rounded-4 leading-none whitespace-nowrap gap-1 py-0",
   {
     variants: {
@@ -684,7 +735,7 @@ var badgeVariants = cva7(
     }
   }
 );
-var Badge = React9.forwardRef(
+var Badge = React10.forwardRef(
   (props, ref) => {
     const {
       asChild = false,
@@ -695,19 +746,19 @@ var Badge = React9.forwardRef(
       className,
       ...rest
     } = props;
-    const Comp = asChild ? Slot5 : "div";
+    const Comp = asChild ? Slot4 : "div";
     const hasValue = typeof value === "string" ? value.trim() !== "" : value != null;
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12(
       Comp,
       {
         ref,
         className: cn(badgeVariants({ size, variant }), className),
         ...rest,
         children: hasValue ? /* @__PURE__ */ jsxs6(Fragment, { children: [
-          /* @__PURE__ */ jsx11("span", { className: "font-normal", children: label }),
-          /* @__PURE__ */ jsx11("span", { className: "font-normal", children: ":" }),
-          /* @__PURE__ */ jsx11("span", { className: "font-medium", children: value })
-        ] }) : /* @__PURE__ */ jsx11("span", { className: "font-normal", children: label })
+          /* @__PURE__ */ jsx12("span", { className: "font-normal", children: label }),
+          /* @__PURE__ */ jsx12("span", { className: "font-normal", children: ":" }),
+          /* @__PURE__ */ jsx12("span", { className: "font-medium", children: value })
+        ] }) : /* @__PURE__ */ jsx12("span", { className: "font-normal", children: label })
       }
     );
   }
@@ -715,10 +766,10 @@ var Badge = React9.forwardRef(
 Badge.displayName = "Badge";
 // src/components/Content/BadgeDigit.tsx
-import * as React10 from "react";
-import { cva as cva8 } from "class-variance-authority";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var badgeDigitVariants = cva8(
+import * as React11 from "react";
+import { cva as cva9 } from "class-variance-authority";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var badgeDigitVariants = cva9(
   "inline-flex items-center justify-center leading-none whitespace-nowrap text-(--color-b-white)",
   {
     variants: {
@@ -742,7 +793,7 @@ var badgeDigitVariants = cva8(
     }
   }
 );
-var BadgeDigit = React10.forwardRef(
+var BadgeDigit = React11.forwardRef(
   (props, ref) => {
     const {
       value,
@@ -751,7 +802,7 @@ var BadgeDigit = React10.forwardRef(
       className,
       ...rest
     } = props;
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       "div",
       {
         ref,
@@ -766,9 +817,9 @@ BadgeDigit.displayName = "BadgeDigit";
 // src/components/Content/BadgeDot.tsx
 import "react";
-import { cva as cva9 } from "class-variance-authority";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var badgeDotVariants = cva9("rounded-12 size-3", {
+import { cva as cva10 } from "class-variance-authority";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var badgeDotVariants = cva10("rounded-12 size-3", {
   variants: {
     status: {
       disabled: "bg-(--color-primary)",
@@ -783,14 +834,14 @@ var badgeDotVariants = cva9("rounded-12 size-3", {
   }
 });
 var BadgeDot = ({ status, className }) => {
-  return /* @__PURE__ */ jsx13("div", { className: cn(badgeDotVariants({ status }), className) });
+  return /* @__PURE__ */ jsx14("div", { className: cn(badgeDotVariants({ status }), className) });
 };
 BadgeDot.displayName = "BadgeDot";
 // src/components/Content/BadgeStatus.tsx
-import * as React12 from "react";
-import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
-var BadgeStatus = React12.forwardRef(
+import * as React13 from "react";
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+var BadgeStatus = React13.forwardRef(
   (props, ref) => {
     const {
       label,
@@ -808,7 +859,7 @@ var BadgeStatus = React12.forwardRef(
         className: cn("inline-flex items-center gap-2", className),
         ...rest,
         children: [
-          /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx15(
             "span",
             {
               className: cn(
@@ -818,7 +869,7 @@ var BadgeStatus = React12.forwardRef(
               )
             }
           ),
-          /* @__PURE__ */ jsx14("span", { className: textClasses, children: label })
+          /* @__PURE__ */ jsx15("span", { className: textClasses, children: label })
         ]
       }
     );
@@ -829,7 +880,7 @@ BadgeStatus.displayName = "BadgeStatus";
 // src/components/Content/Divider.tsx
 import "react";
 import { TargetIcon } from "@bubo-squared/icons";
-import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 var gapBySize = {
   sm: "gap-2",
   md: "gap-3",
@@ -864,14 +915,14 @@ var Divider = (props) => {
       className: _className,
       ...divProps
     } = props;
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx16(
       "div",
       {
         className: wrapperClass,
         role: "separator",
         "aria-orientation": ariaOrientation,
         ...divProps,
-        children: /* @__PURE__ */ jsx15("div", { className: lineClass })
+        children: /* @__PURE__ */ jsx16("div", { className: lineClass })
       }
     );
   }
@@ -893,8 +944,8 @@ var Divider = (props) => {
         "aria-orientation": ariaOrientation,
         ...divProps,
         children: [
-          /* @__PURE__ */ jsx15("div", { className: lineClass }),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16("div", { className: lineClass }),
+          /* @__PURE__ */ jsx16(
             "span",
             {
               className: cn(
@@ -904,7 +955,7 @@ var Divider = (props) => {
               children: textLabel
             }
           ),
-          /* @__PURE__ */ jsx15("div", { className: lineClass })
+          /* @__PURE__ */ jsx16("div", { className: lineClass })
         ]
       }
     );
@@ -929,18 +980,18 @@ var Divider = (props) => {
         "aria-orientation": ariaOrientation,
         ...divProps,
         children: [
-          /* @__PURE__ */ jsx15("div", { className: lineClass }),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16("div", { className: lineClass }),
+          /* @__PURE__ */ jsx16(
             IconButton,
             {
               variant: iconButtonVariant ?? "secondary",
               size: resolvedSize,
               "aria-label": ariaLabel ?? "More options",
-              icon: icon ?? /* @__PURE__ */ jsx15(TargetIcon, {}),
+              icon: icon ?? /* @__PURE__ */ jsx16(TargetIcon, {}),
               onClick: onIconClick
             }
           ),
-          /* @__PURE__ */ jsx15("div", { className: lineClass })
+          /* @__PURE__ */ jsx16("div", { className: lineClass })
         ]
       }
     );
@@ -962,8 +1013,8 @@ var Divider = (props) => {
         "aria-orientation": ariaOrientation,
         ...divProps,
         children: [
-          /* @__PURE__ */ jsx15("div", { className: lineClass }),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16("div", { className: lineClass }),
+          /* @__PURE__ */ jsx16(
             IconButtonGroup,
             {
               className: resolvedOrientation === "vertical" ? "flex-col" : "flex-row",
@@ -971,7 +1022,7 @@ var Divider = (props) => {
               size: resolvedSize
             }
           ),
-          /* @__PURE__ */ jsx15("div", { className: lineClass })
+          /* @__PURE__ */ jsx16("div", { className: lineClass })
         ]
       }
     );
@@ -995,9 +1046,9 @@ var Divider = (props) => {
         "aria-orientation": ariaOrientation,
         ...divProps,
         children: [
-          /* @__PURE__ */ jsx15("div", { className: lineClass }),
-          /* @__PURE__ */ jsx15(
-            Button,
+          /* @__PURE__ */ jsx16("div", { className: lineClass }),
+          /* @__PURE__ */ jsx16(
+            Button2,
             {
               variant: buttonVariant ?? "secondary",
               size: resolvedSize,
@@ -1005,7 +1056,7 @@ var Divider = (props) => {
               children: buttonLabel
             }
           ),
-          /* @__PURE__ */ jsx15("div", { className: lineClass })
+          /* @__PURE__ */ jsx16("div", { className: lineClass })
         ]
       }
     );
@@ -1015,11 +1066,11 @@ var Divider = (props) => {
 Divider.displayName = "Divider";
 // src/components/Content/Progress.tsx
-import * as React15 from "react";
+import * as React16 from "react";
 // src/components/Inputs/Field.tsx
-import * as React14 from "react";
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import * as React15 from "react";
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 var fieldBase = "flex flex-col gap-2 items-start";
 var Field = (props) => {
   const {
@@ -1034,18 +1085,18 @@ var Field = (props) => {
   } = props;
   const hasLabel = label != null;
   const hasHint = hint != null;
-  const fieldId = React14.useId();
+  const fieldId = React15.useId();
   const labelId = hasLabel ? `${fieldId}-label` : void 0;
   const hintId = hasHint ? `${fieldId}-hint` : void 0;
   const hintColorClass = disabled ? "text-primary-disabled" : status === "success" ? "text-(--color-success)" : status === "error" ? "text-(--color-error)" : "text-(--color-secondary)";
   const labelColorClass = disabled ? "text-primary-disabled" : "text-primary";
   return /* @__PURE__ */ jsxs9("div", { className: cn(fieldBase, className), children: [
     hasLabel && /* @__PURE__ */ jsxs9("div", { className: "flex w-full items-center justify-between", children: [
-      /* @__PURE__ */ jsx16("label", { id: labelId, className: cn("paragraph-sm", labelColorClass), children: label }),
+      /* @__PURE__ */ jsx17("label", { id: labelId, className: cn("paragraph-sm", labelColorClass), children: label }),
       labelRight
     ] }),
-    /* @__PURE__ */ jsx16("div", { className: "relative w-full", children }),
-    !hideHint && /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx17("div", { className: "relative w-full", children }),
+    !hideHint && /* @__PURE__ */ jsx17(
       "p",
       {
         id: hasHint ? hintId : void 0,
@@ -1058,13 +1109,13 @@ var Field = (props) => {
 Field.displayName = "Field";
 // src/components/Content/Progress.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var sizeToBarClasses = {
   lg: "h-4 rounded-16",
   md: "h-2 rounded-8",
   sm: "h-1 rounded-4"
 };
-var Progress = React15.forwardRef(
+var Progress = React16.forwardRef(
   (props, ref) => {
     const {
       value,
@@ -1084,17 +1135,17 @@ var Progress = React15.forwardRef(
     const percentageLabel = `${Math.round(clamped)}%`;
     const resolvedAriaLabel = ariaLabel ?? (typeof label === "string" ? label : void 0);
     const barHeightClasses = sizeToBarClasses[size];
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx18(
       Field,
       {
         label,
-        labelRight: !hideProgressLabel && label != null ? /* @__PURE__ */ jsx17("span", { className: "footnote text-(--color-secondary)", children: percentageLabel }) : void 0,
+        labelRight: !hideProgressLabel && label != null ? /* @__PURE__ */ jsx18("span", { className: "footnote text-(--color-secondary)", children: percentageLabel }) : void 0,
         hint,
         hideHint,
         status,
         disabled,
         className: cn("w-full", className),
-        children: /* @__PURE__ */ jsx17(
+        children: /* @__PURE__ */ jsx18(
           "div",
           {
             ref,
@@ -1104,7 +1155,7 @@ var Progress = React15.forwardRef(
             "aria-valuemax": 100,
             "aria-label": resolvedAriaLabel,
             ...rest,
-            children: /* @__PURE__ */ jsx17(
+            children: /* @__PURE__ */ jsx18(
               "div",
               {
                 className: cn(
@@ -1112,7 +1163,7 @@ var Progress = React15.forwardRef(
                   barHeightClasses,
                   disabled && "opacity-50"
                 ),
-                children: /* @__PURE__ */ jsx17(
+                children: /* @__PURE__ */ jsx18(
                   "div",
                   {
                     className: cn(
@@ -1134,8 +1185,8 @@ var Progress = React15.forwardRef(
 Progress.displayName = "Progress";
 // src/components/Content/StatusAvatar.tsx
-import * as React16 from "react";
-import { cva as cva10 } from "class-variance-authority";
+import * as React17 from "react";
+import { cva as cva11 } from "class-variance-authority";
 import {
   BookmarkCheckIcon,
   CheckIcon,
@@ -1143,8 +1194,8 @@ import {
   PlusIcon,
   StarIcon
 } from "@bubo-squared/icons";
-import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
-var iconStatusVariants = cva10(
+import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+var iconStatusVariants = cva11(
   "inline-flex size-5 items-center justify-center rounded-full border-1 border-(--color-primary-inverse) p-1",
   {
     variants: {
@@ -1168,11 +1219,11 @@ var presenceDotByVariant = {
   away: "bg-(--background-warning) border-1 border-(--color-primary-inverse)",
   busy: "bg-(--background-error) border-1 border-(--color-primary-inverse)"
 };
-var StatusAvatar = React16.forwardRef((props, ref) => {
+var StatusAvatar = React17.forwardRef((props, ref) => {
   const { variant = "verified", className, ...rest } = props;
   if (variant === "offline" || variant === "online" || variant === "away" || variant === "busy") {
     const dotClasses = presenceDotByVariant[variant];
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx19(
       "div",
       {
         ref,
@@ -1181,7 +1232,7 @@ var StatusAvatar = React16.forwardRef((props, ref) => {
           className
         ),
         ...rest,
-        children: /* @__PURE__ */ jsx18("div", { className: cn(dotClasses, "size-3.5 rounded-full") })
+        children: /* @__PURE__ */ jsx19("div", { className: cn(dotClasses, "size-3.5 rounded-full") })
       }
     );
   }
@@ -1193,11 +1244,11 @@ var StatusAvatar = React16.forwardRef((props, ref) => {
       className: cn(iconStatusVariants({ variant: iconVariant }), className),
       ...rest,
       children: [
-        iconVariant === "verified" && /* @__PURE__ */ jsx18(CheckIcon, { className: "size-3 text-button-white" }),
-        iconVariant === "bookmark" && /* @__PURE__ */ jsx18(BookmarkCheckIcon, { className: "size-3 text-button-white" }),
-        iconVariant === "favorite" && /* @__PURE__ */ jsx18(StarIcon, { className: "size-3 text-button-white" }),
-        iconVariant === "add" && /* @__PURE__ */ jsx18(PlusIcon, { className: "size-3 text-button-white" }),
-        iconVariant === "remove" && /* @__PURE__ */ jsx18(CrossIcon, { className: "size-3 text-button-white" })
+        iconVariant === "verified" && /* @__PURE__ */ jsx19(CheckIcon, { className: "size-3 text-button-white" }),
+        iconVariant === "bookmark" && /* @__PURE__ */ jsx19(BookmarkCheckIcon, { className: "size-3 text-button-white" }),
+        iconVariant === "favorite" && /* @__PURE__ */ jsx19(StarIcon, { className: "size-3 text-button-white" }),
+        iconVariant === "add" && /* @__PURE__ */ jsx19(PlusIcon, { className: "size-3 text-button-white" }),
+        iconVariant === "remove" && /* @__PURE__ */ jsx19(CrossIcon, { className: "size-3 text-button-white" })
       ]
     }
   );
@@ -1205,11 +1256,11 @@ var StatusAvatar = React16.forwardRef((props, ref) => {
 StatusAvatar.displayName = "StatusAvatar";
 // src/components/Content/Tag.tsx
-import * as React17 from "react";
-import { Slot as Slot6 } from "@radix-ui/react-slot";
-import { cva as cva11 } from "class-variance-authority";
-import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
-var tagVariants = cva11(
+import * as React18 from "react";
+import { Slot as Slot5 } from "@radix-ui/react-slot";
+import { cva as cva12 } from "class-variance-authority";
+import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+var tagVariants = cva12(
   "inline-flex flex-row items-center justify-center rounded-6 gap-2 px-3 overflow-hidden border-1 border-secondary bg-(--background-neutral) focus:border-brand focus-ring-primary ",
   {
     variants: {
@@ -1225,7 +1276,7 @@ var tagVariants = cva11(
 );
 var disabledTag = "pointer-events-none border-secondary-disabled bg-(--background-neutral-disabled) text-primary-disabled";
 var iconClasses = "flex items-center justify-center w-5 h-5 [&>*]:w-5 [&>*]:h-5 shrink-0 text-primary";
-var Tag = React17.forwardRef(
+var Tag = React18.forwardRef(
   (props, ref) => {
     const {
       size = "sm",
@@ -1237,9 +1288,9 @@ var Tag = React17.forwardRef(
       ...rest
     } = props;
     const hasValue = typeof value === "string" ? value.trim() !== "" : value != null;
-    const Comp = asChild ? Slot6 : "div";
-    const leading = props.leadingIcon && React17.isValidElement(props.leadingIcon) ? React17.cloneElement(props.leadingIcon, { disabled, ...props.leadingIcon.props }) : null;
-    const trailing = props.trailingIcon && React17.isValidElement(props.trailingIcon) ? React17.cloneElement(props.trailingIcon, { disabled, ...props.trailingIcon.props }) : null;
+    const Comp = asChild ? Slot5 : "div";
+    const leading = props.leadingIcon && React18.isValidElement(props.leadingIcon) ? React18.cloneElement(props.leadingIcon, { disabled, ...props.leadingIcon.props }) : null;
+    const trailing = props.trailingIcon && React18.isValidElement(props.trailingIcon) ? React18.cloneElement(props.trailingIcon, { disabled, ...props.trailingIcon.props }) : null;
     return /* @__PURE__ */ jsxs11(
       Comp,
       {
@@ -1247,13 +1298,13 @@ var Tag = React17.forwardRef(
         ref,
         ...rest,
         children: [
-          leading && /* @__PURE__ */ jsx19("div", { className: iconClasses, children: leading }),
+          leading && /* @__PURE__ */ jsx20("div", { className: iconClasses, children: leading }),
           hasValue ? /* @__PURE__ */ jsxs11("div", { className: "flex flex-row gap-1 items-center", children: [
-            /* @__PURE__ */ jsx19("span", { className: "text-primary paragraph-lg mb-0! cursor-default font-normal", children: label }),
-            /* @__PURE__ */ jsx19("span", { className: "text-primary paragraph-lg mb-0! cursor-default font-normal", children: ":" }),
-            /* @__PURE__ */ jsx19("span", { className: "text-primary paragraph-lg-medium mb-0! cursor-default font-medium", children: value })
-          ] }) : /* @__PURE__ */ jsx19("span", { className: "text-primary paragraph-lg mb-0! cursor-default", children: label }),
-          trailing && /* @__PURE__ */ jsx19("div", { className: iconClasses, children: trailing })
+            /* @__PURE__ */ jsx20("span", { className: "text-primary paragraph-lg mb-0! cursor-default font-normal", children: label }),
+            /* @__PURE__ */ jsx20("span", { className: "text-primary paragraph-lg mb-0! cursor-default font-normal", children: ":" }),
+            /* @__PURE__ */ jsx20("span", { className: "text-primary paragraph-lg-medium mb-0! cursor-default font-medium", children: value })
+          ] }) : /* @__PURE__ */ jsx20("span", { className: "text-primary paragraph-lg mb-0! cursor-default", children: label }),
+          trailing && /* @__PURE__ */ jsx20("div", { className: iconClasses, children: trailing })
         ]
       }
     );
@@ -1264,15 +1315,15 @@ var Tag = React17.forwardRef(
 import "react";
 // src/components/ui/dropdown-menu.tsx
-import * as React18 from "react";
+import * as React19 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { ChevronRightIcon } from "@bubo-squared/icons";
 // src/components/ui/dropdown-styles.ts
-import { cva as cva12 } from "class-variance-authority";
+import { cva as cva13 } from "class-variance-authority";
 var dropdownSurfaceClass = "z-50 rounded-4 border border-secondary-hover bg-(--background-neutral) shadow-card-md";
 var dropdownScrollClass = "max-h-79 overflow-y-auto dropdown-scrollbar";
-var dropdownRowVariants = cva12(
+var dropdownRowVariants = cva13(
   "flex w-full items-center gap-2 pl-(--space-8) pr-(--space-16) text-left text-primary cursor-pointer hover:bg-(--background-secondary)",
   {
     variants: {
@@ -1293,26 +1344,26 @@ var dropdownRowVariants = cva12(
 );
 // src/components/ui/dropdown-menu.tsx
-import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
-var DropdownMenuSizeContext = React18.createContext("lg");
+import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+var DropdownMenuSizeContext = React19.createContext("lg");
 function useDropdownMenuSize(explicitSize) {
-  const contextSize = React18.useContext(DropdownMenuSizeContext);
+  const contextSize = React19.useContext(DropdownMenuSizeContext);
   return explicitSize ?? contextSize;
 }
 function DropdownMenu({
   ...props
 }) {
-  return /* @__PURE__ */ jsx20(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+  return /* @__PURE__ */ jsx21(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
 }
 function DropdownMenuPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx20(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+  return /* @__PURE__ */ jsx21(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
 }
 function DropdownMenuTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     DropdownMenuPrimitive.Trigger,
     {
       "data-slot": "dropdown-menu-trigger",
@@ -1326,7 +1377,7 @@ function DropdownMenuContent({
   size = "lg",
   ...props
 }) {
-  return /* @__PURE__ */ jsx20(DropdownMenuSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx20(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(DropdownMenuSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx21(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx21(
     DropdownMenuPrimitive.Content,
     {
       "data-slot": "dropdown-menu-content",
@@ -1344,7 +1395,7 @@ function DropdownMenuContent({
 function DropdownMenuGroup({
   ...props
 }) {
-  return /* @__PURE__ */ jsx20(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
+  return /* @__PURE__ */ jsx21(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
 }
 function DropdownMenuItem({
   className,
@@ -1354,7 +1405,7 @@ function DropdownMenuItem({
   ...props
 }) {
   const resolvedSize = useDropdownMenuSize(size);
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     DropdownMenuPrimitive.Item,
     {
       "data-slot": "dropdown-menu-item",
@@ -1379,7 +1430,7 @@ function DropdownMenuLabel({
   ...props
 }) {
   const resolvedSize = useDropdownMenuSize(size);
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     DropdownMenuPrimitive.Label,
     {
       "data-slot": "dropdown-menu-label",
@@ -1397,7 +1448,7 @@ function DropdownMenuSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     DropdownMenuPrimitive.Separator,
     {
       "data-slot": "dropdown-menu-separator",
@@ -1410,7 +1461,7 @@ function DropdownMenuShortcut({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "span",
     {
       "data-slot": "dropdown-menu-shortcut",
@@ -1425,7 +1476,7 @@ function DropdownMenuShortcut({
 function DropdownMenuSub({
   ...props
 }) {
-  return /* @__PURE__ */ jsx20(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+  return /* @__PURE__ */ jsx21(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
 }
 function DropdownMenuSubTrigger({
   className,
@@ -1451,7 +1502,7 @@ function DropdownMenuSubTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx20(ChevronRightIcon, { className: "ml-auto size-4 text-(--icon-primary)" })
+        /* @__PURE__ */ jsx21(ChevronRightIcon, { className: "ml-auto size-4 text-(--icon-primary)" })
       ]
     }
   );
@@ -1462,7 +1513,7 @@ function DropdownMenuSubContent({
   ...props
 }) {
   const resolvedSize = useDropdownMenuSize(size);
-  return /* @__PURE__ */ jsx20(DropdownMenuSizeContext.Provider, { value: resolvedSize, children: /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(DropdownMenuSizeContext.Provider, { value: resolvedSize, children: /* @__PURE__ */ jsx21(
     DropdownMenuPrimitive.SubContent,
     {
       "data-slot": "dropdown-menu-sub-content",
@@ -1478,7 +1529,7 @@ function DropdownMenuSubContent({
 }
 // src/components/Content/Menu.tsx
-import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
 var Menu = (props) => {
   const {
     trigger,
@@ -1493,8 +1544,8 @@ var Menu = (props) => {
     modal
   } = props;
   return /* @__PURE__ */ jsxs13(DropdownMenu, { open, onOpenChange, modal, children: [
-    /* @__PURE__ */ jsx21(DropdownMenuTrigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22(DropdownMenuTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx22(
       DropdownMenuContent,
       {
         align,
@@ -1519,19 +1570,19 @@ var MenuSubContent = DropdownMenuSubContent;
 var MenuSubTrigger = DropdownMenuSubTrigger;
 // src/components/Inputs/Checkbox.tsx
-import * as React20 from "react";
+import * as React21 from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { CheckIcon as CheckIcon2 } from "@bubo-squared/icons";
 import { MinusIcon } from "@bubo-squared/icons";
-import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
-var Checkbox = React20.forwardRef(({ label, className, ...props }, forwardedRef) => {
+import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+var Checkbox = React21.forwardRef(({ label, className, ...props }, forwardedRef) => {
   return /* @__PURE__ */ jsxs14("label", { className: "inline-flex items-center gap-(--space-12) cursor-pointer select-none", children: [
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx23(
       CheckboxPrimitive.Root,
       {
         ref: forwardedRef,
         className: cn(
-          "group flex h-5 w-5 items-center justify-center rounded-2 border border-secondary bg-(--background-neutral) text-primary-inverse",
+          "group flex h-5 w-5 items-center justify-center rounded-4 border border-secondary bg-(--background-neutral) text-primary-inverse",
           "data-[state=checked]:bg-(--background-brand) data-[state=checked]:text-button-white data-[state=checked]:border-none",
           "data-[state=indeterminate]:bg-(--background-brand) data-[state=indeterminate]:text-button-white data-[state=indeterminate]:border-none",
           "data-[state=checked]:hover:bg-(--background-brand-hover) data-[state=indeterminate]:hover:bg-(--background-brand-hover)",
@@ -1544,26 +1595,26 @@ var Checkbox = React20.forwardRef(({ label, className, ...props }, forwardedRef)
         ),
         ...props,
         children: /* @__PURE__ */ jsxs14(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: [
-          /* @__PURE__ */ jsx22(CheckIcon2, { className: "h-5 w-5 hidden group-data-[state=checked]:block" }),
-          /* @__PURE__ */ jsx22(MinusIcon, { className: "h-5 w-5 hidden group-data-[state=indeterminate]:block" })
+          /* @__PURE__ */ jsx23(CheckIcon2, { className: "h-5 w-5 hidden group-data-[state=checked]:block" }),
+          /* @__PURE__ */ jsx23(MinusIcon, { className: "h-5 w-5 hidden group-data-[state=indeterminate]:block" })
         ] })
       }
     ),
-    label && /* @__PURE__ */ jsx22("span", { className: "paragraph-md-medium text-primary", children: label })
+    label && /* @__PURE__ */ jsx23("span", { className: "paragraph-md-medium text-primary", children: label })
   ] });
 });
 Checkbox.displayName = "Checkbox";
 // src/components/Inputs/Autocomplete.tsx
-import * as React23 from "react";
-import { cva as cva14 } from "class-variance-authority";
+import * as React24 from "react";
+import { cva as cva15 } from "class-variance-authority";
 // src/components/Inputs/InputShell.tsx
-import * as React21 from "react";
-import { cva as cva13 } from "class-variance-authority";
-import { jsx as jsx23 } from "react/jsx-runtime";
-var inputShellVariants = cva13(
-  "group flex w-full items-center rounded-4 border bg-(--background-primary) text-left cursor-text border-secondary",
+import * as React22 from "react";
+import { cva as cva14 } from "class-variance-authority";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var inputShellVariants = cva14(
+  "group flex w-full items-center rounded-8 border bg-(--background-primary) text-left cursor-text border-secondary",
   {
     variants: {
       size: {
@@ -1587,9 +1638,9 @@ var inputShellVariants = cva13(
     }
   }
 );
-var InputShell = React21.forwardRef(
+var InputShell = React22.forwardRef(
   ({ size = "md", status, disabled, className, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx23(
+    return /* @__PURE__ */ jsx24(
       "div",
       {
         ref,
@@ -1606,14 +1657,14 @@ var InputShell = React21.forwardRef(
 InputShell.displayName = "InputShell";
 // src/components/ui/input.tsx
-import * as React22 from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
-var Input = React22.forwardRef(
+import * as React23 from "react";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var Input = React23.forwardRef(
   ({ className, type, variant = "default", ...props }, ref) => {
     const base = "text-primary placeholder:text-(--color-secondary) disabled:text-primary-disabled disabled:placeholder:text-primary-disabled selection:bg-primary selection:text-primary-foreground file:text-foreground";
     const defaultStyles = "dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 shadow-xs transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:border-ring focus-visible:ring-0 focus-visible:shadow-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive";
     const bareStyles = "bg-transparent outline-none w-full";
-    return /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx25(
       "input",
       {
         ref,
@@ -1632,8 +1683,8 @@ var Input = React22.forwardRef(
 Input.displayName = "Input";
 // src/components/Inputs/Autocomplete.tsx
-import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
-var inputTextVariants = cva14("truncate", {
+import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+var inputTextVariants = cva15("truncate", {
   variants: {
     size: {
       sm: "paragraph-md",
@@ -1646,7 +1697,7 @@ var inputTextVariants = cva14("truncate", {
     size: "lg"
   }
 });
-var optionVariants = cva14(
+var optionVariants = cva15(
   "w-full text-left hover:bg-(--background-secondary)",
   {
     variants: {
@@ -1666,7 +1717,7 @@ var optionVariants = cva14(
     }
   }
 );
-var iconWrapperVariants = cva14(
+var iconWrapperVariants = cva15(
   "flex items-center justify-center shrink-0 text-(--icon-primary)",
   {
     variants: {
@@ -1685,7 +1736,7 @@ var iconWrapperVariants = cva14(
     }
   }
 );
-var Autocomplete = React23.forwardRef((props, forwardedRef) => {
+var Autocomplete = React24.forwardRef((props, forwardedRef) => {
   const {
     label,
     hint,
@@ -1717,17 +1768,17 @@ var Autocomplete = React23.forwardRef((props, forwardedRef) => {
     ...inputProps
   } = props;
   const isValueControlled = value !== void 0;
-  const [internalValue, setInternalValue] = React23.useState(
+  const [internalValue, setInternalValue] = React24.useState(
     defaultValue ?? ""
   );
   const isInputControlled = inputValue !== void 0;
-  const [internalInputValue, setInternalInputValue] = React23.useState(
+  const [internalInputValue, setInternalInputValue] = React24.useState(
     defaultInputValue ?? ""
   );
-  const [isFocused, setIsFocused] = React23.useState(false);
-  const [activeIndex, setActiveIndex] = React23.useState(-1);
-  const inputRef = React23.useRef(null);
-  const setInputRef = React23.useCallback(
+  const [isFocused, setIsFocused] = React24.useState(false);
+  const [activeIndex, setActiveIndex] = React24.useState(-1);
+  const inputRef = React24.useRef(null);
+  const setInputRef = React24.useCallback(
     (node) => {
       inputRef.current = node;
       if (!forwardedRef) return;
@@ -1739,12 +1790,12 @@ var Autocomplete = React23.forwardRef((props, forwardedRef) => {
     },
     [forwardedRef]
   );
-  const baseId = React23.useId();
+  const baseId = React24.useId();
   const inputId = id ?? baseId;
   const listboxId = `${inputId}-listbox`;
   const currentValue = (isValueControlled ? value : internalValue) ?? "";
   const currentInput = (isInputControlled ? inputValue : internalInputValue) ?? "";
-  React23.useEffect(() => {
+  React24.useEffect(() => {
     if (isFocused) return;
     if (isInputControlled) return;
     if (!isValueControlled) return;
@@ -1863,7 +1914,7 @@ var Autocomplete = React23.forwardRef((props, forwardedRef) => {
   const activeDescendantId = activeIndex >= 0 ? `${inputId}-option-${activeIndex}` : void 0;
   const showLeadingIcon = !!leadingIcon;
   const showTrailingIcon = !!trailingIcon;
-  return /* @__PURE__ */ jsx25(Field, { label, hint, hideHint, status, disabled, children: /* @__PURE__ */ jsxs15("div", { className: "relative w-full", children: [
+  return /* @__PURE__ */ jsx26(Field, { label, hint, hideHint, status, disabled, children: /* @__PURE__ */ jsxs15("div", { className: "relative w-full", children: [
     /* @__PURE__ */ jsxs15(
       InputShell,
       {
@@ -1873,8 +1924,8 @@ var Autocomplete = React23.forwardRef((props, forwardedRef) => {
         className,
         onClick: handleContainerClick,
         children: [
-          showLeadingIcon && /* @__PURE__ */ jsx25("span", { className: cn(iconWrapperVariants({ size, disabled: !!disabled })), children: leadingIcon }),
-          /* @__PURE__ */ jsx25(
+          showLeadingIcon && /* @__PURE__ */ jsx26("span", { className: cn(iconWrapperVariants({ size, disabled: !!disabled })), children: leadingIcon }),
+          /* @__PURE__ */ jsx26(
             Input,
             {
               ref: setInputRef,
@@ -1897,11 +1948,11 @@ var Autocomplete = React23.forwardRef((props, forwardedRef) => {
               ...inputProps
             }
           ),
-          showTrailingIcon && /* @__PURE__ */ jsx25("span", { className: cn(iconWrapperVariants({ size, disabled: !!disabled })), children: trailingIcon })
+          showTrailingIcon && /* @__PURE__ */ jsx26("span", { className: cn(iconWrapperVariants({ size, disabled: !!disabled })), children: trailingIcon })
         ]
       }
     ),
-    showDropdown && /* @__PURE__ */ jsx25(
+    showDropdown && /* @__PURE__ */ jsx26(
       "div",
       {
         className: cn(
@@ -1910,27 +1961,27 @@ var Autocomplete = React23.forwardRef((props, forwardedRef) => {
           dropdownScrollClass,
           dropdownClassName
         ),
-        children: loading ? /* @__PURE__ */ jsx25(
+        children: loading ? /* @__PURE__ */ jsx26(
           "div",
           {
             className: cn(optionVariants({ size }), "px-(--space-8) pr-(--space-16) text-secondary"),
             "aria-live": "polite",
             children: loadingText
           }
-        ) : options.length === 0 ? /* @__PURE__ */ jsx25(
+        ) : options.length === 0 ? /* @__PURE__ */ jsx26(
           "div",
           {
             className: cn(optionVariants({ size }), "px-(--space-8) pr-(--space-16) text-secondary"),
             "aria-live": "polite",
             children: noOptionsText
           }
-        ) : /* @__PURE__ */ jsx25(
+        ) : /* @__PURE__ */ jsx26(
           "ul",
           {
             id: listboxId,
             role: "listbox",
             className: cn("flex flex-col", listboxClassName),
-            children: options.map((option, index) => /* @__PURE__ */ jsx25(
+            children: options.map((option, index) => /* @__PURE__ */ jsx26(
               "li",
               {
                 id: `${inputId}-option-${index}`,
@@ -1956,13 +2007,13 @@ var Autocomplete = React23.forwardRef((props, forwardedRef) => {
 Autocomplete.displayName = "Autocomplete";
 // src/components/Inputs/Select.tsx
-import * as React24 from "react";
+import * as React25 from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { cva as cva15 } from "class-variance-authority";
+import { cva as cva16 } from "class-variance-authority";
 import { ChevronDownIcon as ChevronDownIcon2 } from "@bubo-squared/icons";
-import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
-var selectTriggerVariants = cva15(
-  "group flex w-full items-center justify-between rounded-4 border bg-(--background-primary) p-2 text-left transition-[background-color] cursor-pointer hover:bg-(--background-primary-hover) disabled:bg-(--background-primary-disabled) disabled:text-primary-disabled disabled:cursor-default",
+import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+var selectTriggerVariants = cva16(
+  "group flex w-full items-center justify-between rounded-8 border bg-(--background-primary) p-2 text-left transition-[background-color] cursor-pointer hover:bg-(--background-primary-hover) disabled:bg-(--background-primary-disabled) disabled:text-primary-disabled disabled:cursor-default",
   {
     variants: {
       size: {
@@ -1983,7 +2034,7 @@ var selectTriggerVariants = cva15(
     }
   }
 );
-var textVariants = cva15("truncate", {
+var textVariants = cva16("truncate", {
   variants: {
     size: {
       sm: "paragraph-md",
@@ -2004,7 +2055,7 @@ var textVariants = cva15("truncate", {
     hasValue: false
   }
 });
-var selectIconVariants = cva15("flex items-center justify-center shrink-0", {
+var selectIconVariants = cva16("flex items-center justify-center shrink-0", {
   variants: {
     size: {
       sm: "size-4",
@@ -2022,7 +2073,7 @@ var selectIconVariants = cva15("flex items-center justify-center shrink-0", {
     disabled: false
   }
 });
-var selectButtonVariants = cva15(
+var selectButtonVariants = cva16(
   "flex w-full items-center gap-2 pl-(--space-8) pr-(--space-16) text-left paragraph-lg text-primary hover:bg-(--background-secondary)",
   {
     variants: {
@@ -2035,7 +2086,7 @@ var selectButtonVariants = cva15(
     }
   }
 );
-var Select = React24.forwardRef((props, forwardedRef) => {
+var Select = React25.forwardRef((props, forwardedRef) => {
   const {
     label = "Field Label",
     hint = "This is a hint text to help user.",
@@ -2056,10 +2107,10 @@ var Select = React24.forwardRef((props, forwardedRef) => {
   } = props;
   const isControlled = value !== void 0;
   const controlledValue = value ?? "";
-  const [internalValue, setInternalValue] = React24.useState(
+  const [internalValue, setInternalValue] = React25.useState(
     defaultValue ?? ""
   );
-  const [open, setOpen] = React24.useState(false);
+  const [open, setOpen] = React25.useState(false);
   const rawValue = isControlled ? controlledValue : internalValue;
   const selectedOption = options.find((opt) => opt.value === rawValue);
   const currentValue = selectedOption ? selectedOption.value : "";
@@ -2088,7 +2139,7 @@ var Select = React24.forwardRef((props, forwardedRef) => {
       setOpen(false);
     }
   };
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     Field,
     {
       label,
@@ -2107,7 +2158,7 @@ var Select = React24.forwardRef((props, forwardedRef) => {
           name,
           required,
           children: [
-            /* @__PURE__ */ jsx26(SelectPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs16(
+            /* @__PURE__ */ jsx27(SelectPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs16(
               "button",
               {
                 ref: forwardedRef,
@@ -2129,18 +2180,18 @@ var Select = React24.forwardRef((props, forwardedRef) => {
                 "data-open": isOpen || void 0,
                 ...buttonProps,
                 children: [
-                  /* @__PURE__ */ jsx26(SelectPrimitive.Value, { placeholder }),
-                  /* @__PURE__ */ jsx26(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx26(
+                  /* @__PURE__ */ jsx27(SelectPrimitive.Value, { placeholder }),
+                  /* @__PURE__ */ jsx27(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx27(
                     "span",
                     {
                       className: cn(selectIconVariants({ size, disabled: !!disabled })),
-                      children: /* @__PURE__ */ jsx26(ChevronDownIcon2, {})
+                      children: /* @__PURE__ */ jsx27(ChevronDownIcon2, {})
                     }
                   ) })
                 ]
               }
             ) }),
-            /* @__PURE__ */ jsx26(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx26(
+            /* @__PURE__ */ jsx27(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx27(
               SelectPrimitive.Content,
               {
                 position: "popper",
@@ -2149,11 +2200,11 @@ var Select = React24.forwardRef((props, forwardedRef) => {
                 className: cn(
                   dropdownSurfaceClass,
                   dropdownScrollClass,
-                  "min-w-343"
+                  "min-w-343 rounded-8"
                 ),
                 style: { minWidth: "var(--radix-select-trigger-width)" },
-                children: /* @__PURE__ */ jsx26(SelectPrimitive.Viewport, { children: /* @__PURE__ */ jsxs16("div", { className: "flex flex-col", children: [
-                  hasValue && /* @__PURE__ */ jsx26("div", { className: cn("bg-(--background-neutral)"), children: /* @__PURE__ */ jsx26(
+                children: /* @__PURE__ */ jsx27(SelectPrimitive.Viewport, { children: /* @__PURE__ */ jsxs16("div", { className: "flex flex-col", children: [
+                  hasValue && /* @__PURE__ */ jsx27("div", { className: cn("bg-(--background-neutral)"), children: /* @__PURE__ */ jsx27(
                     "button",
                     {
                       type: "button",
@@ -2165,7 +2216,7 @@ var Select = React24.forwardRef((props, forwardedRef) => {
                       children: "Clear"
                     }
                   ) }),
-                  options.map((opt) => /* @__PURE__ */ jsx26(
+                  options.map((opt) => /* @__PURE__ */ jsx27(
                     SelectPrimitive.Item,
                     {
                       value: opt.value,
@@ -2174,7 +2225,7 @@ var Select = React24.forwardRef((props, forwardedRef) => {
                         "data-highlighted:bg-(--background-secondary) data-highlighted:outline-none",
                         "data-[state=checked]:bg-(--background-secondary)"
                       ),
-                      children: /* @__PURE__ */ jsx26("div", { className: selectButtonVariants({ size }), children: /* @__PURE__ */ jsx26(SelectPrimitive.ItemText, { children: opt.label }) })
+                      children: /* @__PURE__ */ jsx27("div", { className: selectButtonVariants({ size }), children: /* @__PURE__ */ jsx27(SelectPrimitive.ItemText, { children: opt.label }) })
                     },
                     opt.value
                   ))
@@ -2190,11 +2241,11 @@ var Select = React24.forwardRef((props, forwardedRef) => {
 Select.displayName = "Select";
 // src/components/Inputs/PasswordInput.tsx
-import * as React25 from "react";
-import { cva as cva16 } from "class-variance-authority";
+import * as React26 from "react";
+import { cva as cva17 } from "class-variance-authority";
 import { EyeIcon, EyeSlashIcon } from "@bubo-squared/icons";
-import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
-var passwordTextVariants = cva16("truncate", {
+import { jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
+var passwordTextVariants = cva17("truncate", {
   variants: {
     size: {
       sm: "paragraph-md",
@@ -2212,7 +2263,7 @@ var passwordTextVariants = cva16("truncate", {
     disabled: false
   }
 });
-var iconWrapperVariants2 = cva16(
+var iconWrapperVariants2 = cva17(
   "flex items-center justify-center shrink-0 text-(--icon-primary)",
   {
     variants: {
@@ -2231,7 +2282,7 @@ var iconWrapperVariants2 = cva16(
     }
   }
 );
-var actionButtonVariants = cva16(
+var actionButtonVariants = cva17(
   "flex items-center justify-center shrink-0 cursor-pointer bg-transparent border-0 p-0 text-left paragraph-sm text-(--icon-primary) hover:text-(--icon-primary-hover) focus:outline-none ",
   {
     variants: {
@@ -2250,7 +2301,7 @@ var actionButtonVariants = cva16(
     }
   }
 );
-var PasswordInput = React25.forwardRef((props, forwardedRef) => {
+var PasswordInput = React26.forwardRef((props, forwardedRef) => {
   const {
     label,
     hint,
@@ -2268,13 +2319,13 @@ var PasswordInput = React25.forwardRef((props, forwardedRef) => {
     ...inputProps
   } = props;
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = React25.useState(
+  const [internalValue, setInternalValue] = React26.useState(
     defaultValue ?? ""
   );
-  const [isRevealed, setIsRevealed] = React25.useState(false);
+  const [isRevealed, setIsRevealed] = React26.useState(false);
   const currentValue = (isControlled ? value : internalValue) ?? "";
-  const inputRef = React25.useRef(null);
-  const setInputRef = React25.useCallback(
+  const inputRef = React26.useRef(null);
+  const setInputRef = React26.useCallback(
     (node) => {
       inputRef.current = node;
       if (!forwardedRef) return;
@@ -2297,7 +2348,7 @@ var PasswordInput = React25.forwardRef((props, forwardedRef) => {
     }
     onChange?.(event);
   };
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     Field,
     {
       label,
@@ -2314,7 +2365,7 @@ var PasswordInput = React25.forwardRef((props, forwardedRef) => {
           className,
           onClick: handleContainerClick,
           children: [
-            showLeadingIcon && /* @__PURE__ */ jsx27(
+            showLeadingIcon && /* @__PURE__ */ jsx28(
               "span",
               {
                 className: cn(
@@ -2323,7 +2374,7 @@ var PasswordInput = React25.forwardRef((props, forwardedRef) => {
                 children: leadingIcon
               }
             ),
-            /* @__PURE__ */ jsx27(
+            /* @__PURE__ */ jsx28(
               Input,
               {
                 ref: setInputRef,
@@ -2338,7 +2389,7 @@ var PasswordInput = React25.forwardRef((props, forwardedRef) => {
                 ...inputProps
               }
             ),
-            /* @__PURE__ */ jsx27(
+            /* @__PURE__ */ jsx28(
               "button",
               {
                 type: "button",
@@ -2353,7 +2404,7 @@ var PasswordInput = React25.forwardRef((props, forwardedRef) => {
                   "cursor-pointer",
                   variant === "text" ? actionButtonVariants({ size, disabled: !!disabled }) : iconWrapperVariants2({ size, disabled: !!disabled })
                 ),
-                children: variant === "icon" ? isRevealed ? /* @__PURE__ */ jsx27(EyeSlashIcon, {}) : /* @__PURE__ */ jsx27(EyeIcon, {}) : isRevealed ? "Hide" : "Show"
+                children: variant === "icon" ? isRevealed ? /* @__PURE__ */ jsx28(EyeSlashIcon, {}) : /* @__PURE__ */ jsx28(EyeIcon, {}) : isRevealed ? "Hide" : "Show"
               }
             )
           ]
@@ -2370,58 +2421,6 @@ 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 cva17 } from "class-variance-authority";
-import { jsx as jsx28 } from "react/jsx-runtime";
-var buttonVariants2 = cva17(
-  "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__ */ jsx28(
-    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";
@@ -2737,7 +2736,7 @@ function ScrollBar({
 // src/components/Inputs/PhoneInput.tsx
 import { cva as cva18 } from "class-variance-authority";
 import { jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
-var inputBase = "h-full rounded-4 border-secondary bg-(--background-primary) hover:border-secondary-hover";
+var inputBase = "h-full rounded-8 border border-secondary bg-(--background-primary) hover:border-secondary-hover";
 var sizeBase = cva18(
   "flex w-full",
   {
@@ -2906,11 +2905,11 @@ var CountrySelect = ({
       },
       children: [
         /* @__PURE__ */ jsx33(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs21(
-          Button2,
+          Button,
           {
             type: "button",
-            variant: "outline",
-            className: cn(inputBase, "flex gap-1 rounded-4 px-3 focus:z-10 mr-(--space-12) text-primary-disabled hover:text-(--color-primary-hover) focus:text-(--color-primary-focus)"),
+            variant: "secondary",
+            className: cn(inputBase, "flex items-center justify-center gap-1 px-3 focus:z-10 mr-(--space-12) text-primary-disabled hover:text-(--color-primary-hover) focus:text-(--color-primary-focus)"),
             disabled,
             children: [
               /* @__PURE__ */ jsx33(
@@ -2937,7 +2936,7 @@ var CountrySelect = ({
           {
             align: "start",
             className: cn(
-              "p-0 **:data-[slot='command-input-wrapper']:border-b-(--border-secondary)",
+              "p-0 **:data-[slot='command-input-wrapper']:border-b-(--border-secondary) rounded-8",
               dropdownWidthVariants({ size }),
               dropdownSurfaceClass
             ),
@@ -3633,7 +3632,7 @@ var Slider = React35.forwardRef((props, forwardedRef) => {
         tabIndex: disabled ? -1 : 0,
         className: cn(
           "absolute -translate-x-1/2 flex items-center justify-center",
-          "h-8 w-4.5 rounded-4",
+          "h-8 w-4.5 rounded-8",
           "transition-shadow duration-150",
           !disabled && (isDragging ? "shadow-[0_0_0_12px_var(--slider-halo-color)]" : "hover:shadow-[0_0_0_8px_var(--slider-halo-color)]"),
           disabled ? "bg-(--icon-primary-disabled) cursor-default" : "bg-(--icon-primary-hover) outline-none focus-visible:shadow-[0_0_0_var(--focus-ring-spread)_var(--focus-primary)] cursor-pointer"
@@ -3711,7 +3710,7 @@ var Slider = React35.forwardRef((props, forwardedRef) => {
             "div",
             {
               className: cn(
-                "relative w-full flex items-center rounded-4",
+                "relative w-full flex items-center rounded-8",
                 disabled ? "bg-(--background-slider-track-disabled) cursor-default" : "bg-(--background-slider-track) cursor-pointer"
               ),
               style: { height: `${trackHeight}px` },
@@ -3722,7 +3721,7 @@ var Slider = React35.forwardRef((props, forwardedRef) => {
                   "div",
                   {
                     className: cn(
-                      "absolute h-full rounded-4",
+                      "absolute h-full rounded-8",
                       disabled ? "bg-(--background-slider-track-disabled)" : "bg-(--background-slider-track)"
                     ),
                     style: {
@@ -3872,7 +3871,7 @@ var TextArea = React36.forwardRef((props, forwardedRef) => {
         "div",
         {
           className: cn(
-            "relative flex w-full rounded-4 border bg-(--background-primary) cursor-text",
+            "relative flex w-full rounded-8 border bg-(--background-primary) cursor-text",
             "border-secondary",
             statusShellClass[status],
             disabled && "bg-(--background-primary-disabled) border-secondary-disabled cursor-default",
@@ -4262,6 +4261,7 @@ var Popover2 = (props) => {
     className,
     placement = "bottom",
     offset = 10,
+    customContent,
     children
   } = props;
   const hasStrapline = typeof strapline === "string" ? strapline.trim() !== "" : strapline != null;
@@ -4275,7 +4275,7 @@ var Popover2 = (props) => {
     onOk?.();
     setOpen(false);
   };
-  const popoverClasses = "group bg-(--background-popover) popover w-80 max-w-[calc(100vw-2rem)] shadow-card-md border-none [&>span]:scale-240 rounded-4";
+  const popoverClasses = "group bg-(--background-popover) popover w-80 max-w-[calc(100vw-2rem)] shadow-card-md border-none [&>span]:scale-240 rounded-8";
   const popoverArrowClasses = "relative fill-(--background-popover) transition-[filter,transform] group-data-[side=top]:top-[-2px] group-data-[side=top]:drop-shadow-[0px_2px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)] group-data-[side=bottom]:drop-shadow-[0px_1px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)] group-data-[side=left]:drop-shadow-[0px_2px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)] group-data-[side=right]:drop-shadow-[0px_2px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)]";
   const mapPlacementToSideAndAlign2 = (placement2) => {
     switch (placement2) {
@@ -4319,15 +4319,15 @@ var Popover2 = (props) => {
         className: cn(popoverClasses, className),
         children: [
           showArrow && /* @__PURE__ */ jsx42(PopoverArrow, { className: popoverArrowClasses }),
-          /* @__PURE__ */ jsxs30("div", { className: "grid gap-4", children: [
+          customContent ? typeof customContent === "function" ? customContent({ close: () => setOpen(false), ok: handleOk, cancel: handleCancel }) : customContent : /* @__PURE__ */ jsxs30("div", { className: "grid gap-4", children: [
             /* @__PURE__ */ jsxs30("div", { className: "space-y-2", children: [
               hasStrapline && /* @__PURE__ */ jsx42("span", { className: "caption text-secondary", children: strapline }),
               /* @__PURE__ */ jsx42("h4", { className: "subtitle-medium text-primary", children: title }),
               hasDescription && /* @__PURE__ */ jsx42("p", { className: "paragraph-sm text-primary", children: description })
             ] }),
             /* @__PURE__ */ jsxs30("div", { className: "flex justify-start items-center gap-4 flex-wrap", children: [
-              /* @__PURE__ */ jsx42(Button, { size: "sm", variant: "secondary", onClick: handleCancel, children: cancelText || "Cancel" }),
-              /* @__PURE__ */ jsx42(Button, { size: "sm", variant: "primary", onClick: handleOk, children: okText || "Ok" })
+              /* @__PURE__ */ jsx42(Button2, { size: "sm", variant: "secondary", onClick: handleCancel, children: cancelText || "Cancel" }),
+              /* @__PURE__ */ jsx42(Button2, { size: "sm", variant: "primary", onClick: handleOk, children: okText || "Ok" })
             ] })
           ] })
         ]
@@ -4365,7 +4365,7 @@ import * as React43 from "react";
 // src/components/ui/breadcrumb.tsx
 import "react";
-import { Slot as Slot8 } from "@radix-ui/react-slot";
+import { Slot as Slot6 } from "@radix-ui/react-slot";
 import { jsx as jsx44, jsxs as jsxs31 } from "react/jsx-runtime";
 var breadcrumbItemClasses = "h6-title inline-flex items-center gap-1.5 text-(--color-secondary) hover:text-(--color-primary-hover) focus-within:text-(--color-secondary-focus) [&_[aria-current=page]]:font-medium [&_[aria-current=page]]:text-primary";
 var disabledItemClasses = "text-primary-disabled cursor-default pointer-events-none";
@@ -4452,7 +4452,16 @@ var breadcrumbSeparatorVariants = "size-5 relative bottom-1 [&>svg]:text-seconda
 var breadcrumbItemBase = "h6-title text-secondary hover:text-primary-hover";
 var Breadcrumbs = React43.forwardRef(
   (props, ref) => {
-    const { separator, ellipsis, children, className, ...rest } = props;
+    const {
+      separator,
+      ellipsis,
+      children,
+      className,
+      breadcrumbItemClassName,
+      breadcrumbPageClassName,
+      separatorClassName,
+      ...rest
+    } = props;
     const items = React43.Children.toArray(children).filter(Boolean);
     const shouldCollapse = Boolean(ellipsis) && items.length >= 5;
     const hiddenItems = shouldCollapse ? items.slice(1, -2) : [];
@@ -4462,7 +4471,7 @@ var Breadcrumbs = React43.forwardRef(
       const key = isEllipsis ? "__ellipsis" : React43.isValidElement(child) && child.key != null ? String(child.key) : String(index);
       const isLast = index === displayItems.length - 1;
       return /* @__PURE__ */ jsxs32(React43.Fragment, { children: [
-        isEllipsis ? /* @__PURE__ */ jsx45(BreadcrumbItem, { className: cn(breadcrumbItemBase, props.breadcrumbItemClassName), children: /* @__PURE__ */ jsxs32(DropdownMenu, { children: [
+        isEllipsis ? /* @__PURE__ */ jsx45(BreadcrumbItem, { className: cn(breadcrumbItemBase, breadcrumbItemClassName), children: /* @__PURE__ */ jsxs32(DropdownMenu, { children: [
           /* @__PURE__ */ jsx45(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx45(
             "button",
             {
@@ -4501,14 +4510,14 @@ var Breadcrumbs = React43.forwardRef(
               }) })
             }
           )
-        ] }) }) : isLast ? /* @__PURE__ */ jsx45(BreadcrumbItem, { className: cn(breadcrumbItemBase, props.breadcrumbItemClassName), children: /* @__PURE__ */ jsx45(
+        ] }) }) : isLast ? /* @__PURE__ */ jsx45(BreadcrumbItem, { className: cn(breadcrumbItemBase, breadcrumbItemClassName), children: /* @__PURE__ */ jsx45(
           BreadcrumbPage,
           {
-            className: cn("h6-title-medium cursor-pointer", props.breadcrumbPageClassName),
+            className: cn("h6-title-medium cursor-pointer", breadcrumbPageClassName),
             children: child
           }
-        ) }) : /* @__PURE__ */ jsx45(BreadcrumbItem, { className: cn(breadcrumbItemBase, props.breadcrumbItemClassName), children: child }),
-        !isLast && /* @__PURE__ */ jsx45(BreadcrumbSeparator, { className: cn(breadcrumbSeparatorVariants, props.separatorClassName), children: separator })
+        ) }) : /* @__PURE__ */ jsx45(BreadcrumbItem, { className: cn(breadcrumbItemBase, breadcrumbItemClassName), children: child }),
+        !isLast && /* @__PURE__ */ jsx45(BreadcrumbSeparator, { className: cn(breadcrumbSeparatorVariants, separatorClassName), children: separator })
       ] }, key);
     }) }) });
   }
@@ -4623,7 +4632,7 @@ export {
   BadgeDot,
   BadgeStatus,
   Breadcrumbs,
-  Button,
+  Button2 as Button,
   ButtonGroup,
   Checkbox,
   Divider,