sdaia-ui 1.0.1

package/src/icons/PauseIcon.tsx

@@ -0,0 +1,30 @@
+/* ─────────────────────────────────────────────────────────────────
+   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 PauseIcon() {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 29.166 29.166"
+      fill="none"
+      aria-hidden="true"
+    >
+      <path
+        fill="currentColor"
+        d="M6.33203 3.07745e-06C7.4399 -5.60591e-05 8.3947 -0.000193995 9.15918 0.102542C9.97846 0.212691 10.7643 0.460784 11.4014 1.09766C12.0384 1.73472 12.2873 2.52048 12.3975 3.33985C12.5002 4.10433 12.5001 5.05906 12.5 6.167V22.999C12.5001 24.107 12.5002 25.0617 12.3975 25.8262C12.2873 26.6456 12.0384 27.4313 11.4014 28.0684C10.7643 28.7052 9.97846 28.9533 9.15918 29.0635C8.39468 29.1662 7.43995 29.1661 6.33203 29.166H6.16797C5.05986 29.1661 4.10442 29.1663 3.33985 29.0635C2.52073 28.9533 1.73556 28.7051 1.09864 28.0684C0.461579 27.4313 0.212712 26.6455 0.102542 25.8262C-0.000240402 25.0617 -5.60799e-05 24.107 3.05966e-06 22.999V6.167C-5.60795e-05 5.05906 -0.0002399 4.10433 0.102542 3.33985C0.212713 2.52049 0.461583 1.73471 1.09864 1.09766C1.73556 0.460951 2.52073 0.212707 3.33985 0.102542C4.1044 -0.000249636 5.0599 -5.60698e-05 6.16797 3.07745e-06H6.33203ZM22.999 3.07745e-06C24.107 -5.60622e-05 25.0617 -0.000240443 25.8262 0.102542C26.6455 0.212713 27.4313 0.460616 28.0684 1.09766C28.7054 1.7347 28.9533 2.5205 29.0635 3.33985C29.1663 4.10433 29.1661 5.05906 29.166 6.167V22.999C29.1661 24.107 29.1663 25.0617 29.0635 25.8262C28.9533 26.6455 28.7054 27.4313 28.0684 28.0684C27.4313 28.7054 26.6455 28.9533 25.8262 29.0635C25.0617 29.1663 24.107 29.1661 22.999 29.166H22.834C21.726 29.1661 20.7714 29.1662 20.0068 29.0635C19.1875 28.9533 18.4017 28.7053 17.7647 28.0684C17.1276 27.4313 16.8787 26.6456 16.7686 25.8262C16.6658 25.0617 16.666 24.107 16.666 22.999V6.167C16.666 5.05906 16.6658 4.10433 16.7686 3.33985C16.8787 2.52046 17.1276 1.73473 17.7647 1.09766C18.4017 0.460701 19.1875 0.212698 20.0068 0.102542C20.7714 -0.000223322 21.726 -5.60647e-05 22.834 3.07745e-06H22.999Z"
+      />
+    </svg>
+  );
+}
+
+/**
+ * play — same viewBox as PauseIcon for visual parity.
+ * Figma only shows the pause state; play triangle crafted to match proportions.
+ */

package/src/icons/PencilIcon.tsx

