@westpac/ui 0.2.0 → 0.3.0

package/src/components/pictogram/components/informative/telephone-call-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 TelephoneCallPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Telephone call',
+  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="M55.496 43.43l-3-.07c.003-.12.004-.24.004-.36 0-9.127-6.988-16.623-15.905-17.428l-.07-3.016C47.135 23.336 55.5 32.19 55.5 43c0 .144-.001.287-.004.43zm17.994.419l-2.998-.07c.005-.26.008-.519.008-.779 0-19.213-15.263-34.861-34.325-35.48l-.07-3.004C56.857 5.1 73.5 22.106 73.5 43c0 .284-.003.566-.01.849z"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M64.493 43.64l-2.999-.07c.004-.19.006-.38.006-.57 0-14.171-11.123-25.744-25.115-26.464l-.07-3.007C51.997 14.216 64.5 27.149 64.5 43c0 .214-.002.427-.007.64z"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M55.791 62.729l-2.258 2.186a31.692 31.692 0 0 1-2.525 2.191l-.119.106c-.346.348-1.563 1.068-3.698 1.309-4.269.484-13.38-.759-26.259-14.523C7.076 39.203 8.022 29.892 9.072 26.576a6.59 6.59 0 0 1 2.098-3.082l3.627-3.495a.65.65 0 0 1 .926.014l9.156 9.535-.002.011.441.461c.235.243.295.669-.007.961l-4.772 4.58-.004.002c-2.805 2.706.096 6.446 1.652 8.454 2.44 3.16 5.56 6.41 8.78 9.153 3.377 2.872 5.576 4.591 7.683 4.361.754-.086 1.44-.424 2.018-.986l4.873-4.518a.662.662 0 0 1 .39-.183.626.626 0 0 1 .534.197l9.338 9.724a.68.68 0 0 1-.012.964m-2.516-12.414a3.08 3.08 0 0 0-2.12-.955l-5.163-.008a2.673 2.673 0 0 0-.34.007 3.172 3.172 0 0 0-1.826.851l-3.52 3.266c-.925-.695-1.888-1.504-2.717-2.209-3.094-2.634-6.084-5.751-8.423-8.78-2.217-2.86-2.748-4.297-1.895-5.123 3.042-2.987 4.804-4.727 5.286-5.219.724-.739.61-2.29-.007-3.304L22.523 18.276c-.584-.6-1.36-.92-2.177-.943-3.566-.007-5.382-.007-5.446 0a3.164 3.164 0 0 0-1.843.872l-3.47 3.356c-1.27 1.258-2.374 2.608-2.897 4.26-3.55 11.214 7.501 24.636 12.417 29.885 12.13 12.962 21.383 15.395 26.617 15.395h5c.644 0 1.23-.037 1.75-.096 2.192-.247 4.1-.982 5.128-1.97.922-.722 3.872-3.381 5.126-4.717a3.196 3.196 0 0 0 .176-3.927l-9.629-10.076z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/thumbs-up-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 ThumbsUpPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Thumbs up',
+  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="M9.1676,62.0618 C9.1676,60.0678 10.7956,58.4518 12.8036,58.4518 C14.8116,58.4518 16.4396,60.0678 16.4396,62.0618 C16.4396,64.0558 14.8116,65.6718 12.8036,65.6718 C10.7956,65.6718 9.1676,64.0558 9.1676,62.0618 L9.1676,62.0618 Z M6.0006,69.1518 L19.5056,69.1518 L19.5056,32.5468 L6.0006,32.5468 L6.0006,69.1518 Z"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M65.5963,43.4245 L56.8313,63.8855 C56.1313,65.5655 54.4903,66.6515 52.6503,66.6515 L23.2633,66.6515 L22.0053,66.6515 L22.0053,33.0985 C22.0053,31.8785 22.4713,30.7405 23.3203,29.8945 L41.5493,11.6605 L41.6613,11.7715 L43.7353,13.8265 C44.2993,14.3905 44.6273,15.1685 44.6403,15.9675 L42.5503,34.3485 L61.3483,34.3485 C65.0053,34.3485 65.8983,35.2415 65.8983,38.8995 C65.8983,40.6175 65.7303,43.0105 65.5963,43.4245 M65.1063,31.8485 L61.3483,31.8485 L49.1113,31.8485 L50.8093,17.0555 L50.8933,16.1325 L50.8993,16.0195 C50.8993,14.5435 50.3013,13.0995 49.2563,12.0545 L46.7853,9.6075 C46.3963,9.2215 45.8923,9.0265 45.3823,9.0075 L45.3823,8.9995 L41.5923,8.9995 L41.5923,9.0055 C41.0373,8.9945 40.4803,9.1945 40.0603,9.6135 L21.5533,28.1245 C20.2323,29.4435 19.5053,31.2105 19.5053,33.0985 L19.5053,69.1515 L24.5873,69.1515 L52.6503,69.1515 L56.4083,69.1515 C59.2593,69.1515 61.8053,67.4625 62.8923,64.8585 L71.6663,44.3725 C72.1273,43.1965 72.1563,38.9415 72.1563,38.8995 C72.1563,33.8915 70.1133,31.8485 65.1063,31.8485"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/tick-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 TickPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Tick',
+  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="M33.6216,46.04 L25.7986,40.624 C25.6606,40.528 25.4706,40.563 25.3746,40.701 L23.4446,43.49 C23.3496,43.629 23.3836,43.818 23.5216,43.914 L34.6566,51.622 C34.7956,51.717 34.9846,51.683 35.0806,51.544 L51.5556,27.747 C51.6506,27.608 51.6166,27.418 51.4776,27.323 L48.6676,25.378 C48.5286,25.283 48.3396,25.317 48.2436,25.456 L34.0456,45.963 C33.9496,46.102 33.7596,46.136 33.6216,46.04"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M37.7109,67.9121 C21.2969,67.9121 7.9429,54.5581 7.9429,38.1441 C7.9429,21.7301 21.2969,8.3771 37.7109,8.3771 C54.1239,8.3771 67.4779,21.7301 67.4779,38.1441 C67.4779,54.5581 54.1239,67.9121 37.7109,67.9121 M64.8799,20.7701 C59.1389,11.8221 49.1089,5.8751 37.7109,5.8751 C19.9189,5.8751 5.4429,20.3501 5.4429,38.1431 C5.4429,45.2761 7.7739,51.8731 11.7089,57.2211 C17.4489,66.1751 27.4819,72.1251 38.8849,72.1251 C56.6769,72.1251 71.1519,57.6501 71.1519,39.8581 C71.1519,32.7201 68.8179,26.1201 64.8799,20.7701"
+        />
+      </g>
+    </Pictogram>
+  );
+}

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

