@bubo-squared/ui-framework 0.2.28 → 0.2.29

package/dist/index.cjs

@@ -38,7 +38,7 @@ __export(index_exports, {
   BadgeDot: () => BadgeDot,
   BadgeStatus: () => BadgeStatus,
   Breadcrumbs: () => Breadcrumbs,
-  Button: () => Button,
+  Button: () => Button2,
   ButtonGroup: () => ButtonGroup,
   Checkbox: () => Checkbox,
   Divider: () => Divider,
@@ -81,9 +81,8 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/Buttons/Button.tsx
-var React = __toESM(require("react"), 1);
-var import_react_slot = require("@radix-ui/react-slot");
-var import_class_variance_authority = require("class-variance-authority");
+var React2 = __toESM(require("react"), 1);
+var import_class_variance_authority2 = require("class-variance-authority");
 
 // src/lib/utils.tsx
 var import_clsx = require("clsx");
@@ -123,14 +122,67 @@ function spawnRipple(target, clientX, clientY, options = {}) {
   window.setTimeout(cleanup, durationMs + 50);
 }
 
-// src/components/Buttons/Button.tsx
+// src/components/ui/button.tsx
+var React = require("react");
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority = require("class-variance-authority");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority.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 ? import_react_slot.Slot : "button";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className,
+      ...props
+    }
+  );
+}
+
+// src/components/Buttons/Button.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var buttonVariants2 = (0, import_class_variance_authority2.cva)(
+  "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"
         ],
@@ -167,7 +219,7 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
     }
   }
 );
-var buttonIconVariants = (0, import_class_variance_authority.cva)("relative", {
+var buttonIconVariants = (0, import_class_variance_authority2.cva)("relative", {
   variants: {
     size: {
       sm: ["size-5", "*:size-5"],
@@ -177,7 +229,7 @@ var buttonIconVariants = (0, import_class_variance_authority.cva)("relative", {
     }
   }
 });
-var buttonTextVariants = (0, import_class_variance_authority.cva)("flex text-center justify-center font-normal", {
+var buttonTextVariants = (0, import_class_variance_authority2.cva)("flex text-center justify-center font-normal", {
   variants: {
     size: {
       sm: ["paragraph-sm"],
@@ -187,7 +239,7 @@ var buttonTextVariants = (0, import_class_variance_authority.cva)("flex text-cen
     }
   }
 });
-var Button = React.forwardRef(
+var Button2 = React2.forwardRef(
   (props, ref) => {
     const {
       className,
@@ -200,7 +252,6 @@ var Button = React.forwardRef(
       onPointerDown,
       ...rest
     } = props;
-    const Comp = asChild ? import_react_slot.Slot : "button";
     const handlePointerDown = (e) => {
       onPointerDown?.(e);
       if (e.defaultPrevented) return;
@@ -208,28 +259,29 @@ var Button = React.forwardRef(
       if (e.button !== 0 || !e.isPrimary) return;
       spawnRipple(e.currentTarget, e.clientX, e.clientY);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-      Comp,
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      Button,
       {
-        className: cn(buttonVariants({ variant, size, className })),
+        asChild,
         ref,
+        className: cn(buttonVariants2({ variant, size, className })),
         onPointerDown: handlePointerDown,
         ...rest,
         children: [
-          leadingIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn(buttonIconVariants({ size })), children: leadingIcon }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn(buttonTextVariants({ size })), children }),
-          trailingIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn(buttonIconVariants({ size })), children: trailingIcon })
+          leadingIcon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn(buttonIconVariants({ size })), children: leadingIcon }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn(buttonTextVariants({ size })), children }),
+          trailingIcon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn(buttonIconVariants({ size })), children: trailingIcon })
         ]
       }
     );
   }
 );
-Button.displayName = "Button";
+Button2.displayName = "Button";
 
 // src/components/Buttons/ButtonGroup.tsx