@@ -0,0 +1,36 @@
+import type { SVGProps } from 'react';
+
+/**
+ * Pencil / compose icon — 24×24 viewport, stroke-based.
+ *
+ * Renders at the parent's size (width/height 100%) and inherits
+ * color via `stroke="currentColor"` so it responds to `text-*` tokens.
+ */
+export function PencilIcon(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="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/PlayButtonCardIcon.tsx

@@ -0,0 +1,41 @@
+import type { SVGProps } from 'react';
+
+/**
+ * PlayButtonCardIcon — 24 × 24 two-tone play glyph used by the `CardMedia`
+ * video overlay.
+ *
+ * The icon ships with its own baked-in colors (matches the Figma asset):
+ *   - Backdrop path (40 % opacity) → `icon-default` (#161616)
+ *   - Foreground stroke path       → `icon-neutral` (#384250)
+ *
+ * It's kept separate from the existing `PlayCenterIcon` / `PlayIcon` glyphs
+ * so the VideoPlayer family stays untouched. Width/height default to 100 %
+ * so the parent `size-icon-*` wrapper drives the rendered size.
+ */
+export function PlayButtonCardIcon(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
+        opacity="0.4"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.852 6.28676L13.9405 6.33706C15.5735 7.26475 16.8567 7.99375 17.7709 8.66154C18.6913 9.33392 19.3721 10.0367 19.6159 10.9632C19.7947 11.6427 19.7947 12.3574 19.6159 13.0369C19.3721 13.9634 18.6913 14.6662 17.7709 15.3386C16.8567 16.0064 15.5735 16.7354 13.9406 17.663L13.852 17.7134C12.2746 18.6095 11.033 19.3149 10.0232 19.7444C9.0053 20.1774 8.07729 20.3968 7.17536 20.1412C6.51252 19.9534 5.90941 19.5969 5.42356 19.1067C4.76419 18.4414 4.49951 17.522 4.37429 16.4154C4.24998 15.317 4.24999 13.879 4.25 12.0502V11.95C4.24999 10.1211 4.24998 8.68315 4.37429 7.5847C4.49951 6.47816 4.76419 5.55867 5.42356 4.89341C5.90941 4.40323 6.51252 4.04672 7.17536 3.8589C8.07729 3.60331 9.0053 3.82275 10.0232 4.25571C11.033 4.68522 12.2746 5.3906 13.852 6.28676ZM9.43611 5.63604C8.51385 5.24377 7.98374 5.18888 7.58431 5.30207C7.17108 5.41917 6.79377 5.64179 6.48892 5.94935C6.19206 6.24887 5.97861 6.74743 5.86477 7.75337C5.75115 8.75741 5.75 10.1102 5.75 12.0001C5.75 13.8899 5.75115 15.2427 5.86477 16.2467C5.97861 17.2527 6.19206 17.7513 6.48892 18.0508C6.79377 18.3583 7.17108 18.581 7.58431 18.6981C7.98374 18.8112 8.51385 18.7564 9.43611 18.3641C10.3571 17.9724 11.524 17.3108 13.1553 16.384C14.8421 15.4257 16.0497 14.7383 16.8861 14.1273C17.7244 13.5149 18.0557 13.0717 18.1653 12.6552C18.2782 12.2259 18.2782 11.7742 18.1653 11.345C18.0557 10.9285 17.7244 10.4852 16.8861 9.8728C16.0497 9.26183 14.8421 8.57445 13.1553 7.6161C11.524 6.68934 10.3571 6.02776 9.43611 5.63604Z"
+        fill="#161616"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.852 6.28676L13.9405 6.33706C15.5735 7.26475 16.8567 7.99375 17.7709 8.66154C18.6913 9.33392 19.3721 10.0367 19.6159 10.9632C19.7053 11.303 19.75 11.6516 19.75 12.0001C19.75 12.4143 19.4142 12.7501 19 12.7501C18.5858 12.7501 18.25 12.4143 18.25 12.0001C18.25 11.7798 18.2217 11.5595 18.1653 11.345C18.0557 10.9285 17.7244 10.4852 16.8861 9.8728C16.0497 9.26183 14.8421 8.57445 13.1553 7.6161C11.524 6.68934 10.3571 6.02776 9.43611 5.63604C8.51385 5.24377 7.98374 5.18888 7.58431 5.30207C7.17108 5.41917 6.79377 5.64179 6.48892 5.94935C6.19206 6.24887 5.97861 6.74743 5.86477 7.75337C5.75115 8.75741 5.75 10.1102 5.75 12.0001C5.75 12.4143 5.41421 12.7501 5 12.7501C4.58579 12.7501 4.25 12.4143 4.25 12.0001L4.25 11.95C4.24999 10.1211 4.24998 8.68315 4.37429 7.5847C4.49951 6.47816 4.76419 5.55867 5.42356 4.89341C5.90941 4.40323 6.51252 4.04672 7.17536 3.8589C8.07729 3.60331 9.0053 3.82275 10.0232 4.25571C11.033 4.68522 12.2746 5.3906 13.852 6.28676Z"
+        fill="#384250"
+      />
+    </svg>
+  );
+}