@@ -0,0 +1,66 @@
+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 ToolsPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Tools',
+  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="M18.521 61.158a2.269 2.269 0 1 1-3.209-3.207 2.269 2.269 0 0 1 3.21 3.207m-.37-6.209a4.776 4.776 0 0 0-4.606
+        1.233 4.78 4.78 0 0 0-1.233 4.606 4.78 4.78 0 0 0 4.598 3.534 4.787 4.787 0 0 0 3.378-1.396 4.784 4.784 0 0 0
+        1.234-4.606 4.775 4.775 0 0 0-3.372-3.371"
+        />{' '}
+        <path
+          className={fill({ mode, outline: true })}
+          d="M22.797 65.433c-3.242 3.24-8.517 3.24-11.758 0-3.242-3.242-3.242-8.517 0-11.759.4-.399.841-.759
+        1.312-1.069.351-.232.562-.624.562-1.044V24.657c0-.426-.218-.823-.576-1.053a8.31 8.31 0 0
+        1-1.407-1.125c-3.04-3.042-3.229-7.873-.563-11.135l.057 4.402c.005.37.173.718.458.952l5.034 4.117a1.247 1.247 0 0
+        0 1.543.031l5.547-4.175c.306-.23.49-.587.498-.969l.09-3.907c2.3 3.243 1.998 7.78-.907
+        10.685-.389.39-.82.742-1.283 1.05a1.252 1.252 0 0 0-.558 1.04v26.946c0 .425.216.82.573 1.051.503.324.966.697
+        1.378 1.108a8.26 8.26 0 0 1 2.435 5.88 8.26 8.26 0 0 1-2.435 5.878m3.056-40.273c.392-.297.763-.62 1.11-.967
+        4.215-4.217 4.215-11.077 0-15.295a10.833 10.833 0 0 0-1.312-1.102c-.34-.246-2.61-.35-3.34-.213a3.825 3.825 0 0
+        0-.455.16 1.25 1.25 0 0 0-.695 1.09l-.143 6.205-2.939 2.212-2.657-2.172-.083-6.557a1.251 1.251 0 0
+        0-.664-1.088c-.313-.167-1.922-.264-2.796-.18-.444.056-.704.118-.982.292-.627.411-1.21.885-1.735 1.41-4.217
+        4.215-4.217 11.076 0 15.292.383.383.802.741 1.25 1.07v25.597a10.88 10.88 0 0 0-1.14.993c-4.218 4.216-4.218
+        11.077 0 15.294a10.784 10.784 0 0 0 7.645 3.162c.087 0 1.088-.024 3.003-.072a10.647 10.647 0 0 0
+        7.151-3.145A10.74 10.74 0 0 0 30.24 59.5c0-2.887-1.125-5.603-3.167-7.645a10.643 10.643 0 0
+        0-1.219-1.048V25.16zm30.226-6.903H44.872a.38.38 0 0 1-.378-.377l-.037-7.89a.38.38 0 0 1
+        .375-.38h.02l6.886.322c2.599.122 5.053.817 7.098 2.012 4.578 2.672 6.753 6.707 7.738
+        9.353-5.398-2.802-10.227-3.03-10.495-3.04zM53.732 66.88c-.292.29-.635.5-1
+        .66-.053.027-.103.059-.16.08-.01.004-.017.01-.027.015l-.006-.004c-.4.152-.83.235-1.27.237a3.377 3.377 0 0
+        1-2.417-1.051 3.38 3.38 0 0 1-.944-2.464l1.22-43.42 4.612-.001.999 43.513a3.382 3.382 0 0 1-1.007 2.435zM37.959
+        18.187h3.452V9.5h-3.452v8.687zM63.146 9.96c-2.392-1.396-5.241-2.21-8.241-2.35l-9.937-.496a2.922 2.922 0 0
+        0-1.761.515 2.248 2.248 0 0 0-1.56-.63H35.46v13.688h6.189c.56 0 1.068-.212 1.463-.55a2.85 2.85 0 0 0
+        1.76.62h1.78l-1.222 43.52a5.858 5.858 0 0 0 1.636 4.268A5.9 5.9 0 0 0 49 69.892c.744.372 2.456.589
+        5.138.65a5.858 5.858 0 0 0 4.157-1.712 5.87 5.87 0 0 0 1.746-4.245l-1.03-43.373c1.82.399 6.25 2.244 8.305
+        3.389.615.279 1.273.357 1.856.353 1.224-.039 2.218-.156 2.753-.531a1.77 1.77 0 0 0
+        .658-1.875c-.655-2.511-2.885-8.762-9.438-12.588z"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M51.27 67.888c.44-.002.87-.085 1.27-.237l.005.004.028-.014c.055-.023.106-.056.16-.08.364-.162.706-.37.998-.66a3.38 3.38 0 0 0 1.007-2.436l-.398-17.358h-5.947l-.485 17.266a3.376 3.376 0 0 0 .944 2.463 3.38 3.38 0 0 0 2.417 1.052"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/tractor-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 TractorPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Tractor',
+  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="M58.612 32.593c0 .413-.319.748-.714.748H36.262c-.494 0-.839-.513-.672-1l4.208-14.278a.717.717 0 0 1 .671-.496H57.9c.394 0 .713.335.713.748v14.278z"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M52.153 50.036a5.119 5.119 0 0 1 5.113-5.113 5.118 5.118 0 0 1 5.11 5.113 5.117 5.117 0 0 1-5.11 5.112 5.118 5.118 0 0 1-5.113-5.112zm-2.5 0c0 4.197 3.416 7.612 7.613 7.612 4.197 0 7.61-3.415 7.61-7.612 0-4.198-3.413-7.613-7.61-7.613-4.197 0-7.613 3.415-7.613 7.613zM8.53 54.339a2.406 2.406 0 0 0 2.403 2.403 2.405 2.405 0 0 0 2.4-2.403 2.404 2.404 0 0 0-2.4-2.401 2.404 2.404 0 0 0-2.402 2.401z"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M46.012 50.207c0-6.205 5.048-11.254 11.253-11.254s11.254 5.05 11.254 11.254c0 6.205-5.05 11.253-11.254 11.253-6.205 0-11.253-5.048-11.253-11.253zm-14.87-3.01V31.202L35.988 16.1a3.73 3.73 0 0 1 3.562-2.6h23.456v24.22a13.62 13.62 0 0 0-5.742-1.267c-6.55 0-12.033 4.605-13.411 10.744H31.142zm-11.375 5.986a8.854 8.854 0 0 0-1.274-3.486h25.044c-.005.171-.025.338-.025.51 0 1.024.13 2.016.347 2.976H19.767zM4.5 54.383a6.437 6.437 0 0 1 6.43-6.43 6.438 6.438 0 0 1 6.43 6.43 6.437 6.437 0 0 1-6.43 6.43 6.437 6.437 0 0 1-6.43-6.43zm2.664-14.899A3.596 3.596 0 0 1 9.83 36.01l18.81-3.136v14.324H16.15a8.879 8.879 0 0 0-5.217-1.696 8.86 8.86 0 0 0-3.77.845v-6.862zm62.927-23.8c0-.865-.532-1.576-1.191-2.112L65.453 11H39.55a6.223 6.223 0 0 0-5.944 4.335l-4.805 14.977-12.347 2.058v-7.247a1.5 1.5 0 0 0-1.5-1.5h-4.473v3h2.973v6.247l-4.09.682-.102.022a6.092 6.092 0 0 0-4.6 5.91v8.595A8.9 8.9 0 0 0 2 54.433c0 1.003.174 1.964.48 2.865C3.723 61.92 10.807 65.4 15.468 65.4c4.51 0 8.243-3.344 8.876-7.682h21.352c3.32 4.865 10.46 8.277 16.105 8.277 7.61 0 13.802-6.19 13.802-13.802 0-4.5-2.168-8.497-5.512-11.015V15.684z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

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

