@l3mpire/ui 2.5.1 → 2.5.2

package/dist/index.js

@@ -1270,454 +1270,17 @@ var Switch = React9.forwardRef(({ className, label, disabled, id, ...props }, re
 Switch.displayName = "Switch";
 
 // src/components/ui/search-bar.tsx
-var React10 = __toESM(require("react"));
-var import_class_variance_authority7 = require("class-variance-authority");
-var import_icons8 = require("@l3mpire/icons");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var searchBarVariants = (0, import_class_variance_authority7.cva)(
-  [
-    "inline-flex w-full items-center rounded-md border transition-colors",
-    "border-search-bar-border-default",
-    "hover:border-search-bar-border-hover",
-    "focus-within:border-search-bar-border-active",
-    "focus-within:shadow-focus-ring"
-  ],
-  {
-    variants: {
-      variant: {
-        white: "bg-search-bar-white-bg",
-        grey: "bg-search-bar-grey-bg"
-      },
-      size: {
-        sm: "gap-sm px-base py-sm",
-        md: "gap-base px-md py-base"
-      }
-    },
-    defaultVariants: { variant: "white", size: "md" }
-  }
-);
-var inputStyle = "flex-1 min-w-0 bg-transparent outline-none text-sm font-regular leading-sm text-search-bar-text placeholder:text-search-bar-placeholder";
-var clearButtonStyle = "inline-flex shrink-0 items-center justify-center p-xs rounded-base text-search-bar-clear hover:bg-black/5 transition-colors";
-var SearchBar = React10.forwardRef(
-  ({
-    className,
-    variant,
-    size = "md",
-    value,
-    defaultValue,
-    onChange,
-    onClear,
-    hasShortcut = false,
-    placeholder = "Search...",
-    ...props
-  }, ref) => {
-    const [internalValue, setInternalValue] = React10.useState(defaultValue ?? "");
-    const isControlled = value !== void 0;
-    const currentValue = isControlled ? value : internalValue;
-    const hasValue = String(currentValue).length > 0;
-    const iconSize = size === "sm" ? "xs" : "sm";
-    const handleChange = (e) => {
-      if (!isControlled) setInternalValue(e.target.value);
-      onChange?.(e);
-    };
-    const handleClear = () => {
-      if (!isControlled) setInternalValue("");
-      onClear?.();
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn(searchBarVariants({ variant, size }), className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        import_icons8.Icon,
-        {
-          icon: import_icons8.faMagnifyingGlassSolid,
-          size: iconSize,
-          className: "shrink-0 text-search-bar-icon"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        "input",
-        {
-          ref,
-          type: "text",
-          value: currentValue,
-          defaultValue: void 0,
-          onChange: handleChange,
-          placeholder,
-          className: inputStyle,
-          ...props
-        }
-      ),
-      hasShortcut && !hasValue && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "shrink-0 text-xs text-search-bar-placeholder", children: "\u2318K" }),
-      hasValue && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TooltipProvider, { delayDuration: 300, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Tooltip, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: handleClear,
-            className: clearButtonStyle,
-            "aria-label": "Erase",
-            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons8.Icon, { icon: import_icons8.faXmarkSolid, size: "xs" })
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TooltipContent, { children: "Erase" })
-      ] }) })
-    ] });
-  }
-);
-SearchBar.displayName = "SearchBar";
-
-// src/components/ui/avatar.tsx
-var React11 = __toESM(require("react"));
-var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"));
-var import_class_variance_authority8 = require("class-variance-authority");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var avatarVariants = (0, import_class_variance_authority8.cva)(
-  "relative inline-flex shrink-0 items-center justify-center overflow-clip",
-  {
-    variants: {
-      size: {
-        sm: "size-4",
-        md: "size-5",
-        lg: "size-6",
-        xl: "size-8"
-      },
-      shape: {
-        rounded: "rounded-full",
-        squared: ""
-      }
-    },
-    compoundVariants: [
-      { shape: "squared", size: "sm", class: "rounded-xs" },
-      { shape: "squared", size: "md", class: "rounded-sm" },
-      { shape: "squared", size: "lg", class: "rounded-base" },
-      { shape: "squared", size: "xl", class: "rounded-base" }
-    ],
-    defaultVariants: {
-      size: "xl",
-      shape: "rounded"
-    }
-  }
-);
-var initialsFontSize = {
-  sm: "text-[8px] leading-[14px]",
-  md: "text-xs leading-2xs",
-  lg: "text-sm leading-sm",
-  xl: "text-base leading-base"
-};
-var Avatar = React11.forwardRef(({ className, size = "xl", shape = "rounded", src, alt, initials, badge, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative inline-flex", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-      AvatarPrimitive.Root,
-      {
-        ref,
-        className: cn(
-          avatarVariants({ size, shape }),
-          "bg-avatar-fallback-bg",
-          className
-        ),
-        ...props,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            AvatarPrimitive.Image,
-            {
-              src,
-              alt: alt ?? "",
-              className: "absolute inset-0 size-full object-cover"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            AvatarPrimitive.Fallback,
-            {
-              delayMs: 0,
-              className: cn(
-                "font-medium",
-                "text-avatar-fallback-text",
-                "select-none text-center",
-                initialsFontSize[size ?? "xl"]
-              ),
-              children: initials ?? "??"
-            }
-          )
-        ]
-      }
-    ),
-    badge && size === "xl" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute bottom-0 right-0 size-4 overflow-clip rounded-full", children: badge })
-  ] });
-});
-Avatar.displayName = "Avatar";
-
-// src/components/ui/checkbox.tsx
 var React12 = __toESM(require("react"));
