@westpac/ui 0.2.0 → 0.3.0

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>
+  );
+}

package/src/components/pictogram/components/informative/cash-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 CashPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Cash',
+  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="M6.499,54.2822 L67.93,54.2822 L67.93,20.5002 L6.499,20.5002 L6.499,54.2822 Z M73.393,22.8152 L73.395,22.7992 C73.395,21.5962 70.33,17.9992 68.25,17.9992 L6.18,17.9992 C4.978,17.9992 4,18.9782 4,20.1802 L4,54.7432 C4,55.7992 6.448,59.3202 8.626,59.7402 C8.76,59.7672 8.898,59.7822 9.04,59.7822 L71.39,59.7822 C72.515,59.7822 73.43,58.8672 73.43,57.7432 L73.43,23.1802 C73.43,23.0552 73.414,22.9342 73.393,22.8152 L73.393,22.8152 Z"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M11.1311 43.4352C15.7171 43.4352 16.6801 46.5332 16.6801 49.1312 16.6801 49.8222 17.2401 50.3812 17.9301 50.3812L31.0671 50.3812C30.1851 49.6822 29.3801 48.8442 28.6701 47.8812L19.1141 47.8812C18.6861 43.9762 16.2181 41.4532 12.3891 41.0062L12.4401 33.8302C16.2771 33.3882 18.7521 30.8642 19.1801 26.9532L28.6341 26.9532C29.3361 25.9932 30.1311 25.1542 31.0031 24.4532L17.9971 24.4532C17.3061 24.4532 16.7471 25.0122 16.7471 25.7032 16.7471 28.3012 15.7841 31.3992 11.1981 31.3992 10.5111 31.3992 9.9531 31.9542 9.9481 32.6402L9.88107726 42.1762C9.8791 42.5092 10.0091 42.8302 10.2441 43.0662 10.4791 43.3022 10.7981 43.4352 11.1311 43.4352M55.1902 47.8814L45.8452 47.8814C45.1362 48.8444 44.3312 49.6824 43.4482 50.3814L56.3742 50.3814C57.0642 50.3814 57.6242 49.8214 57.6242 49.1314 57.6242 46.5324 58.5862 43.4354 63.1732 43.4354 63.8602 43.4354 64.4182 42.8804 64.4232 42.1944L64.4892504 32.6574C64.4922 32.3244 64.3612 32.0044 64.1262 31.7684 63.8922 31.5314 63.5722 31.3994 63.2392 31.3994 58.6532 31.3994 57.6902 28.3014 57.6902 25.7024 57.6902 25.0124 57.1312 24.4524 56.4402 24.4524L43.5122 24.4524C44.3852 25.1534 45.1802 25.9924 45.8812 26.9524L55.2572 26.9524C55.6852 30.8584 58.1532 33.3814 61.9812 33.8274L61.9312 41.0044C58.0932 41.4454 55.6182 43.9704 55.1902 47.8814"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M39.9719,43.2525 C39.6229,43.6645 39.1869,43.9485 38.6719,44.1155 L38.6719,38.9075 C39.2979,39.1385 39.7719,39.4365 40.0759,39.8105 C40.4449,40.2625 40.6299,40.8015 40.6299,41.4265 C40.6299,42.1255 40.4099,42.7335 39.9719,43.2525 M34.8779,33.1485 C34.5789,32.7255 34.4299,32.2655 34.4299,31.7705 C34.4299,31.2295 34.5939,30.7345 34.9199,30.2865 C35.2109,29.8885 35.5969,29.5985 36.0649,29.4065 L36.0649,34.0935 C35.5469,33.8435 35.1469,33.5305 34.8779,33.1485 M42.8409,37.2075 C42.0799,36.3025 40.6849,35.5575 38.6719,34.9685 L38.6719,29.6165 C39.3309,30.0415 39.7649,30.6985 39.9439,31.6165 L43.4839,31.1545 C43.2419,29.7555 42.6819,28.6385 41.8049,27.8035 C41.0129,27.0495 39.9599,26.5775 38.6719,26.3595 L38.6719,24.8985 L38.2649,24.8985 L36.2359,24.8985 L36.0649,24.8985 L36.0649,26.3155 C34.5429,26.4995 33.3089,27.0815 32.3799,28.0835 C31.4139,29.1235 30.9319,30.4085 30.9319,31.9385 C30.9319,33.4495 31.3579,34.7345 32.2119,35.7935 C33.0379,36.8185 34.3259,37.5895 36.0649,38.1115 L36.0649,43.9325 C35.6289,43.6875 35.2269,43.3325 34.8639,42.8545 C34.4539,42.3125 34.1739,41.6685 34.0249,40.9225 L30.3719,41.3145 C30.6519,43.1515 31.2959,44.5745 32.3039,45.5825 C33.2739,46.5525 34.5329,47.1375 36.0649,47.3555 L36.0649,49.9345 L36.2359,49.9345 L38.2649,49.9345 L38.6719,49.9345 L38.6719,47.2445 C40.2949,46.9405 41.5819,46.2585 42.5259,45.1905 C43.5469,44.0335 44.0579,42.6105 44.0579,40.9225 C44.0579,39.4105 43.6519,38.1725 42.8409,37.2075"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/celebration-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 CelebrationPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Celebration',
+  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="M56.225 51.218c-3.632.954-7.892-3.109-9.485-9.057-1.254-4.678-1.995-9.267-2.44-12.798h12.617c1.398 3.658 2.448 6.784 3.128 9.322.996 3.716.709 7.452-.769 9.996-.778 1.34-1.833 2.217-3.05 2.537M43.75 24.061l9.968-2.599a252.847 252.847 0 0 1 2.224 5.401h-11.93a137.717 137.717 0 0 1-.262-2.802m23.286 44.8c-1.78.474-2.912.141-3.438-.104l-4.235-15.81c1.797-.525 3.317-1.775 4.4-3.639 1.806-3.106 2.187-7.555 1.023-11.9-1.172-4.372-3.375-10.362-6.548-17.804-.16-.374-.264-.616-.294-.698l-.403-1.049L41.028 22.2l.148 1.097c.012.092.03.318.058.66.218 2.62.878 10.588 3.091 18.845 1.76 6.564 6.294 11.05 10.822 11.05.439 0 .878-.058 1.315-.145l4.24 15.826c-.332.476-1.143 1.331-2.922 1.808a1.5 1.5 0 1 0 .773 2.9l9.26-2.482a1.5 1.5 0 0 0-.776-2.898zM30.892 26.863h-12.15a128.5 128.5 0 0 1 2.643-6.028l9.93 2.734a276.65 276.65 0 0 1-.424 3.294zm-2.709 14.784c-.994 3.716-3.111 6.808-5.663 8.273-1.343.77-2.697 1.003-3.91.67-3.627-.992-5.28-6.638-3.688-12.584.737-2.75 1.686-5.64 2.83-8.643h12.79c-.739 5.063-1.527 9.186-2.359 12.284zm-8.226-23.78l-.422 1.02c-.035.086-.13.285-.271.586-3.01 6.373-5.282 12.39-6.756 17.886-1.928 7.2.295 13.889 5.059 15.508l-4.242 15.829c-.522.244-1.65.579-3.425.107l-.011-.003a1.499 1.499 0 1 0-.776 2.897h.004l9.243 2.479a1.49 1.49 0 0 0 .401.054 1.5 1.5 0 0 0 .387-2.95l-.01-.002c-1.772-.477-2.583-1.33-2.916-1.804l4.237-15.812a6.72 6.72 0 0 0 1.599.2c1.334 0 2.701-.387 4.032-1.15 3.116-1.788 5.672-5.45 6.836-9.794 1.17-4.368 2.258-10.655 3.231-18.688.049-.406.08-.668.094-.755l.177-1.11-16.47-4.498z"
+        />
+        <polygon className={fill({ mode, highlight: true })} points="37.212 16.031 39.712 16.031 39.712 4 37.212 4" />
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="24.068 7.803 31.461 17.295 33.433 15.76 26.041 6.267"
+        />
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="52.857 7.803 45.464 17.295 43.492 15.76 50.884 6.267"
+        />
+      </g>
+    </Pictogram>
+  );
+}

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