@@ -0,0 +1,36 @@
+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 TruckPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Truck',
+  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="38 27 64 27 64 24 38 24" />
+        <polygon className={fill({ mode, highlight: true })} points="46 34 63 34 63 31 46 31" />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M67.4563591,54.7955404 L63.924647,54.7955404 C63.3145409,51.0311149 60.0691015,48.1470298 56.1567076,48.1470298 C52.2473591,48.1470298 49.0009045,51.0311149 48.3907985,54.7955404 L33.0437379,54.7955404 L33.0437379,19.816817 C33.0437379,19.1397106 33.5909045,18.5882213 34.26395,18.5882213 L66.4148136,18.5882213 C66.9893894,18.5882213 67.4563591,19.0590298 67.4563591,19.6360511 L67.4563591,54.7955404 Z M59.7412076,60.029583 C59.5909652,60.1684766 59.4346318,60.3022638 59.268147,60.4237957 C59.1666318,60.4963064 59.0630864,60.5626894 58.9564955,60.6280511 C58.7463591,60.7618383 58.5301318,60.8843915 58.3017227,60.9865191 C58.2357379,61.0161362 58.1677227,61.0386043 58.0997076,61.0661787 C57.8286621,61.174434 57.5484803,61.2663489 57.2571318,61.3286468 C57.2297227,61.3357957 57.1992682,61.3378383 57.1698288,61.343966 C56.8419348,61.4083064 56.5049045,61.4471149 56.1567076,61.4471149 C55.8095258,61.4471149 55.4724955,61.4083064 55.1446015,61.343966 C55.1161773,61.3378383 55.0857227,61.3357957 55.0562833,61.3286468 C54.76595,61.2663489 54.4867833,61.174434 54.2157379,61.0661787 C54.1487379,61.0386043 54.0786924,61.0161362 54.0137227,60.9865191 C53.7853136,60.8843915 53.5680712,60.760817 53.3579348,60.6290723 C53.2523591,60.5626894 53.1488136,60.4963064 53.0483136,60.4237957 C52.8818288,60.3022638 52.7244803,60.1684766 52.5732227,60.029583 C52.467647,59.9325617 52.3661318,59.8365617 52.2686773,59.7323915 L52.2686773,59.7313702 C51.3753439,58.7713702 50.8170106,57.4896681 50.8170106,56.0731574 C50.8170106,54.7587745 51.3073288,53.5689872 52.0879803,52.6345191 C52.1458439,52.5650723 52.1986318,52.4925617 52.2585258,52.4272 C52.38745,52.2883064 52.5265258,52.1626894 52.668647,52.0380936 C52.7721924,51.9472 52.8757379,51.8583489 52.9863894,51.7746043 C53.1173439,51.6765617 53.2523591,51.5856681 53.39245,51.4988596 C53.5355864,51.4100085 53.6858288,51.3303489 53.8381015,51.2557957 C53.9670258,51.1924766 54.0939197,51.1291574 54.2289348,51.0760511 C54.4197833,51.0004766 54.618753,50.9443064 54.8217833,50.8912 C54.93345,50.861583 55.0420712,50.8237957 55.1577985,50.8013277 C55.4806167,50.7390298 55.8115561,50.7002213 56.152647,50.7002213 C56.1546773,50.7002213 56.1556924,50.7002213 56.1567076,50.7002213 C56.1587379,50.7002213 56.159753,50.7002213 56.1617833,50.7002213 C56.5028742,50.7002213 56.8348288,50.7390298 57.157647,50.8013277 C57.2733742,50.8237957 57.3809803,50.861583 57.4936621,50.8912 C57.6956773,50.9443064 57.894647,51.0004766 58.0875258,51.0760511 C58.2205106,51.1291574 58.3474045,51.1924766 58.4763288,51.2557957 C58.6306318,51.3303489 58.7788439,51.4100085 58.9240106,51.4988596 C59.0630864,51.5856681 59.1981015,51.6765617 59.3290561,51.7746043 C59.4407227,51.8583489 59.543253,51.9472 59.6478136,52.0380936 C59.7889197,52.1626894 59.9279955,52.2883064 60.0569197,52.4272 C60.1178288,52.493583 60.1696015,52.5650723 60.2274652,52.6345191 C61.0081167,53.5700085 61.4984348,54.7587745 61.4984348,56.0731574 C61.4984348,57.6438809 60.8132076,59.0460936 59.7412076,60.029583 L59.7412076,60.029583 Z M30.5058591,54.7965617 L27.2888439,54.7965617 C26.6787379,51.0321362 23.4332985,48.1470298 19.5209045,48.1470298 C15.6105409,48.1470298 12.3640864,51.0321362 11.7549955,54.7965617 L9.12372273,54.7965617 C8.80090455,54.7965617 8.5379803,54.5320511 8.5379803,54.2072851 L8.5379803,39.7531574 C8.5379803,39.2966468 8.70751061,38.8605617 9.01713182,38.5245617 L19.5980561,27.0147745 C19.9371167,26.6460936 20.4182985,26.4346894 20.917753,26.4346894 L30.5058591,26.4346894 L30.5058591,54.7965617 Z M23.40995,59.7313702 L23.40995,59.7323915 C23.3135106,59.8365617 23.2109803,59.9325617 23.1064197,60.0285617 C22.954147,60.1684766 22.7978136,60.3022638 22.6303136,60.424817 C22.5298136,60.4973277 22.4262682,60.5626894 22.3206924,60.6290723 C22.1105561,60.7618383 21.8943288,60.8843915 21.6659197,60.9865191 C21.5999348,61.0161362 21.5319197,61.0396255 21.4628894,61.0661787 C21.1928591,61.174434 20.9126773,61.2663489 20.6213288,61.3286468 C20.5929045,61.3357957 20.5634652,61.3378383 20.5340258,61.343966 C20.2061318,61.4083064 19.8680864,61.4471149 19.5209045,61.4471149 C19.1737227,61.4471149 18.8356773,61.4083064 18.5087985,61.343966 C18.4793591,61.3378383 18.4499197,61.3357957 18.4204803,61.3286468 C18.130147,61.2663489 17.8509803,61.174434 17.5789197,61.0661787 C17.5119197,61.0396255 17.4428894,61.0161362 17.3769045,60.9865191 C17.1484955,60.8843915 16.9322682,60.760817 16.7221318,60.6290723 C16.6175712,60.5626894 16.5130106,60.4973277 16.4135258,60.424817 C16.2470409,60.3022638 16.0886773,60.1694979 15.9374197,60.029583 C15.8318439,59.9325617 15.7293136,59.8365617 15.6328742,59.7323915 C15.6328742,59.7313702 15.6318591,59.7313702 15.6318591,59.7313702 C14.7385258,58.7713702 14.1812076,57.4896681 14.1812076,56.0731574 C14.1812076,55.6309447 14.2492227,55.2081362 14.3497227,54.7965617 C14.3497227,54.7955404 14.3507379,54.7955404 14.3507379,54.7955404 C14.5486924,53.9846468 14.9334348,53.2554553 15.4511621,52.6355404 C15.5090258,52.5660936 15.5618136,52.493583 15.6217076,52.4272 C15.7506318,52.2883064 15.8897076,52.1637106 16.0308136,52.0391149 C16.1353742,51.9472 16.2399348,51.8583489 16.3495712,51.7746043 C16.4815409,51.6765617 16.6155409,51.5856681 16.7556318,51.4998809 C16.8997833,51.4100085 17.0490106,51.3303489 17.2022985,51.2557957 C17.3312227,51.1924766 17.4581167,51.1291574 17.5921167,51.0760511 C17.7829652,51.0004766 17.9839652,50.9443064 18.1859803,50.8912 C18.297647,50.861583 18.4062682,50.8237957 18.5209803,50.8013277 C18.8437985,50.7390298 19.1747379,50.7002213 19.5168439,50.7002213 C19.5178591,50.7002213 19.5198894,50.7002213 19.5209045,50.7002213 C19.5219197,50.7002213 19.52395,50.7002213 19.5249652,50.7002213 C19.8670712,50.7002213 20.1980106,50.7390298 20.5218439,50.8013277 C20.6365561,50.8237957 20.7441621,50.861583 20.8578591,50.8912 C21.0588591,50.9443064 21.2588439,51.0004766 21.4517227,51.0760511 C21.5847076,51.1291574 21.7116015,51.1924766 21.8405258,51.2557957 C21.9948288,51.3303489 22.1430409,51.4100085 22.2871924,51.4988596 C22.4272833,51.5856681 22.5612833,51.6765617 22.6922379,51.7746043 C22.8039045,51.8583489 22.9084652,51.9472 23.0120106,52.0391149 C23.1531167,52.1637106 23.2921924,52.2883064 23.4201015,52.4272 C23.4820258,52.493583 23.5337985,52.5660936 23.5916621,52.6355404 C24.1104045,53.2554553 24.495147,53.9846468 24.6931015,54.7955404 L24.6931015,54.7965617 C24.7946167,55.2081362 24.8626318,55.6309447 24.8626318,56.0731574 C24.8626318,57.4896681 24.3042985,58.7713702 23.40995,59.7313702 L23.40995,59.7313702 Z M71.5717833,20.3019234 C71.5727985,20.2917106 71.5748288,20.2866043 71.5768591,20.2774128 C71.5464045,20.2314553 71.5210258,20.1987745 71.4915864,20.1548596 C71.4266167,20.0466043 71.3555561,19.9454979 71.2804348,19.8454128 C69.4460561,17.1543489 68.279647,16.5650723 68.279647,16.5650723 L68.286753,16.582434 C67.7406015,16.2423489 67.1030864,16.0360511 66.4148136,16.0360511 L34.26395,16.0360511 C32.1920258,16.0360511 30.5058591,17.7323915 30.5058591,19.816817 L30.5058591,23.8814979 L20.917753,23.8814979 C19.7127682,23.8814979 18.55245,24.3921362 17.735253,25.2816681 L7.15331364,36.7914553 C6.40920758,37.6003064 6.00010152,38.6522213 6.00010152,39.7531574 L6.00010152,54.2072851 C6.00010152,54.8169872 6.18079848,55.3797106 6.48026818,55.8617532 L6.47011667,55.8607319 C6.47011667,55.8607319 7.35735909,57.5305191 9.02626818,58.8765617 C9.18666212,59.0277106 9.36228333,59.1574128 9.55110152,59.2717957 C9.57445,59.2881362 9.59576818,59.3075404 9.62013182,59.3238809 C9.62825303,59.3249021 9.63434394,59.3218383 9.64246515,59.3218383 C10.0921773,59.5751149 10.6027985,59.7313702 11.1540258,59.7313702 L12.5386924,59.7313702 C13.8553439,62.2641362 16.488647,64.0003064 19.5209045,64.0003064 C22.5541773,64.0003064 25.1874803,62.2641362 26.5041318,59.7313702 L33.9878288,59.7313702 L35.0740409,59.7313702 L49.1755106,59.7313702 C50.4921621,62.2641362 53.1254652,64.0003064 56.1567076,64.0003064 C59.1899803,64.0003064 61.8232833,62.2641362 63.1399348,59.7313702 L70.5718591,59.7313702 C71.3728136,59.7313702 72.0245409,59.0767319 72.0245409,58.2709447 L72.0245409,22.0197106 C72.0245409,21.3936681 71.85095,20.8146043 71.5717833,20.3019234 L71.5717833,20.3019234 Z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/umbrella-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 UmbrellaPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Umbrella',
+  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="M33.463 72.144c-5.36-.098-7.302-4.975-7.3-8.23v-.007c0-1.204.978-2.181 2.182-2.18h.017a2.18 2.18 0 0 1 2.179 2.182c.009.647.196 3.806 3 3.857.929.009 1.61-.211 2.11-.695.936-.907 1.162-2.595 1.169-3.17V55.32h4.379v8.596c0 .394-.07 3.913-2.468 6.267-1.95 1.914-4.087 1.983-5.268 1.96z"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M61.249 34.714c-2.133 0-4.07.478-5.606 1.286v-.001h-.004c-.896-13.834-6.623-21.597-10.681-25.412a.01.01 0 0 1 .007.002l-.003-.002a28.06 28.06 0 0 1 2.123.66c.126.045.246.1.371.147.564.208 1.125.424 1.675.666.219.096.43.209.646.31.446.21.891.417 1.326.648.266.14.524.3.787.45.37.21.743.418 1.104.645.297.186.584.389.874.585.312.21.626.416.931.638.318.232.625.48.934.724.26.205.524.406.778.619.332.28.652.574.973.868.213.195.43.386.639.588.341.328.668.67.994 1.014.172.18.348.36.516.546.342.377.669.767.993 1.16.136.166.274.329.407.497.337.426.659.864.976 1.308.103.146.209.29.31.439.326.474.635.958.936 1.449.078.129.157.256.234.385.307.518.597 1.046.874 1.582l.172.332c.281.558.545 1.125.794 1.7l.124.292a31.374 31.374 0 0 1 1.361 3.95l.065.244c.169.644.319 1.294.448 1.952l.023.098-.005-.001c.088.458.186.913.255 1.378-1.637-1.084-3.874-1.746-6.351-1.746m-15.714 0c-2.007 0-3.834.43-5.323 1.153v-.002c-.001 0-.003 0-.005.002V10.2c0-.076-.029-.142-.043-.214l.006.003-.001-.003c.708.436 2.172 1.443 3.873 3.19l.03.032a26.51 26.51 0 0 1 .989 1.079l.094.11c.143.165.285.336.429.51l.118.148a23.236 23.236 0 0 1 .549.703c.131.174.262.352.394.535l.153.215c.126.179.252.362.378.549l.165.248c.121.185.243.375.363.569.058.09.115.182.172.275.117.192.234.39.351.59l.175.305a49.19 49.19 0 0 1 .515.945c.11.21.219.429.327.648.058.117.115.23.172.348.106.223.212.453.316.684.055.122.112.242.166.367.104.238.205.482.306.727.052.126.105.249.155.377.102.255.2.517.297.78.047.127.096.252.142.38.099.279.195.566.291.854.04.12.082.239.121.362.101.315.196.639.291.965.03.104.062.204.093.309.108.386.212.782.312 1.184l.038.147c.338 1.377.622 2.846.839 4.412.009.06.016.126.024.187.061.458.119.922.169 1.397.012.112.02.229.031.342.038.38.076.758.105 1.149l-.005-.002c.049.642.089 1.295.115 1.965-1.601-1.726-4.41-2.857-7.687-2.857M37.712 10.2v25.548l-.005-.002v1.962c-.01.01-.021.02-.031.032-1.57-1.825-4.47-3.026-7.857-3.026-2.101 0-4.013.464-5.538 1.25v-.001h-.005C25.384 16.502 37.182 10.248 37.709 9.98c.019-.011.032-.03.052-.041l-.001.004.005-.004c-.019.087-.053.169-.053.262m-15.9 25.466l-.003-.002c-.037.604-.081 1.199-.096 1.827-1.613-1.68-4.383-2.777-7.609-2.777-.243 0-.483.01-.722.024-.056.003-.112.002-.167.005-.88.058-1.722.2-2.509.415v-.001c-1.078.293-2.054.72-2.88 1.256 1.975-13.436 12.584-24.41 25.54-26.45-.334.278-.688.594-1.051.93a.019.019 0 0 0 .007-.002c-4.083 3.78-9.704 11.374-10.51 24.775m11.884-28.28C18.17 9.465 5.591 23.376 5.03 39.792A54.08 54.08 0 0 0 5 40.927c0 .69.56 1.25 1.25 1.25h2.539c1.33 0 1.354-.813 1.379-1.336.075-1.574 2.463-3.885 5.689-3.48 2.585.432 4.603 1.773 4.815 3.305v.438c0 .69.585 1.25 1.306 1.25h2.249c1.284 0 1.644-.69 1.644-1.427 0-1.581 2.649-3.9 5.702-3.565 2.733.456 4.857 1.925 4.857 3.565 0 .352.281 1.307 1.282 1.412v12.98h2.5V42.323c.902-.147 1.375-.76 1.375-1.395 0-1.581 2.59-4.03 5.701-3.565 2.492.415 4.786 1.94 4.788 3.14v.602c0 .69.609 1.25 1.361 1.25h2.341c1.12 0 1.524-.838 1.524-1.427 0-1.585 2.895-3.916 5.729-3.567 2.87.467 4.819 1.996 4.819 3.484.045 1.17.607 1.51 1.391 1.51h2.231c1.264 0 1.63-.642 1.61-1.77-.174-17.115-13.474-31.734-29.7-33.422-4.373-.369-6.434-.146-9.686.224z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/unsecure-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 UnsecurePictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Unsecure',
+  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="46.982 30.009 44.893 27.92 36.813 36 28.733 27.92 26.644 30.009 34.724 38.089 26.644 46.169 28.733 48.258 36.813 40.178 44.893 48.258 46.982 46.169 38.902 38.089"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M61.126 35.491c0 14.786-10.432 28.462-24.312 31.944C22.932 63.953 12.5 50.276 12.5 35.491V19.683l24.313-10.94 24.312 10.94v15.808zM36.814 6.001L10 18.065V35.49c0 7.274 2.169 14.549 7.16 21.287.02.025.037.05.056.073 3.158 4.25 7.204 7.795 11.836 10.246a42.537 42.537 0 0 0 10.97 4.326l.29.07.292-.07c15.12-3.625 26.52-18.435 26.52-34.449V19.551l-30.31-13.55z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/wallet-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 WalletPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Wallet',
+  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="M68.8052,65.865 L11.0882,65.865 C9.1102,65.865 7.5002,64.255 7.5002,62.277 L7.5002,25.487 L7.5002,21.893 L7.5002,18.949 C8.1712,20.682 9.50878906,21.893 11.4362,21.893 L68.8052,21.893 L68.8052,65.865 Z M53.3662,19.393 L53.3662,11 L9.2482,11 C6.9022,11 5.0002,12.902 5.0002,15.248 L5.0002,19.393 L5.0002,21.347 L5.0002,62.277 C5.0002,65.634 7.7312,68.365 11.0882,68.365 L71.3052,68.365 L71.3052,19.393 L53.3662,19.393 Z"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M73.1484,32.6428 C73.7014,32.6428 74.1484,33.0908 74.1484,33.6428 L74.1484,53.6428 C74.1484,54.1948 73.7014,54.6428 73.1484,54.6428 L56.1484,54.6428 C56.0014,54.6428 55.8604,54.6108 55.7344,54.5538 C50.3274,53.8588 46.1484,49.2388 46.1484,43.6428 C46.1484,38.0468 50.3274,33.4268 55.7344,32.7328 C55.8604,32.6748 56.0014,32.6428 56.1484,32.6428 L73.1484,32.6428 Z M56.6484,39.1428 C54.1634,39.1428 52.1484,41.1578 52.1484,43.6428 C52.1484,46.1278 54.1634,48.1428 56.6484,48.1428 C59.1334,48.1428 61.1484,46.1278 61.1484,43.6428 C61.1484,41.1578 59.1334,39.1428 56.6484,39.1428 L56.6484,39.1428 Z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/wearables-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 WearablesPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Wearables',
+  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="M47.436 52.37h-20.7a1.94 1.94 0 0 1-1.936-1.934V24.54a1.94 1.94 0 0 1 1.935-1.934h20.701a1.94 1.94 0 0 1 1.934 1.934v25.896a1.94 1.94 0 0 1-1.934 1.934"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M52.674 51.958a3.716 3.716 0 0 1-3.711 3.711h-23.75c-1.38 0-2.573-.768-3.213-1.89v.004c-.01-.017-.016-.036-.026-.053-.1-.18-.185-.37-.253-.568a4.018 4.018 0 0 1-.11-.348 3.48 3.48 0 0 1-.042-.208 3.375 3.375 0 0 1-.07-.648V23.031a3.716 3.716 0 0 1 3.712-3.71h23.752a3.716 3.716 0 0 1 3.71 3.71v28.927zm-7.53 12.405a87.928 87.928 0 0 1-.352 1.76c-.294 1.37-1.537 2.366-2.956 2.366h-9.327c-1.42 0-2.662-.996-2.956-2.367-.12-.554-.234-1.148-.353-1.759-.42-2.17-.871-4.495-1.69-6.194h19.324c-.818 1.7-1.27 4.023-1.69 6.194zM29.198 10.625c.119-.61.234-1.204.353-1.758.294-1.372 1.537-2.367 2.956-2.367h9.327c.162 0 .32.016.476.041.092.015.178.04.267.063.054.013.109.025.16.041.122.04.236.085.349.136l.035.017a2.992 2.992 0 0 1 1.672 2.07c.119.553.235 1.147.353 1.757.42 2.171.87 4.496 1.689 6.195H27.508c.819-1.699 1.27-4.024 1.689-6.195zm27.577 11.532c-2-2.833-3.93-4.113-5.183-4.72-.44-1.426-1.235-5.525-1.356-6.094a5.386 5.386 0 0 0-.981-2.104c-.761-.939-3.434-3.974-5.208-4.754A5.49 5.49 0 0 0 41.833 4h-9.35c-2.58.011-4.84 1.834-5.378 4.343a97.633 97.633 0 0 0-.362 1.807c-.308 1.59-.862 4.445-1.6 5.847-.267.506-.429.817-.87.902-2.98.455-5.273 3.028-5.273 6.132v28.927c0 1.342.243 2.27 1.13 3.527 2 2.833 4.459 4.5 4.459 4.5l-.007-.015c.37.27.77.494 1.196.676.425 1.407 1.206 5.43 1.327 6a5.41 5.41 0 0 0 .593 1.518s1.872 3.655 5.377 5.242a5.535 5.535 0 0 0 2.43.583h9.328c2.59 0 4.862-1.826 5.402-4.343.12-.569 1.103-8.216 2.832-8.576a6.22 6.22 0 0 0 5.104-6.11V26.03c0-1.35-.892-3.158-1.397-3.874z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/index.ts