package/src/icons/PlayCenterIcon.tsx

@@ -0,0 +1,45 @@
+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 PlayCenterIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        d="M27.8811 12.6741C31.1469 14.5295 33.7134 15.9875 35.5417 17.3231C37.3827 18.6678 38.7441 20.0734 39.2318 21.9264C39.5894 23.2854 39.5894 24.7149 39.2318 26.0738C38.7441 27.9268 37.3827 29.3324 35.5417 30.6772C33.7134 32.0127 31.147 33.4707 27.8812 35.3261L27.8812 35.3261C24.7264 37.1184 22.0661 38.6298 20.0464 39.4888C18.0106 40.3547 16.1546 40.7936 14.3507 40.2825C13.025 39.9068 11.8188 39.1938 10.8471 38.2134C9.52838 36.8829 8.99902 35.0439 8.74858 32.8308C8.49996 30.634 8.49998 27.7581 8.5 24.1003V24.1003V23.8999V23.8999C8.49998 20.2422 8.49996 17.3663 8.74858 15.1694C8.99902 12.9563 9.52838 11.1173 10.8471 9.78683C11.8188 8.80646 13.025 8.09345 14.3507 7.71779C16.1546 7.20662 18.0106 7.64551 20.0464 8.51142C22.0661 9.37044 24.7263 10.8818 27.8811 12.6741Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Pause icon (two rounded vertical bars) used in the controls bar.
+ * Figma: provided in a 96×40 combined transport row. Only the two
+ * bar paths (middle section, x ≈ 33–63 in the 96-unit space) are
+ * extracted here; translated by -27.995 to centre them in a 40×40 viewBox.
+ * Used at 40×40 px.
+ */

package/src/icons/PlayIcon.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 PlayIcon() {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 29.166 29.166"
+      fill="none"
+      aria-hidden="true"
+    >
+      <path
+        fill="currentColor"
+        d="M5 3.5C5 2.119 6.508 1.294 7.686 2.022L25.769 13.021C26.899 13.719 26.899 15.447 25.769 16.145L7.686 27.144C6.508 27.872 5 27.047 5 25.666V3.5Z"
+      />
+    </svg>
+  );
+}
+
+/** go-forward-10-sec — viewBox 0 0 17.917 17.918 */

package/src/icons/PlayIconSolid.tsx