-var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
+var import_class_variance_authority8 = require("class-variance-authority");
 var import_icons9 = require("@l3mpire/icons");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var rootStyles = {
-  base: "peer shrink-0 size-4 rounded-sm inline-flex items-center justify-center transition-colors cursor-pointer focus-visible:outline-none",
-  unchecked: [
-    "bg-checkbox-unchecked-bg",
-    "border border-checkbox-unchecked-border-default",
-    "hover:border-checkbox-unchecked-border-hover",
-    "active:border-checkbox-unchecked-border-pressed",
-    "active:[box-shadow:0_0_0_3px_#316bff26]"
-  ],
-  checked: [
-    "data-[state=checked]:bg-checkbox-checked-bg-default",
-    "data-[state=checked]:border-transparent",
-    "data-[state=checked]:hover:bg-checkbox-checked-bg-hover",
-    "data-[state=checked]:active:bg-checkbox-checked-bg-pressed",
-    "data-[state=checked]:active:[box-shadow:0_0_0_3px_#316bff26]"
-  ],
-  disabled: [
-    "disabled:pointer-events-none",
-    "disabled:bg-checkbox-disabled-bg",
-    "disabled:border-checkbox-disabled-border",
-    "data-[state=checked]:disabled:bg-checkbox-disabled-bg",
-    "data-[state=checked]:disabled:border-transparent"
-  ]
-};
-var iconStyle = {
-  default: "text-checkbox-checked-icon",
-  disabled: "text-checkbox-disabled-icon"
-};
-var labelBase2 = "cursor-pointer select-none overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium leading-sm";
-var labelColor2 = {
-  default: "text-checkbox-label-default",
-  disabled: "pointer-events-none text-checkbox-label-disabled"
-};
-var Checkbox = React12.forwardRef(({ className, label, disabled, id, ...props }, ref) => {
-  const innerId = id ?? React12.useId();
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "inline-flex items-center gap-base", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      CheckboxPrimitive.Root,
-      {
-        ref,
-        id: innerId,
-        disabled,
-        className: cn(
-          rootStyles.base,
-          rootStyles.unchecked,
-          rootStyles.checked,
-          rootStyles.disabled,
-          className
-        ),
-        ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          CheckboxPrimitive.Indicator,
-          {
-            forceMount: true,
-            className: cn(
-              "flex items-center justify-center transition-opacity",
-              "data-[state=unchecked]:opacity-0",
-              "data-[state=checked]:opacity-100",
-              "data-[state=indeterminate]:opacity-100"
-            ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-              import_icons9.Icon,
-              {
-                icon: import_icons9.faCheckSolid,
-                size: "xs",
-                className: iconStyle[disabled ? "disabled" : "default"]
-              }
-            )
-          }
-        )
-      }
-    ),
-    label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      "label",
-      {
-        htmlFor: innerId,
-        className: cn(labelBase2, labelColor2[disabled ? "disabled" : "default"]),
-        children: label
-      }
-    )
-  ] });
-});
-Checkbox.displayName = "Checkbox";
-
-// src/components/ui/dropdown-menu.tsx
-var React13 = __toESM(require("react"));
-var DropdownMenuPrimitive2 = __toESM(require("@radix-ui/react-dropdown-menu"));
-var import_icons10 = require("@l3mpire/icons");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var textSm = "text-sm font-regular leading-sm";
-var textXs = "text-xs font-regular leading-xs";
-var textXsMedium = "text-xs font-medium leading-xs";
-var textSmMedium = "text-sm font-medium leading-sm";
-var containerStyle = [
-  "flex flex-col gap-base overflow-clip",
-  "bg-dropdown-bg",
-  "border border-dropdown-border",
-  "rounded-md",
-  "p-base",
-  "shadow-lg"
-];
-var DropdownMenu = React13.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref, className: cn(containerStyle, className), ...props, children })
-);
-DropdownMenu.displayName = "DropdownMenu";
-var DropdownMenuRoot = DropdownMenuPrimitive2.Root;
-var DropdownMenuTrigger = DropdownMenuPrimitive2.Trigger;
-var DropdownMenuContent = React13.forwardRef(({ className, sideOffset = 4, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropdownMenuPrimitive2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-  DropdownMenuPrimitive2.Content,
-  {
-    ref,
-    sideOffset,
-    className: cn(
-      containerStyle,
-      "z-50",
-      "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-      "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
-      "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
-      className
-    ),
-    ...props,
-    children
-  }
-) }));
-DropdownMenuContent.displayName = "DropdownMenuContent";
-var DropdownMenuList = React13.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref, className: cn("flex flex-col", className), role: "listbox", ...props, children })
-);
-DropdownMenuList.displayName = "DropdownMenuList";
-var itemStyle = "flex items-center gap-base p-base rounded-base cursor-pointer hover:bg-dropdown-item-hover";
-var DropdownMenuItem = React13.forwardRef(
-  ({
-    className,
-    icon,
-    avatar,
-    flag,
-    label,
-    description,
-    badge,
-    action,
-    isActive,
-    children,
-    ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-    "div",
-    {
-      ref,
-      role: "option",
-      "aria-selected": isActive,
-      className: cn(
-        itemStyle,
-        isActive && "bg-dropdown-item-hover",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        avatar,
-        flag,
-        icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          import_icons10.Icon,
-          {
-            icon,
-            size: "sm",
-            className: "shrink-0 text-dropdown-item-icon"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-1 items-center gap-sm min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: cn("truncate shrink-0", textSm, "text-dropdown-item-text"), children: label }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: cn("truncate", textXs, "text-dropdown-item-secondary"), children: description })
-        ] }),
-        badge,
-        action
-      ]
-    }
-  )
-);
-DropdownMenuItem.displayName = "DropdownMenuItem";
-var DropdownMenuRadixItem = React13.forwardRef(
-  ({
-    className,
-    icon,
-    avatar,
-    flag,
-    label,
-    description,
-    badge,
-    action,
-    children,
-    ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-    DropdownMenuPrimitive2.Item,
-    {
-      ref,
-      className: cn(
-        itemStyle,
-        "outline-none focus:bg-dropdown-item-hover",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        avatar,
-        flag,
-        icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          import_icons10.Icon,
-          {
-            icon,
-            size: "sm",
-            className: "shrink-0 text-dropdown-item-icon"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-1 items-center gap-sm min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: cn("truncate shrink-0", textSm, "text-dropdown-item-text"), children: label }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: cn("truncate", textXs, "text-dropdown-item-secondary"), children: description })
-        ] }),
-        badge,
-        action
-      ]
-    }
-  )
-);
-DropdownMenuRadixItem.displayName = "DropdownMenuRadixItem";
-var DropdownMenuHeading = React13.forwardRef(({ className, action, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-  "div",
-  {
-    ref,
-    className: cn(
-      "flex items-center gap-base p-base rounded-base",
-      className
-    ),
-    ...props,
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: cn("flex-1 truncate uppercase", textXsMedium, "text-dropdown-heading-text"), children }),
-      action
-    ]
-  }
-));
-DropdownMenuHeading.displayName = "DropdownMenuHeading";
-var clearStyle = [
-  "sticky bottom-0 -mx-base -mb-base",
-  "flex items-center justify-center",
-  "h-10 min-w-[80px] px-md py-[10px]",
-  "bg-gradient-to-t from-[#fbfbfb] from-[10%] to-white",
-  "border border-dropdown-border",
-  "shadow-sm",
-  "cursor-pointer"
-];
-var DropdownMenuClear = React13.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-  "button",
-  {
-    ref,
-    type: "button",
-    className: cn(clearStyle, textSmMedium, "text-dropdown-clear-text", className),
-    ...props,
-    children
-  }
-));
-DropdownMenuClear.displayName = "DropdownMenuClear";
 
 // src/components/ui/sidebar.tsx