@@ -0,0 +1,96 @@
+export { AccessibilityPictogram } from './components/informative/accessibility-pictogram.js';
+export { AccountsPictogram } from './components/informative/accounts-pictogram.js';
+export { AeroplanePictogram } from './components/informative/aeroplane-pictogram.js';
+export { ArrowDownPictogram } from './components/informative/arrow-down-pictogram.js';
+export { ArrowLeftPictogram } from './components/informative/arrow-left-pictogram.js';
+export { ArrowRightPictogram } from './components/informative/arrow-right-pictogram.js';
+export { ArrowUpPictogram } from './components/informative/arrow-up-pictogram.js';
+export { ArrowsPassingPictogram } from './components/informative/arrows-passing-pictogram.js';
+export { ATMPictogram } from './components/informative/atm-pictogram.js';
+export { AustraliaPictogram } from './components/informative/australia-pictogram.js';
+export { BankCardLockedPictogram } from './components/informative/bank-card-locked-pictogram.js';
+export { BankCardPictogram } from './components/informative/bank-card-pictogram.js';
+export { BankPictogram } from './components/informative/bank-pictogram.js';
+export { BirthCertificatePictogram } from './components/informative/birth-certificate-pictogram.js';
+export { BuildingPictogram } from './components/informative/building-pictogram.js';
+export { BuoyPictogram } from './components/informative/buoy-pictogram.js';
+export { BusPictogram } from './components/informative/bus-pictogram.js';
+export { BusinessPersonPictogram } from './components/informative/business-person-pictogram.js';
+export { CalculatorPictogram } from './components/informative/calculator-pictogram.js';
+export { CalendarPictogram } from './components/informative/calendar-pictogram.js';
+export { CarPictogram } from './components/informative/car-pictogram.js';
+export { CashPictogram } from './components/informative/cash-pictogram.js';
+export { CelebrationPictogram } from './components/informative/celebration-pictogram.js';
+export { ChatPictogram } from './components/informative/chat-pictogram.js';
+export { ClockPictogram } from './components/informative/clock-pictogram.js';
+export { CoffeePictogram } from './components/informative/coffee-pictogram.js';
+export { CoinsPictogram } from './components/informative/coins-pictogram.js';
+export { CompassPictogram } from './components/informative/compass-pictogram.js';
+export { CustomerProfilePictogram } from './components/informative/customer-profile-pictogram.js';
+export { DesktopComputerPictogram } from './components/informative/desktop-computer-pictogram.js';
+export { DocumentAndPenPictogram } from './components/informative/document-and-pen-pictogram.js';
+export { DollarSignPictogram } from './components/informative/dollar-sign-pictogram.js';
+export { DriversLicencePictogram } from './components/informative/drivers-licence-pictogram.js';
+export { EducationPictogram } from './components/informative/education-pictogram.js';
+export { EftposPictogram } from './components/informative/eftpos-pictogram.js';
+export { EnvelopeEmailPictogram } from './components/informative/envelope-email-pictogram.js';
+export { EnvelopePrintedPictogram } from './components/informative/envelope-printed-pictogram.js';
+export { FaceHappyPictogram } from './components/informative/face-happy-pictogram.js';
+export { FaceUnhappyPictogram } from './components/informative/face-unhappy-pictogram.js';
+export { FaceUnsurePictogram } from './components/informative/face-unsure-pictogram.js';
+export { FingerMotionPictogram } from './components/informative/finger-motion-pictogram.js';
+export { FingerprintPictogram } from './components/informative/fingerprint-pictogram.js';
+export { FootballPictogram } from './components/informative/football-pictogram.js';
+export { ForkKnifePictogram } from './components/informative/fork-knife-pictogram.js';
+export { GenericDocumentPictogram } from './components/informative/generic-document-pictogram.js';
+export { GiftPictogram } from './components/informative/gift-pictogram.js';
+export { GlobeAustraliaPictogram } from './components/informative/globe-australia-pictogram.js';
+export { GlobePictogram } from './components/informative/globe-pictogram.js';
+export { GraphDecreasingPictogram } from './components/informative/graph-decreasing-pictogram.js';
+export { GraphIncreasingPictogram } from './components/informative/graph-increasing-pictogram.js';
+export { GymPictogram } from './components/informative/gym-pictogram.js';
+export { HeadsetPictogram } from './components/informative/headset-pictogram.js';
+export { HeartPictogram } from './components/informative/heart-pictogram.js';
+export { HousePictogram } from './components/informative/house-pictogram.js';
+export { LightBulbPictogram } from './components/informative/light-bulb-pictogram.js';
+export { LoopPictogram } from './components/informative/loop-pictogram.js';
+export { MedicareCardPictogram } from './components/informative/medicare-card-pictogram.js';
+export { MobileDevicePictogram } from './components/informative/mobile-device-pictogram.js';
+export { MoneyInPictogram } from './components/informative/money-in-pictogram.js';
+export { MoneyOutPictogram } from './components/informative/money-out-pictogram.js';
+export { MovieTicketsPictogram } from './components/informative/movie-tickets-pictogram.js';
+export { NestEggPictogram } from './components/informative/nest-egg-pictogram.js';
+export { NoodlesPictogram } from './components/informative/noodles-pictogram.js';
+export { Number1Pictogram } from './components/informative/number-1-pictogram.js';
+export { Number2Pictogram } from './components/informative/number-2-pictogram.js';
+export { Number3Pictogram } from './components/informative/number-3-pictogram.js';
+export { Number4Pictogram } from './components/informative/number-4-pictogram.js';
+export { Number5Pictogram } from './components/informative/number-5-pictogram.js';
+export { PadlockLockedPictogram } from './components/informative/padlock-locked-pictogram.js';
+export { PadlockUnlockedPictogram } from './components/informative/padlock-unlocked-pictogram.js';
+export { PassportPictogram } from './components/informative/passport-pictogram.js';
+export { PercentSignPictogram } from './components/informative/percent-sign-pictogram.js';
+export { PersonPictogram } from './components/informative/person-pictogram.js';
+export { PiggyBankPictogram } from './components/informative/piggy-bank-pictogram.js';
+export { PizzaPictogram } from './components/informative/pizza-pictogram.js';
+export { PlantPictogram } from './components/informative/plant-pictogram.js';
+export { SearchPictogram } from './components/informative/search-pictogram.js';
+export { SecurePictogram } from './components/informative/secure-pictogram.js';
+export { ShopPictogram } from './components/informative/shop-pictogram.js';
+export { ShoppingPictogram } from './components/informative/shopping-pictogram.js';
+export { StarPictogram } from './components/informative/star-pictogram.js';
+export { StopwatchPictogram } from './components/informative/stopwatch-pictogram.js';
+export { TaxDocumentPictogram } from './components/informative/tax-document-pictogram.js';
+export { TelephoneCallPictogram } from './components/informative/telephone-call-pictogram.js';
+export { ThumbsUpPictogram } from './components/informative/thumbs-up-pictogram.js';
+export { TickPictogram } from './components/informative/tick-pictogram.js';
+export { ToolsPictogram } from './components/informative/tools-pictogram.js';
+export { TractorPictogram } from './components/informative/tractor-pictogram.js';
+export { TruckPictogram } from './components/informative/truck-pictogram.js';
+export { UmbrellaPictogram } from './components/informative/umbrella-pictogram.js';
+export { UnsecurePictogram } from './components/informative/unsecure-pictogram.js';
+export { WalletPictogram } from './components/informative/wallet-pictogram.js';
+export { WearablesPictogram } from './components/informative/wearables-pictogram.js';
+
+export { WBCBankCardPictogram } from './components/decorative/wbc-bank-card-pictogram.js';
+export { type PictogramProps } from './pictogram.types.js';

