sdaia-ui 1.0.1

package/src/icons/BellCircleIcon.tsx

@@ -0,0 +1,33 @@
+import type { SVGProps } from 'react';
+
+/**
+ * BellCircleIcon — 60 × 60 notification badge.
+ * Pre-colored filled-green circle with a white bell glyph, sourced verbatim
+ * from the Figma "notification-02" illustration used by the NotificationPopup
+ * alert state. Colors are intentional (semantic) and do not follow
+ * `currentColor`. Distinct from the simple `BellIcon` glyph.
+ */
+export function BellCircleIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      viewBox="0 0 60 60"
+      fill="none"
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        d="M0 30C0 13.4315 13.4315 0 30 0C46.5685 0 60 13.4315 60 30C60 46.5685 46.5685 60 30 60C13.4315 60 0 46.5685 0 30Z"
+        fill="#1B8354"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M30.0004 17.457C35.1987 17.4572 39.4174 21.6476 39.4174 26.8223C39.4175 28.026 39.4991 28.9344 40.0541 29.751C40.1312 29.8628 40.2334 30.0033 40.3451 30.1562C40.5393 30.4221 40.762 30.7271 40.931 30.9912C41.2295 31.4576 41.5212 32.0204 41.6215 32.6758C41.9484 34.8139 40.4411 36.198 38.9398 36.8184C37.964 37.2216 36.9192 37.5493 35.8314 37.8037C35.8388 37.9252 35.8273 38.0498 35.7943 38.1738C35.1211 40.7072 32.7647 42.541 30.0004 42.541C27.2361 42.541 24.8797 40.7072 24.2064 38.1738C24.1736 38.0501 24.1611 37.9258 24.1683 37.8047C23.0808 37.5503 22.0366 37.2215 21.0609 36.8184C19.5596 36.198 18.0514 34.8139 18.3783 32.6758C18.4785 32.0204 18.7703 31.4576 19.0687 30.9912C19.2378 30.7269 19.4613 30.4222 19.6556 30.1562C19.7675 30.0032 19.8695 29.8628 19.9467 29.751C20.5016 28.9345 20.5823 28.0258 20.5824 26.8223C20.5824 21.6476 24.8019 17.457 30.0004 17.457ZM33.2719 38.2559C31.1189 38.5216 28.8809 38.5217 26.7279 38.2559C27.3192 39.3997 28.549 40.208 30.0004 40.208C31.4516 40.208 32.6805 39.3994 33.2719 38.2559Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/src/icons/BellIcon.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+/**
+ * Alert icons — colocated inside the package so the component has no
+ * dependency on the host app's `/public` folder. All icons use
+ * `currentColor` so state styling is controlled by the parent's text color.
+ */
+
+type IconProps = React.SVGProps<SVGSVGElement>;
+
+const base: IconProps = {
+  xmlns: 'http://www.w3.org/2000/svg',
+  width: 20,
+  height: 20,
+  viewBox: '0 0 20 20',
+  fill: 'none',
+  'aria-hidden': true,
+};
+
+export const BellIcon = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path
+      fill="currentColor"
+      d="M10 2.083c.345 0 .625.28.625.625v.417A5.21 5.21 0 0 1 15.208 8.333V11.6l1.19 2.381a.625.625 0 0 1-.56.902H4.163a.625.625 0 0 1-.56-.902l1.19-2.381V8.333a5.21 5.21 0 0 1 4.583-5.208v-.417c0-.345.28-.625.625-.625ZM10 4.375a3.958 3.958 0 0 0-3.958 3.958v3.42l-.794 1.58h9.504l-.794-1.58v-3.42A3.958 3.958 0 0 0 10 4.375Zm-1.667 12.708a.625.625 0 0 1 .625-.625h2.084a.625.625 0 1 1 0 1.25H8.958a.625.625 0 0 1-.625-.625Z"
+    />
+  </svg>
+);

package/src/icons/BoldIcon.tsx

