@westpac/ui 0.43.0 → 0.46.0

package/src/components/pictogram/components/document-and-pen-pictogram.tsx

@@ -0,0 +1,48 @@
+'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 DocumentAndPenPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Document and pen',
+  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="15.655 19.999 47.317 19.999 47.317 16.999 15.655 16.999"
+        />
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="15.655 28.298 47.317 28.298 47.317 25.298 15.655 25.298"
+        />
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="15.655 36.594 35.682 36.594 35.682 33.594 15.655 33.594"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M41.556 57.24l-6.204-6.203 25.822-25.821 6.204 6.203L41.556 57.24zm-6.463 2.044l-1.891-1.892 1.177-3.793 4.573 4.573-3.86 1.112zm-22.005 9.149A3.593 3.593 0 0 1 9.5 64.845V9.579h43.972v19.726L33.185 49.592c-.24.242-.421.54-.525.867l-4.13 13.296 13.534-3.901c.323-.103.62-.284.862-.526l10.546-10.546v14.536c.153 3.136 1.183 4.42 2.98 5.115H13.088zm56.274-35.54c.813-.813.83-2.117.04-2.907l-6.872-6.873a2.012 2.012 0 0 0-1.49-.58 2.1 2.1 0 0 0-1.417.622l-3.651 3.65V7H7v57.767a6.095 6.095 0 0 0 6.088 6.088h42.884l4.146-.01a4.25 4.25 0 0 0 4.248-4.248V56.479h-8.394V46.283l13.39-13.39z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/dollar-sign-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 DollarSignPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Dollar sign',
+  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, outline: true })}
+          d="M38.2678,68.0367 C21.8538,68.0367 8.4998,54.6827 8.4998,38.2687 C8.4998,21.8547 21.8538,8.5017 38.2678,8.5017 C54.6808,8.5017 68.0348,21.8547 68.0348,38.2687 C68.0348,54.6827 54.6808,68.0367 38.2678,68.0367 M65.4368,20.8947 C59.6958,11.9467 49.6658,5.9997 38.2678,5.9997 C20.4758,5.9997 5.9998,20.4747 5.9998,38.2677 C5.9998,45.4007 8.3308,51.9977 12.2658,57.3457 C18.0058,66.2997 28.0388,72.2497 39.4418,72.2497 C57.2338,72.2497 71.7088,57.7747 71.7088,39.9827 C71.7088,32.8447 69.3748,26.2447 65.4368,20.8947"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M42.0295,46.857 C41.5525,47.419 40.9585,47.807 40.2555,48.035 L40.2555,40.927 C41.1095,41.242 41.7565,41.649 42.1725,42.159 C42.6755,42.776 42.9265,43.511 42.9265,44.364 C42.9265,45.319 42.6275,46.149 42.0295,46.857 M35.0775,33.068 C34.6705,32.489 34.4665,31.861 34.4665,31.187 C34.4665,30.448 34.6895,29.774 35.1345,29.162 C35.5315,28.618 36.0575,28.223 36.6975,27.961 L36.6975,34.357 C35.9905,34.016 35.4445,33.59 35.0775,33.068 M45.9445,38.607 C44.9065,37.372 43.0035,36.356 40.2555,35.551 L40.2555,28.248 C41.1555,28.828 41.7465,29.724 41.9905,30.977 L46.8225,30.346 C46.4915,28.437 45.7285,26.913 44.5315,25.773 C43.4495,24.743 42.0125,24.1 40.2555,23.803 L40.2555,21.81 L39.6995,21.81 L36.9305,21.81 L36.6975,21.81 L36.6975,23.741 C34.6205,23.993 32.9365,24.788 31.6685,26.155 C30.3505,27.574 29.6925,29.328 29.6925,31.416 C29.6925,33.479 30.2745,35.233 31.4395,36.677 C32.5665,38.077 34.3235,39.128 36.6975,39.841 L36.6975,47.784 C36.1025,47.45 35.5545,46.966 35.0585,46.313 C34.4985,45.574 34.1165,44.695 33.9125,43.677 L28.9275,44.211 C29.3105,46.72 30.1885,48.662 31.5635,50.037 C32.8875,51.361 34.6055,52.158 36.6975,52.455 L36.6975,55.976 L36.9305,55.976 L39.6995,55.976 L40.2555,55.976 L40.2555,52.305 C42.4705,51.889 44.2275,50.96 45.5145,49.502 C46.9085,47.923 47.6065,45.982 47.6065,43.677 C47.6065,41.614 47.0515,39.924 45.9445,38.607"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/drivers-licence-pictogram.tsx

