@westpac/ui 0.2.1 → 0.4.0

package/src/components/pictogram/components/informative/arrows-passing-pictogram.tsx

@@ -0,0 +1,38 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Pictogram } from '../../pictogram.component.js';
+import { fill } from '../../pictogram.styles.js';
+import { type PictogramProps } from '../../pictogram.types.js';
+
+export function ArrowsPassingPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Arrows pointing left and right',
+  copyrightYear = '2021',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('h-13 w-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, outline: true })}
+          d="M38.268 68.037C21.854 68.037 8.5 54.683 8.5 38.27S21.854 8.502 38.268 8.502c16.413 0 29.768 13.353 29.768 29.767S54.68 68.037 38.268 68.037m27.169-47.142C59.697 11.947 49.666 6 38.267 6 20.477 6 6 20.475 6 38.268a32.08 32.08 0 0 0 6.266 19.078C18.006 66.3 28.039 72.25 39.443 72.25c17.792 0 32.266-14.475 32.266-32.267a32.095 32.095 0 0 0-6.272-19.088"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M56.102 29.595L48.507 22l-2.12 2.121 5.084 5.086H21.365v3h30.107l-5.086 5.085 2.121 2.121 7.594-7.593c.614-.615.614-1.61.001-2.224m.095 16.599H26.091l5.085-5.085-2.122-2.121-7.593 7.595a1.57 1.57 0 0 0 0 2.223l7.593 7.594 2.122-2.121-5.085-5.085h30.106v-3z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/atm-pictogram.tsx

@@ -0,0 +1,38 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Pictogram } from '../../pictogram.component.js';
+import { fill } from '../../pictogram.styles.js';
+import { type PictogramProps } from '../../pictogram.types.js';
+
+export function ATMPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'ATM',
+  copyrightYear = '2023',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('h-13 w-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M40.6362,46.5039 C40.2872,46.9159 39.8512,47.1999 39.3372,47.3669 L39.3372,42.1589 C39.9622,42.3899 40.4362,42.6889 40.7412,43.0619 C41.1092,43.5149 41.2942,44.0529 41.2942,44.6779 C41.2942,45.3769 41.0742,45.9849 40.6362,46.5039 M35.5422,36.3999 C35.2442,35.9769 35.0942,35.5169 35.0942,35.0219 C35.0942,34.4809 35.2582,33.9859 35.5842,33.5379 C35.8752,33.1399 36.2612,32.8499 36.7292,32.6579 L36.7292,37.3449 C36.2112,37.0949 35.8112,36.7819 35.5422,36.3999 M43.5052,40.4589 C42.7442,39.5539 41.3492,38.8099 39.3372,38.2199 L39.3372,32.8679 C39.9962,33.2929 40.4292,33.9499 40.6082,34.8679 L44.1492,34.4059 C43.9062,33.0069 43.3462,31.8899 42.4692,31.0549 C41.6772,30.3009 40.6242,29.8289 39.3372,29.6109 L39.3372,28.1509 L38.9292,28.1509 L36.9002,28.1509 L36.7292,28.1509 L36.7292,29.5669 C35.2072,29.7509 33.9742,30.3329 33.0442,31.3349 C32.0782,32.3749 31.5962,33.6599 31.5962,35.1899 C31.5962,36.7009 32.0232,37.9859 32.8762,39.0449 C33.7022,40.0699 34.9902,40.8409 36.7292,41.3629 L36.7292,47.1839 C36.2932,46.9389 35.8912,46.5839 35.5292,46.1059 C35.1182,45.5639 34.8382,44.9199 34.6892,44.1739 L31.0362,44.5659 C31.3162,46.4029 31.9602,47.8259 32.9682,48.8339 C33.9382,49.8049 35.1972,50.3889 36.7292,50.6069 L36.7292,53.1859 L36.9002,53.1859 L38.9292,53.1859 L39.3372,53.1859 L39.3372,50.4959 C40.9592,50.1919 42.2462,49.5099 43.1902,48.4419 C44.2112,47.2849 44.7222,45.8619 44.7222,44.1739 C44.7222,42.6619 44.3172,41.4239 43.5052,40.4589"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M67.2153,27.8174 C67.2153,28.3754 66.7623,28.8284 66.2053,28.8284 L59.3163,28.8284 L58.7013,24.7324 L62.0753,24.7324 C62.7653,24.7324 63.3253,24.1724 63.3253,23.4824 L63.3253,15.5034 C63.3253,14.8124 62.7653,14.2534 62.0753,14.2534 L14.4613,14.2534 C13.7713,14.2534 13.2113,14.8124 13.2113,15.5034 L13.2113,23.4824 C13.2113,24.1724 13.7713,24.7324 14.4613,24.7324 L17.0573,24.7324 L16.4433,28.8284 L10.5103,28.8284 C9.9533,28.8284 9.5003,28.3754 9.5003,27.8174 L9.5003,11.5094 C9.5003,10.9534 9.9533,10.5004 10.5103,10.5004 L66.2053,10.5004 C66.7623,10.5004 67.2153,10.9534 67.2153,11.5094 L67.2153,27.8174 Z M61.5103,60.2694 L14.2493,60.2694 L20.5613,18.2374 L55.1973,18.2374 L61.5103,60.2694 Z M16.1323,66.3384 L16.6683,62.7694 L59.0903,62.7694 L59.6263,66.3384 L16.1323,66.3384 Z M66.4733,8.0004 L66.4883,8.0284 C66.3933,8.0204 66.3023,8.0004 66.2053,8.0004 L10.5103,8.0004 C8.5743,8.0004 7.0003,9.5744 7.0003,11.5094 L7.0003,27.8174 C7.0003,27.8194 7.0163,33.8944 11.5473,33.9204 C11.7153,33.9214 11.8633,33.9154 12.0013,33.9054 C12.0503,33.9074 12.0963,33.9204 12.1463,33.9204 L15.6783,33.9204 L11.5613,61.3344 C11.5073,61.6934 11.6123,62.0594 11.8503,62.3354 C12.0873,62.6114 12.4333,62.7694 12.7973,62.7694 L14.1403,62.7694 L13.4443,67.4024 C13.3903,67.7614 13.4963,68.1284 13.7333,68.4034 C13.9703,68.6794 14.3173,68.8384 14.6803,68.8384 L61.0783,68.8384 C61.4423,68.8384 61.7883,68.6794 62.0253,68.4034 C62.2623,68.1284 62.3683,67.7614 62.3143,67.4024 L61.6193,62.7694 L62.9623,62.7694 C63.3253,62.7694 63.6723,62.6114 63.9093,62.3354 C64.1463,62.0594 64.2523,61.6934 64.1983,61.3344 L60.0813,33.9204 L67.8413,33.9204 C69.7773,33.9204 71.3513,32.3454 71.3513,30.4104 L71.3513,14.1024 C71.3513,8.0004 66.4733,8.0004 66.4733,8.0004 L66.4733,8.0004 Z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/australia-pictogram.tsx

@@ -0,0 +1,38 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Pictogram } from '../../pictogram.component.js';
+import { fill } from '../../pictogram.styles.js';
+import { type PictogramProps } from '../../pictogram.types.js';
+
+export function AustraliaPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Australia',
+  copyrightYear = '2021',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('h-13 w-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, outline: true })}
+          d="M8.5 38.269c0-16.414 13.354-29.767 29.768-29.767 16.413 0 29.767 13.353 29.767 29.767S54.68 68.037 38.268 68.037C21.854 68.037 8.5 54.683 8.5 38.269zm29.768-32.27C20.476 6 6 20.476 6 38.269a32.08 32.08 0 0 0 6.266 19.078C18.006 66.3 28.039 72.25 39.442 72.25c17.792 0 32.267-14.475 32.267-32.267a32.095 32.095 0 0 0-6.272-19.088C59.696 11.947 49.666 6 38.267 6z"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M54.931 38.297l.069 2.08-1.497 3.825-.814.47-1.768 3.96-2.925 1.208-.748-.873-1.427.47-2.79-1.878-.474-1.476-1.634-.338.817-2.077-1.428 1.876-.75-.468-.68-1.876-2.379-.874-4.147.874-1.36.803-.476.871-2.925.335-1.293 1.208-2.448-.47.274-2.279-.953-2.149-1.903-2.751.134-.737-.337-1.006L21 35.279l.406-.805 2.654-1.41 4.08-2.884.61-1.677 1.09-.135 1.428-2.415.883-.201 1.292 1.073 1.224.066-.273-.601 2.177-2.953 4.014.804.678-.2.342.4-1.496 2.35 4.825 2.55.818-2.147.135-2.417L46.907 23l.682 1.276.337 2.348 1.361.604.545 3.758 2.177 1.81.406 1.678.884.068 1.632 3.755zm-7.615 15.637l-.477-1.478-.27-1.341 1.222.535 1.36-.268v1.61l-.34.805-.409-.269-.406.472-.68-.066z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/bank-card-locked-pictogram.tsx

@@ -0,0 +1,62 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Pictogram } from '../../pictogram.component.js';
+import { fill } from '../../pictogram.styles.js';
+import { type PictogramProps } from '../../pictogram.types.js';
+
+export function BankCardLockedPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Locked bank card',
+  copyrightYear = '2023',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('h-13 w-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M53.6375,53.8881 C53.6375,51.7781 51.9275,50.0671 49.8165,50.0671 C47.7065,50.0671 45.9955,51.7781 45.9955,53.8881 C45.9955,55.2401 46.6995,56.4251 47.7595,57.1041 L47.7595,60.3541 C47.7595,61.4911 48.6805,62.4111 49.8165,62.4111 C50.9525,62.4111 51.8735,61.4911 51.8735,60.3541 L51.8735,57.1041 C52.9335,56.4251 53.6375,55.2401 53.6375,53.8881"
+        />
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="11.487 36.207 31.808 36.207 31.808 33.207 11.487 33.207"
+        />
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="11.487 43.196 25.785 43.196 25.785 40.196 11.487 40.196"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M68.9295,17.1381 L6.4995,17.1381 L6.4995,13.7821 C6.4995,12.4941 7.5475,11.4471 8.8345,11.4471
+        L66.5945,11.4471 C67.8815,11.4471 68.9295,12.4941 68.9295,13.7821 L68.9295,17.1381 Z M68.9295,50.3331
+        C68.9295,51.6201 67.8815,52.6681 66.5945,52.6681 L64.0775,52.6681 L64.0775,43.5261 L59.8845,43.5261
+        L59.8845,42.2801 C59.8845,36.4991 55.3675,31.7961 49.8165,31.7961 C44.2655,31.7961 39.7485,36.4991
+        39.7485,42.2801 L39.7485,43.5261 L35.5555,43.5261 L35.5555,52.6681 L8.8345,52.6681 C7.5475,52.6681
+        6.4995,51.6201 6.4995,50.3331 L6.4995,27.2091 L68.9295,27.2091 L68.9295,50.3331 Z M42.2485,43.5261
+        L42.2485,42.2801 C42.2485,37.8781 45.6435,34.2961 49.8165,34.2961 C53.9895,34.2961 57.3845,37.8781
+        57.3845,42.2801 L57.3845,43.5261 L42.2485,43.5261 Z M61.5775,62.1501 C61.5775,64.5221 59.6475,66.4521
+        57.2745,66.4521 L42.3575,66.4521 C39.9855,66.4521 38.0545,64.5221 38.0545,62.1501 L38.0545,46.0261
+        L61.5775,46.0261 L61.5775,62.1501 Z M73.2945,13.5951 C71.5495,11.0341 68.7845,9.5131 68.7845,9.5131
+        C68.7845,9.5131 68.7755,9.5331 68.7725,9.5421 C68.1145,9.2071 67.3825,9.0001 66.5945,9.0001 L8.8345,9.0001
+        C6.1685,9.0001 3.9995,11.1691 3.9995,13.8351 L3.9995,50.3861 C3.9995,51.0571 4.1385,51.6971 4.3875,52.2791
+        C4.4165,52.4711 4.5285,52.7301 4.7715,53.0911 C6.5155,55.6721 9.3065,57.2071 9.3065,57.2071 C9.3065,57.2071
+        9.3125,57.1911 9.3145,57.1881 C10.0045,57.5671 10.7835,57.8021 11.6245,57.8021 L35.5555,57.8021 L35.5555,62.1501
+        C35.5555,65.9011 38.6065,68.9521 42.3575,68.9521 L57.2755,68.9521 C61.0265,68.9521 64.0775,65.9011
+        64.0775,62.1501 L64.0775,57.8021 L69.3845,57.8021 C72.0515,57.8021 74.2205,55.6331 74.2205,52.9671
+        L74.2205,16.4161 C74.2205,15.3611 73.8715,14.3911 73.2945,13.5951 L73.2945,13.5951 Z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/bank-card-pictogram.tsx

@@ -0,0 +1,42 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Pictogram } from '../../pictogram.component.js';
+import { fill } from '../../pictogram.styles.js';
+import { type PictogramProps } from '../../pictogram.types.js';
+
+export function BankCardPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Bank card',
+  copyrightYear = '2023',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('h-13 w-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="11.385 40.91 44.385 40.91 44.385 37.91 11.385 37.91"
+        />
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="11.385 47.899 30.371 47.899 30.371 44.899 11.385 44.899"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M66.5952,57.7207 L8.8352,57.7207 C7.5472,57.7207 6.5002,56.6737 6.5002,55.3857 L6.5002,32.1937 L68.9302,32.1937 L68.9302,55.3857 C68.9302,56.6737 67.8832,57.7207 66.5952,57.7207 M8.8352,16.4997 L66.5952,16.4997 C67.8832,16.4997 68.9302,17.5477 68.9302,18.8347 L68.9302,22.1227 L6.5002,22.1227 L6.5002,18.8347 C6.5002,17.5477 7.5472,16.4997 8.8352,16.4997 M73.2982,18.5987 C71.5522,16.0357 68.7842,14.5127 68.7842,14.5127 C68.7842,14.5127 68.7762,14.5327 68.7732,14.5417 C68.1152,14.2067 67.3822,13.9997 66.5952,13.9997 L8.8352,13.9997 C6.1692,13.9997 4.0002,16.1687 4.0002,18.8347 L4.0002,55.3857 C4.0002,56.0577 4.1392,56.6977 4.3882,57.2797 C4.4172,57.4717 4.5292,57.7307 4.7722,58.0907 C6.5162,60.6717 9.3072,62.2067 9.3072,62.2067 C9.3072,62.2067 9.3132,62.1917 9.3152,62.1877 C10.0052,62.5667 10.7842,62.8027 11.6252,62.8027 L69.3862,62.8027 C72.0522,62.8027 74.2202,60.6337 74.2202,57.9677 L74.2202,21.4167 C74.2202,20.3627 73.8722,19.3937 73.2982,18.5987"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/bank-pictogram.tsx

@@ -0,0 +1,39 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Pictogram } from '../../pictogram.component.js';
+import { fill } from '../../pictogram.styles.js';
+import { type PictogramProps } from '../../pictogram.types.js';
+
+export function BankPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Bank',
+  copyrightYear = '2021',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('h-13 w-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <polygon className={fill({ mode, highlight: true })} points="10.122 51 23.244 51 23.244 30.332 10.122 30.332" />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M46.719 46.979a1.248 1.248 0 0 0 1.768 0l5.769-5.769a1.25 1.25 0 0 0-1.767-1.768l-5.77 5.769a1.25 1.25 0 0 0 0 1.768m5.955-1.616l-3.122 3.123a1.25 1.25 0 1 0 1.768 1.767l3.122-3.122a1.25 1.25 0 0 0-1.768-1.768"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M72.205 14c.691 0 1.25.56 1.25 1.25v40.051a6.907 6.907 0 0 1-6.898 6.898H5.25c-.69 0-1.25-.56-1.25-1.25V24.437c0-.037.018-.068.021-.105-.003-.036-.021-.068-.021-.105V15.25c0-.69.56-1.25 1.25-1.25zm-7.494 11.687H6.5V59.7h20.401V31.544c0-.69.56-1.25 1.25-1.25h30.245c.69 0 1.25.56 1.25 1.25V59.7h5.065V25.687zm-7.565 7.107H44.587V59.7h12.559V32.794zm-15.059 0H29.401V59.7h12.686V32.794zM64.711 16.5H6.5v6.478h58.211V16.5z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/birth-certificate-pictogram.tsx

@@ -0,0 +1,54 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Pictogram } from '../../pictogram.component.js';
+import { fill } from '../../pictogram.styles.js';
+import { type PictogramProps } from '../../pictogram.types.js';
+
+export function BirthCertificatePictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Birth certificate',
+  copyrightYear = '2023',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('h-13 w-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <polygon
+          className={fill({ mode, outline: true })}
+          points="18.654 18.872 50.317 18.872 50.317 15.871 18.654 15.871"
+        />
+        <polygon
+          className={fill({ mode, outline: true })}
+          points="18.654 26.474 50.317 26.474 50.317 23.474 18.654 23.474"
+        />
+        <polygon
+          className={fill({ mode, outline: true })}
+          points="18.654 34.077 50.317 34.077 50.317 31.076 18.654 31.076"
+        />
+        <polygon
+          className={fill({ mode, outline: true })}
+          points="18.654 41.678 50.317 41.678 50.317 38.678 18.654 38.678"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M56.4717,68.4326 L52.9117,68.4326 L16.0877,68.4326 C14.1097,68.4326 12.4997,66.8236 12.4997,64.8446 L12.4997,9.5786 L56.4717,9.5786 L56.4717,63.3166 C56.6247,66.4536 57.6537,67.7376 59.4507,68.4326 L56.4717,68.4326 Z M58.9717,56.4786 L58.9717,6.9996 L9.9997,6.9996 L9.9997,64.7666 C9.9997,68.1236 12.7317,70.8546 16.0877,70.8546 L58.9717,70.8546 L58.9717,70.8446 L63.1167,70.8446 C65.4627,70.8446 67.3647,68.9426 67.3647,66.5966 L67.3647,56.4786 L58.9717,56.4786 Z"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M25.5527,63.1631 C29.6957,63.1631 33.0527,59.8061 33.0527,55.6631 C33.0527,51.5211 29.6957,48.1631 25.5527,48.1631 C21.4107,48.1631 18.0527,51.5211 18.0527,55.6631 C18.0527,59.8061 21.4107,63.1631 25.5527,63.1631"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/building-pictogram.tsx

@@ -0,0 +1,42 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Pictogram } from '../../pictogram.component.js';
+import { fill } from '../../pictogram.styles.js';
+import { type PictogramProps } from '../../pictogram.types.js';
+
+export function BuildingPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Building',
+  copyrightYear = '2021',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('h-13 w-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M14.026 23.194H21a.32.32 0 0 0 .32-.32v-6.782a.32.32 0 0 0-.32-.319h-6.973a.32.32 0 0 0-.319.32v6.781c0 .177.142.32.32.32m12.497 0h6.973a.32.32 0 0 0 .32-.32v-6.782a.32.32 0 0 0-.32-.319h-6.973a.32.32 0 0 0-.319.32v6.781c0 .177.142.32.32.32m-12.5 12.568H21a.32.32 0 0 0 .32-.32V28.66a.32.32 0 0 0-.32-.319h-6.973a.32.32 0 0 0-.319.319v6.782c0 .177.142.32.32.32m19.535-7.422h-6.972a.32.32 0 0 0-.32.32v6.783a.32.32 0 0 0 .32.319h6.972a.32.32 0 0 0 .32-.32v-6.781a.32.32 0 0 0-.32-.32M14.026 48.33H21a.32.32 0 0 0 .32-.32v-6.782a.32.32 0 0 0-.32-.32h-6.973a.32.32 0 0 0-.319.32v6.783c0 .176.142.319.32.319m12.531 0h6.973a.32.32 0 0 0 .319-.32v-6.782a.32.32 0 0 0-.32-.32H26.56a.32.32 0 0 0-.32.32v6.783a.32.32 0 0 0 .32.319M14.026 60.898H21a.32.32 0 0 0 .32-.32v-6.782a.32.32 0 0 0-.32-.32h-6.973a.32.32 0 0 0-.319.32v6.783c0 .176.142.319.32.319m19.569-7.421h-6.973a.32.32 0 0 0-.32.319v6.783a.32.32 0 0 0 .32.319h6.973a.319.319 0 0 0 .319-.32v-6.782a.32.32 0 0 0-.32-.32"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M40.629 65.254h21.069V29.947H40.629v35.307zm-31.129 0h28.629V11.5H9.5v53.754zm60.538-36.943a.859.859 0 0 0-.859-.856l-22.791-.008V9.868A.87.87 0 0 0 45.52 9H8.25C7.56 9 7 9.56 7 10.25v56.254c0 .69.56 1.25 1.25 1.25l55.405.028a6.494 6.494 0 0 0 6.476-6.509l-.093-32.962z"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M57.179 39.022h-12.03a.214.214 0 0 1-.213-.214v-4.283c0-.118.096-.214.213-.214h12.03c.117 0 .213.096.213.214v4.283a.214.214 0 0 1-.213.214m0 9.165h-12.03a.214.214 0 0 1-.213-.213V43.69c0-.117.096-.213.213-.213h12.03c.117 0 .213.096.213.213v4.284a.214.214 0 0 1-.213.213m0 9.166h-12.03a.214.214 0 0 1-.213-.214v-4.283c0-.118.096-.214.213-.214h12.03c.117 0 .213.096.213.214v4.283a.214.214 0 0 1-.213.214"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/buoy-pictogram.tsx

@@ -0,0 +1,43 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Pictogram } from '../../pictogram.component.js';
+import { fill } from '../../pictogram.styles.js';
+import { type PictogramProps } from '../../pictogram.types.js';
+
+export function BuoyPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Buoy',
+  copyrightYear = '2021',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('h-13 w-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M45.287 56.052l3.66 10.003a29.617 29.617 0 0 1-10.679 1.98c-3.608 0-7.068-.645-10.27-1.826l3.59-9.818A18.967 18.967 0 0 0 38 57.5c2.582 0 5.043-.515 7.287-1.448zm-34.8-28.482l9.96 3.644A18.943 18.943 0 0 0 19 38.5c0 2.25.391 4.409 1.109 6.411l-9.798 3.586A29.63 29.63 0 0 1 8.5 38.267c0-3.769.704-7.376 1.987-10.698zm57.548 10.697c0 3.536-.62 6.93-1.756 10.079l-10.275-3.76c.646-1.91.996-3.957.996-6.086 0-2.46-.467-4.81-1.318-6.967l10.423-3.814a29.622 29.622 0 0 1 1.93 10.548zM38.268 8.5c3.697 0 7.239.678 10.508 1.915l-3.807 10.404A18.95 18.95 0 0 0 38 19.5c-2.129 0-4.176.35-6.087.996l-3.744-10.233A29.634 29.634 0 0 1 38.268 8.5z"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          fillRule="nonzero"
+          d="M38 19.5c10.493 0 19 8.507 19 19s-8.507 19-19 19-19-8.507-19-19 8.507-19 19-19zm0 2c-9.389 0-17 7.611-17 17s7.611 17 17 17 17-7.611 17-17-7.611-17-17-17z"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M38 2a3 3 0 0 1 3 3v1.115c10.258.865 19.16 6.555 24.437 14.78a32.118 32.118 0 0 1 5.961 14.606L72.5 35.5a3 3 0 0 1 0 6h-.826C70.903 58.074 57.569 71.421 41 72.213V73a3 3 0 0 1-5.995.176L35 73v-1.055c-9.538-1.32-17.752-6.828-22.734-14.599a32.093 32.093 0 0 1-6.105-15.845L5 41.5a3 3 0 0 1-.176-5.995L5 35.5h1.118C7.434 20.077 19.645 7.715 35 6.164V5a3 3 0 0 1 3-3zm.268 6.502C21.854 8.502 8.5 21.855 8.5 38.269s13.354 29.768 29.768 29.768c16.413 0 29.767-13.354 29.767-29.768S54.681 8.502 38.268 8.502z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/bus-pictogram.tsx

@@ -0,0 +1,38 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Pictogram } from '../../pictogram.component.js';
+import { fill } from '../../pictogram.styles.js';
+import { type PictogramProps } from '../../pictogram.types.js';
+
+export function BusPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Bus',
+  copyrightYear = '2021',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('h-13 w-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M21.356 24.727h-8.584a1.06 1.06 0 0 0-1.02.772l-2.356 8.42a22.167 22.167 0 0 0-.82 5.974v3.933c0 .838.933 1.35 1.632.887 2.423-1.611 5.39-4.302 11.856-4.59.572-.025 1.03-.476 1.03-1.048V25.78c0-.584-.473-1.053-1.057-1.053"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M28.352 37.53h8.572V27.267h-8.572V37.53zm11.072 0h8.424V27.267h-8.424V37.53zm10.924 0h8.359V27.267h-8.359V37.53zm17.667 14.13c-.911-2.394-3.224-4.103-5.934-4.103s-5.023 1.71-5.934 4.103H21.461c-.911-2.394-3.223-4.103-5.933-4.103s-5.023 1.71-5.934 4.103H5.5V38.946c0-2.756.462-5.472 1.375-8.074l1.949-5.56A5.703 5.703 0 0 1 14.2 21.5h53.77c1.004 0 1.821.816 1.821 1.82v1.448h-42.66l-1.279.03v13.951l.029 1.28h43.91V51.66h-1.776zm-9.787 2.25a3.858 3.858 0 0 1 3.853-3.853 3.857 3.857 0 0 1 3.853 3.853 3.858 3.858 0 0 1-3.853 3.854 3.858 3.858 0 0 1-3.853-3.854zm-46.553 0a3.857 3.857 0 0 1 3.853-3.853 3.858 3.858 0 0 1 3.853 3.853 3.858 3.858 0 0 1-3.853 3.854 3.858 3.858 0 0 1-3.853-3.854zm49.533-16.38h8.583V27.267h-8.583V37.53zM66.971 19H14.2a8.207 8.207 0 0 0-7.736 5.485l-1.949 5.56A26.856 26.856 0 0 0 3 38.946v14.847h.017a.827.827 0 0 0 .416.663l2.511 1.423c.265.151.566.23.871.23h2.76c.897 2.422 3.223 4.155 5.953 4.155 2.729 0 5.055-1.733 5.952-4.155h34.648c.898 2.422 3.224 4.155 5.953 4.155 2.73 0 5.055-1.733 5.953-4.155h7.197a.407.407 0 0 0 .408-.408V25.27c0-2.274-4.241-5.829-6.699-6.15a26.397 26.397 0 0 0-1.969-.12z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/business-person-pictogram.tsx

@@ -0,0 +1,38 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Pictogram } from '../../pictogram.component.js';
+import { fill } from '../../pictogram.styles.js';
+import { type PictogramProps } from '../../pictogram.types.js';
+
+export function BusinessPersonPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Business person',
+  copyrightYear = '2023',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('h-13 w-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M58.4887,67.1731 L48.2197,67.1731 C48.0557,67.1731 47.9237,67.0401 47.9237,66.8761 L47.9237,61.1941 C47.9237,61.0301 48.0557,60.8971 48.2197,60.8971 L58.4887,60.8971 C58.6527,60.8971 58.7847,61.0301 58.7847,61.1941 L58.7847,66.8761 C58.7847,67.0401 58.6527,67.1731 58.4887,67.1731"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M8.871,70.1267 L10.271,61.0667 L10.294,60.9357 C10.755,58.2777 12.569,55.9927 15.146,54.8217 C16.77,54.0857 19.838,52.6847 22.78,51.2977 L32.383,60.9017 C32.775,61.2937 33.41,61.2937 33.802,60.9017 L37.253,57.4497 L40.712,60.9087 C41.1,61.2957 41.728,61.2957 42.117,60.9087 L51.684,51.3397 L52.02,51.4967 C54.773,52.7697 57.551,54.0187 59.07,54.6977 C61.654,55.8527 63.481,58.1277 63.959,60.7887 L65.433,69.9657 L8.871,70.1267 Z M30.571,46.1827 C31.157,45.1267 31.479,43.9487 31.629,42.7887 C33.303,43.9227 35.2,44.6407 37.338,44.6407 C39.302,44.6407 41.042,44.0877 42.581,43.1867 C42.846,44.7307 43.39,46.0147 44.185,47.0247 C44.185,47.0247 44.535,47.4417 45.276,48.0077 L37.253,56.0307 L29.046,47.8227 C30.174,46.8807 30.571,46.1827 30.571,46.1827 L30.571,46.1827 Z M24.604,27.3237 C37.866,23.9337 42.405,13.7417 42.405,13.7417 C44.46,19.1657 47.873,23.1077 50.014,25.2107 C49.985,26.4777 49.766,27.7357 49.36,28.9417 C47.879,33.3507 44.079,42.1407 37.338,42.1407 C29.965,42.1407 25.637,30.4707 24.604,27.3237 L24.604,27.3237 Z M69.221,60.0407 L69.191,59.8697 C68.535,56.1527 66.017,52.9757 62.455,51.3717 C59.8,50.1757 53.024,47.9577 49.61,46.2207 C47.984,45.3937 46.87,44.3267 46.163,43.3637 C51.028,44.7357 54.175,44.3487 55.599,42.1967 C58.165,38.3177 58.499,31.8107 56.599,22.6757 C55.195,12.3347 47.248,4.0007 36.947,4.0007 C26.646,4.0007 18.748,13.3957 17.295,22.6757 C15.493,31.7097 15.827,38.2167 18.295,42.1967 C19.761,44.5597 23.385,44.7117 29.166,42.6567 C28.96,44.0137 28.455,45.4387 27.289,46.2777 C27.136,46.3887 26.97,46.4897 26.793,46.5807 C23.356,48.3397 16.813,51.3307 14.16,52.5347 C10.828,54.0467 8.479,57.0237 7.88,60.4857 L6,72.6237 L55.445,72.4837 L71.227,72.4837 L69.221,60.0407 Z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/calculator-pictogram.tsx

@@ -0,0 +1,62 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Pictogram } from '../../pictogram.component.js';
+import { fill } from '../../pictogram.styles.js';
+import { type PictogramProps } from '../../pictogram.types.js';
+
+export function CalculatorPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Calculator',
+  copyrightYear = '2023',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('h-13 w-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, outline: true })}
+          d="M25.4756 54.5454C26.5696 54.5454 27.4566 53.6584 27.4566 52.5644 27.4566 51.4694 26.5696 50.5824 25.4756 50.5824 24.3806 50.5824 23.4936 51.4694 23.4936 52.5644 23.4936 53.6584 24.3806 54.5454 25.4756 54.5454M32.4155 63.022C33.5095 63.022 34.3965 62.134 34.3965 61.04 34.3965 59.946 33.5095 59.059 32.4155 59.059 31.3205 59.059 30.4335 59.946 30.4335 61.04 30.4335 62.134 31.3205 63.022 32.4155 63.022"
+        />
+        <polygon
+          className={fill({ mode, outline: true })}
+          points="36.026 38.256 30.527 38.256 30.527 32.757 27.55 32.757 27.55 38.256 22.051 38.256 22.051 41.233 27.55 41.233 27.55 46.732 30.527 46.732 30.527 41.233 36.026 41.233"
+        />
+        <polygon
+          className={fill({ mode, outline: true })}
+          points="52.938 35.755 50.834 33.65 46.574 37.909 42.315 33.65 40.21 35.755 44.469 40.014 40.21 44.274 42.315 46.379 46.574 42.119 50.834 46.379 52.938 44.274 48.679 40.014"
+        />
+        <polygon
+          className={fill({ mode, outline: true })}
+          points="24.686 63.264 22.581 61.159 33.205 50.535 35.31 52.64"
+        />
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="40.402 56.034 53.615 56.034 53.615 53.057 40.402 53.057"
+        />
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="40.402 62.036 53.615 62.036 53.615 59.059 40.402 59.059"
+        />
+        <polygon
+          className={fill({ mode, outline: true })}
+          points="21.277 28.111 54.945 28.111 54.945 10.299 21.277 10.299"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M58.7212,65.3237 C58.7212,66.6117 57.6742,67.6587 56.3862,67.6587 L19.8352,67.6587 C18.5482,67.6587 17.5002,66.6117 17.5002,65.3237 L17.5002,8.8347 C17.5002,7.5477 18.5482,6.4997 19.8352,6.4997 L56.3862,6.4997 C57.6742,6.4997 58.7212,7.5477 58.7212,8.8347 L58.7212,65.3237 Z M63.2532,9.3807 L63.2772,9.3707 C63.2772,9.3707 63.1802,9.1947 62.9952,8.9047 C62.9822,8.8857 62.9712,8.8657 62.9572,8.8467 C62.3842,7.9567 61.0562,6.1157 59.1602,4.8357 C58.8362,4.6167 58.5882,4.4967 58.4012,4.4537 C57.7862,4.1697 57.1072,3.9997 56.3862,3.9997 L19.8352,3.9997 C17.1692,3.9997 15.0002,6.1687 15.0002,8.8347 L15.0002,65.3237 C15.0002,66.0927 15.1972,66.8107 15.5182,67.4567 C15.5172,67.4567 15.5132,67.4587 15.5132,67.4587 C15.5132,67.4587 15.5472,67.5187 15.6062,67.6197 C15.7222,67.8327 15.8492,68.0367 15.9952,68.2287 C16.6332,69.1757 17.8802,70.7997 19.5962,71.9697 C20.3912,72.5457 21.3612,72.8947 22.4162,72.8947 L58.9672,72.8947 C61.6342,72.8947 63.8032,70.7257 63.8032,68.0597 L63.8032,11.5707 C63.8032,10.7787 63.5932,10.0407 63.2532,9.3807 L63.2532,9.3807 Z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/calendar-pictogram.tsx

@@ -0,0 +1,38 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Pictogram } from '../../pictogram.component.js';
+import { fill } from '../../pictogram.styles.js';
+import { type PictogramProps } from '../../pictogram.types.js';
+
+export function CalendarPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Calendar',
+  copyrightYear = '2023',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('h-13 w-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M32.2896 38.1076L25.7016 38.1076C25.5346 38.1076 25.3996 37.9726 25.3996 37.8056L25.3996 31.3976C25.3996 31.2316 25.5346 31.0956 25.7016 31.0956L32.2896 31.0956C32.4566 31.0956 32.5916 31.2316 32.5916 31.3976L32.5916 37.8056C32.5916 37.9726 32.4566 38.1076 32.2896 38.1076M44.0454 38.1076L37.4574 38.1076C37.2904 38.1076 37.1554 37.9726 37.1554 37.8056L37.1554 31.3976C37.1554 31.2316 37.2904 31.0956 37.4574 31.0956L44.0454 31.0956C44.2124 31.0956 44.3474 31.2316 44.3474 31.3976L44.3474 37.8056C44.3474 37.9726 44.2124 38.1076 44.0454 38.1076M55.8013 38.1076L49.2133 38.1076C49.0473 38.1076 48.9113 37.9726 48.9113 37.8056L48.9113 31.3976C48.9113 31.2316 49.0473 31.0956 49.2133 31.0956L55.8013 31.0956C55.9683 31.0956 56.1033 31.2316 56.1033 31.3976L56.1033 37.8056C56.1033 37.9726 55.9683 38.1076 55.8013 38.1076M20.5332 49.5344L13.9452 49.5344C13.7792 49.5344 13.6432 49.3994 13.6432 49.2324L13.6432 42.8244C13.6432 42.6584 13.7792 42.5224 13.9452 42.5224L20.5332 42.5224C20.7002 42.5224 20.8352 42.6584 20.8352 42.8244L20.8352 49.2324C20.8352 49.3994 20.7002 49.5344 20.5332 49.5344M32.2896 49.5344L25.7016 49.5344C25.5346 49.5344 25.3996 49.3994 25.3996 49.2324L25.3996 42.8244C25.3996 42.6584 25.5346 42.5224 25.7016 42.5224L32.2896 42.5224C32.4566 42.5224 32.5916 42.6584 32.5916 42.8244L32.5916 49.2324C32.5916 49.3994 32.4566 49.5344 32.2896 49.5344M44.0454 49.5344L37.4574 49.5344C37.2904 49.5344 37.1554 49.3994 37.1554 49.2324L37.1554 42.8244C37.1554 42.6584 37.2904 42.5224 37.4574 42.5224L44.0454 42.5224C44.2124 42.5224 44.3474 42.6584 44.3474 42.8244L44.3474 49.2324C44.3474 49.3994 44.2124 49.5344 44.0454 49.5344M55.8013 49.5344L49.2133 49.5344C49.0473 49.5344 48.9113 49.3994 48.9113 49.2324L48.9113 42.8244C48.9113 42.6584 49.0473 42.5224 49.2133 42.5224L55.8013 42.5224C55.9683 42.5224 56.1033 42.6584 56.1033 42.8244L56.1033 49.2324C56.1033 49.3994 55.9683 49.5344 55.8013 49.5344M20.5332 60.6814L13.9452 60.6814C13.7792 60.6814 13.6432 60.5464 13.6432 60.3794L13.6432 53.9714C13.6432 53.8054 13.7792 53.6694 13.9452 53.6694L20.5332 53.6694C20.7002 53.6694 20.8352 53.8054 20.8352 53.9714L20.8352 60.3794C20.8352 60.5464 20.7002 60.6814 20.5332 60.6814M32.2896 60.6814L25.7016 60.6814C25.5346 60.6814 25.3996 60.5464 25.3996 60.3794L25.3996 53.9714C25.3996 53.8054 25.5346 53.6694 25.7016 53.6694L32.2896 53.6694C32.4566 53.6694 32.5916 53.8054 32.5916 53.9714L32.5916 60.3794C32.5916 60.5464 32.4566 60.6814 32.2896 60.6814"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M61.1548,65.6721 L61.1548,65.6801 L12.0888,65.6801 C10.1098,65.6801 8.4998,64.0711 8.4998,62.0921 L8.4998,26.0971 L61.1548,26.0971 L61.1548,60.9291 C61.1798,64.3711 62.1378,65.6721 64.1338,65.6721 L61.1548,65.6721 Z M8.4998,16.7971 L12.8098,16.7971 L12.8098,19.0181 C12.8098,20.2631 13.8188,21.2731 15.0638,21.2731 C16.3098,21.2731 17.3188,20.2631 17.3188,19.0181 L17.3188,16.7971 L52.5078,16.7971 L52.5078,19.0181 C52.5078,20.2631 53.5168,21.2731 54.7618,21.2731 C56.0068,21.2731 57.0168,20.2631 57.0168,19.0181 L57.0168,16.7971 L61.1548,16.7971 L61.1548,23.5971 L8.4998,23.5971 L8.4998,16.7971 Z M63.6548,56.2941 L63.6548,14.2971 L57.0168,14.2971 L57.0168,12.2551 C57.0168,11.0091 56.0068,10.0001 54.7618,10.0001 C53.5168,10.0001 52.5078,11.0091 52.5078,12.2551 L52.5078,14.2971 L17.3188,14.2971 L17.3188,12.2551 C17.3188,11.0091 16.3098,10.0001 15.0638,10.0001 C13.8188,10.0001 12.8098,11.0091 12.8098,12.2551 L12.8098,14.2971 L5.9998,14.2971 L5.9998,62.0921 C5.9998,65.4491 8.7318,68.1801 12.0888,68.1801 L63.6548,68.1801 L63.6548,68.1701 L67.7998,68.1701 C70.6558,68.1701 72.9708,65.8551 72.9708,62.9991 L72.9708,56.2941 L63.6548,56.2941 Z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/car-pictogram.tsx

@@ -0,0 +1,38 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Pictogram } from '../../pictogram.component.js';
+import { fill } from '../../pictogram.styles.js';
+import { type PictogramProps } from '../../pictogram.types.js';
+
+export function CarPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Car',
+  copyrightYear = '2021',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('h-13 w-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, outline: true })}
+          d="M70.639 48.49h-5.184c0-.027.004-.053.004-.08a7.218 7.218 0 0 0-7.21-7.21c-3.975 0-7.21 3.234-7.21 7.21 0 .027.004.053.004.08H23.462c0-.027.004-.053.004-.08a7.218 7.218 0 0 0-7.21-7.21 7.218 7.218 0 0 0-7.21 7.21c0 .027.004.053.004.08H5.573v-5.832a7.735 7.735 0 0 1 4.954-7.215c.79-.304 2.843-.723 6.16-1.258a10.948 10.948 0 0 0 4.512-2.07c1.51-1.177 3.89-2.905 6.639-4.45 6.47-3.632 11.036-5.317 18.128-5.15.055 0 5.548-.095 8.585.203 8.748.859 14.913 5.643 16.913 13.122.915 3.42.586 9.09-.72 12.383l-.105.267zm-17.1-.08a4.715 4.715 0 0 1 4.71-4.71 4.715 4.715 0 0 1 4.71 4.71 4.715 4.715 0 0 1-4.71 4.709 4.715 4.715 0 0 1-4.71-4.71zm-41.993 0a4.715 4.715 0 0 1 4.71-4.71 4.715 4.715 0 0 1 4.71 4.71 4.715 4.715 0 0 1-4.71 4.709 4.715 4.715 0 0 1-4.71-4.71zm63.62-12.658c-1.415-5.608-7.785-12.023-15.241-14.182a26.983 26.983 0 0 0-6.202-1.34c-3.18-.312-6.273-.213-8.823-.213-7.697 0-11.485 1.61-18.36 5.47-2.883 1.62-5.371 3.427-6.95 4.657a8.433 8.433 0 0 1-3.476 1.593c-3.608.667-5.693 1.092-6.257 1.277-.846.277-2.775 1.107-4.375 2.964A10.239 10.239 0 0 0 3 42.658v7.083c0 .66.515 1.011.863 1.17.866.38 2.28.637 2.748.637h3.164c.19.39.413.76.668 1.109 1.653 2.569 5.282 4.375 8.25 4.375 3.38 0 6.216-2.341 6.993-5.484h25.082c.079.162.163.32.253.476 1.44 2.9 5.46 5.008 8.666 5.008 3.379 0 6.215-2.341 6.992-5.484h6.096a1.25 1.25 0 0 0 1.162-.79l.505-1.271c1.675-4.224 1.807-9.15.725-13.735z"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M45.845 25.508l.55 7.862-22.717 1.59c-.276.019-1.128-.19.01-.95l.513-.388c1.362-1.013 3.294-2.345 5.485-3.55 5.78-3.179 9.876-4.673 16.159-4.564zm7.975.184c5.504.53 9.876 2.743 12.634 6.274L49.388 33.16l-.535-7.657c2.568.055 4.224.118 4.968.19z"
+        />
+      </g>
+    </Pictogram>
+  );
+}