@dust-tt/sparkle 0.2.486 → 0.2.488-rc-1

package/src/components/DataTable.tsx

@@ -98,6 +98,12 @@ interface DataTableProps<TData extends TBaseData> {
   setSorting?: (sorting: SortingState) => void;
   isServerSideSorting?: boolean;
   disablePaginationNumbers?: boolean;
+  getRowId?: (
+    originalRow: TData,
+    index: number,
+    parent?: Row<TData> | undefined
+  ) => string;
+  // row selection props
   rowSelection?: RowSelectionState;
   setRowSelection?: (rowSelection: RowSelectionState) => void;
   enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
@@ -122,6 +128,7 @@ export function DataTable<TData extends TBaseData>({
   rowSelection,
   setRowSelection,
   enableRowSelection = false,
+  getRowId,
 }: DataTableProps<TData>) {
   const windowSize = useWindowSize();
 
@@ -191,6 +198,7 @@ export function DataTable<TData extends TBaseData>({
     },
     onPaginationChange,
     enableRowSelection,
+    getRowId,
   });
 
   useEffect(() => {
@@ -320,6 +328,7 @@ export function ScrollableDataTable<TData extends TBaseData>({
   rowSelection,
   setRowSelection,
   enableRowSelection,
+  getRowId,
 }: ScrollableDataTableProps<TData>) {
   const windowSize = useWindowSize();
   const tableContainerRef = useRef<HTMLDivElement>(null);
@@ -368,6 +377,7 @@ export function ScrollableDataTable<TData extends TBaseData>({
       ...(enableRowSelection && { rowSelection }),
     },
     enableRowSelection,
+    getRowId,
   });
 
   useEffect(() => {

package/src/components/index.ts

@@ -8,6 +8,7 @@ export {
 export { AttachmentChip } from "./AttachmentChip";
 export { Avatar } from "./Avatar";
 export { BarHeader } from "./BarHeader";
+export type { BreadcrumbItem } from "./Breadcrumbs";
 export { Breadcrumbs } from "./Breadcrumbs";
 export type {
   ButtonProps,

package/src/icons/app/Bolt.tsx

@@ -0,0 +1,15 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgBolt = (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="M13 10h7l-9 13v-9H4l9-13v9Z" />
+  </svg>
+);
+export default SvgBolt;

package/src/icons/app/index.ts

@@ -12,6 +12,7 @@ export { default as ArrowUpOnSquareIcon } from "./ArrowUpOnSquare";
 export { default as ArrowUpSIcon } from "./ArrowUpS";
 export { default as AttachmentIcon } from "./Attachment";
 export { default as BarChartIcon } from "./BarChart";
+export { default as BoltIcon } from "./Bolt";
 export { default as BookOpenIcon } from "./BookOpen";
 export { default as BracesIcon } from "./Braces";
 export { default as BrainIcon } from "./Brain";

package/src/icons/src/app/bolt.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="M13 10H20L11 23V14H4L13 1V10Z" fill="#111418"/>
+</svg>

package/src/logo/platforms/Gcal.tsx

@@ -0,0 +1,46 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgGcal = (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="#fff"
+      d="m17.263 6.737-4.737-.526-5.79.526L6.212 12l.526 5.263 5.263.658 5.263-.658.526-5.395-.526-5.131Z"
+    />
+    <path
+      fill="#1A73E8"
+      d="M8.896 14.903c-.393-.266-.666-.654-.814-1.168l.913-.376c.083.316.227.56.434.734.205.174.455.26.747.26.3 0 .556-.091.77-.273a.87.87 0 0 0 .322-.693.86.86 0 0 0-.339-.703c-.226-.181-.51-.272-.85-.272h-.528v-.904h.474c.292 0 .538-.079.738-.237.2-.158.3-.374.3-.649 0-.244-.09-.44-.268-.585-.18-.146-.405-.22-.68-.22-.269 0-.482.071-.64.215-.158.143-.272.32-.345.527l-.904-.376c.12-.34.34-.64.662-.899.323-.259.734-.39 1.234-.39.37 0 .703.072.998.215.295.144.526.342.693.595.167.254.25.538.25.854 0 .322-.077.595-.233.818a1.606 1.606 0 0 1-.572.515v.054c.299.125.542.316.734.572a1.5 1.5 0 0 1 .287.921c0 .358-.09.678-.272.958-.182.28-.433.501-.752.662-.32.16-.679.242-1.077.242a2.23 2.23 0 0 1-1.282-.397ZM14.5 10.371l-.997.725-.502-.76L14.8 9.037h.69v6.12h-.99V10.37Z"
+    />
+    <path
+      fill="#EA4335"
+      d="M17.263 22 22 17.263l-2.368-1.052-2.369 1.052-1.052 2.369L17.263 22Z"
+    />
+    <path
+      fill="#34A853"
+      d="M5.684 19.632 6.737 22h10.526v-4.737H6.737l-1.053 2.369Z"
+    />
+    <path
+      fill="#4285F4"
+      d="M3.579 2C2.707 2 2 2.707 2 3.579v13.684l2.368 1.053 2.369-1.053V6.737h10.526l1.053-2.369L17.263 2H3.58Z"
+    />
+    <path
+      fill="#188038"
+      d="M2 17.263v3.158C2 21.294 2.707 22 3.579 22h3.158v-4.737H2Z"
+    />
+    <path
+      fill="#FBBC04"
+      d="M17.263 6.737v10.526H22V6.737l-2.368-1.053-2.369 1.053Z"
+    />
+    <path
+      fill="#1967D2"
+      d="M22 6.737V3.579C22 2.706 21.293 2 20.421 2h-3.158v4.737H22Z"
+    />
+  </svg>
+);
+export default SvgGcal;

package/src/logo/platforms/Gmail.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgGmail = (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="#4285F4" d="M2.5 20.5H6V12L1 8.25V19c0 .83.673 1.5 1.5 1.5Z" />
+    <path fill="#34A853" d="M18 20.5h3.5A1.5 1.5 0 0 0 23 19V8.25L18 12" />
+    <path fill="#FBBC04" d="M18 5.5V12l5-3.75v-2c0-1.855-2.117-2.912-3.6-1.8" />
+    <path fill="#EA4335" d="M6 12V5.5l6 4.5 6-4.5V12l-6 4.5" />
+    <path
+      fill="#C5221F"
+      d="M1 6.25v2L6 12V5.5L4.6 4.45C3.115 3.338 1 4.395 1 6.25Z"
+    />
+  </svg>
+);
+export default SvgGmail;

package/src/logo/platforms/Hubspot.tsx

@@ -5,12 +5,15 @@ const SvgHubspot = (props: SVGProps<SVGSVGElement>) => (
     xmlns="http://www.w3.org/2000/svg"
     width="1em"
     height="1em"
-    viewBox="6.209 0.645 244.269 251.247"
+    fill="none"
+    viewBox="0 0 24 24"
     {...props}
   >
     <path
-      fill="#ff7a59"
-      d="M191.385 85.694V56.188a22.722 22.722 0 0 0 13.101-20.48v-.677c0-12.549-10.173-22.722-22.721-22.722h-.678c-12.549 0-22.722 10.173-22.722 22.722v.677a22.722 22.722 0 0 0 13.101 20.48v29.506a64.342 64.342 0 0 0-30.594 13.47L59.95 36.134c.577-2.083.878-4.225.912-6.375a25.6 25.6 0 1 0-25.633 25.55 25.323 25.323 0 0 0 12.607-3.43l79.685 62.007c-14.65 22.131-14.258 50.974.987 72.7l-24.236 24.243c-1.96-.626-4-.959-6.057-.987-11.607.01-21.01 9.423-21.007 21.03.003 11.606 9.412 21.014 21.018 21.017 11.607.003 21.02-9.4 21.03-21.007a20.747 20.747 0 0 0-.988-6.056l23.976-23.985c21.423 16.492 50.846 17.913 73.759 3.562 22.912-14.352 34.475-41.446 28.985-67.918-5.49-26.473-26.873-46.734-53.603-50.792m-9.938 97.044a33.17 33.17 0 1 1 0-66.316c17.85.625 32 15.272 32.01 33.134.008 17.86-14.127 32.522-31.977 33.165"
+      fill="#FF7A59"
+      fillRule="evenodd"
+      d="M16.076 16.692a2.534 2.534 0 0 1-2.524-2.543 2.534 2.534 0 0 1 2.524-2.543 2.534 2.534 0 0 1 2.525 2.543 2.534 2.534 0 0 1-2.525 2.543Zm.756-7.439V6.991c.586-.279.997-.876.997-1.57V5.37c0-.957-.777-1.74-1.727-1.74h-.052c-.95 0-1.727.783-1.727 1.74v.052c0 .693.41 1.29.997 1.57v2.261a4.88 4.88 0 0 0-2.328 1.033L6.826 5.454c.041-.157.07-.32.07-.49A1.955 1.955 0 0 0 4.95 3 1.955 1.955 0 0 0 3 4.96a1.955 1.955 0 0 0 1.945 1.964c.35 0 .675-.1.96-.263l6.065 4.753a4.961 4.961 0 0 0-.818 2.735c0 1.059.332 2.038.893 2.844l-1.844 1.858a1.565 1.565 0 0 0-.458-.075c-.883 0-1.6.721-1.6 1.612 0 .89.717 1.612 1.6 1.612.885 0 1.601-.722 1.601-1.612 0-.161-.03-.314-.074-.46l1.824-1.838a4.875 4.875 0 0 0 2.982 1.019c2.72 0 4.924-2.221 4.924-4.96a4.946 4.946 0 0 0-4.168-4.896Z"
+      clipRule="evenodd"
     />
   </svg>
 );

package/src/logo/platforms/Jira.tsx

@@ -2,30 +2,45 @@ import type { SVGProps } from "react";
 import * as React from "react";
 const SvgJira = (props: SVGProps<SVGSVGElement>) => (
   <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
     width="1em"
     height="1em"
     preserveAspectRatio="xMidYMid"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 -30.632388516510233 255.324 285.95638851651023"
+    viewBox="0 -30.632 255.324 285.956"
     {...props}
   >
-    <linearGradient id="a">
-      <stop offset=".18" stop-color="#0052cc" />
-      <stop offset="1" stop-color="#2684ff" />
+    <linearGradient id="jira_svg__a">
+      <stop offset={0.18} stopColor="#0052cc" />
+      <stop offset={1} stopColor="#2684ff" />
     </linearGradient>
-    <linearGradient id="b" x1="98.031%" x2="58.888%" y1=".161%" y2="40.766%" />
-    <linearGradient id="c" x1="100.665%" x2="55.402%" y1=".455%" y2="44.727%" />
+    <linearGradient
+      xlinkHref="#jira_svg__a"
+      id="jira_svg__b"
+      x1="98.031%"
+      x2="58.888%"
+      y1=".161%"
+      y2="40.766%"
+    />
+    <linearGradient
+      xlinkHref="#jira_svg__a"
+      id="jira_svg__c"
+      x1="100.665%"
+      x2="55.402%"
+      y1=".455%"
+      y2="44.727%"
+    />
     <path
-      d="M244.658 0H121.707a55.502 55.502 0 0 0 55.502 55.502h22.649V77.37c.02 30.625 24.841 55.447 55.466 55.467V10.666C255.324 4.777 250.55 0 244.658 0z"
       fill="#2684ff"
+      d="M244.658 0H121.707a55.502 55.502 0 0 0 55.502 55.502h22.649V77.37c.02 30.625 24.841 55.447 55.466 55.467V10.666C255.324 4.777 250.55 0 244.658 0z"
     />
     <path
+      fill="url(#jira_svg__b)"
       d="M183.822 61.262H60.872c.019 30.625 24.84 55.447 55.466 55.467h22.649v21.938c.039 30.625 24.877 55.43 55.502 55.43V71.93c0-5.891-4.776-10.667-10.667-10.667z"
-      fill="url(#b)"
     />
     <path
+      fill="url(#jira_svg__c)"
       d="M122.951 122.489H0c0 30.653 24.85 55.502 55.502 55.502h22.72v21.867c.02 30.597 24.798 55.408 55.396 55.466V133.156c0-5.891-4.776-10.667-10.667-10.667z"
-      fill="url(#c)"
     />
   </svg>
 );

package/src/logo/platforms/index.ts

@@ -9,9 +9,11 @@ export { default as DeepseekLogo } from "./Deepseek";
 export { default as DriveLogo } from "./Drive";
 export { default as FigmaLogo } from "./Figma";
 export { default as FireworksLogo } from "./Fireworks";
+export { default as GcalLogo } from "./Gcal";
 export { default as GeminiLogo } from "./Gemini";
 export { default as GithubLogo } from "./Github";
 export { default as GithubWhiteLogo } from "./GithubWhite";
+export { default as GmailLogo } from "./Gmail";
 export { default as GongLogo } from "./Gong";
 export { default as GoogleLogo } from "./Google";
 export { default as GoogleDocLogo } from "./GoogleDoc";

package/src/logo/src/platforms/Gcal.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.2632 6.73681L12.5264 6.21051L6.73691 6.73681L6.21051 12L6.73681 17.2632L12 17.9211L17.2632 17.2632L17.7895 11.8685L17.2632 6.73681Z" fill="white"/>
+<path d="M8.8961 14.9026C8.5027 14.6368 8.2303 14.2487 8.0816 13.7355L8.9948 13.3592C9.0777 13.675 9.2224 13.9197 9.429 14.0934C9.6343 14.2671 9.8843 14.3526 10.1764 14.3526C10.4751 14.3526 10.7317 14.2618 10.9461 14.0802C11.1605 13.8986 11.2685 13.667 11.2685 13.3868C11.2685 13.1 11.1553 12.8657 10.929 12.6842C10.7027 12.5027 10.4185 12.4118 10.079 12.4118H9.5514V11.5079H10.025C10.3171 11.5079 10.5632 11.429 10.7632 11.2711C10.9632 11.1132 11.0632 10.8974 11.0632 10.6224C11.0632 10.3777 10.9737 10.1829 10.7948 10.0369C10.6159 9.89087 10.3895 9.81717 10.1145 9.81717C9.8461 9.81717 9.6329 9.88827 9.475 10.0317C9.3171 10.1751 9.2026 10.3514 9.1303 10.5593L8.2264 10.183C8.3461 9.84347 8.5659 9.54348 8.8882 9.28428C9.2106 9.02508 9.6224 8.89478 10.1224 8.89478C10.4921 8.89478 10.825 8.96588 11.1198 9.10928C11.4145 9.25268 11.6461 9.45138 11.8132 9.70397C11.9803 9.95787 12.0632 10.2422 12.0632 10.5579C12.0632 10.8803 11.9856 11.1526 11.8303 11.3763C11.675 11.6 11.4842 11.771 11.2579 11.8908V11.9447C11.5566 12.0697 11.8 12.2605 11.9921 12.5171C12.1829 12.7737 12.2789 13.0803 12.2789 13.4382C12.2789 13.7961 12.1881 14.1158 12.0065 14.3961C11.8249 14.6764 11.5736 14.8974 11.2552 15.0579C10.9355 15.2184 10.5763 15.3 10.1776 15.3C9.7158 15.3013 9.2895 15.1684 8.8961 14.9026Z" fill="#1A73E8"/>
+<path d="M14.5 10.371L13.5026 11.096L13.0013 10.3355L14.8 9.03815H15.4895V15.1578H14.5V10.371Z" fill="#1A73E8"/>
+<path d="M17.2632 22L22 17.2632L19.6316 16.2106L17.2632 17.2632L16.2106 19.6316L17.2632 22Z" fill="#EA4335"/>
+<path d="M5.6842 19.6316L6.7368 22H17.2631V17.2632H6.7368L5.6842 19.6316Z" fill="#34A853"/>
+<path d="M3.5789 2C2.7066 2 2 2.7066 2 3.5789V17.2631L4.3684 18.3157L6.73679 17.2631V6.73679H17.2631L18.3157 4.3684L17.2632 2H3.5789Z" fill="#4285F4"/>
+<path d="M2 17.2632V20.4211C2 21.2935 2.7066 22 3.5789 22H6.73679V17.2632H2Z" fill="#188038"/>
+<path d="M17.2632 6.7368V17.2631H22V6.7368L19.6316 5.6842L17.2632 6.7368Z" fill="#FBBC04"/>
+<path d="M22 6.73679V3.5789C22 2.7065 21.2934 2 20.4211 2H17.2632V6.73679H22Z" fill="#1967D2"/>
+</svg>

package/src/logo/src/platforms/Gmail.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.5 20.5004H6V12.0004L1 8.25043V19.0004C1 19.8304 1.6725 20.5004 2.5 20.5004Z" fill="#4285F4"/>
+<path d="M18 20.5004H21.5C22.33 20.5004 23 19.8279 23 19.0004V8.25043L18 12.0004" fill="#34A853"/>
+<path d="M18 5.50035V12.0004L23 8.25035V6.25035C23 4.39535 20.8825 3.33785 19.4 4.45035" fill="#FBBC04"/>
+<path d="M6 12.0004V5.50043L12 10.0004L18 5.50043V12.0004L12 16.5004" fill="#EA4335"/>
+<path d="M1 6.25035V8.25035L6 12.0004V5.50035L4.6 4.45035C3.115 3.33785 1 4.39535 1 6.25035Z" fill="#C5221F"/>
+</svg>

package/src/logo/src/platforms/Hubspot.svg

@@ -1,10 +1,3 @@
-  <svg
-    height="1em"
-    viewBox="6.20856283 .64498824 244.26943717 251.24701176"
-    width="1em"
-    xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="m191.385 85.694v-29.506a22.722 22.722 0 0 0 13.101-20.48v-.677c0-12.549-10.173-22.722-22.721-22.722h-.678c-12.549 0-22.722 10.173-22.722 22.722v.677a22.722 22.722 0 0 0 13.101 20.48v29.506a64.342 64.342 0 0 0 -30.594 13.47l-80.922-63.03c.577-2.083.878-4.225.912-6.375a25.6 25.6 0 1 0 -25.633 25.55 25.323 25.323 0 0 0 12.607-3.43l79.685 62.007c-14.65 22.131-14.258 50.974.987 72.7l-24.236 24.243c-1.96-.626-4-.959-6.057-.987-11.607.01-21.01 9.423-21.007 21.03.003 11.606 9.412 21.014 21.018 21.017 11.607.003 21.02-9.4 21.03-21.007a20.747 20.747 0 0 0 -.988-6.056l23.976-23.985c21.423 16.492 50.846 17.913 73.759 3.562 22.912-14.352 34.475-41.446 28.985-67.918-5.49-26.473-26.873-46.734-53.603-50.792m-9.938 97.044a33.17 33.17 0 1 1 0-66.316c17.85.625 32 15.272 32.01 33.134.008 17.86-14.127 32.522-31.977 33.165"
-      fill="#ff7a59"
-    />
-  </svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.0762 16.6916C14.6819 16.6916 13.5516 15.5531 13.5516 14.1489C13.5516 12.7445 14.6819 11.606 16.0762 11.606C17.4704 11.606 18.6007 12.7445 18.6007 14.1489C18.6007 15.5531 17.4704 16.6916 16.0762 16.6916ZM16.8319 9.25338V6.99129C17.4181 6.71241 17.8287 6.1151 17.8287 5.42191V5.36969C17.8287 4.41298 17.0516 3.63024 16.1018 3.63024H16.0502C15.1004 3.63024 14.3234 4.41298 14.3234 5.36969V5.42191C14.3234 6.1151 14.7339 6.71265 15.3201 6.99154V9.25338C14.4474 9.38929 13.65 9.75187 12.9923 10.2855L6.82629 5.45412C6.86699 5.29674 6.89557 5.13473 6.89581 4.96442C6.89678 3.88107 6.0262 3.00147 4.95021 3C3.8747 2.99878 3.00121 3.87595 3 4.95954C2.99879 6.04312 3.86937 6.92273 4.94536 6.92395C5.29587 6.92444 5.62046 6.82416 5.90484 6.66117L11.9701 11.414C11.4544 12.1982 11.1521 13.1376 11.1521 14.1489C11.1521 15.2076 11.4842 16.187 12.0452 16.9925L10.2008 18.8505C10.055 18.8063 9.90385 18.7756 9.74349 18.7756C8.85959 18.7756 8.14282 19.4973 8.14282 20.3877C8.14282 21.2783 8.85959 22 9.74349 22C10.6276 22 11.3442 21.2783 11.3442 20.3877C11.3442 20.2266 11.3136 20.0741 11.2698 19.9273L13.0943 18.0895C13.9225 18.7261 14.9539 19.1086 16.0762 19.1086C18.7957 19.1086 21 16.888 21 14.1489C21 11.6692 19.1915 9.6206 16.8319 9.25338Z" fill="#FF7A59"/>
+</svg>

package/src/stories/Breadcrumbs.stories.tsx

@@ -18,7 +18,7 @@ export default meta;
 export const BreadcrumbsExample = () => {
   const items1 = [
     { label: "Home", href: "#", icon: HomeIcon },
-    { label: "Spaces", href: ".." },
+    { label: "Spaces", onClick: () => alert("Spaces clicked!") },
     { label: "My Space" },
   ];
   const items2 = [

package/src/stories/DataTable.stories.tsx

@@ -633,6 +633,7 @@ export const DataTableWithRowSelectionExample = () => {
           rowSelection={rowSelection}
           setRowSelection={setRowSelection}
           enableRowSelection={true}
+          getRowId={(row) => row.name}
         />
 
         <div className="s-rounded-md s-border s-bg-muted/50 s-p-2">

package/src/stories/Playground.stories.tsx

@@ -1,8 +1,17 @@
+import {} from "@radix-ui/react-dropdown-menu";
 import React from "react";
 
-import { Avatar, Button, FlexSplitButton, Icon } from "@sparkle/components";
-import { ArrowUpIcon, ChevronDownIcon } from "@sparkle/icons/app";
-import { cn } from "@sparkle/lib";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+  Label,
+  Page,
+} from "@sparkle/components";
+import { ActionMoonIcon, ActionSunIcon, LightModeIcon } from "@sparkle/icons";
 
 export default {
   title: "Playground/Demo",
@@ -11,64 +20,53 @@ export default {
 export const Demo = () => {
   return (
     <div className="s-flex s-h-full s-w-full s-cursor-pointer s-flex-col s-gap-2">
-      <div className="s-group s-flex s-max-w-[200px] s-items-center s-gap-2 s-bg-muted-background s-p-4">
-        <Avatar
-          size="sm"
-          visual="https://lh3.googleusercontent.com/a/ACg8ocItxZ3wFv94own6Sh86W9zOFy4RA_L9A0NtNz2sM0uftazvbhU=s96-c"
-          clickable
-        />
-        <div className="s-flex s-flex-col s-items-start">
-          <span
-            className={cn(
-              "s-heading-sm s-transition-colors s-duration-200",
-              "s-text-foreground group-hover:s-text-primary-600 group-active:s-text-primary-950 dark:s-text-foreground-night dark:group-hover:s-text-muted-foreground-night dark:group-active:s-text-primary-950-night"
-            )}
-          >
-            Edouard
-          </span>
-          <span className="-s-mt-1 s-text-sm s-text-muted-foreground dark:s-text-muted-foreground-night">
-            Dust
-          </span>
-        </div>
-        <Icon
-          visual={ChevronDownIcon}
-          className="s-text-muted-foreground group-hover:s-text-primary-400 group-active:s-text-primary-950 dark:s-text-foreground-night dark:group-hover:s-text-muted-foreground-night dark:group-active:s-text-primary-950-night"
-        />
-      </div>
-      <div className="s-flex s-gap-3">
-        <FlexSplitButton
-          label="Send"
-          variant={"highlight"}
-          icon={ArrowUpIcon}
-          splitAction={
-            <Button size="mini" variant={"highlight"} icon={ChevronDownIcon} />
-          }
-        />
-        <FlexSplitButton
-          label="Send"
-          variant={"primary"}
-          icon={ArrowUpIcon}
-          splitAction={
-            <Button size="mini" variant={"primary"} icon={ChevronDownIcon} />
-          }
-        />
-        <FlexSplitButton
-          label="Send"
-          variant={"outline"}
-          icon={ArrowUpIcon}
-          splitAction={
-            <Button size="mini" variant={"outline"} icon={ChevronDownIcon} />
-          }
-        />
-        <FlexSplitButton
-          label="Send"
-          variant={"ghost"}
-          icon={ArrowUpIcon}
-          splitAction={
-            <Button size="mini" variant={"ghost"} icon={ChevronDownIcon} />
-          }
-        />
-      </div>
+      <Page.Layout direction="horizontal">
+        <Page.Vertical sizing="grow" align="stretch" gap="xs">
+          <Label>Theme</Label>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="outline"
+                icon={LightModeIcon}
+                label="light"
+                isSelect
+                className="s-w-fit"
+              />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem icon={ActionSunIcon} label="Light" />
+              <DropdownMenuItem icon={ActionMoonIcon} label="Dark" />
+              <DropdownMenuItem icon={LightModeIcon} label="System" />
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </Page.Vertical>
+        <Page.Vertical sizing="grow" align="stretch" gap="xs">
+          <Label>Keyboard Shortcuts</Label>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <div className="s-copy-sm s-flex s-items-center s-gap-2">
+                Send message
+                <Button
+                  variant="outline"
+                  label="Cmd+Enter (⌘+↵)"
+                  isSelect
+                  className="s-w-fit"
+                />
+              </div>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem>
+                Send message when pressing Enter
+                <DropdownMenuShortcut>↵</DropdownMenuShortcut>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                Send message when pressing Cmd+Enter
+                <DropdownMenuShortcut>⌘ + ↵</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </Page.Vertical>
+      </Page.Layout>
     </div>
   );
 };