sdaia-ui 1.0.1

package/src/icons/StarIcon.tsx

@@ -0,0 +1,38 @@
+/**
+ * Inline SVG icons for Quote.
+ *
+ * star — Figma-exact paths extracted from the Quote component export.
+ * Uses `currentColor` so the wrapping element's `text-*` class drives color.
+ * `aria-hidden="true"` — decorative; parent context provides meaning.
+ */
+
+/** Star — filled 5-pointed star matching Figma Quote design exactly. */
+
+export function StarIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      viewBox="264 25 22 22"
+      aria-hidden="true"
+      className={className}
+    >
+      {/* Outer halo path — opacity 0.4 */}
+      <path
+        opacity="0.4"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M273.929 27.7788C273.929 27.779 273.929 27.7785 273.929 27.7788L272.171 31.3237C271.984 31.7062 271.672 32.0338 271.351 32.2741C271.029 32.5149 270.628 32.7199 270.214 32.7907L270.212 32.7911L267.023 33.3254C266.136 33.4744 265.844 33.8265 265.776 34.0421C265.707 34.2607 265.744 34.7225 266.381 35.3644L268.861 37.8646C269.182 38.189 269.397 38.6224 269.516 39.0398C269.634 39.4576 269.679 39.9375 269.58 40.3802L269.579 40.3851L268.869 43.4802C268.604 44.6346 268.872 45.0603 269.01 45.162C269.144 45.2609 269.622 45.3909 270.633 44.786L273.628 42.9983C274.044 42.754 274.543 42.6532 275.001 42.6532C275.458 42.6532 275.957 42.7537 276.372 43.0012C276.372 43.0011 276.372 43.0012 276.372 43.0012L279.361 44.7852C279.361 44.7852 279.361 44.7853 279.361 44.7852C280.38 45.3922 280.857 45.2626 280.989 45.1656C281.124 45.0662 281.391 44.6431 281.125 43.4796L280.415 40.3802C280.316 39.9375 280.36 39.4576 280.479 39.0398C280.597 38.6224 280.812 38.189 281.134 37.8646L283.614 35.3644L283.616 35.3625C284.256 34.7208 284.292 34.2603 284.223 34.0435C284.154 33.8272 283.86 33.4745 282.972 33.3254L279.783 32.7911C279.365 32.721 278.961 32.5167 278.637 32.2751C278.313 32.0343 278.001 31.7064 277.814 31.3237L276.055 27.776C275.632 26.92 275.204 26.75 274.996 26.75C274.787 26.75 274.356 26.9223 273.929 27.7788ZM277.4 27.1119C276.872 26.0425 276.045 25.25 274.996 25.25C273.948 25.25 273.119 26.0411 272.586 27.1096L272.586 27.111L270.826 30.6597L270.823 30.6652C270.77 30.7754 270.643 30.9305 270.452 31.0727C270.263 31.2146 270.079 31.2917 269.962 31.312C269.962 31.3121 269.962 31.3121 269.961 31.3122L266.774 31.8461C265.621 32.0398 264.658 32.6052 264.346 33.5893C264.035 34.5704 264.493 35.5906 265.316 36.4206L267.796 38.9209C267.894 39.0199 268.004 39.2064 268.073 39.4494C268.141 39.6908 268.147 39.9107 268.116 40.0527C268.116 40.0534 268.116 40.0541 268.116 40.0547L267.407 43.1447C267.407 43.1448 267.407 43.1447 267.407 43.1447C267.112 44.43 267.214 45.7032 268.121 46.3702C269.032 47.04 270.274 46.7487 271.403 46.0732L274.387 44.2921C274.388 44.2917 274.388 44.2914 274.389 44.291C274.523 44.2132 274.743 44.1532 275.001 44.1532C275.261 44.1532 275.477 44.214 275.603 44.289L278.593 46.0736C279.723 46.7467 280.967 47.0433 281.877 46.3742C282.784 45.7073 282.882 44.4317 282.588 43.1454L281.879 40.0547C281.879 40.0541 281.879 40.0534 281.878 40.0527C281.847 39.9107 281.853 39.6908 281.922 39.4494C281.991 39.2064 282.101 39.0199 282.199 38.9209L284.677 36.4225C284.677 36.4222 284.678 36.4219 284.678 36.4216C285.506 35.5916 285.965 34.5705 285.652 33.5879C285.339 32.6045 284.373 32.0397 283.221 31.8461L280.031 31.3118C279.909 31.2912 279.722 31.2131 279.532 31.0716C279.342 30.93 279.215 30.7751 279.162 30.6652L277.4 27.1119C277.4 27.1121 277.399 27.1118 277.4 27.1119Z"
+        fill="currentColor"
+      />
+      {/* Inner solid star */}
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M273.929 27.7788C273.929 27.779 273.929 27.7785 273.929 27.7788L272.171 31.3237C271.984 31.7062 271.672 32.0338 271.351 32.2741C271.029 32.5149 270.628 32.7199 270.214 32.7907L270.212 32.7911L267.023 33.3254C266.136 33.4744 265.844 33.8265 265.776 34.0421C265.707 34.2607 265.744 34.7225 266.381 35.3644L268.861 37.8646C269.182 38.189 269.397 38.6224 269.516 39.0398C269.634 39.4576 269.679 39.9375 269.58 40.3802L269.579 40.3851L268.869 43.4802C268.604 44.6346 268.872 45.0603 269.01 45.162C269.144 45.2609 269.622 45.3909 270.633 44.786L273.628 42.9983C274.044 42.7543 274.542 42.6535 274.999 42.6532C275.413 42.653 275.749 42.9885 275.75 43.4027C275.75 43.8169 275.414 44.153 275 44.1532C274.742 44.1534 274.522 44.2133 274.389 44.291C274.388 44.2914 274.388 44.2917 274.387 44.2921L271.403 46.0732C270.274 46.7487 269.032 47.04 268.121 46.3702C267.214 45.7032 267.112 44.4301 267.407 43.1448C267.407 43.1448 267.407 43.1448 267.407 43.1448L268.116 40.0547C268.116 40.0541 268.116 40.0534 268.116 40.0527C268.147 39.9107 268.141 39.6908 268.073 39.4494C268.004 39.2064 267.894 39.0199 267.796 38.9209L265.316 36.4206C264.493 35.5906 264.035 34.5704 264.346 33.5893C264.658 32.6052 265.621 32.0399 266.774 31.8461L269.961 31.3122C269.962 31.3121 269.962 31.3121 269.962 31.312C270.079 31.2917 270.263 31.2146 270.452 31.0727C270.643 30.9305 270.77 30.7754 270.823 30.6652L270.826 30.6597L272.586 27.111L272.586 27.1096C273.12 26.0392 273.951 25.2471 275.002 25.25C275.416 25.2512 275.751 25.5879 275.75 26.0021C275.748 26.4163 275.412 26.7512 274.997 26.75C274.788 26.7494 274.357 26.9207 273.929 27.7788Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/icons/StatusBadgeIcon.tsx

