sdaia-ui 1.0.1

package/src/icons/AlertCircleWarningIcon.tsx

@@ -0,0 +1,37 @@
+import type { SVGProps } from 'react';
+
+/**
+ * AlertCircleWarningIcon — 64 × 64 warning badge.
+ * Pre-colored filled-orange circle with a light-amber stroke and a white
+ * exclamation glyph, sourced verbatim from the Figma warning illustration
+ * used by the NotificationPopup warning state. Colors are intentional
+ * (semantic) and do not follow `currentColor`.
+ */
+export function AlertCircleWarningIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      viewBox="0 0 64 64"
+      fill="none"
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        d="M32 0.5C49.397 0.5 63.5 14.603 63.5 32C63.5 49.397 49.397 63.5 32 63.5C14.603 63.5 0.5 49.397 0.5 32C0.5 14.603 14.603 0.5 32 0.5Z"
+        fill="#DC6803"
+      />
+      <path
+        d="M32 0.5C49.397 0.5 63.5 14.603 63.5 32C63.5 49.397 49.397 63.5 32 63.5C14.603 63.5 0.5 49.397 0.5 32C0.5 14.603 14.603 0.5 32 0.5Z"
+        stroke="#FEDF89"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M32 17.666C39.9161 17.666 46.3333 24.0833 46.3333 31.9993C46.3333 39.9155 39.9161 46.3327 32 46.3327C24.0839 46.3327 17.6667 39.9155 17.6667 31.9993C17.6667 24.0833 24.0839 17.666 32 17.666ZM32.006 35.9993C31.2609 35.9993 30.6667 36.5963 30.6667 37.3327C30.6667 38.0691 31.2609 38.666 31.994 38.666C32.7391 38.666 33.3333 38.0691 33.3333 37.3327C33.3333 36.5963 32.7391 35.9993 32.006 35.9993ZM32 25.3327C31.2636 25.3327 30.6667 25.9296 30.6667 26.666V31.9993C30.6667 32.7357 31.2636 33.3327 32 33.3327C32.7364 33.3327 33.3333 32.7357 33.3333 31.9993V26.666C33.3333 25.9296 32.7364 25.3327 32 25.3327Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/src/icons/AlertTriangleIcon.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 AlertTriangleIcon = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path
+      fill="currentColor"
+      d="M10 2.5c.542 0 1.042.283 1.325.742l6.6 10.833a1.55 1.55 0 0 1-1.325 2.342H3.4a1.55 1.55 0 0 1-1.325-2.342l6.6-10.833A1.55 1.55 0 0 1 10 2.5Zm0 1.25a.3.3 0 0 0-.258.142L3.142 14.725a.3.3 0 0 0 .258.442h13.2a.3.3 0 0 0 .258-.442L10.258 3.892A.3.3 0 0 0 10 3.75Zm.001 8.75a.833.833 0 1 1 0 1.666h-.008a.833.833 0 0 1 0-1.666h.008ZM10 6.667c.345 0 .625.28.625.625v3.333a.625.625 0 1 1-1.25 0V7.292c0-.345.28-.625.625-.625Z"
+    />
+  </svg>
+);

package/src/icons/AlignCenterIcon.tsx

