@hellobetterdigitalnz/betterui 0.0.3-291 → 0.0.3-292

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hellobetterdigitalnz/betterui",
-  "version": "0.0.3-291",
+  "version": "0.0.3-292",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

package/src/Components/DataDisplay/GanttChart/GanttChart.tsx

@@ -10,11 +10,13 @@ import {
 import "./GanttChart.scss";
 import { DotsSixVertical } from "../../Icons";
 
+// -------------------- Types --------------------
+
 type GanttTask = {
   id: string;
   name: string;
-  start: string;
-  end: string;
+  start: string; // ISO
+  end: string;   // ISO
   color?: string;
   user?: string;
 };
@@ -24,6 +26,8 @@ type GanttChartProps = {
   onChange?: (tasks: GanttTask[]) => void;
 };
 
+// -------------------- Utils --------------------
+
 function dateToMinuteIndex(base: Date, d: Date) {
   return differenceInMinutes(d, base);
 }
@@ -36,13 +40,16 @@ function clamp(n: number, min: number, max: number) {
   return Math.min(max, Math.max(min, n));
 }
 
+// -------------------- Component --------------------
+
 export default function GanttChart({ tasks: initialTasks, onChange }: GanttChartProps) {
   const [currentDay, setCurrentDay] = useState<Date>(startOfDay(new Date()));
   const startDate = startOfDay(currentDay);
   const totalDays = 1;
-  const daysRef = useRef<HTMLDivElement>(null);
-  const [cellSize, setCellSize] = useState<number>(0);
-  
+
+  // Use header hours for sizing (stable across rows). Avoid a shared ref across many rows.
+  const headerHoursRef = useRef<HTMLDivElement>(null);
+  const [cellSize, setCellSize] = useState<number>(60); // default aligns with CSS min-width
 
   const [tasks, setTasks] = useState<GanttTask[]>(
     initialTasks ?? [
@@ -52,15 +59,15 @@ export default function GanttChart({ tasks: initialTasks, onChange }: GanttChart
         start: "2025-08-27T05:30:00",
         end: "2025-08-27T10:30:00",
         color: "blue",
-        user: "Alice"
+        user: "Alice",
       },
       {
         id: "2",
         name: "Development",
         start: "2025-08-27T09:45:00",
-        end: "2025-08-17T27:30:00",
+        end: "2025-08-27T17:30:00", // FIX: valid 24h time and correct date
         color: "green",
-        user: "Bob"
+        user: "Bob",
       },
       {
         id: "3",
@@ -68,7 +75,7 @@ export default function GanttChart({ tasks: initialTasks, onChange }: GanttChart
         start: "2025-08-27T08:10:00",
         end: "2025-08-27T09:40:00",
         color: "orange",
-        user: "Charlie"
+        user: "Charlie",
       },
       {
         id: "4",
@@ -76,7 +83,7 @@ export default function GanttChart({ tasks: initialTasks, onChange }: GanttChart
         start: "2025-08-27T08:10:00",
         end: "2025-08-27T09:40:00",
         color: "red",
-        user: "Mamudu"
+        user: "Mamudu",
       },
       {
         id: "5",
@@ -84,8 +91,8 @@ export default function GanttChart({ tasks: initialTasks, onChange }: GanttChart
         start: "2025-08-27T08:10:00",
         end: "2025-08-27T09:40:00",
         color: "black",
-        user: ""
-      }
+        user: "",
+      },
     ]
   );
 
@@ -93,10 +100,10 @@ export default function GanttChart({ tasks: initialTasks, onChange }: GanttChart
     taskId: string;
     x: number;
     y: number;
+    rowUser: string;
   }>(null);
 
-  const minuteWidth = cellSize / 60;
-
+  const minuteWidth = useMemo(() => (cellSize > 0 ? cellSize / 60 : 1), [cellSize]);
   const pxToMinutes = useCallback((px: number) => px / minuteWidth, [minuteWidth]);
   const minutesToPx = useCallback((minutes: number) => minutes * minuteWidth, [minuteWidth]);
 
@@ -106,11 +113,9 @@ export default function GanttChart({ tasks: initialTasks, onChange }: GanttChart
 
   useEffect(() => {
     const updateSize = () => {
-      if (daysRef.current) {
-        const firstCell = daysRef.current.querySelector<HTMLDivElement>("[date-cell]");
-        if (firstCell) {
-          setCellSize(firstCell.offsetWidth);
-        }
+      const firstHour = headerHoursRef.current?.querySelector<HTMLDivElement>(".hour");
+      if (firstHour) {
+        setCellSize(firstHour.offsetWidth);
       }
     };
 
@@ -119,6 +124,12 @@ export default function GanttChart({ tasks: initialTasks, onChange }: GanttChart
     return () => window.removeEventListener("resize", updateSize);
   }, []);
 
+  // Keep consumer in sync without stale closures
+  useEffect(() => {
+    if (onChange) onChange(tasks);
+  }, [tasks, onChange]);
+
+  // Drag state
   const dragState = useRef<null | {
     mode: "move" | "resize-start" | "resize-end";
     taskId: string;
@@ -128,14 +139,15 @@ export default function GanttChart({ tasks: initialTasks, onChange }: GanttChart
     originUser?: string;
   }>(null);
 
-  function getRowUserFromPoint(x: number, y: number): string | null {
-    const el = document.elementFromPoint(x, y);
-    if (!el) return null;
-    const row = el.closest(".gantt-row") as HTMLElement | null;
-    if (!row) return null;
+  function getRowInfoFromPoint(x: number, y: number): { user: string; daysEl: HTMLElement | null } {
+    const el = document.elementFromPoint(x, y) as HTMLElement | null;
+    const row = el?.closest(".gantt-row") as HTMLElement | null;
+    if (!row) return { user: "", daysEl: null };
 
     const label = row.querySelector(".task-column-label")?.textContent?.trim();
-    return label && label !== "Unassigned" ? label : "";
+    const user = label && label !== "Unassigned" ? label : ""; // empty string is our Unassigned key
+    const daysEl = row.querySelector(".days") as HTMLElement | null;
+    return { user, daysEl };
   }
 
   const onPointerDownBar = (
@@ -143,6 +155,7 @@ export default function GanttChart({ tasks: initialTasks, onChange }: GanttChart
     taskId: string,
     mode: "move" | "resize-start" | "resize-end"
   ) => {
+    e.preventDefault();
     const task = tasks.find((t) => t.id === taskId);
     if (!task) return;
 
@@ -158,22 +171,24 @@ export default function GanttChart({ tasks: initialTasks, onChange }: GanttChart
       originX: e.clientX,
       originLeftMin: dateToMinuteIndex(startDate, taskStart),
       originRightMin: dateToMinuteIndex(startDate, taskEnd),
-      originUser: task.user ?? ""
+      originUser: task.user ?? "",
     };
 
     if (mode === "move") {
-      setDragGhost({ taskId, x: e.clientX, y: e.clientY });
+      setDragGhost({ taskId, x: e.clientX, y: e.clientY, rowUser: task.user ?? "" });
     }
 
     const onPointerMove = (ev: PointerEvent) => {
       if (!dragState.current) return;
+      if (minuteWidth <= 0) return;
       const ds = dragState.current;
       const dx = ev.clientX - ds.originX;
       const deltaMinutes = Math.round(pxToMinutes(dx));
 
       if (ds.mode === "move") {
+        const { user: hoverUser } = getRowInfoFromPoint(ev.clientX, ev.clientY);
         setDragGhost((ghost) =>
-          ghost ? { ...ghost, x: ev.clientX, y: ev.clientY } : null
+          ghost ? { ...ghost, x: ev.clientX, y: ev.clientY, rowUser: hoverUser } : null
         );
       }
 
@@ -189,25 +204,19 @@ export default function GanttChart({ tasks: initialTasks, onChange }: GanttChart
             return {
               ...t,
               start: formatISO(newStart, { representation: "complete" }),
-              end: formatISO(newEnd, { representation: "complete" })
+              end: formatISO(newEnd, { representation: "complete" }),
             };
           }
 
           if (ds.mode === "resize-start") {
             const newLeft = clamp(ds.originLeftMin + deltaMinutes, 0, ds.originRightMin - 1);
             const newStart = addMinutes(startDate, newLeft);
-            return {
-              ...t,
-              start: formatISO(newStart, { representation: "complete" })
-            };
+            return { ...t, start: formatISO(newStart, { representation: "complete" }) };
           }
 
           const newRight = clamp(ds.originRightMin + deltaMinutes, ds.originLeftMin + 1, totalDays * 24 * 60);
           const newEnd = addMinutes(startDate, newRight);
-          return {
-            ...t,
-            end: formatISO(newEnd, { representation: "complete" })
-          };
+          return { ...t, end: formatISO(newEnd, { representation: "complete" }) };
         })
       );
     };
@@ -217,48 +226,38 @@ export default function GanttChart({ tasks: initialTasks, onChange }: GanttChart
         target.releasePointerCapture(e.pointerId);
       } catch {}
 
-      const dropUser = dragGhost
-        ? getRowUserFromPoint(dragGhost.x, dragGhost.y)
-        : getRowUserFromPoint(ev.clientX, ev.clientY);
-
-      if (dragState.current) {
-        const ds = dragState.current;
-
-        // find position in minutes relative to chart
-        const daysEl = daysRef.current;
-        if (daysEl) {
-          const rect = daysEl.getBoundingClientRect();
-          const dropX = (dragGhost?.x ?? ev.clientX) - rect.left;
-          const dropMinutes = Math.round(pxToMinutes(dropX));
-
-          setTasks((prev) =>
-            prev.map((t) => {
-              if (t.id !== ds.taskId) return t;
-
-              const duration = minutesBetween(new Date(t.start), new Date(t.end));
-              const newStart = addMinutes(startDate, clamp(dropMinutes, 0, 24 * 60 - duration));
-              const newEnd = addMinutes(newStart, duration);
-
-              return {
-                ...t,
-                start: formatISO(newStart, { representation: "complete" }),
-                end: formatISO(newEnd, { representation: "complete" }),
-                user: dropUser ?? t.user,
-              };
-            })
-          );
-        }
+      const { user: dropUser, daysEl } = dragGhost
+        ? getRowInfoFromPoint(dragGhost.x, dragGhost.y)
+        : getRowInfoFromPoint(ev.clientX, ev.clientY);
+
+      const ds = dragState.current;
+      if (ds && daysEl) {
+        const rect = daysEl.getBoundingClientRect();
+        const dropX = (dragGhost?.x ?? ev.clientX) - rect.left;
+        const dropMinutes = Math.round(pxToMinutes(dropX));
+
+        setTasks((prev) => {
+          return prev.map((t) => {
+            if (t.id !== ds.taskId) return t;
+            const duration = minutesBetween(new Date(t.start), new Date(t.end));
+            const newStart = addMinutes(startDate, clamp(dropMinutes, 0, 24 * 60 - duration));
+            const newEnd = addMinutes(newStart, duration);
+            return {
+              ...t,
+              start: formatISO(newStart, { representation: "complete" }),
+              end: formatISO(newEnd, { representation: "complete" }),
+              user: dropUser ?? t.user,
+            };
+          });
+        });
       }
 
       setDragGhost(null);
       dragState.current = null;
       window.removeEventListener("pointermove", onPointerMove);
       window.removeEventListener("pointerup", onPointerUp);
-
-      if (onChange) onChange(tasks);
     };
 
-
     window.addEventListener("pointermove", onPointerMove);
     window.addEventListener("pointerup", onPointerUp);
   };
@@ -270,7 +269,6 @@ export default function GanttChart({ tasks: initialTasks, onChange }: GanttChart
     const dayStart = startOfDay(currentDay);
     const dayEnd = addMinutes(dayStart, 24 * 60);
 
-    // Clip task to current day
     const displayStart = taskStart < dayStart ? dayStart : taskStart;
     const displayEnd = taskEnd > dayEnd ? dayEnd : taskEnd;
 
@@ -289,23 +287,17 @@ export default function GanttChart({ tasks: initialTasks, onChange }: GanttChart
           left: leftPx,
           width: widthPx,
           backgroundColor: task.color,
-          opacity: dragGhost?.taskId === task.id ? 0.4 : 1
+          opacity: dragGhost?.taskId === task.id ? 0.4 : 1,
         }}
       >
-        {/*<div*/}
-        {/*  className="resize-handle left"*/}
-        {/*  onPointerDown={(e) => onPointerDownBar(e, task.id, "resize-start")}*/}
-        {/*/>*/}
-        <div className="bar" >
-          <div onPointerDown={(e) => onPointerDownBar(e, task.id, "move")} className={'bar-drag'}>
-            <DotsSixVertical/>
+        {/* <div className="resize-handle left" onPointerDown={(e) => onPointerDownBar(e, task.id, "resize-start")} /> */}
+        <div className="bar">
+          <div onPointerDown={(e) => onPointerDownBar(e, task.id, "move")} className={"bar-drag"}>
+            <DotsSixVertical />
           </div>
           <span>{task.name}</span>
         </div>
-        {/*<div*/}
-        {/*  className="resize-handle right"*/}
-        {/*  onPointerDown={(e) => onPointerDownBar(e, task.id, "resize-end")}*/}
-        {/*/>*/}
+        {/* <div className="resize-handle right" onPointerDown={(e) => onPointerDownBar(e, task.id, "resize-end")} /> */}
       </div>
     );
   };
@@ -324,7 +316,7 @@ export default function GanttChart({ tasks: initialTasks, onChange }: GanttChart
           <div className="days">
             <div className="date-day-view current-day">
               <div className="single-date">{format(currentDay, "MM/dd")}</div>
-              <div className="hours">
+              <div className="hours" ref={headerHoursRef}>
                 {Array.from({ length: 24 }).map((_, h) => (
                   <div className="hour" key={h}>
                     {`${String(h).padStart(2, "0")}:00`}
@@ -344,10 +336,8 @@ export default function GanttChart({ tasks: initialTasks, onChange }: GanttChart
             })
             .map((task) => (
               <div key={task.id} className="gantt-row">
-                <div className="task-column-label">
-                  {task.user?.trim() || "Unassigned"}
-                </div>
-                <div className="days" ref={daysRef}>
+                <div className="task-column-label">{task.user?.trim() || "Unassigned"}</div>
+                <div className="days">
                   {timeUnits.map((d) => (
                     <div date-cell={d.toISOString()} key={d.toISOString()} />
                   ))}
@@ -358,7 +348,6 @@ export default function GanttChart({ tasks: initialTasks, onChange }: GanttChart
         </div>
       </div>
 
-      {/* Floating drag ghost */}
       {dragGhost && (
         <div
           className="drag-ghost"
@@ -368,17 +357,15 @@ export default function GanttChart({ tasks: initialTasks, onChange }: GanttChart
             top: dragGhost.y,
             pointerEvents: "none",
             opacity: 0.8,
-            background: tasks.find(t => t.id === dragGhost.taskId)?.color ?? "gray",
+            background: tasks.find((t) => t.id === dragGhost.taskId)?.color ?? "gray",
             padding: "0px 6px",
-            height:'24px',
-            width: '100px',
+            height: "24px",
+            width: "100px",
             borderRadius: 4,
-            zIndex: 9999
+            zIndex: 9999,
           }}
         >
-          <span>
-            {tasks.find(t => t.id === dragGhost.taskId)?.name}
-          </span>
+          <span>{tasks.find((t) => t.id === dragGhost.taskId)?.name}</span>
         </div>
       )}
     </>

package/src/Components/Icons/OfficeAndEditing/Folders/Folders.tsx

@@ -0,0 +1,47 @@
+import IconProps from "../../IconProps";
+
+const Folders = ({type = "light"}: IconProps) => {
+  if (type === "thin") {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+        <path d="M28 8.5H19.3337C19.2256 8.5 19.1203 8.46491 19.0338 8.4L15.5662 5.8C15.3064 5.60567 14.9907 5.50045 14.6663 5.5H9C8.60218 5.5 8.22064 5.65804 7.93934 5.93934C7.65804 6.22064 7.5 6.60218 7.5 7V9.5H5C4.60218 9.5 4.22064 9.65804 3.93934 9.93934C3.65804 10.2206 3.5 10.6022 3.5 11V25C3.5 25.3978 3.65804 25.7794 3.93934 26.0607C4.22064 26.342 4.60218 26.5 5 26.5H24.1112C24.4795 26.4997 24.8325 26.3532 25.0929 26.0929C25.3532 25.8325 25.4997 25.4795 25.5 25.1112V22.5H28.1112C28.4795 22.4997 28.8325 22.3532 29.0929 22.0929C29.3532 21.8325 29.4997 21.4795 29.5 21.1112V10C29.5 9.60218 29.342 9.22064 29.0607 8.93934C28.7794 8.65804 28.3978 8.5 28 8.5ZM24.5 25.1112C24.4997 25.2143 24.4586 25.3129 24.3858 25.3858C24.3129 25.4586 24.2143 25.4997 24.1112 25.5H5C4.86739 25.5 4.74021 25.4473 4.64645 25.3536C4.55268 25.2598 4.5 25.1326 4.5 25V11C4.5 10.8674 4.55268 10.7402 4.64645 10.6464C4.74021 10.5527 4.86739 10.5 5 10.5H10.6663C10.7744 10.5 10.8797 10.5351 10.9663 10.6L14.4338 13.2C14.6936 13.3943 15.0093 13.4996 15.3337 13.5H24C24.1326 13.5 24.2598 13.5527 24.3536 13.6464C24.4473 13.7402 24.5 13.8674 24.5 14V25.1112ZM28.5 21.1112C28.4997 21.2143 28.4586 21.3129 28.3858 21.3858C28.3129 21.4586 28.2143 21.4997 28.1112 21.5H25.5V14C25.5 13.6022 25.342 13.2206 25.0607 12.9393C24.7794 12.658 24.3978 12.5 24 12.5H15.3337C15.2256 12.5 15.1203 12.4649 15.0337 12.4L11.5662 9.8C11.3064 9.60567 10.9907 9.50045 10.6663 9.5H8.5V7C8.5 6.86739 8.55268 6.74021 8.64645 6.64645C8.74021 6.55268 8.86739 6.5 9 6.5H14.6663C14.7744 6.5 14.8797 6.53509 14.9663 6.6L18.4338 9.2C18.6936 9.39433 19.0093 9.49955 19.3337 9.5H28C28.1326 9.5 28.2598 9.55268 28.3536 9.64645C28.4473 9.74021 28.5 9.86739 28.5 10V21.1112Z" fill="currrentColor"/>
+      </svg>
+    );
+  }
+  if (type === "regular") {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+        <path d="M28 8H19.3337L15.8663 5.4C15.5196 5.14132 15.0988 5.00107 14.6663 5H9C8.46957 5 7.96086 5.21071 7.58579 5.58579C7.21071 5.96086 7 6.46957 7 7V9H5C4.46957 9 3.96086 9.21071 3.58579 9.58579C3.21071 9.96086 3 10.4696 3 11V25C3 25.5304 3.21071 26.0391 3.58579 26.4142C3.96086 26.7893 4.46957 27 5 27H24.1112C24.612 26.9993 25.092 26.8001 25.4461 26.4461C25.8001 26.092 25.9993 25.612 26 25.1112V23H28.1112C28.612 22.9993 29.092 22.8001 29.4461 22.4461C29.8001 22.092 29.9993 21.612 30 21.1112V10C30 9.46957 29.7893 8.96086 29.4142 8.58579C29.0391 8.21071 28.5304 8 28 8ZM24 25H5V11H10.6663L14.1337 13.6C14.4804 13.8587 14.9012 13.9989 15.3337 14H24V25ZM28 21H26V14C26 13.4696 25.7893 12.9609 25.4142 12.5858C25.0391 12.2107 24.5304 12 24 12H15.3337L11.8663 9.4C11.5196 9.14132 11.0988 9.00107 10.6663 9H9V7H14.6663L18.1338 9.6C18.4804 9.85868 18.9012 9.99893 19.3337 10H28V21Z" fill="currrentColor"/>
+      </svg>
+    );
+  }
+  if (type === "bold") {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+        <path d="M28.5 7H20L16.6663 4.5C16.233 4.17641 15.707 4.00107 15.1663 4H9.5C8.83696 4 8.20107 4.26339 7.73223 4.73223C7.26339 5.20107 7 5.83696 7 6.5V9H4.5C3.83696 9 3.20107 9.26339 2.73223 9.73223C2.26339 10.2011 2 10.837 2 11.5V25.5C2 26.163 2.26339 26.7989 2.73223 27.2678C3.20107 27.7366 3.83696 28 4.5 28H23.6112C24.2446 27.9993 24.8518 27.7475 25.2996 27.2996C25.7475 26.8518 25.9993 26.2446 26 25.6112V23H28.6112C29.2446 22.9993 29.8518 22.7475 30.2996 22.2996C30.7475 21.8518 30.9993 21.2446 31 20.6112V9.5C31 8.83696 30.7366 8.20107 30.2678 7.73223C29.7989 7.26339 29.163 7 28.5 7ZM23 25H5V12H10L13.3337 14.5C13.767 14.8236 14.293 14.9989 14.8337 15H23V25ZM28 20H26V14.5C26 13.837 25.7366 13.2011 25.2678 12.7322C24.7989 12.2634 24.163 12 23.5 12H15L11.6663 9.5C11.233 9.17641 10.707 9.00107 10.1663 9H10V7H15L18.3337 9.5C18.767 9.82359 19.293 9.99893 19.8337 10H28V20Z" fill="currrentColor"/>
+      </svg>
+    );
+  }
+  if (type === "fill") {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+        <path d="M28 8H19.3337L15.8663 5.4C15.5196 5.14132 15.0988 5.00107 14.6663 5H9C8.46957 5 7.96086 5.21071 7.58579 5.58579C7.21071 5.96086 7 6.46957 7 7V9H5C4.46957 9 3.96086 9.21071 3.58579 9.58579C3.21071 9.96086 3 10.4696 3 11V25C3 25.5304 3.21071 26.0391 3.58579 26.4142C3.96086 26.7893 4.46957 27 5 27H24.1112C24.612 26.9993 25.092 26.8001 25.4461 26.4461C25.8001 26.092 25.9993 25.612 26 25.1112V23H28.1112C28.612 22.9993 29.092 22.8001 29.4461 22.4461C29.8001 22.092 29.9993 21.612 30 21.1112V10C30 9.46957 29.7893 8.96086 29.4142 8.58579C29.0391 8.21071 28.5304 8 28 8ZM28 21H26V14C26 13.4696 25.7893 12.9609 25.4142 12.5858C25.0391 12.2107 24.5304 12 24 12H15.3337L11.8663 9.4C11.5196 9.14132 11.0988 9.00107 10.6663 9H9V7H14.6663L18.1338 9.6C18.4804 9.85868 18.9012 9.99893 19.3337 10H28V21Z" fill="currrentColor"/>
+      </svg>
+    );
+  }
+  if (type === "duotone") {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+        <path opacity="0.2" d="M29 10V21.1112C29 21.347 28.9064 21.573 28.7397 21.7397C28.573 21.9064 28.347 22 28.1112 22H25V14C25 13.7348 24.8946 13.4804 24.7071 13.2929C24.5196 13.1054 24.2652 13 24 13H15.3337C15.1174 13 14.9068 12.9298 14.7338 12.8L11.2662 10.2C11.0932 10.0702 10.8826 10 10.6663 10H8V7C8 6.73478 8.10536 6.48043 8.29289 6.29289C8.48043 6.10536 8.73478 6 9 6H14.6663C14.8826 6 15.0932 6.07018 15.2662 6.2L18.7337 8.8C18.9068 8.92982 19.1174 9 19.3337 9H28C28.2652 9 28.5196 9.10536 28.7071 9.29289C28.8946 9.48043 29 9.73478 29 10Z" fill="currrentColor"/>
+        <path d="M28 8H19.3337L15.8663 5.4C15.5196 5.14132 15.0988 5.00107 14.6663 5H9C8.46957 5 7.96086 5.21071 7.58579 5.58579C7.21071 5.96086 7 6.46957 7 7V9H5C4.46957 9 3.96086 9.21071 3.58579 9.58579C3.21071 9.96086 3 10.4696 3 11V25C3 25.5304 3.21071 26.0391 3.58579 26.4142C3.96086 26.7893 4.46957 27 5 27H24.1112C24.612 26.9993 25.092 26.8001 25.4461 26.4461C25.8001 26.092 25.9993 25.612 26 25.1112V23H28.1112C28.612 22.9993 29.092 22.8001 29.4461 22.4461C29.8001 22.092 29.9993 21.612 30 21.1112V10C30 9.46957 29.7893 8.96086 29.4142 8.58579C29.0391 8.21071 28.5304 8 28 8ZM24 25H5V11H10.6663L14.1337 13.6C14.4804 13.8587 14.9012 13.9989 15.3337 14H24V25ZM28 21H26V14C26 13.4696 25.7893 12.9609 25.4142 12.5858C25.0391 12.2107 24.5304 12 24 12H15.3337L11.8663 9.4C11.5196 9.14132 11.0988 9.00107 10.6663 9H9V7H14.6663L18.1338 9.6C18.4804 9.85868 18.9012 9.99893 19.3337 10H28V21Z" fill="currrentColor"/>
+      </svg>
+    );
+  }
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+      <path d="M28 8.25H19.3337C19.2797 8.25 19.227 8.23246 19.1838 8.2L15.7163 5.6C15.4133 5.37281 15.0449 5.25 14.6663 5.25H9C8.53587 5.25 8.09075 5.43437 7.76256 5.76256C7.43437 6.09075 7.25 6.53587 7.25 7V9.25H5C4.53587 9.25 4.09075 9.43437 3.76256 9.76256C3.43437 10.0908 3.25 10.5359 3.25 11V25C3.25 25.4641 3.43437 25.9092 3.76256 26.2374C4.09075 26.5656 4.53587 26.75 5 26.75H24.1112C24.5458 26.7497 24.9624 26.5769 25.2697 26.2697C25.5769 25.9624 25.7497 25.5458 25.75 25.1112V22.75H28.1112C28.5458 22.7497 28.9624 22.5769 29.2697 22.2697C29.5769 21.9624 29.7497 21.5458 29.75 21.1112V10C29.75 9.53587 29.5656 9.09075 29.2374 8.76256C28.9092 8.43437 28.4641 8.25 28 8.25ZM24.25 25.1112C24.25 25.148 24.2354 25.1833 24.2094 25.2094C24.1833 25.2354 24.148 25.25 24.1112 25.25H5C4.9337 25.25 4.87011 25.2237 4.82322 25.1768C4.77634 25.1299 4.75 25.0663 4.75 25V11C4.75 10.9337 4.77634 10.8701 4.82322 10.8232C4.87011 10.7763 4.9337 10.75 5 10.75H10.6663C10.7203 10.75 10.773 10.7675 10.8162 10.8L14.2837 13.4C14.5867 13.6272 14.9551 13.75 15.3337 13.75H24C24.0663 13.75 24.1299 13.7763 24.1768 13.8232C24.2237 13.8701 24.25 13.9337 24.25 14V25.1112ZM28.25 21.1112C28.25 21.1295 28.2464 21.1475 28.2394 21.1643C28.2325 21.1812 28.2222 21.1965 28.2094 21.2094C28.1965 21.2222 28.1812 21.2325 28.1643 21.2394C28.1475 21.2464 28.1295 21.25 28.1112 21.25H25.75V14C25.75 13.5359 25.5656 13.0908 25.2374 12.7626C24.9092 12.4344 24.4641 12.25 24 12.25H15.3337C15.2797 12.25 15.227 12.2325 15.1838 12.2L11.7163 9.6C11.4133 9.37281 11.0449 9.25 10.6663 9.25H8.75V7C8.75 6.9337 8.77634 6.87011 8.82322 6.82322C8.87011 6.77634 8.9337 6.75 9 6.75H14.6663C14.7203 6.75 14.773 6.76754 14.8162 6.8L18.2838 9.4C18.5867 9.62719 18.9551 9.75 19.3337 9.75H28C28.0663 9.75 28.1299 9.77634 28.1768 9.82322C28.2237 9.87011 28.25 9.9337 28.25 10V21.1112Z" fill="currrentColor"/>
+    </svg>
+  );
+};
+
+export default Folders;

package/src/Components/Icons/index.ts

@@ -84,6 +84,7 @@ export { default as VideoCamera } from './Media/VideoCamera/VideoCamera.tsx';
 export { default as TextAa } from './OfficeAndEditing/TextAa/TextAa.tsx';
 export { default as TextColumns } from './OfficeAndEditing/TextColumns/TextColumns.tsx';
 export { default as Folder } from './OfficeAndEditing/Folder/Folder.tsx';
+export { default as Folders } from './OfficeAndEditing/Folders/Folders.tsx';
 export { default as ListBullets } from './OfficeAndEditing/ListBullets/ListBullets.tsx';
 export { default as List } from './OfficeAndEditing/List/List.tsx';
 export { default as ListDashes } from './OfficeAndEditing/ListDashes/ListDashes.tsx';