@@ -0,0 +1,19 @@
+import type { SVGProps } from 'react';
+
+export function StatusBadgeIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      viewBox="0 0 8 8"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M4 0.416992C4.32433 0.416992 4.54 0.632437 4.93066 1.02344C5.10498 1.19773 5.25542 1.26172 5.4834 1.26172C5.52319 1.26171 5.5653 1.26109 5.60938 1.25977C5.88237 1.2521 6.25617 1.24092 6.50684 1.48926C6.75917 1.74014 6.74823 2.11574 6.74023 2.39062C6.7389 2.43462 6.73828 2.47791 6.73828 2.51758C6.73831 2.77763 6.77814 2.87054 6.97656 3.06934C7.36756 3.46034 7.58301 3.67567 7.58301 4C7.58301 4.32433 7.36756 4.54 6.97656 4.93066C6.77781 5.12946 6.73831 5.22238 6.73828 5.48242C6.73828 5.52209 6.7389 5.56537 6.74023 5.60938C6.74823 5.88399 6.75933 6.26019 6.50684 6.51074C6.25618 6.75906 5.88237 6.74823 5.60938 6.74023C5.56553 6.73891 5.52295 6.73731 5.4834 6.7373C5.22306 6.7373 5.13258 6.77498 4.94824 6.95898C4.91738 6.98986 4.88316 7.02728 4.84668 7.06641C4.64401 7.28441 4.366 7.58301 4 7.58301C3.63416 7.58283 3.3569 7.28434 3.1543 7.06641C3.1177 7.02682 3.08271 6.98994 3.05176 6.95898C2.86776 6.77498 2.77791 6.7373 2.51758 6.7373C2.47802 6.73731 2.43547 6.7389 2.3916 6.74023C2.11864 6.74823 1.74481 6.75897 1.49414 6.51074C1.24114 6.25974 1.25177 5.88307 1.25977 5.6084C1.2611 5.56453 1.26269 5.52198 1.2627 5.48242C1.2627 5.22218 1.22191 5.12951 1.02344 4.93066C0.632568 4.53979 0.417136 4.32415 0.416992 4C0.416992 3.6757 0.632504 3.45994 1.02344 3.06934C1.19777 2.895 1.2627 2.7446 1.2627 2.5166C1.26269 2.47681 1.26109 2.43471 1.25977 2.39062C1.25177 2.11796 1.24092 1.74383 1.48926 1.49316C1.74026 1.24056 2.11662 1.25177 2.3916 1.25977C2.43547 1.2611 2.47769 1.26172 2.51758 1.26172C2.74541 1.26172 2.89516 1.19749 3.06934 1.02344C3.46021 0.632568 3.67585 0.417136 4 0.416992ZM4 0.916016C3.88237 0.916016 3.70936 1.08849 3.42285 1.375C3.15625 1.6416 2.87679 1.76068 2.51758 1.76074C2.47334 1.76074 2.42584 1.76012 2.37695 1.75879C2.18329 1.75312 1.94208 1.74606 1.84375 1.84473C1.74624 1.94315 1.75313 2.18276 1.75879 2.375C1.76012 2.42433 1.76172 2.47193 1.76172 2.5166C1.76166 2.87614 1.64258 3.15561 1.37598 3.42188C1.08937 3.70848 0.916016 3.88137 0.916016 3.99902C0.916031 4.11668 1.08938 4.28924 1.37598 4.57617C1.66259 4.86312 1.76168 5.08825 1.76172 5.48145C1.76172 5.5257 1.76012 5.57317 1.75879 5.62207C1.75312 5.81574 1.74704 6.05694 1.8457 6.15527C1.94418 6.25222 2.18325 6.24589 2.37598 6.24023C2.42483 6.2389 2.47238 6.23731 2.5166 6.2373H2.51758C2.91091 6.2373 3.12661 6.32747 3.40527 6.60547C3.44278 6.64299 3.48068 6.6831 3.52051 6.72559C3.66041 6.87614 3.85204 7.08271 4 7.08301C4.148 7.08301 4.34047 6.87592 4.48047 6.72559C4.52018 6.68289 4.55764 6.64257 4.59473 6.60547C4.87334 6.32719 5.08924 6.23734 5.48242 6.2373C5.52667 6.2373 5.57414 6.2389 5.62305 6.24023C5.81562 6.2459 6.05587 6.25279 6.1543 6.15527C6.25324 6.057 6.2459 5.81632 6.24023 5.62305C6.2389 5.5742 6.23829 5.52664 6.23828 5.48242C6.23828 5.08878 6.33207 4.86879 6.62402 4.57715C6.91602 4.28548 7.08301 4.11669 7.08301 3.99902C7.08269 3.88138 6.91036 3.70854 6.62402 3.42188C6.33736 3.13488 6.23828 2.90993 6.23828 2.5166C6.23828 2.47229 6.2389 2.42495 6.24023 2.37598C6.2459 2.18244 6.25276 1.9422 6.1543 1.84375C6.05597 1.74609 5.81635 1.75312 5.62402 1.75879C5.57469 1.76012 5.52709 1.76074 5.48242 1.76074C5.12287 1.76069 4.84342 1.64161 4.57715 1.375C4.29064 1.08849 4.11763 0.916016 4 0.916016ZM4.88477 2.94434C5.00708 2.88068 5.15864 2.92817 5.22266 3.05078C5.28632 3.17311 5.23888 3.32467 5.11621 3.38867C4.40405 3.75953 3.83695 4.91827 3.82617 4.94141C3.78684 5.02341 3.70526 5.07767 3.61426 5.08301C3.60975 5.08303 3.6051 5.08301 3.60059 5.08301L3.53809 5.0752C3.4771 5.05948 3.42326 5.02071 3.38867 4.96582C3.22775 4.70982 2.88745 4.52041 2.88086 4.5166C2.7599 4.45029 2.71534 4.29872 2.78125 4.17773C2.84725 4.05673 2.99878 4.01213 3.12012 4.07812C3.13533 4.08635 3.34757 4.20297 3.55371 4.39453C3.80041 3.97152 4.28326 3.2573 4.88477 2.94434Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/icons/TextTIcon.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 TextTIcon({ 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="M12.0029 1.5C12.6473 1.5 13.1699 2.02266 13.1699 2.66699V3.66699C13.1697 3.94288 12.9458 4.16682 12.6699 4.16699C12.3939 4.16699 12.1701 3.94299 12.1699 3.66699V2.66699C12.1699 2.57495 12.095 2.5 12.0029 2.5H8.50293V13.5H9.66992C9.94591 13.5002 10.1699 13.724 10.1699 14C10.1699 14.276 9.94591 14.4998 9.66992 14.5H6.33594C6.05994 14.4998 5.83594 14.276 5.83594 14C5.83594 13.724 6.05994 13.5002 6.33594 13.5H7.50293V2.5H4.00293C3.91088 2.5 3.83594 2.57494 3.83594 2.66699V3.66699C3.83576 3.94299 3.61197 4.16699 3.33594 4.16699C3.06005 4.16682 2.83611 3.94288 2.83594 3.66699V2.66699C2.83594 2.02266 3.3586 1.5 4.00293 1.5H12.0029Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Chevron down — 12×12 px.
+ * Used inside text style / font size selector triggers on desktop.
+ */

package/src/icons/Tick02Icon.tsx

@@ -0,0 +1,32 @@
+import type { SVGProps } from 'react';
+
+/**
+ * Tick02Icon — 64 × 64 success badge.
+ * Pre-colored filled-green circle with a white checkmark, sourced verbatim
+ * from the Figma "tick-02" illustration used by the NotificationPopup success
+ * state. Colors are intentional (semantic) and do not follow `currentColor`.
+ */
+export function Tick02Icon(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="M0 32C0 14.3269 14.3269 0 32 0C49.6731 0 64 14.3269 64 32C64 49.6731 49.6731 64 32 64C14.3269 64 0 49.6731 0 32Z"
+        fill="#079455"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M42.254 23.7028C42.7866 24.2113 42.8063 25.0553 42.2978 25.588L28.2978 40.2546C28.0499 40.5143 27.7078 40.6631 27.3488 40.6672C26.9899 40.6714 26.6444 40.5306 26.3905 40.2768L21.7239 35.6101C21.2032 35.0894 21.2032 34.2452 21.7239 33.7245C22.2446 33.2038 23.0888 33.2038 23.6095 33.7245L27.3112 37.4262L40.3689 23.7467C40.8773 23.214 41.7213 23.1944 42.254 23.7028Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/src/icons/TickIcon.tsx

@@ -0,0 +1,33 @@
+import type { SVGProps } from 'react';
+
+/**
+ * Tick / checkmark icon — 20 × 20, fill evenodd.
+ *
+ * Used as the trailing indicator for the Select type (selected state).
+ * Sized by the parent wrapper (`size-icon-lg` = 20 px); the SVG itself
+ * uses width/height 100% so it never overrides the token.
+ *
+ * `fill="currentColor"` inherits the text colour so light/dark mode and
+ * disabled dimming work automatically.
+ */
+
+export function TickIcon(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="M16.2642 4.96392C16.5139 5.20226 16.5231 5.59788 16.2848 5.84756L7.53478 15.0142C7.41859 15.136 7.25822 15.2057 7.08995 15.2076C6.92168 15.2096 6.75973 15.1436 6.64074 15.0246L3.72407 12.108C3.48 11.8639 3.48 11.4682 3.72407 11.2241C3.96815 10.98 4.36388 10.98 4.60796 11.2241L7.07228 13.6884L15.3806 4.98447C15.6189 4.73478 16.0145 4.72558 16.2642 4.96392Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/icons/TrashIcon.tsx

@@ -0,0 +1,44 @@
+import type { SVGProps } from 'react';
+
+/**
+ * Magnifying-glass search icon.
+ * Used as the prefix inside the search TextInput.
+ * Figma: search-01
+ */
+
+export function TrashIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      {/* Bin body outline */}
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.3548 1.24634C12.7253 1.24734 13.0486 1.25231 13.3268 1.27716C13.6959 1.31017 14.0399 1.38164 14.3742 1.55506C14.5063 1.62359 14.6326 1.70273 14.7519 1.7917C15.0537 2.01684 15.2681 2.29526 15.4588 2.61297C15.6385 2.91227 15.8209 3.28872 16.0359 3.73219L16.5274 4.74609H21C21.4142 4.74609 21.75 5.08188 21.75 5.49609C21.75 5.91031 21.4142 6.24609 21 6.24609H20.2051L19.6265 15.6062C19.5493 16.8541 19.4881 17.8443 19.3627 18.6353C19.234 19.4465 19.028 20.1221 18.616 20.713C18.239 21.2535 17.7537 21.7098 17.1909 22.0526C16.5758 22.4274 15.8888 22.5913 15.0712 22.6697C14.274 22.7461 13.2818 22.7461 12.0315 22.7461H11.9539C10.702 22.7461 9.7086 22.7461 8.9104 22.6696C8.0919 22.591 7.4042 22.4268 6.7885 22.0514C6.2254 21.7079 5.7399 21.2508 5.3631 20.7094C4.9512 20.1175 4.7459 19.441 4.6182 18.6286C4.4936 17.8365 4.4338 16.8449 4.3583 15.5952L3.7939 6.24609H3C2.5858 6.24609 2.25 5.91031 2.25 5.49609C2.25 5.08188 2.5858 4.74609 3 4.74609H7.5723L7.9914 3.82682C8.2009 3.36704 8.3787 2.97704 8.5557 2.66682C8.7435 2.33762 8.957 2.04857 9.2625 1.8142C9.3831 1.7217 9.5112 1.63935 9.6453 1.56801C9.9853 1.38723 10.3369 1.31281 10.7143 1.27845C11.07 1.24609 11.4987 1.24609 12.0039 1.24609L12.3548 1.24634ZM18.7022 6.24609H5.2967L5.8533 15.4661C5.9316 16.7631 5.9879 17.6829 6.1 18.3957C6.2101 19.0964 6.3644 19.5222 6.5943 19.8526C6.8521 20.223 7.1843 20.5357 7.5696 20.7708C7.9132 20.9803 8.3476 21.1087 9.0537 21.1764C9.7719 21.2453 10.6934 21.2461 11.9928 21.2461C13.2905 21.2461 14.2107 21.2453 14.928 21.1766C15.6332 21.1089 16.0671 20.9809 16.4105 20.7716C16.7956 20.537 17.1277 20.2249 17.3856 19.855C17.6156 19.5252 17.7702 19.1 17.8812 18.4003C17.9941 17.6886 18.0517 16.7702 18.1317 15.4749L18.7022 6.24609ZM12.451 2.7468L11.6599 2.7466C11.315 2.748 11.0601 2.75318 10.8503 2.77227C10.5849 2.79644 10.4499 2.83907 10.3496 2.89242C10.2886 2.92485 10.2304 2.96228 10.1756 3.00432C10.0854 3.07348 9.9906 3.17862 9.8585 3.41016C9.7194 3.65407 9.5694 3.98132 9.3428 4.47843L9.2208 4.74609H14.8604L14.6999 4.41497C14.4674 3.93535 14.3137 3.61991 14.1727 3.38493C14.0389 3.16197 13.9443 3.06067 13.8551 2.9941C13.8009 2.95365 13.7434 2.91768 13.6834 2.88653C13.5845 2.83525 13.4522 2.79436 13.1932 2.7712C12.9982 2.75376 12.7635 2.74843 12.451 2.7468Z"
+        fill="currentColor"
+      />
+      {/* Inner vertical lines — 40 % opacity */}
+      <path
+        opacity="0.4"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.75 16.4961C8.75 16.9103 9.0858 17.2461 9.5 17.2461C9.9142 17.2461 10.25 16.9103 10.25 16.4961V10.4961C10.25 10.0819 9.9142 9.74609 9.5 9.74609C9.0858 9.74609 8.75 10.0819 8.75 10.4961V16.4961ZM15.25 10.4961C15.25 10.0819 14.9142 9.74609 14.5 9.74609C14.0858 9.74609 13.75 10.0819 13.75 10.4961V16.4961C13.75 16.9103 14.0858 17.2461 14.5 17.2461C14.9142 17.2461 15.25 16.9103 15.25 16.4961V10.4961Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Filter / funnel icon — from Figma (filter).
+ * Used for the filter button on both desktop and mobile/tablet toolbars.
+ *
+ * NOTE: The Figma export for the filter icon was not provided separately.
+ * Please supply the correct Figma SVG if this shape differs from Figma.
+ */

package/src/icons/UnderlineIcon.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 UnderlineIcon({ 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.25H21ZM18.5 2.25C18.9142 2.25 19.25 2.58579 19.25 3V11.5C19.25 15.5041 16.0041 18.75 12 18.75C7.99594 18.75 4.75 15.5041 4.75 11.5V3C4.75 2.58579 5.08579 2.25 5.5 2.25C5.91421 2.25 6.25 2.58579 6.25 3V11.5C6.25 14.6756 8.82436 17.25 12 17.25C15.1756 17.25 17.75 14.6756 17.75 11.5V3C17.75 2.58579 18.0858 2.25 18.5 2.25Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Align left icon (text-align-justify-left) — 24×24 px.
+ * Figma: node inside Rich Text Editor 6259:88649
+ */

package/src/icons/UndoIcon.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 UndoIcon({ 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="M14.9922 7.23612H4.14219C4.56219 6.77612 5.31219 6.21612 6.30219 5.46612L7.45219 4.58613C7.78219 4.33613 7.84219 3.86613 7.59219 3.53613C7.34219 3.20613 6.87219 3.14613 6.54219 3.39613L5.39219 4.27612C3.36219 5.81612 2.24219 6.65612 2.24219 7.99612C2.24219 9.33612 3.36219 10.1761 5.38219 11.7161L6.53219 12.5961C6.67219 12.6961 6.83219 12.7461 6.99219 12.7461C7.22219 12.7461 7.44219 12.6461 7.59219 12.4561C7.84219 12.1261 7.78219 11.6561 7.45219 11.4061L6.30219 10.5261C5.31219 9.77612 4.57219 9.21613 4.15219 8.75613H15.0022C17.8922 8.75613 20.2522 11.1061 20.2522 14.0061C20.2522 16.9061 17.8922 19.2561 15.0022 19.2561H11.0022C10.5922 19.2561 10.2522 19.5961 10.2522 20.0061C10.2522 20.4161 10.5922 20.7561 11.0022 20.7561H15.0022C18.7222 20.7561 21.7522 17.7261 21.7522 14.0061C21.7522 10.2861 18.7222 7.25613 15.0022 7.25613L14.9922 7.23612Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Redo icon (redo-03) — 24×24 px.
+ * Figma: node inside Rich Text Editor 6259:88649
+ */

package/src/icons/UploadArrowIcon.tsx

@@ -0,0 +1,40 @@
+import type { SVGProps } from 'react';
+
+/**
+ * Magnifying-glass search icon.
+ * Used as the prefix inside the search TextInput.
+ * Figma: search-01
+ */
+
+export function UploadArrowIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      {/* Arrow shaft and arrowhead — 40 % opacity */}
+      <path
+        opacity="0.4"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 15.25C12.4142 15.25 12.75 14.9142 12.75 14.5L12.75 6.03807C12.752 6.04045 12.754 6.04283 12.7561 6.04522C12.9667 6.29386 13.173 6.55664 13.366 6.80237C13.3809 6.82146 13.3958 6.84044 13.4107 6.85931C13.6029 7.10404 13.8051 7.36115 13.9622 7.52274C14.2509 7.81977 14.7257 7.82651 15.0227 7.53781C15.3198 7.24911 15.3265 6.77428 15.0378 6.47726C14.9491 6.386 14.8035 6.20419 14.5903 5.93276C14.5748 5.91309 14.5591 5.8931 14.5432 5.87281C14.3532 5.63067 14.1302 5.34662 13.9005 5.07551C13.6543 4.78495 13.3787 4.48316 13.1032 4.24854C12.9652 4.13096 12.8096 4.01499 12.6422 3.92541C12.4807 3.83902 12.2583 3.75 12 3.75C11.7417 3.75 11.5193 3.83902 11.3578 3.92541C11.1904 4.01499 11.0348 4.13096 10.8968 4.24854C10.6213 4.48316 10.3457 4.78495 10.0995 5.07551C9.86981 5.34663 9.64683 5.63068 9.45677 5.87282C9.44084 5.89311 9.42515 5.9131 9.40971 5.93276C9.19651 6.20419 9.05089 6.386 8.96219 6.47726C8.67349 6.77428 8.68023 7.24911 8.97726 7.53781C9.27428 7.82651 9.74911 7.81977 10.0378 7.52274C10.1949 7.36115 10.3971 7.10404 10.5893 6.85931C10.6042 6.84044 10.6191 6.82145 10.634 6.80236C10.827 6.55663 11.0333 6.29386 11.2439 6.04522C11.246 6.04283 11.248 6.04045 11.25 6.03807L11.25 14.5C11.25 14.9142 11.5858 15.25 12 15.25Z"
+        fill="currentColor"
+      />
+      {/* Base bar — full opacity */}
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4 15.75C4.41421 15.75 4.75 16.0858 4.75 16.5C4.75 17.1043 4.78252 17.5375 4.85225 17.8549C4.92012 18.1639 5.01263 18.3135 5.09958 18.4004C5.18653 18.4874 5.33614 18.5799 5.64508 18.6477C5.96252 18.7175 6.39573 18.75 7 18.75H17C17.6043 18.75 18.0375 18.7175 18.3549 18.6477C18.6639 18.5799 18.8135 18.4874 18.9004 18.4004C18.9874 18.3135 19.0799 18.1639 19.1477 17.8549C19.2175 17.5375 19.25 17.1043 19.25 16.5C19.25 16.0858 19.5858 15.75 20 15.75C20.4142 15.75 20.75 16.0858 20.75 16.5C20.75 17.1367 20.7178 17.699 20.6128 18.1768C20.506 18.663 20.3139 19.1083 19.9611 19.4611C19.6083 19.8139 19.163 20.006 18.6768 20.1128C18.199 20.2178 17.6367 20.25 17 20.25H7C6.36327 20.25 5.80098 20.2178 5.32323 20.1128C4.83699 20.006 4.39172 19.8139 4.03892 19.4611C3.68612 19.1083 3.49401 18.663 3.38719 18.1768C3.28223 17.699 3.25 17.1367 3.25 16.5C3.25 16.0858 3.58579 15.75 4 15.75Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Plus icon — used for the Add row in the mobile more-menu.
+ */

package/src/icons/UserIcon.tsx

@@ -0,0 +1,21 @@
+import type { SVGProps } from 'react';
+
+export function UserIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.19445 14.8369C9.74845 12.7209 14.2528 12.7207 17.8068 14.8369C17.9229 14.9061 18.0662 14.9875 18.2286 15.0791C18.9414 15.4812 20.0198 16.089 20.7579 16.8115C21.2196 17.2634 21.6577 17.8593 21.7374 18.5889C21.8222 19.3647 21.4837 20.0924 20.8048 20.7393C19.6334 21.8553 18.2276 22.75 16.4093 22.75H7.59093C5.77273 22.7499 4.36683 21.8553 3.19543 20.7393C2.51662 20.0924 2.17806 19.3646 2.26281 18.5889C2.34255 17.8593 2.78161 17.2634 3.24328 16.8115C3.98144 16.0891 5.05888 15.4812 5.7716 15.0791C5.93421 14.9874 6.07817 14.9062 6.19445 14.8369ZM17.0392 16.126C13.9581 14.2914 10.0432 14.2915 6.96203 16.126C6.79418 16.2259 6.60975 16.3302 6.41711 16.4395C5.7045 16.8437 4.8722 17.316 4.29211 17.8838C3.93204 18.2363 3.77858 18.5273 3.75402 18.752C3.73458 18.9303 3.78013 19.2242 4.23058 19.6533C5.26636 20.6401 6.3186 21.2499 7.59093 21.25H16.4093C17.6817 21.25 18.7348 20.6402 19.7706 19.6533C20.2208 19.2243 20.2657 18.9303 20.2462 18.752C20.2216 18.5273 20.0682 18.2363 19.7081 17.8838C19.128 17.316 18.2957 16.8437 17.5831 16.4395C17.3906 16.3302 17.2069 16.2259 17.0392 16.126ZM12.0001 1.25C14.8996 1.25 17.2501 3.6005 17.2501 6.5C17.2501 9.39949 14.8996 11.75 12.0001 11.75C9.10062 11.75 6.75011 9.39949 6.75011 6.5C6.75011 3.6005 9.10062 1.25 12.0001 1.25ZM12.0001 2.75C9.92905 2.75 8.25011 4.42893 8.25011 6.5C8.25011 8.57107 9.92905 10.25 12.0001 10.25C14.0712 10.25 15.7501 8.57107 15.7501 6.5C15.7501 4.42893 14.0712 2.75 12.0001 2.75Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/icons/VolumeHighIcon.tsx

@@ -0,0 +1,27 @@
+/* ─────────────────────────────────────────────────────────────────
+   icons.tsx — AudioPlayer icon set
+   All paths retrieved directly from Figma asset exports.
+   fill="currentColor" enables dark-mode & hover state via CSS.
+   Icon names match Figma component names exactly.
+──────────────────────────────────────────────────────────────────── */
+
+/** go-backward-10-sec — viewBox 0 0 17.915 17.917 */
+
+export function VolumeHighIcon() {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 18.1251 14.5856"
+      fill="none"
+      aria-hidden="true"
+    >
+      <path
+        fill="currentColor"
+        d="M8.11831 0.604329C8.69062 0.16482 9.37192 -0.191943 10.0978 0.115071C10.8168 0.419349 11.0477 1.15212 11.1476 1.87288C11.2499 2.61176 11.2502 3.62947 11.2501 4.89437V9.69124C11.2502 10.9563 11.2499 11.9738 11.1476 12.7127C11.0478 13.4336 10.8168 14.1662 10.0978 14.4705C9.37185 14.7776 8.69065 14.4208 8.11831 13.9813C7.53303 13.5317 6.78906 12.7721 5.91421 11.8787C5.46465 11.4197 5.16558 11.198 4.86342 11.0731C4.55983 10.9476 4.19081 10.8944 3.54702 10.8944C2.99018 10.8944 2.4917 10.8945 2.1144 10.8553C1.71861 10.8142 1.35023 10.7244 1.01967 10.4989C0.390011 10.0691 0.149077 9.4394 0.0577604 8.86117C-0.0102845 8.43003 -0.00224461 7.95632 0.00404945 7.57503V7.01058C-0.00224605 6.6292 -0.0103369 6.15566 0.0577604 5.72445C0.149084 5.14617 0.389901 4.51648 1.01967 4.08675C1.35023 3.86122 1.71861 3.77239 2.1144 3.73128C2.49171 3.69213 2.99014 3.69221 3.54702 3.69222C4.19064 3.69221 4.55988 3.63889 4.86342 3.51351C5.16558 3.3886 5.46466 3.1659 5.91421 2.70687C6.78899 1.81359 7.53306 1.05386 8.11831 0.604329ZM15.0626 2.51058C15.4021 2.19994 15.9286 2.22299 16.2394 2.56234C17.4087 3.83949 18.1251 5.48555 18.1251 7.29183C18.1251 9.09805 17.4087 10.7442 16.2394 12.0213C15.9287 12.3605 15.402 12.3835 15.0626 12.0731C14.7232 11.7623 14.6992 11.2348 15.0099 10.8953C15.9252 9.89565 16.4581 8.6426 16.4582 7.29183C16.4582 5.941 15.9252 4.68706 15.0099 3.68734C14.6995 3.34787 14.7233 2.82124 15.0626 2.51058ZM12.6193 4.12874C12.9851 3.84972 13.508 3.92035 13.7873 4.28597C14.4179 5.11257 14.7912 6.15993 14.7912 7.29183C14.7911 8.42369 14.4179 9.47111 13.7873 10.2977C13.508 10.6632 12.985 10.733 12.6193 10.4539C12.2536 10.1747 12.183 9.65177 12.4621 9.28597C12.8737 8.74647 13.1251 8.05415 13.1251 7.29183C13.1251 6.52951 12.8737 5.83719 12.4621 5.29769C12.1829 4.93179 12.2534 4.40792 12.6193 4.12874Z"
+      />
+    </svg>
+  );
+}
+
+/** settings-02 — viewBox 0 0 17.916 16.6665 */

package/src/icons/VolumeMuteIcon.tsx

@@ -0,0 +1,53 @@
+import type { SVGProps } from 'react';
+
+/* ─────────────────────────────────────────────────────────────────
+   VideoPlayer/icons.tsx
+   Exact SVG paths provided directly from Figma by the designer.
+
+   Rules (per Component Build Guide §2b):
+   - width="100%" height="100%" — size controlled by wrapping span
+   - fill="currentColor" on all paths — inherits text colour from
+     parent so dark-mode, disabled states, and hover work automatically.
+     Figma exports use fill="#F3F4F6" (near-white); we convert to
+     currentColor so the component CSS colour token drives the shade.
+──────────────────────────────────────────────────────────────────── */
+
+/**
+ * Large centre play button shown in the Default (paused) state.
+ * Figma: 48×48 px. Used in a 48×48 wrapper.
+ */
+
+export function VolumeMuteIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      {...props}
+    >
+      {/* Speaker body — first sub-path of VolumeHighIcon (no arcs) */}
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.15639 3.31398C9.72864 2.87444 10.41 2.51708 11.1359 2.82375C11.8552 3.12799 12.0868 3.86155 12.1867 4.58253C12.289 5.32147 12.2892 6.33905 12.2892 7.60402V12.3999C12.2892 13.6647 12.2889 14.6825 12.1867 15.4214C12.0868 16.1424 11.8552 16.8759 11.1359 17.1802C10.41 17.4869 9.72867 17.1295 9.15639 16.69C8.57114 16.2403 7.82699 15.4806 6.95229 14.5874C6.50297 14.1287 6.20455 13.9066 5.90249 13.7818C5.59893 13.6563 5.22975 13.6031 4.58608 13.603C4.02899 13.6031 3.52985 13.6032 3.15249 13.564C2.75683 13.5229 2.38919 13.433 2.05874 13.2075C1.42923 12.7779 1.18815 12.149 1.09682 11.5708C1.02873 11.1396 1.03682 10.666 1.04311 10.2847V9.71925C1.03682 9.33794 1.02875 8.86419 1.09682 8.43312C1.18819 7.85501 1.42923 7.22601 2.05874 6.7964C2.3892 6.57093 2.75682 6.48108 3.15249 6.43996C3.52985 6.40076 4.02899 6.40088 4.58608 6.40089C5.22982 6.40087 5.59891 6.34764 5.90249 6.22218C6.20458 6.09729 6.50289 5.87537 6.95229 5.41652C7.82707 4.52325 8.57111 3.76361 9.15639 3.31398Z"
+        fill="currentColor"
+      />
+      {/* X mark — two diagonal strokes on the right side */}
+      <path
+        d="M14 7.5L18 11.5M18 7.5L14 11.5"
+        stroke="currentColor"
+        strokeWidth="1.75"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+/**
+ * More options vertical dots (⋮) icon used in the header.
+ * No Figma path provided — drawn from visual reference.
+ * Used at 24×24 px (size-icon-xl).
+ */

package/src/icons/XCircleIcon.tsx

@@ -0,0 +1,32 @@
+import type { SVGProps } from 'react';
+
+/**
+ * XCircleIcon — 64 × 64 error badge.
+ * Pre-colored filled-red circle with a white × cross, sourced verbatim from
+ * the Figma error illustration used by the NotificationPopup error state.
+ * Colors are intentional (semantic) and do not follow `currentColor`.
+ */
+export function XCircleIcon(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="M0 32C0 14.3269 14.3269 0 32 0C49.6731 0 64 14.3269 64 32C64 49.6731 49.6731 64 32 64C14.3269 64 0 49.6731 0 32Z"
+        fill="#D92D20"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M40.1545 21.4881C40.8053 20.8373 41.861 20.8374 42.5119 21.4881C43.1628 22.139 43.1628 23.1946 42.5119 23.8455L34.3566 31.9998L42.5119 40.1551C43.1627 40.8059 43.1626 41.8606 42.5119 42.5115C41.861 43.1624 40.8053 43.1624 40.1545 42.5115L31.9992 34.3562L23.8449 42.5115C23.194 43.1624 22.1393 43.1624 21.4885 42.5115C20.8377 41.8606 20.8376 40.8059 21.4885 40.1551L29.6428 31.9998L21.4885 23.8455C20.8376 23.1946 20.8376 22.139 21.4885 21.4881C22.1392 20.8375 23.1941 20.8376 23.8449 21.4881L31.9992 29.6424L40.1545 21.4881Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/src/icons/XIcon.tsx

@@ -0,0 +1,27 @@
+/**
+ * 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 XIcon({ 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="M15 5L5 15M5 5l10 10"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}

package/src/icons/XIconSVG.tsx

@@ -0,0 +1,16 @@
+import * as React from "react"
+const XIconSVG = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={14}
+    height={14}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#161616"
+      d="M10.774 2.608a.438.438 0 0 1 .619.618L7.618 7l3.775 3.775a.437.437 0 1 1-.618.618L7 7.618l-3.774 3.775a.437.437 0 1 1-.618-.618L6.38 6.999 2.608 3.226a.437.437 0 1 1 .618-.618L6.999 6.38l3.775-3.773Z"
+    />
+  </svg>
+)
+export default XIconSVG

package/src/icons/XSmallIcon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react';
+
+/**
+ * Chevron / arrow-down icon — 16 × 16 px.
+ * Used as the trailing affordance on the Select trigger.
+ * Figma node: arrow-down-01 (4074:5854)
+ */
+
+export function XSmallIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        d="M9 3L3 9M3 3L9 9"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/XSvg.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+const XSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#161616"
+      fillRule="evenodd"
+      d="M2.978 2.98a.5.5 0 0 1 .708 0l4.313 4.313 4.313-4.313a.5.5 0 1 1 .707.707L8.706 8l4.313 4.313a.5.5 0 1 1-.707.707L7.999 8.707 3.686 13.02a.5.5 0 0 1-.708-.707L7.292 8 2.978 3.687a.5.5 0 0 1 0-.707Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default XSvg

package/src/icons/ZoomInIcon.tsx

@@ -0,0 +1,25 @@
+import type { SVGProps } from 'react';
+
+/** Arrow pointing left — used for "previous" navigation. */
+
+export function ZoomInIcon(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}
+    >
+      <circle cx="11" cy="11" r="7" />
+      <path d="M20 20L17 17" />
+      <path d="M11 8v6M8 11h6" />
+    </svg>
+  );
+}
+
+/** Minus sign — plain subtraction icon (zoom out button). */

package/src/icons/index.ts

@@ -0,0 +1,5 @@
+// Barrel so `sdaia-ui/icons` resolves in dev (via tsconfig paths alias
+// `sdaia-ui/*` → `packages/ui/src/*`) and in production (via the
+// package.json `exports` field, which points `./icons` at the built
+// `dist/icons.mjs` generated from this file).
+export * from './IconFactory';