@@ -0,0 +1,31 @@
+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 AlignCenterIcon({ 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}
+    >
+      <path
+        d="M16 20.25C16.4142 20.25 16.75 20.5858 16.75 21C16.75 21.4142 16.4142 21.75 16 21.75H8C7.58579 21.75 7.25 21.4142 7.25 21C7.25 20.5858 7.58579 20.25 8 20.25H16ZM21 14.25C21.4142 14.25 21.75 14.5858 21.75 15C21.75 15.4142 21.4142 15.75 21 15.75H3C2.58579 15.75 2.25 15.4142 2.25 15C2.25 14.5858 2.58579 14.25 3 14.25H21ZM16 8.25C16.4142 8.25 16.75 8.58579 16.75 9C16.75 9.41421 16.4142 9.75 16 9.75H8C7.58579 9.75 7.25 9.41421 7.25 9C7.25 8.58579 7.58579 8.25 8 8.25H16ZM21 2.25C21.4142 2.25 21.75 2.58579 21.75 3C21.75 3.41421 21.4142 3.75 21 3.75H3C2.58579 3.75 2.25 3.41421 2.25 3C2.25 2.58579 2.58579 2.25 3 2.25H21Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Align right icon (text-align-justify-right) — 24×24 px.
+ * Figma: node inside Rich Text Editor 6259:88649
+ */

package/src/icons/AlignLeftIcon.tsx

@@ -0,0 +1,31 @@
+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 AlignLeftIcon({ 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}
+    >
+      <path
+        d="M21 20.25C21.4142 20.25 21.75 20.5858 21.75 21C21.75 21.4142 21.4142 21.75 21 21.75H3C2.58579 21.75 2.25 21.4142 2.25 21C2.25 20.5858 2.58579 20.25 3 20.25H21ZM21 14.25C21.4142 14.25 21.75 14.5858 21.75 15C21.75 15.4142 21.4142 15.75 21 15.75H3C2.58579 15.75 2.25 15.4142 2.25 15C2.25 14.5858 2.58579 14.25 3 14.25H21ZM11 8.25C11.4142 8.25 11.75 8.58579 11.75 9C11.75 9.41421 11.4142 9.75 11 9.75H3C2.58579 9.75 2.25 9.41421 2.25 9C2.25 8.58579 2.58579 8.25 3 8.25H11ZM11 2.25C11.4142 2.25 11.75 2.58579 11.75 3C11.75 3.41421 11.4142 3.75 11 3.75H3C2.58579 3.75 2.25 3.41421 2.25 3C2.25 2.58579 2.58579 2.25 3 2.25H11Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Align center icon (text-align-center) — 24×24 px.
+ * Figma: node inside Rich Text Editor 6259:88649
+ */

package/src/icons/AlignRightIcon.tsx

@@ -0,0 +1,31 @@
+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 AlignRightIcon({ 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}
+    >
+      <path
+        d="M21 20.25C21.4142 20.25 21.75 20.5858 21.75 21C21.75 21.4142 21.4142 21.75 21 21.75H3C2.58579 21.75 2.25 21.4142 2.25 21C2.25 20.5858 2.58579 20.25 3 20.25H21ZM21 14.25C21.4142 14.25 21.75 14.5858 21.75 15C21.75 15.4142 21.4142 15.75 21 15.75H3C2.58579 15.75 2.25 15.4142 2.25 15C2.25 14.5858 2.58579 14.25 3 14.25H21ZM21 8.25C21.4142 8.25 21.75 8.58579 21.75 9C21.75 9.41421 21.4142 9.75 21 9.75H13C12.5858 9.75 12.25 9.41421 12.25 9C12.25 8.58579 12.5858 8.25 13 8.25H21ZM21 2.25C21.4142 2.25 21.75 2.58579 21.75 3C21.75 3.41421 21.4142 3.75 21 3.75H13C12.5858 3.75 12.25 3.41421 12.25 3C12.25 2.58579 12.5858 2.25 13 2.25H21Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Link icon (link-02) — 24×24 px.
+ * Figma: node inside Rich Text Editor 6259:88649
+ */

package/src/icons/ArrowDownIcon.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+/**
+ * Accordion chevrons — colocated inside the package so the component
+ * has no dependency on the host app's `/public` folder. Both icons
+ * use `currentColor` so the trigger's text color drives the fill.
+ */
+
+type IconProps = React.SVGProps<SVGSVGElement>;
+
+const base: IconProps = {
+  xmlns: 'http://www.w3.org/2000/svg',
+  width: 16,
+  height: 16,
+  viewBox: '0 0 16 16',
+  fill: 'none',
+  'aria-hidden': true,
+};
+
+export const ArrowDownIcon = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path
+      fill="currentColor"
+      d="M4.402 5.704c.082.107.324.428.469.613.29.371.685.864 1.111 1.355.429.494.88.975 1.28 1.328.2.178.376.312.522.4.136.082.217.1.217.1s.078-.018.215-.1c.146-.088.322-.222.523-.4.4-.353.85-.834 1.279-1.328a34.282 34.282 0 0 0 1.579-1.968.5.5 0 0 1 .806.593l-.002.001a35.308 35.308 0 0 1-1.629 2.03c-.439.506-.923 1.025-1.371 1.422a4.75 4.75 0 0 1-.668.506c-.204.123-.462.244-.733.244-.271 0-.529-.12-.733-.244A4.758 4.758 0 0 1 6.6 9.75c-.449-.397-.932-.916-1.372-1.422a35.324 35.324 0 0 1-1.628-2.03l-.001-.001a.5.5 0 0 1 .804-.593Z"
+    />
+  </svg>
+);

package/src/icons/ArrowDownLeft01Icon.tsx

@@ -0,0 +1,32 @@
+import type { SVGProps } from 'react';
+
+/**
+ * ArrowDownLeft01Icon — 12 × 12 diagonal down-left arrow (Figma
+ * `arrow-down-left-01`).
+ *
+ * Pre-colored red (#D92D20) — semantic "decrease" direction used by the
+ * ChartBadge decrease state. The path fill is baked in (it's not a
+ * `currentColor` glyph) because the icon is paired one-to-one with a
+ * specific pill color and its direction is meaningful on its own.
+ *
+ * Uses `width="100%"` / `height="100%"` so the parent `size-icon-*` wrapper
+ * controls the rendered size (ChartBadge uses `size-icon-xs` → 12 px).
+ */
+export function ArrowDownLeft01Icon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      viewBox="0 0 12 12"
+      fill="none"
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        d="M3.00051 9.01543C3.12377 9.12973 3.2864 9.19313 3.42485 9.23301C3.57255 9.27556 3.74149 9.30457 3.91546 9.32489C4.26411 9.3656 4.67293 9.37577 5.05556 9.37247C5.44036 9.36914 5.80895 9.35205 6.08062 9.33587C6.21669 9.32777 6.32899 9.31987 6.40752 9.31397C6.4468 9.31102 6.47766 9.30857 6.49887 9.30684L6.52327 9.30482L6.52976 9.30427L6.53227 9.30405C6.7386 9.28608 6.89129 9.10425 6.87331 8.89792C6.85534 8.69161 6.67324 8.53895 6.46693 8.55691L6.46567 8.55701L6.46021 8.55748L6.43796 8.55932C6.41824 8.56093 6.38895 8.56325 6.35135 8.56608C6.27612 8.57173 6.16773 8.57936 6.03605 8.5872C5.77222 8.60291 5.41711 8.61932 5.04908 8.6225C4.6789 8.62569 4.30578 8.61537 4.00245 8.57995C3.98542 8.57796 3.96873 8.57591 3.95239 8.57379L9.26492 3.26126C9.41136 3.11481 9.41136 2.87738 9.26492 2.73093C9.11847 2.58448 8.88103 2.58448 8.73459 2.73093L3.42083 8.04469C3.41995 8.03751 3.41908 8.03026 3.41822 8.02294C3.38307 7.72303 3.37257 7.34781 3.37545 6.97282C3.37832 6.60017 3.39426 6.23827 3.40958 5.96877C3.41723 5.83426 3.42468 5.72331 3.43021 5.64623C3.43298 5.6077 3.43525 5.57766 3.43683 5.5574L3.43864 5.53452L3.43923 5.52728C3.45637 5.32089 3.30297 5.13968 3.09658 5.12253C2.89019 5.10537 2.70894 5.25902 2.69178 5.46542L2.69159 5.46771L2.69106 5.47432L2.68909 5.49924C2.6874 5.52091 2.68501 5.55245 2.68213 5.59258C2.67638 5.67282 2.66867 5.7875 2.66079 5.92621C2.64505 6.20317 2.62846 6.57812 2.62548 6.96706C2.62251 7.35365 2.63283 7.76475 2.67332 8.11023C2.69349 8.28237 2.7224 8.44961 2.76531 8.59416C2.80442 8.72589 2.87073 8.89508 3.00051 9.01543Z"
+        fill="#D92D20"
+      />
+    </svg>
+  );
+}

