@westpac/ui 0.43.0 → 0.46.0

package/src/components/pictogram/components/aeroplane-pictogram.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+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 AeroplanePictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Aeroplane',
+  copyrightYear = '2025',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('size-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="2 25.025 4.02 27.243 14.694 17.524 12.674 15.306"
+        />
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="12.173 26.43 14.196 28.645 21.129 22.315 19.106 20.1"
+        />
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="42.819 71.941 44.846 74.153 55.492 64.403 53.465 62.191"
+        />
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="44.288 63.905 51.22 57.576 49.197 55.36 42.265 61.689"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M67.6466,13.1538 L56.2406,23.1728 C55.9346,23.4418 55.7786,23.8418 55.8226,24.2478 L59.0926,54.2408 L57.0426,56.0428 L46.7976,33.6118 C46.6326,33.2528 46.3086,32.9918 45.9216,32.9088 C45.8346,32.8898 45.7476,32.8818 45.6606,32.8818 C45.3596,32.8818 45.0656,32.9898 44.8346,33.1918 L33.4296,43.2118 C33.1516,43.4568 32.9956,43.8108 33.0046,44.1808 L33.2316,53.4568 L32.0836,54.4668 L27.3106,44.0148 C27.2086,43.7928 27.0426,43.6038 26.8346,43.4738 L17.0866,37.3938 L18.2356,36.3838 L27.4046,37.8048 C27.7716,37.8608 28.1426,37.7528 28.4206,37.5088 L39.8266,27.4908 C40.1236,27.2298 40.2796,26.8428 40.2476,26.4498 C40.2156,26.0548 39.9986,25.6998 39.6636,25.4908 L18.7406,12.4398 L20.7906,10.6388 L50.1126,17.7468 C50.5086,17.8408 50.9256,17.7388 51.2316,17.4708 L62.6376,7.4528 C63.4026,6.7798 64.3726,6.4338 65.3966,6.5088 C66.4096,6.5728 67.3356,7.0268 68.0046,7.7888 C68.6726,8.5498 69.0036,9.5258 68.9376,10.5388 C68.8696,11.5528 68.4116,12.4818 67.6466,13.1538 M73.2536,8.8188 C73.2456,8.8068 73.2476,8.8018 73.2386,8.7898 C70.9326,5.7488 67.4566,4.4328 67.4566,4.4328 L67.4566,4.4358 C66.8556,4.2018 66.2166,4.0558 65.5546,4.0138 C63.8786,3.9018 62.2526,4.4628 60.9876,5.5738 L50.0696,15.1638 L20.7486,8.0558 C20.3506,7.9618 19.9346,8.0628 19.6286,8.3318 L15.8266,11.6718 C15.5296,11.9328 15.3746,12.3188 15.4066,12.7128 C15.4386,13.1068 15.6546,13.4628 15.9906,13.6718 L34.7746,25.3878 L36.8146,26.8088 L27.2096,35.2458 L18.0416,33.8248 C17.6716,33.7668 17.3026,33.8768 17.0246,34.1208 L14.1736,36.6258 C13.8756,36.8868 13.7206,37.2728 13.7516,37.6668 C13.7846,38.0608 14.0006,38.4168 14.3366,38.6258 L25.1926,45.3958 L30.5076,57.0348 C30.5386,57.1018 30.5806,57.1628 30.6226,57.2228 L30.6206,57.2228 C30.6206,57.2228 30.6276,57.2328 30.6316,57.2378 C30.6506,57.2648 30.6696,57.2918 30.6916,57.3168 C31.0546,57.7888 32.8426,60.0008 34.4436,60.0238 C34.8286,60.1068 35.2326,60.0018 35.5296,59.7408 L38.3806,57.2358 C38.6586,56.9908 38.8146,56.6358 38.8056,56.2658 L38.5786,46.9908 L46.8426,39.7298 L55.4666,58.6108 C55.4926,58.6658 55.5276,58.7138 55.5596,58.7638 L55.5566,58.7648 L55.6046,58.8388 C55.6116,58.8458 55.6166,58.8558 55.6236,58.8648 C55.9316,59.3128 57.3146,61.1628 59.4016,61.5998 C59.4886,61.6188 59.5766,61.6278 59.6636,61.6278 C59.9646,61.6278 60.2586,61.5188 60.4886,61.3168 L64.2906,57.9768 C64.5966,57.7078 64.7516,57.3068 64.7086,56.9018 L61.4386,26.9098 L72.3556,17.3188 C74.8416,15.1338 75.1966,11.4208 73.2536,8.8188"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/arrow-down-pictogram.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+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 ArrowDownPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Arrow down',
+  copyrightYear = '2021',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('size-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.767 13.353 29.767 29.767S54.681 68.037 38.268 68.037m27.168-47.142C59.696 11.947 49.666 6 38.268 6 20.476 6 6 20.475 6 38.268c0 7.133 2.331 13.73 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.09 32.09 0 0 0-6.273-19.088"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M49.264 38.438l-9.243 9.241V21.07h-3.5v26.612l-9.243-9.243-2.358 2.356L36.407 52.28a2.637 2.637 0 0 0 3.728 0l11.487-11.486-2.358-2.356z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/arrow-left-pictogram.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+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 ArrowLeftPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Arrow left',
+  copyrightYear = '2021',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('size-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M37.086 27.045l-9.402 9.08 26.606.465-.06 3.5-26.608-.465 9.08 9.403-2.397 2.316-11.283-11.686a2.637 2.637 0 0 1 .065-3.727l11.684-11.285 2.315 2.399z"
+        />
+        <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.767 13.353 29.767 29.767S54.681 68.037 38.268 68.037m27.168-47.142C59.696 11.947 49.666 6 38.268 6 20.476 6 6 20.475 6 38.268c0 7.133 2.331 13.73 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.09 32.09 0 0 0-6.273-19.088"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/arrow-right-pictogram.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+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 ArrowRightPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Arrow right',
+  copyrightYear = '2021',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('size-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M39.457 27.045l9.401 9.08-26.606.465.062 3.5 26.606-.465-9.08 9.403 2.398 2.316 11.283-11.686a2.637 2.637 0 0 0-.065-3.727L41.772 24.646l-2.315 2.399z"
+        />
+        <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.767 13.353 29.767 29.767S54.681 68.037 38.268 68.037m27.168-47.142C59.696 11.947 49.666 6 38.268 6 20.476 6 6 20.475 6 38.268c0 7.133 2.331 13.73 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.09 32.09 0 0 0-6.273-19.088"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/arrow-up-pictogram.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+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 ArrowUpPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Arrow up',
+  copyrightYear = '2021',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('size-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M49.264 36.683l-9.243-9.242v26.61h-3.5v-26.61l-9.243 9.242-2.358-2.357 11.487-11.485a2.637 2.637 0 0 1 3.728 0l11.487 11.485-2.358 2.357z"
+        />
+        <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.767 13.353 29.767 29.767S54.681 68.037 38.268 68.037m27.168-47.142C59.696 11.947 49.666 6 38.268 6 20.476 6 6 20.475 6 38.268c0 7.133 2.331 13.73 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.09 32.09 0 0 0-6.273-19.088"
+        />
+      </g>
+    </Pictogram>
+  );
+}

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

@@ -0,0 +1,40 @@
+'use client';
+
+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('size-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/atm-pictogram.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+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 = '2025',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('size-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/australia-pictogram.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+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('size-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/bank-card-locked-pictogram.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+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 = '2025',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('size-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/bank-card-pictogram.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+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 = '2025',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('size-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/bank-pictogram.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+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('size-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/birth-certificate-pictogram.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+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 = '2025',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('size-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/building-pictogram.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+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('size-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/buoy-pictogram.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+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('size-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>
+  );
+}