design-zystem 1.0.363 → 1.0.365

package/dist/index.d.mts

@@ -887,6 +887,8 @@ interface TabItem {
     dotColor?: string;
     bubbleActive?: boolean;
     bubbleNumber?: number | null;
+    bubbleColor?: string;
+    bubbleTextColor?: string;
 }
 type TabsVariant = 'line' | 'pills';
 interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {

package/dist/index.d.ts

@@ -887,6 +887,8 @@ interface TabItem {
     dotColor?: string;
     bubbleActive?: boolean;
     bubbleNumber?: number | null;
+    bubbleColor?: string;
+    bubbleTextColor?: string;
 }
 type TabsVariant = 'line' | 'pills';
 interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {

package/dist/index.js

@@ -4801,8 +4801,8 @@ var Tabs = (_a) => {
               TabBubble,
               {
                 size: "xs",
-                color: colors.white,
-                backgroundColor: colors.red_950,
+                color: it.bubbleTextColor || colors.white,
+                backgroundColor: it.bubbleColor || colors.red_950,
                 padding: "0 6px",
                 children: it.bubbleNumber
               }

package/dist/index.mjs

@@ -4673,8 +4673,8 @@ var Tabs = (_a) => {
               TabBubble,
               {
                 size: "xs",
-                color: colors.white,
-                backgroundColor: colors.red_950,
+                color: it.bubbleTextColor || colors.white,
+                backgroundColor: it.bubbleColor || colors.red_950,
                 padding: "0 6px",
                 children: it.bubbleNumber
               }

package/dist/ui/index.js

@@ -2058,10 +2058,35 @@ var Tabs = ({
 };
 
 // src/ui/components/ui/Modal.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var RadixDialog = __toESM(require("@radix-ui/react-dialog"));
+
+// src/ui/lib/portalScroll.ts
+var import_react20 = require("react");
+var SCROLL_EVENTS = ["wheel", "touchmove"];
+var useAllowPortalScroll = (active, contentRef, overlayRef) => {
+  (0, import_react20.useEffect)(() => {
+    if (!active || typeof document === "undefined") return;
+    const release = (event) => {
+      var _a, _b;
+      const target = event.target;
+      if (!target) return;
+      if ((_a = contentRef.current) == null ? void 0 : _a.contains(target)) return;
+      if ((_b = overlayRef.current) == null ? void 0 : _b.contains(target)) return;
+      event.stopPropagation();
+    };
+    SCROLL_EVENTS.forEach(
+      (type) => document.body.addEventListener(type, release)
+    );
+    return () => SCROLL_EVENTS.forEach(
+      (type) => document.body.removeEventListener(type, release)
+    );
+  }, [active, contentRef, overlayRef]);
+};
+
+// src/ui/components/ui/Modal.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var ModalDragContext = (0, import_react20.createContext)({
+var ModalDragContext = (0, import_react21.createContext)({
   draggable: false,
   isDragging: false,
   startDrag: () => {
@@ -2076,13 +2101,16 @@ var Modal = ({
   onOpenAutoFocus,
   className
 }) => {
-  const [isDragging, setIsDragging] = (0, import_react20.useState)(false);
-  const [offset, setOffset] = (0, import_react20.useState)({ x: 0, y: 0 });
-  const lastPointRef = (0, import_react20.useRef)({ x: 0, y: 0 });
-  (0, import_react20.useEffect)(() => {
+  const [isDragging, setIsDragging] = (0, import_react21.useState)(false);
+  const [offset, setOffset] = (0, import_react21.useState)({ x: 0, y: 0 });
+  const lastPointRef = (0, import_react21.useRef)({ x: 0, y: 0 });
+  const contentRef = (0, import_react21.useRef)(null);
+  const overlayRef = (0, import_react21.useRef)(null);
+  useAllowPortalScroll(open, contentRef, overlayRef);
+  (0, import_react21.useEffect)(() => {
     if (open) setOffset({ x: 0, y: 0 });
   }, [open]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!draggable || !isDragging) return;
     const onPointerMove = (e) => {
       const dx = e.clientX - lastPointRef.current.x;
@@ -2114,6 +2142,7 @@ var Modal = ({
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       RadixDialog.Overlay,
       {
+        ref: overlayRef,
         className: cn(
           "fixed inset-0 z-40",
           draggable ? "bg-transparent" : "bg-black/50"
@@ -2123,6 +2152,7 @@ var Modal = ({
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       RadixDialog.Content,
       {
+        ref: contentRef,
         onOpenAutoFocus,
         className: cn(
           "fixed left-1/2 top-1/2 z-50 flex max-h-[90vh] -translate-x-1/2 -translate-y-1/2 flex-col gap-4",
@@ -2154,7 +2184,7 @@ var ModalHeader = (_a) => {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  const { draggable, isDragging, startDrag } = (0, import_react20.useContext)(ModalDragContext);
+  const { draggable, isDragging, startDrag } = (0, import_react21.useContext)(ModalDragContext);
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     __spreadValues({
@@ -2214,7 +2244,7 @@ var ModalFooter = (_a) => {
 var ModalClose = RadixDialog.Close;
 
 // src/ui/components/ui/Select.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var RadixSelect = __toESM(require("@radix-ui/react-select"));
 var RadixPopover = __toESM(require("@radix-ui/react-popover"));
 var import_jsx_runtime27 = require("react/jsx-runtime");
@@ -2260,13 +2290,13 @@ var Select = (props) => {
     hideSearchBar = false,
     className
   } = props;
-  const [open, setOpen] = (0, import_react21.useState)(false);
-  const [searchTerm, setSearchTerm] = (0, import_react21.useState)("");
-  const searchInputRef = (0, import_react21.useRef)(null);
+  const [open, setOpen] = (0, import_react22.useState)(false);
+  const [searchTerm, setSearchTerm] = (0, import_react22.useState)("");
+  const searchInputRef = (0, import_react22.useRef)(null);
   const filteredOptions = options.filter(
     (option) => option.label.toLowerCase().includes(searchTerm.toLowerCase())
   );
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (open && !hideSearchBar) {
       const id = requestAnimationFrame(() => {
         var _a;
@@ -2458,7 +2488,7 @@ var Select = (props) => {
 };
 
 // src/ui/components/ui/TagSelect.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var RadixPopover2 = __toESM(require("@radix-ui/react-popover"));
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var TagSelect = ({
@@ -2471,9 +2501,9 @@ var TagSelect = ({
   width,
   className
 }) => {
-  const [open, setOpen] = (0, import_react22.useState)(false);
-  const [searchTerm, setSearchTerm] = (0, import_react22.useState)("");
-  const inputRef = (0, import_react22.useRef)(null);
+  const [open, setOpen] = (0, import_react23.useState)(false);
+  const [searchTerm, setSearchTerm] = (0, import_react23.useState)("");
+  const inputRef = (0, import_react23.useRef)(null);
   const selectedValues = new Set(value.map((v) => v.value));
   const filteredOptions = options.filter(
     (o) => !selectedValues.has(o.value) && o.label.toLowerCase().includes(searchTerm.toLowerCase())
@@ -2584,7 +2614,7 @@ var TagSelect = ({
 };
 
 // src/ui/components/ui/Pagination.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var getPageNumbers = (current, total) => {
   if (total <= 5) return Array.from({ length: total }, (_, i) => i + 1);
@@ -2602,7 +2632,7 @@ var Pagination = ({
   summaryLabel
 }) => {
   const totalPages = Math.max(1, Math.ceil(totalItems / itemsPerPage));
-  const pages = (0, import_react23.useMemo)(
+  const pages = (0, import_react24.useMemo)(
     () => getPageNumbers(currentPage, totalPages),
     [currentPage, totalPages]
   );
@@ -2979,7 +3009,7 @@ var TableFooterCell = ({
 );
 
 // src/ui/components/ui/Avatar.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var RadixAvatar = __toESM(require("@radix-ui/react-avatar"));
 
 // src/utils/string/capitalizeFirstLetter.ts
@@ -3061,8 +3091,8 @@ var formatNameWithInitial = (firstname, lastname) => {
 
 // src/ui/components/ui/Avatar.tsx
 var import_jsx_runtime41 = require("react/jsx-runtime");
-var AvatarSizeContext = (0, import_react24.createContext)(40);
-var useAvatarSize = () => (0, import_react24.useContext)(AvatarSizeContext);
+var AvatarSizeContext = (0, import_react25.createContext)(40);
+var useAvatarSize = () => (0, import_react25.useContext)(AvatarSizeContext);
 var BADGE_BG_CLASS = {
   "blue-700": "bg-blue-700",
   "blue-900": "bg-blue-900",
@@ -3093,7 +3123,7 @@ var BADGE_ICON_COLOR_CLASS = {
   "orange-600": "text-orange-600",
   "purple-700": "text-purple-700"
 };
-var Avatar = (0, import_react24.forwardRef)(
+var Avatar = (0, import_react25.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       size = 40,
@@ -3146,7 +3176,7 @@ var Avatar = (0, import_react24.forwardRef)(
   }
 );
 Avatar.displayName = "Avatar";
-var AvatarImage = (0, import_react24.forwardRef)((_a, ref) => {
+var AvatarImage = (0, import_react25.forwardRef)((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     RadixAvatar.Image,
@@ -3172,7 +3202,7 @@ var FALLBACK_COLOR_CLASS = {
   "orange-600": "bg-orange-600 text-white",
   "purple-700": "bg-purple-700 text-white"
 };
-var AvatarFallback = (0, import_react24.forwardRef)((_a, ref) => {
+var AvatarFallback = (0, import_react25.forwardRef)((_a, ref) => {
   var _b = _a, { color = "grey-600", className, style } = _b, props = __objRest(_b, ["color", "className", "style"]);
   const size = useAvatarSize();
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
@@ -3189,7 +3219,7 @@ var AvatarFallback = (0, import_react24.forwardRef)((_a, ref) => {
   );
 });
 AvatarFallback.displayName = "AvatarFallback";
-var AvatarBadge = (0, import_react24.forwardRef)(
+var AvatarBadge = (0, import_react25.forwardRef)(
   (_a, ref) => {
     var _b = _a, { className, style } = _b, props = __objRest(_b, ["className", "style"]);
     const size = useAvatarSize();
@@ -3220,14 +3250,14 @@ var AvatarGroup = (_a) => {
     "className",
     "children"
   ]);
-  const items = import_react24.Children.toArray(children).filter(
-    import_react24.isValidElement
+  const items = import_react25.Children.toArray(children).filter(
+    import_react25.isValidElement
   );
   const visible = max ? items.slice(0, max) : items;
   const overflow = max ? items.length - max : 0;
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Layout, __spreadProps(__spreadValues({ className: cn("-space-x-2", className) }, props), { children: [
     visible.map(
-      (child, index) => (0, import_react24.cloneElement)(child, {
+      (child, index) => (0, import_react25.cloneElement)(child, {
         key: index,
         size,
         className: cn("ring-2 ring-white", child.props.className)
@@ -3521,7 +3551,7 @@ var CollapsibleContent = (_a) => {
 };
 
 // src/ui/components/ui/Drawer.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_vaul = require("vaul");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var KEEP_OPEN_SELECTOR = '[role="dialog"], [role="listbox"], [data-drawer-keep-open]';
@@ -3541,8 +3571,10 @@ var Drawer = ({
   className
 }) => {
   const isVertical = direction === "left" || direction === "right";
-  const contentRef = (0, import_react25.useRef)(null);
-  (0, import_react25.useEffect)(() => {
+  const contentRef = (0, import_react26.useRef)(null);
+  const overlayRef = (0, import_react26.useRef)(null);
+  useAllowPortalScroll(modal && open, contentRef, overlayRef);
+  (0, import_react26.useEffect)(() => {
     if (modal || !open || typeof document === "undefined") return;
     const handlePointerDown = (event) => {
       var _a;
@@ -3555,7 +3587,7 @@ var Drawer = ({
     document.addEventListener("pointerdown", handlePointerDown);
     return () => document.removeEventListener("pointerdown", handlePointerDown);
   }, [modal, open, onClose]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (modal || !open) return;
     const frame = requestAnimationFrame(() => {
       document.body.style.pointerEvents = "auto";
@@ -3570,7 +3602,13 @@ var Drawer = ({
       open,
       onOpenChange: (next) => !next && (onClose == null ? void 0 : onClose()),
       children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_vaul.Drawer.Portal, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_vaul.Drawer.Overlay, { className: "fixed inset-0 z-40 bg-black/35" }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          import_vaul.Drawer.Overlay,
+          {
+            ref: overlayRef,
+            className: "fixed inset-0 z-40 bg-black/35"
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           import_vaul.Drawer.Content,
           {
@@ -3692,17 +3730,17 @@ var Popover = ({
 ] });
 
 // src/ui/components/ui/sidebar/Sidebar.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 
 // src/ui/components/ui/sidebar/SidebarContext.ts
-var import_react26 = require("react");
-var SidebarCollapsedContext = (0, import_react26.createContext)(false);
+var import_react27 = require("react");
+var SidebarCollapsedContext = (0, import_react27.createContext)(false);
 var SidebarCollapsedProvider = SidebarCollapsedContext.Provider;
-var useSidebarCollapsed = () => (0, import_react26.useContext)(SidebarCollapsedContext);
+var useSidebarCollapsed = () => (0, import_react27.useContext)(SidebarCollapsedContext);
 
 // src/ui/components/ui/sidebar/Sidebar.tsx
 var import_jsx_runtime47 = require("react/jsx-runtime");
-var Sidebar = (0, import_react27.forwardRef)(
+var Sidebar = (0, import_react28.forwardRef)(
   (_a, ref) => {
     var _b = _a, { collapsed = false, className, children } = _b, props = __objRest(_b, ["collapsed", "className", "children"]);
     return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SidebarCollapsedProvider, { value: collapsed, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
@@ -3723,9 +3761,9 @@ var Sidebar = (0, import_react27.forwardRef)(
 Sidebar.displayName = "Sidebar";
 
 // src/ui/components/ui/sidebar/SidebarTrigger.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_jsx_runtime48 = require("react/jsx-runtime");
-var SidebarTrigger = (0, import_react28.forwardRef)((_a, ref) => {
+var SidebarTrigger = (0, import_react29.forwardRef)((_a, ref) => {
   var _b = _a, { collapsed, className } = _b, props = __objRest(_b, ["collapsed", "className"]);
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     "button",
@@ -3752,9 +3790,9 @@ var SidebarTrigger = (0, import_react28.forwardRef)((_a, ref) => {
 SidebarTrigger.displayName = "SidebarTrigger";
 
 // src/ui/components/ui/sidebar/SidebarHeader.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_jsx_runtime49 = require("react/jsx-runtime");
-var SidebarHeader = (0, import_react29.forwardRef)(
+var SidebarHeader = (0, import_react30.forwardRef)(
   (_a, ref) => {
     var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
@@ -3769,9 +3807,9 @@ var SidebarHeader = (0, import_react29.forwardRef)(
 SidebarHeader.displayName = "SidebarHeader";
 
 // src/ui/components/ui/sidebar/SidebarContent.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_jsx_runtime50 = require("react/jsx-runtime");
-var SidebarContent = (0, import_react30.forwardRef)(
+var SidebarContent = (0, import_react31.forwardRef)(
   (_a, ref) => {
     var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
@@ -3790,9 +3828,9 @@ var SidebarContent = (0, import_react30.forwardRef)(
 SidebarContent.displayName = "SidebarContent";
 
 // src/ui/components/ui/sidebar/SidebarGroup.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_jsx_runtime51 = require("react/jsx-runtime");
-var SidebarGroup = (0, import_react31.forwardRef)(
+var SidebarGroup = (0, import_react32.forwardRef)(
   (_a, ref) => {
     var _b = _a, { label, className, children } = _b, props = __objRest(_b, ["label", "className", "children"]);
     const collapsed = useSidebarCollapsed();
@@ -3813,9 +3851,9 @@ var SidebarGroup = (0, import_react31.forwardRef)(
 SidebarGroup.displayName = "SidebarGroup";
 
 // src/ui/components/ui/sidebar/SidebarMenuButton.tsx
-var import_react32 = require("react");
+var import_react33 = require("react");
 var import_jsx_runtime52 = require("react/jsx-runtime");
-var SidebarMenuButton = (0, import_react32.forwardRef)(
+var SidebarMenuButton = (0, import_react33.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       icon,
@@ -3895,9 +3933,9 @@ var SidebarMenuButton = (0, import_react32.forwardRef)(
 SidebarMenuButton.displayName = "SidebarMenuButton";
 
 // src/ui/components/ui/sidebar/SidebarMenuSub.tsx
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_jsx_runtime53 = require("react/jsx-runtime");
-var SidebarMenuSub = (0, import_react33.forwardRef)(
+var SidebarMenuSub = (0, import_react34.forwardRef)(
   (_a, ref) => {
     var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
@@ -3915,22 +3953,22 @@ var SidebarMenuSub = (0, import_react33.forwardRef)(
 SidebarMenuSub.displayName = "SidebarMenuSub";
 
 // src/ui/components/ui/sidebar/SidebarMenuSubItem.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_jsx_runtime54 = require("react/jsx-runtime");
-var SidebarMenuSubItem = (0, import_react34.forwardRef)((_a, ref) => {
+var SidebarMenuSubItem = (0, import_react35.forwardRef)((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("li", __spreadValues({ ref, className: cn("relative", className) }, props));
 });
 SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
 
 // src/ui/components/ui/sidebar/SidebarMenuSubButton.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 var import_jsx_runtime55 = require("react/jsx-runtime");
 var SIZE_CLASS = {
   default: "h-10",
   lg: "h-14"
 };
-var SidebarMenuSubButton = (0, import_react35.forwardRef)((_a, ref) => {
+var SidebarMenuSubButton = (0, import_react36.forwardRef)((_a, ref) => {
   var _b = _a, { active, size = "default", className } = _b, props = __objRest(_b, ["active", "size", "className"]);
   return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     "button",
@@ -3951,9 +3989,9 @@ var SidebarMenuSubButton = (0, import_react35.forwardRef)((_a, ref) => {
 SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
 
 // src/ui/components/ui/sidebar/SidebarFooter.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_jsx_runtime56 = require("react/jsx-runtime");
-var SidebarFooter = (0, import_react36.forwardRef)(
+var SidebarFooter = (0, import_react37.forwardRef)(
   (_a, ref) => {
     var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
@@ -3991,9 +4029,9 @@ var SidebarSupportInfo = ({
 };
 
 // src/ui/components/ui/sidebar/SidebarMenuSearchInput.tsx
-var import_react37 = require("react");
+var import_react38 = require("react");
 var import_jsx_runtime58 = require("react/jsx-runtime");
-var SidebarMenuSearchInput = (0, import_react37.forwardRef)((_a, ref) => {
+var SidebarMenuSearchInput = (0, import_react38.forwardRef)((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(InputGroup, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(InputGroupAddon, { align: "inline-start", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(FaIcon, { name: "magnifying-glass", size: 14, className: "text-white/50" }) }),
@@ -4012,7 +4050,7 @@ var SidebarMenuSearchInput = (0, import_react37.forwardRef)((_a, ref) => {
 SidebarMenuSearchInput.displayName = "SidebarMenuSearchInput";
 
 // src/ui/components/ui/sidebar/SidebarUserMenu.tsx
-var import_react38 = require("react");
+var import_react39 = require("react");
 var RadixPopover4 = __toESM(require("@radix-ui/react-popover"));
 var import_jsx_runtime59 = require("react/jsx-runtime");
 var panelClassName = cn(
@@ -4029,7 +4067,7 @@ var SidebarUserMenu = ({
   className
 }) => {
   const collapsed = useSidebarCollapsed();
-  const [open, setOpen] = (0, import_react38.useState)(false);
+  const [open, setOpen] = (0, import_react39.useState)(false);
   const runAndClose = (action) => {
     action();
     setOpen(false);
@@ -4325,7 +4363,7 @@ var toast = {
 };
 
 // src/ui/components/ui/PageContainer.tsx
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_class_variance_authority13 = require("class-variance-authority");
 var import_jsx_runtime63 = require("react/jsx-runtime");
 var pageContainerVariants = (0, import_class_variance_authority13.cva)(
@@ -4342,7 +4380,7 @@ var pageContainerVariants = (0, import_class_variance_authority13.cva)(
     defaultVariants: { padding: "md" }
   }
 );
-var PageContainer = (0, import_react39.forwardRef)(
+var PageContainer = (0, import_react40.forwardRef)(
   (_a, ref) => {
     var _b = _a, { padding, className } = _b, props = __objRest(_b, ["padding", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
@@ -4357,7 +4395,7 @@ var PageContainer = (0, import_react39.forwardRef)(
 PageContainer.displayName = "PageContainer";
 
 // src/ui/components/ui/IconTabs.tsx
-var import_react40 = require("react");
+var import_react41 = require("react");
 var import_jsx_runtime64 = require("react/jsx-runtime");
 var IconTabs = ({
   items,
@@ -4367,10 +4405,10 @@ var IconTabs = ({
   className
 }) => {
   var _a;
-  const listRef = (0, import_react40.useRef)(null);
-  const tabRefs = (0, import_react40.useRef)([]);
-  const [bar, setBar] = (0, import_react40.useState)({ left: 0, top: 0, width: 0, height: 0 });
-  const updateBar = (0, import_react40.useCallback)(() => {
+  const listRef = (0, import_react41.useRef)(null);
+  const tabRefs = (0, import_react41.useRef)([]);
+  const [bar, setBar] = (0, import_react41.useState)({ left: 0, top: 0, width: 0, height: 0 });
+  const updateBar = (0, import_react41.useCallback)(() => {
     const root = listRef.current;
     const activeEl = tabRefs.current[value];
     if (!root || !activeEl) return;
@@ -4383,7 +4421,7 @@ var IconTabs = ({
       height: box.height
     });
   }, [value]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     updateBar();
     const ro = new ResizeObserver(updateBar);
     if (listRef.current) ro.observe(listRef.current);
@@ -4565,7 +4603,7 @@ var Banner = ({
 };
 
 // src/ui/components/ui/FloatingButton.tsx
-var import_react41 = require("react");
+var import_react42 = require("react");
 
 // src/ui/lib/floatingArc.ts
 var MAX_STEP = 65;
@@ -4717,17 +4755,17 @@ var FloatingButton = ({
   persistKey,
   safeArea
 }) => {
-  const containerRef = (0, import_react41.useRef)(null);
-  const [placement, setPlacement] = (0, import_react41.useState)(() => ({
+  const containerRef = (0, import_react42.useRef)(null);
+  const [placement, setPlacement] = (0, import_react42.useState)(() => ({
     geometry: __spreadValues({ base: 90 }, arcLayout(actions.length, ARC_RADIUS, SUB_SIZE)),
     shift: { x: 0, y: 0 }
   }));
-  const [isDragging, setIsDragging] = (0, import_react41.useState)(false);
-  const [offset, setOffset] = (0, import_react41.useState)(() => readStoredOffset(persistKey));
-  const offsetRef = (0, import_react41.useRef)(offset);
-  const lastPointRef = (0, import_react41.useRef)({ x: 0, y: 0 });
-  const dragDistanceRef = (0, import_react41.useRef)(0);
-  const clampOffset = (0, import_react41.useCallback)(
+  const [isDragging, setIsDragging] = (0, import_react42.useState)(false);
+  const [offset, setOffset] = (0, import_react42.useState)(() => readStoredOffset(persistKey));
+  const offsetRef = (0, import_react42.useRef)(offset);
+  const lastPointRef = (0, import_react42.useRef)({ x: 0, y: 0 });
+  const dragDistanceRef = (0, import_react42.useRef)(0);
+  const clampOffset = (0, import_react42.useCallback)(
     (next) => {
       var _a, _b, _c, _d;
       const el = containerRef.current;
@@ -4747,14 +4785,14 @@ var FloatingButton = ({
     },
     [safeArea == null ? void 0 : safeArea.left, safeArea == null ? void 0 : safeArea.top, safeArea == null ? void 0 : safeArea.right, safeArea == null ? void 0 : safeArea.bottom]
   );
-  (0, import_react41.useLayoutEffect)(() => {
+  (0, import_react42.useLayoutEffect)(() => {
     const corrected = clampOffset(offsetRef.current);
     if (corrected.x === offsetRef.current.x && corrected.y === offsetRef.current.y)
       return;
     offsetRef.current = corrected;
     setOffset(corrected);
   }, [clampOffset]);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (!draggable || !isDragging) return;
     const onPointerMove = (e) => {
       const dx = e.clientX - lastPointRef.current.x;
@@ -4790,7 +4828,7 @@ var FloatingButton = ({
       window.removeEventListener("pointercancel", endDrag);
     };
   }, [draggable, isDragging, persistKey, clampOffset]);
-  const resolvePlacement = (0, import_react41.useCallback)(() => {
+  const resolvePlacement = (0, import_react42.useCallback)(() => {
     var _a, _b, _c, _d;
     const el = containerRef.current;
     if (!el || typeof window === "undefined") return;
@@ -4819,13 +4857,13 @@ var FloatingButton = ({
     safeArea == null ? void 0 : safeArea.right,
     safeArea == null ? void 0 : safeArea.bottom
   ]);
-  (0, import_react41.useLayoutEffect)(() => {
+  (0, import_react42.useLayoutEffect)(() => {
     if (isOpen) resolvePlacement();
   }, [isOpen, offset, resolvePlacement]);
-  (0, import_react41.useLayoutEffect)(() => {
+  (0, import_react42.useLayoutEffect)(() => {
     resolvePlacement();
   }, [resolvePlacement]);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (typeof window === "undefined") return;
     const onResize = () => {
       resolvePlacement();
@@ -5353,7 +5391,7 @@ var Timeline = ({
 };
 
 // src/ui/components/ui/ColorPicker.tsx
-var import_react42 = require("react");
+var import_react43 = require("react");
 var import_class_variance_authority15 = require("class-variance-authority");
 var import_jsx_runtime73 = require("react/jsx-runtime");
 var swatchVariants = (0, import_class_variance_authority15.cva)(
@@ -5382,7 +5420,7 @@ var inputVariants = (0, import_class_variance_authority15.cva)(
     defaultVariants: { size: "m" }
   }
 );
-var ColorPicker = (0, import_react42.forwardRef)(
+var ColorPicker = (0, import_react43.forwardRef)(
   ({
     label,
     value,
@@ -5392,7 +5430,7 @@ var ColorPicker = (0, import_react42.forwardRef)(
     size,
     className
   }, ref) => {
-    const [internalColor, setInternalColor] = (0, import_react42.useState)(defaultValue);
+    const [internalColor, setInternalColor] = (0, import_react43.useState)(defaultValue);
     const currentColor = value !== void 0 ? value : internalColor;
     const handleChange = (e) => {
       const next = e.target.value;
@@ -5456,7 +5494,7 @@ var ColorPicker = (0, import_react42.forwardRef)(
 ColorPicker.displayName = "ColorPicker";
 
 // src/ui/components/ui/FileUploadZone.tsx
-var import_react43 = require("react");
+var import_react44 = require("react");
 var import_jsx_runtime74 = require("react/jsx-runtime");
 var ACCEPT_MAP = {
   png: "image/png",
@@ -5489,23 +5527,23 @@ var FileUploadZone = ({
   showFileName = false,
   className
 }) => {
-  const [isDragging, setIsDragging] = (0, import_react43.useState)(false);
-  const [internalPreviewUrl, setInternalPreviewUrl] = (0, import_react43.useState)(
+  const [isDragging, setIsDragging] = (0, import_react44.useState)(false);
+  const [internalPreviewUrl, setInternalPreviewUrl] = (0, import_react44.useState)(
     null
   );
-  const [fileType, setFileType] = (0, import_react43.useState)(null);
-  const [fileName, setFileName] = (0, import_react43.useState)(null);
-  const [inlineError, setInlineError] = (0, import_react43.useState)(null);
-  const inputRef = (0, import_react43.useRef)(null);
+  const [fileType, setFileType] = (0, import_react44.useState)(null);
+  const [fileName, setFileName] = (0, import_react44.useState)(null);
+  const [inlineError, setInlineError] = (0, import_react44.useState)(null);
+  const inputRef = (0, import_react44.useRef)(null);
   const resolvedAccept = acceptOnlyPdf ? PDF_ONLY : accept;
   const mimeTypes = getMimeTypes(resolvedAccept);
   const acceptString = mimeTypes.join(",");
   const previewUrl = multiple ? null : controlledPreviewUrl || (showPreview ? internalPreviewUrl : null);
-  const emitError = (0, import_react43.useCallback)(
+  const emitError = (0, import_react44.useCallback)(
     (message) => onError ? onError(message) : setInlineError(message),
     [onError]
   );
-  const validateFile = (0, import_react43.useCallback)(
+  const validateFile = (0, import_react44.useCallback)(
     (file) => {
       if (!mimeTypes.includes(file.type))
         return { ok: false, error: "Format de fichier non accept\xE9." };
@@ -5519,7 +5557,7 @@ var FileUploadZone = ({
     },
     [mimeTypes, maxSizeMB]
   );
-  const processFile = (0, import_react43.useCallback)(
+  const processFile = (0, import_react44.useCallback)(
     (file) => {
       setInlineError(null);
       const result = validateFile(file);
@@ -5534,7 +5572,7 @@ var FileUploadZone = ({
     },
     [validateFile, onSave, showPreview, emitError]
   );
-  const processFiles = (0, import_react43.useCallback)(
+  const processFiles = (0, import_react44.useCallback)(
     (files) => {
       setInlineError(null);
       for (const file of files) {
@@ -5693,7 +5731,7 @@ var FileUploadZone = ({
 };
 
 // src/ui/components/ui/FilePicker.tsx
-var import_react44 = require("react");
+var import_react45 = require("react");
 var import_jsx_runtime75 = require("react/jsx-runtime");
 var FilePicker = ({
   label,
@@ -5707,7 +5745,7 @@ var FilePicker = ({
   disabled = false,
   className
 }) => {
-  const inputRef = (0, import_react44.useRef)(null);
+  const inputRef = (0, import_react45.useRef)(null);
   return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_jsx_runtime75.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
       "input",
@@ -5745,7 +5783,7 @@ var FilePicker = ({
 };
 
 // src/ui/components/ui/Item.tsx
-var import_react45 = require("react");
+var import_react46 = require("react");
 var import_class_variance_authority16 = require("class-variance-authority");
 var import_jsx_runtime76 = require("react/jsx-runtime");
 var itemVariants = (0, import_class_variance_authority16.cva)(
@@ -5765,7 +5803,7 @@ var itemVariants = (0, import_class_variance_authority16.cva)(
     defaultVariants: { variant: "default", size: "default" }
   }
 );
-var Item3 = (0, import_react45.forwardRef)(
+var Item3 = (0, import_react46.forwardRef)(
   (_a, ref) => {
     var _b = _a, { variant, size, className } = _b, props = __objRest(_b, ["variant", "size", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
@@ -5924,7 +5962,7 @@ var Attachment = ({
 };
 
 // src/ui/components/ui/PdfPreview.tsx
-var import_react46 = require("react");
+var import_react47 = require("react");
 var import_react_pdf = require("react-pdf");
 var import_jsx_runtime78 = require("react/jsx-runtime");
 import_react_pdf.pdfjs.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${import_react_pdf.pdfjs.version}/build/pdf.worker.min.mjs`;
@@ -5934,8 +5972,8 @@ var PdfPreview = ({
   maxHeight = "600px",
   className
 }) => {
-  const [hasError, setHasError] = (0, import_react46.useState)(false);
-  const [numPages, setNumPages] = (0, import_react46.useState)(0);
+  const [hasError, setHasError] = (0, import_react47.useState)(false);
+  const [numPages, setNumPages] = (0, import_react47.useState)(0);
   const height = Math.round(width * 1.3);
   const thumbnailSkeleton = /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Skeleton, { width, height });
   if (hasError) {
@@ -5991,7 +6029,7 @@ var PdfPreview = ({
 };
 
 // src/ui/components/ui/VideoPlayer.tsx
-var import_react47 = require("react");
+var import_react48 = require("react");
 var import_jsx_runtime79 = require("react/jsx-runtime");
 var formatVideoDuration = (seconds) => {
   if (seconds === void 0 || !Number.isFinite(seconds) || seconds < 0)
@@ -6031,20 +6069,20 @@ var VideoPlayer = ({
   defaultVolume = DEFAULT_VOLUME,
   className
 }) => {
-  const [isInlinePlaying, setIsInlinePlaying] = (0, import_react47.useState)(false);
-  const [isExpanded, setIsExpanded] = (0, import_react47.useState)(false);
-  const [hasPosterError, setHasPosterError] = (0, import_react47.useState)(false);
-  const [hasFramePreviewError, setHasFramePreviewError] = (0, import_react47.useState)(false);
-  const inlineVideoRef = (0, import_react47.useRef)(null);
-  const expandedVideoRef = (0, import_react47.useRef)(null);
-  (0, import_react47.useEffect)(() => {
+  const [isInlinePlaying, setIsInlinePlaying] = (0, import_react48.useState)(false);
+  const [isExpanded, setIsExpanded] = (0, import_react48.useState)(false);
+  const [hasPosterError, setHasPosterError] = (0, import_react48.useState)(false);
+  const [hasFramePreviewError, setHasFramePreviewError] = (0, import_react48.useState)(false);
+  const inlineVideoRef = (0, import_react48.useRef)(null);
+  const expandedVideoRef = (0, import_react48.useRef)(null);
+  (0, import_react48.useEffect)(() => {
     setHasPosterError(false);
   }, [poster]);
-  (0, import_react47.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     setHasFramePreviewError(false);
   }, [src]);
   const visiblePoster = hasPosterError ? void 0 : poster;
-  const attachExpandedVideo = (0, import_react47.useCallback)(
+  const attachExpandedVideo = (0, import_react48.useCallback)(
     (video) => {
       expandedVideoRef.current = video;
       if (video) video.volume = clampVolume(defaultVolume);
@@ -6056,7 +6094,7 @@ var VideoPlayer = ({
     e.preventDefault();
     (_a = expandedVideoRef.current) == null ? void 0 : _a.focus({ preventScroll: true });
   };
-  const attachInlineVideo = (0, import_react47.useCallback)(
+  const attachInlineVideo = (0, import_react48.useCallback)(
     (video) => {
       inlineVideoRef.current = video;
       if (video) video.volume = clampVolume(defaultVolume);
@@ -6317,7 +6355,7 @@ var ScrollArea = (_a) => {
 };
 
 // src/ui/components/ui/Message.tsx
-var import_react48 = require("react");
+var import_react49 = require("react");
 var import_jsx_runtime81 = require("react/jsx-runtime");
 var BUBBLE_BACKGROUND = {
   own: { solid: "bg-blue-700", pale: "bg-blue-50" },
@@ -6329,7 +6367,7 @@ var BUBBLE_TAIL = {
   teammate: "rounded-br-none",
   other: "rounded-bl-none"
 };
-var Message = (0, import_react48.forwardRef)(
+var Message = (0, import_react49.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       isOwn = false,
@@ -6471,7 +6509,7 @@ var Message = (0, import_react48.forwardRef)(
 Message.displayName = "Message";
 
 // src/ui/components/ui/MessageScroller.tsx
-var import_react49 = require("react");
+var import_react50 = require("react");
 var import_jsx_runtime82 = require("react/jsx-runtime");
 var SEPARATOR_LINE = {
   neutral: "",
@@ -6523,9 +6561,9 @@ var MessageScroller = ({
   viewportRef,
   className
 }) => {
-  const fallbackRef = (0, import_react49.useRef)(null);
+  const fallbackRef = (0, import_react50.useRef)(null);
   const scrollerRef = viewportRef != null ? viewportRef : fallbackRef;
-  (0, import_react49.useLayoutEffect)(() => {
+  (0, import_react50.useLayoutEffect)(() => {
     if (!autoScroll) return;
     const viewport = scrollerRef.current;
     if (!viewport) return;
@@ -6579,7 +6617,7 @@ var MessageScroller = ({
 };
 
 // src/ui/components/ui/Stepper.tsx
-var import_react50 = require("react");
+var import_react51 = require("react");
 var import_jsx_runtime83 = require("react/jsx-runtime");
 var Stepper = ({
   numberOfSteps,
@@ -6597,7 +6635,7 @@ var Stepper = ({
     children: Array.from({ length: numberOfSteps }, (_, i) => {
       const isActive = i === current;
       const isCompleted = i < current;
-      return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_react50.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_react51.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
           "div",
           {
@@ -6617,7 +6655,7 @@ var Stepper = ({
 );
 
 // src/ui/components/ui/DatePicker.tsx
-var import_react51 = require("react");
+var import_react52 = require("react");
 var import_react_day_picker = require("react-day-picker");
 var import_locale = require("react-day-picker/locale");
 var import_style2 = require("react-day-picker/style.css");
@@ -6678,8 +6716,8 @@ var DatePicker = ({
   className
 }) => {
   const isRange = mode === "range";
-  const [open, setOpen] = (0, import_react51.useState)(false);
-  const [activePreset, setActivePreset] = (0, import_react51.useState)(null);
+  const [open, setOpen] = (0, import_react52.useState)(false);
+  const [activePreset, setActivePreset] = (0, import_react52.useState)(null);
   const resolvedPresets = presets != null ? presets : isRange ? RANGE_PRESETS : SINGLE_PRESETS;
   const displayText = isRange ? startDate && endDate ? `${(0, import_date_fns.format)(startDate, "dd/MM/yyyy")} \u2014 ${(0, import_date_fns.format)(endDate, "dd/MM/yyyy")}` : placeholder != null ? placeholder : "S\xE9lectionner une p\xE9riode" : value ? (0, import_date_fns.format)(value, "dd/MM/yyyy") : placeholder != null ? placeholder : "S\xE9lectionner une date";
   const hasValue = isRange ? Boolean(startDate && endDate) : Boolean(value);

package/dist/ui/index.mjs

@@ -1878,11 +1878,36 @@ var Tabs = ({
 import {
   createContext,
   useContext,
-  useEffect as useEffect3,
+  useEffect as useEffect4,
   useRef as useRef3,
   useState as useState3
 } from "react";
 import * as RadixDialog from "@radix-ui/react-dialog";
+
+// src/ui/lib/portalScroll.ts
+import { useEffect as useEffect3 } from "react";
+var SCROLL_EVENTS = ["wheel", "touchmove"];
+var useAllowPortalScroll = (active, contentRef, overlayRef) => {
+  useEffect3(() => {
+    if (!active || typeof document === "undefined") return;
+    const release = (event) => {
+      var _a, _b;
+      const target = event.target;
+      if (!target) return;
+      if ((_a = contentRef.current) == null ? void 0 : _a.contains(target)) return;
+      if ((_b = overlayRef.current) == null ? void 0 : _b.contains(target)) return;
+      event.stopPropagation();
+    };
+    SCROLL_EVENTS.forEach(
+      (type) => document.body.addEventListener(type, release)
+    );
+    return () => SCROLL_EVENTS.forEach(
+      (type) => document.body.removeEventListener(type, release)
+    );
+  }, [active, contentRef, overlayRef]);
+};
+
+// src/ui/components/ui/Modal.tsx
 import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
 var ModalDragContext = createContext({
   draggable: false,
@@ -1902,10 +1927,13 @@ var Modal = ({
   const [isDragging, setIsDragging] = useState3(false);
   const [offset, setOffset] = useState3({ x: 0, y: 0 });
   const lastPointRef = useRef3({ x: 0, y: 0 });
-  useEffect3(() => {
+  const contentRef = useRef3(null);
+  const overlayRef = useRef3(null);
+  useAllowPortalScroll(open, contentRef, overlayRef);
+  useEffect4(() => {
     if (open) setOffset({ x: 0, y: 0 });
   }, [open]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!draggable || !isDragging) return;
     const onPointerMove = (e) => {
       const dx = e.clientX - lastPointRef.current.x;
@@ -1937,6 +1965,7 @@ var Modal = ({
     /* @__PURE__ */ jsx26(
       RadixDialog.Overlay,
       {
+        ref: overlayRef,
         className: cn(
           "fixed inset-0 z-40",
           draggable ? "bg-transparent" : "bg-black/50"
@@ -1946,6 +1975,7 @@ var Modal = ({
     /* @__PURE__ */ jsx26(
       RadixDialog.Content,
       {
+        ref: contentRef,
         onOpenAutoFocus,
         className: cn(
           "fixed left-1/2 top-1/2 z-50 flex max-h-[90vh] -translate-x-1/2 -translate-y-1/2 flex-col gap-4",
@@ -2037,7 +2067,7 @@ var ModalFooter = (_a) => {
 var ModalClose = RadixDialog.Close;
 
 // src/ui/components/ui/Select.tsx
-import { useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
+import { useEffect as useEffect5, useRef as useRef4, useState as useState4 } from "react";
 import * as RadixSelect from "@radix-ui/react-select";
 import * as RadixPopover from "@radix-ui/react-popover";
 import { jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
@@ -2089,7 +2119,7 @@ var Select = (props) => {
   const filteredOptions = options.filter(
     (option) => option.label.toLowerCase().includes(searchTerm.toLowerCase())
   );
-  useEffect4(() => {
+  useEffect5(() => {
     if (open && !hideSearchBar) {
       const id = requestAnimationFrame(() => {
         var _a;
@@ -3351,7 +3381,7 @@ var CollapsibleContent = (_a) => {
 };
 
 // src/ui/components/ui/Drawer.tsx
-import { useEffect as useEffect5, useRef as useRef6 } from "react";
+import { useEffect as useEffect6, useRef as useRef6 } from "react";
 import { Drawer as VaulDrawer } from "vaul";
 import { jsx as jsx45, jsxs as jsxs22 } from "react/jsx-runtime";
 var KEEP_OPEN_SELECTOR = '[role="dialog"], [role="listbox"], [data-drawer-keep-open]';
@@ -3372,7 +3402,9 @@ var Drawer = ({
 }) => {
   const isVertical = direction === "left" || direction === "right";
   const contentRef = useRef6(null);
-  useEffect5(() => {
+  const overlayRef = useRef6(null);
+  useAllowPortalScroll(modal && open, contentRef, overlayRef);
+  useEffect6(() => {
     if (modal || !open || typeof document === "undefined") return;
     const handlePointerDown = (event) => {
       var _a;
@@ -3385,7 +3417,7 @@ var Drawer = ({
     document.addEventListener("pointerdown", handlePointerDown);
     return () => document.removeEventListener("pointerdown", handlePointerDown);
   }, [modal, open, onClose]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (modal || !open) return;
     const frame = requestAnimationFrame(() => {
       document.body.style.pointerEvents = "auto";
@@ -3400,7 +3432,13 @@ var Drawer = ({
       open,
       onOpenChange: (next) => !next && (onClose == null ? void 0 : onClose()),
       children: /* @__PURE__ */ jsxs22(VaulDrawer.Portal, { children: [
-        /* @__PURE__ */ jsx45(VaulDrawer.Overlay, { className: "fixed inset-0 z-40 bg-black/35" }),
+        /* @__PURE__ */ jsx45(
+          VaulDrawer.Overlay,
+          {
+            ref: overlayRef,
+            className: "fixed inset-0 z-40 bg-black/35"
+          }
+        ),
         /* @__PURE__ */ jsx45(
           VaulDrawer.Content,
           {
@@ -4187,7 +4225,7 @@ var PageContainer = forwardRef29(
 PageContainer.displayName = "PageContainer";
 
 // src/ui/components/ui/IconTabs.tsx
-import { useCallback as useCallback2, useEffect as useEffect6, useRef as useRef7, useState as useState7 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect7, useRef as useRef7, useState as useState7 } from "react";
 import { jsx as jsx64, jsxs as jsxs30 } from "react/jsx-runtime";
 var IconTabs = ({
   items,
@@ -4213,7 +4251,7 @@ var IconTabs = ({
       height: box.height
     });
   }, [value]);
-  useEffect6(() => {
+  useEffect7(() => {
     updateBar();
     const ro = new ResizeObserver(updateBar);
     if (listRef.current) ro.observe(listRef.current);
@@ -4397,7 +4435,7 @@ var Banner = ({
 // src/ui/components/ui/FloatingButton.tsx
 import {
   useCallback as useCallback3,
-  useEffect as useEffect7,
+  useEffect as useEffect8,
   useLayoutEffect,
   useRef as useRef8,
   useState as useState8
@@ -4590,7 +4628,7 @@ var FloatingButton = ({
     offsetRef.current = corrected;
     setOffset(corrected);
   }, [clampOffset]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!draggable || !isDragging) return;
     const onPointerMove = (e) => {
       const dx = e.clientX - lastPointRef.current.x;
@@ -4661,7 +4699,7 @@ var FloatingButton = ({
   useLayoutEffect(() => {
     resolvePlacement();
   }, [resolvePlacement]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (typeof window === "undefined") return;
     const onResize = () => {
       resolvePlacement();
@@ -5829,7 +5867,7 @@ var PdfPreview = ({
 // src/ui/components/ui/VideoPlayer.tsx
 import {
   useCallback as useCallback5,
-  useEffect as useEffect8,
+  useEffect as useEffect9,
   useRef as useRef11,
   useState as useState12
 } from "react";
@@ -5878,10 +5916,10 @@ var VideoPlayer = ({
   const [hasFramePreviewError, setHasFramePreviewError] = useState12(false);
   const inlineVideoRef = useRef11(null);
   const expandedVideoRef = useRef11(null);
-  useEffect8(() => {
+  useEffect9(() => {
     setHasPosterError(false);
   }, [poster]);
-  useEffect8(() => {
+  useEffect9(() => {
     setHasFramePreviewError(false);
   }, [src]);
   const visiblePoster = hasPosterError ? void 0 : poster;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-zystem",
-  "version": "1.0.363",
+  "version": "1.0.365",
   "description": "A React design system of importable components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",