package/src/icons/ArrowDownSVG.tsx

@@ -0,0 +1,16 @@
+import * as React from "react"
+const ArrowDownSVG = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M4.402 5.704c.082.107.324.428.469.613.29.371.685.864 1.111 1.355.429.494.88.975 1.28 1.328.2.178.376.312.522.4.136.082.217.1.217.1s.078-.018.215-.1c.146-.088.322-.222.523-.4.4-.353.85-.834 1.279-1.328a34.282 34.282 0 0 0 1.579-1.968.5.5 0 0 1 .806.593l-.002.001a35.308 35.308 0 0 1-1.629 2.03c-.439.506-.923 1.025-1.371 1.422a4.75 4.75 0 0 1-.668.506c-.204.123-.462.244-.733.244-.271 0-.529-.12-.733-.244A4.758 4.758 0 0 1 6.6 9.75c-.449-.397-.932-.916-1.372-1.422a35.324 35.324 0 0 1-1.628-2.03l-.001-.001a.5.5 0 0 1 .804-.593Z"
+    />
+  </svg>
+)
+export default ArrowDownSVG

package/src/icons/ArrowIcon.tsx

@@ -0,0 +1,38 @@
+/**
+ * Inline SVG icons for InputPrefixSuffix.
+ *
+ * All icons:
+ *   - Use `width="100%" height="100%"` — the wrapping span controls the size.
+ *   - Use `currentColor` — the wrapping span's `text-*` class drives the color.
+ *   - Have `aria-hidden="true"` — the parent button's `aria-label` provides the label.
+ *   - Paths extracted from Figma node 5285:77926.
+ *
+ * SVG path sources:
+ *   minus-sign  → Figma node 5285:77212 (horizontal bar, 24×24 vp)
+ *   plus-sign   → Figma node 5285:77252 (cross/plus,    24×24 vp)
+ *   unfold-more → Figma node 5285:80168 (up+down chevrons, 24×24 vp)
+ */
+
+/** Minus (−) — horizontal bar, centered in a 24×24 viewport. */
+
+export function ArrowIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden="true"
+      className={className}
+    >
+      <path
+        d="M8 9l4-4 4 4M8 15l4 4 4-4"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/ArrowLeft01Icon.tsx