-var React15 = __toESM(require("react"));
-var import_icons11 = require("@l3mpire/icons");
+var React11 = __toESM(require("react"));
+var import_icons8 = require("@l3mpire/icons");
 
 // src/components/ui/product-logo.tsx
-var React14 = __toESM(require("react"));
-var import_class_variance_authority9 = require("class-variance-authority");
+var React10 = __toESM(require("react"));
+var import_class_variance_authority7 = require("class-variance-authority");
 
 // src/assets/logos/lemlist-sm-picto.svg
 var lemlist_sm_picto_default = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M16.4386 0H3.56138C1.59448 0 0 1.59448 0 3.56138V16.4386C0 18.4055 1.59448 20 3.56138 20H16.4386C18.4055 20 20 18.4055 20 16.4386V3.56138C20 1.59448 18.4055 0 16.4386 0Z" fill="#316BFF"/>\n<path d="M14.6428 13.3821V14.1178C14.6428 14.4076 14.4076 14.6428 14.1178 14.6428H7.41337C6.30968 14.5723 5.42773 13.6903 5.35718 12.5866V5.88215C5.35718 5.59237 5.59236 5.35719 5.88215 5.35719H6.61794C6.90772 5.35719 7.14291 5.59237 7.14291 5.88215V11.4922C7.14291 12.2464 7.75355 12.8571 8.50782 12.8571H14.1178C14.4076 12.8571 14.6428 13.0923 14.6428 13.3821Z" fill="white"/>\n<path d="M14.1178 5.35718H9.45362C9.16369 5.35718 8.92865 5.59222 8.92865 5.88215V6.61795C8.92865 6.90788 9.16369 7.14291 9.45362 7.14291H14.1178C14.4078 7.14291 14.6428 6.90788 14.6428 6.61795V5.88215C14.6428 5.59222 14.4078 5.35718 14.1178 5.35718Z" fill="white"/>\n<path d="M13.2846 9.10755H9.45362C9.16369 9.10755 8.92865 9.34259 8.92865 9.63252V10.3683C8.92865 10.6582 9.16369 10.8933 9.45362 10.8933H13.2846C13.5746 10.8933 13.8096 10.6582 13.8096 10.3683V9.63252C13.8096 9.34259 13.5746 9.10755 13.2846 9.10755Z" fill="white"/>\n</svg>\n';