-var import_class_variance_authority2 = require("class-variance-authority");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var buttonGroupVariants = (0, import_class_variance_authority2.cva)(
+var import_class_variance_authority3 = require("class-variance-authority");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var buttonGroupVariants = (0, import_class_variance_authority3.cva)(
   "flex items-center justify-center gap-4 pt-4 w-fit",
   {
     variants: {
@@ -250,7 +302,7 @@ var ButtonGroup = (props) => {
     children,
     ...rest
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
     {
       className: cn(buttonGroupVariants({ orientation }), className),
@@ -261,11 +313,10 @@ var ButtonGroup = (props) => {
 };
 
 // src/components/Buttons/IconButton.tsx
-var React2 = __toESM(require("react"), 1);
-var import_react_slot2 = require("@radix-ui/react-slot");
-var import_class_variance_authority3 = require("class-variance-authority");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var iconButtonVariants = (0, import_class_variance_authority3.cva)(
+var React3 = __toESM(require("react"), 1);
+var import_class_variance_authority4 = require("class-variance-authority");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var iconButtonVariants = (0, import_class_variance_authority4.cva)(
   "relative inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none overflow-hidden p-2 cursor-pointer",
   {
     variants: {
@@ -303,7 +354,7 @@ var iconButtonVariants = (0, import_class_variance_authority3.cva)(
     }
   }
 );
-var IconButton = React2.forwardRef(
+var IconButton = React3.forwardRef(
   (props, ref) => {
     const {
       className,
@@ -315,7 +366,6 @@ var IconButton = React2.forwardRef(
       onPointerDown,
       ...rest
     } = props;
-    const Comp = asChild ? import_react_slot2.Slot : "button";
     const handlePointerDown = (e) => {
       onPointerDown?.(e);
       if (e.defaultPrevented) return;
@@ -323,14 +373,15 @@ var IconButton = React2.forwardRef(
       if (e.button !== 0 || !e.isPrimary) return;
       spawnRipple(e.currentTarget, e.clientX, e.clientY);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      Comp,
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      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__ */ (0, import_jsx_runtime4.jsx)("div", { className: "buttonIcon flex items-center justify-center", children: icon })
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "buttonIcon flex items-center justify-center", children: icon })
       }
     );
   }
@@ -338,11 +389,11 @@ var IconButton = React2.forwardRef(
 IconButton.displayName = "IconButton";
 
 // src/components/Buttons/IconButtonGroup.tsx
-var React3 = require("react");
-var import_class_variance_authority4 = require("class-variance-authority");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var React4 = require("react");
+var import_class_variance_authority5 = require("class-variance-authority");
+var import_jsx_runtime6 = require("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 = (0, import_class_variance_authority4.cva)("", {
+var IconGroupSizeVariants = (0, import_class_variance_authority5.cva)("", {
   variants: {
     size: {
       sm: "[&>button]:px-1.5",
@@ -360,7 +411,7 @@ var IconButtonGroup = (props) => {
   if (!items || items.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
       className: cn(
@@ -369,7 +420,7 @@ var IconButtonGroup = (props) => {
         className
       ),
       ...rest,
-      children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         IconButton,
         {
           variant: "secondary",
@@ -393,11 +444,11 @@ var IconButtonGroup = (props) => {
 IconButtonGroup.displayName = "IconButtonGroup";
 
 // src/components/Buttons/LinkButton.tsx
-var React4 = __toESM(require("react"), 1);
-var import_react_slot3 = require("@radix-ui/react-slot");
-var import_class_variance_authority5 = require("class-variance-authority");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var linkButtonVariants = (0, import_class_variance_authority5.cva)(
+var React5 = __toESM(require("react"), 1);
+var import_react_slot2 = require("@radix-ui/react-slot");
+var import_class_variance_authority6 = require("class-variance-authority");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var linkButtonVariants = (0, import_class_variance_authority6.cva)(
   "inline-flex items-center justify-center whitespace-nowrap rounded-4 transition-colors disabled:pointer-events-none overflow-hidden gap-2 cursor-pointer",
   {
     variants: {
@@ -419,7 +470,7 @@ var linkButtonVariants = (0, import_class_variance_authority5.cva)(
     }
   }
 );
-var linkButtonIconVariants = (0, import_class_variance_authority5.cva)("relative", {
+var linkButtonIconVariants = (0, import_class_variance_authority6.cva)("relative", {
   variants: {
     size: {
       sm: ["size-5", "*:size-5"],
@@ -429,7 +480,7 @@ var linkButtonIconVariants = (0, import_class_variance_authority5.cva)("relative
     }
   }
 });
-var linkButtonTextVariants = (0, import_class_variance_authority5.cva)("inline-flex items-center text-center font-medium", {
+var linkButtonTextVariants = (0, import_class_variance_authority6.cva)("inline-flex items-center text-center font-medium", {
   variants: {
     size: {
       sm: ["text-sm", "leading-5"],
@@ -439,7 +490,7 @@ var linkButtonTextVariants = (0, import_class_variance_authority5.cva)("inline-f
     }
   }
 });
-var LinkButton = React4.forwardRef(
+var LinkButton = React5.forwardRef(
   (props, ref) => {
     const {
       className,
@@ -451,17 +502,17 @@ var LinkButton = React4.forwardRef(
       leadingIcon,
       ...rest
     } = props;
-    const Comp = asChild ? import_react_slot3.Slot : "button";
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    const Comp = asChild ? import_react_slot2.Slot : "button";
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       Comp,
       {
         className: cn(linkButtonVariants({ variant, size, className })),
         ref,
         ...rest,
         children: [
-          leadingIcon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cn(linkButtonIconVariants({ size })), children: leadingIcon }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cn(linkButtonTextVariants({ size })), children }),
-          trailingIcon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cn(linkButtonIconVariants({ size })), children: trailingIcon })
+          leadingIcon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: cn(linkButtonIconVariants({ size })), children: leadingIcon }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: cn(linkButtonTextVariants({ size })), children }),
+          trailingIcon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: cn(linkButtonIconVariants({ size })), children: trailingIcon })
         ]
       }
     );
@@ -470,8 +521,8 @@ var LinkButton = React4.forwardRef(
 LinkButton.displayName = "LinkButton";
 
 // src/components/Buttons/MessageButton.tsx
-var React5 = __toESM(require("react"), 1);
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var React6 = __toESM(require("react"), 1);
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var MessageButton = (props) => {
   const {
     onClick,
@@ -483,7 +534,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");
@@ -501,7 +552,7 @@ var MessageButton = (props) => {
   };
   const label = status === "loading" ? loadingLabel : status === "success" ? successLabel : status === "error" ? errorLabel : idleLabel;
   const statusClasses = status === "success" ? "btn-msg-success" : status === "error" ? "btn-destructive" : "btn-outline focus-ring-outline";
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "button",
     {
       type: "button",
@@ -509,8 +560,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__ */ (0, import_jsx_runtime7.jsx)("div", { className: "size-5 *:size-5 relative", children: props.icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-center text-xl font-normal leading-7", children: label })
+        props.icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "size-5 *:size-5 relative", children: props.icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-center text-xl font-normal leading-7", children: label })
       ]
     }
   );
@@ -518,11 +569,11 @@ var MessageButton = (props) => {
 MessageButton.displayName = "MessageButton";
 
 // src/components/Content/Accordion.tsx
-var React6 = __toESM(require("react"), 1);
+var React7 = __toESM(require("react"), 1);
 var AccordionPrimitive = __toESM(require("@radix-ui/react-accordion"), 1);
 var import_icons = require("@bubo-squared/icons");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var Accordion = React6.forwardRef(
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Accordion = React7.forwardRef(
   (props, ref) => {
     const {
       title,
@@ -540,7 +591,7 @@ var Accordion = React6.forwardRef(
       ...restRootProps
     } = rootProps;
     const resolvedDefaultValue = value === void 0 && defaultValue === void 0 && defaultOpen ? "item" : defaultValue;
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       AccordionPrimitive.Root,
       {
         ref,
@@ -551,13 +602,13 @@ var Accordion = React6.forwardRef(
         defaultValue: resolvedDefaultValue,
         onValueChange,
         ...restRootProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           AccordionPrimitive.Item,
           {
             value: "item",
             className: cn(bordered ? "border rounded-4" : "border-b", "border-secondary px-4"),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                 AccordionPrimitive.Trigger,
                 {
                   className: cn(
@@ -567,12 +618,12 @@ var Accordion = React6.forwardRef(
                     "disabled:cursor-not-allowed disabled:text-primary-disabled cursor-pointer"
                   ),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "flex-1", children: title }),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "accordion-icon inline-flex shrink-0 transition-transform duration-200 [&>svg]:size-5", children: expandIcon ?? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons.ChevronDownIcon, {}) })
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "flex-1", children: title }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "accordion-icon inline-flex shrink-0 transition-transform duration-200 [&>svg]:size-5", children: expandIcon ?? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons.ChevronDownIcon, {}) })
                   ]
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AccordionPrimitive.Content, { className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "pb-3", children }) })
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AccordionPrimitive.Content, { className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "pb-3", children }) })
             ]
           }
         )
@@ -583,12 +634,12 @@ var Accordion = React6.forwardRef(
 Accordion.displayName = "Accordion";
 
 // src/components/Content/Avatar.tsx
-var React7 = __toESM(require("react"), 1);
-var import_react_slot4 = require("@radix-ui/react-slot");
-var import_class_variance_authority6 = require("class-variance-authority");
+var React8 = __toESM(require("react"), 1);
+var import_react_slot3 = require("@radix-ui/react-slot");
+var import_class_variance_authority7 = require("class-variance-authority");
 var import_icons2 = require("@bubo-squared/icons");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var avatarVariants = (0, import_class_variance_authority6.cva)(
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var avatarVariants = (0, import_class_variance_authority7.cva)(
   "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: {
@@ -607,7 +658,7 @@ var avatarVariants = (0, import_class_variance_authority6.cva)(
     }
   }
 );
-var avatarInitialsVariants = (0, import_class_variance_authority6.cva)(
+var avatarInitialsVariants = (0, import_class_variance_authority7.cva)(
   "flex items-center justify-center text-primary leading-none ",
   {
     variants: {
@@ -626,7 +677,7 @@ var avatarInitialsVariants = (0, import_class_variance_authority6.cva)(
     }
   }
 );
-var avatarIconVariants = (0, import_class_variance_authority6.cva)(
+var avatarIconVariants = (0, import_class_variance_authority7.cva)(
   "flex items-center justify-center text-(--icon-primary)",
   {
     variants: {
@@ -645,7 +696,7 @@ var avatarIconVariants = (0, import_class_variance_authority6.cva)(
     }
   }
 );
-var Avatar = React7.forwardRef(
+var Avatar = React8.forwardRef(
   (props, ref) => {
     const {
       asChild = false,
@@ -657,16 +708,16 @@ var Avatar = React7.forwardRef(
       className,
       ...rest
     } = props;
-    const Comp = asChild ? import_react_slot4.Slot : "button";
+    const Comp = asChild ? import_react_slot3.Slot : "button";
     const hasImage = variant === "image" && typeof src === "string" && src.length > 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       Comp,
       {
         ref,
         className: cn(avatarVariants({ size }), className),
         ...rest,
         children: [
-          hasImage ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          hasImage ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "img",
             {
               src,
@@ -674,8 +725,8 @@ var Avatar = React7.forwardRef(
               className: "w-full h-full object-cover"
             }
           ) : null,
-          !hasImage && variant === "initials" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: cn(avatarInitialsVariants({ size }), "relative bottom-px"), children: initials }),
-          !hasImage && variant === "icon" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: cn(avatarIconVariants({ size })), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons2.UserIcon, {}) })
+          !hasImage && variant === "initials" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn(avatarInitialsVariants({ size }), "relative bottom-px"), children: initials }),
+          !hasImage && variant === "icon" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn(avatarIconVariants({ size })), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons2.UserIcon, {}) })
         ]
       }
     );
@@ -684,8 +735,8 @@ var Avatar = React7.forwardRef(
 Avatar.displayName = "Avatar";
 
 // src/components/Content/Typography.tsx
-var React8 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var React9 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var mbCapableBaseClasses = /* @__PURE__ */ new Set([
   "h1-intro",
   "h2-intro",
@@ -721,7 +772,7 @@ var Typography = (props) => {
   const Comp = as ?? "span";
   const mbClassName = useMargin ? getMbClassName(variant) : null;
   const weightClassName = weight === "regular" ? null : `${variant}-${weight}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     Comp,
     {
       className: cn("text-primary", variant, weightClassName, mbClassName, className),
@@ -733,11 +784,11 @@ var Typography = (props) => {
 Typography.displayName = "Typography";
 
 // src/components/Content/Badge.tsx
-var React9 = __toESM(require("react"), 1);
-var import_react_slot5 = require("@radix-ui/react-slot");
-var import_class_variance_authority7 = require("class-variance-authority");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var badgeVariants = (0, import_class_variance_authority7.cva)(
+var React10 = __toESM(require("react"), 1);
+var import_react_slot4 = require("@radix-ui/react-slot");
+var import_class_variance_authority8 = require("class-variance-authority");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var badgeVariants = (0, import_class_variance_authority8.cva)(
   "inline-flex items-center justify-center rounded-4 leading-none whitespace-nowrap gap-1 py-0",
   {
     variants: {
@@ -766,7 +817,7 @@ var badgeVariants = (0, import_class_variance_authority7.cva)(
     }
   }
 );
-var Badge = React9.forwardRef(
+var Badge = React10.forwardRef(
   (props, ref) => {
     const {
       asChild = false,
@@ -777,19 +828,19 @@ var Badge = React9.forwardRef(
       className,
       ...rest
     } = props;
-    const Comp = asChild ? import_react_slot5.Slot : "div";
+    const Comp = asChild ? import_react_slot4.Slot : "div";
     const hasValue = typeof value === "string" ? value.trim() !== "" : value != null;
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       Comp,
       {
         ref,
         className: cn(badgeVariants({ size, variant }), className),
         ...rest,
-        children: hasValue ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "font-normal", children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "font-normal", children: ":" }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "font-medium", children: value })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "font-normal", children: label })
+        children: hasValue ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "font-normal", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "font-normal", children: ":" }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "font-medium", children: value })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "font-normal", children: label })
       }
     );
   }
@@ -797,10 +848,10 @@ var Badge = React9.forwardRef(
 Badge.displayName = "Badge";
 
 // src/components/Content/BadgeDigit.tsx
-var React10 = __toESM(require("react"), 1);
-var import_class_variance_authority8 = require("class-variance-authority");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var badgeDigitVariants = (0, import_class_variance_authority8.cva)(
+var React11 = __toESM(require("react"), 1);
+var import_class_variance_authority9 = require("class-variance-authority");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var badgeDigitVariants = (0, import_class_variance_authority9.cva)(
   "inline-flex items-center justify-center leading-none whitespace-nowrap text-(--color-b-white)",
   {
     variants: {
@@ -824,7 +875,7 @@ var badgeDigitVariants = (0, import_class_variance_authority8.cva)(
     }
   }
 );
-var BadgeDigit = React10.forwardRef(
+var BadgeDigit = React11.forwardRef(
   (props, ref) => {
     const {
       value,
@@ -833,7 +884,7 @@ var BadgeDigit = React10.forwardRef(
       className,
       ...rest
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "div",
       {
         ref,
@@ -847,10 +898,10 @@ var BadgeDigit = React10.forwardRef(
 BadgeDigit.displayName = "BadgeDigit";
 
 // src/components/Content/BadgeDot.tsx
-var React11 = require("react");
-var import_class_variance_authority9 = require("class-variance-authority");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var badgeDotVariants = (0, import_class_variance_authority9.cva)("rounded-12 size-3", {
+var React12 = require("react");
+var import_class_variance_authority10 = require("class-variance-authority");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var badgeDotVariants = (0, import_class_variance_authority10.cva)("rounded-12 size-3", {
   variants: {
     status: {
       disabled: "bg-(--color-primary)",
@@ -865,14 +916,14 @@ var badgeDotVariants = (0, import_class_variance_authority9.cva)("rounded-12 siz
   }
 });
 var BadgeDot = ({ status, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn(badgeDotVariants({ status }), className) });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn(badgeDotVariants({ status }), className) });
 };
 BadgeDot.displayName = "BadgeDot";
 
 // src/components/Content/BadgeStatus.tsx
-var React12 = __toESM(require("react"), 1);
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var BadgeStatus = React12.forwardRef(
+var React13 = __toESM(require("react"), 1);
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var BadgeStatus = React13.forwardRef(
   (props, ref) => {
     const {
       label,
@@ -883,14 +934,14 @@ var BadgeStatus = React12.forwardRef(
     } = props;
     const textClasses = active ? "caption-medium text-primary" : "caption-medium text-primary-disabled";
     const dotClasses = active ? "bg-(--background-informal)" : "bg-(--background-primary)";
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "div",
       {
         ref,
         className: cn("inline-flex items-center gap-2", className),
         ...rest,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "span",
             {
               className: cn(
@@ -900,7 +951,7 @@ var BadgeStatus = React12.forwardRef(
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: textClasses, children: label })
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: textClasses, children: label })
         ]
       }
     );
@@ -909,9 +960,9 @@ var BadgeStatus = React12.forwardRef(
 BadgeStatus.displayName = "BadgeStatus";
 
 // src/components/Content/Divider.tsx
-var React13 = require("react");
+var React14 = require("react");
 var import_icons3 = require("@bubo-squared/icons");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var gapBySize = {
   sm: "gap-2",
   md: "gap-3",
@@ -946,14 +997,14 @@ var Divider = (props) => {
       className: _className,
       ...divProps
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "div",
       {
         className: wrapperClass,
         role: "separator",
         "aria-orientation": ariaOrientation,
         ...divProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: lineClass })
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: lineClass })
       }
     );
   }
@@ -967,7 +1018,7 @@ var Divider = (props) => {
       ...divProps
     } = props;
     const textLabel = label ?? "OR";
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       "div",
       {
         className: wrapperClass,
@@ -975,8 +1026,8 @@ var Divider = (props) => {
         "aria-orientation": ariaOrientation,
         ...divProps,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: lineClass }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: lineClass }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "span",
             {
               className: cn(
@@ -986,7 +1037,7 @@ var Divider = (props) => {
               children: textLabel
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: lineClass })
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: lineClass })
         ]
       }
     );
@@ -1003,7 +1054,7 @@ var Divider = (props) => {
       className: _className,
       ...divProps
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       "div",
       {
         className: wrapperClass,
@@ -1011,18 +1062,18 @@ var Divider = (props) => {
         "aria-orientation": ariaOrientation,
         ...divProps,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: lineClass }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: lineClass }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             IconButton,
             {
               variant: iconButtonVariant ?? "secondary",
               size: resolvedSize,
               "aria-label": ariaLabel ?? "More options",
-              icon: icon ?? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons3.TargetIcon, {}),
+              icon: icon ?? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons3.TargetIcon, {}),
               onClick: onIconClick
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: lineClass })
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: lineClass })
         ]
       }
     );
@@ -1036,7 +1087,7 @@ var Divider = (props) => {
       className: _className,
       ...divProps
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       "div",
       {
         className: wrapperClass,
@@ -1044,8 +1095,8 @@ var Divider = (props) => {
         "aria-orientation": ariaOrientation,
         ...divProps,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: lineClass }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: lineClass }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             IconButtonGroup,
             {
               className: resolvedOrientation === "vertical" ? "flex-col" : "flex-row",
@@ -1053,7 +1104,7 @@ var Divider = (props) => {
               size: resolvedSize
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: lineClass })
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: lineClass })
         ]
       }
     );
@@ -1069,7 +1120,7 @@ var Divider = (props) => {
       className: _className,
       ...divProps
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       "div",
       {
         className: wrapperClass,
@@ -1077,9 +1128,9 @@ var Divider = (props) => {
         "aria-orientation": ariaOrientation,
         ...divProps,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: lineClass }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-            Button,
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: lineClass }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            Button2,
             {
               variant: buttonVariant ?? "secondary",
               size: resolvedSize,
@@ -1087,7 +1138,7 @@ var Divider = (props) => {
               children: buttonLabel
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: lineClass })
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: lineClass })
         ]
       }
     );
@@ -1097,11 +1148,11 @@ var Divider = (props) => {
 Divider.displayName = "Divider";
 
 // src/components/Content/Progress.tsx
-var React15 = __toESM(require("react"), 1);
+var React16 = __toESM(require("react"), 1);
 
 // src/components/Inputs/Field.tsx
-var React14 = __toESM(require("react"), 1);
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var React15 = __toESM(require("react"), 1);
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var fieldBase = "flex flex-col gap-2 items-start";
 var Field = (props) => {
   const {
@@ -1116,18 +1167,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__ */ (0, import_jsx_runtime16.jsxs)("div", { className: cn(fieldBase, className), children: [
-    hasLabel && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex w-full items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { id: labelId, className: cn("paragraph-sm", labelColorClass), children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cn(fieldBase, className), children: [
+    hasLabel && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex w-full items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("label", { id: labelId, className: cn("paragraph-sm", labelColorClass), children: label }),
       labelRight
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "relative w-full", children }),
-    !hideHint && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "relative w-full", children }),
+    !hideHint && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "p",
       {
         id: hasHint ? hintId : void 0,
@@ -1140,13 +1191,13 @@ var Field = (props) => {
 Field.displayName = "Field";
 
 // src/components/Content/Progress.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("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,
@@ -1166,17 +1217,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__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       Field,
       {
         label,
-        labelRight: !hideProgressLabel && label != null ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "footnote text-(--color-secondary)", children: percentageLabel }) : void 0,
+        labelRight: !hideProgressLabel && label != null ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "footnote text-(--color-secondary)", children: percentageLabel }) : void 0,
         hint,
         hideHint,
         status,
         disabled,
         className: cn("w-full", className),
-        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "div",
           {
             ref,
@@ -1186,7 +1237,7 @@ var Progress = React15.forwardRef(
             "aria-valuemax": 100,
             "aria-label": resolvedAriaLabel,
             ...rest,
-            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               "div",
               {
                 className: cn(
@@ -1194,7 +1245,7 @@ var Progress = React15.forwardRef(
                   barHeightClasses,
                   disabled && "opacity-50"
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                   "div",
                   {
                     className: cn(
@@ -1216,11 +1267,11 @@ var Progress = React15.forwardRef(
 Progress.displayName = "Progress";
 
 // src/components/Content/StatusAvatar.tsx
-var React16 = __toESM(require("react"), 1);
-var import_class_variance_authority10 = require("class-variance-authority");
+var React17 = __toESM(require("react"), 1);
+var import_class_variance_authority11 = require("class-variance-authority");
 var import_icons4 = require("@bubo-squared/icons");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var iconStatusVariants = (0, import_class_variance_authority10.cva)(
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var iconStatusVariants = (0, import_class_variance_authority11.cva)(
   "inline-flex size-5 items-center justify-center rounded-full border-1 border-(--color-primary-inverse) p-1",
   {
     variants: {
@@ -1244,11 +1295,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__ */ (0, import_jsx_runtime18.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "div",
       {
         ref,
@@ -1257,23 +1308,23 @@ var StatusAvatar = React16.forwardRef((props, ref) => {
           className
         ),
         ...rest,
-        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: cn(dotClasses, "size-3.5 rounded-full") })
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn(dotClasses, "size-3.5 rounded-full") })
       }
     );
   }
   const iconVariant = variant;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
     {
       ref,
       className: cn(iconStatusVariants({ variant: iconVariant }), className),
       ...rest,
       children: [
-        iconVariant === "verified" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons4.CheckIcon, { className: "size-3 text-button-white" }),
-        iconVariant === "bookmark" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons4.BookmarkCheckIcon, { className: "size-3 text-button-white" }),
-        iconVariant === "favorite" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons4.StarIcon, { className: "size-3 text-button-white" }),
-        iconVariant === "add" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons4.PlusIcon, { className: "size-3 text-button-white" }),
-        iconVariant === "remove" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons4.CrossIcon, { className: "size-3 text-button-white" })
+        iconVariant === "verified" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons4.CheckIcon, { className: "size-3 text-button-white" }),
+        iconVariant === "bookmark" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons4.BookmarkCheckIcon, { className: "size-3 text-button-white" }),
+        iconVariant === "favorite" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons4.StarIcon, { className: "size-3 text-button-white" }),
+        iconVariant === "add" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons4.PlusIcon, { className: "size-3 text-button-white" }),
+        iconVariant === "remove" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons4.CrossIcon, { className: "size-3 text-button-white" })
       ]
     }
   );
@@ -1281,11 +1332,11 @@ var StatusAvatar = React16.forwardRef((props, ref) => {
 StatusAvatar.displayName = "StatusAvatar";
 
 // src/components/Content/Tag.tsx
-var React17 = __toESM(require("react"), 1);
-var import_react_slot6 = require("@radix-ui/react-slot");
-var import_class_variance_authority11 = require("class-variance-authority");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var tagVariants = (0, import_class_variance_authority11.cva)(
+var React18 = __toESM(require("react"), 1);
+var import_react_slot5 = require("@radix-ui/react-slot");
+var import_class_variance_authority12 = require("class-variance-authority");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var tagVariants = (0, import_class_variance_authority12.cva)(
   "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: {
@@ -1301,7 +1352,7 @@ var tagVariants = (0, import_class_variance_authority11.cva)(
 );
 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",
@@ -1313,23 +1364,23 @@ var Tag = React17.forwardRef(
       ...rest
     } = props;
     const hasValue = typeof value === "string" ? value.trim() !== "" : value != null;
-    const Comp = asChild ? import_react_slot6.Slot : "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;
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    const Comp = asChild ? import_react_slot5.Slot : "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__ */ (0, import_jsx_runtime20.jsxs)(
       Comp,
       {
         className: cn(tagVariants({ size }), disabled && disabledTag, className),
         ref,
         ...rest,
         children: [
-          leading && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: iconClasses, children: leading }),
-          hasValue ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-row gap-1 items-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-primary paragraph-lg mb-0! cursor-default font-normal", children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-primary paragraph-lg mb-0! cursor-default font-normal", children: ":" }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-primary paragraph-lg-medium mb-0! cursor-default font-medium", children: value })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-primary paragraph-lg mb-0! cursor-default", children: label }),
-          trailing && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: iconClasses, children: trailing })
+          leading && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: iconClasses, children: leading }),
+          hasValue ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-row gap-1 items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-primary paragraph-lg mb-0! cursor-default font-normal", children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-primary paragraph-lg mb-0! cursor-default font-normal", children: ":" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-primary paragraph-lg-medium mb-0! cursor-default font-medium", children: value })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-primary paragraph-lg mb-0! cursor-default", children: label }),
+          trailing && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: iconClasses, children: trailing })
         ]
       }
     );
@@ -1337,18 +1388,18 @@ var Tag = React17.forwardRef(
 );
 
 // src/components/Content/Menu.tsx
-var React19 = require("react");
+var React20 = require("react");
 
 // src/components/ui/dropdown-menu.tsx
-var React18 = __toESM(require("react"), 1);
+var React19 = __toESM(require("react"), 1);
 var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
 var import_icons5 = require("@bubo-squared/icons");
 
 // src/components/ui/dropdown-styles.ts
-var import_class_variance_authority12 = require("class-variance-authority");
+var import_class_variance_authority13 = require("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 = (0, import_class_variance_authority12.cva)(
+var dropdownRowVariants = (0, import_class_variance_authority13.cva)(
   "flex w-full items-center gap-2 pl-(--space-8) pr-(--space-16) text-left text-primary cursor-pointer hover:bg-(--background-secondary)",
   {
     variants: {
@@ -1369,26 +1420,26 @@ var dropdownRowVariants = (0, import_class_variance_authority12.cva)(
 );
 
 // src/components/ui/dropdown-menu.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var DropdownMenuSizeContext = React18.createContext("lg");
+var import_jsx_runtime21 = require("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__ */ (0, import_jsx_runtime20.jsx)(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
 }
 function DropdownMenuPortal({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
 }
 function DropdownMenuTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     DropdownMenuPrimitive.Trigger,
     {
       "data-slot": "dropdown-menu-trigger",
@@ -1402,7 +1453,7 @@ function DropdownMenuContent({
   size = "lg",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownMenuSizeContext.Provider, { value: size, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuSizeContext.Provider, { value: size, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     DropdownMenuPrimitive.Content,
     {
       "data-slot": "dropdown-menu-content",
@@ -1420,7 +1471,7 @@ function DropdownMenuContent({
 function DropdownMenuGroup({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
 }
 function DropdownMenuItem({
   className,
@@ -1430,7 +1481,7 @@ function DropdownMenuItem({
   ...props
 }) {
   const resolvedSize = useDropdownMenuSize(size);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     DropdownMenuPrimitive.Item,
     {
       "data-slot": "dropdown-menu-item",
@@ -1455,7 +1506,7 @@ function DropdownMenuLabel({
   ...props
 }) {
   const resolvedSize = useDropdownMenuSize(size);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     DropdownMenuPrimitive.Label,
     {
       "data-slot": "dropdown-menu-label",
@@ -1473,7 +1524,7 @@ function DropdownMenuSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     DropdownMenuPrimitive.Separator,
     {
       "data-slot": "dropdown-menu-separator",
@@ -1486,7 +1537,7 @@ function DropdownMenuShortcut({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "span",
     {
       "data-slot": "dropdown-menu-shortcut",
@@ -1501,7 +1552,7 @@ function DropdownMenuShortcut({
 function DropdownMenuSub({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
 }
 function DropdownMenuSubTrigger({
   className,
@@ -1511,7 +1562,7 @@ function DropdownMenuSubTrigger({
   ...props
 }) {
   const resolvedSize = useDropdownMenuSize(size);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     DropdownMenuPrimitive.SubTrigger,
     {
       "data-slot": "dropdown-menu-sub-trigger",
@@ -1527,7 +1578,7 @@ function DropdownMenuSubTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons5.ChevronRightIcon, { className: "ml-auto size-4 text-(--icon-primary)" })
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons5.ChevronRightIcon, { className: "ml-auto size-4 text-(--icon-primary)" })
       ]
     }
   );
@@ -1538,7 +1589,7 @@ function DropdownMenuSubContent({
   ...props
 }) {
   const resolvedSize = useDropdownMenuSize(size);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownMenuSizeContext.Provider, { value: resolvedSize, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuSizeContext.Provider, { value: resolvedSize, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     DropdownMenuPrimitive.SubContent,
     {
       "data-slot": "dropdown-menu-sub-content",
@@ -1554,7 +1605,7 @@ function DropdownMenuSubContent({
 }
 
 // src/components/Content/Menu.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var Menu = (props) => {
   const {
     trigger,
@@ -1568,9 +1619,9 @@ var Menu = (props) => {
     onOpenChange,
     modal
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DropdownMenu, { open, onOpenChange, modal, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuTrigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(DropdownMenu, { open, onOpenChange, modal, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropdownMenuTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       DropdownMenuContent,
       {
         align,
@@ -1595,19 +1646,19 @@ var MenuSubContent = DropdownMenuSubContent;
 var MenuSubTrigger = DropdownMenuSubTrigger;
 
 // src/components/Inputs/Checkbox.tsx
-var React20 = __toESM(require("react"), 1);
+var React21 = __toESM(require("react"), 1);
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"), 1);
 var import_icons6 = require("@bubo-squared/icons");
 var import_icons7 = require("@bubo-squared/icons");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var Checkbox = React20.forwardRef(({ label, className, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { className: "inline-flex items-center gap-(--space-12) cursor-pointer select-none", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var Checkbox = React21.forwardRef(({ label, className, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: "inline-flex items-center gap-(--space-12) cursor-pointer select-none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       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)",
@@ -1619,27 +1670,27 @@ var Checkbox = React20.forwardRef(({ label, className, ...props }, forwardedRef)
           className
         ),
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons6.CheckIcon, { className: "h-5 w-5 hidden group-data-[state=checked]:block" }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons7.MinusIcon, { className: "h-5 w-5 hidden group-data-[state=indeterminate]:block" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons6.CheckIcon, { className: "h-5 w-5 hidden group-data-[state=checked]:block" }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons7.MinusIcon, { className: "h-5 w-5 hidden group-data-[state=indeterminate]:block" })
         ] })
       }
     ),
-    label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "paragraph-md-medium text-primary", children: label })
+    label && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "paragraph-md-medium text-primary", children: label })
   ] });
 });
 Checkbox.displayName = "Checkbox";
 
 // src/components/Inputs/Autocomplete.tsx
-var React23 = __toESM(require("react"), 1);
-var import_class_variance_authority14 = require("class-variance-authority");
+var React24 = __toESM(require("react"), 1);
+var import_class_variance_authority15 = require("class-variance-authority");
 
 // src/components/Inputs/InputShell.tsx
-var React21 = __toESM(require("react"), 1);
-var import_class_variance_authority13 = require("class-variance-authority");
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var inputShellVariants = (0, import_class_variance_authority13.cva)(
-  "group flex w-full items-center rounded-4 border bg-(--background-primary) text-left cursor-text border-secondary",
+var React22 = __toESM(require("react"), 1);
+var import_class_variance_authority14 = require("class-variance-authority");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var inputShellVariants = (0, import_class_variance_authority14.cva)(
+  "group flex w-full items-center rounded-8 border bg-(--background-primary) text-left cursor-text border-secondary",
   {
     variants: {
       size: {
@@ -1663,9 +1714,9 @@ var inputShellVariants = (0, import_class_variance_authority13.cva)(
     }
   }
 );
-var InputShell = React21.forwardRef(
+var InputShell = React22.forwardRef(
   ({ size = "md", status, disabled, className, ...rest }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "div",
       {
         ref,
@@ -1682,14 +1733,14 @@ var InputShell = React21.forwardRef(
 InputShell.displayName = "InputShell";
 
 // src/components/ui/input.tsx
-var React22 = __toESM(require("react"), 1);
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var Input = React22.forwardRef(
+var React23 = __toESM(require("react"), 1);
+var import_jsx_runtime25 = require("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__ */ (0, import_jsx_runtime24.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "input",
       {
         ref,
@@ -1708,8 +1759,8 @@ var Input = React22.forwardRef(
 Input.displayName = "Input";
 
 // src/components/Inputs/Autocomplete.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var inputTextVariants = (0, import_class_variance_authority14.cva)("truncate", {
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var inputTextVariants = (0, import_class_variance_authority15.cva)("truncate", {
   variants: {
     size: {
       sm: "paragraph-md",
@@ -1722,7 +1773,7 @@ var inputTextVariants = (0, import_class_variance_authority14.cva)("truncate", {
     size: "lg"
   }
 });
-var optionVariants = (0, import_class_variance_authority14.cva)(
+var optionVariants = (0, import_class_variance_authority15.cva)(
   "w-full text-left hover:bg-(--background-secondary)",
   {
     variants: {
@@ -1742,7 +1793,7 @@ var optionVariants = (0, import_class_variance_authority14.cva)(
     }
   }
 );
-var iconWrapperVariants = (0, import_class_variance_authority14.cva)(
+var iconWrapperVariants = (0, import_class_variance_authority15.cva)(
   "flex items-center justify-center shrink-0 text-(--icon-primary)",
   {
     variants: {
@@ -1761,7 +1812,7 @@ var iconWrapperVariants = (0, import_class_variance_authority14.cva)(
     }
   }
 );
-var Autocomplete = React23.forwardRef((props, forwardedRef) => {
+var Autocomplete = React24.forwardRef((props, forwardedRef) => {
   const {
     label,
     hint,
@@ -1793,17 +1844,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;
@@ -1815,12 +1866,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;
@@ -1939,8 +1990,8 @@ var Autocomplete = React23.forwardRef((props, forwardedRef) => {
   const activeDescendantId = activeIndex >= 0 ? `${inputId}-option-${activeIndex}` : void 0;
   const showLeadingIcon = !!leadingIcon;
   const showTrailingIcon = !!trailingIcon;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Field, { label, hint, hideHint, status, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "relative w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Field, { label, hint, hideHint, status, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "relative w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
       InputShell,
       {
         size,
@@ -1949,8 +2000,8 @@ var Autocomplete = React23.forwardRef((props, forwardedRef) => {
         className,
         onClick: handleContainerClick,
         children: [
-          showLeadingIcon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: cn(iconWrapperVariants({ size, disabled: !!disabled })), children: leadingIcon }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          showLeadingIcon && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: cn(iconWrapperVariants({ size, disabled: !!disabled })), children: leadingIcon }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             Input,
             {
               ref: setInputRef,
@@ -1973,11 +2024,11 @@ var Autocomplete = React23.forwardRef((props, forwardedRef) => {
               ...inputProps
             }
           ),
-          showTrailingIcon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: cn(iconWrapperVariants({ size, disabled: !!disabled })), children: trailingIcon })
+          showTrailingIcon && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: cn(iconWrapperVariants({ size, disabled: !!disabled })), children: trailingIcon })
         ]
       }
     ),
-    showDropdown && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    showDropdown && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "div",
       {
         className: cn(
@@ -1986,27 +2037,27 @@ var Autocomplete = React23.forwardRef((props, forwardedRef) => {
           dropdownScrollClass,
           dropdownClassName
         ),
-        children: loading ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        children: loading ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           "div",
           {
             className: cn(optionVariants({ size }), "px-(--space-8) pr-(--space-16) text-secondary"),
             "aria-live": "polite",
             children: loadingText
           }
-        ) : options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        ) : options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           "div",
           {
             className: cn(optionVariants({ size }), "px-(--space-8) pr-(--space-16) text-secondary"),
             "aria-live": "polite",
             children: noOptionsText
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           "ul",
           {
             id: listboxId,
             role: "listbox",
             className: cn("flex flex-col", listboxClassName),
-            children: options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            children: options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               "li",
               {
                 id: `${inputId}-option-${index}`,
@@ -2032,13 +2083,13 @@ var Autocomplete = React23.forwardRef((props, forwardedRef) => {
 Autocomplete.displayName = "Autocomplete";
 
 // src/components/Inputs/Select.tsx
-var React24 = __toESM(require("react"), 1);
+var React25 = __toESM(require("react"), 1);
 var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
-var import_class_variance_authority15 = require("class-variance-authority");
+var import_class_variance_authority16 = require("class-variance-authority");
 var import_icons8 = require("@bubo-squared/icons");
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var selectTriggerVariants = (0, import_class_variance_authority15.cva)(
-  "group flex w-full items-center justify-between rounded-4 border bg-(--background-primary) p-2 text-left transition-[background-color] cursor-pointer hover:bg-(--background-primary-hover) disabled:bg-(--background-primary-disabled) disabled:text-primary-disabled disabled:cursor-default",
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var selectTriggerVariants = (0, import_class_variance_authority16.cva)(
+  "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: {
@@ -2059,7 +2110,7 @@ var selectTriggerVariants = (0, import_class_variance_authority15.cva)(
     }
   }
 );
-var textVariants = (0, import_class_variance_authority15.cva)("truncate", {
+var textVariants = (0, import_class_variance_authority16.cva)("truncate", {
   variants: {
     size: {
       sm: "paragraph-md",
@@ -2080,7 +2131,7 @@ var textVariants = (0, import_class_variance_authority15.cva)("truncate", {
     hasValue: false
   }
 });
-var selectIconVariants = (0, import_class_variance_authority15.cva)("flex items-center justify-center shrink-0", {
+var selectIconVariants = (0, import_class_variance_authority16.cva)("flex items-center justify-center shrink-0", {
   variants: {
     size: {
       sm: "size-4",
@@ -2098,7 +2149,7 @@ var selectIconVariants = (0, import_class_variance_authority15.cva)("flex items-
     disabled: false
   }
 });
-var selectButtonVariants = (0, import_class_variance_authority15.cva)(
+var selectButtonVariants = (0, import_class_variance_authority16.cva)(
   "flex w-full items-center gap-2 pl-(--space-8) pr-(--space-16) text-left paragraph-lg text-primary hover:bg-(--background-secondary)",
   {
     variants: {
@@ -2111,7 +2162,7 @@ var selectButtonVariants = (0, import_class_variance_authority15.cva)(
     }
   }
 );
-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.",
@@ -2132,10 +2183,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 : "";
@@ -2164,7 +2215,7 @@ var Select = React24.forwardRef((props, forwardedRef) => {
       setOpen(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     Field,
     {
       label,
@@ -2172,7 +2223,7 @@ var Select = React24.forwardRef((props, forwardedRef) => {
       hideHint,
       status,
       disabled,
-      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
         SelectPrimitive.Root,
         {
           value: currentValue,
@@ -2183,7 +2234,7 @@ var Select = React24.forwardRef((props, forwardedRef) => {
           name,
           required,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
               "button",
               {
                 ref: forwardedRef,
@@ -2205,18 +2256,18 @@ var Select = React24.forwardRef((props, forwardedRef) => {
                 "data-open": isOpen || void 0,
                 ...buttonProps,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectPrimitive.Value, { placeholder }),
-                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectPrimitive.Value, { placeholder }),
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                     "span",
                     {
                       className: cn(selectIconVariants({ size, disabled: !!disabled })),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_icons8.ChevronDownIcon, {})
+                      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons8.ChevronDownIcon, {})
                     }
                   ) })
                 ]
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               SelectPrimitive.Content,
               {
                 position: "popper",
@@ -2225,11 +2276,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__ */ (0, import_jsx_runtime26.jsx)(SelectPrimitive.Viewport, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-col", children: [
-                  hasValue && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: cn("bg-(--background-neutral)"), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectPrimitive.Viewport, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col", children: [
+                  hasValue && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: cn("bg-(--background-neutral)"), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                     "button",
                     {
                       type: "button",
@@ -2241,7 +2292,7 @@ var Select = React24.forwardRef((props, forwardedRef) => {
                       children: "Clear"
                     }
                   ) }),
-                  options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                  options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                     SelectPrimitive.Item,
                     {
                       value: opt.value,
@@ -2250,7 +2301,7 @@ var Select = React24.forwardRef((props, forwardedRef) => {
                         "data-highlighted:bg-(--background-secondary) data-highlighted:outline-none",
                         "data-[state=checked]:bg-(--background-secondary)"
                       ),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: selectButtonVariants({ size }), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectPrimitive.ItemText, { children: opt.label }) })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: selectButtonVariants({ size }), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectPrimitive.ItemText, { children: opt.label }) })
                     },
                     opt.value
                   ))
@@ -2266,11 +2317,11 @@ var Select = React24.forwardRef((props, forwardedRef) => {
 Select.displayName = "Select";
 
 // src/components/Inputs/PasswordInput.tsx
-var React25 = __toESM(require("react"), 1);
-var import_class_variance_authority16 = require("class-variance-authority");
+var React26 = __toESM(require("react"), 1);
+var import_class_variance_authority17 = require("class-variance-authority");
 var import_icons9 = require("@bubo-squared/icons");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var passwordTextVariants = (0, import_class_variance_authority16.cva)("truncate", {
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var passwordTextVariants = (0, import_class_variance_authority17.cva)("truncate", {
   variants: {
     size: {
       sm: "paragraph-md",
@@ -2288,7 +2339,7 @@ var passwordTextVariants = (0, import_class_variance_authority16.cva)("truncate"
     disabled: false
   }
 });
-var iconWrapperVariants2 = (0, import_class_variance_authority16.cva)(
+var iconWrapperVariants2 = (0, import_class_variance_authority17.cva)(
   "flex items-center justify-center shrink-0 text-(--icon-primary)",
   {
     variants: {
@@ -2307,7 +2358,7 @@ var iconWrapperVariants2 = (0, import_class_variance_authority16.cva)(
     }
   }
 );
-var actionButtonVariants = (0, import_class_variance_authority16.cva)(
+var actionButtonVariants = (0, import_class_variance_authority17.cva)(
   "flex items-center justify-center shrink-0 cursor-pointer bg-transparent border-0 p-0 text-left paragraph-sm text-(--icon-primary) hover:text-(--icon-primary-hover) focus:outline-none ",
   {
     variants: {
@@ -2326,7 +2377,7 @@ var actionButtonVariants = (0, import_class_variance_authority16.cva)(
     }
   }
 );
-var PasswordInput = React25.forwardRef((props, forwardedRef) => {
+var PasswordInput = React26.forwardRef((props, forwardedRef) => {
   const {
     label,
     hint,
@@ -2344,13 +2395,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;
@@ -2373,7 +2424,7 @@ var PasswordInput = React25.forwardRef((props, forwardedRef) => {
     }
     onChange?.(event);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     Field,
     {
       label,
@@ -2381,7 +2432,7 @@ var PasswordInput = React25.forwardRef((props, forwardedRef) => {
       hideHint,
       status,
       disabled,
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
         InputShell,
         {
           size,
@@ -2390,7 +2441,7 @@ var PasswordInput = React25.forwardRef((props, forwardedRef) => {
           className,
           onClick: handleContainerClick,
           children: [
-            showLeadingIcon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            showLeadingIcon && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               "span",
               {
                 className: cn(
@@ -2399,7 +2450,7 @@ var PasswordInput = React25.forwardRef((props, forwardedRef) => {
                 children: leadingIcon
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               Input,
               {
                 ref: setInputRef,
@@ -2414,7 +2465,7 @@ var PasswordInput = React25.forwardRef((props, forwardedRef) => {
                 ...inputProps
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               "button",
               {
                 type: "button",
@@ -2429,7 +2480,7 @@ var PasswordInput = React25.forwardRef((props, forwardedRef) => {
                   "cursor-pointer",
                   variant === "text" ? actionButtonVariants({ size, disabled: !!disabled }) : iconWrapperVariants2({ size, disabled: !!disabled })
                 ),
-                children: variant === "icon" ? isRevealed ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons9.EyeSlashIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons9.EyeIcon, {}) : isRevealed ? "Hide" : "Show"
+                children: variant === "icon" ? isRevealed ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons9.EyeSlashIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons9.EyeIcon, {}) : isRevealed ? "Hide" : "Show"
               }
             )
           ]
@@ -2446,58 +2497,6 @@ var import_icons11 = require("@bubo-squared/icons");
 var RPNInput = __toESM(require("react-phone-number-input"), 1);
 var import_flags = __toESM(require("react-phone-number-input/flags"), 1);
 
-// src/components/ui/button.tsx
-var React26 = require("react");
-var import_react_slot7 = require("@radix-ui/react-slot");
-var import_class_variance_authority17 = require("class-variance-authority");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var buttonVariants2 = (0, import_class_variance_authority17.cva)(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-0 focus-visible:shadow-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-white hover:bg-destructive/90 dark:bg-destructive/60",
-        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-function Button2({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}) {
-  const Comp = asChild ? import_react_slot7.Slot : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-    Comp,
-    {
-      "data-slot": "button",
-      "data-variant": variant,
-      "data-size": size,
-      className: cn(buttonVariants2({ variant, size, className })),
-      ...props
-    }
-  );
-}
-
 // src/components/ui/command.tsx
 var React28 = require("react");
 var import_cmdk = require("cmdk");
@@ -2813,7 +2812,7 @@ function ScrollBar({
 // src/components/Inputs/PhoneInput.tsx
 var import_class_variance_authority18 = require("class-variance-authority");
 var import_jsx_runtime33 = require("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 = (0, import_class_variance_authority18.cva)(
   "flex w-full",
   {
@@ -2982,11 +2981,11 @@ var CountrySelect = ({
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-          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__ */ (0, import_jsx_runtime33.jsx)(
@@ -3013,7 +3012,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
             ),
@@ -3709,7 +3708,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"
@@ -3787,7 +3786,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` },
@@ -3798,7 +3797,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: {
@@ -3948,7 +3947,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",
@@ -4338,6 +4337,7 @@ var Popover2 = (props) => {
     className,
     placement = "bottom",
     offset = 10,
+    customContent,
     children
   } = props;
   const hasStrapline = typeof strapline === "string" ? strapline.trim() !== "" : strapline != null;
@@ -4351,7 +4351,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) {
@@ -4395,15 +4395,15 @@ var Popover2 = (props) => {
         className: cn(popoverClasses, className),
         children: [
           showArrow && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PopoverArrow, { className: popoverArrowClasses }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "grid gap-4", children: [
+          customContent ? typeof customContent === "function" ? customContent({ close: () => setOpen(false), ok: handleOk, cancel: handleCancel }) : customContent : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "grid gap-4", children: [
             /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "space-y-2", children: [
               hasStrapline && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "caption text-secondary", children: strapline }),
               /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h4", { className: "subtitle-medium text-primary", children: title }),
               hasDescription && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "paragraph-sm text-primary", children: description })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex justify-start items-center gap-4 flex-wrap", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Button, { size: "sm", variant: "secondary", onClick: handleCancel, children: cancelText || "Cancel" }),
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Button, { size: "sm", variant: "primary", onClick: handleOk, children: okText || "Ok" })
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Button2, { size: "sm", variant: "secondary", onClick: handleCancel, children: cancelText || "Cancel" }),
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Button2, { size: "sm", variant: "primary", onClick: handleOk, children: okText || "Ok" })
             ] })
           ] })
         ]
@@ -4441,7 +4441,7 @@ var React43 = __toESM(require("react"), 1);
 
 // src/components/ui/breadcrumb.tsx
 var React42 = require("react");
-var import_react_slot8 = require("@radix-ui/react-slot");
+var import_react_slot6 = require("@radix-ui/react-slot");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var breadcrumbItemClasses = "h6-title inline-flex items-center gap-1.5 text-(--color-secondary) hover:text-(--color-primary-hover) focus-within:text-(--color-secondary-focus) [&_[aria-current=page]]:font-medium [&_[aria-current=page]]:text-primary";
 var disabledItemClasses = "text-primary-disabled cursor-default pointer-events-none";
@@ -4528,7 +4528,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) : [];
@@ -4538,7 +4547,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__ */ (0, import_jsx_runtime45.jsxs)(React43.Fragment, { children: [
-        isEllipsis ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BreadcrumbItem, { className: cn(breadcrumbItemBase, props.breadcrumbItemClassName), children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(DropdownMenu, { children: [
+        isEllipsis ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BreadcrumbItem, { className: cn(breadcrumbItemBase, breadcrumbItemClassName), children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(DropdownMenu, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
             "button",
             {
@@ -4577,14 +4586,14 @@ var Breadcrumbs = React43.forwardRef(
               }) })
             }
           )
-        ] }) }) : isLast ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BreadcrumbItem, { className: cn(breadcrumbItemBase, props.breadcrumbItemClassName), children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        ] }) }) : isLast ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BreadcrumbItem, { className: cn(breadcrumbItemBase, breadcrumbItemClassName), children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           BreadcrumbPage,
           {
-            className: cn("h6-title-medium cursor-pointer", props.breadcrumbPageClassName),
+            className: cn("h6-title-medium cursor-pointer", breadcrumbPageClassName),
             children: child
           }
-        ) }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BreadcrumbItem, { className: cn(breadcrumbItemBase, props.breadcrumbItemClassName), children: child }),
-        !isLast && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BreadcrumbSeparator, { className: cn(breadcrumbSeparatorVariants, props.separatorClassName), children: separator })
+        ) }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BreadcrumbItem, { className: cn(breadcrumbItemBase, breadcrumbItemClassName), children: child }),
+        !isLast && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BreadcrumbSeparator, { className: cn(breadcrumbSeparatorVariants, separatorClassName), children: separator })
       ] }, key);
     }) }) });
   }