@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react';
+
+/** Arrow pointing left — used for "previous" navigation. */
+
+export function ArrowLeft01Icon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      {...props}
+    >
+      <path d="M15 18L9 12L15 6" />
+    </svg>
+  );
+}
+
+/** Arrow pointing right — used for "next" navigation. */

package/src/icons/ArrowLeft02SVG.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const ArrowLeft02SVG = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      d="M3.25 12c0 .374.166.72.323.98.169.282.396.572.646.854.501.567 1.155 1.176 1.79 1.727a44.3 44.3 0 0 0 2.487 2l.043.032.012.009.004.003a.75.75 0 0 0 .89-1.208l-.013-.01-.04-.029a44.174 44.174 0 0 1-2.4-1.93c-.616-.534-1.212-1.093-1.649-1.587a7.24 7.24 0 0 1-.08-.092H20a.75.75 0 0 0 0-1.5H5.266l.077-.09c.437-.493 1.033-1.052 1.649-1.587a42.78 42.78 0 0 1 2.4-1.93l.04-.029.013-.01a.75.75 0 1 0-.89-1.207L8.55 6.4l-.012.009-.043.032a32.481 32.481 0 0 0-.739.565c-.475.37-1.11.88-1.749 1.435-.634.55-1.288 1.16-1.789 1.727-.25.282-.477.572-.646.853-.156.259-.321.603-.323.974"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+export default ArrowLeft02SVG

package/src/icons/ArrowLeftIcon.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import type { SVGProps } from "react";
+
+/** Chevron pointing right. */
+
+export function ArrowLeftIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M12.5 5l-5 5 5 5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/** Chevron pointing down. */

package/src/icons/ArrowRight01Icon.tsx

@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react';
+
+/** Arrow pointing left — used for "previous" navigation. */
+
+export function ArrowRight01Icon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      {...props}
+    >
+      <path d="M9 18L15 12L9 6" />
+    </svg>
+  );
+}
+
+/** Zoom in — plus magnifier. */

package/src/icons/ArrowRight01SVG.tsx