@@ -1846,8 +1409,8 @@ var lemcal_md_logotype_dark_default = '<svg width="111" height="28" viewBox="0 0
 var lemcal_lg_logotype_dark_default = '<svg width="127" height="32" viewBox="0 0 127 32" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M43.4336 6.48746V25.7729C43.4336 26.237 43.0592 26.6136 42.5979 26.6136H41.1979C40.7366 26.6136 40.3622 26.237 40.3622 25.7729V6.48746C40.3622 6.02341 40.7366 5.6468 41.1979 5.6468H42.5979C43.0592 5.6468 43.4336 6.02341 43.4336 6.48746Z" fill="white"/>\n<path d="M49.4964 20.2429C49.7651 22.4932 51.613 23.962 54.2967 23.962C55.5402 23.962 57.0525 23.5652 58.0393 22.8429C58.3696 22.6008 58.8228 22.6291 59.117 22.9156L59.9313 23.7105C60.2883 24.0589 60.2696 24.6453 59.8845 24.9601C58.3522 26.2137 56.194 26.8418 54.2365 26.8418C49.4054 26.8418 46.3046 23.7522 46.3046 19.0135C46.3046 14.2749 49.4362 11.305 54.0279 11.305C58.6196 11.305 61.6923 13.9548 61.477 19.4372C61.4597 19.8878 61.0893 20.2443 60.6413 20.2443H49.495L49.4964 20.2429ZM58.4712 17.6335C58.292 15.2944 56.5925 14.0637 54.1175 14.0637C51.8805 14.0637 50.0326 15.2931 49.5552 17.6335H58.4712Z" fill="white"/>\n<path d="M73.9362 25.7729V17.9998C73.9362 16.0508 72.3678 14.4273 70.4303 14.4663C68.2975 14.508 66.9577 16.3212 66.9577 18.4854V25.7729C66.9577 26.2369 66.5833 26.6136 66.122 26.6136H64.7221C64.2607 26.6136 63.8864 26.2369 63.8864 25.7729V12.514C63.8864 12.05 64.2607 11.6733 64.7221 11.6733H65.9977C66.4256 11.6733 66.7839 11.9975 66.8294 12.4252L66.9591 13.775C67.7934 12.1555 69.5237 11.5556 71.0748 11.5556C72.9534 11.5556 74.8615 12.3357 75.6972 14.5255C76.8899 12.3357 78.7392 11.5865 80.7369 11.5865C84.7924 11.5865 86.9692 14.1664 86.9692 18.4262V25.7742C86.9692 26.2383 86.5948 26.6149 86.1335 26.6149H84.7041C84.2428 26.6149 83.8684 26.2383 83.8684 25.7742V17.8344C83.8684 16.0199 82.4297 14.4999 80.6259 14.4973C78.445 14.4932 77.0397 16.2943 77.0397 18.4867V25.7742C77.0397 26.2383 76.6653 26.6149 76.204 26.6149H74.7746C74.3133 26.6149 73.9389 26.2383 73.9389 25.7742L73.9362 25.7729Z" fill="white"/>\n<path d="M102.135 23.9274C102.492 24.2811 102.46 24.8703 102.068 25.185C100.613 26.3566 99.014 26.8663 97.1942 26.8663C92.9595 26.8663 89.4415 24.1964 89.4415 19.0973C89.4415 13.9981 92.9301 11.3282 97.1942 11.3282C98.9338 11.3282 100.431 11.7909 101.819 12.9073C102.203 13.2167 102.243 13.7897 101.904 14.1474L101.069 15.0258C100.786 15.3244 100.326 15.3728 99.9901 15.1347C99.1571 14.5456 98.1716 14.2685 97.225 14.2685C94.5707 14.2685 92.5129 16.1583 92.5129 19.0973C92.5129 22.2165 94.6603 23.8669 97.1942 23.8669C98.2265 23.8669 99.2774 23.6019 100.149 22.9563C100.481 22.7101 100.939 22.7424 101.232 23.0329L102.135 23.9274Z" fill="white"/>\n<path d="M117.171 11.6677H118.513C118.975 11.6677 119.349 12.0443 119.349 12.5084V25.7779C119.349 26.2419 118.975 26.6185 118.513 26.6185H117.212C116.771 26.6185 116.406 26.2728 116.378 25.8303L116.278 24.0228C115.294 25.9126 113.027 26.8125 111.209 26.8125C106.915 26.842 103.665 24.0524 103.665 19.0138C103.665 13.9752 107.034 11.3052 111.269 11.3052C113.356 11.3052 115.354 12.2952 116.278 13.9752L116.337 12.4774C116.354 12.0255 116.723 11.6691 117.172 11.6691L117.171 11.6677ZM106.735 19.0138C106.735 22.0738 108.882 23.9327 111.505 23.9327C117.857 23.9327 117.857 14.1245 111.505 14.1245C108.882 14.1245 106.735 15.9847 106.735 19.0138Z" fill="white"/>\n<path d="M126.118 6.48746V25.7729C126.118 26.237 125.743 26.6136 125.282 26.6136H123.882C123.421 26.6136 123.046 26.237 123.046 25.7729V6.48746C123.046 6.02341 123.421 5.6468 123.882 5.6468H125.282C125.743 5.6468 126.118 6.02341 126.118 6.48746Z" fill="white"/>\n<path d="M26.1467 0H5.66461C2.53613 0 0 2.55117 0 5.69821V26.3018C0 29.4488 2.53613 32 5.66461 32H26.1467C29.2752 32 31.8113 29.4488 31.8113 26.3018V5.69821C31.8113 2.55117 29.2752 0 26.1467 0Z" fill="#FF4D4D"/>\n<path d="M16.6453 14.6362H15.199C14.7829 14.6362 14.4456 14.9754 14.4456 15.3938V16.8682C14.4456 17.2866 14.7829 17.6258 15.199 17.6258H16.6453C17.0615 17.6258 17.3988 17.2866 17.3988 16.8682V15.3938C17.3988 14.9754 17.0615 14.6362 16.6453 14.6362Z" fill="#0C1521"/>\n<path d="M20.3798 13.8921V12.4371C20.3798 12.0189 20.0423 11.6795 19.6264 11.6795H13.7556C12.5078 11.6795 11.4953 12.6976 11.4953 13.9521L11.4666 18.3396C11.4666 19.5955 12.4792 20.6122 13.7269 20.6122H18.0636C19.3126 20.6122 20.3239 19.7839 20.3239 18.5294V18.3423C20.3239 17.9241 20.6614 17.5861 21.0773 17.5861H22.5189C22.9348 17.5861 23.2724 17.9241 23.2724 18.3423V19.8573C23.2724 21.5047 22.2013 22.8995 20.7197 23.3751C20.3676 23.4887 19.9902 23.5501 19.5995 23.5501H12.1818C11.7911 23.5501 11.4885 23.4887 11.135 23.3751C9.65469 22.8995 8.51031 21.5047 8.51031 19.8587L8.53897 12.4442C8.53897 10.7969 9.61048 9.24501 11.0921 8.76938C11.1811 8.74132 11.3982 8.71593 11.4899 8.69456L11.4907 8.07134C11.4907 7.61041 11.8628 7.23632 12.3212 7.23632H13.6146C14.073 7.23632 14.4451 7.61041 14.4451 8.07134V8.69535H17.3929V8.07134C17.3929 7.61041 17.7649 7.23632 18.2234 7.23632H19.5238C19.9822 7.23632 20.3543 7.61041 20.3543 8.07134V8.68418C20.446 8.70556 20.658 8.73094 20.747 8.759C22.2287 9.23329 23.301 10.7955 23.301 12.4429V13.8921C23.301 14.3102 22.9635 14.6496 22.5476 14.6496H21.1332C20.7173 14.6496 20.3798 14.3102 20.3798 13.8921Z" fill="#0C1521"/>\n</svg>\n';
 
 // src/components/ui/product-logo.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var productLogoVariants = (0, import_class_variance_authority9.cva)(["inline-flex items-center shrink-0"], {
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var productLogoVariants = (0, import_class_variance_authority7.cva)(["inline-flex items-center shrink-0"], {
   variants: {
     size: {
       sm: "",
@@ -1859,198 +1422,641 @@ var productLogoVariants = (0, import_class_variance_authority9.cva)(["inline-fle
   defaultVariants: {
     size: "lg"
   }
-});
-var svgMap = {
-  lemlist: {
-    sm: { light: { picto: lemlist_sm_picto_default, logotype: lemlist_sm_logotype_default }, dark: { picto: lemlist_sm_picto_dark_default, logotype: lemlist_sm_logotype_dark_default } },
-    md: { light: { picto: lemlist_md_picto_default, logotype: lemlist_md_logotype_default }, dark: { picto: lemlist_md_picto_dark_default, logotype: lemlist_md_logotype_dark_default } },
-    lg: { light: { picto: lemlist_lg_picto_default, logotype: lemlist_lg_logotype_default }, dark: { picto: lemlist_lg_picto_dark_default, logotype: lemlist_lg_logotype_dark_default } },
-    xl: { light: { picto: lemlist_xl_picto_default }, dark: { picto: lemlist_xl_picto_dark_default } }
-  },
-  lemwarm: {
-    sm: { light: { picto: lemwarm_sm_picto_default, logotype: lemwarm_sm_logotype_default }, dark: { picto: lemwarm_sm_picto_dark_default, logotype: lemwarm_sm_logotype_dark_default } },
-    md: { light: { picto: lemwarm_md_picto_default, logotype: lemwarm_md_logotype_default }, dark: { picto: lemwarm_md_picto_dark_default, logotype: lemwarm_md_logotype_dark_default } },
-    lg: { light: { picto: lemwarm_lg_picto_default, logotype: lemwarm_lg_logotype_default }, dark: { picto: lemwarm_lg_picto_dark_default, logotype: lemwarm_lg_logotype_dark_default } },
-    xl: { light: { picto: lemwarm_xl_picto_default }, dark: { picto: lemwarm_xl_picto_dark_default } }
-  },
-  lemcal: {
-    sm: { light: { picto: lemcal_sm_picto_default, logotype: lemcal_sm_logotype_default }, dark: { picto: lemcal_sm_picto_dark_default, logotype: lemcal_sm_logotype_dark_default } },
-    md: { light: { picto: lemcal_md_picto_default, logotype: lemcal_md_logotype_default }, dark: { picto: lemcal_md_picto_dark_default, logotype: lemcal_md_logotype_dark_default } },
-    lg: { light: { picto: lemcal_lg_picto_default, logotype: lemcal_lg_logotype_default }, dark: { picto: lemcal_lg_picto_dark_default, logotype: lemcal_lg_logotype_dark_default } },
-    xl: { light: { picto: lemcal_xl_picto_default }, dark: { picto: lemcal_xl_picto_dark_default } }
+});
+var svgMap = {
+  lemlist: {
+    sm: { light: { picto: lemlist_sm_picto_default, logotype: lemlist_sm_logotype_default }, dark: { picto: lemlist_sm_picto_dark_default, logotype: lemlist_sm_logotype_dark_default } },
+    md: { light: { picto: lemlist_md_picto_default, logotype: lemlist_md_logotype_default }, dark: { picto: lemlist_md_picto_dark_default, logotype: lemlist_md_logotype_dark_default } },
+    lg: { light: { picto: lemlist_lg_picto_default, logotype: lemlist_lg_logotype_default }, dark: { picto: lemlist_lg_picto_dark_default, logotype: lemlist_lg_logotype_dark_default } },
+    xl: { light: { picto: lemlist_xl_picto_default }, dark: { picto: lemlist_xl_picto_dark_default } }
+  },
+  lemwarm: {
+    sm: { light: { picto: lemwarm_sm_picto_default, logotype: lemwarm_sm_logotype_default }, dark: { picto: lemwarm_sm_picto_dark_default, logotype: lemwarm_sm_logotype_dark_default } },
+    md: { light: { picto: lemwarm_md_picto_default, logotype: lemwarm_md_logotype_default }, dark: { picto: lemwarm_md_picto_dark_default, logotype: lemwarm_md_logotype_dark_default } },
+    lg: { light: { picto: lemwarm_lg_picto_default, logotype: lemwarm_lg_logotype_default }, dark: { picto: lemwarm_lg_picto_dark_default, logotype: lemwarm_lg_logotype_dark_default } },
+    xl: { light: { picto: lemwarm_xl_picto_default }, dark: { picto: lemwarm_xl_picto_dark_default } }
+  },
+  lemcal: {
+    sm: { light: { picto: lemcal_sm_picto_default, logotype: lemcal_sm_logotype_default }, dark: { picto: lemcal_sm_picto_dark_default, logotype: lemcal_sm_logotype_dark_default } },
+    md: { light: { picto: lemcal_md_picto_default, logotype: lemcal_md_logotype_default }, dark: { picto: lemcal_md_picto_dark_default, logotype: lemcal_md_logotype_dark_default } },
+    lg: { light: { picto: lemcal_lg_picto_default, logotype: lemcal_lg_logotype_default }, dark: { picto: lemcal_lg_picto_dark_default, logotype: lemcal_lg_logotype_dark_default } },
+    xl: { light: { picto: lemcal_xl_picto_default }, dark: { picto: lemcal_xl_picto_dark_default } }
+  }
+};
+function useIsDarkTheme() {
+  const [isDark, setIsDark] = React10.useState(false);
+  React10.useEffect(() => {
+    const root = document.documentElement;
+    const check = () => setIsDark(root.getAttribute("data-theme") === "dark");
+    check();
+    const observer = new MutationObserver(check);
+    observer.observe(root, { attributes: true, attributeFilter: ["data-theme"] });
+    return () => observer.disconnect();
+  }, []);
+  return isDark;
+}
+function SvgImage({ svg, alt, className }) {
+  const dataUri = React10.useMemo(
+    () => `data:image/svg+xml,${encodeURIComponent(svg)}`,
+    [svg]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("img", { src: dataUri, alt, className });
+}
+var ProductLogo = React10.forwardRef(
+  ({ className, product = "lemlist", size = "lg", hasText = true, ...props }, ref) => {
+    const resolvedSize = size ?? "lg";
+    const isDark = useIsDarkTheme();
+    const entry = svgMap[product][resolvedSize][isDark ? "dark" : "light"];
+    const svg = hasText && entry.logotype ? entry.logotype : entry.picto;
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "div",
+      {
+        ref,
+        className: cn(productLogoVariants({ size }), className),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SvgImage, { svg, alt: `${product} logo`, className: "h-auto w-auto" })
+      }
+    );
+  }
+);
+ProductLogo.displayName = "ProductLogo";
+
+// src/components/ui/sidebar.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var SidebarContext = React11.createContext({
+  isCollapsed: false,
+  isHovered: false,
+  setCollapsed: () => {
+  }
+});
+function useSidebarContext() {
+  return React11.useContext(SidebarContext);
+}
+var SidebarHeader = React11.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { isCollapsed, isHovered, setCollapsed } = useSidebarContext();
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-center shrink-0 h-[44px] border-b border-sidebar-border",
+          isCollapsed ? "justify-center px-lg" : "justify-between px-lg",
+          className
+        ),
+        ...props,
+        children: isCollapsed ? (
+          // Collapsed: show picto, on sidebar hover show expand button
+          isHovered ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "button",
+            {
+              onClick: () => setCollapsed(false),
+              className: "flex items-center justify-center size-6 rounded-base hover:bg-sidebar-item-hover-bg transition-colors cursor-pointer",
+              "aria-label": "Expand sidebar",
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons8.Icon, { icon: import_icons8.faArrowRightFromLineOutline, size: "xs", className: "text-sidebar-item-default-icon" })
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ProductLogo, { product: "lemlist", size: "sm", hasText: false })
+        ) : (
+          // Expanded: logo + collapse button
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ProductLogo, { product: "lemlist", size: "sm", hasText: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "button",
+              {
+                onClick: () => setCollapsed(true),
+                className: "flex items-center justify-center size-6 rounded-base hover:bg-sidebar-item-hover-bg transition-colors cursor-pointer",
+                "aria-label": "Collapse sidebar",
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons8.Icon, { icon: import_icons8.faArrowLeftFromLineOutline, size: "xs", className: "text-sidebar-item-default-icon" })
+              }
+            )
+          ] })
+        )
+      }
+    );
+  }
+);
+SidebarHeader.displayName = "SidebarHeader";
+var Sidebar = React11.forwardRef(
+  ({ className, isCollapsed: isCollapsedProp = false, onCollapsedChange, children, ...props }, ref) => {
+    const [isCollapsedInternal, setCollapsedInternal] = React11.useState(isCollapsedProp);
+    const [isHovered, setIsHovered] = React11.useState(false);
+    React11.useEffect(() => {
+      setCollapsedInternal(isCollapsedProp);
+    }, [isCollapsedProp]);
+    const setCollapsed = React11.useCallback(
+      (collapsed) => {
+        setCollapsedInternal(collapsed);
+        onCollapsedChange?.(collapsed);
+      },
+      [onCollapsedChange]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SidebarContext.Provider, { value: { isCollapsed: isCollapsedInternal, isHovered, setCollapsed }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      "aside",
+      {
+        ref,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        className: cn(
+          "flex flex-col shrink-0 bg-sidebar-bg border-r border-sidebar-border h-full transition-[width] duration-200",
+          isCollapsedInternal ? "w-[72px]" : "w-[298px]",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SidebarHeader, {}),
+          (() => {
+            const childArray = React11.Children.toArray(children);
+            const footer = childArray.filter(
+              (child) => React11.isValidElement(child) && child.type?.displayName === "SidebarFooter"
+            );
+            const rest = childArray.filter(
+              (child) => !(React11.isValidElement(child) && child.type?.displayName === "SidebarFooter")
+            );
+            return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex flex-col gap-lg p-lg flex-1 overflow-y-auto", children: rest }),
+              footer
+            ] });
+          })()
+        ]
+      }
+    ) });
+  }
+);
+Sidebar.displayName = "Sidebar";
+var SidebarSection = React11.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "div",
+      {
+        ref,
+        className: cn("flex flex-col w-full", className),
+        ...props,
+        children
+      }
+    );
   }
