sdaia-ui 1.0.1

package/src/icons/InfoCircleIcon.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+/**
+ * ProgressBar feedback icons — colocated inside the package so the
+ * component has no dependency on the host app's `/public` folder.
+ * Both icons use `currentColor` so the parent's text color drives
+ * the stroke (in Figma the icons inherit `Icon/icon-neutral`).
+ */
+
+type IconProps = React.SVGProps<SVGSVGElement>;
+
+const base: IconProps = {
+  xmlns: 'http://www.w3.org/2000/svg',
+  width: 14,
+  height: 14,
+  viewBox: '0 0 14 14',
+  fill: 'none',
+  'aria-hidden': true,
+};
+
+export const InfoCircleIcon = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M7.001 9.334V7m0-2.333h.006M12.835 7A5.833 5.833 0 1 1 1.168 7a5.833 5.833 0 0 1 11.667 0Z"
+    />
+  </svg>
+);

package/src/icons/InfoCircleSVG.tsx

@@ -0,0 +1,20 @@
+import * as React from "react"
+const InfoCircleSVG = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={14}
+    height={14}
+    viewBox="0 0 14 14"
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="rgba(56, 66, 80, 1)"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M7.001 9.334V7m0-2.333h.006M12.835 7A5.833 5.833 0 1 1 1.168 7a5.833 5.833 0 0 1 11.667 0Z"
+    />
+  </svg>
+)
+export default InfoCircleSVG

package/src/icons/InfoIcon.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 InfoIcon = (props: IconProps) => (
+  <svg {...base} {...props}>
+    <path
+      fill="currentColor"
+      d="M10 1.042A8.958 8.958 0 0 1 18.958 10 8.958 8.958 0 0 1 10 18.958 8.958 8.958 0 0 1 1.042 10 8.958 8.958 0 0 1 10 1.042Zm0 1.25a7.708 7.708 0 1 0 0 15.416 7.708 7.708 0 1 0 0-15.416Zm.001 9.375a.833.833 0 1 1 0 1.666h-.008a.833.833 0 0 1 0-1.666h.008ZM10 6.042c.345 0 .625.28.625.625V10a.625.625 0 1 1-1.25 0V6.667c0-.345.28-.625.625-.625Z"
+    />
+  </svg>
+);

package/src/icons/ItalicIcon.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 ItalicIcon({ 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="M19 3.25C19.4142 3.25 19.75 3.58579 19.75 4C19.75 4.41421 19.4142 4.75 19 4.75H16.4639L9.21387 19.25H12C12.4142 19.25 12.75 19.5858 12.75 20C12.75 20.4142 12.4142 20.75 12 20.75H5C4.58579 20.75 4.25 20.4142 4.25 20C4.25 19.5858 4.58579 19.25 5 19.25H7.53613L14.7861 4.75H12C11.5858 4.75 11.25 4.41421 11.25 4C11.25 3.58579 11.5858 3.25 12 3.25H19Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Underline icon (text-underline) — 24×24 px.
+ * Figma: node inside Rich Text Editor 6259:88649
+ */

package/src/icons/LearnMoreArrowIcon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react';
+
+/** Horizontal arrow pointing inline-end — used as the trailing icon on "Learn more" buttons. */
+export function LearnMoreArrowIcon(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
+        fill="currentColor"
+        d="M12.058 5.39a.626.626 0 0 1 .884 0l4.166 4.167a.623.623 0 0 1 .114.16c.006.014.015.027.021.04.009.02.014.042.02.062.017.057.029.117.029.179a.622.622 0 0 1-.027.169c-.007.024-.012.048-.022.071-.006.014-.014.027-.021.04a.62.62 0 0 1-.114.162l-4.166 4.167a.626.626 0 0 1-.884-.883l3.1-3.101H3.333a.625.625 0 0 1 0-1.25h11.825l-3.1-3.1a.626.626 0 0 1 0-.883Z"
+      />
+    </svg>
+  );
+}
+
+export default LearnMoreArrowIcon;

package/src/icons/LinkCircleSVG.tsx

@@ -0,0 +1,58 @@
+import * as React from "react"
+const LinkCircleSVG = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={52}
+    height={52}
+    fill="none"
+    {...props}
+  >
+    <g filter="url(#a)">
+      <path
+        stroke="#067647"
+        d="M26 1.5c12.979 0 23.5 10.521 23.5 23.5S38.979 48.5 26 48.5 2.5 37.979 2.5 25 13.021 1.5 26 1.5Z"
+        shapeRendering="crispEdges"
+      />
+      <path
+        fill="#067647"
+        d="M33.468 17.598a4.314 4.314 0 0 0-6.265 0l-.714.742a.75.75 0 0 0 1.082 1.04l.713-.743a2.814 2.814 0 0 1 4.102 0c1.152 1.2 1.152 3.155 0 4.355l-3.24 3.371c-.18.187-.375.343-.581.47a2.81 2.81 0 0 1-3.52-.47 3.049 3.049 0 0 1-.405-.525.75.75 0 0 0-1.28.782c.17.277.37.54.604.782a4.31 4.31 0 0 0 5.386.71c.315-.194.61-.43.878-.71l3.24-3.37c1.71-1.78 1.71-4.655 0-6.434Z"
+      />
+      <path
+        fill="#067647"
+        d="M28.037 22.598a4.314 4.314 0 0 0-6.265 0l-3.24 3.37c-1.71 1.78-1.71 4.655 0 6.435a4.314 4.314 0 0 0 6.265 0l.714-.743a.75.75 0 0 0-1.081-1.04l-.714.743a2.814 2.814 0 0 1-4.102 0c-1.152-1.2-1.152-3.155 0-4.355l3.24-3.371a2.814 2.814 0 0 1 4.101 0c.156.162.291.339.405.525a.75.75 0 0 0 1.28-.782c-.17-.278-.37-.54-.603-.782Z"
+      />
+    </g>
+    <defs>
+      <filter
+        id="a"
+        width={52}
+        height={52}
+        x={0}
+        y={0}
+        colorInterpolationFilters="sRGB"
+        filterUnits="userSpaceOnUse"
+      >
+        <feFlood floodOpacity={0} result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          result="hardAlpha"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        />
+        <feOffset dy={1} />
+        <feGaussianBlur stdDeviation={1} />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0" />
+        <feBlend
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_7363_37203"
+        />
+        <feBlend
+          in="SourceGraphic"
+          in2="effect1_dropShadow_7363_37203"
+          result="shape"
+        />
+      </filter>
+    </defs>
+  </svg>
+)
+ export default LinkCircleSVG