@@ -0,0 +1,16 @@
+import * as React from "react"
+const ArrowRight01SVG = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M5.704 11.597a34.365 34.365 0 0 0 1.969-1.58C8.165 9.59 8.646 9.14 9 8.74c.178-.201.312-.377.4-.523.082-.136.1-.217.1-.217s-.018-.079-.1-.215A3.792 3.792 0 0 0 9 7.26c-.353-.4-.834-.85-1.328-1.279a34.322 34.322 0 0 0-1.968-1.579.5.5 0 0 1 .593-.806l.001.002a35.316 35.316 0 0 1 2.03 1.628c.506.44 1.025.924 1.422 1.372.197.224.375.45.506.668.123.204.244.462.244.733 0 .271-.12.529-.244.733a4.759 4.759 0 0 1-.506.668c-.397.449-.916.932-1.422 1.372a35.29 35.29 0 0 1-1.395 1.144c-.19.148-.522.4-.635.484l-.001.001a.5.5 0 0 1-.593-.805Z"
+    />
+  </svg>
+)
+export default ArrowRight01SVG

package/src/icons/ArrowRightIcon.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import type { SVGProps } from "react";
+
+/** Chevron pointing right. */
+
+export function ArrowRightIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M7.5 5l5 5-5 5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/** Chevron pointing left. */

package/src/icons/ArrowUpIcon.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+/**
+ * Accordion chevrons — colocated inside the package so the component
+ * has no dependency on the host app's `/public` folder. Both icons
+ * use `currentColor` so the trigger's text color drives the fill.
+ */
+
+type IconProps = React.SVGProps<SVGSVGElement>;
+
+const base: IconProps = {
+  xmlns: 'http://www.w3.org/2000/svg',
+  width: 16,
+  height: 16,
+  viewBox: '0 0 16 16',
+  fill: 'none',
+  'aria-hidden': true,
+};
+
+export const ArrowUpIcon = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path
+      fill="currentColor"
+      d="M11.6 10.296c-.082-.107-.324-.428-.469-.613-.29-.371-.685-.864-1.111-1.355C9.59 7.834 9.14 7.353 8.74 7a3.792 3.792 0 0 0-.522-.4c-.136-.082-.217-.1-.217-.1s-.079.018-.215.1a3.791 3.791 0 0 0-.523.4c-.4.353-.85.834-1.279 1.328-.426.491-.822.984-1.111 1.355-.144.185-.387.505-.468.613a.5.5 0 0 1-.806-.592l.002-.002a35.314 35.314 0 0 1 1.629-2.03c.439-.506.923-1.025 1.371-1.422.224-.197.451-.375.668-.506.204-.123.462-.244.733-.244.271 0 .529.12.733.244.217.13.444.309.668.506.449.397.932.916 1.372 1.422a35.31 35.31 0 0 1 1.144 1.395c.148.19.4.522.484.635l.001.001a.5.5 0 0 1-.804.594Z"
+    />
+  </svg>
+);

package/src/icons/ArrowUpRight01Icon.tsx