@@ -0,0 +1,50 @@
+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 ChatPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Chat',
+  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="12.15 19.031 43.364 19.031 43.364 16.031 12.15 16.031"
+        />
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="12.15 26.01 43.364 26.01 43.364 23.01 12.15 23.01"
+        />
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="12.15 32.988 33.026 32.988 33.026 29.988 12.15 29.988"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M71.2813,26.4472 L58.5753,26.4472 C57.9583,26.4472 57.4573,26.9472 57.4573,27.5652 L57.4573,44.6662 C57.4573,45.2842 56.9563,45.7842 56.3393,45.7842 L29.5513,45.7842 C28.9323,45.7842 28.4323,46.2852 28.4323,46.9032 L28.4323,48.1482 L28.4323,56.2362 C28.4323,56.7452 28.8443,57.1582 29.3543,57.1582 L50.2663,57.1522 C50.4463,57.1462 62.1863,56.7722 67.2733,61.6132 C69.0553,63.3102 70.0203,65.4182 70.2083,68.0372 C70.2433,68.5332 70.6353,68.9262 71.1343,68.9242076 L71.1823,68.9242076 C71.6903,68.9212 72.0993,68.5092 72.0993,68.0022 L72.0993,27.2652 C72.0993,26.8132 71.7333,26.4472 71.2813,26.4472"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M10.2139,44.5097 C8.9459,45.7167 8.0469,47.0977 7.4999,48.6857 L7.4999,11.4997 L48.6669,11.4997 L48.6669,39.7107 L28.1239,39.7047 C27.6169,39.6837 15.6279,39.3587 10.2139,44.5097 L10.2139,44.5097 Z M48.9949,42.2107 C48.9979,42.2107 49.0009,42.2097 49.0049,42.2097 L51.9949,42.2107 C53.1929,42.2107 54.1669,41.2367 54.1669,40.0387 L54.1669,11.0687 C54.1669,9.9277 53.2389,8.9997 52.0989,8.9997 L49.0989,8.9997 L10.0679,8.9997 L7.0679,8.9997 C5.9279,8.9997 4.9999,9.9277 4.9999,11.0677 L4.9999,51.8047 C4.9999,52.9757 5.9389,53.9327 7.1489,53.9707 L7.1489,53.9737 L7.1849,53.9737 C7.1929,53.9737 7.1999,53.9767 7.2079,53.9767 L7.2209,53.9767 C7.2299,53.9767 7.2369,53.9737 7.2449,53.9737 L10.1849,53.9737 C10.1929,53.9737 10.1999,53.9767 10.2079,53.9767 L10.2209,53.9767 C10.2299,53.9767 10.2369,53.9737 10.2449,53.9737 L10.2959,53.9737 L10.2959,53.9687 C11.3979,53.9297 12.3089,53.0527 12.3889,51.9287 C12.5529,49.6317 13.3869,47.7977 14.9379,46.3207 C18.6519,42.7857 26.5889,42.2667 29.7459,42.2047 L48.9949,42.2107 Z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/clock-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 ClockPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Clock',
+  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="M38.268,68.0371 C21.854,68.0371 8.5,54.6831 8.5,38.2681 C8.5,21.8551 21.854,8.5021 38.268,8.5021 C54.681,8.5021 68.035,21.8551 68.035,38.2681 C68.035,54.6831 54.681,68.0371 38.268,68.0371 M65.437,20.8941 C59.696,11.9471 49.666,6.0001 38.268,6.0001 C20.476,6.0001 6,20.4741 6,38.2671 C6,45.4011 8.331,51.9981 12.266,57.3461 C18.006,66.3001 28.039,72.2501 39.442,72.2501 C57.234,72.2501 71.709,57.7751 71.709,39.9831 C71.709,32.8451 69.375,26.2451 65.437,20.8941"
+        />
+        <polygon
+          className={fill({ mode, outline: true })}
+          points="39.857 18.905 36.857 18.905 36.857 38.847 38.357 38.847 37.272 39.884 53.44 56.814 55.61 54.742 39.857 38.246"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M38.3569,34.3574 C35.8769,34.3574 33.8659,36.3674 33.8659,38.8474 C33.8659,41.3284 35.8769,43.3374 38.3569,43.3374 C40.8369,43.3374 42.8479,41.3284 42.8479,38.8474 C42.8479,36.3674 40.8369,34.3574 38.3569,34.3574"
+        />
+      </g>
+    </Pictogram>
+  );
+}