-};
-function useIsDarkTheme() {
-  const [isDark, setIsDark] = React14.useState(false);
-  React14.useEffect(() => {
-    const root = document.documentElement;
-    const check = () => setIsDark(root.getAttribute("data-theme") === "dark");
-    check();
-    const observer = new MutationObserver(check);
-    observer.observe(root, { attributes: true, attributeFilter: ["data-theme"] });
-    return () => observer.disconnect();
-  }, []);
-  return isDark;
-}
-function SvgImage({ svg, alt, className }) {
-  const dataUri = React14.useMemo(
-    () => `data:image/svg+xml,${encodeURIComponent(svg)}`,
-    [svg]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("img", { src: dataUri, alt, className });
-}
-var ProductLogo = React14.forwardRef(
-  ({ className, product = "lemlist", size = "lg", hasText = true, ...props }, ref) => {
-    const resolvedSize = size ?? "lg";
-    const isDark = useIsDarkTheme();
-    const entry = svgMap[product][resolvedSize][isDark ? "dark" : "light"];
-    const svg = hasText && entry.logotype ? entry.logotype : entry.picto;
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+);
+SidebarSection.displayName = "SidebarSection";
+var SidebarFooter = React11.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "div",
       {
         ref,
-        className: cn(productLogoVariants({ size }), className),
+        className: cn(
+          "flex flex-col p-lg bg-sidebar-footer-bg border-t border-sidebar-border mt-auto w-full",
+          className
+        ),
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SvgImage, { svg, alt: `${product} logo`, className: "h-auto w-auto" })
+        children
       }
     );
   }
 );
