@dust-tt/sparkle 0.2.210-rc → 0.2.210

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.210-rc",
+  "version": "0.2.210",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
     "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",

package/src/_index.ts

@@ -252,15 +252,11 @@ import {
   ArrowDown as ArrowDownIcon,
   ArrowDownCircle as ArrowDownCircleIcon,
   ArrowDownOnSquare as ArrowDownOnSquareIcon,
-  ArrowDownS as ArrowDownSIcon,
   ArrowLeft as ArrowLeftIcon,
-ArrowLeftS as ArrowLeftSIcon,
   ArrowPath as ArrowPathIcon,
   ArrowRight as ArrowRightIcon,
-ArrowRightS as ArrowRightSIcon,
   ArrowUp as ArrowUpIcon,
   ArrowUpOnSquare as ArrowUpOnSquareIcon,
-ArrowUpS as ArrowUpSIcon,
   Attachment as AttachmentIcon,
   Backspace as BackspaceIcon,
   Bookmark as BookmarkIcon,
@@ -273,8 +269,6 @@ ArrowUpS as ArrowUpSIcon,
   ChatBubbleThought as ChatBubbleThoughtIcon,
   Check as CheckIcon,
   CheckCircle as CheckCircleIcon,
-ChevronDoubleLeft as ChevronDoubleLeftIcon,
-ChevronDoubleRight as ChevronDoubleRightIcon,
   ChevronDown as ChevronDownIcon,
   ChevronLeft as ChevronLeftIcon,
   ChevronRight as ChevronRightIcon,
@@ -291,7 +285,6 @@ ChevronDoubleRight as ChevronDoubleRightIcon,
   Cog6Tooth as Cog6ToothIcon,
   Command as CommandIcon,
   CommandLine as CommandLineIcon,
-Company as CompanyIcon,
   Cube as CubeIcon,
   Dash as DashIcon,
   Document as DocumentIcon,
@@ -306,7 +299,6 @@ Company as CompanyIcon,
   ExternalLink as ExternalLinkIcon,
   Eye as EyeIcon,
   EyeSlash as EyeSlashIcon,
-Filter as FilterIcon,
   Fire as FireIcon,
   Flag as FlagIcon,
   Folder as FolderIcon,
@@ -317,11 +309,8 @@ Filter as FilterIcon,
   Grab as GrabIcon,
   HandThumbDown as HandThumbDownIcon,
   HandThumbUp as HandThumbUpIcon,
-Heart as HeartIcon,
   HeartAlt as HeartAltIcon,
   Hexagon as HexagonIcon,
-History as HistoryIcon,
-Home as HomeIcon,
   Image as ImageIcon,
   InformationCircle as InformationCircleIcon,
   Key as KeyIcon,
@@ -336,7 +325,6 @@ Home as HomeIcon,
   Logout as LogoutIcon,
   Magic as MagicIcon,
   MagnifyingGlass as MagnifyingGlassIcon,
-MarkPen as MarkPenIcon,
   Menu as MenuIcon,
   More as MoreIcon,
   MovingMail as MovingMailIcon,
@@ -369,7 +357,6 @@ MarkPen as MarkPenIcon,
   Template as TemplateIcon,
   TestTube as TestTubeIcon,
   Time as TimeIcon,
-Translate as TranslateIcon,
   Trash as TrashIcon,
   Triangle as TriangleIcon,
   User as UserIcon,
@@ -385,15 +372,11 @@ export {
   ArrowDownCircleIcon,
   ArrowDownIcon,
   ArrowDownOnSquareIcon,
-  ArrowDownSIcon,
   ArrowLeftIcon,
-ArrowLeftSIcon,
   ArrowPathIcon,
   ArrowRightIcon,
-ArrowRightSIcon,
   ArrowUpIcon,
   ArrowUpOnSquareIcon,
-ArrowUpSIcon,
   AttachmentIcon,
   BackspaceIcon,
   BookmarkIcon,
@@ -406,8 +389,6 @@ ArrowUpSIcon,
   ChatBubbleThoughtIcon,
   CheckCircleIcon,
   CheckIcon,
-ChevronDoubleLeftIcon,
-ChevronDoubleRightIcon,
   ChevronDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
@@ -424,7 +405,6 @@ ChevronDoubleRightIcon,
   Cog6ToothIcon,
   CommandIcon,
   CommandLineIcon,
-CompanyIcon,
   CubeIcon,
   DashIcon,
   DocumentDuplicateIcon,
@@ -439,7 +419,6 @@ CompanyIcon,
   ExternalLinkIcon,
   EyeIcon,
   EyeSlashIcon,
-FilterIcon,
   FireIcon,
   FlagIcon,
   FolderIcon,
@@ -451,10 +430,7 @@ FilterIcon,
   HandThumbDownIcon,
   HandThumbUpIcon,
   HeartAltIcon,
-HeartIcon,
   HexagonIcon,
-HistoryIcon,
-HomeIcon,
   ImageIcon,
   InformationCircleIcon,
   KeyIcon,
@@ -469,7 +445,6 @@ HomeIcon,
   LogoutIcon,
   MagicIcon,
   MagnifyingGlassIcon,
-MarkPenIcon,
   MenuIcon,
   MoreIcon,
   MovingMailIcon,
@@ -502,7 +477,6 @@ MarkPenIcon,
   TemplateIcon,
   TestTubeIcon,
   TimeIcon,
-TranslateIcon,
   TrashIcon,
   TriangleIcon,
   UserArrowIcon,
@@ -518,15 +492,11 @@ import {
   ArrowDown as ArrowDownStrokeIcon,
   ArrowDownCircle as ArrowDownCircleStrokeIcon,
   ArrowDownOnSquare as ArrowDownOnSquareStrokeIcon,
-  ArrowDownS as ArrowDownSStrokeIcon,
   ArrowLeft as ArrowLeftStrokeIcon,
-ArrowLeftS as ArrowLeftSStrokeIcon,
   ArrowPath as ArrowPathStrokeIcon,
   ArrowRight as ArrowRightStrokeIcon,
-ArrowRightS as ArrowRightSStrokeIcon,
   ArrowUp as ArrowUpStrokeIcon,
   ArrowUpOnSquare as ArrowUpOnSquareStrokeIcon,
-ArrowUpS as ArrowUpSStrokeIcon,
   Attachment as AttachmentStrokeIcon,
   Backspace as BackspaceStrokeIcon,
   Bookmark as BookmarkStrokeIcon,
@@ -539,8 +509,6 @@ ArrowUpS as ArrowUpSStrokeIcon,
   ChatBubbleThought as ChatBubbleThoughtStrokeIcon,
   Check as CheckStrokeIcon,
   CheckCircle as CheckCircleStrokeIcon,
-ChevronDoubleLeft as ChevronDoubleLeftStrokeIcon,
-ChevronDoubleRight as ChevronDoubleRightStrokeIcon,
   ChevronDown as ChevronDownStrokeIcon,
   ChevronLeft as ChevronLeftStrokeIcon,
   ChevronRight as ChevronRightStrokeIcon,
@@ -557,7 +525,6 @@ ChevronDoubleRight as ChevronDoubleRightStrokeIcon,
   Cog6Tooth as Cog6ToothStrokeIcon,
   Command as CommandStrokeIcon,
   CommandLine as CommandLineStrokeIcon,
-Company as CompanyStrokeIcon,
   Cube as CubeStrokeIcon,
   Dash as DashStrokeIcon,
   Document as DocumentStrokeIcon,
@@ -572,7 +539,6 @@ Company as CompanyStrokeIcon,
   ExternalLink as ExternalLinkStrokeIcon,
   Eye as EyeStrokeIcon,
   EyeSlash as EyeSlashStrokeIcon,
-Filter as FilterStrokeIcon,
   Fire as FireStrokeIcon,
   Flag as FlagStrokeIcon,
   Folder as FolderStrokeIcon,
@@ -583,11 +549,8 @@ Filter as FilterStrokeIcon,
   Grab as GrabStrokeIcon,
   HandThumbDown as HandThumbDownStrokeIcon,
   HandThumbUp as HandThumbUpStrokeIcon,
-Heart as HeartStrokeIcon,
   HeartAlt as HeartAltStrokeIcon,
   Hexagon as HexagonStrokeIcon,
-History as HistoryStrokeIcon,
-Home as HomeStrokeIcon,
   Image as ImageStrokeIcon,
   InformationCircle as InformationCircleStrokeIcon,
   Key as KeyStrokeIcon,
@@ -602,7 +565,6 @@ Home as HomeStrokeIcon,
   Logout as LogoutStrokeIcon,
   Magic as MagicStrokeIcon,
   MagnifyingGlass as MagnifyingGlassStrokeIcon,
-MarkPen as MarkPenStrokeIcon,
   Menu as MenuStrokeIcon,
   More as MoreStrokeIcon,
   MovingMail as MovingMailStrokeIcon,
@@ -635,7 +597,6 @@ MarkPen as MarkPenStrokeIcon,
   Template as TemplateStrokeIcon,
   TestTube as TestTubeStrokeIcon,
   Time as TimeStrokeIcon,
-Translate as TranslateStrokeIcon,
   Trash as TrashStrokeIcon,
   Triangle as TriangleStrokeIcon,
   User as UserStrokeIcon,
@@ -650,15 +611,11 @@ Translate as TranslateStrokeIcon,
 export {
   ArrowDownCircleStrokeIcon,
   ArrowDownOnSquareStrokeIcon,
-  ArrowDownSStrokeIcon,
   ArrowDownStrokeIcon,
-ArrowLeftSStrokeIcon,
   ArrowLeftStrokeIcon,
   ArrowPathStrokeIcon,
-ArrowRightSStrokeIcon,
   ArrowRightStrokeIcon,
   ArrowUpOnSquareStrokeIcon,
-ArrowUpSStrokeIcon,
   ArrowUpStrokeIcon,
   AttachmentStrokeIcon,
   BackspaceStrokeIcon,
@@ -672,8 +629,6 @@ ArrowUpSStrokeIcon,
   ChatBubbleThoughtStrokeIcon,
   CheckCircleStrokeIcon,
   CheckStrokeIcon,
-ChevronDoubleLeftStrokeIcon,
-ChevronDoubleRightStrokeIcon,
   ChevronDownStrokeIcon,
   ChevronLeftStrokeIcon,
   ChevronRightStrokeIcon,
@@ -690,7 +645,6 @@ ChevronDoubleRightStrokeIcon,
   Cog6ToothStrokeIcon,
   CommandLineStrokeIcon,
   CommandStrokeIcon,
-CompanyStrokeIcon,
   CubeStrokeIcon,
   DashStrokeIcon,
   DocumentDuplicateStrokeIcon,
@@ -705,7 +659,6 @@ CompanyStrokeIcon,
   ExternalLinkStrokeIcon,
   EyeSlashStrokeIcon,
   EyeStrokeIcon,
-FilterStrokeIcon,
   FireStrokeIcon,
   FlagStrokeIcon,
   FolderOpenStrokeIcon,
@@ -717,10 +670,7 @@ FilterStrokeIcon,
   HandThumbDownStrokeIcon,
   HandThumbUpStrokeIcon,
   HeartAltStrokeIcon,
-HeartStrokeIcon,
   HexagonStrokeIcon,
-HistoryStrokeIcon,
-HomeStrokeIcon,
   ImageStrokeIcon,
   InformationCircleStrokeIcon,
   KeyStrokeIcon,
@@ -735,7 +685,6 @@ HomeStrokeIcon,
   LogoutStrokeIcon,
   MagicStrokeIcon,
   MagnifyingGlassStrokeIcon,
-MarkPenStrokeIcon,
   MenuStrokeIcon,
   MoreStrokeIcon,
   MovingMailStrokeIcon,
@@ -768,7 +717,6 @@ MarkPenStrokeIcon,
   TemplateStrokeIcon,
   TestTubeStrokeIcon,
   TimeStrokeIcon,
-TranslateStrokeIcon,
   TrashStrokeIcon,
   TriangleStrokeIcon,
   UserArrowStrokeIcon,

package/src/components/Checkbox.tsx

@@ -7,42 +7,23 @@ import { Icon } from "./Icon";
 
 export interface CheckboxProps {
   variant?: "selectable" | "checkable";
-  size?: "xs" | "sm";
-  checked?: true | false | "partial";
+  checked: boolean;
   disabled?: boolean;
+  partialChecked?: boolean;
   onChange: (checked: boolean) => void;
   className?: string;
 }
 
 export function Checkbox({
   variant = "selectable",
-  checked = false,
-  size = "sm",
+  checked,
   onChange,
   className = "",
   disabled,
+  partialChecked,
 }: CheckboxProps) {
-  let isChecked: boolean;
-  let isPartialChecked: boolean;
-  switch (checked) {
-    case true:
-      isChecked = true;
-      isPartialChecked = false;
-      break;
-    case false:
-      isChecked = false;
-      isPartialChecked = false;
-      break;
-    case "partial":
-      isChecked = true;
-      isPartialChecked = true;
-      break;
-    default:
-      throw new Error("Invalid checked prop");
-  }
-
   const baseStyleClasses = {
-    base: "s-border s-justify-center s-flex s-items-center s-transition-colors s-duration-300 s-ease-out",
+    base: "s-border s-justify-center s-w-5 s-h-5 s-rounded-md s-flex s-items-center s-transition-colors s-duration-300 s-ease-out",
     idle: "s-bg-structure-50 s-border-element-600 s-cursor-pointer",
     hover:
       "hover:s-border-action-500 hover:s-bg-action-200 hover:s-text-white/100",
@@ -56,11 +37,6 @@ export function Checkbox({
     },
   };
 
-  const baseSizeClasses = {
-    xs: "s-w-4 s-h-4 s-rounded",
-    sm: "s-w-5 s-h-5 s-rounded-md",
-  };
-
   const checkedIndicatorClasses = {
     base: "s-transition s-duration-300 s-ease-in-out",
     selected: "s-opacity-100 s-bg-action-500 dark:s-bg-action-500-dark",
@@ -69,15 +45,9 @@ export function Checkbox({
     disabled: "s-opacity-100 s-bg-element-500 dark:s-bg-element-500-dark",
   };
 
-  const sizeStyles = {
-    xs: { width: "12px", height: "12px", borderRadius: "2px" },
-    sm: { width: "14px", height: "14px", borderRadius: "3px" },
-  };
-
   const combinedBaseClasses = classNames(
     baseStyleClasses.base,
-    baseSizeClasses[size],
-    isChecked || isPartialChecked ? "s-text-white" : "s-text-white/0",
+    checked || partialChecked ? "s-text-white" : "s-text-white/0",
     disabled ? baseStyleClasses.disabled : baseStyleClasses.idle,
     !disabled ? baseStyleClasses.hover : "",
     disabled ? baseStyleClasses.dark.disabled : baseStyleClasses.dark.base,
@@ -88,18 +58,18 @@ export function Checkbox({
   const combinedCheckedIndicatorClasses = classNames(
     checkedIndicatorClasses.base,
     disabled ? checkedIndicatorClasses.disabled : "",
-    isChecked && !isPartialChecked && !disabled
+    checked && !partialChecked && !disabled
       ? checkedIndicatorClasses.selected
       : "",
-    isPartialChecked && !disabled ? checkedIndicatorClasses.partialChecked : "",
-    !isChecked && !disabled ? checkedIndicatorClasses.unselected : ""
+    partialChecked && !disabled ? checkedIndicatorClasses.partialChecked : "",
+    !checked && !disabled ? checkedIndicatorClasses.unselected : ""
   );
 
   return (
     <label>
       <input
         type="checkbox"
-        checked={isChecked}
+        checked={checked}
         onChange={(e) => onChange && onChange(e.target.checked)}
         className="s-hidden"
         disabled={disabled}
@@ -107,11 +77,11 @@ export function Checkbox({
       <div className={classNames(combinedBaseClasses, "s-relative")}>
         <div
           className={combinedCheckedIndicatorClasses}
-          style={sizeStyles[size]}
+          style={{ width: "14px", height: "14px", borderRadius: "3px" }}
         />
         {variant === "checkable" && (
           <div className="s-absolute">
-            <Icon visual={isPartialChecked ? Dash : Check} size="xs" />
+            <Icon visual={partialChecked ? Dash : Check} size="xs" />
           </div>
         )}
       </div>

package/src/components/DataTable.tsx

@@ -27,9 +27,9 @@ interface ColumnBreakpoint {
   [columnId: string]: "xs" | "sm" | "md" | "lg" | "xl";
 }
 
-interface DataTableProps<TData extends TBaseData, TValue> {
+interface DataTableProps<TData extends TBaseData> {
   data: TData[];
-  columns: ColumnDef<TData, TValue>[];
+  columns: ColumnDef<TData, any>[]; // eslint-disable-line @typescript-eslint/no-explicit-any
   className?: string;
   filter?: string;
   filterColumn?: string;
@@ -47,7 +47,7 @@ function shouldRenderColumn(
   return windowWidth >= breakpoints[breakpoint];
 }
 
-export function DataTable<TData extends TBaseData, TValue>({
+export function DataTable<TData extends TBaseData>({
   data,
   columns,
   className,
@@ -55,7 +55,7 @@ export function DataTable<TData extends TBaseData, TValue>({
   filterColumn,
   initialColumnOrder,
   columnsBreakpoints = {},
-}: DataTableProps<TData, TValue>) {
+}: DataTableProps<TData>) {
   const windowSize = useWindowSize();
   const [sorting, setSorting] = useState<SortingState>(
     initialColumnOrder ?? []

package/src/components/Tree.tsx

@@ -1,6 +1,12 @@
-import React, { ComponentType, ReactNode, useState } from "react";
-
-import { ArrowDownSIcon, ArrowRightSIcon, Spinner } from "@sparkle/index";
+import React, { useState } from "react";
+
+import {
+  ChatBubbleBottomCenterText,
+  DocumentText,
+  Folder,
+  Square3Stack3D,
+} from "@sparkle/icons/stroke";
+import { ChevronDownIcon, ChevronRightIcon, Spinner } from "@sparkle/index";
 import { classNames } from "@sparkle/lib/utils";
 
 import { Checkbox, CheckboxProps } from "./Checkbox";
@@ -8,25 +14,12 @@ import { Icon } from "./Icon";
 import { IconButton } from "./IconButton";
 
 export interface TreeProps {
-  children?: ReactNode;
+  children?: React.ReactNode;
   isBoxed?: boolean;
   isLoading?: boolean;
-  variant?: "navigator" | "finder";
 }
 
-export function Tree({
-  children,
-  isLoading,
-  isBoxed = false,
-  variant = "finder",
-}: TreeProps) {
-  const modifiedChildren = React.Children.map(children, (child) => {
-    if (React.isValidElement<TreeItemProps>(child) && variant === "navigator") {
-      return React.cloneElement(child, { isNavigatable: true });
-    }
-    return child;
-  });
-
+export function Tree({ children, isLoading, isBoxed = false }: TreeProps) {
   return isLoading ? (
     <div className="s-py-2 s-pl-4">
       <Spinner size="xs" variant="dark" />
@@ -40,16 +33,24 @@ export function Tree({
           : ""
       )}
     >
-      {modifiedChildren}
+      {children}
     </div>
   );
 }
 
+const visualTable = {
+  file: DocumentText,
+  folder: Folder,
+  database: Square3Stack3D,
+  channel: ChatBubbleBottomCenterText,
+};
+
 interface TreeItemProps {
   label?: string;
   type?: "node" | "item" | "leaf";
+  variant?: "file" | "folder" | "database" | "channel";
   size?: "sm" | "md";
-  visual?: ComponentType<{ className?: string }>;
+  visual?: React.ReactNode;
   checkbox?: CheckboxProps;
   onChevronClick?: () => void;
   collapsed?: boolean;
@@ -57,7 +58,6 @@ interface TreeItemProps {
   className?: string;
   actions?: React.ReactNode;
   areActionsFading?: boolean;
-  isNavigatable?: boolean;
   isSelected?: boolean;
   onItemClick?: () => void;
 }
@@ -76,6 +76,7 @@ Tree.Item = function ({
   label,
   type = "node",
   className = "",
+  variant = "file",
   size = "sm",
   visual,
   checkbox,
@@ -86,7 +87,6 @@ Tree.Item = function ({
   areActionsFading = true,
   renderTreeItems,
   children,
-  isNavigatable = false,
   isSelected = false,
   onItemClick,
 }: TreeItemPropsWithChildren | TreeItemPropsWithRender) {
@@ -111,34 +111,16 @@ Tree.Item = function ({
 
   const childrenToRender = getChildren();
 
-  const treeItemStyleClasses = {
-    base: "s-group s-flex s-cursor-default s-flex-row s-items-center",
-    isNavigatableBase:
-      "s-border s-transition-colors s-duration-300 s-ease-out s-cursor-pointer",
-    isNavigatableUnselected:
-      "s-border-structure-200/0 s-bg-white/0 hover:s-border-structure-200 hover:s-bg-white",
-    isNavigatableSelected: "s-border-structure-200 s-bg-white",
-  };
-
   return (
     <>
       <div
         className={classNames(
           className ? className : "",
-          treeItemStyleClasses.base,
+          "s-group s-flex s-cursor-default s-flex-row s-items-center s-gap-4",
+          size === "sm" ? "s-py-1" : "s-py-2",
           onItemClick ? "s-cursor-pointer" : "",
-          isNavigatable ? treeItemStyleClasses.isNavigatableBase : "",
-          isNavigatable
-            ? size === "sm"
-              ? "s-gap-1 s-rounded-lg s-py-1 s-pl-1.5 s-pr-3"
-              : "s-gap-2 s-rounded-lg s-py-2 s-pl-2.5 s-pr-4"
-            : size === "sm"
-              ? "s-gap-1 s-py-1"
-              : "s-gap-2 s-py-2",
-          isNavigatable
-            ? isSelected
-              ? treeItemStyleClasses.isNavigatableSelected
-              : treeItemStyleClasses.isNavigatableUnselected
+          isSelected
+            ? "s-rounded-md s-border s-border-neutral-200 s-bg-white"
             : ""
         )}
         onClick={onItemClick ? onItemClick : undefined}
@@ -147,10 +129,10 @@ Tree.Item = function ({
           <IconButton
             icon={
               childrenToRender && !effectiveCollapsed
-                ? ArrowDownSIcon
-                : ArrowRightSIcon
+                ? ChevronDownIcon
+                : ChevronRightIcon
             }
-            size="xs"
+            size="sm"
             variant="secondary"
             onClick={(e) => {
               e.stopPropagation();
@@ -161,37 +143,50 @@ Tree.Item = function ({
           />
         )}
         {type === "leaf" && <div className="s-w-5"></div>}
-        {checkbox && <Checkbox {...checkbox} size="xs" />}
-        <Icon
-          visual={visual}
-          size={size === "sm" ? "sm" : "md"}
-          className="s-flex-shrink-0 s-text-element-600"
-        />
-
-        <div
-          className={classNames(
-            "s-truncate s-font-medium s-text-element-900",
-            size === "sm" ? "s-ml-1 s-text-sm" : "s-ml-1 s-text-base"
-          )}
-        >
-          {label}
-        </div>
-        <div className="s-grow" />
-        {actions && (
+        {checkbox && <Checkbox {...checkbox} />}
+
+        <div className="s-flex s-w-full s-items-center">
           <div
             className={classNames(
-              "s-flex s-gap-2 s-pl-4",
-              areActionsFading
-                ? "s-transform s-opacity-0 s-duration-300 group-hover:s-opacity-100"
-                : ""
+              "s-grid s-w-full s-grid-cols-[auto,1fr,auto] s-items-center",
+              size === "sm" ? "s-gap-1.5" : "s-gap-2"
             )}
           >
-            {actions}
+            {visual ? (
+              visual
+            ) : (
+              <Icon
+                visual={visualTable[variant]}
+                size="sm"
+                className="s-flex-shrink-0 s-text-element-700"
+              />
+            )}
+
+            <div
+              className={classNames(
+                "s-truncate s-font-medium s-text-element-900",
+                size === "sm" ? "s-text-sm" : "s-text-base"
+              )}
+            >
+              {label}
+            </div>
+            {actions && (
+              <div
+                className={classNames(
+                  "s-inline-block s-pl-5",
+                  areActionsFading
+                    ? "s-transform s-opacity-0 s-duration-300 group-hover:s-opacity-100"
+                    : ""
+                )}
+              >
+                {actions}
+              </div>
+            )}
           </div>
-        )}
+        </div>
       </div>
       {React.Children.count(childrenToRender) > 0 && (
-        <div className="s-pl-2.5">{childrenToRender}</div>
+        <div className="s-pl-5">{childrenToRender}</div>
       )}
     </>
   );