@@ -0,0 +1,53 @@
+'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 DriversLicencePictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Drivers licence',
+  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 })}
+          fillRule="nonzero"
+          d="M56.0127 42.0302C60.3477151 42.0302 63.9114924 45.2895846 64.0419975 49.3118788L64.0457 49.5403538 64.0457 52.7932769C64.0457 53.4521863 63.5016274 53.9664784 62.842525 54.0247034L62.7177 54.0302 39.2907 54.0302C38.6228856 54.0302 38.1129849 53.5578876 38.051856 52.9224482L38.0457 52.7932769 38.0457 49.5403538C38.0457 45.4903111 41.5290396 42.1557768 45.833209 42.0336644L46.0777 42.0302 56.0127 42.0302zM51.0459 23.0302C46.6267576 23.0302 43.0459 26.6110576 43.0459 31.0302 43.0459 33.257235 43.9609904 35.3392322 45.5462212 36.8402718 47.0217111 38.2373988 48.9720703 39.0302 51.0459 39.0302 55.4640424 39.0302 59.0459 35.4483424 59.0459 31.0302 59.0459 26.6113927 55.4643775 23.0302 51.0459 23.0302z"
+        />
+        <polygon
+          className={fill({ mode, outline: true })}
+          points="12.58 26.777 35.022 26.777 35.022 23.777 12.58 23.777"
+        />
+        <polygon
+          className={fill({ mode, outline: true })}
+          points="12.58 34.169 35.022 34.169 35.022 31.169 12.58 31.169"
+        />
+        <polygon
+          className={fill({ mode, outline: true })}
+          points="12.58 41.561 35.022 41.561 35.022 38.561 12.58 38.561"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M68.9297,56.333 C68.9297,57.621 67.8817,58.668 66.5947,58.668 L8.8347,58.668 C7.5477,58.668 6.4997,57.621 6.4997,56.333 L6.4997,19.782 C6.4997,18.495 7.5477,17.447 8.8347,17.447 L66.5947,17.447 C67.8817,17.447 68.9297,18.495 68.9297,19.782 L68.9297,56.333 Z M73.2947,19.595 C71.5487,17.035 68.7837,15.513 68.7837,15.513 C68.7837,15.513 68.7767,15.533 68.7727,15.542 C68.1157,15.207 67.3817,15 66.5947,15 L8.8347,15 C6.1687,15 3.9997,17.169 3.9997,19.835 L3.9997,56.386 C3.9997,57.058 4.1387,57.697 4.3877,58.279 C4.4167,58.472 4.5287,58.73 4.7717,59.091 C6.5157,61.672 9.3067,63.207 9.3067,63.207 C9.3067,63.207 9.3127,63.192 9.3147,63.188 C10.0037,63.567 10.7837,63.802 11.6247,63.802 L69.3847,63.802 C72.0517,63.802 74.2207,61.633 74.2207,58.967 L74.2207,22.416 C74.2207,21.361 73.8707,20.391 73.2947,19.595 L73.2947,19.595 Z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/education-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 EducationPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Education',
+  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="M62.64 22.584c-5.59-.42-13.53-.284-20.12 2.649v-3c6.59-2.933 14.53-3.069 20.12-2.649v3zm0 8.883c-5.59-.421-13.53-.285-20.12 2.649v-3c6.59-2.934 14.53-3.07 20.12-2.65v3zm0 8.883c-5.59-.42-13.53-.285-20.12 2.648v-3c6.59-2.933 14.53-3.069 20.12-2.649v3zm0 8.881c-5.59-.42-13.53-.284-20.12 2.649v-3c6.59-2.933 14.53-3.069 20.12-2.649v3z"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M67.553 56.169c-4.723-.81-19.258-2.607-29.288 3.582V19.507c9.435-6.934 25.21-4.76 29.288-4.05V56.17zM35.765 59.75c-5.719-3.527-12.898-4.46-18.889-4.46a63.2 63.2 0 0 0-10.399.879V15.456c4.076-.712 19.851-2.885 29.288 4.05V59.75zM70.27 13.709c-.149-.186-.346-.4-1.186-.583-.84-.184-20.28-4.22-32.063 4.208C25.24 8.919 5.823 13.027 4.983 13.21L4 13.424v45.32l.013.002c.003.27.082.533.248.748l1.63 2.111c.293.38.781.559 1.251.457l.746-.163c.194-.043 19.468-4.12 30.305 3.886.274.205.683.31.925.31s.48 0 .711-.007c.233-.007.56-.123.8-.3 10.841-8.005 30.108-3.93 30.302-3.887l1.517.33V16.86c0-.287-.098-.564-.277-.787l-1.9-2.364z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/eftpos-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 EftposPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Eftpos',
+  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, outline: true })}
+          d="M55.4406,6.5005 C56.7616,6.5005 57.8356,7.5475 57.8356,8.8355 L57.8356,65.3235 C57.8356,66.6115 56.7616,67.6585 55.4406,67.6585 L55.3756,67.6585 L55.3756,6.5005 L55.4406,6.5005 Z M25.7214,62.97 C26.4114,62.97 26.9714,63.53 26.9714,64.22 C26.9714,64.91 26.4114,65.47 25.7214,65.47 L25.7214,65.47 L19.2764,65.47 C18.5864,65.47 18.0264,64.91 18.0264,64.22 C18.0264,63.53 18.5864,62.97 19.2764,62.97 L19.2764,62.97 Z M37.2761,62.97 C37.9661,62.97 38.5261,63.53 38.5261,64.22 C38.5261,64.91 37.9661,65.47 37.2761,65.47 L37.2761,65.47 L30.8311,65.47 C30.1411,65.47 29.5811,64.91 29.5811,64.22 C29.5811,63.53 30.1411,62.97 30.8311,62.97 L30.8311,62.97 Z M48.8312,62.97 C49.5212,62.97 50.0812,63.53 50.0812,64.22 C50.0812,64.91 49.5212,65.47 48.8312,65.47 L48.8312,65.47 L42.3862,65.47 C41.6962,65.47 41.1362,64.91 41.1362,64.22 C41.1362,63.53 41.6962,62.97 42.3862,62.97 L42.3862,62.97 Z M25.7214,58.3191 C26.4114,58.3191 26.9714,58.8791 26.9714,59.5691 C26.9714,60.2591 26.4114,60.8191 25.7214,60.8191 L25.7214,60.8191 L19.2764,60.8191 C18.5864,60.8191 18.0264,60.2591 18.0264,59.5691 C18.0264,58.8791 18.5864,58.3191 19.2764,58.3191 L19.2764,58.3191 Z M37.2761,58.3191 C37.9661,58.3191 38.5261,58.8791 38.5261,59.5691 C38.5261,60.2591 37.9661,60.8191 37.2761,60.8191 L37.2761,60.8191 L30.8311,60.8191 C30.1411,60.8191 29.5811,60.2591 29.5811,59.5691 C29.5811,58.8791 30.1411,58.3191 30.8311,58.3191 L30.8311,58.3191 Z M48.8312,58.3191 C49.5212,58.3191 50.0812,58.8791 50.0812,59.5691 C50.0812,60.2591 49.5212,60.8191 48.8312,60.8191 L48.8312,60.8191 L42.3862,60.8191 C41.6962,60.8191 41.1362,60.2591 41.1362,59.5691 C41.1362,58.8791 41.6962,58.3191 42.3862,58.3191 L42.3862,58.3191 Z M25.7214,53.6677 C26.4114,53.6677 26.9714,54.2277 26.9714,54.9177 C26.9714,55.6077 26.4114,56.1677 25.7214,56.1677 L25.7214,56.1677 L19.2764,56.1677 C18.5864,56.1677 18.0264,55.6077 18.0264,54.9177 C18.0264,54.2277 18.5864,53.6677 19.2764,53.6677 L19.2764,53.6677 Z M37.2761,53.6677 C37.9661,53.6677 38.5261,54.2277 38.5261,54.9177 C38.5261,55.6077 37.9661,56.1677 37.2761,56.1677 L37.2761,56.1677 L30.8311,56.1677 C30.1411,56.1677 29.5811,55.6077 29.5811,54.9177 C29.5811,54.2277 30.1411,53.6677 30.8311,53.6677 L30.8311,53.6677 Z M48.8312,53.6677 C49.5212,53.6677 50.0812,54.2277 50.0812,54.9177 C50.0812,55.6077 49.5212,56.1677 48.8312,56.1677 L48.8312,56.1677 L42.3862,56.1677 C41.6962,56.1677 41.1362,55.6077 41.1362,54.9177 C41.1362,54.2277 41.6962,53.6677 42.3862,53.6677 L42.3862,53.6677 Z M48.531,9.049 C49.386,9.049 50.081,9.76 50.081,10.635 L50.081,10.635 L50.081,49.652 C50.081,50.526 49.386,51.238 48.531,51.238 L48.531,51.238 L19.576,51.238 C18.721,51.238 18.027,50.526 18.027,49.652 L18.027,49.652 L18.027,10.635 C18.027,9.76 18.721,9.049 19.576,9.049 L19.576,9.049 Z M47.581,11.55 L20.526,11.55 L20.526,48.738 L47.581,48.738 L47.581,11.55 Z M17.9586,67.6585 C16.6386,67.6585 15.5636,66.6115 15.5636,65.3235 L15.5636,8.8355 C15.5636,7.5475 16.6386,6.5005 17.9586,6.5005 L52.8756,6.5005 L52.8756,67.6585 L17.9586,67.6585 Z M62.4836,9.3805 C62.4896,9.3775 62.5076,9.3705 62.5076,9.3705 C62.5076,9.3705 62.4086,9.1955 62.2186,8.9045 C62.2056,8.8855 62.1936,8.8665 62.1806,8.8475 C61.5916,7.9575 60.2306,6.1165 58.2866,4.8355 C57.9536,4.6165 57.6996,4.4965 57.5076,4.4535 C56.8766,4.1695 56.1806,4.0005 55.4406,4.0005 L17.9586,4.0005 C15.2246,4.0005 13.0006,6.1695 13.0006,8.8355 L13.0006,65.3235 C13.0006,66.0935 13.2016,66.8105 13.5306,67.4565 L13.5256,67.4585 C13.5256,67.4585 13.5606,67.5195 13.6216,67.6195 C13.7406,67.8325 13.8706,68.0365 14.0206,68.2285 C14.6736,69.1755 15.9526,70.7995 17.7126,71.9695 C18.5286,72.5455 19.5226,72.8945 20.6056,72.8945 L58.0876,72.8945 C60.8226,72.8945 63.0466,70.7255 63.0466,68.0595 L63.0466,11.5705 C63.0466,10.7785 62.8316,10.0405 62.4836,9.3805 L62.4836,9.3805 Z"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M28.3039,30.5846 C31.5419,27.2986 36.8479,27.2986 40.1109,30.5846 L41.8149,28.8806 C37.6029,24.6696 30.7869,24.6696 26.5999,28.8806 L28.3039,30.5846 Z"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M24.9449 27.1766C30.0569 22.0636 38.3579 22.0636 43.4699 27.1766L45.1739 25.5216C39.0879 19.4596 29.3259 19.4596 23.2649 25.5216L24.9449 27.1766zM31.7119 33.9196C33.0749 32.4826 35.3879 32.4826 36.7759 33.9196L38.4549 32.2156C36.0939 29.9026 32.3209 29.9026 30.0079 32.2156L31.7119 33.9196zM34.2199 35.0156C33.2699 35.0156 32.4669 35.7946 32.4669 36.7686 32.4669 37.6926 33.2699 38.4726 34.2199 38.4726 35.1689 38.4726 35.9479 37.6686 35.9479 36.7686 35.9479 35.7946 35.1689 35.0156 34.2199 35.0156L34.2199 35.0156z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/envelope-email-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 EnvelopeEmailPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Email envelope',
+  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="M33.0815,34.7388 C33.0815,35.7418 33.2845,36.4788 33.6915,36.9528 C34.0975,37.4268 34.6015,37.6638 35.2015,37.6638 C35.6505,37.6638 36.0735,37.5528 36.4685,37.3318 C36.7685,37.1748 37.0635,36.9258 37.3555,36.5868 C37.7745,36.1038 38.1355,35.4018 38.4395,34.4778 C38.7435,33.5538 38.8955,32.6938 38.8955,31.8968 C38.8955,31.0048 38.6885,30.3198 38.2735,29.8428 C37.8595,29.3648 37.3365,29.1258 36.7055,29.1258 C36.0255,29.1258 35.3985,29.3878 34.8225,29.9138 C34.2455,30.4378 33.8115,31.1858 33.5195,32.1578 C33.2275,33.1288 33.0815,33.9888 33.0815,34.7388 M45.8815,39.6058 L48.4045,39.6058 C47.6145,41.2088 46.4025,42.4638 44.7695,43.3718 C42.8975,44.4138 40.6165,44.9338 37.9245,44.9338 C35.3195,44.9338 33.0695,44.4938 31.1745,43.6138 C29.2805,42.7338 27.8715,41.4348 26.9475,39.7178 C26.0235,38.0018 25.5615,36.1328 25.5615,34.1108 C25.5615,31.8928 26.0865,29.8268 27.1375,27.9128 C28.1865,25.9978 29.6235,24.5608 31.4475,23.6018 C33.2705,22.6428 35.3545,22.1638 37.6995,22.1638 C39.6885,22.1638 41.4565,22.5508 43.0045,23.3238 C44.5515,24.0968 45.7335,25.1968 46.5515,26.6218 C47.3685,28.0468 47.7765,29.6028 47.7765,31.2928 C47.7765,33.3058 47.1565,35.1258 45.9175,36.7518 C44.3625,38.8038 42.3695,39.8308 39.9375,39.8308 C39.2825,39.8308 38.7895,39.7168 38.4575,39.4868 C38.1255,39.2588 37.9045,38.9228 37.7945,38.4808 C36.8625,39.3808 35.7895,39.8308 34.5735,39.8308 C33.2635,39.8308 32.1755,39.3788 31.3105,38.4748 C30.4465,37.5708 30.0145,36.3688 30.0145,34.8688 C30.0145,33.0138 30.5355,31.3208 31.5775,29.7888 C32.8405,27.9268 34.4585,26.9948 36.4325,26.9948 C37.8375,26.9948 38.8755,27.5318 39.5465,28.6048 L39.8425,27.2908 L42.9695,27.2908 L41.1815,35.7808 C41.0705,36.3178 41.0155,36.6648 41.0155,36.8228 C41.0155,37.0198 41.0605,37.1688 41.1515,37.2668 C41.2425,37.3658 41.3505,37.4148 41.4775,37.4148 C41.8555,37.4148 42.3455,37.1858 42.9455,36.7278 C43.7505,36.1288 44.4015,35.3228 44.8985,34.3118 C45.3965,33.3018 45.6445,32.2568 45.6445,31.1748 C45.6445,29.2328 44.9425,27.6078 43.5375,26.3008 C42.1325,24.9958 40.1705,24.3428 37.6525,24.3428 C35.5125,24.3428 33.6995,24.7778 32.2105,25.6508 C30.7235,26.5228 29.6025,27.7508 28.8485,29.3338 C28.0945,30.9158 27.7175,32.5638 27.7175,34.2768 C27.7175,35.9428 28.1375,37.4588 28.9785,38.8238 C29.8195,40.1898 30.9995,41.1858 32.5195,41.8138 C34.0385,42.4418 35.7775,42.7558 37.7345,42.7558 C39.6225,42.7558 41.2445,42.4928 42.6025,41.9678 C43.9595,41.4428 45.0535,40.6558 45.8815,39.6058"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M62.6138,64.3315 C62.6138,64.3555 62.6078,64.3795 62.6068,64.4035 L47.7048,50.9265 C48.1738,50.5125 48.6508,50.0905 49.1668,49.6305 C52.3278,46.8155 54.5078,44.8085 56.0128,43.3555 L62.6138,37.5055 L62.6138,64.3315 Z M60.8008,66.1435 L13.3128,66.1435 C13.2228,66.1435 13.1368,66.1305 13.0508,66.1175 L27.8488,52.7325 C30.9018,55.5585 32.6108,57.0035 33.5868,57.7265 C33.7808,57.8765 33.9768,58.0185 34.1828,58.1375 C34.4408,58.3005 34.6168,58.3845 34.7428,58.4255 C35.3648,58.6905 36.0148,58.8345 36.6688,58.8345 C37.1038,58.8345 37.5348,58.7545 37.9618,58.6365 C38.0278,58.6265 38.1108,58.6035 38.2128,58.5645 C38.8628,58.3475 39.4888,58.0045 40.0518,57.5045 L41.2278,56.4625 C42.3288,55.5775 43.8088,54.3345 45.8148,52.5865 L60.8038,66.1435 C60.8028,66.1435 60.8018,66.1435 60.8008,66.1435 L60.8008,66.1435 Z M11.4998,37.4025 L20.0068,45.2525 C21.1568,46.3875 22.5388,47.7255 24.2328,49.3365 C24.8658,49.9385 25.4558,50.4965 26.0148,51.0215 L11.4998,64.1505 L11.4998,37.4025 Z M12.0418,33.3795 L14.5938,30.8675 L14.5938,36.8555 L11.6028,34.0965 C11.6938,33.8285 11.8378,33.5795 12.0418,33.3795 L12.0418,33.3795 Z M17.0938,17.7425 C17.0938,17.4145 17.3598,17.1475 17.6888,17.1475 L56.2778,17.1475 C56.6068,17.1475 56.8728,17.4145 56.8728,17.7425 L56.8728,38.9015 C55.2708,40.9415 42.7668,52.1515 38.5748,55.3935 C37.9518,55.8755 37.1748,56.1065 36.3878,56.0565 C35.7138,56.0135 35.0738,55.7665 34.5498,55.3395 C30.7298,52.2285 18.5938,40.6235 17.0938,38.5645 L17.0938,17.7425 Z M35.7858,10.0155 C36.1358,9.6705 36.5958,9.4985 37.0568,9.4985 C37.5178,9.4985 37.9778,9.6705 38.3278,10.0155 L43.0368,14.6475 L31.0768,14.6475 L35.7858,10.0155 Z M59.3728,30.7235 L62.0728,33.3805 C62.3078,33.6105 62.4678,33.9055 62.5498,34.2225 L59.3728,37.0375 L59.3728,30.7235 Z M66.6638,34.4235 L63.9848,31.7875 C63.9288,31.7265 63.8858,31.6545 63.8258,31.5965 L59.3728,27.2135 L59.3728,17.7425 C59.3728,16.0365 57.9848,14.6475 56.2778,14.6475 L46.6028,14.6475 L40.0818,8.2315 C38.4138,6.5905 35.6998,6.5885 34.0318,8.2315 L27.5108,14.6475 L17.6888,14.6475 C15.9818,14.6475 14.5938,16.0365 14.5938,17.7425 L14.5938,27.3585 L10.2878,31.5955 C9.4698,32.4005 8.9998,33.5205 8.9998,34.6695 L8.9998,64.3295 C8.9998,65.0945 9.2168,65.8035 9.5678,66.4275 L9.5068,66.3845 C9.5068,66.3845 11.1808,69.6435 14.4598,71.1775 C14.4598,71.1775 14.4428,71.1455 14.4188,71.1015 C14.9488,71.3355 15.5328,71.4705 16.1498,71.4705 L63.6378,71.4705 C66.0168,71.4705 67.9508,69.5355 67.9508,67.1565 L67.9508,37.4965 C67.9508,36.3485 67.4818,35.2275 66.6638,34.4235 L66.6638,34.4235 Z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/envelope-printed-pictogram.tsx