@@ -0,0 +1,31 @@
+import type { SVGProps } from 'react';
+
+/**
+ * ArrowUpRight01Icon — 12 × 12 diagonal up-right arrow (Figma `arrow-up-right-01`).
+ *
+ * Pre-colored green (#1B8354) — semantic "increase" direction used by the
+ * ChartBadge increase state. The path fill is baked in (it's not a
+ * `currentColor` glyph) because the icon is paired one-to-one with a
+ * specific pill color and its direction is meaningful on its own.
+ *
+ * Uses `width="100%"` / `height="100%"` so the parent `size-icon-*` wrapper
+ * controls the rendered size (ChartBadge uses `size-icon-xs` → 12 px).
+ */
+export function ArrowUpRight01Icon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      viewBox="0 0 12 12"
+      fill="none"
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        d="M8.99924 2.98262C8.87599 2.86832 8.71335 2.80492 8.5749 2.76503C8.4272 2.72248 8.25826 2.69347 8.08429 2.67316C7.73565 2.63245 7.32682 2.62227 6.94419 2.62558C6.55939 2.6289 6.1908 2.646 5.91913 2.66217C5.78306 2.67027 5.67076 2.67818 5.59223 2.68408C5.55295 2.68703 5.52209 2.68948 5.50089 2.6912L5.47648 2.69322L5.46999 2.69378L5.46748 2.69399C5.26115 2.71197 5.10846 2.8938 5.12644 3.10012C5.14441 3.30644 5.32651 3.4591 5.53283 3.44114L5.53408 3.44103L5.53954 3.44057L5.56179 3.43873C5.58152 3.43712 5.6108 3.43479 5.6484 3.43197C5.72363 3.42632 5.83202 3.41869 5.9637 3.41085C6.22753 3.39514 6.58264 3.37873 6.95067 3.37555C7.32086 3.37235 7.69397 3.38268 7.9973 3.4181C8.01434 3.42009 8.03102 3.42214 8.04736 3.42426L2.73483 8.73679C2.58839 8.88323 2.58839 9.12067 2.73483 9.26712C2.88128 9.41356 3.11872 9.41356 3.26517 9.26712L8.57892 3.95336C8.57981 3.96054 8.58068 3.96778 8.58153 3.9751C8.61668 4.27502 8.62718 4.65023 8.6243 5.02523C8.62143 5.39788 8.60549 5.75978 8.59017 6.02927C8.58253 6.16379 8.57507 6.27473 8.56954 6.35182C8.56678 6.39035 8.5645 6.42039 8.56292 6.44065L8.56111 6.46353L8.56052 6.47077C8.54338 6.67716 8.69678 6.85837 8.90317 6.87552C9.10957 6.89268 9.29081 6.73903 9.30797 6.53263L9.30816 6.53034L9.30869 6.52373L9.31066 6.4988C9.31235 6.47714 9.31474 6.4456 9.31762 6.40547C9.32337 6.32523 9.33108 6.21055 9.33896 6.07184C9.35471 5.79488 9.37129 5.41993 9.37427 5.03099C9.37724 4.6444 9.36692 4.23329 9.32644 3.88781C9.30626 3.71568 9.27736 3.54844 9.23444 3.40389C9.19533 3.27215 9.12902 3.10296 8.99924 2.98262Z"
+        fill="#1B8354"
+      />
+    </svg>
+  );
+}

package/src/icons/ArrowUpSVG.tsx

@@ -0,0 +1,16 @@
+import * as React from "react"
+const ArrowUpSVG = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M11.6 10.296c-.082-.107-.324-.428-.469-.613-.29-.371-.685-.864-1.111-1.355C9.59 7.834 9.14 7.353 8.74 7a3.792 3.792 0 0 0-.522-.4c-.136-.082-.217-.1-.217-.1s-.079.018-.215.1a3.791 3.791 0 0 0-.523.4c-.4.353-.85.834-1.279 1.328-.426.491-.822.984-1.111 1.355-.144.185-.387.505-.468.613a.5.5 0 0 1-.806-.592l.002-.002a35.314 35.314 0 0 1 1.629-2.03c.439-.506.923-1.025 1.371-1.422.224-.197.451-.375.668-.506.204-.123.462-.244.733-.244.271 0 .529.12.733.244.217.13.444.309.668.506.449.397.932.916 1.372 1.422a35.31 35.31 0 0 1 1.144 1.395c.148.19.4.522.484.635l.001.001a.5.5 0 0 1-.804.594Z"
+    />
+  </svg>
+)
+export default ArrowUpSVG