@@ -0,0 +1,33 @@
+import type { SVGProps } from 'react';
+
+export function PlayIconSolid(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      fill="none"
+      width="100%"
+      height="100%"
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.23464 4.19117L9.29367 4.22471C10.3823 4.84316 11.2378 5.32917 11.8472 5.77436C12.4609 6.22261 12.9147 6.69113 13.0772 7.30881C13.1964 7.76179 13.1964 8.23829 13.0772 8.69127C12.9147 9.30895 12.4609 9.77747 11.8472 10.2257C11.2378 10.6709 10.3823 11.1569 9.2937 11.7754L9.23465 11.8089C8.18305 12.4063 7.35533 12.8766 6.68213 13.1629C6.00351 13.4516 5.38484 13.5979 4.78355 13.4275C4.34166 13.3023 3.93959 13.0646 3.61569 12.7378C3.1761 12.2943 2.99965 11.6813 2.91617 10.9436C2.8333 10.2113 2.83331 9.25269 2.83331 8.03344V7.96665C2.83331 6.74739 2.8333 5.78877 2.91617 5.05647C2.99965 4.31877 3.1761 3.70578 3.61569 3.26228C3.93959 2.93549 4.34166 2.69782 4.78355 2.5726C5.38484 2.40221 6.00351 2.5485 6.68213 2.83714C7.35533 3.12348 8.18305 3.59373 9.23464 4.19117ZM6.29072 3.75736C5.67588 3.49585 5.32247 3.45926 5.05619 3.53471C4.7807 3.61278 4.52916 3.76119 4.32593 3.96623C4.12802 4.16591 3.98572 4.49828 3.90983 5.16892C3.83408 5.83828 3.83331 6.74013 3.83331 8.00004C3.83331 9.25995 3.83408 10.1618 3.90983 10.8312C3.98572 11.5018 4.12802 11.8342 4.32593 12.0338C4.52916 12.2389 4.7807 12.3873 5.05619 12.4654C5.32247 12.5408 5.67588 12.5042 6.29072 12.2427C6.9047 11.9816 7.68265 11.5405 8.77016 10.9227C9.89474 10.2838 10.6998 9.82553 11.2574 9.41822C11.8163 9.00995 12.0371 8.71445 12.1102 8.43677C12.1855 8.15061 12.1855 7.84947 12.1102 7.56331C12.0371 7.28563 11.8163 6.99014 11.2574 6.58186C10.6998 6.17456 9.89474 5.7163 8.77016 5.0774C7.68265 4.45956 6.9047 4.01851 6.29072 3.75736Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.23464 4.19117L9.29367 4.22471C10.3823 4.84316 11.2378 5.32917 11.8472 5.77436C12.4609 6.22261 12.9147 6.69113 13.0772 7.30881C13.1369 7.53533 13.1666 7.76771 13.1666 8.00004C13.1666 8.27618 12.9428 8.50004 12.6666 8.50004C12.3905 8.50004 12.1666 8.27618 12.1666 8.00004C12.1666 7.85318 12.1478 7.70636 12.1102 7.56331C12.0371 7.28563 11.8163 6.99014 11.2574 6.58186C10.6998 6.17456 9.89474 5.7163 8.77016 5.0774C7.68265 4.45956 6.9047 4.01851 6.29072 3.75736C5.67588 3.49585 5.32247 3.45926 5.05619 3.53471C4.7807 3.61278 4.52916 3.76119 4.32593 3.96623C4.12802 4.16591 3.98572 4.49828 3.90983 5.16892C3.83408 5.83828 3.83331 6.74013 3.83331 8.00004C3.83331 8.27618 3.60946 8.50004 3.33331 8.50004C3.05717 8.50004 2.83331 8.27618 2.83331 8.00004L2.83331 7.96665C2.83331 6.74739 2.8333 5.78877 2.91617 5.05647C2.99965 4.31877 3.1761 3.70578 3.61569 3.26228C3.93959 2.93549 4.34166 2.69782 4.78355 2.5726C5.38484 2.40221 6.00351 2.5485 6.68213 2.83714C7.35533 3.12348 8.18305 3.59373 9.23464 4.19117Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Play icon — Outline / ring only (Path 1 at full opacity, no Path 2).
+ * Used as the trailing icon where a lighter weight appearance is needed.
+ */

package/src/icons/PlayIconStroke.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react';
+
+export function PlayIconStroke(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      fill="none"
+      width="100%"
+      height="100%"
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.23464 4.19117L9.29367 4.22471C10.3823 4.84316 11.2378 5.32917 11.8472 5.77436C12.4609 6.22261 12.9147 6.69113 13.0772 7.30881C13.1964 7.76179 13.1964 8.23829 13.0772 8.69127C12.9147 9.30895 12.4609 9.77747 11.8472 10.2257C11.2378 10.6709 10.3823 11.1569 9.2937 11.7754L9.23465 11.8089C8.18305 12.4063 7.35533 12.8766 6.68213 13.1629C6.00351 13.4516 5.38484 13.5979 4.78355 13.4275C4.34166 13.3023 3.93959 13.0646 3.61569 12.7378C3.1761 12.2943 2.99965 11.6813 2.91617 10.9436C2.8333 10.2113 2.83331 9.25269 2.83331 8.03344V7.96665C2.83331 6.74739 2.8333 5.78877 2.91617 5.05647C2.99965 4.31877 3.1761 3.70578 3.61569 3.26228C3.93959 2.93549 4.34166 2.69782 4.78355 2.5726C5.38484 2.40221 6.00351 2.5485 6.68213 2.83714C7.35533 3.12348 8.18305 3.59373 9.23464 4.19117ZM6.29072 3.75736C5.67588 3.49585 5.32247 3.45926 5.05619 3.53471C4.7807 3.61278 4.52916 3.76119 4.32593 3.96623C4.12802 4.16591 3.98572 4.49828 3.90983 5.16892C3.83408 5.83828 3.83331 6.74013 3.83331 8.00004C3.83331 9.25995 3.83408 10.1618 3.90983 10.8312C3.98572 11.5018 4.12802 11.8342 4.32593 12.0338C4.52916 12.2389 4.7807 12.3873 5.05619 12.4654C5.32247 12.5408 5.67588 12.5042 6.29072 12.2427C6.9047 11.9816 7.68265 11.5405 8.77016 10.9227C9.89474 10.2838 10.6998 9.82553 11.2574 9.41822C11.8163 9.00995 12.0371 8.71445 12.1102 8.43677C12.1855 8.15061 12.1855 7.84947 12.1102 7.56331C12.0371 7.28563 11.8163 6.99014 11.2574 6.58186C10.6998 6.17456 9.89474 5.7163 8.77016 5.0774C7.68265 4.45956 6.9047 4.01851 6.29072 3.75736Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/icons/PlayIconTwotone.tsx

@@ -0,0 +1,36 @@
+import type { SVGProps } from 'react';
+
+export function PlayIconTwotone(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      fill="none"
+      width="100%"
+      height="100%"
+      aria-hidden="true"
+      {...props}
+    >
+      {/* Outer ring at 0.4 opacity — dimmed background layer */}
+      <path
+        opacity="0.4"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.23464 4.19117L9.29367 4.22471C10.3823 4.84316 11.2378 5.32917 11.8472 5.77436C12.4609 6.22261 12.9147 6.69113 13.0772 7.30881C13.1964 7.76179 13.1964 8.23829 13.0772 8.69127C12.9147 9.30895 12.4609 9.77747 11.8472 10.2257C11.2378 10.6709 10.3823 11.1569 9.2937 11.7754L9.23465 11.8089C8.18305 12.4063 7.35533 12.8766 6.68213 13.1629C6.00351 13.4516 5.38484 13.5979 4.78355 13.4275C4.34166 13.3023 3.93959 13.0646 3.61569 12.7378C3.1761 12.2943 2.99965 11.6813 2.91617 10.9436C2.8333 10.2113 2.83331 9.25269 2.83331 8.03344V7.96665C2.83331 6.74739 2.8333 5.78877 2.91617 5.05647C2.99965 4.31877 3.1761 3.70578 3.61569 3.26228C3.93959 2.93549 4.34166 2.69782 4.78355 2.5726C5.38484 2.40221 6.00351 2.5485 6.68213 2.83714C7.35533 3.12348 8.18305 3.59373 9.23464 4.19117ZM6.29072 3.75736C5.67588 3.49585 5.32247 3.45926 5.05619 3.53471C4.7807 3.61278 4.52916 3.76119 4.32593 3.96623C4.12802 4.16591 3.98572 4.49828 3.90983 5.16892C3.83408 5.83828 3.83331 6.74013 3.83331 8.00004C3.83331 9.25995 3.83408 10.1618 3.90983 10.8312C3.98572 11.5018 4.12802 11.8342 4.32593 12.0338C4.52916 12.2389 4.7807 12.3873 5.05619 12.4654C5.32247 12.5408 5.67588 12.5042 6.29072 12.2427C6.9047 11.9816 7.68265 11.5405 8.77016 10.9227C9.89474 10.2838 10.6998 9.82553 11.2574 9.41822C11.8163 9.00995 12.0371 8.71445 12.1102 8.43677C12.1855 8.15061 12.1855 7.84947 12.1102 7.56331C12.0371 7.28563 11.8163 6.99014 11.2574 6.58186C10.6998 6.17456 9.89474 5.7163 8.77016 5.0774C7.68265 4.45956 6.9047 4.01851 6.29072 3.75736Z"
+        fill="currentColor"
+      />
+      {/* Solid foreground shape */}
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.23464 4.19117L9.29367 4.22471C10.3823 4.84316 11.2378 5.32917 11.8472 5.77436C12.4609 6.22261 12.9147 6.69113 13.0772 7.30881C13.1369 7.53533 13.1666 7.76771 13.1666 8.00004C13.1666 8.27618 12.9428 8.50004 12.6666 8.50004C12.3905 8.50004 12.1666 8.27618 12.1666 8.00004C12.1666 7.85318 12.1478 7.70636 12.1102 7.56331C12.0371 7.28563 11.8163 6.99014 11.2574 6.58186C10.6998 6.17456 9.89474 5.7163 8.77016 5.0774C7.68265 4.45956 6.9047 4.01851 6.29072 3.75736C5.67588 3.49585 5.32247 3.45926 5.05619 3.53471C4.7807 3.61278 4.52916 3.76119 4.32593 3.96623C4.12802 4.16591 3.98572 4.49828 3.90983 5.16892C3.83408 5.83828 3.83331 6.74013 3.83331 8.00004C3.83331 8.27618 3.60946 8.50004 3.33331 8.50004C3.05717 8.50004 2.83331 8.27618 2.83331 8.00004L2.83331 7.96665C2.83331 6.74739 2.8333 5.78877 2.91617 5.05647C2.99965 4.31877 3.1761 3.70578 3.61569 3.26228C3.93959 2.93549 4.34166 2.69782 4.78355 2.5726C5.38484 2.40221 6.00351 2.5485 6.68213 2.83714C7.35533 3.12348 8.18305 3.59373 9.23464 4.19117Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Play icon — Solid style (both paths at full opacity).
+ * Used as the leading icon in Active / selected states and on Brand Background.
+ */

package/src/icons/PlayVideoIcon.tsx

@@ -0,0 +1,31 @@
+import type { SVGProps } from 'react';
+
+/** Info icon — circle with question mark. Used as default `icon={true}`. */
+
+export function PlayVideoIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={48}
+    height={48}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#F3F4F6"
+      d="M27.881 12.674c3.266 1.856 5.832 3.314 7.66 4.65 1.842 1.344 3.203 2.75 3.69 4.602a8.15 8.15 0 0 1 0 4.148c-.487 1.853-1.848 3.258-3.69 4.603-1.828 1.336-4.394 2.794-7.66 4.65-3.155 1.791-5.815 3.303-7.835 4.162-2.035.866-3.891 1.305-5.695.794a8.008 8.008 0 0 1-3.504-2.07C9.528 36.883 9 35.043 8.75 32.831 8.5 30.634 8.5 27.758 8.5 24.1V23.9c0-3.658 0-6.534.249-8.73.25-2.214.78-4.053 2.098-5.383a8.007 8.007 0 0 1 3.504-2.07c1.804-.51 3.66-.071 5.695.794 2.02.86 4.68 2.37 7.835 4.163Z"
+    />
+  </svg>
+  )
+}
+/**
+ * Question mark icon — dark-filled circle with a white "?" mark (18 × 18).
+ *
+ * The circle fill uses `currentColor` so the parent's `text-*` class drives
+ * the background colour:
+ *   light mode → text-[rgba(56,66,80,1)]  (Icon/icon-neutral  = #384250)
+ *   dark  mode → text-[rgba(157,164,174,1)] (Icon/icon-default-400 = #9DA4AE)
+ *
+ * The "?" body and dot paths are hardcoded white so they stay legible on any
+ * dark circle colour. viewBox sourced from Figma (18 × 18).
+ */

package/src/icons/PlusCircleIcon.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+
+/**
+ * Card icons — colocated inside the package so the component has no
+ * dependency on the host app's `/public` folder. All icons use
+ * `currentColor`.
+ */
+
+type IconProps = React.SVGProps<SVGSVGElement>;
+
+const base20: IconProps = {
+  xmlns: 'http://www.w3.org/2000/svg',
+  width: 20,
+  height: 20,
+  viewBox: '0 0 20 20',
+  fill: 'none',
+  'aria-hidden': true,
+};
+
+const base24: IconProps = {
+  xmlns: 'http://www.w3.org/2000/svg',
+  width: 24,
+  height: 24,
+  viewBox: '0 0 24 24',
+  fill: 'none',
+  'aria-hidden': true,
+};
+
+/* More-vertical (kebab) — used in Card header action button */
+
+export const PlusCircleIcon = (props: IconProps) => (
+  <svg {...base24} {...props}>
+    <path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M12 8v8m-4-4h8m6 0a10 10 0 1 1-20 0 10 10 0 0 1 20 0Z"
+    />
+  </svg>
+);

package/src/icons/PlusIcon.tsx

@@ -0,0 +1,43 @@
+/**
+ * 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 PlusIcon({ 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="M12 5v14M5 12h14"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Unfold-more (↕) — paired up + down chevrons, 24×24 viewport.
+ * Used as the expand / dropdown trigger variant (Figma Type=Arrow).
+ */

package/src/icons/PreviousIcon.tsx

@@ -0,0 +1,44 @@
+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 PreviousIcon(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}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.43457 2.5C3.8947 2.5 4.2674 2.87292 4.26758 3.33301L4.26758 16.667C4.2674 17.1271 3.8947 17.5 3.43457 17.5C2.97444 17.5 2.60174 17.1271 2.60156 16.667L2.60156 3.33301C2.60174 2.87292 2.97444 2.5 3.43457 2.5ZM13.0312 3.99414C13.808 3.6189 14.5463 3.40986 15.2754 3.63281C15.7054 3.76429 16.0988 3.99544 16.4277 4.30566C16.9783 4.82497 17.1925 5.57094 17.293 6.45215C17.3931 7.33064 17.3926 8.48896 17.3926 9.95801V10.042C17.3926 11.511 17.3931 12.6694 17.293 13.5479C17.1925 14.4291 16.9783 15.175 16.4277 15.6943C16.0988 16.0046 15.7054 16.2357 15.2754 16.3672C14.5463 16.5901 13.808 16.3811 13.0313 16.0059C12.2593 15.6329 11.3128 15.0249 10.1182 14.2568L10.0439 14.209C8.94692 13.5037 8.07466 12.9435 7.45508 12.4307C6.82478 11.9089 6.35924 11.3604 6.20996 10.6494C6.1202 10.2215 6.1202 9.7785 6.20996 9.35059C6.35924 8.63955 6.82478 8.09108 7.45508 7.56934C8.07467 7.0565 8.94692 6.49626 10.0439 5.79102L10.1182 5.74316C11.3128 4.97513 12.2593 4.36711 13.0312 3.99414Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Skip-forward / Next icon.
+ * Figma: 20×20 px. Right-pointing play triangle + vertical bar on right.
+ */

package/src/icons/PrintIcon.tsx

@@ -0,0 +1,25 @@
+import type { SVGProps } from 'react';
+
+/** Arrow pointing left — used for "previous" navigation. */
+
+export function PrintIcon(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}
+    >
+      <polyline points="6 9 6 2 18 2 18 9" />
+      <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" />
+      <rect x="6" y="14" width="12" height="8" />
+    </svg>
+  );
+}
+
+/** Close — X icon. */