package/src/components/pictogram/pictogram.component.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { styles } from './pictogram.styles.js';
+import { type PictogramProps } from './pictogram.types.js';
+
+export function Pictogram({
+  copyrightYear = '',
+  xmlns = 'http://www.w3.org/2000/svg',
+  role = 'img',
+  focusable = false,
+  className,
+  viewBoxWidth,
+  viewBoxHeight,
+  children,
+  ...props
+}: PictogramProps) {
+  return (
+    <span className={styles({ className })}>
+      <svg
+        xmlns={xmlns}
+        role={role}
+        viewBox={`0 0 ${viewBoxWidth} ${viewBoxHeight}`}
+        focusable={focusable}
+        className="block"
+        {...props}
+      >
+        {copyrightYear && (
+          <metadata>{`Copyright © ${copyrightYear} by Westpac Banking Corporation. All rights reserved.`}</metadata>
+        )}
+        {children}
+      </svg>
+    </span>
+  );
+}

package/src/components/pictogram/pictogram.stories.tsx

@@ -0,0 +1,53 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+import { clsx } from 'clsx';
+
+import { Pictogram } from './pictogram.component.js';
+
+import * as AllPictograms from './index.js';
+import { PictogramProps, WBCBankCardPictogram } from './index.js';
+
+const AllPictogramsExample = (props: PictogramProps) => {
+  const { mode } = props;
+  const informativePictograms = Object.entries(AllPictograms).reduce(
+    (curr, [key, symbol]) => (!key.startsWith('WBC') ? { ...curr, [key]: symbol } : curr),
+    {} as { [index: string]: React.FC<PictogramProps> },
+  );
+  return (
+    <div className={clsx('grid grid-cols-5 gap-5 p-5', mode === 'light' && 'bg-hero text-white')}>
+      {Object.entries(informativePictograms).map(([key, Pictogram]) => (
+        <div key={key} className="flex flex-col items-center justify-end">
+          <Pictogram {...props} />
+          <p className="mt-2">{key}</p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const meta: Meta<typeof Pictogram> = {
+  title: 'Example/Pictogram',
+  component: AllPictogramsExample,
+  tags: ['autodocs'],
+  decorators: [(Story: StoryFn) => <Story />],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    mode: {
+      description: 'mode',
+      type: { name: 'enum', value: ['duo', 'dark', 'light'] },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {},
+};
+
+export const DecorativeStory = () => <WBCBankCardPictogram />;