@@ -0,0 +1,48 @@
+'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 EnvelopePrintedPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Printed envelope',
+  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="22.646 37.949 54.308 37.949 54.308 34.949 22.646 34.949"
+        />
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="22.646 31.473 54.308 31.473 54.308 28.473 22.646 28.473"
+        />
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="22.646 24.497 43.822 24.497 43.822 21.497 22.646 21.497"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M63.614 64.331c0 .024-.006.048-.007.072L48.705 50.926c.47-.414.946-.836 1.462-1.296 3.16-2.815 5.34-4.822 6.847-6.275l6.6-5.85v26.826zM61.8 66.143H14.313c-.09 0-.176-.013-.262-.026l14.798-13.385c3.053 2.826 4.762 4.271 5.738 4.994.194.15.39.292.596.411.258.163.434.247.56.288a4.884 4.884 0 0 0 1.926.41c.435 0 .866-.08 1.293-.199a1.15 1.15 0 0 0 .25-.072 5.255 5.255 0 0 0 1.84-1.06l1.176-1.042c1.1-.885 2.58-2.128 4.587-3.876l14.989 13.557H61.8zm-49.3-28.74l8.507 7.85a392.194 392.194 0 0 0 6.008 5.769L12.5 64.15V37.402zm.542-4.024l2.552-2.512v5.988l-2.99-2.759c.09-.268.234-.517.438-.717zm5.052-15.637c0-.328.267-.595.595-.595h38.589c.329 0 .595.267.595.595v21.16c-1.602 2.04-14.106 13.25-18.298 16.491-.623.483-1.4.713-2.187.663a3.224 3.224 0 0 1-1.838-.717c-3.82-3.11-15.956-14.716-17.456-16.775V17.742zm18.692-7.727c.35-.345.81-.517 1.27-.517.462 0 .922.172 1.272.517l4.709 4.632h-11.96l4.709-4.632zm23.587 20.708l2.7 2.657c.235.23.395.525.477.842l-3.177 2.815v-6.314zm0-3.509v-9.472a3.099 3.099 0 0 0-3.095-3.095h-9.675l-6.521-6.416c-1.668-1.64-4.382-1.643-6.05 0l-6.521 6.416h-9.822a3.099 3.099 0 0 0-3.095 3.095v9.616l-4.306 4.237A4.34 4.34 0 0 0 10 34.67v29.66c0 .766.218 1.474.568 2.098l-.061-.043s1.674 3.26 4.953 4.793c.559.257 1.073.294 1.69.294h47.488a4.318 4.318 0 0 0 4.313-4.315v-29.66a4.336 4.336 0 0 0-1.287-3.073l-7.291-7.209z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/face-happy-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 FaceHappyPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Face looking happy',
+  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.476 32.266-32.267a32.095 32.095 0 0 0-6.272-19.088"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M29.224 31.67a3.08 3.08 0 1 1-6.16 0 3.08 3.08 0 0 1 6.16 0m23.998 0a3.08 3.08 0 1 1-6.162 0 3.08 3.08 0 0 1 6.162 0"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M52.161 46l2.514 1.637c-.219.337-5.483 8.257-16.329 8.322C27.482 55.894 22.22 47.974 22 47.637l2.515-1.633c.184.277 4.647 6.899 13.831 6.955 9.167-.056 13.63-6.678 13.815-6.959"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/face-unhappy-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 FaceUnhappyPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Face looking unhappy',
+  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.476 32.266-32.267a32.095 32.095 0 0 0-6.272-19.088"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M24.514 53.959L22 52.322c.22-.337 5.483-8.257 16.33-8.322 10.863.065 16.126 7.985 16.345 8.322l-2.515 1.633c-.184-.277-4.647-6.899-13.83-6.955-9.168.056-13.63 6.678-13.816 6.959"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M29.224 31.67a3.08 3.08 0 1 1-6.16 0 3.08 3.08 0 0 1 6.16 0m23.998 0a3.08 3.08 0 1 1-6.162 0 3.08 3.08 0 0 1 6.162 0"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/face-unsure-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 FaceUnsurePictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Face looking unsure',
+  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.476 32.266-32.267a32.095 32.095 0 0 0-6.272-19.088"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M51.828 54.565c-.034-.028-4.015-3.326-12.934-4.919-8.92-1.55-13.786.19-13.835.207l-1.06-2.808c.225-.084 5.594-2.059 15.416-.353 9.82 1.753 14.19 5.445 14.372 5.602l-1.96 2.271z"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M29.224 31.67a3.08 3.08 0 1 1-6.16 0 3.08 3.08 0 0 1 6.16 0m23.998 0a3.08 3.08 0 1 1-6.162 0 3.08 3.08 0 0 1 6.162 0"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/finger-motion-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 FingerMotionPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Hand with finger raised',
+  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="M53.049 70.83c-1.828 0-3.313-1.494-3.313-3.337 0-1.844 1.485-3.337 3.313-3.337 1.83 0 3.313 1.493 3.313 3.337 0 1.843-1.483 3.337-3.313 3.337zM26.17 73.736h33.337V61.343H26.171v12.393z"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M56.328 39.204c0 3.081-.955 9.63-2.865 19.65H27.396L12.2 39.68l-.087-.099a2.135 2.135 0 0 1-.613-1.5 2.988 2.988 0 0 1 2.984-2.985h2.364c.292 0 .567.117.772.326l10.422 10.734V5.675c0-.096.08-.175.176-.175h2.84a3.016 3.016 0 0 1 3.011 3.014v20.35h14.868c4.076 0 7.391 3.316 7.391 7.392v2.948zM40.45 26.364V8.514A5.52 5.52 0 0 0 34.936 3h-6.718a2.678 2.678 0 0 0-2.676 2.675v34.318l-6.13-6.314a3.605 3.605 0 0 0-2.564-1.082h-2.364A5.49 5.49 0 0 0 9 38.082c0 1.198.453 2.331 1.28 3.2l15.907 20.071h33.317c2.127-11.308 3.191-18.601 3.191-21.878 0-1.51.004-2.583.013-3.219 0-5.454-4.437-9.892-9.89-9.892h-12.37z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/fingerprint-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 FingerprintPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Fingerprint',
+  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="M42.532 54.407c-2.51-.695-4.169-1.632-5.902-3.334a11.608 11.608 0 0 1-3.452-8.304c0-2.658 2.26-4.817 5.036-4.817 2.775 0 5.035 2.16 5.035 4.817 0 1.537 1.344 2.791 3.01 2.791 1.665 0 3.007-1.254 3.007-2.79 0-5.745-4.958-10.415-11.068-10.415-4.344 0-8.312 2.417-10.095 6.151-.592 1.23-.896 2.675-.896 4.263 0 1.792.26 3.494 1.028 5.544a.991.991 0 0 1-.586 1.3 1.007 1.007 0 0 1-1.3-.588c-.775-2.069-1.154-4.124-1.154-6.256 0-1.9.365-3.635 1.083-5.152 2.114-4.434 6.798-7.304 11.92-7.304 7.221 0 13.096 5.575 13.096 12.441 0 2.66-2.26 4.817-5.036 4.817s-5.036-2.158-5.036-4.817c0-1.536-1.343-2.79-3.008-2.79-1.666 0-3.009 1.254-3.009 2.79 0 2.608 1.007 5.042 2.846 6.865 1.46 1.444 2.846 2.23 4.992 2.824.542.14.857.701.716 1.227a.995.995 0 0 1-.962.776c-.078 0-.164-.014-.265-.039m-1.565-4.6c-2.388-1.618-3.814-4.248-3.814-7.038 0-.565.447-1.013 1.014-1.013.565 0 1.012.448 1.012 1.013 0 2.125 1.088 4.124 2.922 5.357 1.064.72 2.311 1.066 3.83 1.066.413 0 1.026-.055 1.58-.15a1.01 1.01 0 0 1 1.175.825 1.01 1.01 0 0 1-.825 1.177c-.718.138-1.41.191-1.93.191-1.905 0-3.586-.482-4.964-1.428m-6.214 4.312a.957.957 0 0 1-.712-.302c-1.495-1.496-2.187-2.389-3.172-4.167-1.093-1.949-1.667-4.325-1.667-6.88 0-4.763 4.068-8.637 9.06-8.637 4.988 0 9.056 3.874 9.056 8.636 0 .566-.448 1.014-1.014 1.014a1.006 1.006 0 0 1-1.013-1.014c0-3.64-3.15-6.61-7.03-6.61-3.88 0-7.032 2.97-7.032 6.61 0 2.21.49 4.242 1.42 5.89.884 1.588 1.451 2.308 2.85 3.725a1.035 1.035 0 0 1-.013 1.44c-.21.192-.468.295-.733.295m-10.33-19a1.01 1.01 0 0 1-.245-1.418c1.567-2.215 3.56-3.954 5.93-5.17 4.97-2.564 11.317-2.573 16.288-.017a16.419 16.419 0 0 1 5.928 5.138 1.013 1.013 0 0 1-.242 1.421 1.01 1.01 0 0 1-1.415-.243c-1.383-1.937-3.133-3.454-5.2-4.512-4.414-2.259-10.055-2.255-14.443.016a14.552 14.552 0 0 0-5.205 4.523c-.163.286-.47.445-.81.445-.206 0-.406-.062-.586-.183m22.895-8.002a.95.95 0 0 1-.466-.12c-2.96-1.526-5.51-2.172-8.577-2.172-3.06 0-5.95.73-8.572 2.17a1.03 1.03 0 0 1-1.377-.406 1.023 1.023 0 0 1 .406-1.377 19.818 19.818 0 0 1 9.543-2.413c3.357 0 6.293.74 9.51 2.396a.995.995 0 0 1 .428 1.356.997.997 0 0 1-.895.566"
+        />
+        <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"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/football-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 FootballPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Football',
+  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="30.763 51.597 23.688 44.522 25.809 42.401 32.884 49.476"
+        />
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="35.442 46.919 28.367 39.844 30.488 37.723 37.563 44.798"
+        />
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="40.121 42.24 33.046 35.165 35.167 33.044 42.242 40.119"
+        />
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="44.8 37.562 37.724 30.487 39.846 28.366 46.92 35.441"
+        />
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="49.478 32.883 42.403 25.808 44.524 23.687 51.599 30.762"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M65.841 30.134c-1.896 7.66-6.68 15.618-13.469 22.408-6.79 6.79-14.748 11.573-22.407 13.469-6.87 1.7-12.704.87-16.604-2.318l11.846-11.846-1.768-1.768-11.845 11.846c-3.18-3.901-4.007-9.729-2.309-16.593 1.896-7.66 6.68-15.617 13.47-22.408C31.974 13.704 42.989 8.57 51.736 8.57c3.695 0 6.977.931 9.555 2.844L49.585 23.121l1.767 1.767 11.795-11.794c3.496 3.895 4.459 9.908 2.694 17.04M59.462 7.393c-4.089-1.675-9.163-1.855-14.82-.455-8.095 2.003-16.468 7.02-23.574 14.128-7.108 7.107-12.125 15.48-14.129 23.575-2.059 8.319-.707 15.386 3.807 19.899.222.222.464.419.699.626.012.013 4.272 3.749 8.358 5.234 2.135.776 4.504 1.153 7.029 1.153 9.478-.001 21.145-5.335 30.821-15.011 7.108-7.107 12.126-15.48 14.128-23.575 2.053-8.296.713-15.346-3.77-19.861-3.146-3.169-5.246-4.36-8.549-5.713z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/fork-knife-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 ForkKnifePictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Fork and knife',
+  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="M25.198 32.736l2.288 39.084c.026.362-.227.467-.56.476l-6.647.122c-.311.009-.576-.141-.563-.457l2.45-39.081c.038-.99-.603-1.894-1.673-2.362-1.852-.856-2.807-1.663-3.682-2.727-.836-1.016-1.299-2.617-1.308-3.197a23.195 23.195 0 0 1-.005-.427L15.5 6.809c.002-.101.037-.21.072-.308.322-.731 1.096-1.001 1.74-1.001.974 0 1.798.599 1.798 1.309v17.358a1.25 1.25 0 1 0 2.5 0V6.809c0-.71.823-1.31 1.797-1.31.975 0 1.798.6 1.798 1.31v17.358a1.25 1.25 0 1 0 2.5 0V6.809c0-.71.824-1.31 1.798-1.31.975 0 1.798.6 1.798 1.298l-.163 17.339h.005c-.262 3.486-2.887 5.38-4.51 6.225-.967.504-1.517 1.415-1.435 2.375zM35.71 6.809c0-1.664-1.541-3.804-3.858-3.808H29.51L29.503 3h-.023c-1.181.008-2.251.437-3.025 1.128C25.675 3.432 24.598 3 23.407 3c-1.19 0-2.268.432-3.047 1.128C19.58 3.432 18.502 3 17.312 3c-2.37 0-4.298 1.709-4.298 3.809v17.03c-.042.49-.347 5.983 6.477 8.969a.818.818 0 0 1 .172.099L17.195 72.28c-.023.629.22 1.237.687 1.712.579.59 1.44.926 2.372.926l8.774.002c.964-.019 1.845-.515 2.417-1.15.449-.496.667-1.117.614-1.747l-2.306-39.388a.586.586 0 0 1 .089-.056c1.829-.953 6.06-3.772 5.869-9.373L35.71 6.809zm15.18 65.18l2.283-34.35c.079-1.206-.944-2.222-2.327-2.312-2.251-.147-3.936-.79-4.745-1.81-.598-.753-.784-1.757-.567-3.068l2.874-17.39.031-.163c.307-1.888 1.779-6.386 8.782-7.39a.638.638 0 0 1 .175 0l1.284 66.43c.002.285-.17.372-.373.375l-6.997.102c-.335.004-.436-.23-.42-.424zM61.67 5.157c-.012-.58-.276-1.118-.747-1.518-.448-.382-2.27-.862-4.063-.607-8.884 1.273-10.585 7.564-10.889 9.451l-2.908 17.56c-.334 2.018.028 3.71 1.075 5.03 1.599 2.015 4.419 2.607 6.512 2.747l-2.31 34.782a1.998 1.998 0 0 0 .588 1.537c.486.5 1.196.78 1.936.78h9.691c1.377-.054 2.439-1.142 2.419-2.33L61.671 5.157z"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M27.485 71.82c.026.362-.227.467-.559.476l-6.648.122c-.31.009-.576-.141-.563-.457L20.402 61h6.45l.633 10.82zm31.197.117c.002.284-.17.371-.373.374l-6.997.102c-.298.004-.41-.18-.421-.358L51.622 61h6.849l.211 10.936z"
+        />
+      </g>
+    </Pictogram>
+  );
+}