package/src/icons/LinkIcon.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 LinkIcon({ 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
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.62315 8.86045C6.91601 8.56759 7.39079 8.56766 7.68369 8.86045C7.97659 9.15335 7.97659 9.62811 7.68369 9.921L5.07432 12.5304C3.30844 14.2964 3.30837 17.1599 5.07432 18.9259C6.84027 20.6918 9.70384 20.6918 11.4698 18.9259L14.0792 16.3165C14.3721 16.0236 14.8469 16.0236 15.1397 16.3165C15.4325 16.6094 15.4326 17.0842 15.1397 17.3771L12.5304 19.9864C10.1786 22.3381 6.36551 22.3382 4.01377 19.9864C1.66204 17.6347 1.66211 13.8216 4.01377 11.4698L6.62315 8.86045ZM11.4698 4.01377C13.8216 1.66211 17.6347 1.66204 19.9864 4.01377C22.3382 6.36551 22.3381 10.1786 19.9864 12.5304L17.3771 15.1397C17.0842 15.4326 16.6094 15.4325 16.3165 15.1397C16.0236 14.8469 16.0236 14.3721 16.3165 14.0792L18.9259 11.4698C20.6918 9.70384 20.6918 6.84027 18.9259 5.07432C17.1599 3.30837 14.2964 3.30844 12.5304 5.07432L9.921 7.68369C9.62811 7.97659 9.15335 7.97659 8.86045 7.68369C8.56766 7.39079 8.56759 6.91601 8.86045 6.62315L11.4698 4.01377ZM13.9698 8.96983C14.2627 8.67693 14.7375 8.67693 15.0304 8.96983C15.3233 9.26272 15.3233 9.73748 15.0304 10.0304L10.0304 15.0304C9.73748 15.3233 9.26272 15.3233 8.96983 15.0304C8.67693 14.7375 8.67693 14.2627 8.96983 13.9698L13.9698 8.96983Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Image icon (image-01) — 24×24 px.
+ * Figma: node inside Rich Text Editor 6259:88649
+ */

package/src/icons/ListLinesIcon.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 ListLinesIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      {/* Middle bar — 40 % opacity */}
+      <path
+        opacity="0.4"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.53168 9.32334C2.79738 9.26497 3.0942 9.25 3.4 9.25H20.6C20.9058 9.25 21.2026 9.26497 21.4683 9.32334C21.7425 9.38357 22.0291 9.49978 22.2647 9.73532C22.5002 9.97086 22.6164 10.2575 22.6767 10.5317C22.735 10.7974 22.75 11.0942 22.75 11.4V12.6C22.75 12.9058 22.735 13.2026 22.6767 13.4683C22.6164 13.7425 22.5002 14.0291 22.2647 14.2647C22.0291 14.5002 21.7425 14.6164 21.4683 14.6767C21.2026 14.735 20.9058 14.75 20.6 14.75H3.4C3.0942 14.75 2.79738 14.735 2.53168 14.6767C2.25749 14.6164 1.97086 14.5002 1.73532 14.2647C1.49978 14.0291 1.38357 13.7425 1.32334 13.4683C1.26497 13.2026 1.25 12.9058 1.25 12.6V11.4C1.25 11.0942 1.26497 10.7974 1.32334 10.5317C1.38357 10.2575 1.49978 9.97086 1.73532 9.73532C1.97086 9.49978 2.25749 9.38357 2.53168 9.32334ZM2.7884 10.8535C2.76525 10.9589 2.75 11.1267 2.75 11.4V12.6C2.75 12.8733 2.76525 13.0411 2.7884 13.1465C2.79336 13.169 2.79807 13.1859 2.80198 13.198C2.81413 13.2019 2.83095 13.2066 2.85353 13.2116C2.95892 13.2348 3.12666 13.25 3.4 13.25H20.6C20.8733 13.25 21.0411 13.2348 21.1465 13.2116C21.169 13.2066 21.1859 13.2019 21.198 13.198C21.2019 13.1859 21.2066 13.169 21.2116 13.1465C21.2348 13.0411 21.25 12.8733 21.25 12.6V11.4C21.25 11.1267 21.2348 10.9589 21.2116 10.8535C21.2066 10.831 21.2019 10.8141 21.198 10.802C21.1859 10.7981 21.169 10.7934 21.1465 10.7884C21.0411 10.7652 20.8733 10.75 20.6 10.75H3.4C3.12666 10.75 2.95892 10.7652 2.85353 10.7884C2.83095 10.7934 2.81413 10.7981 2.80198 10.802C2.79807 10.8141 2.79336 10.831 2.7884 10.8535Z"
+        fill="currentColor"
+      />
+      {/* Top bar and bottom bar — full opacity */}
+      <path
+        d="M20.5996 17.25C20.9054 17.25 21.203 17.2649 21.4688 17.3232C21.7428 17.3835 22.0292 17.4999 22.2646 17.7354C22.5001 17.9708 22.6165 18.2572 22.6768 18.5312C22.7351 18.797 22.75 19.0946 22.75 19.4004V20.5996C22.75 20.9054 22.7351 21.203 22.6768 21.4688C22.6165 21.7428 22.5001 22.0292 22.2646 22.2646C22.0292 22.5001 21.7428 22.6165 21.4688 22.6768C21.203 22.7351 20.9054 22.75 20.5996 22.75H3.40039C3.09459 22.75 2.79695 22.7351 2.53125 22.6768C2.25717 22.6165 1.97078 22.5001 1.73535 22.2646C1.49993 22.0292 1.3835 21.7428 1.32324 21.4688C1.26487 21.203 1.25 20.9054 1.25 20.5996V19.4004C1.25 19.0946 1.26487 18.797 1.32324 18.5312C1.3835 18.2572 1.49993 17.9708 1.73535 17.7354C1.97078 17.4999 2.25717 17.3835 2.53125 17.3232C2.79695 17.2649 3.09459 17.25 3.40039 17.25H20.5996ZM3.40039 18.75C3.1271 18.75 2.9589 18.7649 2.85352 18.7881C2.83094 18.793 2.8139 18.7978 2.80176 18.8018C2.79784 18.8139 2.79305 18.8309 2.78809 18.8535C2.76494 18.9589 2.75 19.1271 2.75 19.4004V20.5996C2.75 20.8729 2.76494 21.0411 2.78809 21.1465C2.79305 21.1691 2.79784 21.1861 2.80176 21.1982C2.8139 21.2022 2.83094 21.207 2.85352 21.2119C2.9589 21.2351 3.1271 21.25 3.40039 21.25H20.5996C20.8729 21.25 21.0411 21.2351 21.1465 21.2119C21.1691 21.207 21.1861 21.2022 21.1982 21.1982C21.2022 21.1861 21.207 21.1691 21.2119 21.1465C21.2351 21.0411 21.25 20.8729 21.25 20.5996V19.4004C21.25 19.1271 21.2351 18.9589 21.2119 18.8535C21.207 18.8309 21.2022 18.8139 21.1982 18.8018C21.1861 18.7978 21.1691 18.793 21.1465 18.7881C21.0411 18.7649 20.8729 18.75 20.5996 18.75H3.40039ZM20.5996 1.25C20.9054 1.25 21.203 1.26487 21.4688 1.32324C21.7428 1.3835 22.0292 1.49993 22.2646 1.73535C22.5001 1.97078 22.6165 2.25717 22.6768 2.53125C22.7351 2.79695 22.75 3.09459 22.75 3.40039V4.59961C22.75 4.90541 22.7351 5.20305 22.6768 5.46875C22.6165 5.74283 22.5001 6.02922 22.2646 6.26465C22.0292 6.50007 21.7428 6.6165 21.4688 6.67676C21.203 6.73513 20.9054 6.75 20.5996 6.75H3.40039C3.09459 6.75 2.79695 6.73513 2.53125 6.67676C2.25717 6.6165 1.97078 6.50007 1.73535 6.26465C1.49993 6.02922 1.3835 5.74283 1.32324 5.46875C1.26487 5.20305 1.25 4.90541 1.25 4.59961V3.40039C1.25 3.09459 1.26487 2.79695 1.32324 2.53125C1.3835 2.25717 1.49993 1.97078 1.73535 1.73535C1.97078 1.49993 2.25717 1.3835 2.53125 1.32324C2.79695 1.26487 3.09459 1.25 3.40039 1.25H20.5996ZM3.40039 2.75C3.1271 2.75 2.9589 2.76494 2.85352 2.78809C2.83094 2.79305 2.8139 2.79784 2.80176 2.80176C2.79784 2.8139 2.79305 2.83094 2.78809 2.85352C2.76494 2.9589 2.75 3.1271 2.75 3.40039V4.59961C2.75 4.8729 2.76494 5.0411 2.78809 5.14648C2.79305 5.16906 2.79784 5.1861 2.80176 5.19824C2.8139 5.20216 2.83094 5.20695 2.85352 5.21191C2.9589 5.23506 3.1271 5.25 3.40039 5.25H20.5996C20.8729 5.25 21.0411 5.23506 21.1465 5.21191C21.1691 5.20695 21.1861 5.20216 21.1982 5.19824C21.2022 5.1861 21.207 5.16906 21.2119 5.14648C21.2351 5.0411 21.25 4.8729 21.25 4.59961V3.40039C21.25 3.1271 21.2351 2.9589 21.2119 2.85352C21.207 2.83094 21.2022 2.8139 21.1982 2.80176C21.1861 2.79784 21.1691 2.79305 21.1465 2.78809C21.0411 2.76494 20.8729 2.75 20.5996 2.75H3.40039Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Grid-view icon — 2×2 squares.
+ * Top-right square rendered at 40 % opacity (Figma two-tone style).
+ * Used for the grid view toggle button in the desktop toolbar.
+ */

package/src/icons/LockCircleSVG.tsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+const LockCircleSVG = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={52}
+    height={52}
+    fill="none"
+    {...props}
+  >
+    <g filter="url(#a)">
+      <path
+        stroke="#067647"
+        d="M26 1.5c12.979 0 23.5 10.521 23.5 23.5S38.979 48.5 26 48.5 2.5 37.979 2.5 25 13.021 1.5 26 1.5Z"
+        shapeRendering="crispEdges"
+      />
+      <path
+        fill="#067647"
+        d="M22.5 28.5a1 1 0 0 1 1-1h.009a1 1 0 1 1 0 2H23.5a1 1 0 0 1-1-1ZM27.491 28.5a1 1 0 0 1 1-1h.009a1 1 0 1 1 0 2h-.009a1 1 0 0 1-1-1Z"
+      />
+      <path
+        fill="#067647"
+        fillRule="evenodd"
+        d="M20.75 21.46V19.5a5.25 5.25 0 1 1 10.5 0v1.96c1.69.403 2.989 1.838 3.225 3.595.149 1.1.275 2.257.275 3.445 0 1.188-.126 2.344-.275 3.445-.271 2.017-1.942 3.61-4 3.705-1.429.066-2.88.1-4.475.1-1.596 0-3.046-.034-4.475-.1-2.058-.094-3.729-1.688-4-3.705-.149-1.1-.275-2.257-.275-3.445 0-1.188.126-2.344.274-3.445.237-1.757 1.535-3.192 3.226-3.596Zm1.5-1.96a3.75 3.75 0 1 1 7.5 0v1.82a97.432 97.432 0 0 0-3.75-.07c-1.327 0-2.553.024-3.75.07V19.5ZM26 22.75c-1.574 0-3.001.034-4.406.098-1.309.06-2.405 1.084-2.583 2.407-.145 1.08-.261 2.158-.261 3.245 0 1.087.116 2.165.261 3.245.178 1.323 1.274 2.347 2.583 2.407 1.405.064 2.832.098 4.406.098 1.574 0 3.001-.034 4.406-.098 1.309-.06 2.405-1.084 2.583-2.407.145-1.08.261-2.158.261-3.245 0-1.087-.116-2.165-.261-3.245-.178-1.323-1.274-2.346-2.583-2.407A94.654 94.654 0 0 0 26 22.75Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <filter
+        id="a"
+        width={52}
+        height={52}
+        x={0}
+        y={0}
+        colorInterpolationFilters="sRGB"
+        filterUnits="userSpaceOnUse"
+      >
+        <feFlood floodOpacity={0} result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          result="hardAlpha"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        />
+        <feOffset dy={1} />
+        <feGaussianBlur stdDeviation={1} />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0" />
+        <feBlend
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_7363_37215"
+        />
+        <feBlend
+          in="SourceGraphic"
+          in2="effect1_dropShadow_7363_37215"
+          result="shape"
+        />
+      </filter>
+    </defs>
+  </svg>
+)
+export default LockCircleSVG

package/src/icons/LockIcon.tsx

@@ -0,0 +1,36 @@
+import type { SVGProps } from 'react';
+
+/**
+ * Lock icon — 24×24 px, `currentColor`.
+ *
+ * Padlock glyph used by content-verification UI (e.g. the HTTPS feature
+ * row in `DigitalStamp`). The raw path data lives in a 52-unit Figma
+ * source; we expose the glyph at 24×24 via a translated viewBox so
+ * consumers can size and tint it like every other IconFactory icon.
+ *
+ * Figma: Icon/icon-success — `LockCircleSVG` glyph (without the wrapper
+ * circle / drop shadow).
+ */
+export function LockIcon({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="14 12 24 24"
+      fill="none"
+      aria-hidden="true"
+      className={className}
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M22.5 28.5a1 1 0 0 1 1-1h.009a1 1 0 1 1 0 2H23.5a1 1 0 0 1-1-1ZM27.491 28.5a1 1 0 0 1 1-1h.009a1 1 0 1 1 0 2h-.009a1 1 0 0 1-1-1Z"
+      />
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M20.75 21.46V19.5a5.25 5.25 0 1 1 10.5 0v1.96c1.69.403 2.989 1.838 3.225 3.595.149 1.1.275 2.257.275 3.445 0 1.188-.126 2.344-.275 3.445-.271 2.017-1.942 3.61-4 3.705-1.429.066-2.88.1-4.475.1-1.596 0-3.046-.034-4.475-.1-2.058-.094-3.729-1.688-4-3.705-.149-1.1-.275-2.257-.275-3.445 0-1.188.126-2.344.274-3.445.237-1.757 1.535-3.192 3.226-3.596Zm1.5-1.96a3.75 3.75 0 1 1 7.5 0v1.82a97.432 97.432 0 0 0-3.75-.07c-1.327 0-2.553.024-3.75.07V19.5ZM26 22.75c-1.574 0-3.001.034-4.406.098-1.309.06-2.405 1.084-2.583 2.407-.145 1.08-.261 2.158-.261 3.245 0 1.087.116 2.165.261 3.245.178 1.323 1.274 2.347 2.583 2.407 1.405.064 2.832.098 4.406.098 1.574 0 3.001-.034 4.406-.098 1.309-.06 2.405-1.084 2.583-2.407.145-1.08.261-2.158.261-3.245 0-1.087-.116-2.165-.261-3.245-.178-1.323-1.274-2.346-2.583-2.407A94.654 94.654 0 0 0 26 22.75Z"
+      />
+    </svg>
+  );
+}

package/src/icons/Logout02Icon.tsx

@@ -0,0 +1,19 @@
+import type { SVGProps } from 'react';
+
+const Logout02Icon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={20}
+    height={20}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#6C737F"
+      fillRule="evenodd"
+      d="M8.054 1.941a.625.625 0 0 1 .56 1.118L4.533 5.1a1.042 1.042 0 0 0-.576.931v7.94c0 .394.223.755.576.931l4.08 2.04a.625.625 0 0 1-.56 1.118l-4.078-2.04a2.293 2.293 0 0 1-1.268-2.05V6.03c0-.868.491-1.662 1.268-2.05l4.078-2.039Zm6.088 5.533a.625.625 0 0 1 .883 0l2.083 2.083a.626.626 0 0 1 0 .885l-2.083 2.083a.625.625 0 0 1-.883-.884l1.016-1.016H8.333a.625.625 0 0 1 0-1.25h6.825l-1.016-1.017a.625.625 0 0 1 0-.884Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default Logout02Icon

package/src/icons/MicrophoneIcon.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from 'react';
+
+export function MicrophoneIcon(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
+        d="M16.666 8.54297C17.011 8.54314 17.291 8.8229 17.291 9.16797C17.2908 12.9844 14.3584 16.1156 10.624 16.4326V17.709H12.082C12.4271 17.709 12.7069 17.989 12.707 18.334C12.707 18.6792 12.4272 18.959 12.082 18.959H7.91602C7.57084 18.959 7.29102 18.6792 7.29102 18.334C7.29119 17.989 7.57095 17.709 7.91602 17.709H9.37402V16.4326C5.63964 16.1156 2.7072 12.9844 2.70703 9.16797C2.70703 8.8229 2.987 8.54314 3.33203 8.54297C3.67721 8.54297 3.95703 8.82279 3.95703 9.16797C3.95721 12.5045 6.66241 15.209 9.99902 15.209C13.3356 15.209 16.0408 12.5045 16.041 9.16797C16.041 8.82279 16.3208 8.54297 16.666 8.54297ZM9.99902 1.04297C12.6453 1.04297 14.7908 3.18777 14.791 5.83398V9.16797C14.7908 11.8142 12.6453 13.959 9.99902 13.959C7.35277 13.959 5.20721 11.8142 5.20703 9.16797V5.83398C5.20721 3.18777 7.35277 1.04297 9.99902 1.04297ZM9.99902 2.29297C8.04312 2.29297 6.45721 3.87813 6.45703 5.83398V9.16797C6.45721 11.1238 8.04312 12.709 9.99902 12.709C11.7416 12.709 13.189 11.4506 13.4844 9.79297H11.666C11.3209 9.79297 11.0412 9.513 11.041 9.16797C11.041 8.82279 11.3208 8.54297 11.666 8.54297H13.541V6.45898H11.666C11.3208 6.45898 11.041 6.17916 11.041 5.83398C11.0412 5.48896 11.3209 5.20898 11.666 5.20898H13.4844C13.189 3.55133 11.7416 2.29297 9.99902 2.29297Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/icons/MinusIcon.tsx

@@ -0,0 +1,40 @@
+/**
+ * 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 MinusIcon({ 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="M5 12h14"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/** Plus (+) — cross/plus, centered in a 24×24 viewport. */

package/src/icons/MoreHorizontalIcon.tsx

@@ -0,0 +1,24 @@
+import type { SVGProps } from 'react';
+
+/**
+ * Magnifying-glass search icon.
+ * Used as the prefix inside the search TextInput.
+ * Figma: search-01
+ */
+
+export function MoreHorizontalIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <circle cx="5" cy="12" r="1.5" fill="currentColor" />
+      <circle cx="12" cy="12" r="1.5" fill="currentColor" />
+      <circle cx="19" cy="12" r="1.5" fill="currentColor" />
+    </svg>
+  );
+}

