@dust-tt/sparkle 0.2.632-rc-3 → 0.2.632

package/dist/sparkle.css

@@ -6811,11 +6811,16 @@ select {
 
 :is(.s-dark .dark\:s-bg-background-night) {
   --tw-bg-opacity: 1;
-  background-color: rgb(17 20 24 / var(--tw-bg-opacity));
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
 :is(.s-dark .dark\:s-bg-background-night\/80) {
-  background-color: rgb(17 20 24 / 0.8);
+  background-color: rgb(0 0 0 / 0.8);
+}
+
+:is(.s-dark .dark\:s-bg-black) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
 :is(.s-dark .dark\:s-bg-blue-100-night) {
@@ -7279,11 +7284,11 @@ select {
 
 :is(.s-dark .dark\:s-bg-muted-background-night) {
   --tw-bg-opacity: 1;
-  background-color: rgb(28 34 45 / var(--tw-bg-opacity));
+  background-color: rgb(17 20 24 / var(--tw-bg-opacity));
 }
 
 :is(.s-dark .dark\:s-bg-muted-background-night\/75) {
-  background-color: rgb(28 34 45 / 0.75);
+  background-color: rgb(17 20 24 / 0.75);
 }
 
 :is(.s-dark .dark\:s-bg-muted-foreground-night\/40) {
@@ -7936,11 +7941,11 @@ select {
 
 :is(.s-dark .dark\:s-text-background-night) {
   --tw-text-opacity: 1;
-  color: rgb(17 20 24 / var(--tw-text-opacity));
+  color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
 :is(.s-dark .dark\:s-text-background-night\/50) {
-  color: rgb(17 20 24 / 0.5);
+  color: rgb(0 0 0 / 0.5);
 }
 
 :is(.s-dark .dark\:s-text-blue-500-night) {
@@ -7985,7 +7990,7 @@ select {
 
 :is(.s-dark .dark\:s-text-foreground-night) {
   --tw-text-opacity: 1;
-  color: rgb(211 213 217 / var(--tw-text-opacity));
+  color: rgb(247 247 247 / var(--tw-text-opacity));
 }
 
 :is(.s-dark .dark\:s-text-foreground-warning-night) {
@@ -8409,7 +8414,7 @@ select {
 :is(.s-dark .dark\:after\:s-bg-foreground-night)::after {
   content: var(--tw-content);
   --tw-bg-opacity: 1;
-  background-color: rgb(211 213 217 / var(--tw-bg-opacity));
+  background-color: rgb(247 247 247 / var(--tw-bg-opacity));
 }
 
 :is(.s-dark .dark\:checked\:s-bg-highlight-500-night:checked) {
@@ -8444,7 +8449,7 @@ select {
 
 :is(.s-dark .dark\:hover\:s-bg-muted-background-night:hover) {
   --tw-bg-opacity: 1;
-  background-color: rgb(28 34 45 / var(--tw-bg-opacity));
+  background-color: rgb(17 20 24 / var(--tw-bg-opacity));
 }
 
 :is(.s-dark .dark\:hover\:s-bg-muted-foreground-night\/70:hover) {
@@ -8491,7 +8496,7 @@ select {
 
 :is(.s-dark .dark\:hover\:s-text-foreground-night:hover) {
   --tw-text-opacity: 1;
-  color: rgb(211 213 217 / var(--tw-text-opacity));
+  color: rgb(247 247 247 / var(--tw-text-opacity));
 }
 
 :is(.s-dark .dark\:hover\:s-text-golden-700-night:hover) {
@@ -8591,7 +8596,7 @@ select {
 
 :is(.s-dark .dark\:focus\:s-text-foreground-night:focus) {
   --tw-text-opacity: 1;
-  color: rgb(211 213 217 / var(--tw-text-opacity));
+  color: rgb(247 247 247 / var(--tw-text-opacity));
 }
 
 :is(.s-dark .dark\:focus-visible\:s-border-border-focus-night:focus-visible) {
@@ -8642,11 +8647,6 @@ select {
   background-color: rgb(28 34 45 / var(--tw-bg-opacity));
 }
 
-:is(.s-dark .dark\:active\:s-bg-primary-200-night:active) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(42 50 65 / var(--tw-bg-opacity));
-}
-
 :is(.s-dark .dark\:active\:s-bg-primary-900:active) {
   --tw-bg-opacity: 1;
   background-color: rgb(28 34 45 / var(--tw-bg-opacity));
@@ -8749,7 +8749,7 @@ select {
 
 :is(.s-dark .dark\:disabled\:s-bg-background-night:disabled) {
   --tw-bg-opacity: 1;
-  background-color: rgb(17 20 24 / var(--tw-bg-opacity));
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
 :is(.s-dark .dark\:disabled\:s-bg-highlight-muted-night:disabled) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.632-rc-3",
+  "version": "0.2.632",
   "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",

package/src/components/Card.tsx

@@ -29,9 +29,9 @@ const variantClasses: Record<CardVariantType, string> = {
     "dark:s-border-border-night"
   ),
   tertiary: cn(
-    "s-bg-background",
+    "s-bg-white",
     "s-border-border/0",
-    "dark:s-bg-background-night",
+    "dark:s-bg-black",
     "dark:s-border-border-night/0"
   ),
 };

package/src/components/MessageCard.tsx

@@ -44,7 +44,7 @@ export const MessageCard = React.forwardRef<HTMLDivElement, MessageCardProps>(
         ref={ref}
         className={cn(
           "s-flex s-flex-col s-overflow-hidden",
-          "s-bg-background dark:s-bg-background-night",
+          "s-bg-white dark:s-bg-black",
           "s-rounded-2xl s-shadow-md",
           "s-border s-border-border/0 dark:s-border-border-night/0",
           className

package/src/components/NavigationList.tsx

@@ -20,16 +20,16 @@ const NavigationListItemStyles = cva(
     "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"
+    "hover:s-bg-primary-100 dark:hover:s-bg-primary-100-night"
   ),
   {
     variants: {
       state: {
-        active: "active:s-bg-primary-150 dark:active:s-bg-primary-200-night",
+        active: "active:s-bg-primary-150 dark:active:s-bg-primary-150-night",
         selected: cn(
           "s-text-foreground dark:s-text-foreground-night",
           "s-font-medium",
-          "s-bg-primary-100 dark:s-bg-primary-200-night"
+          "s-bg-primary-100 dark:s-bg-primary-100-night"
         ),
         unselected:
           "s-text-muted-foreground dark:s-text-muted-foreground-night",
@@ -204,7 +204,7 @@ const variantStyles = cva("", {
     },
     isSticky: {
       true: cn(
-        "s-sticky s-top-0 s-z-10 s-border-b s-bg-background dark:s-bg-muted-background-night",
+        "s-sticky s-top-0 s-z-10 s-border-b s-bg-background dark:s-bg-background-night",
         "s-border-border dark:s-border-border-night"
       ),
     },

package/src/components/Resizable.tsx

@@ -48,7 +48,7 @@ const ResizableHandle = ({
       <div
         className={cn(
           "s-absolute s-flex s-h-6 s-w-2 s-items-center s-justify-center s-rounded-2xl",
-          "s-border s-border-gray-100 s-bg-background dark:s-bg-background-night"
+          "s-border s-border-gray-100 s-bg-white"
         )}
       >
         <div className="s-w-px" />

package/src/components/markdown/CodeBlockWithExtendedSupport.tsx

@@ -451,6 +451,8 @@ export function CodeBlockWithExtendedSupport({
     <ContentBlockWrapper
       content={validChildrenContent}
       getContentToDownload={getContentToDownload}
+      buttonDisplay="inside"
+      displayActions="hover"
     >
       <CodeBlock className={className} inline={inline}>
         {children}

package/src/icons/app/ContactsRobot.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgContactsRobot = (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="M18 2a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H5a2 2 0 0 1-2-2v-1h2v-2H2v-2h3v-2H2v-2h3V9H2V7h3V5H3V4a2 2 0 0 1 2-2h13Zm-5 11a3 3 0 0 0-3 3h6a3 3 0 0 0-3-3Zm-1.5-5A1.5 1.5 0 0 0 10 9.5v.5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-.5A1.5 1.5 0 0 0 14.5 8h-3Zm.25 1a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5Zm2.5 0a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5Z"
+    />
+  </svg>
+);
+export default SvgContactsRobot;

package/src/icons/app/ContactsUser.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgContactsUser = (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="M18 2a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H5a2 2 0 0 1-2-2v-1h2v-2H2v-2h3v-2H2v-2h3V9H2V7h3V5H3V4a2 2 0 0 1 2-2h13Zm-5 11a3 3 0 0 0-3 3h6a3 3 0 0 0-3-3Zm0-5a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"
+    />
+  </svg>
+);
+export default SvgContactsUser;

package/src/icons/app/D.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgD = (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="M12 3a9 9 0 1 1 0 18H3V3h9Zm0 16a7 7 0 1 0 0-14v14Z"
+    />
+  </svg>
+);
+export default SvgD;

package/src/icons/app/DoubleQuotes.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgDoubleQuotes = (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="M4.583 17.321C3.553 16.227 3 15 3 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 0 1-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179Zm10 0C13.553 16.227 13 15 13 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 0 1-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179Z"
+    />
+  </svg>
+);
+export default SvgDoubleQuotes;

package/src/icons/app/Robot.tsx

@@ -9,16 +9,9 @@ const SvgRobot = (props: SVGProps<SVGSVGElement>) => (
     viewBox="0 0 24 24"
     {...props}
   >
-    <path fill="currentColor" d="M14 4a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z" />
     <path
       fill="currentColor"
-      fillRule="evenodd"
-      d="M3 13a6 6 0 0 1 6-6h6a6 6 0 0 1 6 6v3a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4v-3Zm10.665 2.33a.75.75 0 1 1 .67 1.34l-1.105.554a2.75 2.75 0 0 1-2.46 0l-1.105-.553a.75.75 0 1 1 .67-1.342l1.106.553a1.25 1.25 0 0 0 1.118 0l1.106-.553ZM18 13.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM7.5 15a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-      clipRule="evenodd"
-    />
-    <path
-      fill="currentColor"
-      d="M1 11a1 1 0 0 0-1 1v3a1 1 0 1 0 2 0v-3a1 1 0 0 0-1-1ZM22 12a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0v-3Z"
+      d="M12 14a8 8 0 0 1 8 8H4a8 8 0 0 1 8-8Zm1-11h4a3 3 0 0 1 3 3v2a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5V6a3 3 0 0 1 3-3h4V2h2v1ZM8 5a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"
     />
   </svg>
 );

package/src/icons/app/Tools.tsx

@@ -11,7 +11,7 @@ const SvgTools = (props: SVGProps<SVGSVGElement>) => (
   >
     <path
       fill="currentColor"
-      d="M2.5 7a4.5 4.5 0 1 0 9 0 4.5 4.5 0 0 0-9 0Zm0 10a4.5 4.5 0 1 0 9 0 4.5 4.5 0 0 0-9 0Zm10 0a4.5 4.5 0 1 0 9 0 4.5 4.5 0 0 0-9 0Zm5.025-5.845.278-.636a4.908 4.908 0 0 1 2.496-2.533l.854-.38c.463-.205.463-.878 0-1.083l-.806-.359a4.911 4.911 0 0 1-2.533-2.617l-.285-.688a.57.57 0 0 0-1.058 0l-.285.688a4.911 4.911 0 0 1-2.533 2.617l-.806.359c-.463.205-.463.878 0 1.083l.854.38a4.908 4.908 0 0 1 2.496 2.533l.278.636a.57.57 0 0 0 1.05 0Z"
+      d="M17 12.5a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9ZM12 21H2l5-8 5 8Zm5.938-14.91H22L17.062 12V7.91H13L17.938 2v4.09ZM11 11H3V3h8v8Z"
     />
   </svg>
 );

package/src/icons/app/index.ts

@@ -49,13 +49,17 @@ export { default as Cog6ToothIcon } from "./Cog6Tooth";
 export { default as CommandIcon } from "./Command";
 export { default as CommandLineIcon } from "./CommandLine";
 export { default as CompanyIcon } from "./Company";
+export { default as ContactsRobotIcon } from "./ContactsRobot";
+export { default as ContactsUserIcon } from "./ContactsUser";
 export { default as CubeIcon } from "./Cube";
+export { default as DIcon } from "./D";
 export { default as DashIcon } from "./Dash";
 export { default as DocumentIcon } from "./Document";
 export { default as DocumentPileIcon } from "./DocumentPile";
 export { default as DocumentPlusIcon } from "./DocumentPlus";
 export { default as DocumentTextIcon } from "./DocumentText";
 export { default as DotIcon } from "./Dot";
+export { default as DoubleQuotesIcon } from "./DoubleQuotes";
 export { default as DustIcon } from "./Dust";
 export { default as EmotionLaughIcon } from "./EmotionLaugh";
 export { default as ExclamationCircleIcon } from "./ExclamationCircle";

package/src/icons/src/app/contacts-robot.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 2C19.6569 2 21 3.34315 21 5V19C21 20.6569 19.6569 22 18 22H5C3.89543 22 3 21.1046 3 20V19H5V17H2V15H5V13H2V11H5V9H2V7H5V5H3V4C3 2.89543 3.89543 2 5 2H18ZM13 13C11.3431 13 10 14.3431 10 16H16C16 14.3431 14.6569 13 13 13ZM11.5 8C10.6716 8 10 8.67157 10 9.5V10C10 11.1046 10.8954 12 12 12H14C15.1046 12 16 11.1046 16 10V9.5C16 8.67157 15.3284 8 14.5 8H11.5ZM11.75 9C12.1642 9 12.5 9.33579 12.5 9.75C12.5 10.1642 12.1642 10.5 11.75 10.5C11.3358 10.5 11 10.1642 11 9.75C11 9.33579 11.3358 9 11.75 9ZM14.25 9C14.6642 9 15 9.33579 15 9.75C15 10.1642 14.6642 10.5 14.25 10.5C13.8358 10.5 13.5 10.1642 13.5 9.75C13.5 9.33579 13.8358 9 14.25 9Z" fill="#111418"/>
+</svg>

package/src/icons/src/app/contacts-user.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 2C19.6569 2 21 3.34315 21 5V19C21 20.6569 19.6569 22 18 22H5C3.89543 22 3 21.1046 3 20V19H5V17H2V15H5V13H2V11H5V9H2V7H5V5H3V4C3 2.89543 3.89543 2 5 2H18ZM13 13C11.3431 13 10 14.3431 10 16H16C16 14.3431 14.6569 13 13 13ZM13 8C11.8954 8 11 8.89543 11 10C11 11.1046 11.8954 12 13 12C14.1046 12 15 11.1046 15 10C15 8.89543 14.1046 8 13 8Z" fill="#111418"/>
+</svg>

package/src/icons/src/app/d.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21H3V3H12ZM12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5V19Z" fill="#111418"/>
+</svg>

package/src/icons/src/app/double-quotes.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.58341 17.3211C3.55316 16.2274 3 15 3 13.0103C3 9.51086 5.45651 6.37366 9.03059 4.82318L9.92328 6.20079C6.58804 8.00539 5.93618 10.346 5.67564 11.822C6.21263 11.5443 6.91558 11.4466 7.60471 11.5105C9.40908 11.6778 10.8312 13.159 10.8312 15C10.8312 16.933 9.26416 18.5 7.33116 18.5C6.2581 18.5 5.23196 18.0095 4.58341 17.3211ZM14.5834 17.3211C13.5532 16.2274 13 15 13 13.0103C13 9.51086 15.4565 6.37366 19.0306 4.82318L19.9233 6.20079C16.588 8.00539 15.9362 10.346 15.6756 11.822C16.2126 11.5443 16.9156 11.4466 17.6047 11.5105C19.4091 11.6778 20.8312 13.159 20.8312 15C20.8312 16.933 19.2642 18.5 17.3312 18.5C16.2581 18.5 15.232 18.0095 14.5834 17.3211Z" fill="#111418"/>
+</svg>

package/src/icons/src/app/robot.svg

@@ -1,6 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14 4C14 5.10457 13.1046 6 12 6C10.8954 6 10 5.10457 10 4C10 2.89543 10.8954 2 12 2C13.1046 2 14 2.89543 14 4Z" fill="#111418"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3 13C3 9.68629 5.68629 7 9 7H15C18.3137 7 21 9.68629 21 13V16C21 18.2091 19.2091 20 17 20H7C4.79086 20 3 18.2091 3 16V13ZM13.6646 15.3292C14.0351 15.1439 14.4856 15.2941 14.6708 15.6646C14.8561 16.0351 14.7059 16.4856 14.3354 16.6708L13.2298 17.2236C12.4556 17.6107 11.5444 17.6107 10.7702 17.2236L9.66459 16.6708C9.29411 16.4856 9.14394 16.0351 9.32918 15.6646C9.51443 15.2941 9.96493 15.1439 10.3354 15.3292L11.441 15.882C11.7929 16.0579 12.2071 16.0579 12.559 15.882L13.6646 15.3292ZM18 13.5C18 14.3284 17.3284 15 16.5 15C15.6716 15 15 14.3284 15 13.5C15 12.6716 15.6716 12 16.5 12C17.3284 12 18 12.6716 18 13.5ZM7.5 15C8.32843 15 9 14.3284 9 13.5C9 12.6716 8.32843 12 7.5 12C6.67157 12 6 12.6716 6 13.5C6 14.3284 6.67157 15 7.5 15Z" fill="#111418"/>
-<path d="M1 11C0.447715 11 0 11.4477 0 12V15C0 15.5523 0.447715 16 1 16C1.55228 16 2 15.5523 2 15V12C2 11.4477 1.55228 11 1 11Z" fill="#111418"/>
-<path d="M22 12C22 11.4477 22.4477 11 23 11C23.5523 11 24 11.4477 24 12V15C24 15.5523 23.5523 16 23 16C22.4477 16 22 15.5523 22 15V12Z" fill="#111418"/>
+<path d="M12 14C16.4183 14 20 17.5817 20 22H4C4 17.5817 7.58172 14 12 14ZM13 3H17C18.6569 3 20 4.34315 20 6V8C20 10.7614 17.7614 13 15 13H9C6.23858 13 4 10.7614 4 8V6C4 4.34315 5.34315 3 7 3H11V2H13V3ZM8 5C6.89543 5 6 5.89543 6 7C6 8.10457 6.89543 9 8 9C9.10457 9 10 8.10457 10 7C10 5.89543 9.10457 5 8 5ZM16 5C14.8954 5 14 5.89543 14 7C14 8.10457 14.8954 9 16 9C17.1046 9 18 8.10457 18 7C18 5.89543 17.1046 5 16 5Z" fill="#111418"/>
 </svg>

package/src/icons/src/app/tools.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.5 7C2.5 9.48528 4.51472 11.5 7 11.5C9.48528 11.5 11.5 9.48528 11.5 7C11.5 4.51472 9.48528 2.5 7 2.5C4.51472 2.5 2.5 4.51472 2.5 7ZM2.5 17C2.5 19.4853 4.51472 21.5 7 21.5C9.48528 21.5 11.5 19.4853 11.5 17C11.5 14.5147 9.48528 12.5 7 12.5C4.51472 12.5 2.5 14.5147 2.5 17ZM12.5 17C12.5 19.4853 14.5147 21.5 17 21.5C19.4853 21.5 21.5 19.4853 21.5 17C21.5 14.5147 19.4853 12.5 17 12.5C14.5147 12.5 12.5 14.5147 12.5 17ZM17.5252 11.155L17.8026 10.5186C18.297 9.38398 19.1876 8.48059 20.2988 7.98638L21.1534 7.60631C21.6155 7.4008 21.6155 6.7284 21.1534 6.52289L20.3467 6.16406C19.2068 5.65713 18.3002 4.72031 17.8143 3.54712L17.5295 2.85945C17.3309 2.38018 16.669 2.38018 16.4705 2.85945L16.1856 3.54712C15.6997 4.72031 14.7932 5.65713 13.6534 6.16406L12.8466 6.52289C12.3845 6.7284 12.3845 7.4008 12.8466 7.60631L13.7011 7.98638C14.8124 8.48059 15.7029 9.38398 16.1974 10.5186L16.4748 11.155C16.6778 11.6209 17.3222 11.6209 17.5252 11.155Z" fill="#111418"/>
+<path d="M17 12.5C19.4853 12.5 21.5 14.5147 21.5 17C21.5 19.4853 19.4853 21.5 17 21.5C14.5147 21.5 12.5 19.4853 12.5 17C12.5 14.5147 14.5147 12.5 17 12.5ZM12 21H2L7 13L12 21ZM17.9375 6.09082H22L17.0625 12V7.90918H13L17.9375 2V6.09082ZM11 11H3V3H11V11Z" fill="#111418"/>
 </svg>

package/src/stories/NavigationList.stories.tsx

@@ -72,7 +72,7 @@ export const Demo = () => {
   return (
     <div className="s-flex s-h-[400px] s-w-full s-flex-row s-gap-12">
       <div className="s-h-[400px] s-w-[240px]">
-        <NavigationList className="s-relative s-h-full s-w-full s-px-3 dark:s-bg-muted-background-night">
+        <NavigationList className="s-relative s-h-full s-w-full s-px-3">
           {conversationTitles.map((section, sectionIndex) => (
             <React.Fragment key={sectionIndex}>
               <NavigationListLabel label={section.label} />
@@ -112,7 +112,7 @@ export const Demo = () => {
         </NavigationList>
       </div>
       <div className="s-h-[400px] s-w-[240px]">
-        <NavigationList className="s-relative s-h-full s-w-full s-px-3 dark:s-bg-muted-background-night">
+        <NavigationList className="s-relative s-h-full s-w-full s-px-3">
           {conversationTitles.map((section, sectionIndex) => (
             <React.Fragment key={sectionIndex}>
               <NavigationListLabel label={section.label} isSticky />