package/src/icons/AtIcon.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 AtIcon({ 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
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10 3.125C6.20304 3.125 3.125 6.20304 3.125 10C3.125 13.797 6.20304 16.875 10 16.875C11.5487 16.875 12.9762 16.3636 14.1253 15.5003C14.4013 15.293 14.7931 15.3486 15.0004 15.6246C15.2078 15.9005 15.1521 16.2923 14.8762 16.4997C13.518 17.5201 11.8287 18.125 10 18.125C5.51269 18.125 1.875 14.4873 1.875 10C1.875 5.51269 5.51269 1.875 10 1.875C14.4873 1.875 18.125 5.51269 18.125 10V10.7503C18.125 12.3381 16.8378 13.6253 15.25 13.6253C14.2253 13.6253 13.3259 13.0892 12.8167 12.2823C12.1521 13.1016 11.1372 13.6253 10 13.6253C7.99797 13.6253 6.375 12.0023 6.375 10.0003C6.375 7.99824 7.99797 6.37527 10 6.37527C10.9085 6.37527 11.7389 6.70945 12.375 7.26159V7.00027C12.375 6.6551 12.6548 6.37527 13 6.37527C13.3452 6.37527 13.625 6.6551 13.625 7.00027V10.7503C13.625 11.6477 14.3525 12.3753 15.25 12.3753C16.1475 12.3753 16.875 11.6477 16.875 10.7503V10C16.875 6.20304 13.797 3.125 10 3.125ZM12.375 10.0003C12.375 8.6886 11.3117 7.62527 10 7.62527C8.68832 7.62527 7.625 8.6886 7.625 10.0003C7.625 11.3119 8.68832 12.3753 10 12.3753C11.3117 12.3753 12.375 11.3119 12.375 10.0003Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Color square icon — 24×24 px.
+ * Represents a text/background color swatch in the toolbar.
+ */

package/src/icons/BeakBottom.tsx

@@ -0,0 +1,13 @@
+import type { SVGProps } from 'react';
+
+/** Info icon — circle with question mark. Used as default `icon={true}`. */
+
+export function BeakBottom(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="12" height="6" viewBox="0 0 12 6" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M6 6L0 0H12L6 6Z" fill="currentColor" />
+    </svg>
+  );
+}
+
+/** Left beak — triangle pointing left (6×12). */

package/src/icons/BeakDown.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react';
+
+/**
+ * Popover beak pointing DOWN (▼) — 28 × 6 px.
+ * Used for top placement: panel is above the trigger, beak points toward it.
+ * fill="currentColor" so the parent's text-* class sets the triangle colour
+ * (matching the panel background for a seamless join).
+ */
+
+export function BeakDown(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="28"
+      height="6"
+      viewBox="0 0 28 6"
+      fill="none"
+      {...props}
+    >
+      <path d="M14 6L0 0H28L14 6Z" fill="currentColor" />
+    </svg>
+  );
+}
+
+/**
+ * Popover beak pointing UP (▲) — 28 × 6 px.
+ * Used for bottom placement: panel is below the trigger, beak points toward it.
+ * fill="currentColor" so the parent's text-* class sets the triangle colour.
+ */

package/src/icons/BeakLeft.tsx

@@ -0,0 +1,13 @@
+import type { SVGProps } from 'react';
+
+/** Info icon — circle with question mark. Used as default `icon={true}`. */
+
+export function BeakLeft(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="6" height="12" viewBox="0 0 6 12" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M0 6L6 0V12L0 6Z" fill="currentColor" />
+    </svg>
+  );
+}
+
+/** Right beak — triangle pointing right (6×12). */

package/src/icons/BeakRight.tsx

@@ -0,0 +1,11 @@
+import type { SVGProps } from 'react';
+
+/** Info icon — circle with question mark. Used as default `icon={true}`. */
+
+export function BeakRight(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="6" height="12" viewBox="0 0 6 12" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M6 6L0 12V0L6 6Z" fill="currentColor" />
+    </svg>
+  );
+}

package/src/icons/BeakTop.tsx

@@ -0,0 +1,13 @@
+import type { SVGProps } from 'react';
+
+/** Info icon — circle with question mark. Used as default `icon={true}`. */
+
+export function BeakTop(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="12" height="6" viewBox="0 0 12 6" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M6 0L12 6H0L6 0Z" fill="currentColor" />
+    </svg>
+  );
+}
+
+/** Bottom beak — triangle pointing down (12×6). */

package/src/icons/BeakUp.tsx

@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react';
+
+/**
+ * Popover beak pointing DOWN (▼) — 28 × 6 px.
+ * Used for top placement: panel is above the trigger, beak points toward it.
+ * fill="currentColor" so the parent's text-* class sets the triangle colour
+ * (matching the panel background for a seamless join).
+ */
+
+export function BeakUp(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="28"
+      height="6"
+      viewBox="0 0 28 6"
+      fill="none"
+      {...props}
+    >
+      <path d="M14 0L28 6H0L14 0Z" fill="currentColor" />
+    </svg>
+  );
+}