package/src/icons/MoreVerticalIcon.tsx

@@ -0,0 +1,40 @@
+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 MoreVerticalIcon = (props: IconProps) => (
+  <svg {...base20} {...props}>
+    <path
+      fill="currentColor"
+      d="M10 4.167a1.458 1.458 0 1 1 0 2.916 1.458 1.458 0 0 1 0-2.916ZM10 8.542a1.458 1.458 0 1 1 0 2.916 1.458 1.458 0 0 1 0-2.916ZM10 12.917a1.458 1.458 0 1 1 0 2.916 1.458 1.458 0 0 1 0-2.916Z"
+    />
+  </svg>
+);
+
+/* Plus-circle — default glyph for the Featured Icon slot */

package/src/icons/NextIcon.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 NextIcon(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="M16.5596 2.5C17.0197 2.5 17.3924 2.87292 17.3926 3.33301V16.667C17.3924 17.1271 17.0197 17.5 16.5596 17.5C16.0994 17.5 15.7267 17.1271 15.7266 16.667V3.33301C15.7267 2.87292 16.0994 2.5 16.5596 2.5ZM4.71875 3.63281C5.44789 3.40986 6.18616 3.6189 6.96289 3.99414C7.73487 4.36711 8.68133 4.97513 9.87598 5.74316L9.9502 5.79102C11.0472 6.49626 11.9195 7.0565 12.5391 7.56934C13.1694 8.09108 13.6349 8.63955 13.7842 9.35059C13.8739 9.7785 13.8739 10.2215 13.7842 10.6494C13.6349 11.3604 13.1694 11.9089 12.5391 12.4307C11.9195 12.9435 11.0472 13.5037 9.9502 14.209L9.87598 14.2568C8.68133 15.0249 7.73488 15.6329 6.96289 16.0059C6.18616 16.3811 5.44789 16.5901 4.71875 16.3672C4.28877 16.2357 3.89538 16.0046 3.56641 15.6943C3.01583 15.175 2.80162 14.4291 2.70117 13.5479C2.60107 12.6694 2.60155 11.511 2.60156 10.042V9.95801C2.60155 8.48896 2.60107 7.33064 2.70117 6.45215C2.80162 5.57094 3.01584 4.82497 3.56641 4.30566C3.89538 3.99544 4.28878 3.76429 4.71875 3.63281Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Volume high / speaker with arcs icon.
+ * Figma: 20×20 px.
+ */

package/src/icons/PDFSvg.tsx

@@ -0,0 +1,39 @@
+import * as React from "react"
+
+/**
+ * PDF file icon — 40 × 40.
+ *
+ * The original Figma export wrapped everything in a <g clipPath="url(#a)">
+ * where #a was just "M0 0h40v40H0z" (the full viewBox rectangle — a no-op).
+ * That generic id collides with other SVGs on the same page that also use
+ * id="a", causing the browser to clip the icon's content to the wrong region.
+ * The clip-path wrapper has been removed; visual output is identical.
+ */
+const PDFSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={40}
+    height={40}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#D2D6DB"
+      d="M37.143 10.536a.263.263 0 0 0 0-.1.713.713 0 0 0-.15-.229l-10-10a.714.714 0 0 0-.228-.15.264.264 0 0 0-.1 0A.493.493 0 0 0 26.429 0h-20a.714.714 0 0 0-.714.714V20H3.572a.715.715 0 0 0-.715.714v12.858a.714.714 0 0 0 .715.714h2.143v5a.714.714 0 0 0 .714.714h30a.714.714 0 0 0 .714-.714V10.714a.492.492 0 0 0 0-.178Zm-10-8.1L34.707 10h-7.564V2.436ZM4.286 21.429h21.429v11.428H4.286V21.43Zm2.857 17.143v-4.286H26.43a.714.714 0 0 0 .714-.715V20.715A.714.714 0 0 0 26.43 20H7.143V1.429h18.572v9.285a.714.714 0 0 0 .714.715h9.286V38.57H7.143Z"
+    />
+    <path fill="#fff" d="M34.707 10h-7.564V2.436L34.707 10Z" />
+    <path
+      fill="#fff"
+      d="M35.714 11.428V38.57H7.143v-4.286h19.285a.715.715 0 0 0 .715-.714V20.713a.714.714 0 0 0-.715-.714H7.143V1.428h18.571v9.285a.714.714 0 0 0 .714.715h9.286Z"
+    />
+    <path
+      fill="#D92D20"
+      d="M2.857 21a1 1 0 0 1 1-1h22.286a1 1 0 0 1 1 1v12.286a1 1 0 0 1-1 1H3.857a1 1 0 0 1-1-1V21Z"
+    />
+    <path
+      fill="#fff"
+      d="M7.857 30v-5.714h1.9a2 2 0 0 1 1.358.414 1.728 1.728 0 0 1 .592 1.371c-.004.334-.1.66-.278.943a1.565 1.565 0 0 1-.714.629 1.907 1.907 0 0 1-.822.164h-.857V30H7.857Zm1.208-3.229h.671c.212.011.42-.06.579-.2a.716.716 0 0 0 .207-.543c0-.438-.262-.657-.786-.657h-.671v1.4ZM12.822 30v-5.714h2.143a2.271 2.271 0 0 1 1.485.485 2.856 2.856 0 0 1 1.05 2.372 3.2 3.2 0 0 1-.357 1.507 2.514 2.514 0 0 1-1 1.036 3.243 3.243 0 0 1-1.586.314h-1.735Zm1.207-1.086h.771c.275.01.546-.062.779-.207a1.808 1.808 0 0 0 .714-1.614 1.713 1.713 0 0 0-.678-1.515c-.23-.146-.5-.218-.772-.207h-.814v3.543ZM18.743 30v-5.714h3.272v1.085H19.95v1.165h1.893v1.085H19.95V30h-1.207Z"
+    />
+  </svg>
+)
+export default PDFSvg

package/src/icons/PatternsIcon.tsx

@@ -0,0 +1,21 @@
+import type { SVGProps } from 'react';
+
+export function PatternsIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.33519 6.16501C5.79052 6.16568 6.20586 6.47812 6.47386 7.02146L7.17698 8.4404C7.20432 8.49507 7.32442 8.58372 7.38109 8.59372L8.6555 8.80661C9.23609 8.90464 9.64739 9.20832 9.78538 9.63962C9.92324 10.0716 9.76349 10.5593 9.34691 10.9765L8.35569 11.9756C8.30846 12.0238 8.26586 12.1762 8.2805 12.2441L8.5637 13.4795C8.77434 14.4007 8.42642 14.8151 8.20042 14.9804C8.07978 15.0684 7.88076 15.1669 7.59886 15.167C7.35353 15.167 7.04353 15.0905 6.66819 14.8672L5.47288 14.1523C5.41364 14.117 5.25256 14.1188 5.18968 14.1552L3.9973 14.8672C3.19484 15.3469 2.69467 15.1428 2.468 14.9775C2.24071 14.8122 1.89069 14.3975 2.10179 13.4785L2.38597 12.2402C2.40063 12.1755 2.35811 12.0219 2.31077 11.9746L1.31859 10.9736C0.903451 10.555 0.744401 10.067 0.883038 9.63572C1.02177 9.20582 1.43306 8.90296 2.01097 8.80564L3.28734 8.59275C3.34254 8.58211 3.45727 8.49635 3.48362 8.44431L4.18968 7.02146C4.46099 6.4775 4.87794 6.16506 5.33323 6.16501H5.33519ZM5.33226 7.16501C5.31292 7.16768 5.20287 7.22848 5.08421 7.46579L4.38109 8.88474C4.21779 9.22066 3.82692 9.51432 3.45433 9.57907L2.17503 9.79294C1.9222 9.83548 1.84072 9.92261 1.83421 9.94236C1.82754 9.96236 1.84224 10.0838 2.02757 10.2705L3.01976 11.2705C3.30642 11.5591 3.44991 12.0602 3.36058 12.4609L3.0764 13.7021C3.0144 13.9721 3.03882 14.1177 3.05882 14.165C3.10962 14.1683 3.25198 14.1462 3.48362 14.0078L4.68089 13.2939C4.87214 13.182 5.10466 13.126 5.33519 13.1259C5.56648 13.1259 5.79729 13.1826 5.9846 13.2939L7.18089 14.0078C7.41219 14.1451 7.55565 14.169 7.60765 14.165C7.62695 14.1153 7.65025 13.969 7.58909 13.7011L7.30491 12.4638C7.21497 12.0605 7.35843 11.5598 7.64573 11.2705L8.63694 10.2705C8.82361 10.0831 8.83826 9.96333 8.83226 9.94333C8.82583 9.92365 8.74525 9.83549 8.48948 9.79294L7.21409 9.57907C6.83753 9.51509 6.44462 9.22236 6.27855 8.88181L5.5764 7.46579V7.46482C5.46077 7.23026 5.3534 7.16804 5.33226 7.16501ZM12.9797 6.31247C13.175 6.11717 13.4914 6.11722 13.6867 6.31247C13.8821 6.50781 13.8821 6.82417 13.6867 7.0195L11.6867 9.0195C11.5895 9.11661 11.462 9.16589 11.3342 9.16599H11.3332C11.2052 9.16599 11.0771 9.11751 10.9797 9.0195C10.7845 8.82423 10.7846 8.5078 10.9797 8.31247L12.9797 6.31247ZM14.3127 0.978489C14.508 0.783184 14.8254 0.78324 15.0207 0.978489C15.2161 1.17382 15.2161 1.49116 15.0207 1.6865L9.68675 7.0195C9.58954 7.11661 9.46199 7.16589 9.33421 7.16599H9.33323C9.20523 7.16599 9.07705 7.1175 8.97972 7.0195C8.78451 6.82423 8.78459 6.5078 8.97972 6.31247L14.3127 0.978489ZM10.3127 0.978489C10.508 0.783184 10.8254 0.78324 11.0207 0.978489C11.2161 1.17382 11.2161 1.49116 11.0207 1.6865L7.68675 5.0195C7.58954 5.11661 7.46199 5.16589 7.33421 5.16599H7.33323C7.20523 5.16599 7.07705 5.1175 6.97972 5.0195C6.78451 4.82423 6.78459 4.5078 6.97972 4.31247L10.3127 0.978489Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}