-ProductLogo.displayName = "ProductLogo";
+SidebarFooter.displayName = "SidebarFooter";
 
-// src/components/ui/sidebar.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var SidebarContext = React15.createContext({
-  isCollapsed: false,
-  isHovered: false,
-  setCollapsed: () => {
+// src/components/ui/search-bar.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var searchBarVariants = (0, import_class_variance_authority8.cva)(
+  [
+    "inline-flex w-full items-center rounded-md border transition-colors",
+    "border-search-bar-border-default",
+    "hover:border-search-bar-border-hover",
+    "focus-within:border-search-bar-border-active",
+    "focus-within:shadow-focus-ring"
+  ],
+  {
+    variants: {
+      variant: {
+        white: "bg-search-bar-white-bg",
+        grey: "bg-search-bar-grey-bg"
+      },
+      size: {
+        sm: "gap-sm px-base py-sm",
+        md: "gap-base px-md py-base"
+      }
+    },
+    defaultVariants: { variant: "white", size: "md" }
+  }
+);
+var inputStyle = "flex-1 min-w-0 bg-transparent outline-none text-sm font-regular leading-sm text-search-bar-text placeholder:text-search-bar-placeholder";
+var clearButtonStyle = "inline-flex shrink-0 items-center justify-center p-xs rounded-base text-search-bar-clear hover:bg-black/5 transition-colors";
+var SearchBar = React12.forwardRef(
+  ({
+    className,
+    variant,
+    size = "md",
+    value,
+    defaultValue,
+    onChange,
+    onClear,
+    hasShortcut = false,
+    placeholder = "Search...",
+    ...props
+  }, ref) => {
+    const [internalValue, setInternalValue] = React12.useState(defaultValue ?? "");
+    const isControlled = value !== void 0;
+    const currentValue = isControlled ? value : internalValue;
+    const hasValue = String(currentValue).length > 0;
+    const iconSize = size === "sm" ? "xs" : "sm";
+    const sidebarCtx = useSidebarContext();
+    const isCollapsed = sidebarCtx.isCollapsed;
+    const handleChange = (e) => {
+      if (!isControlled) setInternalValue(e.target.value);
+      onChange?.(e);
+    };
+    const handleClear = () => {
+      if (!isControlled) setInternalValue("");
+      onClear?.();
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn(searchBarVariants({ variant, size }), isCollapsed && "justify-center", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        import_icons9.Icon,
+        {
+          icon: import_icons9.faMagnifyingGlassSolid,
+          size: iconSize,
+          className: "shrink-0 text-search-bar-icon"
+        }
+      ),
+      !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "input",
+          {
+            ref,
+            type: "text",
+            value: currentValue,
+            defaultValue: void 0,
+            onChange: handleChange,
+            placeholder,
+            className: inputStyle,
+            ...props
+          }
+        ),
+        hasShortcut && !hasValue && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "shrink-0 text-xs text-search-bar-placeholder", children: "\u2318K" }),
+        hasValue && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TooltipProvider, { delayDuration: 300, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Tooltip, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: handleClear,
+              className: clearButtonStyle,
+              "aria-label": "Erase",
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons9.Icon, { icon: import_icons9.faXmarkSolid, size: "xs" })
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TooltipContent, { children: "Erase" })
+        ] }) })
+      ] })
+    ] });
+  }
+);
+SearchBar.displayName = "SearchBar";
+
+// src/components/ui/avatar.tsx
+var React13 = __toESM(require("react"));
+var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"));
+var import_class_variance_authority9 = require("class-variance-authority");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var avatarVariants = (0, import_class_variance_authority9.cva)(
+  "relative inline-flex shrink-0 items-center justify-center overflow-clip",
+  {
+    variants: {
+      size: {
+        sm: "size-4",
+        md: "size-5",
+        lg: "size-6",
+        xl: "size-8"
+      },
+      shape: {
+        rounded: "rounded-full",
+        squared: ""
+      }
+    },
+    compoundVariants: [
+      { shape: "squared", size: "sm", class: "rounded-xs" },
+      { shape: "squared", size: "md", class: "rounded-sm" },
+      { shape: "squared", size: "lg", class: "rounded-base" },
+      { shape: "squared", size: "xl", class: "rounded-base" }
+    ],
+    defaultVariants: {
+      size: "xl",
+      shape: "rounded"
+    }
   }
+);
+var initialsFontSize = {
+  sm: "text-[8px] leading-[14px]",
+  md: "text-xs leading-2xs",
+  lg: "text-sm leading-sm",
+  xl: "text-base leading-base"
+};
+var Avatar = React13.forwardRef(({ className, size = "xl", shape = "rounded", src, alt, initials, badge, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative inline-flex", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      AvatarPrimitive.Root,
+      {
+        ref,
+        className: cn(
+          avatarVariants({ size, shape }),
+          "bg-avatar-fallback-bg",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            AvatarPrimitive.Image,
+            {
+              src,
+              alt: alt ?? "",
+              className: "absolute inset-0 size-full object-cover"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            AvatarPrimitive.Fallback,
+            {
+              delayMs: 0,
+              className: cn(
+                "font-medium",
+                "text-avatar-fallback-text",
+                "select-none text-center",
+                initialsFontSize[size ?? "xl"]
+              ),
+              children: initials ?? "??"
+            }
+          )
+        ]
+      }
+    ),
+    badge && size === "xl" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute bottom-0 right-0 size-4 overflow-clip rounded-full", children: badge })
+  ] });
 });
