@dust-tt/sparkle 0.5.11 → 0.5.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.5.11",
+  "version": "0.5.13",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",
@@ -48,6 +48,7 @@
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
     "@chromatic-com/storybook": "^3.2.5",
+    "@radix-ui/react-focus-scope": "^1.0.3",
     "@storybook/addon-essentials": "^8.6.4",
     "@storybook/addon-interactions": "^8.6.4",
     "@storybook/addon-links": "^8.6.4",
@@ -68,14 +69,12 @@
     "@types/uuid": "^9.0.6",
     "@typescript-eslint/eslint-plugin": "^8.48.0",
     "@typescript-eslint/parser": "^8.48.0",
-    "@typescript/native-preview": "^7.0.0-dev.20251201.1",
-    "@tanstack/react-virtual": "^3.5.0",
-    "@radix-ui/react-focus-scope": "^1.0.3",
-    "autoprefixer": "^10.4.14",
+    "@typescript/native-preview": "^7.0.0-dev.20260105.1",
+    "autoprefixer": "^10.4.23",
     "babel-loader": "^9.1.3",
     "babel-preset-react-app": "^10.0.1",
     "copyfiles": "^2.4.1",
-    "esbuild": "^0.25.0",
+    "esbuild": "^0.25.12",
     "esbuild-plugin-postcss2": "^0.1.2",
     "eslint": "^9.18.0",
     "eslint-config-prettier": "^9.1.0",
@@ -89,10 +88,10 @@
     "react-dom": "^18.3.1",
     "sass-loader": "^13.3.2",
     "storybook": "^8.6.4",
-    "tailwindcss": "^3.2.4",
+    "tailwindcss": "^3.4.19",
     "tailwindcss-animate": "^1.0.7",
     "tsc-alias": "^1.8.10",
-    "typescript": "^5.4.5",
+    "typescript": "^5.9.3",
     "typescript-eslint": "^8.48.0",
     "typescript-transform-paths": "^3.4.7",
     "uuid": "^9.0.1"
@@ -130,6 +129,7 @@
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.3",
     "@tanstack/react-table": "^8.13.0",
+    "@tanstack/react-virtual": "^3.5.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "emoji-mart": "^5.5.2",

package/src/components/AnimatedText.tsx

@@ -14,6 +14,7 @@ const ANIMATED_TEXT_VARIANTS = [
   "blue",
   "rose",
   "golden",
+  "white",
 ] as const;
 
 type AnimatedTextVariantType = (typeof ANIMATED_TEXT_VARIANTS)[number];
@@ -59,6 +60,10 @@ const animatedVariants: Record<AnimatedTextVariantType, string> = {
     "s-from-golden-800 s-via-golden-950 s-via-50% s-to-golden-800",
     "dark:s-from-golden-800-night dark:s-via-golden-950-night dark:s-via-50% dark:s-to-golden-800-night"
   ),