package/src/icons/QuestionMarkGrayBgIcon.tsx

@@ -0,0 +1,52 @@
+import type { SVGProps } from 'react';
+
+/**
+ * Question mark in a gray circle (20 × 20).
+ * Used as the HelpIcon trigger button.
+ *
+ * Colors are intentionally hardcoded — this is a two-colour icon
+ * (white fill + Figma variable Icon/icon-default-400 = #9DA4AE) and
+ * cannot be driven by a single `currentColor` value.
+ * viewBox sourced from Figma node I5024:59535.
+ */
+
+export function QuestionMarkGrayBgIcon(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}
+    >
+      {/* White circle background */}
+      <path
+        fill="#fff"
+        fillRule="evenodd"
+        d="M10.003 19.166a9.167 9.167 0 1 0 0-18.333 9.167 9.167 0 0 0 0 18.333Z"
+        clipRule="evenodd"
+      />
+      {/* Gray circle outline + question mark — Icon/icon-default-400 (#9DA4AE) */}
+      <path
+        fill="#9DA4AE"
+        fillRule="evenodd"
+        d="M19.17 10A9.167 9.167 0 1 1 .835 10a9.167 9.167 0 0 1 18.333 0ZM9.016 6.896a1.667 1.667 0 0 1 2.51 1.44c0 .392-.303.8-.878 1.182a5.045 5.045 0 0 1-1.039.524l-.013.004a.833.833 0 0 0 .528 1.581l-.264-.79.265.79h.001l.003-.002.01-.003.028-.01a6.502 6.502 0 0 0 .422-.17c.263-.117.62-.295.983-.537.676-.45 1.621-1.292 1.621-2.567a3.333 3.333 0 0 0-6.477-1.111.833.833 0 1 0 1.572.553c.13-.371.388-.684.728-.884Zm.91 6.44a.833.833 0 0 0 0 1.667h.01a.833.833 0 0 0 0-1.666h-.01Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Question mark icon — dark-filled circle with a white "?" mark (18 × 18).
+ * Used as the leading icon inside the HelpIcon tooltip body.
+ *
+ * Circle fill uses `currentColor` so the parent's `text-*` class controls
+ * the background colour:
+ *   light mode → rgba(56,66,80,1)   = Icon/icon-neutral   (#384250)
+ *   dark  mode → rgba(157,164,174,1) = Icon/icon-default-400 (#9DA4AE)
+ *
+ * viewBox sourced from Figma (18 × 18).
+ */

package/src/icons/QuestionMarkIcon.tsx

@@ -0,0 +1,47 @@
+import type { SVGProps } from 'react';
+
+/**
+ * Question mark in a gray circle (20 × 20).
+ * Used as the HelpIcon trigger button.
+ *
+ * Colors are intentionally hardcoded — this is a two-colour icon
+ * (white fill + Figma variable Icon/icon-default-400 = #9DA4AE) and
+ * cannot be driven by a single `currentColor` value.
+ * viewBox sourced from Figma node I5024:59535.
+ */
+
+export function QuestionMarkIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      viewBox="0 0 18 18"
+      fill="none"
+      aria-hidden="true"
+      {...props}
+    >
+      {/* Dark-filled circle — colour driven by currentColor (ICON_TYPE class) */}
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M9 17.25A8.25 8.25 0 1 0 9 .75a8.25 8.25 0 0 0 0 16.5Z"
+        clipRule="evenodd"
+      />
+      {/* White "?" body */}
+      <path
+        fill="#fff"
+        fillRule="evenodd"
+        d="M8.113 6.207a1.5 1.5 0 0 1 2.26 1.295v.001c0 .352-.274.719-.791 1.064a4.536 4.536 0 0 1-.935.47l-.012.005a.75.75 0 0 0 .475 1.423l-.237-.712.238.712h.001l.003-.002.008-.003.026-.009a5.862 5.862 0 0 0 .38-.153c.237-.105.558-.265.885-.483.607-.405 1.458-1.163 1.459-2.311a3 3 0 0 0-5.83-1 .75.75 0 0 0 1.415.498 1.5 1.5 0 0 1 .655-.795Z"
+        clipRule="evenodd"
+      />
+      {/* White "?" dot */}
+      <path
+        fill="#fff"
+        fillRule="evenodd"
+        d="M8.933 12.003a.75.75 0 1 0 0 1.5h.007a.75.75 0 0 0 0-1.5h-.007Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}

package/src/icons/RedoIcon.tsx

@@ -0,0 +1,41 @@
+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 RedoIcon({ 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 8H9C5.68629 8 3 10.6863 3 14C3 17.3137 5.68629 20 9 20H13"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M17 4L18.1538 4.87652C20.0513 6.31801 21 7.03875 21 8C21 8.96125 20.0513 9.68199 18.1538 11.1235L17 12"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Bold icon (text-bold) — 16×16 px.
+ * Figma: node inside Rich Text Editor 6259:88649
+ */