-function useSidebarContext() {
-  return React15.useContext(SidebarContext);
-}
-var SidebarHeader = React15.forwardRef(
-  ({ className, ...props }, ref) => {
-    const { isCollapsed, isHovered, setCollapsed } = useSidebarContext();
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      "div",
+Avatar.displayName = "Avatar";
+
+// src/components/ui/checkbox.tsx
+var React14 = __toESM(require("react"));
+var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
+var import_icons10 = require("@l3mpire/icons");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var rootStyles = {
+  base: "peer shrink-0 size-4 rounded-sm inline-flex items-center justify-center transition-colors cursor-pointer focus-visible:outline-none",
+  unchecked: [
+    "bg-checkbox-unchecked-bg",
+    "border border-checkbox-unchecked-border-default",
+    "hover:border-checkbox-unchecked-border-hover",
+    "active:border-checkbox-unchecked-border-pressed",
+    "active:[box-shadow:0_0_0_3px_#316bff26]"
+  ],
+  checked: [
+    "data-[state=checked]:bg-checkbox-checked-bg-default",
+    "data-[state=checked]:border-transparent",
+    "data-[state=checked]:hover:bg-checkbox-checked-bg-hover",
+    "data-[state=checked]:active:bg-checkbox-checked-bg-pressed",
+    "data-[state=checked]:active:[box-shadow:0_0_0_3px_#316bff26]"
+  ],
+  disabled: [
+    "disabled:pointer-events-none",
+    "disabled:bg-checkbox-disabled-bg",
+    "disabled:border-checkbox-disabled-border",
+    "data-[state=checked]:disabled:bg-checkbox-disabled-bg",
+    "data-[state=checked]:disabled:border-transparent"
+  ]
+};
+var iconStyle = {
+  default: "text-checkbox-checked-icon",
+  disabled: "text-checkbox-disabled-icon"
+};
+var labelBase2 = "cursor-pointer select-none overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium leading-sm";
+var labelColor2 = {
+  default: "text-checkbox-label-default",
+  disabled: "pointer-events-none text-checkbox-label-disabled"
+};
+var Checkbox = React14.forwardRef(({ className, label, disabled, id, ...props }, ref) => {
+  const innerId = id ?? React14.useId();
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "inline-flex items-center gap-base", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      CheckboxPrimitive.Root,
       {
         ref,
+        id: innerId,
+        disabled,
         className: cn(
-          "flex items-center shrink-0 h-[44px] border-b border-sidebar-border",
-          isCollapsed ? "justify-center px-lg" : "justify-between px-lg",
+          rootStyles.base,
+          rootStyles.unchecked,
+          rootStyles.checked,
+          rootStyles.disabled,
           className
         ),
         ...props,
-        children: isCollapsed ? (
-          // Collapsed: show picto, on sidebar hover show expand button
-          isHovered ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-            "button",
-            {
-              onClick: () => setCollapsed(false),
-              className: "flex items-center justify-center size-6 rounded-base hover:bg-sidebar-item-hover-bg transition-colors cursor-pointer",
-              "aria-label": "Expand sidebar",
-              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons11.Icon, { icon: import_icons11.faArrowRightFromLineOutline, size: "xs", className: "text-sidebar-item-default-icon" })
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ProductLogo, { product: "lemlist", size: "sm", hasText: false })
-        ) : (
-          // Expanded: logo + collapse button
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ProductLogo, { product: "lemlist", size: "sm", hasText: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-              "button",
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          CheckboxPrimitive.Indicator,
+          {
+            forceMount: true,
+            className: cn(
+              "flex items-center justify-center transition-opacity",
+              "data-[state=unchecked]:opacity-0",
+              "data-[state=checked]:opacity-100",
+              "data-[state=indeterminate]:opacity-100"
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              import_icons10.Icon,
               {
-                onClick: () => setCollapsed(true),
-                className: "flex items-center justify-center size-6 rounded-base hover:bg-sidebar-item-hover-bg transition-colors cursor-pointer",
-                "aria-label": "Collapse sidebar",
-                children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons11.Icon, { icon: import_icons11.faArrowLeftFromLineOutline, size: "xs", className: "text-sidebar-item-default-icon" })
+                icon: import_icons10.faCheckSolid,
+                size: "xs",
+                className: iconStyle[disabled ? "disabled" : "default"]
               }
             )
-          ] })
+          }
         )
       }