+  white: cn(
+    "s-from-primary-800 s-via-primary-950 s-via-50% s-to-primary-800",
+    "dark:s-from-primary-800-night dark:s-via-primary-950-night dark:s-via-50% dark:s-to-primary-800-night"
+  ),
 };
 
 const animVariants = cva(
@@ -84,6 +89,7 @@ const animatedTextVariants: Record<AnimatedTextVariantType, string> = {
   blue: "s-text-sky-800 dark:s-text-sky-800-night",
   rose: "s-text-rose-800 dark:s-text-rose-800-night",
   golden: "s-text-golden-800 dark:s-text-rose-golden-night",
+  white: "s-text-primary-800 dark:s-text-primary-800-night",
 };
 
 const textVariants = cva("s-absolute s-inset-0", {

package/src/components/Avatar.tsx

@@ -7,6 +7,7 @@ import { getEmojiAndBackgroundFromUrl } from "@sparkle/lib/avatar/utils";
 import { cn } from "@sparkle/lib/utils";
 
 export const AVATAR_SIZES = [
+  "xxs",
   "xs",
   "sm",
   "md",
@@ -25,6 +26,7 @@ const avatarVariants = cva(
   {
     variants: {
       size: {
+        xxs: "s-h-5 s-w-5",
         xs: "s-h-6 s-w-6",
         sm: "s-h-8 s-w-8",
         md: "s-h-10 s-w-10",
@@ -45,6 +47,11 @@ const avatarVariants = cva(
       },
     },
     compoundVariants: [
+      {
+        rounded: false,
+        size: "xxs",
+        className: "s-rounded",
+      },
       {
         rounded: false,
         size: "xs",
@@ -92,6 +99,7 @@ const avatarVariants = cva(
 const textVariants = cva("s-select-none s-font-semibold", {
   variants: {
     size: {
+      xxs: "s-text-[10px]",
       xs: "s-text-xs",
       sm: "s-text-sm",
       md: "s-text-base",
@@ -254,7 +262,6 @@ interface AvatarStackProps {
   avatars: AvatarProps[];
   nbVisibleItems?: number;
   size?: AvatarStackSizeType;
-  isRounded?: boolean;
   hasMagnifier?: boolean;
   tooltipTriggerAsChild?: boolean;
   orientation?: "horizontal" | "vertical";
@@ -270,7 +277,6 @@ Avatar.Stack = function ({
   avatars,
   nbVisibleItems,
   size = "sm",
-  isRounded = false,
   hasMagnifier = true,
   tooltipTriggerAsChild = false,
   orientation = "horizontal",
@@ -376,14 +382,10 @@ Avatar.Stack = function ({
                       })`,
                     }}
                   >
-                    <Avatar
-                      {...avatarProps}
-                      size={size}
-                      isRounded={isRounded}
-                    />
+                    <Avatar {...avatarProps} size={size} />
                   </div>
                 ) : (
-                  <Avatar {...avatarProps} size={size} isRounded={isRounded} />
+                  <Avatar {...avatarProps} size={size} />
                 )}
               </div>
             ))}
@@ -407,7 +409,6 @@ Avatar.Stack = function ({
                     "+" +
                     String(Number(remainingCount) < 10 ? remainingCount : "")
                   }
-                  isRounded={isRounded}
                   clickable
                 />
               </div>

package/src/components/Card.tsx

@@ -14,7 +14,7 @@ import { cn } from "@sparkle/lib/utils";
 export const CARD_VARIANTS = ["primary", "secondary", "tertiary"] as const;
 export type CardVariantType = (typeof CARD_VARIANTS)[number];
 
-export const CARD_SIZES = ["sm", "md", "lg"] as const;
+export const CARD_SIZES = ["xs", "sm", "md", "lg"] as const;
 export type CardSizeType = (typeof CARD_SIZES)[number];
 
 const interactiveClasses = cn(
@@ -56,6 +56,7 @@ const cardVariants = cva(
         ),
       },
       size: {
+        xs: "s-px-2 s-py-1.5 s-rounded-lg",
         sm: "s-p-3 s-rounded-xl",
         md: "s-p-4 s-rounded-2xl",
         lg: "s-p-5 s-rounded-3xl",

package/src/components/Chip.tsx

@@ -25,6 +25,7 @@ export const CHIP_COLORS = [
   "blue",
   "rose",
   "golden",
+  "white",
 ] as const;
 
 type ChipColorType = (typeof CHIP_COLORS)[number];
@@ -91,6 +92,12 @@ const chipVariants = cva("s-inline-flex s-box-border s-items-center", {
         "dark:s-bg-golden-100-night dark:s-border-golden-200-night",
         "dark:s-text-golden-900-night"
       ),
+      white: cn(
+        "s-border s-bg-white s-border-border",
+        "s-text-primary-900",
+        "dark:s-bg-background-night dark:s-border-border-night",
+        "dark:s-text-primary-900-night"
+      ),
     },
   },
   defaultVariants: {
@@ -136,8 +143,40 @@ const closeIconVariants: Record<ChipColorType, string> = {
     "s-text-golden-900 hover:s-text-golden-700 active:s-text-golden-950",
     "dark:s-text-golden-900-night dark:hover:s-text-golden-700-night dark:active:s-text-golden-950-night"
   ),
+  white: cn(
+    "s-text-primary-700 hover:s-text-primary-500 active:s-text-primary-950",
+    "dark:s-text-primary-700-night dark:hover:s-text-primary-500-night dark:active:s-text-primary-950-night"
+  ),
 };
 
+interface ChipInternalButtonProps {
+  icon: ComponentType;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  className?: string;
+  size?: "xs" | "sm";
+  "aria-label"?: string;
+}
+
+const ChipButton = React.forwardRef<HTMLButtonElement, ChipInternalButtonProps>(
+  ({ icon, onClick, className, size = "xs", "aria-label": ariaLabel }, ref) => (
+    <button
+      ref={ref}
+      type="button"
+      onClick={onClick}
+      aria-label={ariaLabel}
+      className={cn(
+        "s-rounded-md s-p-0.5",
+        "s-transition-colors s-duration-200",
+        "focus-visible:s-outline-none focus-visible:s-ring-2 focus-visible:s-ring-ring",
+        className
+      )}
+    >
+      <Icon visual={icon} size={size} />
+    </button>
+  )
+);
+ChipButton.displayName = "ChipButton";
+
 type ChipBaseProps = {
   size?: ChipSizeType;
   color?: ChipColorType;
@@ -225,21 +264,16 @@ const Chip = React.forwardRef<HTMLDivElement, ChipProps>(
           </span>
         )}
         {onRemove && (
-          <button
+          <ChipButton
+            icon={XMarkIcon}
+            size={size === "mini" ? "xs" : "sm"}
+            className={cn("-s-mr-1", closeIconVariants[color || "primary"])}
+            aria-label="Remove"
             onClick={(e) => {
               e.stopPropagation();
               onRemove();
             }}
-          >
-            <Icon
-              visual={XMarkIcon}
-              size={size === "mini" ? "xs" : (size as IconProps["size"])}
-              className={cn(
-                "s-transition-color -s-mr-1 s-duration-200",
-                closeIconVariants[color || "primary"]
-              )}
-            />
-          </button>
+          />
         )}
       </div>
     );

package/src/components/Citation.tsx

@@ -53,7 +53,7 @@ const Citation = React.forwardRef<HTMLDivElement, CitationProps>(
         variant={variant}
         size="sm"
         className={cn(
-          "s-min-w-24 s-relative s-flex s-flex-none s-flex-col s-overflow-hidden",
+          "s-relative s-flex s-min-w-24 s-flex-none s-flex-col s-overflow-hidden",
           // Use min() to maintain aspect ratio in grid mode (8% of width) while capping
           // padding at 3 (0.75rem) for list mode to prevent excessive top padding on wide items.
           "s-pt-[min(8%,theme(spacing.3))]",

package/src/components/Collapsible.tsx

@@ -97,21 +97,25 @@ const CollapsibleTrigger = React.forwardRef<
         )}
         {...props}
       >
-        <span
-          className={cn(
-            "s-transition-transform s-duration-200",
-            chevronVariants({ variant, disabled })
-          )}
-        >
-          <Icon
-            visual={isOpen ? ChevronDownIcon : ChevronRightIcon}
-            size="sm"
-          />
-        </span>
         {children ? (
           children
         ) : (
-          <span className={labelVariants({ variant, disabled })}>{label}</span>
+          <>
+            <span
+              className={cn(
+                "s-transition-transform s-duration-200",
+                chevronVariants({ variant, disabled })
+              )}
+            >
+              <Icon
+                visual={isOpen ? ChevronDownIcon : ChevronRightIcon}
+                size="sm"
+              />
+            </span>
+            <span className={labelVariants({ variant, disabled })}>
+              {label}
+            </span>
+          </>
         )}
       </CollapsiblePrimitive.Trigger>
     );
@@ -148,7 +152,7 @@ const CollapsibleContent = React.forwardRef<
     )}
     {...props}
   >
-    <div className="s-py-2">{children}</div>
+    {children}
   </CollapsiblePrimitive.Content>
 ));
 CollapsibleContent.displayName = "CollapsibleContent";

package/src/components/DataTable.tsx

@@ -900,7 +900,7 @@ const renderSubmenuItem = (
     <DropdownMenuPortal>
       <DropdownMenuSubContent>
         <ScrollArea
-          className="s-min-w-24 s-flex s-max-h-72 s-flex-col"
+          className="s-flex s-max-h-72 s-min-w-24 s-flex-col"
           hideScrollBar
         >
           {item.items.map((subItem) => (
@@ -1096,7 +1096,6 @@ DataTable.CellContent = function CellContent({
           avatars={avatarStack.items}
           nbVisibleItems={avatarStack.nbVisibleItems}
           size="xs"
-          isRounded={roundedAvatar ?? false}
         />
       )}
       {icon && (

package/src/components/NavigationList.tsx

@@ -1,4 +1,3 @@
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
@@ -14,8 +13,9 @@ import { Button } from "@sparkle/components/Button";
 import {
   Collapsible,
   CollapsibleContent,
+  CollapsibleTrigger,
 } from "@sparkle/components/Collapsible";
-import { ArrowDownSIcon, ArrowRightSIcon, MoreIcon } from "@sparkle/icons/app";
+import { MoreIcon } from "@sparkle/icons/app";
 import { cn } from "@sparkle/lib/utils";
 
 const NavigationListItemStyles = cva(
@@ -75,6 +75,7 @@ interface NavigationListItemProps
   selected?: boolean;
   label?: string;
   icon?: React.ComponentType;
+  avatar?: React.ReactNode;
   moreMenu?: React.ReactNode;
   status?: "idle" | "unread" | "blocked";
 }
@@ -89,6 +90,7 @@ const NavigationListItem = React.forwardRef<
       selected,
       label,
       icon,
+      avatar,
       href,
       target,
       rel,
@@ -162,8 +164,9 @@ const NavigationListItem = React.forwardRef<
               />
             )}
             {icon && <Icon visual={icon} size="sm" />}
+            {avatar}
             {label && (
-              <span className="s-grow s-overflow-hidden s-text-ellipsis s-whitespace-nowrap group-hover/menu-item:s-pr-8 group-data-[selected=true]/menu-item:s-pr-8">
+              <span className="s-grow s-overflow-hidden s-text-ellipsis s-whitespace-nowrap group-hover/menu-item:s-pr-7 group-data-[selected=true]/menu-item:s-pr-7">
                 {label}
               </span>
             )}
@@ -189,13 +192,13 @@ const NavigationListItemAction = React.forwardRef<
       ref={ref}
       data-sidebar="menu-action"
       className={cn(
-        "s-absolute s-right-1.5 s-top-1 s-opacity-0 s-transition-opacity",
+        "s-absolute s-right-2 s-top-1.5 s-opacity-0 s-transition-opacity",
         "s-opacity-0 group-focus-within/menu-item:s-opacity-100 group-hover/menu-item:s-opacity-100 group-data-[selected=true]/menu-item:s-opacity-100",
         className
       )}
       {...props}
     >
-      <Button size="mini" icon={MoreIcon} variant="ghost" />
+      <Button size="xmini" icon={MoreIcon} variant="ghost" />
     </div>
   );
 });
@@ -224,92 +227,34 @@ const labelStyles = cva(
   "s-flex s-items-center s-justify-between s-gap-2 s-pt-4 s-pb-2 s-pr-2 s-heading-xs s-whitespace-nowrap s-overflow-hidden s-text-ellipsis"
 );
 
-interface NavigationListLabelButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  icon?: React.ComponentType;
-  children?: React.ReactNode;
-}
-
-const NavigationListLabelButton = React.forwardRef<
-  HTMLButtonElement,
-  NavigationListLabelButtonProps
->(({ className, icon, children, disabled, ...props }, ref) => {
-  return (
-    <button
-      ref={ref}
-      type="button"
-      disabled={disabled}
-      className={cn(
-        "s-inline-flex s-flex-shrink-0 s-items-center s-justify-center",
-        "s-rounded-md s-transition-colors s-duration-200",
-        "s-text-muted-foreground dark:s-text-muted-foreground-night",
-        "hover:s-text-foreground dark:hover:s-text-foreground-night",
-        "hover:s-bg-primary-150 dark:hover:s-bg-primary-150-night",
-        "active:s-bg-primary-200 dark:active:s-bg-primary-200-night",
-        "focus-visible:s-outline-none focus-visible:s-ring-2 focus-visible:s-ring-ring focus-visible:s-ring-offset-1",
-        "disabled:s-cursor-not-allowed disabled:s-opacity-50",
-        "disabled:hover:s-text-muted-foreground dark:disabled:hover:s-text-muted-foreground-night",
-        "disabled:hover:s-bg-transparent dark:disabled:hover:s-bg-transparent",
-        className
-      )}
-      {...props}
-    >
-      {icon ? <Icon visual={icon} size="xs" /> : children}
-    </button>
-  );
-});
-
-NavigationListLabelButton.displayName = "NavigationListLabelButton";
-
 interface NavigationListLabelProps
   extends
     React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof variantStyles> {
   label: string;
-  isCollapsible?: boolean;
-  isOpen?: boolean;
   action?: React.ReactNode;
 }
 
 const NavigationListLabel = React.forwardRef<
   HTMLDivElement,
   NavigationListLabelProps
->(
-  (
-    {
-      className,
-      variant,
-      label,
-      isSticky,
-      isCollapsible,
-      isOpen,
-      action,
-      ...props
-    },
-    ref
-  ) => (
-    <div
-      ref={ref}
-      className={cn(
-        labelStyles(),
-        variantStyles({ variant, isSticky }),
-        isCollapsible ? "s-pl-1" : "s-pl-3",
-        className
-      )}
-      {...props}
-    >
-      <div className="s-flex s-items-center s-gap-1 s-overflow-hidden s-text-ellipsis">
-        {isCollapsible && (
-          <NavigationListLabelButton
-            icon={isOpen ? ArrowDownSIcon : ArrowRightSIcon}
-            aria-label={isOpen ? "Collapse section" : "Expand section"}
-          />
-        )}
-        <span className="s-overflow-hidden s-text-ellipsis">{label}</span>
-      </div>
-      {action}
+>(({ className, variant, label, isSticky, action, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      labelStyles(),
+      variantStyles({ variant, isSticky }),
+      "s-pl-3",
+      className
+    )}
+    {...props}
+  >
+    <div className="s-flex s-items-center s-gap-1 s-overflow-hidden s-text-ellipsis">
+      <span className="s-overflow-hidden s-text-ellipsis">{label}</span>
     </div>
-  )
-);
+    {action}
+  </div>
+));
 
 NavigationListLabel.displayName = "NavigationListLabel";
 
@@ -322,58 +267,69 @@ interface NavigationListCollapsibleSectionProps extends React.HTMLAttributes<HTM
   children: React.ReactNode;
 }
 
-const NavigationListCollapsibleSection = React.forwardRef<
-  React.ElementRef<typeof Collapsible>,
-  NavigationListCollapsibleSectionProps
->(
-  (
-    {
-      label,
-      action,
-      defaultOpen,
-      open,
-      onOpenChange,
-      children,
-      className,
-      ...props
+const collapseableStyles = cva(
+  cn(
+    "s-py-2 s-mt-2 s-px-2.5",
+    "s-heading-xs s-whitespace-nowrap s-overflow-hidden s-text-ellipsis ",
+    "s-box-border s-flex s-items-center s-w-full s-gap-1.5",
+    "s-cursor-pointer s-select-none",
+    "s-outline-none s-rounded-xl s-transition-colors s-duration-300",
+    "data-[disabled]:s-pointer-events-none",
+    "data-[disabled]:s-text-muted-foreground dark:data-[disabled]:s-text-muted-foreground-night",
+    "hover:s-text-foreground dark:hover:s-text-foreground-night",
+    "hover:s-bg-primary-100 dark:hover:s-bg-primary-200-night"
+  ),
+  {
+    variants: {
+      state: {
+        active: "active:s-bg-primary-150 dark:active:s-bg-primary-200-night",
+        selected: cn(
+          "s-text-foreground dark:s-text-foreground-night",
+          "s-bg-primary-100 dark:s-bg-primary-200-night"
+        ),
+        unselected:
+          "s-text-muted-foreground dark:s-text-muted-foreground-night",
+      },
+    },
+    defaultVariants: {
+      state: "unselected",
     },
-    ref
-  ) => {
-    const [internalOpen, setInternalOpen] = React.useState(
-      defaultOpen ?? false
-    );
-    const isControlled = open !== undefined;
-    const isOpen = isControlled ? open : internalOpen;
-
-    const handleOpenChange = (newOpen: boolean) => {
-      if (!isControlled) {
-        setInternalOpen(newOpen);
-      }
-      onOpenChange?.(newOpen);
-    };
-
-    return (
-      <Collapsible
-        ref={ref}
-        open={isOpen}
-        onOpenChange={handleOpenChange}
-        className={className}
-        {...props}
-      >
-        <CollapsiblePrimitive.Trigger asChild>
-          <NavigationListLabel
-            label={label}
-            isCollapsible={true}
-            isOpen={isOpen}
-            action={action}
-          />
-        </CollapsiblePrimitive.Trigger>
-        <CollapsibleContent>{children}</CollapsibleContent>
-      </Collapsible>
-    );
   }
 );
 
+const NavigationListCollapsibleSection = React.forwardRef<
+  React.ElementRef<typeof Collapsible>,
+  NavigationListCollapsibleSectionProps
+>(({ label, action, children, className, ...props }) => {
+  return (
+    <Collapsible className={className} {...props}>
+      <div className="s-group/menu-item s-relative">
+        <CollapsibleTrigger>
+          <div className={collapseableStyles({ state: "unselected" })}>
+            {label}
+          </div>
+        </CollapsibleTrigger>
+        {action && (
+          <div
+            className={cn(
+              "s-absolute s-bottom-1 s-right-1.5 s-flex s-gap-1 s-opacity-0 s-transition-opacity",
+              "hover:s-opacity-100 group-focus-within/menu-item:s-opacity-100 group-hover/menu-item:s-opacity-100"
+            )}
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            {action}
+          </div>
+        )}
+      </div>
+      <CollapsibleContent>
+        <div className="s-flex s-flex-col s-gap-0.5">{children}</div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+});
+
 NavigationListCollapsibleSection.displayName =
   "NavigationListCollapsibleSection";
 
@@ -383,5 +339,4 @@ export {
   NavigationListItem,
   NavigationListItemAction,
   NavigationListLabel,
-  NavigationListLabelButton,
 };

package/src/icons/app/Inbox.tsx

@@ -0,0 +1,17 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgInbox = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path fill="currentColor" d="M22 17.5 12 23 2 17.5V15l10 5.5L22 15v2.5Z" />
+    <path fill="currentColor" d="m22 13-10 5.5L2 13v-2.5L12 16l10-5.5V13Z" />
+    <path fill="currentColor" d="M22 6.5v2L12 14 2 8.5v-2L12 1l10 5.5Z" />
+  </svg>
+);
+export default SvgInbox;

package/src/icons/app/SpaceClosed.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgSpaceClosed = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M22 17.5 12 23 2 17.5v-9L12 14l10-5.5v9Zm0-11L12 12 2 6.5 12 1l10 5.5Z"
+    />
+  </svg>
+);
+export default SvgSpaceClosed;

package/src/icons/app/SpaceOpen.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgSpaceOpen = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M22 6.5v11L12 23 2 17.5v-11L12 1l10 5.5ZM4.073 7.64 12 12l7.926-4.36L12 3.282l-7.927 4.36Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgSpaceOpen;