@smileid/web-components 11.4.5 → 11.6.0

package/lib/components/selfie/src/enhanced-smartselfie-capture/assets/illustrations.tsx

@@ -0,0 +1,852 @@
+// Hand-converted Preact components for the four instruction-card
+// illustrations. They replace the previous `.svg?raw` +
+// `dangerouslySetInnerHTML` setup so the themed brand-pill colour can be
+// passed in as a real prop instead of a runtime string replace, and the
+// card markup stays inside Preact's normal reconciliation pass.
+//
+// Each component preserves the original SVG layout (47×79 viewBox, drop
+// shadow, rounded border, badge pill at the bottom). Only the "Good"
+// variant actually uses `themeColor`; the other three are intentionally
+// muted (grey pill, red disc) because they're the "bad" examples. They
+// still accept the prop for a consistent call-site API.
+import type { FunctionComponent } from 'preact';
+
+interface IllustrationProps {
+  themeColor: string;
+}
+
+const CardFrame: FunctionComponent<{ filterId: string }> = ({
+  filterId,
+  children,
+}) => (
+  <>
+    <g filter={`url(#${filterId})`}>
+      <g clip-path={`url(#clip-${filterId})`}>
+        <path
+          d="M7 75C4.79086 75 3 73.2091 3 71L3 6C3 3.79086 4.79086 2 7 2H40C42.2091 2 44 3.79086 44 6V71C44 73.2091 42.2091 75 40 75H7Z"
+          fill="white"
+          fill-opacity="0.01"
+          shape-rendering="crispEdges"
+        />
+        {children}
+      </g>
+      <path
+        d="M3.5 71L3.5 6C3.5 4.06701 5.067 2.5 7 2.5H40C41.933 2.5 43.5 4.06701 43.5 6V71C43.5 72.933 41.933 74.5 40 74.5H7C5.067 74.5 3.5 72.933 3.5 71Z"
+        stroke="#E2E8F0"
+        shape-rendering="crispEdges"
+      />
+    </g>
+    <defs>
+      <filter
+        id={filterId}
+        x="0"
+        y="0"
+        width="47"
+        height="79"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="1" />
+        <feGaussianBlur stdDeviation="1" />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="BackgroundImageFix"
+          result={`effect1_${filterId}`}
+        />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="1" />
+        <feGaussianBlur stdDeviation="1.5" />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+          result="effect2"
+        />
+        <feBlend
+          mode="normal"
+          in2={`effect1_${filterId}`}
+          result={`effect2_${filterId}`}
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2={`effect2_${filterId}`}
+          result="shape"
+        />
+      </filter>
+      <clipPath id={`clip-${filterId}`}>
+        <path
+          d="M7 75C4.79086 75 3 73.2091 3 71L3 6C3 3.79086 4.79086 2 7 2H40C42.2091 2 44 3.79086 44 6V71C44 73.2091 42.2091 75 40 75H7Z"
+          fill="white"
+        />
+      </clipPath>
+      <clipPath id={`inner-${filterId}`}>
+        <rect
+          width="73"
+          height="41"
+          fill="white"
+          transform="matrix(0 -1 1 0 3 75)"
+        />
+      </clipPath>
+    </defs>
+  </>
+);
+
+export const GoodIllustration: FunctionComponent<IllustrationProps> = ({
+  themeColor,
+}) => {
+  const filterId = 'illus-good';
+  return (
+    <svg
+      width="47"
+      height="79"
+      viewBox="0 0 47 79"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <CardFrame filterId={filterId}>
+        <g clip-path={`url(#inner-${filterId})`}>
+          <rect
+            width="73"
+            height="41"
+            transform="matrix(0 -1 1 0 3 75)"
+            fill="white"
+          />
+          <rect x="11" y="63" width="25" height="6" rx="3" fill={themeColor} />
+        </g>
+        <path
+          d="M13.1627 34.2082C11.7528 33.7797 9.7785 34.5992 10.0317 37.3067C10.2437 39.5746 11.2385 41.636 13.674 41.0316C14.8844 40.7312 14.5892 39.4034 14.4749 37.6975C14.3606 35.9916 14.5726 34.6366 13.1627 34.2082Z"
+          fill="#2D2A29"
+        />
+        <path
+          d="M13.1627 34.2082C11.7528 33.7797 9.7785 34.5992 10.0317 37.3067C10.2437 39.5746 11.2385 41.636 13.674 41.0316"
+          fill="white"
+        />
+        <path
+          d="M13.1627 34.2082C11.7528 33.7797 9.7785 34.5992 10.0317 37.3067C10.2437 39.5746 11.2385 41.636 13.674 41.0316"
+          stroke="#1F1C1C"
+          stroke-width="0.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M34.0715 34.1352C35.4783 33.6969 37.4583 34.5025 37.224 37.2118C37.0278 39.481 36.0474 41.5494 33.6078 40.962C32.3953 40.6701 32.6813 39.3402 32.7836 37.6335C32.886 35.9269 32.6646 34.5734 34.0715 34.1352Z"
+          fill="#2D2A29"
+        />
+        <path
+          d="M34.0715 34.1352C35.4783 33.6969 37.4583 34.5025 37.224 37.2118C37.0278 39.481 36.0474 41.5494 33.6078 40.962"
+          fill="white"
+        />
+        <path
+          d="M34.0715 34.1352C35.4783 33.6969 37.4583 34.5025 37.224 37.2118C37.0278 39.481 36.0474 41.5494 33.6078 40.962"
+          stroke="#1F1C1C"
+          stroke-width="0.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M23.4663 21.0379C11.0066 21.0268 12.8912 33.0461 13.0652 36.3497C13.2392 39.6534 14.8428 50.5533 23.2995 50.8312C32.2383 51.125 33.9327 39.9604 34.1366 36.2762C34.3404 32.592 35.8168 21.0489 23.4663 21.0379Z"
+          fill="white"
+        />
+        <path
+          d="M23.4663 21.0379C11.0066 21.0268 12.8912 33.0461 13.0652 36.3497C13.2392 39.6534 14.8428 50.5533 23.2995 50.8312C32.2383 51.125 33.9327 39.9604 34.1366 36.2762C34.3404 32.592 35.8168 21.0489 23.4663 21.0379Z"
+          stroke="#1F1C1C"
+          stroke-width="0.5"
+        />
+        <path
+          d="M18.9219 34.4335C19.4824 34.4316 19.9396 35.0307 19.9422 35.7706C19.9448 36.5105 19.4918 37.1129 18.9313 37.1148C18.3707 37.1168 17.9135 36.5176 17.9109 35.7777C17.9083 35.0378 18.3614 34.4355 18.9219 34.4335Z"
+          fill="#1F1C1C"
+        />
+        <path
+          d="M28.4014 34.4002C28.9619 34.3982 29.4191 34.9974 29.4217 35.7373C29.4243 36.4772 28.9713 37.0796 28.4108 37.0815C27.8502 37.0835 27.393 36.4843 27.3904 35.7444C27.3878 35.0045 27.8409 34.4022 28.4014 34.4002Z"
+          fill="#1F1C1C"
+        />
+        <path
+          d="M17.1864 33.6408C17.7256 32.8805 19.2007 32.618 19.824 32.7241"
+          stroke="#1F1C1C"
+          stroke-width="0.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M30.0238 33.5958C29.4792 32.8393 28.0023 32.5871 27.3798 32.6976"
+          stroke="#1F1C1C"
+          stroke-width="0.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M24.2757 35.6876C24.2757 35.6876 24.3958 39.0457 24.208 39.5609C24.0202 40.0762 23.2895 40.2412 23.1541 40.2417"
+          stroke="#1F1C1C"
+          stroke-width="0.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M22.6777 44.9406C23.0693 45.0812 24.1131 45.0812 24.5348 44.9406"
+          stroke="#1F1C1C"
+          stroke-width="0.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M20.8545 43.285C20.8545 43.285 21.432 43.5445 23.511 43.5352C25.7796 43.5252 26.5584 43.292 26.5584 43.292C26.5584 43.292 25.3932 43.4648 23.511 43.4751C21.8646 43.4838 20.8545 43.285 20.8545 43.285Z"
+          fill="white"
+        />
+        <path
+          d="M20.8545 43.285C20.8545 43.285 21.432 43.5445 23.511 43.5352C25.7796 43.5252 26.5584 43.292 26.5584 43.292C26.5584 43.292 25.3932 43.4648 23.511 43.4751C21.8646 43.4838 20.8545 43.285 20.8545 43.285Z"
+          stroke="#1F1C1C"
+          stroke-width="0.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </CardFrame>
+    </svg>
+  );
+};
+
+// The "bad" cards intentionally ignore `themeColor` — the pill stays muted
+// grey and a red ring crosses out the example. The prop is kept on the
+// interface so the call site is uniform.
+export const AccessoriesIllustration: FunctionComponent<
+  IllustrationProps
+> = () => {
+  const filterId = 'illus-accessories';
+  return (
+    <svg
+      width="47"
+      height="79"
+      viewBox="0 0 47 79"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <CardFrame filterId={filterId}>
+        <g clip-path={`url(#inner-${filterId})`}>
+          <rect
+            width="73"
+            height="41"
+            transform="matrix(0 -1 1 0 3 75)"
+            fill="white"
+          />
+        </g>
+        <rect x="11" y="63" width="25" height="6" rx="3" fill="#848282" />
+        <mask
+          id={`acc-mask-0`}
+          style={{ maskType: 'luminance' }}
+          maskUnits="userSpaceOnUse"
+          x="-4"
+          y="8"
+          width="56"
+          height="54"
+        >
+          <path
+            d="M51.0264 8.25V61.6221H-3.75V8.25H51.0264Z"
+            fill="white"
+            stroke="white"
+            stroke-width="0.5"
+          />
+        </mask>
+        <g mask={`url(#acc-mask-0)`}>
+          <path
+            d="M23.5338 13.3046C32.3117 13.3046 39.4387 22.9976 39.4387 34.9359C39.4387 46.8743 32.3117 56.5673 23.5338 56.5673C14.7559 56.5673 7.62891 46.8743 7.62891 34.9359C7.62891 22.9976 14.7559 13.3046 23.5338 13.3046Z"
+            stroke="#EF4343"
+            stroke-width="0.5"
+          />
+        </g>
+        <mask
+          id={`acc-mask-1`}
+          style={{ maskType: 'luminance' }}
+          maskUnits="userSpaceOnUse"
+          x="3"
+          y="9"
+          width="41"
+          height="52"
+        >
+          <path d="M44 8.99994H3V60.8159H44V8.99994Z" fill="white" />
+        </mask>
+        <g mask={`url(#acc-mask-1)`}>
+          <path
+            d="M12.8166 32.7658C11.4254 32.3431 9.47724 33.1516 9.72709 35.8233C9.93631 38.0612 10.9179 40.0953 13.3212 39.499C14.5155 39.2025 14.2242 37.8923 14.1115 36.2089C13.9987 34.5256 14.2078 33.1886 12.8166 32.7658Z"
+            fill="#2D2A29"
+          />
+          <path
+            d="M12.8166 32.7658C11.4254 32.3431 9.47724 33.1516 9.72709 35.8233C9.93631 38.0612 10.9179 40.0953 13.3212 39.499"
+            fill="white"
+          />
+          <path
+            d="M12.8166 32.7658C11.4254 32.3431 9.47724 33.1516 9.72709 35.8233C9.93631 38.0612 10.9179 40.0953 13.3212 39.499"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M33.4488 32.694C34.837 32.2616 36.7908 33.0565 36.5596 35.7299C36.366 37.9691 35.3986 40.0101 32.9912 39.4305C31.7949 39.1424 32.077 37.8302 32.178 36.1461C32.279 34.462 32.0606 33.1265 33.4488 32.694Z"
+            fill="#2D2A29"
+          />
+          <path
+            d="M33.4488 32.694C34.837 32.2616 36.7908 33.0565 36.5596 35.7299C36.366 37.9691 35.3986 40.0101 32.9912 39.4305"
+            fill="white"
+          />
+          <path
+            d="M33.4488 32.694C34.837 32.2616 36.7908 33.0565 36.5596 35.7299C36.366 37.9691 35.3986 40.0101 32.9912 39.4305"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M22.9836 19.7699C10.6889 19.759 12.5485 31.6191 12.7202 34.8791C12.892 38.139 14.4742 48.8946 22.819 49.1688C31.6395 49.4587 33.3115 38.4419 33.5126 34.8065C33.7137 31.1711 35.1706 19.7808 22.9836 19.7699Z"
+            fill="white"
+          />
+          <path
+            d="M22.9836 19.7699C10.6889 19.759 12.5485 31.6191 12.7202 34.8791C12.892 38.139 14.4742 48.8946 22.819 49.1688C31.6395 49.4587 33.3115 38.4419 33.5126 34.8065C33.7137 31.1711 35.1706 19.7808 22.9836 19.7699Z"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+          />
+          <path
+            d="M18.5002 32.9882C19.0534 32.9863 19.5045 33.5775 19.5071 34.3076C19.5096 35.0377 19.0626 35.6321 18.5095 35.634C17.9564 35.6359 17.5052 35.0447 17.5027 34.3146C17.5001 33.5845 17.9471 32.9901 18.5002 32.9882Z"
+            fill="#1F1C1C"
+          />
+          <path
+            d="M27.8543 32.9556C28.4074 32.9537 28.8585 33.5449 28.8611 34.275C28.8636 35.0051 28.4166 35.5995 27.8635 35.6014C27.3104 35.6034 26.8592 35.0121 26.8567 34.282C26.8541 33.5519 27.3011 32.9575 27.8543 32.9556Z"
+            fill="#1F1C1C"
+          />
+          <path
+            d="M16.7869 32.2059C17.319 31.4557 18.7745 31.1967 19.3896 31.3014"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M29.4544 32.1618C28.917 31.4153 27.4597 31.1664 26.8454 31.2755"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M23.7821 34.2257C23.7821 34.2257 23.9006 37.5393 23.7153 38.0477C23.53 38.5561 22.809 38.719 22.6753 38.7195"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M22.2061 43.3561C22.5924 43.495 23.6224 43.495 24.0386 43.3561"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M20.4067 41.7226C20.4067 41.7226 20.9766 41.9787 23.0281 41.9695C25.2666 41.9597 26.0352 41.7296 26.0352 41.7296C26.0352 41.7296 24.8853 41.9001 23.0281 41.9102C21.4035 41.9188 20.4067 41.7226 20.4067 41.7226Z"
+            fill="white"
+          />
+          <path
+            d="M20.4067 41.7226C20.4067 41.7226 20.9766 41.9787 23.0281 41.9695C25.2666 41.9597 26.0352 41.7296 26.0352 41.7296C26.0352 41.7296 24.8853 41.9001 23.0281 41.9102C21.4035 41.9188 20.4067 41.7226 20.4067 41.7226Z"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M14.7529 37.8635C14.7529 37.8635 13.7216 37.769 12.1802 31.7942"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M31.9355 37.8037C31.9355 37.8037 33.1531 35.1909 34.0523 31.9394"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M30.1131 44.7719C32.8699 42.1709 32.6121 41.0965 33.3281 39.0691"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M15.9583 44.3053C12.9669 41.7936 13.5822 41.0725 12.9102 39.1367"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M23.5395 35.7791C22.209 35.8127 20.8818 36.8009 19.8988 36.9489C18.9158 37.097 14.2002 36.9399 14.2002 36.9399C14.2002 36.9399 14.8418 38.8845 14.5395 43.456C14.947 44.1777 18.2676 49.5368 23.7893 49.3449C29.3426 49.1519 30.0401 45.5982 31.7525 43.445C31.4236 40.033 32.4235 36.7895 32.4235 36.7895C32.4235 36.7895 27.9696 37.0075 27.1879 36.8367C26.4063 36.6659 24.87 35.7456 23.5395 35.7791Z"
+            fill="#8C8686"
+          />
+          <path
+            d="M23.5395 35.7791C22.209 35.8127 20.8818 36.8009 19.8988 36.9489C18.9158 37.097 14.2002 36.9399 14.2002 36.9399C14.2002 36.9399 14.8418 38.8845 14.5395 43.456C14.947 44.1777 18.2676 49.5368 23.7893 49.3449C29.3426 49.1519 30.0401 45.5982 31.7525 43.445C31.4236 40.033 32.4235 36.7895 32.4235 36.7895C32.4235 36.7895 27.9696 37.0075 27.1879 36.8367C26.4063 36.6659 24.87 35.7456 23.5395 35.7791Z"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M15.9506 41.186C15.9506 41.186 20.9811 40.4164 23.2088 40.4954C25.2934 40.5693 28.8217 40.8229 30.0955 41.1077"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M16.7091 43.0347C16.7091 43.0347 20.4734 44.1497 23.1346 44.1114C25.2202 44.0815 28.5125 43.4274 29.5233 42.961"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M16.8896 44.9433C16.8896 44.9433 20.1057 46.4363 23.2297 46.3964C25.3155 46.3699 28.3463 45.424 29.3571 44.9576"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M24.4977 33.6644C23.735 33.2493 22.1671 33.3089 21.8622 33.6667"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+          />
+          <path
+            d="M20.3603 31.5591C19.1688 31.1374 15.5236 31.2855 13.8285 31.6531C13.3137 31.7646 12.2788 32.0196 12.2788 32.0196C12.2788 32.0196 12.1192 32.3118 12.3143 32.4721C12.5095 32.6324 12.9966 32.9201 13.0624 33.0813C13.1282 33.2426 13.2715 35.2465 13.3093 36.0224C13.347 36.7983 13.9747 38.7019 17.3064 38.808C22.1564 38.9624 21.9392 34.8696 21.9937 33.9244C22.0514 32.9215 21.1222 31.8285 20.3603 31.5591Z"
+            fill="#1F1C1C"
+          />
+          <path
+            d="M20.3603 31.5591C19.1688 31.1374 15.5236 31.2855 13.8285 31.6531C13.3137 31.7646 12.2788 32.0196 12.2788 32.0196C12.2788 32.0196 12.1192 32.3118 12.3143 32.4721C12.5095 32.6324 12.9966 32.9201 13.0624 33.0813C13.1282 33.2426 13.2715 35.2465 13.3093 36.0224C13.347 36.7983 13.9747 38.7019 17.3064 38.808C22.1564 38.9624 21.9392 34.8696 21.9937 33.9244C22.0514 32.9215 21.1222 31.8285 20.3603 31.5591Z"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+          />
+          <path
+            d="M25.8574 31.5207C27.0429 31.0824 30.6898 31.1796 32.3898 31.5235C32.9062 31.6277 33.9445 31.8683 33.9445 31.8683C33.9445 31.8683 34.1082 32.1582 33.9153 32.3213C33.7224 32.4843 33.2394 32.7787 33.1759 32.9409C33.1123 33.103 32.997 35.1088 32.9701 35.8851C32.9431 36.6614 32.342 38.5736 29.0122 38.7262C24.1648 38.9484 24.3248 34.853 24.2572 33.9086C24.1855 32.9066 25.0993 31.8007 25.8574 31.5207Z"
+            fill="#1F1C1C"
+          />
+          <path
+            d="M25.8574 31.5207C27.0429 31.0824 30.6898 31.1796 32.3898 31.5235C32.9062 31.6277 33.9445 31.8683 33.9445 31.8683C33.9445 31.8683 34.1082 32.1582 33.9153 32.3213C33.7224 32.4843 33.2394 32.7787 33.1759 32.9409C33.1123 33.103 32.997 35.1088 32.9701 35.8851C32.9431 36.6614 32.342 38.5736 29.0122 38.7262C24.1648 38.9484 24.3248 34.853 24.2572 33.9086C24.1855 32.9066 25.0993 31.8007 25.8574 31.5207Z"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+          />
+        </g>
+      </CardFrame>
+    </svg>
+  );
+};
+
+export const MultipleFacesIllustration: FunctionComponent<
+  IllustrationProps
+> = () => {
+  const filterId = 'illus-multiple';
+  return (
+    <svg
+      width="47"
+      height="79"
+      viewBox="0 0 47 79"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <CardFrame filterId={filterId}>
+        <g clip-path={`url(#inner-${filterId})`}>
+          <rect
+            width="73"
+            height="41"
+            transform="matrix(0 -1 1 0 3 75)"
+            fill="white"
+          />
+          <rect x="11" y="63" width="25" height="6" rx="3" fill="#848282" />
+          <path
+            d="M23.5338 13.3046C32.3117 13.3046 39.4387 22.9976 39.4387 34.9359C39.4387 46.8743 32.3117 56.5673 23.5338 56.5673C14.7559 56.5673 7.62891 46.8743 7.62891 34.9359C7.62891 22.9976 14.7559 13.3046 23.5338 13.3046Z"
+            stroke="#EF4343"
+            stroke-width="0.5"
+          />
+          <path
+            d="M26.1612 35.0191C25.5397 34.8303 24.6695 35.1915 24.7811 36.3849C24.8745 37.3846 25.313 38.2932 26.3866 38.0268C26.9201 37.8944 26.79 37.3091 26.7396 36.5572C26.6892 35.8052 26.7826 35.208 26.1612 35.0191Z"
+            fill="#2D2A29"
+          />
+          <path
+            d="M26.1612 35.0191C25.5397 34.8303 24.6695 35.1915 24.7811 36.3849C24.8745 37.3846 25.313 38.2932 26.3866 38.0268"
+            fill="white"
+          />
+          <path
+            d="M26.1612 35.0191C25.5397 34.8303 24.6695 35.1915 24.7811 36.3849C24.8745 37.3846 25.313 38.2932 26.3866 38.0268"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M35.3777 34.987C35.9979 34.7938 36.8706 35.1489 36.7673 36.3431C36.6809 37.3434 36.2487 38.2551 35.1734 37.9962C34.6389 37.8675 34.765 37.2813 34.8101 36.529C34.8552 35.7768 34.7576 35.1802 35.3777 34.987Z"
+            fill="#2D2A29"
+          />
+          <path
+            d="M35.3777 34.987C35.9979 34.7938 36.8706 35.1489 36.7673 36.3431C36.6809 37.3434 36.2487 38.2551 35.1734 37.9962"
+            fill="white"
+          />
+          <path
+            d="M35.3777 34.987C35.9979 34.7938 36.8706 35.1489 36.7673 36.3431C36.6809 37.3434 36.2487 38.2551 35.1734 37.9962"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M30.7029 29.2139C25.2108 29.209 26.0415 34.507 26.1182 35.9632C26.1949 37.4194 26.9017 42.2239 30.6294 42.3465C34.5695 42.476 35.3164 37.5547 35.4062 35.9308C35.4961 34.3068 36.1469 29.2187 30.7029 29.2139Z"
+            fill="white"
+          />
+          <path
+            d="M30.7029 29.2139C25.2108 29.209 26.0415 34.507 26.1182 35.9632C26.1949 37.4194 26.9017 42.2239 30.6294 42.3465C34.5695 42.476 35.3164 37.5547 35.4062 35.9308C35.4961 34.3068 36.1469 29.2187 30.7029 29.2139Z"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+          />
+          <path
+            d="M28.7001 35.1184C28.9472 35.1176 29.1487 35.3817 29.1499 35.7078C29.151 36.034 28.9513 36.2995 28.7043 36.3003C28.4572 36.3012 28.2556 36.0371 28.2545 35.7109C28.2534 35.3848 28.4531 35.1193 28.7001 35.1184Z"
+            fill="#1F1C1C"
+          />
+          <path
+            d="M32.8784 35.1038C33.1254 35.103 33.327 35.3671 33.3281 35.6932C33.3292 36.0194 33.1296 36.2849 32.8825 36.2857C32.6354 36.2866 32.4339 36.0225 32.4327 35.6964C32.4316 35.3702 32.6313 35.1047 32.8784 35.1038Z"
+            fill="#1F1C1C"
+          />
+          <path
+            d="M27.9345 34.769C28.1722 34.4339 28.8224 34.3181 29.0972 34.3649"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M33.5932 34.7492C33.3532 34.4158 32.7022 34.3046 32.4278 34.3533"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M31.0595 35.6713C31.0595 35.6713 31.1124 37.1515 31.0297 37.3786C30.9469 37.6057 30.6248 37.6785 30.5651 37.6787"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M30.3555 39.7499C30.528 39.8119 30.9882 39.8119 31.1741 39.7499"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M29.5518 39.0201C29.5518 39.0201 29.8063 39.1345 30.7227 39.1304C31.7227 39.126 32.066 39.0233 32.066 39.0233C32.066 39.0233 31.5524 39.0994 30.7227 39.104C29.997 39.1078 29.5518 39.0201 29.5518 39.0201Z"
+            fill="white"
+          />
+          <path
+            d="M29.5518 39.0201C29.5518 39.0201 29.8063 39.1345 30.7227 39.1304C31.7227 39.126 32.066 39.0233 32.066 39.0233C32.066 39.0233 31.5524 39.0994 30.7227 39.104C29.997 39.1078 29.5518 39.0201 29.5518 39.0201Z"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M13.2099 37.2291C12.2247 36.9297 10.8452 37.5023 11.0222 39.3941C11.1703 40.9788 11.8654 42.4192 13.5672 41.9969C14.4129 41.787 14.2067 40.8592 14.1268 39.6672C14.0469 38.4752 14.195 37.5284 13.2099 37.2291Z"
+            fill="#2D2A29"
+          />
+          <path
+            d="M13.2099 37.2291C12.2247 36.9297 10.8452 37.5023 11.0222 39.3941C11.1703 40.9788 11.8654 42.4192 13.5672 41.9969"
+            fill="white"
+          />
+          <path
+            d="M13.2099 37.2291C12.2247 36.9297 10.8452 37.5023 11.0222 39.3941C11.1703 40.9788 11.8654 42.4192 13.5672 41.9969"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M27.8199 37.1781C28.803 36.8719 30.1865 37.4348 30.0227 39.3278C29.8857 40.9135 29.2006 42.3587 27.496 41.9483C26.6488 41.7443 26.8485 40.8151 26.9201 39.6225C26.9916 38.43 26.8369 37.4843 27.8199 37.1781Z"
+            fill="#2D2A29"
+          />
+          <path
+            d="M27.8199 37.1781C28.803 36.8719 30.1865 37.4348 30.0227 39.3278C29.8857 40.9135 29.2006 42.3587 27.496 41.9483"
+            fill="white"
+          />
+          <path
+            d="M27.8199 37.1781C28.803 36.8719 30.1865 37.4348 30.0227 39.3278C29.8857 40.9135 29.2006 42.3587 27.496 41.9483"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M20.4093 28.0265C11.7033 28.0187 13.0201 36.4171 13.1417 38.7255C13.2633 41.0339 14.3837 48.65 20.2927 48.8442C26.5387 49.0495 27.7226 41.2484 27.865 38.6741C28.0075 36.0998 29.0391 28.0342 20.4093 28.0265Z"
+            fill="white"
+          />
+          <path
+            d="M20.4093 28.0265C11.7033 28.0187 13.0201 36.4171 13.1417 38.7255C13.2633 41.0339 14.3837 48.65 20.2927 48.8442C26.5387 49.0495 27.7226 41.2484 27.865 38.6741C28.0075 36.0998 29.0391 28.0342 20.4093 28.0265Z"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+          />
+          <path
+            d="M17.2341 37.3864C17.6258 37.3851 17.9452 37.8037 17.947 38.3207C17.9488 38.8377 17.6323 39.2586 17.2406 39.26C16.849 39.2613 16.5295 38.8427 16.5277 38.3257C16.5259 37.8087 16.8424 37.3878 17.2341 37.3864Z"
+            fill="#1F1C1C"
+          />
+          <path
+            d="M23.8576 37.3633C24.2493 37.3619 24.5688 37.7806 24.5706 38.2976C24.5724 38.8146 24.2558 39.2355 23.8642 39.2368C23.4725 39.2382 23.153 38.8196 23.1512 38.3026C23.1494 37.7855 23.466 37.3647 23.8576 37.3633Z"
+            fill="#1F1C1C"
+          />
+          <path
+            d="M16.0213 36.8325C16.3981 36.3013 17.4288 36.1178 17.8643 36.192"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M24.9915 36.8012C24.611 36.2726 23.5791 36.0964 23.1441 36.1736"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M20.975 38.2628C20.975 38.2628 21.0589 40.6092 20.9277 40.9692C20.7965 41.3292 20.2859 41.4446 20.1913 41.4449"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M19.8584 44.7282C20.132 44.8265 20.8614 44.8265 21.156 44.7282"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M18.5845 43.5715C18.5845 43.5715 18.988 43.7528 20.4407 43.7463C22.0258 43.7393 22.57 43.5764 22.57 43.5764C22.57 43.5764 21.7558 43.6972 20.4407 43.7043C19.2903 43.7104 18.5845 43.5715 18.5845 43.5715Z"
+            fill="white"
+          />
+          <path
+            d="M18.5845 43.5715C18.5845 43.5715 18.988 43.7528 20.4407 43.7463C22.0258 43.7393 22.57 43.5764 22.57 43.5764C22.57 43.5764 21.7558 43.6972 20.4407 43.7043C19.2903 43.7104 18.5845 43.5715 18.5845 43.5715Z"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </g>
+      </CardFrame>
+    </svg>
+  );
+};
+
+export const PoorLightingIllustration: FunctionComponent<
+  IllustrationProps
+> = () => {
+  const filterId = 'illus-poor';
+  return (
+    <svg
+      width="47"
+      height="79"
+      viewBox="0 0 47 79"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <CardFrame filterId={filterId}>
+        <g clip-path={`url(#inner-${filterId})`}>
+          <rect
+            width="73"
+            height="41"
+            transform="matrix(0 -1 1 0 3 75)"
+            fill="white"
+          />
+          <path
+            d="M13.1627 34.2082C11.7528 33.7797 9.7785 34.5992 10.0317 37.3067C10.2437 39.5746 11.2385 41.636 13.674 41.0316C14.8844 40.7312 14.5892 39.4034 14.4749 37.6975C14.3606 35.9916 14.5726 34.6366 13.1627 34.2082Z"
+            fill="#2D2A29"
+          />
+          <path
+            d="M13.1627 34.2082C11.7528 33.7797 9.7785 34.5992 10.0317 37.3067C10.2437 39.5746 11.2385 41.636 13.674 41.0316"
+            fill="white"
+          />
+          <path
+            d="M13.1627 34.2082C11.7528 33.7797 9.7785 34.5992 10.0317 37.3067C10.2437 39.5746 11.2385 41.636 13.674 41.0316"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M34.0715 34.1352C35.4783 33.6969 37.4583 34.5025 37.224 37.2118C37.0278 39.481 36.0474 41.5494 33.6078 40.962C32.3953 40.6701 32.6813 39.3402 32.7836 37.6335C32.886 35.9269 32.6646 34.5734 34.0715 34.1352Z"
+            fill="#2D2A29"
+          />
+          <path
+            d="M34.0715 34.1352C35.4783 33.6969 37.4583 34.5025 37.224 37.2118C37.0278 39.481 36.0474 41.5494 33.6078 40.962"
+            fill="white"
+          />
+          <path
+            d="M34.0715 34.1352C35.4783 33.6969 37.4583 34.5025 37.224 37.2118C37.0278 39.481 36.0474 41.5494 33.6078 40.962"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M23.4663 21.0379C11.0066 21.0268 12.8912 33.0461 13.0652 36.3497C13.2392 39.6534 14.8428 50.5533 23.2995 50.8312C32.2383 51.125 33.9327 39.9604 34.1366 36.2762C34.3404 32.592 35.8168 21.0489 23.4663 21.0379Z"
+            fill="white"
+          />
+          <path
+            d="M23.4663 21.0379C11.0066 21.0268 12.8912 33.0461 13.0652 36.3497C13.2392 39.6534 14.8428 50.5533 23.2995 50.8312C32.2383 51.125 33.9327 39.9604 34.1366 36.2762C34.3404 32.592 35.8168 21.0489 23.4663 21.0379Z"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+          />
+          <path
+            d="M18.9219 34.4335C19.4824 34.4316 19.9396 35.0307 19.9422 35.7706C19.9448 36.5105 19.4918 37.1129 18.9313 37.1148C18.3707 37.1168 17.9135 36.5176 17.9109 35.7777C17.9083 35.0378 18.3614 34.4355 18.9219 34.4335Z"
+            fill="#1F1C1C"
+          />
+          <path
+            d="M28.4014 34.4002C28.9619 34.3982 29.4191 34.9974 29.4217 35.7373C29.4243 36.4772 28.9713 37.0796 28.4108 37.0815C27.8502 37.0835 27.393 36.4843 27.3904 35.7444C27.3878 35.0045 27.8409 34.4022 28.4014 34.4002Z"
+            fill="#1F1C1C"
+          />
+          <path
+            d="M17.1864 33.6408C17.7256 32.8805 19.2007 32.618 19.824 32.7241"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M30.0238 33.5958C29.4792 32.8393 28.0023 32.5871 27.3798 32.6976"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M24.2757 35.6876C24.2757 35.6876 24.3958 39.0457 24.208 39.5609C24.0202 40.0762 23.2895 40.2412 23.1541 40.2417"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M22.6777 44.9406C23.0693 45.0812 24.1131 45.0812 24.5348 44.9406"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M20.8545 43.285C20.8545 43.285 21.432 43.5445 23.511 43.5352C25.7796 43.5252 26.5584 43.292 26.5584 43.292C26.5584 43.292 25.3932 43.4648 23.511 43.4751C21.8646 43.4838 20.8545 43.285 20.8545 43.285Z"
+            fill="white"
+          />
+          <path
+            d="M20.8545 43.285C20.8545 43.285 21.432 43.5445 23.511 43.5352C25.7796 43.5252 26.5584 43.292 26.5584 43.292C26.5584 43.292 25.3932 43.4648 23.511 43.4751C21.8646 43.4838 20.8545 43.285 20.8545 43.285Z"
+            stroke="#1F1C1C"
+            stroke-width="0.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M23.9049 13C32.6828 13 39.8098 22.693 39.8098 34.6314C39.8098 46.5697 32.6828 56.2627 23.9049 56.2627C15.127 56.2627 8 46.5697 8 34.6314C8 22.693 15.127 13 23.9049 13Z"
+            fill="#0D0D0D"
+            fill-opacity="0.7"
+            stroke="#EF4343"
+            stroke-width="0.5"
+          />
+        </g>
+        <rect x="11" y="63" width="25" height="6" rx="3" fill="#848282" />
+      </CardFrame>
+    </svg>
+  );
+};
+
+// ─── Inline glyphs used by ConsentView ────────────────────────────────────
+//
+// Kept here (rather than as separate `.svg` URL imports) because they need
+// to live inside Preact's reconciliation tree — the parent wrapper handles
+// state-driven styling (checked tick, rotated chevron) and we want a single
+// place to audit any branded artwork.
+
+/**
+ * Official Smile ID brand mark — blue square with the orange accent.
+ * Static; size matches the 40×40 logo lockup used in the consent header.
+ */
+export const SmileIdLogo: FunctionComponent = () => (
+  <svg
+    viewBox="48 0 8 8"
+    width="40"
+    height="40"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path d="M52.2123 3.88737H48V7.86846H52.2123V3.88737Z" fill="#001096" />
+    <path
+      d="M53.2359 0C53.2165 0 53.1975 0.00201727 53.1786 0.00252159C53.1591 0.00252159 53.1402 0 53.1207 0C52.0457 0 51.0869 0.708567 51.0869 2.27044V3.8888H55.2882V2.27044C55.2882 0.708567 54.3174 0 53.2359 0Z"
+      fill="#FF9B00"
+    />
+  </svg>
+);
+
+/** Checkbox tick. Wrapper supplies the background/colour transitions. */
+export const CheckIcon: FunctionComponent = () => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    aria-hidden="true"
+  >
+    <polyline
+      points="20 6 9 17 4 12"
+      stroke="#F9F0E7"
+      stroke-width="3"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
+
+/** Downward chevron. Rotation is applied by the parent's `data-open`. */
+export const ChevronDownIcon: FunctionComponent = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    aria-hidden="true"
+  >
+    <polyline
+      points="6 9 12 15 18 9"
+      stroke="#F9F0E7"
+      stroke-width="2.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);