-    );
-  }
-);
-SidebarHeader.displayName = "SidebarHeader";
-var Sidebar = React15.forwardRef(
-  ({ className, isCollapsed: isCollapsedProp = false, onCollapsedChange, children, ...props }, ref) => {
-    const [isCollapsedInternal, setCollapsedInternal] = React15.useState(isCollapsedProp);
-    const [isHovered, setIsHovered] = React15.useState(false);
-    React15.useEffect(() => {
-      setCollapsedInternal(isCollapsedProp);
-    }, [isCollapsedProp]);
-    const setCollapsed = React15.useCallback(
-      (collapsed) => {
-        setCollapsedInternal(collapsed);
-        onCollapsedChange?.(collapsed);
-      },
-      [onCollapsedChange]
-    );
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SidebarContext.Provider, { value: { isCollapsed: isCollapsedInternal, isHovered, setCollapsed }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-      "aside",
+    ),
+    label && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "label",
       {
-        ref,
-        onMouseEnter: () => setIsHovered(true),
-        onMouseLeave: () => setIsHovered(false),
-        className: cn(
-          "flex flex-col shrink-0 bg-sidebar-bg border-r border-sidebar-border h-full transition-[width] duration-200",
-          isCollapsedInternal ? "w-[72px]" : "w-[298px]",
-          className
-        ),
-        ...props,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SidebarHeader, {}),
-          (() => {
-            const childArray = React15.Children.toArray(children);
-            const footer = childArray.filter(
-              (child) => React15.isValidElement(child) && child.type?.displayName === "SidebarFooter"
-            );
-            const rest = childArray.filter(
-              (child) => !(React15.isValidElement(child) && child.type?.displayName === "SidebarFooter")
-            );
-            return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex flex-col gap-lg p-lg flex-1 overflow-y-auto", children: rest }),
-              footer
-            ] });
-          })()
-        ]
+        htmlFor: innerId,
+        className: cn(labelBase2, labelColor2[disabled ? "disabled" : "default"]),
+        children: label
       }
-    ) });
-  }
+    )
+  ] });
+});
+Checkbox.displayName = "Checkbox";
+
+// src/components/ui/dropdown-menu.tsx
+var React15 = __toESM(require("react"));
+var DropdownMenuPrimitive2 = __toESM(require("@radix-ui/react-dropdown-menu"));
+var import_icons11 = require("@l3mpire/icons");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var textSm = "text-sm font-regular leading-sm";
+var textXs = "text-xs font-regular leading-xs";
+var textXsMedium = "text-xs font-medium leading-xs";
+var textSmMedium = "text-sm font-medium leading-sm";
+var containerStyle = [
+  "flex flex-col gap-base overflow-clip",
+  "bg-dropdown-bg",
+  "border border-dropdown-border",
+  "rounded-md",
+  "p-base",
+  "shadow-lg"
+];
+var DropdownMenu = React15.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref, className: cn(containerStyle, className), ...props, children })
 );
-Sidebar.displayName = "Sidebar";
-var SidebarSection = React15.forwardRef(
-  ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      "div",
-      {
-        ref,
-        className: cn("flex flex-col w-full", className),
-        ...props,
-        children
-      }
-    );
+DropdownMenu.displayName = "DropdownMenu";
+var DropdownMenuRoot = DropdownMenuPrimitive2.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive2.Trigger;
+var DropdownMenuContent = React15.forwardRef(({ className, sideOffset = 4, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DropdownMenuPrimitive2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  DropdownMenuPrimitive2.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      containerStyle,
+      "z-50",
+      "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+      "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+      "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+      className
+    ),
+    ...props,
+    children
   }
+) }));
+DropdownMenuContent.displayName = "DropdownMenuContent";
+var DropdownMenuList = React15.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref, className: cn("flex flex-col", className), role: "listbox", ...props, children })
 );
-SidebarSection.displayName = "SidebarSection";
-var SidebarFooter = React15.forwardRef(
-  ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      "div",
-      {
-        ref,
-        className: cn(
-          "flex flex-col p-lg bg-sidebar-footer-bg border-t border-sidebar-border mt-auto w-full",
-          className
+DropdownMenuList.displayName = "DropdownMenuList";
+var itemStyle = "flex items-center gap-base p-base rounded-base cursor-pointer hover:bg-dropdown-item-hover";
+var DropdownMenuItem = React15.forwardRef(
+  ({
+    className,
+    icon,
+    avatar,
+    flag,
+    label,
+    description,
+    badge,
+    action,
+    isActive,
+    children,
+    ...props
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "div",
+    {
+      ref,
+      role: "option",
+      "aria-selected": isActive,
+      className: cn(
+        itemStyle,
+        isActive && "bg-dropdown-item-hover",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        avatar,
+        flag,
+        icon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          import_icons11.Icon,
+          {
+            icon,
+            size: "sm",
+            className: "shrink-0 text-dropdown-item-icon"
+          }
         ),
-        ...props,
-        children
-      }
-    );
-  }
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-1 items-center gap-sm min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: cn("truncate shrink-0", textSm, "text-dropdown-item-text"), children: label }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: cn("truncate", textXs, "text-dropdown-item-secondary"), children: description })
+        ] }),
+        badge,
+        action
+      ]
+    }
+  )
 );
-SidebarFooter.displayName = "SidebarFooter";
+DropdownMenuItem.displayName = "DropdownMenuItem";
+var DropdownMenuRadixItem = React15.forwardRef(
+  ({
+    className,
+    icon,
+    avatar,
+    flag,
+    label,
+    description,
+    badge,
+    action,
+    children,
+    ...props
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    DropdownMenuPrimitive2.Item,
+    {
+      ref,
+      className: cn(
+        itemStyle,
+        "outline-none focus:bg-dropdown-item-hover",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        avatar,
+        flag,
+        icon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          import_icons11.Icon,
+          {
+            icon,
+            size: "sm",
+            className: "shrink-0 text-dropdown-item-icon"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-1 items-center gap-sm min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: cn("truncate shrink-0", textSm, "text-dropdown-item-text"), children: label }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: cn("truncate", textXs, "text-dropdown-item-secondary"), children: description })
+        ] }),
+        badge,
+        action
+      ]
+    }
+  )
+);
+DropdownMenuRadixItem.displayName = "DropdownMenuRadixItem";
+var DropdownMenuHeading = React15.forwardRef(({ className, action, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  "div",
+  {
+    ref,
+    className: cn(
+      "flex items-center gap-base p-base rounded-base",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: cn("flex-1 truncate uppercase", textXsMedium, "text-dropdown-heading-text"), children }),
+      action
+    ]
+  }
+));
+DropdownMenuHeading.displayName = "DropdownMenuHeading";
+var clearStyle = [
+  "sticky bottom-0 -mx-base -mb-base",
+  "flex items-center justify-center",
+  "h-10 min-w-[80px] px-md py-[10px]",
+  "bg-gradient-to-t from-[#fbfbfb] from-[10%] to-white",
+  "border border-dropdown-border",
+  "shadow-sm",
+  "cursor-pointer"
+];
+var DropdownMenuClear = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  "button",
+  {
+    ref,
+    type: "button",
+    className: cn(clearStyle, textSmMedium, "text-dropdown-clear-text", className),
+    ...props,
+    children
+  }
+));
+DropdownMenuClear.displayName = "DropdownMenuClear";
 
 // src/components/ui/sidebar-heading-item.tsx
 var React16 = __toESM(require("react"));