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

@bubo-squared/ui-framework 0.2.27 → 0.2.29

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

Files changed (8) hide show

package/dist/index.cjs CHANGED Viewed

@@ -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,23 +634,23 @@ 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: {
       size: {
-        "20": "w-5 h-5 hover:border-2 focus-visible:border-2",
-        "24": "w-6 h-6 hover:border-2 focus-visible:border-2",
-        "32": "w-8 h-8 hover:border-2 focus-visible:border-2",
-        "40": "w-10 h-10 hover:border-2 focus-visible:border-2",
-        "48": "w-12 h-12 hover:border-2 focus-visible:border-2",
-        "56": "w-14 h-14 hover:border-4 focus-visible:border-4",
-        "64": "w-16 h-16 hover:border-4 focus-visible:border-4"
+        "20": "min-w-5 min-h-5 hover:border-2 focus-visible:border-2",
+        "24": "min-w-6 min-h-6 hover:border-2 focus-visible:border-2",
+        "32": "min-w-8 min-h-8 hover:border-2 focus-visible:border-2",
+        "40": "min-w-10 min-h-10 hover:border-2 focus-visible:border-2",
+        "48": "min-w-12 min-h-12 hover:border-2 focus-visible:border-2",
+        "56": "min-w-14 min-h-14 hover:border-4 focus-visible:border-4",
+        "64": "min-w-16 min-h-16 hover:border-4 focus-visible:border-4"
       }
     },
     defaultVariants: {
@@ -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,18 +677,18 @@ 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: {
       size: {
-        "20": "size-3 [&>svg]:size-3",
-        "24": "size-3.5 [&>svg]:size-3.5",
-        "32": "size-4 [&>svg]:size-4",
-        "40": "size-5 [&>svg]:size-5",
-        "48": "size-6 [&>svg]:size-6",
-        "56": "size-7 [&>svg]:size-7",
-        "64": "size-8 [&>svg]:size-8"
+        "20": "min-h-3 min-w-3 [&>svg]:size-3",
+        "24": "min-h-3.5 min-w-3.5 [&>svg]:size-3.5",
+        "32": "min-h-4 min-w-4 [&>svg]:size-4",
+        "40": "min-h-5 min-w-5 [&>svg]:size-5",
+        "48": "min-h-6 min-w-6 [&>svg]:size-6",
+        "56": "min-h-7 min-w-7 [&>svg]:size-7",
+        "64": "min-h-8 min-w-8 [&>svg]:size-8"
       }
     },
     defaultVariants: {
@@ -645,11 +696,11 @@ var avatarIconVariants = (0, import_class_variance_authority6.cva)(
     }
   }
 );
-var Avatar = React7.forwardRef(
+var Avatar = React8.forwardRef(
   (props, ref) => {
     const {
       asChild = false,
-      variant = "initial",
+      variant = "initials",
       size = "32",
       initials = "RA",
       src,
@@ -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 === "initial" && /* @__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);
     }) }) });
   }