@bubo-squared/ui-framework 0.2.31 → 0.2.32

package/dist/index.js

@@ -701,28 +701,27 @@ Typography.displayName = "Typography";
 import * as React10 from "react";
 import { Slot as Slot4 } from "@radix-ui/react-slot";
 import { cva as cva8 } from "class-variance-authority";
-import { Fragment, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var badgeVariants = cva8(
-  "inline-flex items-center justify-center rounded-4 leading-none whitespace-nowrap gap-1 py-0",
+  "inline-flex items-center justify-center rounded-full leading-none whitespace-nowrap gap-1 py-0 font-normal",
   {
     variants: {
       size: {
-        sm: "px-1.5 paragraph-sm",
-        md: "px-2 paragraph-md",
-        lg: "px-2 subtitle",
-        xl: "px-2.5 h6-title"
+        sm: "px-2.5 paragraph-sm",
+        md: "px-3 paragraph-md",
+        lg: "px-3.5 subtitle",
+        xl: "px-4 h6-title"
       },
       variant: {
-        primary: "bg-(--background-secondary) text-primary",
-        secondary: "bg-(--background-primary) border-1 border-primary text-primary",
+        primary: "bg-(--color-primary) text-(--color-primary-inverse)",
+        secondary: "bg-(--background-secondary) text-primary",
+        outline: "bg-(--background-primary) text-primary shadow-[inset_0_0_0_1px_var(--border-secondary)]",
         active: "bg-ac-lilac text-badge-black",
         informal: "bg-ac-neon-blue text-badge-black",
         success: "bg-ac-neon-green text-badge-black",
         warning: "bg-ac-light-orange text-badge-black",
-        error: "bg-s-error-300 text-badge-black",
-        disabled: "bg-(--background-primary-disabled) border-1 border-primary-disabled text-primary-disabled",
-        "double-default": "bg-(--background-secondary) text-primary",
-        "double-current": "bg-color-ac-lilac text-badge-black"
+        error: "bg-(--color-s-error-500)/15 text-error",
+        disabled: "bg-(--background-primary-disabled) shadow-[inset_0_0_0_1px_var(--color-primary-disabled)] text-primary-disabled"
       }
     },
     defaultVariants: {
@@ -736,25 +735,20 @@ var Badge = React10.forwardRef(
     const {
       asChild = false,
       label,
-      value,
       size = "sm",
       variant = "primary",
       className,
       ...rest
     } = props;
-    const Comp = asChild ? Slot4 : "div";
-    const hasValue = typeof value === "string" ? value.trim() !== "" : value != null;
+    const Comp = asChild ? Slot4 : "span";
     return /* @__PURE__ */ jsx12(
       Comp,
       {
+        "data-slot": "badge",
         ref,
         className: cn(badgeVariants({ size, variant }), className),
         ...rest,
-        children: hasValue ? /* @__PURE__ */ jsxs6(Fragment, { children: [
-          /* @__PURE__ */ jsx12("span", { className: "font-normal", children: label }),
-          /* @__PURE__ */ jsx12("span", { className: "font-normal", children: ":" }),
-          /* @__PURE__ */ jsx12("span", { className: "font-medium", children: value })
-        ] }) : /* @__PURE__ */ jsx12("span", { className: "font-normal", children: label })
+        children: label
       }
     );
   }
@@ -836,7 +830,7 @@ BadgeDot.displayName = "BadgeDot";
 
 // src/components/Content/BadgeStatus.tsx
 import * as React13 from "react";
-import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
 var BadgeStatus = React13.forwardRef(
   (props, ref) => {
     const {
@@ -848,7 +842,7 @@ var BadgeStatus = React13.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__ */ jsxs7(
+    return /* @__PURE__ */ jsxs6(
       "div",
       {
         ref,
@@ -876,7 +870,7 @@ BadgeStatus.displayName = "BadgeStatus";
 // src/components/Content/Divider.tsx
 import "react";
 import { TargetIcon } from "@bubo-squared/icons";
-import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 var gapBySize = {
   sm: "gap-2",
   md: "gap-3",
@@ -932,7 +926,7 @@ var Divider = (props) => {
       ...divProps
     } = props;
     const textLabel = label ?? "OR";
-    return /* @__PURE__ */ jsxs8(
+    return /* @__PURE__ */ jsxs7(
       "div",
       {
         className: wrapperClass,
@@ -968,7 +962,7 @@ var Divider = (props) => {
       className: _className,
       ...divProps
     } = props;
-    return /* @__PURE__ */ jsxs8(
+    return /* @__PURE__ */ jsxs7(
       "div",
       {
         className: wrapperClass,
@@ -1001,7 +995,7 @@ var Divider = (props) => {
       className: _className,
       ...divProps
     } = props;
-    return /* @__PURE__ */ jsxs8(
+    return /* @__PURE__ */ jsxs7(
       "div",
       {
         className: wrapperClass,
@@ -1034,7 +1028,7 @@ var Divider = (props) => {
       className: _className,
       ...divProps
     } = props;
-    return /* @__PURE__ */ jsxs8(
+    return /* @__PURE__ */ jsxs7(
       "div",
       {
         className: wrapperClass,
@@ -1066,7 +1060,7 @@ import * as React16 from "react";
 
 // src/components/Inputs/Field.tsx
 import * as React15 from "react";
-import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 var fieldBase = "flex flex-col gap-2 items-start";
 var Field = (props) => {
   const {
@@ -1086,8 +1080,8 @@ var Field = (props) => {
   const hintId = hasHint ? `${fieldId}-hint` : void 0;
   const hintColorClass = disabled ? "text-primary-disabled" : status === "success" ? "text-(--color-success)" : status === "error" ? "text-(--color-error)" : "text-(--color-secondary)";
   const labelColorClass = disabled ? "text-primary-disabled" : "text-primary";
-  return /* @__PURE__ */ jsxs9("div", { className: cn(fieldBase, className), children: [
-    hasLabel && /* @__PURE__ */ jsxs9("div", { className: "flex w-full items-center justify-between", children: [
+  return /* @__PURE__ */ jsxs8("div", { className: cn(fieldBase, className), children: [
+    hasLabel && /* @__PURE__ */ jsxs8("div", { className: "flex w-full items-center justify-between", children: [
       /* @__PURE__ */ jsx17("label", { id: labelId, className: cn("paragraph-sm", labelColorClass), children: label }),
       labelRight
     ] }),
@@ -1190,7 +1184,7 @@ import {
   PlusIcon,
   StarIcon
 } from "@bubo-squared/icons";
-import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
 var iconStatusVariants = cva11(
   "inline-flex size-5 items-center justify-center rounded-full border-1 border-(--color-primary-inverse) p-1",
   {
@@ -1233,7 +1227,7 @@ var StatusAvatar = React17.forwardRef((props, ref) => {
     );
   }
   const iconVariant = variant;
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       ref,
@@ -1255,23 +1249,77 @@ StatusAvatar.displayName = "StatusAvatar";
 import * as React18 from "react";
 import { Slot as Slot5 } from "@radix-ui/react-slot";
 import { cva as cva12 } from "class-variance-authority";
-import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 var tagVariants = cva12(
-  "inline-flex flex-row items-center justify-center rounded-6 gap-2 px-3 overflow-hidden border-1 border-secondary bg-(--background-neutral) focus:border-brand focus-ring-primary ",
+  "inline-flex flex-row items-center justify-center gap-1.5 overflow-hidden border border-secondary bg-tag focus:border-brand focus-ring-primary ",
   {
     variants: {
       size: {
-        sm: "py-0.5",
-        md: "py-1.5"
+        sm: "h-6",
+        md: "h-7",
+        lg: "h-8",
+        xl: "h-9"
+      },
+      rounded: {
+        true: "rounded-full",
+        false: "rounded-8"
       }
     },
     defaultVariants: {
-      size: "sm"
+      size: "sm",
+      rounded: false
     }
   }
 );
-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 calculateXPadding = (size, hasTrailing, hasLeading) => {
+  if (!hasTrailing && !hasLeading) {
+    return size === "sm" ? "px-2.5" : "px-3";
+  } else if (hasTrailing && !hasLeading) {
+    return size === "sm" ? "pl-2.5 pr-1.25" : "pl-3 pr-1.5";
+  } else if (!hasTrailing && hasLeading) {
+    return size === "sm" ? "pl-1.25 pr-2.5" : "pl-1.5 pr-3";
+  } else {
+    return size === "sm" ? "px-1.25" : "px-1.5";
+  }
+};
+var disabledTag = "pointer-events-none border-secondary-disabled bg-tag-disabled text-primary-disabled";
+var calculateIconClasses = (size) => {
+  switch (size) {
+    case "sm":
+      return "flex items-center justify-center size-4 [&>*]:size-4 shrink-0";
+    case "md":
+      return "flex items-center justify-center size-5 [&>*]:size-5 shrink-0";
+    case "lg":
+      return "flex items-center justify-center size-5 [&>*]:size-5 shrink-0";
+    case "xl":
+      return "flex items-center justify-center size-6 [&>*]:size-6 shrink-0";
+  }
+};
+var keyTextClassBySize = {
+  sm: "paragraph-sm cursor-default",
+  md: "paragraph-md cursor-default",
+  lg: "paragraph-lg cursor-default",
+  xl: "subtitle cursor-default"
+};
+var valueTextClassBySize = {
+  sm: "paragraph-sm-medium cursor-default",
+  md: "paragraph-md-medium cursor-default",
+  lg: "paragraph-lg-medium cursor-default",
+  xl: "subtitle-medium cursor-default"
+};
+var labelTextClassBySize = {
+  sm: "paragraph-sm cursor-default",
+  md: "paragraph-md cursor-default",
+  lg: "paragraph-lg cursor-default",
+  xl: "subtitle cursor-default"
+};
+var getTextColor = (type, disabled) => {
+  if (disabled) return "";
+  else if (type === "key") return "text-secondary";
+  else if (type === "value") return "text-primary";
+  else if (type === "label") return "text-primary";
+  return "text-primary";
+};
 var Tag = React18.forwardRef(
   (props, ref) => {
     const {
@@ -1287,20 +1335,21 @@ var Tag = React18.forwardRef(
     const Comp = asChild ? Slot5 : "div";
     const leading = props.leadingIcon && React18.isValidElement(props.leadingIcon) ? React18.cloneElement(props.leadingIcon, { disabled, ...props.leadingIcon.props }) : null;
     const trailing = props.trailingIcon && React18.isValidElement(props.trailingIcon) ? React18.cloneElement(props.trailingIcon, { disabled, ...props.trailingIcon.props }) : null;
-    return /* @__PURE__ */ jsxs11(
+    return /* @__PURE__ */ jsxs10(
       Comp,
       {
-        className: cn(tagVariants({ size }), disabled && disabledTag, className),
+        className: cn(tagVariants({ size, rounded: props.rounded }), calculateXPadding(size, !!trailing, !!leading), disabled && disabledTag, className),
+        "data-slot": "tag",
         ref,
         ...rest,
         children: [
-          leading && /* @__PURE__ */ jsx20("div", { className: iconClasses, children: leading }),
-          hasValue ? /* @__PURE__ */ jsxs11("div", { className: "flex flex-row gap-1 items-center", children: [
-            /* @__PURE__ */ jsx20("span", { className: "text-primary paragraph-lg mb-0! cursor-default font-normal", children: label }),
-            /* @__PURE__ */ jsx20("span", { className: "text-primary paragraph-lg mb-0! cursor-default font-normal", children: ":" }),
-            /* @__PURE__ */ jsx20("span", { className: "text-primary paragraph-lg-medium mb-0! cursor-default font-medium", children: value })
-          ] }) : /* @__PURE__ */ jsx20("span", { className: "text-primary paragraph-lg mb-0! cursor-default", children: label }),
-          trailing && /* @__PURE__ */ jsx20("div", { className: iconClasses, children: trailing })
+          leading && /* @__PURE__ */ jsx20("div", { className: cn(disabled ? "text-primary-disabled" : "text-primary", calculateIconClasses(size)), children: leading }),
+          hasValue ? /* @__PURE__ */ jsxs10("div", { className: "flex flex-row items-center gap-1", children: [
+            /* @__PURE__ */ jsx20("span", { className: cn(keyTextClassBySize[size], getTextColor("key", disabled)), children: label }),
+            /* @__PURE__ */ jsx20("span", { className: cn(keyTextClassBySize[size], getTextColor("key", disabled)), children: ":" }),
+            /* @__PURE__ */ jsx20("span", { className: cn(valueTextClassBySize[size], getTextColor("value", disabled)), children: value })
+          ] }) : /* @__PURE__ */ jsx20("span", { className: cn(labelTextClassBySize[size], getTextColor("label", disabled)), children: label }),
+          trailing && /* @__PURE__ */ jsx20("div", { className: cn(disabled ? "text-primary-disabled" : "text-primary", calculateIconClasses(size)), children: trailing })
         ]
       }
     );
@@ -1340,7 +1389,7 @@ var dropdownRowVariants = cva13(
 );
 
 // src/components/ui/dropdown-menu.tsx
-import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
 var DropdownMenuSizeContext = React19.createContext("lg");
 function useDropdownMenuSize(explicitSize) {
   const contextSize = React19.useContext(DropdownMenuSizeContext);
@@ -1482,7 +1531,7 @@ function DropdownMenuSubTrigger({
   ...props
 }) {
   const resolvedSize = useDropdownMenuSize(size);
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs11(
     DropdownMenuPrimitive.SubTrigger,
     {
       "data-slot": "dropdown-menu-sub-trigger",
@@ -1525,7 +1574,7 @@ function DropdownMenuSubContent({
 }
 
 // src/components/Content/Menu.tsx
-import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
 var Menu = (props) => {
   const {
     trigger,
@@ -1539,7 +1588,7 @@ var Menu = (props) => {
     onOpenChange,
     modal
   } = props;
-  return /* @__PURE__ */ jsxs13(DropdownMenu, { open, onOpenChange, modal, children: [
+  return /* @__PURE__ */ jsxs12(DropdownMenu, { open, onOpenChange, modal, children: [
     /* @__PURE__ */ jsx22(DropdownMenuTrigger, { asChild: true, children: trigger }),
     /* @__PURE__ */ jsx22(
       DropdownMenuContent,
@@ -1570,9 +1619,9 @@ import * as React21 from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { CheckIcon as CheckIcon2 } from "@bubo-squared/icons";
 import { MinusIcon } from "@bubo-squared/icons";
-import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
 var Checkbox = React21.forwardRef(({ label, className, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ jsxs14("label", { className: "inline-flex items-center gap-(--space-12) cursor-pointer select-none", children: [
+  return /* @__PURE__ */ jsxs13("label", { className: "inline-flex items-center gap-(--space-12) cursor-pointer select-none", children: [
     /* @__PURE__ */ jsx23(
       CheckboxPrimitive.Root,
       {
@@ -1590,7 +1639,7 @@ var Checkbox = React21.forwardRef(({ label, className, ...props }, forwardedRef)
           className
         ),
         ...props,
-        children: /* @__PURE__ */ jsxs14(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: [
+        children: /* @__PURE__ */ jsxs13(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: [
           /* @__PURE__ */ jsx23(CheckIcon2, { className: "h-5 w-5 hidden group-data-[state=checked]:block" }),
           /* @__PURE__ */ jsx23(MinusIcon, { className: "h-5 w-5 hidden group-data-[state=indeterminate]:block" })
         ] })
@@ -1679,7 +1728,7 @@ var Input = React23.forwardRef(
 Input.displayName = "Input";
 
 // src/components/Inputs/Autocomplete.tsx
-import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
 var inputTextVariants = cva15("truncate", {
   variants: {
     size: {
@@ -1910,8 +1959,8 @@ var Autocomplete = React24.forwardRef((props, forwardedRef) => {
   const activeDescendantId = activeIndex >= 0 ? `${inputId}-option-${activeIndex}` : void 0;
   const showLeadingIcon = !!leadingIcon;
   const showTrailingIcon = !!trailingIcon;
-  return /* @__PURE__ */ jsx26(Field, { label, hint, hideHint, status, disabled, children: /* @__PURE__ */ jsxs15("div", { className: "relative w-full", children: [
-    /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsx26(Field, { label, hint, hideHint, status, disabled, children: /* @__PURE__ */ jsxs14("div", { className: "relative w-full", children: [
+    /* @__PURE__ */ jsxs14(
       InputShell,
       {
         size,
@@ -2007,7 +2056,7 @@ import * as React25 from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { cva as cva16 } from "class-variance-authority";
 import { ChevronDownIcon as ChevronDownIcon2 } from "@bubo-squared/icons";
-import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 var selectTriggerVariants = cva16(
   "group flex w-full items-center justify-between rounded-8 border bg-(--background-primary) p-2 text-left transition-[background-color] cursor-pointer hover:bg-(--background-primary-hover) disabled:bg-(--background-primary-disabled) disabled:text-primary-disabled disabled:cursor-default",
   {
@@ -2143,7 +2192,7 @@ var Select = React25.forwardRef((props, forwardedRef) => {
       hideHint,
       status,
       disabled,
-      children: /* @__PURE__ */ jsxs16(
+      children: /* @__PURE__ */ jsxs15(
         SelectPrimitive.Root,
         {
           value: currentValue,
@@ -2154,7 +2203,7 @@ var Select = React25.forwardRef((props, forwardedRef) => {
           name,
           required,
           children: [
-            /* @__PURE__ */ jsx27(SelectPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs16(
+            /* @__PURE__ */ jsx27(SelectPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs15(
               "button",
               {
                 ref: forwardedRef,
@@ -2199,7 +2248,7 @@ var Select = React25.forwardRef((props, forwardedRef) => {
                   "min-w-343 rounded-8"
                 ),
                 style: { minWidth: "var(--radix-select-trigger-width)" },
-                children: /* @__PURE__ */ jsx27(SelectPrimitive.Viewport, { children: /* @__PURE__ */ jsxs16("div", { className: "flex flex-col", children: [
+                children: /* @__PURE__ */ jsx27(SelectPrimitive.Viewport, { children: /* @__PURE__ */ jsxs15("div", { className: "flex flex-col", children: [
                   hasValue && /* @__PURE__ */ jsx27("div", { className: cn("bg-(--background-neutral)"), children: /* @__PURE__ */ jsx27(
                     "button",
                     {
@@ -2240,7 +2289,7 @@ Select.displayName = "Select";
 import * as React26 from "react";
 import { cva as cva17 } from "class-variance-authority";
 import { EyeIcon, EyeSlashIcon } from "@bubo-squared/icons";
-import { jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
 var passwordTextVariants = cva17("truncate", {
   variants: {
     size: {
@@ -2352,7 +2401,7 @@ var PasswordInput = React26.forwardRef((props, forwardedRef) => {
       hideHint,
       status,
       disabled,
-      children: /* @__PURE__ */ jsxs17(
+      children: /* @__PURE__ */ jsxs16(
         InputShell,
         {
           size,
@@ -2519,19 +2568,11 @@ var createLucideIcon = (iconName, iconNode) => {
 var __iconNode = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
 var ChevronRight = createLucideIcon("chevron-right", __iconNode);
 
-// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/ellipsis.js
-var __iconNode2 = [
-  ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
-  ["circle", { cx: "19", cy: "12", r: "1", key: "1wjl8i" }],
-  ["circle", { cx: "5", cy: "12", r: "1", key: "1pcz8c" }]
-];
-var Ellipsis = createLucideIcon("ellipsis", __iconNode2);
-
 // src/components/ui/dialog.tsx
-import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
 
 // src/components/ui/command.tsx
-import { jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
 function Command({
   className,
   ...props
@@ -2552,7 +2593,7 @@ function CommandInput({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
       "data-slot": "command-input-wrapper",
@@ -2673,13 +2714,13 @@ function PopoverContent({
 // src/components/ui/scroll-area.tsx
 import "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-import { jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
 function ScrollArea({
   className,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs19(
     ScrollAreaPrimitive.Root,
     {
       "data-slot": "scroll-area",
@@ -2731,7 +2772,7 @@ function ScrollBar({
 
 // src/components/Inputs/PhoneInput.tsx
 import { cva as cva18 } from "class-variance-authority";
-import { jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
 var inputBase = "h-full rounded-8 border border-secondary bg-(--background-primary) hover:border-secondary-hover";
 var sizeBase = cva18(
   "flex w-full",
@@ -2888,7 +2929,7 @@ var CountrySelect = ({
   const scrollAreaRef = React31.useRef(null);
   const [searchValue, setSearchValue] = React31.useState("");
   const [isOpen, setIsOpen] = React31.useState(false);
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs20(
     Popover,
     {
       open: isOpen,
@@ -2900,7 +2941,7 @@ var CountrySelect = ({
         }
       },
       children: [
-        /* @__PURE__ */ jsx33(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs21(
+        /* @__PURE__ */ jsx33(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs20(
           Button,
           {
             type: "button",
@@ -2936,7 +2977,7 @@ var CountrySelect = ({
               dropdownWidthVariants({ size }),
               dropdownSurfaceClass
             ),
-            children: /* @__PURE__ */ jsxs21(Command, { className: "bg-transparent", children: [
+            children: /* @__PURE__ */ jsxs20(Command, { className: "bg-transparent", children: [
               /* @__PURE__ */ jsx33(
                 CommandInput,
                 {
@@ -2957,7 +2998,7 @@ var CountrySelect = ({
                   placeholder: "Search country..."
                 }
               ),
-              /* @__PURE__ */ jsx33(CommandList, { children: /* @__PURE__ */ jsxs21(ScrollArea, { ref: scrollAreaRef, className: "max-h-79", children: [
+              /* @__PURE__ */ jsx33(CommandList, { children: /* @__PURE__ */ jsxs20(ScrollArea, { ref: scrollAreaRef, className: "max-h-79", children: [
                 /* @__PURE__ */ jsx33(CommandEmpty, { children: "No country found." }),
                 /* @__PURE__ */ jsx33(CommandGroup, { className: "p-0", children: countryList.map(
                   ({ value, label }) => value ? /* @__PURE__ */ jsx33(
@@ -2997,7 +3038,7 @@ var CountrySelectOption = (props) => {
     onChange(country);
     onSelectComplete();
   };
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs20(
     CommandItem,
     {
       className: cn(countryOptionVariants({ size })),
@@ -3024,7 +3065,7 @@ var FlagComponent = ({ country, countryName }) => {
 // src/components/Inputs/RadioGroup.tsx
 import * as React32 from "react";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
 var RadioGroup = React32.forwardRef((props, forwardedRef) => {
   const {
     label,
@@ -3067,7 +3108,7 @@ var RadioGroup = React32.forwardRef((props, forwardedRef) => {
             isHorizontal ? "flex-row gap-6" : "flex-col gap-2",
             className
           ),
-          children: options.map((option) => /* @__PURE__ */ jsx34("div", { className: "relative inline-flex", children: /* @__PURE__ */ jsxs22(
+          children: options.map((option) => /* @__PURE__ */ jsx34("div", { className: "relative inline-flex", children: /* @__PURE__ */ jsxs21(
             RadioGroupPrimitive.Item,
             {
               value: option.value,
@@ -3143,7 +3184,7 @@ RadioGroup.displayName = "RadioGroup";
 import * as React33 from "react";
 import { cva as cva19 } from "class-variance-authority";
 import { SearchIcon as SearchIcon2 } from "@bubo-squared/icons";
-import { jsx as jsx35, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
 var searchTextVariants = cva19("truncate", {
   variants: {
     size: {
@@ -3202,7 +3243,7 @@ var SearchInput = React33.forwardRef((props, forwardedRef) => {
     inputRef.current?.focus();
   };
   const showTrailingIcon = !!trailingIcon;
-  return /* @__PURE__ */ jsx35("div", { className: "flex flex-col gap-2 items-start w-full", children: /* @__PURE__ */ jsx35("div", { className: "relative w-full", children: /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsx35("div", { className: "flex flex-col gap-2 items-start w-full", children: /* @__PURE__ */ jsx35("div", { className: "relative w-full", children: /* @__PURE__ */ jsxs22(
     InputShell,
     {
       size,
@@ -3239,7 +3280,7 @@ import * as React35 from "react";
 // src/components/Feedback/Tooltip.tsx
 import * as React34 from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { jsx as jsx36, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
 var TooltipArrow = TooltipPrimitive.Arrow;
 var REACT_FORWARD_REF_TYPE = /* @__PURE__ */ Symbol.for("react.forward_ref");
 var REACT_MEMO_TYPE = /* @__PURE__ */ Symbol.for("react.memo");
@@ -3304,7 +3345,7 @@ var Tooltip = (props) => {
   const { side, align } = mapPlacementToSideAndAlign(placement);
   const tooltipClasses = "group bg-(--background-tooltip) max-w-[calc(100vw-2rem)] shadow-card-md border-none rounded-4 py-1.5 px-2.5 [&>span]:scale-200 data-[state=delayed-open]:animate-in data-[state=instant-open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0 data-[state=instant-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-[state=instant-open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
   const tooltipArrowClasses = "relative fill-(--background-tooltip) transition-[filter,transform] group-data-[side=top]:top-[-2px] group-data-[side=top]:drop-shadow-[0px_1px_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)]";
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs23(
     TooltipPrimitive.Root,
     {
       open,
@@ -3314,7 +3355,7 @@ var Tooltip = (props) => {
       delayDuration,
       children: [
         /* @__PURE__ */ jsx36(TooltipPrimitive.Trigger, { asChild: true, children: trigger }),
-        /* @__PURE__ */ jsx36(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs24(
+        /* @__PURE__ */ jsx36(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs23(
           TooltipPrimitive.Content,
           {
             side,
@@ -3323,7 +3364,7 @@ var Tooltip = (props) => {
             className: cn(tooltipClasses, className),
             children: [
               showArrow && /* @__PURE__ */ jsx36(TooltipArrow, { className: tooltipArrowClasses }),
-              /* @__PURE__ */ jsxs24("div", { className: "grid", children: [
+              /* @__PURE__ */ jsxs23("div", { className: "grid", children: [
                 hasStrapline && /* @__PURE__ */ jsx36("span", { className: "caption text-secondary", children: strapline }),
                 /* @__PURE__ */ jsx36("h4", { className: "paragraph-md text-primary", children: title }),
                 hasDescription && /* @__PURE__ */ jsx36("p", { className: "paragraph-sm text-primary", children: description })
@@ -3338,7 +3379,7 @@ var Tooltip = (props) => {
 Tooltip.displayName = "Tooltip";
 
 // src/components/Inputs/Slider.tsx
-import { Fragment as Fragment2, jsx as jsx37, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
 var wrapperBase = "flex flex-col gap-2 items-start";
 var isRangeProps = (props) => {
   return Array.isArray(props.value) || Array.isArray(props.defaultValue);
@@ -3600,7 +3641,7 @@ var Slider = React35.forwardRef((props, forwardedRef) => {
         const second = formatNumber(valueToPercent(secondary));
         return `${first} - ${second}`;
       }
-      return /* @__PURE__ */ jsxs25(Fragment2, { children: [
+      return /* @__PURE__ */ jsxs24(Fragment, { children: [
         formatDisplayNode(primary),
         " - ",
         formatDisplayNode(secondary)
@@ -3674,14 +3715,14 @@ var Slider = React35.forwardRef((props, forwardedRef) => {
       }
     );
   };
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs24(
     "div",
     {
       className: wrapperBase,
       style: { marginInline: `${thumbRadius}px` },
       ref: forwardedRef,
       children: [
-        name && /* @__PURE__ */ jsxs25(Fragment2, { children: [
+        name && /* @__PURE__ */ jsxs24(Fragment, { children: [
           /* @__PURE__ */ jsx37(
             "input",
             {
@@ -3701,8 +3742,8 @@ var Slider = React35.forwardRef((props, forwardedRef) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs25("div", { className: cn("w-full flex flex-col gap-1", className), children: [
-          /* @__PURE__ */ jsx37("div", { className: "relative w-full", children: /* @__PURE__ */ jsxs25(
+        /* @__PURE__ */ jsxs24("div", { className: cn("w-full flex flex-col gap-1", className), children: [
+          /* @__PURE__ */ jsx37("div", { className: "relative w-full", children: /* @__PURE__ */ jsxs24(
             "div",
             {
               className: cn(
@@ -3761,7 +3802,7 @@ Slider.displayName = "Slider";
 // src/components/Inputs/TextArea.tsx
 import * as React36 from "react";
 import { MaximizeIcon } from "@bubo-squared/icons";
-import { jsx as jsx38, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs25 } from "react/jsx-runtime";
 var TextArea = React36.forwardRef((props, forwardedRef) => {
   const {
     label,
@@ -3863,7 +3904,7 @@ var TextArea = React36.forwardRef((props, forwardedRef) => {
       hideHint,
       status,
       disabled,
-      children: /* @__PURE__ */ jsxs26(
+      children: /* @__PURE__ */ jsxs25(
         "div",
         {
           className: cn(
@@ -3902,7 +3943,7 @@ var TextArea = React36.forwardRef((props, forwardedRef) => {
                 ...textareaProps
               }
             ),
-            showCharacterLimit && /* @__PURE__ */ jsxs26(
+            showCharacterLimit && /* @__PURE__ */ jsxs25(
               "span",
               {
                 className: cn(
@@ -3944,7 +3985,7 @@ TextArea.displayName = "TextArea";
 // src/components/Inputs/TextInput.tsx
 import * as React37 from "react";
 import { cva as cva20 } from "class-variance-authority";
-import { jsx as jsx39, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs26 } from "react/jsx-runtime";
 var inputTextVariants3 = cva20("truncate", {
   variants: {
     size: {
@@ -4032,7 +4073,7 @@ var TextInput = React37.forwardRef((props, forwardedRef) => {
       hideHint,
       status,
       disabled,
-      children: /* @__PURE__ */ jsxs27(
+      children: /* @__PURE__ */ jsxs26(
         InputShell,
         {
           size,
@@ -4087,10 +4128,10 @@ TextInput.displayName = "TextInput";
 
 // src/components/Inputs/Toggle.tsx
 import * as React38 from "react";
-import { jsx as jsx40, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs27 } from "react/jsx-runtime";
 var Toggle = React38.forwardRef((props, forwardedRef) => {
   const { label, className, disabled, ...inputProps } = props;
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs27(
     "label",
     {
       className: cn(
@@ -4098,7 +4139,7 @@ var Toggle = React38.forwardRef((props, forwardedRef) => {
         disabled ? "cursor-default" : "cursor-pointer"
       ),
       children: [
-        /* @__PURE__ */ jsxs28("span", { className: "relative inline-flex items-center", children: [
+        /* @__PURE__ */ jsxs27("span", { className: "relative inline-flex items-center", children: [
           /* @__PURE__ */ jsx40(
             "input",
             {
@@ -4179,7 +4220,7 @@ Toggle.displayName = "Toggle";
 
 // src/components/Inputs/WebsiteInput.tsx
 import * as React39 from "react";
-import { jsx as jsx41, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
 var WebsiteInput = React39.forwardRef((props, forwardedRef) => {
   const {
     hierarchy = "leading",
@@ -4216,11 +4257,11 @@ var WebsiteInput = React39.forwardRef((props, forwardedRef) => {
     size === "xl" ? "[&>svg]:w-6 [&>svg]:h-6" : size === "sm" ? "[&>svg]:w-4 [&>svg]:h-4" : "[&>svg]:w-5 [&>svg]:h-5",
     disabled ? "text-(--icon-primary-disabled)" : "text-(--icon-primary) group-hover:text-(--icon-primary-hover) group-focus-within:text-(--icon-primary-focus)"
   );
-  const leadingAddon = /* @__PURE__ */ jsxs29("div", { className: baseAddonClass, children: [
+  const leadingAddon = /* @__PURE__ */ jsxs28("div", { className: baseAddonClass, children: [
     /* @__PURE__ */ jsx41("div", { className: addonTextClass, children: protocolLabel }),
     icon != null && /* @__PURE__ */ jsx41("span", { className: iconWrapperClass, children: icon })
   ] });
-  const trailingAddon = /* @__PURE__ */ jsxs29("div", { className: baseAddonClass, children: [
+  const trailingAddon = /* @__PURE__ */ jsxs28("div", { className: baseAddonClass, children: [
     icon != null && /* @__PURE__ */ jsx41("span", { className: iconWrapperClass, children: icon }),
     /* @__PURE__ */ jsx41("div", { className: addonTextClass, children: protocolLabel })
   ] });
@@ -4242,7 +4283,7 @@ WebsiteInput.displayName = "WebsiteInput";
 // src/components/Feedback/Popover.tsx
 import * as React40 from "react";
 import * as PopoverPrimitive2 from "@radix-ui/react-popover";
-import { jsx as jsx42, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs29 } from "react/jsx-runtime";
 var PopoverArrow = PopoverPrimitive2.Arrow;
 var Popover2 = (props) => {
   const {
@@ -4310,9 +4351,9 @@ var Popover2 = (props) => {
     }
   };
   const { side, align } = mapPlacementToSideAndAlign2(placement);
-  return /* @__PURE__ */ jsxs30(Popover, { open, onOpenChange: handleOpenChange, children: [
+  return /* @__PURE__ */ jsxs29(Popover, { open, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsx42(PopoverTrigger, { asChild: true, children }),
-    /* @__PURE__ */ jsxs30(
+    /* @__PURE__ */ jsxs29(
       PopoverContent,
       {
         side,
@@ -4322,13 +4363,13 @@ var Popover2 = (props) => {
         ...rest,
         children: [
           showArrow && /* @__PURE__ */ jsx42(PopoverArrow, { className: popoverArrowClasses }),
-          customContent ? typeof customContent === "function" ? customContent({ close: () => handleOpenChange(false), ok: handleOk, cancel: handleCancel }) : customContent : /* @__PURE__ */ jsxs30("div", { className: "grid gap-4", children: [
-            /* @__PURE__ */ jsxs30("div", { className: "space-y-2", children: [
+          customContent ? typeof customContent === "function" ? customContent({ close: () => handleOpenChange(false), ok: handleOk, cancel: handleCancel }) : customContent : /* @__PURE__ */ jsxs29("div", { className: "grid gap-4", children: [
+            /* @__PURE__ */ jsxs29("div", { className: "space-y-2", children: [
               hasStrapline && /* @__PURE__ */ jsx42("span", { className: "caption text-secondary", children: strapline }),
               /* @__PURE__ */ jsx42("h4", { className: "subtitle-medium text-primary", children: title }),
               hasDescription && /* @__PURE__ */ jsx42("p", { className: "paragraph-sm text-primary", children: description })
             ] }),
-            /* @__PURE__ */ jsxs30("div", { className: "flex justify-start items-center gap-4 flex-wrap", children: [
+            /* @__PURE__ */ jsxs29("div", { className: "flex justify-start items-center gap-4 flex-wrap", children: [
               /* @__PURE__ */ jsx42(Button2, { size: "sm", variant: "secondary", onClick: handleCancel, children: cancelText || "Cancel" }),
               /* @__PURE__ */ jsx42(Button2, { size: "sm", variant: "primary", onClick: handleOk, children: okText || "Ok" })
             ] })
@@ -4369,8 +4410,8 @@ import * as React43 from "react";
 // src/components/ui/breadcrumb.tsx
 import "react";
 import { Slot as Slot6 } from "@radix-ui/react-slot";
-import { jsx as jsx44, jsxs as jsxs31 } from "react/jsx-runtime";
-var breadcrumbItemClasses = "h6-title inline-flex items-center gap-1.5 text-(--color-secondary) hover:text-(--color-primary-hover) focus-within:text-(--color-secondary-focus) [&_[aria-current=page]]:font-medium [&_[aria-current=page]]:text-primary";
+import { jsx as jsx44 } from "react/jsx-runtime";
+var breadcrumbItemClasses = "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";
 function Breadcrumb({ ...props }) {
   return /* @__PURE__ */ jsx44("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...props });
@@ -4394,7 +4435,6 @@ function BreadcrumbItem({ className, disabled, ...props }) {
     {
       "data-slot": "breadcrumb-item",
       className: cn(breadcrumbItemClasses, disabled && disabledItemClasses, className),
-      style: { marginBottom: "7px" },
       ...props
     }
   );
@@ -4423,36 +4463,16 @@ function BreadcrumbSeparator({
       "data-slot": "breadcrumb-separator",
       role: "presentation",
       "aria-hidden": "true",
-      className: cn("[&>svg]:size-6 [&>svg]:text-(--color-secondary)", className),
+      className: cn("text-secondary", className),
       ...props,
       children: children ?? /* @__PURE__ */ jsx44(ChevronRight, {})
     }
   );
 }
-function BreadcrumbEllipsis({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs31(
-    "span",
-    {
-      "data-slot": "breadcrumb-ellipsis",
-      role: "presentation",
-      "aria-hidden": "true",
-      className: cn("flex size-9 items-center justify-center", className),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx44(Ellipsis, { className: "size-4" }),
-        /* @__PURE__ */ jsx44("span", { className: "sr-only", children: "More" })
-      ]
-    }
-  );
-}
 
 // src/components/Navigation/Breadcrumbs.tsx
-import { jsx as jsx45, jsxs as jsxs32 } from "react/jsx-runtime";
-var breadcrumbSeparatorVariants = "size-5 relative bottom-1 [&>svg]:text-secondary group-disabled:text-secondary";
-var breadcrumbItemBase = "h6-title text-secondary hover:text-primary-hover";
+import { MoreHorizFullIcon } from "@bubo-squared/icons";
+import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
 var Breadcrumbs = React43.forwardRef(
   (props, ref) => {
     const {
@@ -4463,40 +4483,53 @@ var Breadcrumbs = React43.forwardRef(
       breadcrumbItemClassName,
       breadcrumbPageClassName,
       separatorClassName,
+      breadcrumbListClassName,
+      ellipsisItemClassName,
+      ellipsisTriggerClassName,
+      ellipsisContentClassName,
+      ellipsisGroupClassName,
+      ellipsisMenuItemClassName,
+      ellipsisAriaLabel = "Open breadcrumb menu",
       ...rest
     } = props;
     const items = React43.Children.toArray(children).filter(Boolean);
     const shouldCollapse = Boolean(ellipsis) && items.length >= 5;
     const hiddenItems = shouldCollapse ? items.slice(1, -2) : [];
     const displayItems = shouldCollapse ? [items[0], "__ELLIPSIS__", items[items.length - 2], items[items.length - 1]] : items;
-    return /* @__PURE__ */ jsx45(Breadcrumb, { ref, className, ...rest, children: /* @__PURE__ */ jsx45(BreadcrumbList, { children: displayItems.map((child, index) => {
+    return /* @__PURE__ */ jsx45(Breadcrumb, { ref, className: cn("mb-1.75", className), ...rest, children: /* @__PURE__ */ jsx45(BreadcrumbList, { className: breadcrumbListClassName, children: displayItems.map((child, index) => {
       const isEllipsis = child === "__ELLIPSIS__";
       const key = isEllipsis ? "__ellipsis" : React43.isValidElement(child) && child.key != null ? String(child.key) : String(index);
       const isLast = index === displayItems.length - 1;
-      return /* @__PURE__ */ jsxs32(React43.Fragment, { children: [
-        isEllipsis ? /* @__PURE__ */ jsx45(BreadcrumbItem, { className: cn(breadcrumbItemBase, breadcrumbItemClassName), children: /* @__PURE__ */ jsxs32(DropdownMenu, { children: [
+      return /* @__PURE__ */ jsxs30(React43.Fragment, { children: [
+        isEllipsis ? /* @__PURE__ */ jsx45(BreadcrumbItem, { className: cn(breadcrumbItemClassName, ellipsisItemClassName), children: /* @__PURE__ */ jsxs30(DropdownMenu, { children: [
           /* @__PURE__ */ jsx45(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx45(
-            "button",
+            Button,
             {
-              type: "button",
-              className: "inline-flex size-8 items-center justify-center rounded-4 hover:bg-(--background-secondary) focus-ring-primary text-secondary",
-              "aria-label": "Open breadcrumb menu",
-              children: /* @__PURE__ */ jsx45(BreadcrumbEllipsis, {})
+              variant: "ghost",
+              className: cn(
+                "inline-flex text-secondary hover:text-primary &[aria-expanded=true]:text-primary-focus items-center justify-center",
+                ellipsisTriggerClassName
+              ),
+              "aria-label": ellipsisAriaLabel,
+              "data-slot": "breadcrumb-ellipsis",
+              role: "presentation",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx45(MoreHorizFullIcon, {})
             }
           ) }),
           /* @__PURE__ */ jsx45(
             DropdownMenuContent,
             {
               align: "start",
-              className: "bg-(--background-neutral) border-secondary-hover shadow-card-md rounded-4",
-              children: /* @__PURE__ */ jsx45(DropdownMenuGroup, { children: hiddenItems.map((hidden, hiddenIndex) => {
+              className: ellipsisContentClassName,
+              children: /* @__PURE__ */ jsx45(DropdownMenuGroup, { className: ellipsisGroupClassName, children: hiddenItems.map((hidden, hiddenIndex) => {
                 const hiddenKey = React43.isValidElement(hidden) && hidden.key != null ? String(hidden.key) : `hidden-${hiddenIndex}`;
                 if (React43.isValidElement(hidden)) {
                   return /* @__PURE__ */ jsx45(
                     DropdownMenuItem,
                     {
                       asChild: true,
-                      className: "cursor-pointer paragraph-md text-primary focus:bg-(--background-secondary)",
+                      className: ellipsisMenuItemClassName,
                       children: hidden
                     },
                     hiddenKey
@@ -4505,7 +4538,7 @@ var Breadcrumbs = React43.forwardRef(
                 return /* @__PURE__ */ jsx45(
                   DropdownMenuItem,
                   {
-                    className: "cursor-pointer paragraph-md text-primary focus:bg-(--background-secondary)",
+                    className: ellipsisMenuItemClassName,
                     children: String(hidden)
                   },
                   hiddenKey
@@ -4513,14 +4546,8 @@ var Breadcrumbs = React43.forwardRef(
               }) })
             }
           )
-        ] }) }) : isLast ? /* @__PURE__ */ jsx45(BreadcrumbItem, { className: cn(breadcrumbItemBase, breadcrumbItemClassName), children: /* @__PURE__ */ jsx45(
-          BreadcrumbPage,
-          {
-            className: cn("h6-title-medium cursor-pointer", breadcrumbPageClassName),
-            children: child
-          }
-        ) }) : /* @__PURE__ */ jsx45(BreadcrumbItem, { className: cn(breadcrumbItemBase, breadcrumbItemClassName), children: child }),
-        !isLast && /* @__PURE__ */ jsx45(BreadcrumbSeparator, { className: cn(breadcrumbSeparatorVariants, separatorClassName), children: separator })
+        ] }) }) : isLast ? /* @__PURE__ */ jsx45(BreadcrumbItem, { className: breadcrumbItemClassName, children: /* @__PURE__ */ jsx45(BreadcrumbPage, { className: breadcrumbPageClassName, children: child }) }) : /* @__PURE__ */ jsx45(BreadcrumbItem, { className: breadcrumbItemClassName, children: child }),
+        !isLast && /* @__PURE__ */ jsx45(BreadcrumbSeparator, { className: separatorClassName, children: separator })
       ] }, key);
     }) }) });
   }
@@ -4529,8 +4556,8 @@ Breadcrumbs.displayName = "Breadcrumbs";
 
 // src/components/Logo/LogoIcon.tsx
 import { cva as cva21 } from "class-variance-authority";
-import { jsx as jsx46, jsxs as jsxs33 } from "react/jsx-runtime";
-var LogoIconSvg = (props) => /* @__PURE__ */ jsxs33("svg", { width: "89", height: "88", viewBox: "0 0 89 88", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+import { jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
+var LogoIconSvg = (props) => /* @__PURE__ */ jsxs31("svg", { width: "89", height: "88", viewBox: "0 0 89 88", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
   /* @__PURE__ */ jsx46("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M83.7156 3.88535C78.5352 -1.29512 70.136 -1.29512 64.9555 3.88535L43.9999 24.8409L43.9995 24.8405L62.3536 6.48637C52.2379 16.5949 35.8584 16.6179 25.7142 6.55523L23.4434 4.28438C18.2629 -0.896082 9.86373 -0.89608 4.68327 4.28438C-0.497191 9.46484 -0.49719 17.864 4.68327 23.0445L6.88526 25.2465C17.0191 35.3875 17.0168 51.8235 6.87859 61.9618L25.2395 43.6008L25.2398 43.601L3.88534 64.9555C-1.29512 70.136 -1.29511 78.5351 3.88535 83.7156C9.06581 88.8961 17.465 88.8961 22.6455 83.7156L25.6458 80.7151L25.6864 80.6747C35.7981 70.6137 52.1313 70.597 62.2636 80.6248L65.7534 84.1146C70.9339 89.2951 79.3331 89.2951 84.5135 84.1146C89.694 78.9342 89.694 70.535 84.5135 65.3545L62.76 43.601L62.7602 43.6009L81.1144 61.9552C70.9806 51.8142 70.9829 35.3782 81.1211 25.24L83.7156 22.6455C88.8961 17.465 88.8961 9.06581 83.7156 3.88535Z", fill: "#1685FF" }),
   /* @__PURE__ */ jsx46("path", { d: "M44.0667 50.4863C44.1213 50.4317 44.21 50.4317 44.2646 50.4863L48.6465 54.8682C48.6942 54.9158 48.7011 54.9907 48.663 55.0463L44.2812 61.4453C44.2256 61.5265 44.1057 61.5265 44.0501 61.4453L39.6683 55.0463C39.6302 54.9907 39.6371 54.9158 39.6848 54.8682L44.0667 50.4863Z", fill: "white" }),
   /* @__PURE__ */ jsx46("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M44.107 45.3938C44.0536 45.289 43.9013 45.289 43.8479 45.3938C41.8622 49.293 37.8104 51.9638 33.1347 51.9638C26.4991 51.9638 21.1199 46.5846 21.1199 39.9489C21.1199 33.3133 26.4991 27.9341 33.1347 27.9341C37.8104 27.9341 41.8622 30.6049 43.8479 34.5041C43.9013 34.6089 44.0536 34.6089 44.107 34.5041C46.0926 30.6049 50.1445 27.9341 54.8201 27.9341C61.4558 27.9341 66.835 33.3133 66.835 39.9489C66.835 46.5846 61.4558 51.9638 54.8201 51.9638C50.1445 51.9638 46.0926 49.293 44.107 45.3938Z", fill: "white" }),
@@ -4567,15 +4594,15 @@ var LogoIcon = ({ className, size = "md" }) => {
 
 // src/components/Logo/Logo.tsx
 import { cva as cva22 } from "class-variance-authority";
-import { jsx as jsx47, jsxs as jsxs34 } from "react/jsx-runtime";
-var LogoIconSvg2 = (props) => /* @__PURE__ */ jsxs34("svg", { width: "89", height: "88", viewBox: "0 0 89 88", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+import { jsx as jsx47, jsxs as jsxs32 } from "react/jsx-runtime";
+var LogoIconSvg2 = (props) => /* @__PURE__ */ jsxs32("svg", { width: "89", height: "88", viewBox: "0 0 89 88", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
   /* @__PURE__ */ jsx47("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M83.7156 3.88535C78.5352 -1.29512 70.136 -1.29512 64.9555 3.88535L43.9999 24.8409L43.9995 24.8405L62.3536 6.48637C52.2379 16.5949 35.8584 16.6179 25.7142 6.55523L23.4434 4.28438C18.2629 -0.896082 9.86373 -0.89608 4.68327 4.28438C-0.497191 9.46484 -0.49719 17.864 4.68327 23.0445L6.88526 25.2465C17.0191 35.3875 17.0168 51.8235 6.87859 61.9618L25.2395 43.6008L25.2398 43.601L3.88534 64.9555C-1.29512 70.136 -1.29511 78.5351 3.88535 83.7156C9.06581 88.8961 17.465 88.8961 22.6455 83.7156L25.6458 80.7151L25.6864 80.6747C35.7981 70.6137 52.1313 70.597 62.2636 80.6248L65.7534 84.1146C70.9339 89.2951 79.3331 89.2951 84.5135 84.1146C89.694 78.9342 89.694 70.535 84.5135 65.3545L62.76 43.601L62.7602 43.6009L81.1144 61.9552C70.9806 51.8142 70.9829 35.3782 81.1211 25.24L83.7156 22.6455C88.8961 17.465 88.8961 9.06581 83.7156 3.88535Z", fill: "#1685FF" }),
   /* @__PURE__ */ jsx47("path", { d: "M44.0667 50.4863C44.1213 50.4317 44.21 50.4317 44.2646 50.4863L48.6465 54.8682C48.6942 54.9158 48.7011 54.9907 48.663 55.0463L44.2812 61.4453C44.2256 61.5265 44.1057 61.5265 44.0501 61.4453L39.6683 55.0463C39.6302 54.9907 39.6371 54.9158 39.6848 54.8682L44.0667 50.4863Z", fill: "white" }),
   /* @__PURE__ */ jsx47("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M44.107 45.3938C44.0536 45.289 43.9013 45.289 43.8479 45.3938C41.8622 49.293 37.8104 51.9638 33.1347 51.9638C26.4991 51.9638 21.1199 46.5846 21.1199 39.9489C21.1199 33.3133 26.4991 27.9341 33.1347 27.9341C37.8104 27.9341 41.8622 30.6049 43.8479 34.5041C43.9013 34.6089 44.0536 34.6089 44.107 34.5041C46.0926 30.6049 50.1445 27.9341 54.8201 27.9341C61.4558 27.9341 66.835 33.3133 66.835 39.9489C66.835 46.5846 61.4558 51.9638 54.8201 51.9638C50.1445 51.9638 46.0926 49.293 44.107 45.3938Z", fill: "white" }),
   /* @__PURE__ */ jsx47("path", { d: "M60.1113 40.0006C60.1113 43.052 57.6377 45.5256 54.5863 45.5256C51.535 45.5256 49.0614 43.052 49.0614 40.0006C49.0614 36.9493 51.535 34.4757 54.5863 34.4757C57.6377 34.4757 60.1113 36.9493 60.1113 40.0006Z", fill: "#1685FF" }),
   /* @__PURE__ */ jsx47("path", { d: "M38.8954 40.0006C38.8954 43.052 36.4218 45.5256 33.3705 45.5256C30.3192 45.5256 27.8456 43.052 27.8456 40.0006C27.8456 36.9493 30.3192 34.4757 33.3705 34.4757C36.4218 34.4757 38.8954 36.9493 38.8954 40.0006Z", fill: "#1685FF" })
 ] });
-var LogoTextSvg = (props) => /* @__PURE__ */ jsxs34("svg", { width: "111", height: "32", viewBox: "0 0 111 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+var LogoTextSvg = (props) => /* @__PURE__ */ jsxs32("svg", { width: "111", height: "32", viewBox: "0 0 111 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
   /* @__PURE__ */ jsx47("path", { d: "M72.7324 20.9658C72.7324 14.4559 77.4246 9.9751 83.8922 9.9751C90.3598 9.9751 95.052 14.4559 95.052 20.9658C95.052 27.4757 90.3598 31.9565 83.8922 31.9565C77.4246 31.9565 72.7324 27.4757 72.7324 20.9658ZM77.8896 20.9658C77.8896 24.7703 80.3414 27.3489 83.8922 27.3489C87.4431 27.3489 89.8948 24.7703 89.8948 20.9658C89.8948 17.1613 87.4431 14.5827 83.8922 14.5827C80.3414 14.5827 77.8896 17.1613 77.8896 20.9658Z", fill: "currentColor" }),
   /* @__PURE__ */ jsx47("path", { d: "M53.4056 31.4503H48.6289V0H53.7861V13.6116C55.1388 11.2866 57.9287 9.89163 61.0991 9.89163C67.0595 9.89163 70.6949 14.5415 70.6949 21.136C70.6949 27.5613 66.7636 31.9998 60.761 31.9998C57.6328 31.9998 54.9697 30.6049 53.7438 28.1954L53.4056 31.4503ZM53.8284 20.9246C53.8284 24.6868 56.1533 27.2654 59.7042 27.2654C63.3395 27.2654 65.4954 24.6445 65.4954 20.9246C65.4954 17.2047 63.3395 14.5415 59.7042 14.5415C56.1533 14.5415 53.8284 17.1624 53.8284 20.9246Z", fill: "currentColor" }),
   /* @__PURE__ */ jsx47("path", { d: "M38.9929 10.5681H44.15V31.4504H39.3733L38.9929 28.6605C37.7247 30.6473 35.0193 32 32.2293 32C27.4103 32 24.5781 28.745 24.5781 23.6301V10.5681H29.7353V21.8124C29.7353 25.786 31.2994 27.3923 34.1739 27.3923C37.4288 27.3923 38.9929 25.4901 38.9929 21.5165V10.5681Z", fill: "currentColor" }),
@@ -4621,7 +4648,7 @@ var logoTextSizeVariants = cva22("", {
 });
 var Logo = ({ className, textColor, variant = "inline" }) => {
   const textColorClass = textColor === "light" ? "text-(--color-b-white)" : textColor === "dark" ? "text-(--color-b-black)" : "text-primary";
-  return /* @__PURE__ */ jsxs34("div", { className: cn(logoWrapperVariants({ variant }), className), children: [
+  return /* @__PURE__ */ jsxs32("div", { className: cn(logoWrapperVariants({ variant }), className), children: [
     /* @__PURE__ */ jsx47(LogoIconSvg2, { className: logoIconSizeVariants({ variant }) }),
     /* @__PURE__ */ jsx47(LogoTextSvg, { className: cn(logoTextSizeVariants({ variant }), textColorClass) })
   ] });
@@ -4682,7 +4709,6 @@ lucide-react/dist/esm/defaultAttributes.js:
 lucide-react/dist/esm/Icon.js:
 lucide-react/dist/esm/createLucideIcon.js:
 lucide-react/dist/esm/icons/chevron-right.js:
-lucide-react/dist/esm/icons/ellipsis.js:
 lucide-react/dist/esm/lucide-react.js:
   (**
    * @license lucide-react v0.555.0 - ISC