@@ -0,0 +1,33 @@
+import type { SVGProps } from 'react';
+
+/* ── 24×24 toolbar icons ────────────────────────────────────── */
+
+/**
+ * Undo icon (undo-03) — 24×24 px.
+ * Figma: node inside Rich Text Editor 6259:88649
+ */
+
+export function BoldIcon({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      className={className}
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.33203 2.16699C3.33203 1.61471 3.77975 1.16699 4.33203 1.16699H9.33203C11.1729 1.16699 12.6654 2.65951 12.6654 4.50033C12.6654 5.51483 12.2122 6.42318 11.4948 7.03853C12.5747 7.6174 13.332 8.7522 13.332 10.0837C13.332 12.0247 11.7729 13.5837 9.83203 13.5837H4.33203C3.77975 13.5837 3.33203 13.1359 3.33203 12.5837V2.16699ZM5.33203 7.25033V11.5837H9.83203C10.6604 11.5837 11.332 10.9121 11.332 10.0837C11.332 9.25524 10.6604 8.58366 9.83203 8.58366H5.99983V7.25033H5.33203ZM5.33203 7.25033H9.33203C10.0684 7.25033 10.6654 6.65336 10.6654 5.91699V4.50033C10.6654 3.76395 10.0684 3.16699 9.33203 3.16699H5.33203V7.25033Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Italic icon (text-italic) — 24×24 px.
+ * Figma: node inside Rich Text Editor 6259:88649
+ */

package/src/icons/CalendarIcon.tsx

@@ -0,0 +1,35 @@
+import type { SVGProps } from 'react';
+
+/** Calendar — outlined calendar grid, 24×24 viewport. */
+export function CalendarIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      aria-hidden="true"
+      {...props}
+    >
+      <rect
+        x="3"
+        y="4"
+        width="18"
+        height="18"
+        rx="2"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16 2v4M8 2v4M3 10h18"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/ChartsIcon.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import type { SVGProps } from 'react';
+
+/** Charts / radar icon — 16×16 viewport. */
+export function ChartsIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      viewBox="0 0 16 16"
+      fill="none"
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.99998 0.833984C8.54065 0.833984 9.02018 1.01338 9.53038 1.31083C10.0232 1.59817 10.5864 2.02163 11.2901 2.5508L12.6654 3.58492C13.311 4.0703 13.8286 4.45954 14.2114 4.82037C14.6078 5.19399 14.8968 5.57037 15.051 6.04527C15.2054 6.52061 15.1918 6.99347 15.0888 7.52559C14.9895 8.03866 14.797 8.65185 14.5573 9.41518L13.9336 11.402C13.6808 12.207 13.478 12.8528 13.2536 13.3543C13.0209 13.8742 12.7453 14.2863 12.3205 14.5948C11.8964 14.9027 11.417 15.0395 10.8463 15.1045C10.2944 15.1673 9.60864 15.1673 8.75157 15.1673H7.24835C6.3913 15.1673 5.7056 15.1673 5.15375 15.1045C4.58296 15.0395 4.10359 14.9027 3.67947 14.5948C3.25466 14.2863 2.97905 13.8742 2.74632 13.3543C2.52188 12.8528 2.31914 12.207 2.06639 11.4019L1.44269 9.41532C1.20301 8.65192 1.01048 8.03873 0.911155 7.52559C0.808152 6.99347 0.794593 6.52061 0.948956 6.04527C1.10317 5.57037 1.3922 5.19399 1.78856 4.82037C2.17134 4.45955 2.689 4.07029 3.33454 3.58492L4.70986 2.5508L4.91685 2.39524C5.52555 1.93829 6.02605 1.56943 6.46959 1.31083C6.97975 1.01339 7.45932 0.833984 7.99998 0.833984ZM9.47833 11.573C9.42027 11.5898 9.36118 11.6041 9.30125 11.6165C9.07725 11.663 8.80426 11.6901 8.49066 11.7214L8.05483 11.7648L7.85724 11.7843C7.53578 11.8155 7.25405 11.8387 7.0154 11.8331C6.73749 11.8266 6.46862 11.7813 6.21881 11.6363L4.87934 14.0474C4.9937 14.0734 5.12168 14.0943 5.26695 14.1109C5.75564 14.1666 6.38438 14.1673 7.27863 14.1673H8.7213C9.61556 14.1673 10.2443 14.1666 10.7331 14.1109C10.985 14.0822 11.1849 14.0402 11.3519 13.9819L9.47833 11.573ZM1.83755 6.92814C1.84522 7.04901 1.86342 7.1831 1.89293 7.33551C1.98022 7.78651 2.15499 8.34578 2.40566 9.14418L3.01121 11.0729C3.27537 11.9143 3.46133 12.504 3.65908 12.9458C3.77608 13.2072 3.88979 13.399 4.01329 13.5471L5.5539 10.774C5.45897 10.5269 5.37428 10.2248 5.27794 9.88118L5.08234 9.18365L5.0259 8.98147C4.95335 8.71926 4.89298 8.48618 4.86086 8.28239C4.84696 8.19412 4.83735 8.10604 4.83433 8.01784L1.83755 6.92814ZM14.16 6.96193L11.1652 8.32324C11.1602 8.43751 11.1428 8.55065 11.1183 8.66372C11.0653 8.90718 10.9683 9.19178 10.8568 9.51898L10.7016 9.97459C10.6009 10.2701 10.513 10.5283 10.4171 10.7348C10.3775 10.8198 10.3341 10.902 10.284 10.9801L12.1282 13.3512C12.1998 13.2378 12.2698 13.1047 12.3408 12.9458C12.5386 12.504 12.7246 11.9143 12.9887 11.0729L13.5943 9.14418C13.8449 8.34578 14.0197 7.78651 14.107 7.33551C14.1338 7.19716 14.1512 7.0739 14.16 6.96193ZM7.97044 6.501C7.91444 6.4984 7.83899 6.50859 7.68679 6.58099C7.52332 6.65878 7.32178 6.78269 7.00751 6.97727L6.76516 7.12734C6.42765 7.33632 6.21134 7.47118 6.05947 7.59151C5.9177 7.70384 5.87615 7.77038 5.85573 7.82245C5.83545 7.87418 5.82082 7.95011 5.84865 8.12671C5.87855 8.31644 5.94605 8.55999 6.05263 8.94012L6.23273 9.58238C6.35184 10.0071 6.42951 10.2807 6.5128 10.4788C6.59053 10.6635 6.65054 10.7247 6.70213 10.7597C6.75424 10.795 6.83502 10.8287 7.03884 10.8334C7.25626 10.8385 7.5427 10.8109 7.98517 10.7668L8.36725 10.7287C8.71198 10.6944 8.9321 10.6718 9.09837 10.6373C9.25324 10.6052 9.3162 10.571 9.357 10.5388C9.39753 10.5068 9.4446 10.4545 9.5102 10.3134C9.58093 10.1612 9.65205 9.95439 9.76292 9.62893L9.90172 9.22172C10.0242 8.86199 10.1018 8.63193 10.1411 8.45119C10.1776 8.28313 10.1686 8.20865 10.1528 8.15719C10.1368 8.10545 10.1019 8.03811 9.97618 7.91831C9.84124 7.78985 9.64679 7.64172 9.34239 7.41132L8.88377 7.06431C8.5893 6.84142 8.40046 6.6994 8.24506 6.60683C8.10052 6.5207 8.02644 6.5036 7.97044 6.501ZM8.49998 1.92285V5.61562C8.58825 5.65307 8.67339 5.69798 8.75686 5.74774C8.96559 5.87208 9.19865 6.04848 9.46678 6.25142L9.9669 6.62994C10.2441 6.8397 10.4849 7.02184 10.6658 7.19415C10.7261 7.2516 10.7834 7.31119 10.8362 7.37425L13.9092 5.97748C13.8166 5.8448 13.6925 5.70547 13.5255 5.54803C13.1881 5.22993 12.7154 4.87364 12.0409 4.3665L10.7141 3.36879C9.97965 2.81659 9.46292 2.42906 9.02672 2.17472C8.82858 2.05923 8.65705 1.97735 8.49998 1.92285ZM7.49998 1.92285C7.34292 1.97735 7.17134 2.05923 6.97325 2.17472C6.53702 2.42906 6.0203 2.81659 5.28591 3.36879L3.95901 4.3665C3.28453 4.87364 2.81193 5.22993 2.47447 5.54803C2.31456 5.69877 2.19398 5.83291 2.10272 5.96051L5.15875 7.07178C5.24204 6.97452 5.33684 6.88823 5.43842 6.80774C5.60745 6.6738 5.82076 6.53685 6.06521 6.3847L6.21552 6.29148L6.23871 6.27712L6.4811 6.12705L6.50287 6.11355C6.78905 5.93634 7.03774 5.78236 7.25722 5.67796C7.33692 5.64006 7.41745 5.60626 7.49998 5.57859V1.92285Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/icons/CheckCircleIcon.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+/**
+ * Alert icons — colocated inside the package so the component has no
+ * dependency on the host app's `/public` folder. All icons use
+ * `currentColor` so state styling is controlled by the parent's text color.
+ */
+
+type IconProps = React.SVGProps<SVGSVGElement>;
+
+const base: IconProps = {
+  xmlns: 'http://www.w3.org/2000/svg',
+  width: 20,
+  height: 20,
+  viewBox: '0 0 20 20',
+  fill: 'none',
+  'aria-hidden': true,
+};
+
+export const CheckCircleIcon = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M10 1.042A8.958 8.958 0 1 1 10 18.958 8.958 8.958 0 0 1 10 1.042Zm0 1.25a7.708 7.708 0 1 0 0 15.416 7.708 7.708 0 0 0 0-15.416Zm3.725 4.85a.625.625 0 0 1 .05.834l-.05.057-5 5a.625.625 0 0 1-.833.05l-.058-.05-2.5-2.5a.625.625 0 0 1 .834-.933l.057.05L8.333 11.7l4.559-4.558a.625.625 0 0 1 .833 0Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);

package/src/icons/ChevronDownIcon.tsx

@@ -0,0 +1,30 @@
+/**
+ * Inline SVG icons used exclusively by the Filtration component.
+ * All icons use `width="100%" height="100%"` — the wrapper controls sizing.
+ */
+
+/** Funnel / filter icon — 24×24 viewport (Figma filter-01). */
+
+export function ChevronDownIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      viewBox="0 0 20 20"
+      fill="none"
+      aria-hidden="true"
+      className={className}
+    >
+      <path
+        d="M5 7.5l5 5 5-5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/** X / cancel icon — used as the chip dismiss button (20×20 viewport). */

package/src/icons/ChevronDownSmIcon.tsx

@@ -0,0 +1,34 @@
+import type { SVGProps } from 'react';
+
+/* ── 24×24 toolbar icons ────────────────────────────────────── */
+
+/**
+ * Undo icon (undo-03) — 24×24 px.
+ * Figma: node inside Rich Text Editor 6259:88649
+ */
+
+export function ChevronDownSmIcon({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M3 4.5L6 7.5L9 4.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Chevron down — 16×16 px.
+ * Used inside collapsed group buttons on mobile toolbar.
+ */

package/src/icons/ChevronLeftIcon.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from 'react';
+
+export function ChevronLeftIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        d="M8.46973 6.46973C8.76262 6.17684 9.23738 6.17683 9.53027 6.46973C9.82316 6.76262 9.82317 7.23738 9.53027 7.53027L5.81055 11.25H20C20.4141 11.25 20.7499 11.5859 20.75 12C20.75 12.4142 20.4142 12.75 20 12.75H5.81055L9.53027 16.4697C9.82314 16.7626 9.82314 17.2374 9.53027 17.5303C9.23739 17.8232 8.76262 17.8231 8.46973 17.5303L3.46973 12.5303C3.43824 12.4988 3.41046 12.4649 3.38574 12.4297C3.35449 12.3851 3.3277 12.3371 3.30664 12.2861C3.28603 12.2361 3.27106 12.1844 3.26172 12.1318C3.25415 12.0891 3.25 12.0449 3.25 12C3.25001 11.955 3.25411 11.911 3.26172 11.8682C3.27081 11.817 3.28493 11.7665 3.30469 11.7178L3.30859 11.708C3.32018 11.6806 3.33595 11.6555 3.35059 11.6299C3.38303 11.573 3.42121 11.5182 3.46973 11.4697L8.46973 6.46973Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/icons/ChevronRightIcon.tsx

@@ -0,0 +1,36 @@
+import type { SVGProps } from 'react';
+
+/*
+ * NavItem inline icons.
+ *
+ * All icons:
+ *   - width="100%" height="100%" — size set by the wrapping span's size-icon-md class
+ *   - fill="currentColor"        — colour inherited from parent (dark mode, disabled, hover)
+ *   - aria-hidden="true"         — purely decorative; the item label provides the accessible name
+ *
+ * The trailing chevron uses a filled evenodd path from Figma (arrow-right-01).
+ * In RTL the wrapping span receives rtl:-scale-x-100, which mirrors it to point left (←).
+ */
+
+/** Right-pointing chevron (›). Mirrors to left (‹) in RTL via rtl:-scale-x-100 on the wrapper. */
+
+export function ChevronRightIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      viewBox="0 0 20 20"
+      fill="none"
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.05806 4.55805C7.30213 4.31398 7.69875 4.31399 7.94282 4.55805L12.9428 9.55805C13.1869 9.80213 13.1869 10.1987 12.9428 10.4428L7.94282 15.4428C7.69875 15.6869 7.30214 15.6869 7.05806 15.4428C6.81398 15.1987 6.81398 14.8021 7.05806 14.558L11.6167 10.0004L7.05806 5.44281C6.81401 5.19874 6.81401 4.80212 7.05806 4.55805Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/icons/ClearIcon.tsx

@@ -0,0 +1,34 @@
+import type { SVGProps } from 'react';
+
+/**
+ * Search icon (search-01) — 20 × 20 px viewBox.
+ * Used as the leading affordance in the input and as the icon for suggestion items.
+ * Figma: search-01 referenced inside Autocomplete node 6183:86218
+ */
+
+export function ClearIcon({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M12 4L4 12M4 4L12 12"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Clock icon (clock-02, Style=Stroke Type=Rounded) — 20 × 20 px viewBox.
+ * Used as the icon for "Recents" dropdown items.
+ * Figma: clock icon referenced inside Open state node 6183:86399
+ */

package/src/icons/ClockIcon.tsx

@@ -0,0 +1,34 @@
+import type { SVGProps } from 'react';
+
+/**
+ * Search icon (search-01) — 20 × 20 px viewBox.
+ * Used as the leading affordance in the input and as the icon for suggestion items.
+ * Figma: search-01 referenced inside Autocomplete node 6183:86218
+ */
+
+export function ClockIcon({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M10 5.5V10L13 13M10 17.5C6.134 17.5 3 14.366 3 10.5C3 6.634 6.134 3.5 10 3.5C13.866 3.5 17 6.634 17 10.5C17 14.366 13.866 17.5 10 17.5Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Help-circle icon — 16 × 16 px viewBox.
+ * Used alongside helper text below the input.
+ * Figma node: help-circle (2078:19165)
+ */

package/src/icons/CloseIcon.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+/**
+ * Alert icons — colocated inside the package so the component has no
+ * dependency on the host app's `/public` folder. All icons use
+ * `currentColor` so state styling is controlled by the parent's text color.
+ */
+
+type IconProps = React.SVGProps<SVGSVGElement>;
+
+const base: IconProps = {
+  xmlns: 'http://www.w3.org/2000/svg',
+  width: 20,
+  height: 20,
+  viewBox: '0 0 20 20',
+  fill: 'none',
+  'aria-hidden': true,
+};
+
+export const CloseIcon = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M3.725 3.725a.625.625 0 0 1 .884 0L10 9.116l5.392-5.391a.625.625 0 0 1 .884.884L10.884 10l5.392 5.392a.625.625 0 1 1-.884.884L10 10.884 4.61 16.276a.625.625 0 1 1-.884-.884L9.116 10 3.725 4.61a.625.625 0 0 1 0-.884Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);

package/src/icons/CloudUploadIcon.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+function CloudUploadIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width={32}
+      height={32}
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M16 16.333c.344 0 .641.12.856.234.223.12.43.274.615.431.367.313.735.715 1.063 1.103.306.361.603.74.857 1.063l.063.08c.284.362.479.604.597.726a1 1 0 01-1.435 1.393c-.21-.215-.479-.557-.735-.883l-.06-.077a35.007 35.007 0 00-.813-1.01l-.008-.01V28a1 1 0 11-2 0v-8.616l-.008.01c-.28.331-.556.682-.813 1.01l-.06.076c-.256.326-.526.668-.735.883a1 1 0 01-1.435-1.393c.118-.122.313-.364.597-.726l.063-.08c.254-.323.55-.702.857-1.063.328-.388.696-.79 1.063-1.103.184-.157.392-.311.615-.43.215-.116.512-.235.856-.235zM16 3c4.517 0 8.191 3.598 8.33 8.085a7.009 7.009 0 016.003 6.94c0 3.608-2.72 6.581-6.223 6.97a1 1 0 01-.22-1.99 5.008 5.008 0 004.443-4.98 5.008 5.008 0 00-4.18-4.943 8.327 8.327 0 01-1.724 3.576 1 1 0 11-1.543-1.272 6.321 6.321 0 001.447-4.04C22.333 7.84 19.496 5 16 5a6.34 6.34 0 00-6.118 4.698 7.627 7.627 0 014.053 1.518 1 1 0 01-1.203 1.598 5.63 5.63 0 00-3.943-1.109 5.675 5.675 0 00-5.122 5.652 5.678 5.678 0 004.532 5.566 1 1 0 01-.398 1.96 7.678 7.678 0 01-6.134-7.526 7.678 7.678 0 016.137-7.525C8.515 5.946 11.913 3 16 3z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+export { CloudUploadIcon }

package/src/icons/CodeSnippetChevronDownIcon.tsx

@@ -0,0 +1,25 @@
+import { SVGProps } from "react";
+
+/** Default file header icon — stroke star (Figma `star` / favorite). */
+
+export function CodeSnippetChevronDownIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={20}
+      height={20}
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden
+      {...props}
+    >
+      <path
+        d="M6 10l6 6 6-6"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/CodeSnippetCopyIcon.tsx

@@ -0,0 +1,24 @@
+import { SVGProps } from "react";
+
+/** Default file header icon — stroke star (Figma `star` / favorite). */
+
+export function CodeSnippetCopyIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+      {...props}
+    >
+      <path
+        d="M15.002 1.258a2.75 2.75 0 012.748 2.75v4.247l2.252.002a2.75 2.75 0 012.748 2.749v8.993a2.75 2.75 0 01-2.75 2.75h-9a2.75 2.75 0 01-2.75-2.75v-2.25H4a2.75 2.75 0 01-2.75-2.75V4a2.75 2.75 0 012.752-2.75l11 .008zM11.001 9.75c-.69 0-1.251.56-1.251 1.25v8.999c0 .69.56 1.25 1.25 1.25h9c.69 0 1.25-.56 1.25-1.25v-8.993c0-.69-.56-1.249-1.249-1.25l-9-.006zm-7-7c-.69 0-1.251.56-1.251 1.25v10.999c0 .69.56 1.25 1.25 1.25h4.25V11a2.75 2.75 0 012.752-2.75l5.248.004V4.008c0-.69-.56-1.25-1.249-1.25l-11-.008z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+/** Chevron down for "Show more". */

package/src/icons/CodeSnippetStarIcon.tsx

@@ -0,0 +1,25 @@
+import { SVGProps } from "react";
+
+/** Default file header icon — stroke star (Figma `star` / favorite). */
+
+export function CodeSnippetStarIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={20}
+      height={20}
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden
+    >
+      <path
+        d="M12 3.5l2.47 5.01L20 9.27l-4 3.9.94 5.51L12 15.9l-4.94 2.78.94-5.51-4-3.9 5.53-.76L12 3.5z"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/** Copy — duplicate squares (Figma `copy-01`). */

package/src/icons/ColorSquareIcon.tsx

@@ -0,0 +1,42 @@
+import type { SVGProps } from 'react';
+
+/* ── 24×24 toolbar icons ────────────────────────────────────── */
+
+/**
+ * Undo icon (undo-03) — 24×24 px.
+ * Figma: node inside Rich Text Editor 6259:88649
+ */
+
+export function ColorSquareIcon({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      className={className}
+      {...props}
+    >
+      <rect
+        x="3"
+        y="3"
+        width="18"
+        height="18"
+        rx="2"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <rect
+        x="3"
+        y="16"
+        width="18"
+        height="5"
+        rx="0"
+        fill="currentColor"
+        opacity="0.3"
+      />
+    </svg>
+  );
+}

package/src/icons/ComponentsIcon.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import type { SVGProps } from 'react';
+
+/** Components / archive icon — 16×16 viewport. */
+export function ComponentsIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      viewBox="0 0 16 16"
+      fill="none"
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.02051 1.5C4.46943 1.49999 4.83737 1.50004 5.13574 1.52441C5.44439 1.54966 5.72304 1.6037 5.9834 1.73633C6.391 1.94401 6.72293 2.27505 6.93066 2.68262C7.00154 2.82173 7.04849 2.96679 7.08203 3.11816C7.19687 2.90586 7.34717 2.71262 7.52832 2.54883C7.74238 2.35538 7.99394 2.23268 8.28027 2.12988C8.55681 2.03061 8.90478 1.93741 9.3291 1.82324L9.36914 1.8125C9.79345 1.69833 10.1417 1.60464 10.4307 1.55176C10.7298 1.49702 11.0089 1.47693 11.291 1.53711C11.7318 1.63119 12.1315 1.86255 12.4326 2.19824C12.6253 2.41309 12.7473 2.66582 12.8496 2.95313C12.9484 3.23062 13.0416 3.57965 13.1553 4.00586L14.8564 10.3789C14.9702 10.8051 15.0626 11.1544 15.1152 11.4443C15.1697 11.7444 15.1896 12.0243 15.1299 12.3066C15.0364 12.7479 14.8061 13.1488 14.4717 13.4512C14.2576 13.6446 14.0061 13.7673 13.7197 13.8701C13.4432 13.9694 13.0952 14.0626 12.6709 14.1768L12.6309 14.1875C12.2065 14.3017 11.8583 14.3954 11.5693 14.4482C11.2702 14.503 10.9911 14.5231 10.709 14.4629C10.2682 14.3688 9.86847 14.1374 9.56738 13.8018C9.37474 13.5869 9.25267 13.3342 9.15039 13.0469C9.05161 12.7694 8.95845 12.4204 8.84473 11.9941L7.16699 5.70801V11.3545C7.167 11.8033 7.16695 12.1704 7.14258 12.4688C7.11734 12.7776 7.06339 13.0569 6.93066 13.3174C6.72293 13.7249 6.391 14.056 5.9834 14.2637C5.72304 14.3963 5.44439 14.4503 5.13574 14.4756C4.83737 14.5 4.46942 14.5 4.02051 14.5H3.97949C3.53058 14.5 3.16263 14.5 2.86426 14.4756C2.55561 14.4503 2.27696 14.3963 2.0166 14.2637C1.609 14.056 1.27707 13.7249 1.06934 13.3174C0.93661 13.0569 0.882656 12.7776 0.857422 12.4688C0.833048 12.1704 0.833002 11.8033 0.833008 11.3545V4.64551C0.833002 4.19669 0.833048 3.82958 0.857422 3.53125C0.882656 3.22242 0.93661 2.94311 1.06934 2.68262C1.27707 2.27505 1.609 1.94401 2.0166 1.73633C2.27696 1.6037 2.55561 1.54966 2.86426 1.52441C3.16263 1.50004 3.53057 1.49999 3.97949 1.5H4.02051ZM1.83301 11.333C1.83301 11.808 1.83383 12.1349 1.85449 12.3877C1.87468 12.6344 1.91204 12.7673 1.96094 12.8633C2.0728 13.0826 2.25132 13.2613 2.4707 13.373C2.5667 13.4219 2.6996 13.4584 2.94629 13.4785C3.1991 13.4992 3.52516 13.5 4 13.5C4.47484 13.5 4.8009 13.4992 5.05371 13.4785C5.3004 13.4584 5.4333 13.4219 5.5293 13.373C5.74868 13.2613 5.9272 13.0826 6.03906 12.8633C6.08796 12.7673 6.12532 12.6344 6.14551 12.3877C6.16617 12.1349 6.16699 11.808 6.16699 11.333V5.16699H1.83301V11.333ZM8.22266 5.78809L9.80566 11.7168C9.92601 12.1678 10.0083 12.4774 10.0918 12.7119C10.1733 12.9409 10.242 13.0562 10.3115 13.1338C10.4716 13.3123 10.6837 13.4355 10.917 13.4854C11.018 13.5069 11.1516 13.5084 11.3896 13.4648C11.6334 13.4202 11.9413 13.3377 12.3906 13.2168C12.8401 13.0959 13.1484 13.0125 13.3818 12.9287C13.6093 12.847 13.7237 12.7786 13.8008 12.709C13.9785 12.5483 14.1014 12.3351 14.1514 12.0996C14.1731 11.9971 14.1752 11.8622 14.1318 11.623C14.0873 11.3779 14.0052 11.0675 13.8848 10.6162L12.2637 4.54395L8.22266 5.78809ZM4.00586 10.667C4.37394 10.667 4.67268 10.965 4.67285 11.333C4.67285 11.7012 4.37405 12 4.00586 12H4C3.63181 12 3.33301 11.7012 3.33301 11.333C3.33318 10.965 3.63192 10.667 4 10.667H4.00586ZM11.6875 10.4824C12.043 10.3872 12.4084 10.5977 12.5039 10.9531C12.5992 11.3088 12.3879 11.6752 12.0322 11.7705L12.0264 11.7715C11.6708 11.8665 11.3052 11.6553 11.21 11.2998C11.115 10.9443 11.3261 10.5787 11.6816 10.4834L11.6875 10.4824ZM11.083 2.51465C10.982 2.49309 10.8484 2.49159 10.6104 2.53516C10.3666 2.57977 10.0587 2.66232 9.60938 2.7832C9.15988 2.90415 8.85155 2.98751 8.61816 3.07129C8.39046 3.15304 8.27529 3.22135 8.19824 3.29102C8.02073 3.45164 7.89857 3.66503 7.84863 3.90039C7.82694 4.00287 7.82479 4.13783 7.86816 4.37695C7.89114 4.50355 7.9246 4.64769 7.96777 4.81934L11.998 3.58008C11.9658 3.47092 11.9388 3.37392 11.9082 3.28809C11.8267 3.05913 11.758 2.94379 11.6885 2.86621C11.5284 2.68767 11.3163 2.56453 11.083 2.51465ZM4 2.5C3.52516 2.5 3.1991 2.50084 2.94629 2.52148C2.6996 2.54164 2.5667 2.57812 2.4707 2.62695C2.25132 2.73874 2.0728 2.91739 1.96094 3.13672C1.91204 3.23269 1.87468 3.36558 1.85449 3.6123C1.84203 3.76485 1.83703 3.9445 1.83496 4.16699H6.16504C6.16297 3.9445 6.15797 3.76485 6.14551 3.6123C6.12532 3.36558 6.08796 3.23269 6.03906 3.13672C5.9272 2.91739 5.74868 2.73874 5.5293 2.62695C5.4333 2.57812 5.30039 2.54164 5.05371 2.52148C4.8009 2.50084 4.47484 2.5 4 2.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}