@westpac/ui 0.2.0 → 0.3.0

package/src/components/pictogram/components/informative/light-bulb-pictogram.tsx

@@ -0,0 +1,59 @@
+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 LightBulbPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Light bulb',
+  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="37.313 11.15 39.813 11.15 39.813 2.001 37.313 2.001"
+        />
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="61.976 33.873 71.126 33.873 71.126 31.373 61.976 31.373"
+        />
+        <polygon className={fill({ mode, highlight: true })} points="6 33.873 15.15 33.873 15.15 31.373 6 31.373" />
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="57.47 48.209 63.94 54.679 65.707 52.911 59.238 46.441"
+        />
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="14.654 12.421 21.124 18.892 22.891 17.125 16.422 10.653"
+        />
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="13.218 52.911 14.986 54.679 21.455 48.209 19.688 46.441"
+        />
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="60.705 10.654 54.235 17.124 56.003 18.892 62.473 12.422"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M48.475 42.983c-2.846 4.27-3.34 8.91-3.348 11.592h-14.7c-.008-2.681-.503-7.322-3.349-11.592-3.752-5.627-3.828-10.366-3.828-10.41 0-8.027 6.51-14.564 14.527-14.61 8.017.046 14.526 6.582 14.526 14.606 0 .047-.075 4.786-3.828 10.414zm-10.509 28.5c-1.643 0-3.054-1.249-3.712-3.035h7.424c-.657 1.787-2.068 3.035-3.712 3.035zm-7.65-11.558v-1.151c0-.64.008-1.191.022-1.7h14.876c.02.628.024 1.221.025 1.714v1.138H30.316zm14.924 2.5l.001 2.547H30.316v-2.546H45.24zm-.619-45.489a16.981 16.981 0 0 0-6.993-1.472c-9.328.125-16.878 7.752-16.878 17.11 0 .221.048 5.498 4.247 11.797 2.976 4.463 3.018 9.442 2.9 11.375-.057.878-.08 1.813-.08 3.029v7.447c0 .69.558 1.25 1.25 1.25h2.388c.135.943.408 1.83.804 2.628 1.52 3.89 6.125 5.893 9.048 5.893 3.248 0 5.935-2.864 6.354-6.56l2.171.07c.282 0 .55-.11.747-.31a1.05 1.05 0 0 0 .31-.746l-.005-7.436c0-1.189-.025-2.15-.079-3.027-.12-1.953-.077-6.986 2.93-11.495 4.166-6.252 4.215-11.47 4.215-11.69 0-7.331-6.175-14.953-13.329-17.863z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/loop-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 LoopPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Loop',
+  copyrightYear = '2021',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('h-13 w-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, outline: true })}
+          d="M38.268 68.037C21.854 68.037 8.5 54.683 8.5 38.269S21.854 8.502 38.268 8.502c16.413 0 29.767 13.353 29.767 29.767S54.681 68.037 38.268 68.037m27.169-47.142C59.696 11.947 49.666 6 38.268 6 20.476 6 6 20.475 6 38.268c0 7.133 2.331 13.73 6.266 19.078C18.006 66.3 28.039 72.25 39.442 72.25c17.792 0 32.267-14.475 32.267-32.267a32.095 32.095 0 0 0-6.272-19.088"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          fillRule="nonzero"
+          d="M39 19c10.217 0 18.5 8.283 18.5 18.5 0 2.564-.523 5.057-1.522 7.358l-.44.988 6.743-2.724 1.136 2.813-10.071 4.068a1.591 1.591 0 0 1-2.01-.748l-.06-.132-4.068-10.069 2.813-1.136 2.724 6.744c.104-.19.208-.394.312-.612A15.497 15.497 0 0 0 54.5 37.5C54.5 28.94 47.56 22 39 22c-1.656 0-3.272.26-4.801.757l-1.176-2.77A18.496 18.496 0 0 1 39 19zm-12.919 8.364l.06.131 4.068 10.07-2.812 1.136-2.724-6.744c-.104.19-.209.393-.312.612a15.497 15.497 0 0 0-1.444 6.55c0 8.56 6.94 15.5 15.5 15.5a15.5 15.5 0 0 0 4.962-.81l1.175 2.767a18.49 18.49 0 0 1-6.137 1.043c-10.217 0-18.5-8.283-18.5-18.5 0-2.564.523-5.057 1.522-7.359l.44-.987-6.743 2.724L14 30.684l10.072-4.068a1.592 1.592 0 0 1 1.938.624l.071.124z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

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

@@ -0,0 +1,46 @@
+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 MedicareCardPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Medicare card',
+  copyrightYear = '2023',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('h-13 w-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M59.9678,30.8779 L35.4078,30.8779 L37.7828,24.3259 C38.0988,23.4569 38.9238,22.8779 39.8498,22.8779 L64.4068,22.8779 L62.0318,29.4309 C61.7178,30.2989 60.8928,30.8779 59.9678,30.8779"
+        />
+        <polygon
+          className={fill({ mode, outline: true })}
+          points="17.385 44.555 50.385 44.555 50.385 41.555 17.385 41.555"
+        />
+        <polygon
+          className={fill({ mode, outline: true })}
+          points="10.385 51.544 46.385 51.544 46.385 48.544 10.385 48.544"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M68.9307,56.3857 C68.9307,57.6737 67.8827,58.7207 66.5957,58.7207 L8.8347,58.7207 C7.5477,58.7207 6.4997,57.6737 6.4997,56.3857 L6.4997,19.8347 C6.4997,18.5477 7.5477,17.4997 8.8347,17.4997 L66.5957,17.4997 C67.8827,17.4997 68.9307,18.5477 68.9307,19.8347 L68.9307,56.3857 Z M73.3007,19.6017 C71.5547,17.0367 68.7847,15.5127 68.7847,15.5127 C68.7847,15.5127 68.7767,15.5327 68.7727,15.5417 C68.1157,15.2067 67.3827,14.9997 66.5957,14.9997 L8.8347,14.9997 C6.1687,14.9997 3.9997,17.1687 3.9997,19.8347 L3.9997,56.3857 C3.9997,57.0577 4.1397,57.6977 4.3887,58.2807 C4.4177,58.4727 4.5307,58.7317 4.7727,59.0907 C6.5167,61.6717 9.3077,63.2067 9.3077,63.2067 C9.3077,63.2067 9.3137,63.1917 9.3157,63.1877 C10.0047,63.5667 10.7847,63.8027 11.6257,63.8027 L69.3857,63.8027 C72.0517,63.8027 74.2207,61.6337 74.2207,58.9677 L74.2207,22.4167 C74.2207,21.3647 73.8737,20.3967 73.3007,19.6017 L73.3007,19.6017 Z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/mobile-device-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 MobileDevicePictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Mobile device',
+  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="M41.8564,62.8135 C41.8564,65.1335 39.9754,67.0155 37.6554,67.0155 C35.3354,67.0155 33.4544,65.1335 33.4544,62.8135 C33.4544,60.4935 35.3354,58.6125 37.6554,58.6125 C39.9754,58.6125 41.8564,60.4935 41.8564,62.8135"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M57.2051,67.753 C57.2051,69.041 56.1571,70.088 54.8701,70.088 L20.7571,70.088 C19.4701,70.088 18.4221,69.041 18.4221,67.753 L18.4221,6.836 C18.4221,5.548 19.4701,4.5 20.7571,4.5 L54.8701,4.5 C56.1571,4.5 57.2051,5.548 57.2051,6.836 L57.2051,67.753 Z M61.6581,7.546 C61.6651,7.544 61.6841,7.536 61.6841,7.536 C61.6841,7.536 60.2381,4.698 57.7131,2.874 C57.7011,2.865 57.6921,2.861 57.6811,2.853 C57.6511,2.832 57.6201,2.815 57.5901,2.795 C57.3791,2.652 57.2021,2.557 57.0581,2.505 C56.4171,2.192 55.7081,2 54.9481,2 L20.8351,2 C18.1691,2 16.0001,4.169 16.0001,6.836 L16.0001,67.753 C16.0001,68.566 16.2141,69.324 16.5711,69.993 C16.5671,69.995 16.5521,70.001 16.5521,70.001 C16.5521,70.001 17.8271,72.454 20.0561,74.249 C20.9071,75.027 22.0271,75.514 23.2721,75.514 L57.3861,75.514 C60.0521,75.514 62.2211,73.345 62.2211,70.679 L62.2211,9.762 C62.2211,8.959 62.0051,8.213 61.6581,7.546 L61.6581,7.546 Z"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M24.377,53.2562 L51.407,53.2562 L51.407,10.5762 L24.377,10.5762 L24.377,53.2562 Z M52.024,8.0762 L23.603,8.0762 C22.608,8.0762 21.798,8.8862 21.798,9.8802 L21.798,53.9522 C21.798,54.9462 22.608,55.7562 23.603,55.7562 L52.024,55.7562 C53.019,55.7562 53.829,54.9462 53.829,53.9522 L53.829,9.8802 C53.829,8.8862 53.019,8.0762 52.024,8.0762 L52.024,8.0762 Z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/money-in-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 MoneyInPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Money in',
+  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="M65.8799,20.77 C60.1389,11.822 50.1089,5.875 38.7109,5.875 C27.2289,5.875 17.1349,11.908 11.4139,20.966 L13.2209,22.786 C18.4399,14.158 27.9119,8.377 38.7109,8.377 C55.1239,8.377 68.4779,21.73 68.4779,38.144 C68.4779,54.558 55.1239,67.912 38.7109,67.912 C28.0959,67.912 18.7659,62.322 13.4939,53.936 L11.7039,55.739 C12.0309,56.239 12.3559,56.741 12.7089,57.221 C18.4489,66.175 28.4819,72.125 39.8849,72.125 C57.6769,72.125 72.1519,57.65 72.1519,39.858 C72.1519,32.72 69.8179,26.12 65.8799,20.77"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M5.9863,23.8462 L5.9863,53.8832 C5.9863,54.1452 6.0913,54.3942 6.2733,54.5782 C6.6553,54.9642 7.2733,54.9642 7.6543,54.5782 L22.5603,39.5592 C22.9423,39.1762 22.9423,38.5532 22.5603,38.1682 L7.6543,23.1492 C7.4703,22.9642 7.2243,22.8622 6.9653,22.8622 C6.4243,22.8622 5.9863,23.3032 5.9863,23.8462"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M42.8447,46.6279 C42.3677,47.1899 41.7737,47.5779 41.0717,47.8049 L41.0717,40.6979 C41.9247,41.0129 42.5727,41.4199 42.9877,41.9299 C43.4907,42.5469 43.7417,43.2819 43.7417,44.1349 C43.7417,45.0899 43.4437,45.9199 42.8447,46.6279 M35.8927,32.8389 C35.4857,32.2599 35.2827,31.6319 35.2827,30.9579 C35.2827,30.2189 35.5047,29.5439 35.9497,28.9329 C36.3477,28.3879 36.8727,27.9929 37.5127,27.7319 L37.5127,34.1269 C36.8057,33.7859 36.2597,33.3599 35.8927,32.8389 M46.7597,38.3779 C45.7217,37.1419 43.8187,36.1259 41.0717,35.3219 L41.0717,28.0179 C41.9707,28.5979 42.5627,29.4939 42.8067,30.7469 L47.6387,30.1169 C47.3077,28.2069 46.5427,26.6829 45.3467,25.5439 C44.2657,24.5139 42.8277,23.8709 41.0717,23.5739 L41.0717,21.5799 L40.5147,21.5799 L37.7447,21.5799 L37.5127,21.5799 L37.5127,23.5119 C35.4357,23.7639 33.7517,24.5589 32.4837,25.9249 C31.1657,27.3449 30.5077,29.0989 30.5077,31.1869 C30.5077,33.2489 31.0897,35.0029 32.2547,36.4479 C33.3817,37.8469 35.1387,38.8989 37.5127,39.6119 L37.5127,47.5549 C36.9177,47.2209 36.3687,46.7359 35.8737,46.0829 C35.3137,45.3449 34.9317,44.4659 34.7287,43.4469 L29.7427,43.9819 C30.1247,46.4899 31.0037,48.4319 32.3787,49.8069 C33.7027,51.1309 35.4207,51.9289 37.5127,52.2259 L37.5127,55.7469 L37.7447,55.7469 L40.5147,55.7469 L41.0717,55.7469 L41.0717,52.0759 C43.2857,51.6599 45.0427,50.7299 46.3297,49.2729 C47.7237,47.6929 48.4207,45.7519 48.4207,43.4469 C48.4207,41.3849 47.8667,39.6939 46.7597,38.3779"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/money-out-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 MoneyOutPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Money out',
+  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="M63.5,54.6001 C58.16,62.6171 49.043,67.9121 38.711,67.9121 C22.297,67.9121 8.943,54.5581 8.943,38.1441 C8.943,21.7301 22.297,8.3771 38.711,8.3771 C50.842,8.3771 61.295,15.6751 65.927,26.1091 L68.458,24.8951 C67.699,23.4541 66.84,22.0731 65.88,20.7701 C60.139,11.8221 50.109,5.8751 38.711,5.8751 C20.919,5.8751 6.443,20.3501 6.443,38.1431 C6.443,45.2761 8.773,51.8731 12.709,57.2211 C18.449,66.1751 28.481,72.1251 39.885,72.1251 C51.347,72.1251 61.425,66.1131 67.15,57.0811 L63.5,54.6001 Z"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M54.1396,23.9019 L54.1396,53.9389 C54.1396,54.2009 54.2436,54.4499 54.4266,54.6329 C54.8086,55.0199 55.4266,55.0199 55.8076,54.6329 L70.7136,39.6149 C71.0956,39.2319 71.0956,38.6089 70.7136,38.2239 L55.8076,23.2049 C55.6236,23.0199 55.3766,22.9179 55.1176,22.9179 C54.5776,22.9179 54.1396,23.3589 54.1396,23.9019"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M39.8428,46.6279 C39.3658,47.1899 38.7718,47.5779 38.0698,47.8049 L38.0698,40.6979 C38.9228,41.0129 39.5708,41.4199 39.9858,41.9299 C40.4888,42.5469 40.7398,43.2819 40.7398,44.1349 C40.7398,45.0899 40.4418,45.9199 39.8428,46.6279 M32.8908,32.8389 C32.4838,32.2599 32.2798,31.6319 32.2798,30.9579 C32.2798,30.2189 32.5028,29.5439 32.9478,28.9329 C33.3458,28.3879 33.8708,27.9929 34.5108,27.7319 L34.5108,34.1269 C33.8038,33.7859 33.2578,33.3599 32.8908,32.8389 M43.7578,38.3779 C42.7198,37.1419 40.8168,36.1259 38.0698,35.3219 L38.0698,28.0179 C38.9688,28.5979 39.5608,29.4939 39.8048,30.7469 L44.6358,30.1169 C44.3048,28.2069 43.5408,26.6829 42.3448,25.5439 C41.2628,24.5139 39.8248,23.8709 38.0698,23.5739 L38.0698,21.5799 L37.5128,21.5799 L34.7428,21.5799 L34.5108,21.5799 L34.5108,23.5119 C32.4338,23.7639 30.7498,24.5589 29.4818,25.9249 C28.1638,27.3449 27.5048,29.0989 27.5048,31.1869 C27.5048,33.2489 28.0868,35.0029 29.2518,36.4479 C30.3798,37.8469 32.1368,38.8989 34.5108,39.6119 L34.5108,47.5549 C33.9158,47.2209 33.3668,46.7359 32.8718,46.0829 C32.3118,45.3449 31.9298,44.4659 31.7258,43.4469 L26.7408,43.9819 C27.1228,46.4899 28.0018,48.4319 29.3768,49.8069 C30.7008,51.1309 32.4188,51.9289 34.5108,52.2259 L34.5108,55.7469 L34.7428,55.7469 L37.5128,55.7469 L38.0698,55.7469 L38.0698,52.0759 C40.2838,51.6599 42.0398,50.7299 43.3268,49.2729 C44.7218,47.6929 45.4188,45.7519 45.4188,43.4469 C45.4188,41.3849 44.8648,39.6939 43.7578,38.3779"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/movie-tickets-pictogram.tsx

@@ -0,0 +1,46 @@
+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 MovieTicketsPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Movie tickets',
+  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="M40.891 24.223l3.598-6.217c.112-.195.407-.137.44.085l1.033 7.108a.239.239 0 0 0 .185.198l7.025 1.5a.237.237 0 0 1 .055.445l-6.44 3.179a.238.238 0 0 0-.132.238l.743 7.144a.236.236 0 0 1-.404.19L41.98 32.95a.236.236 0 0 0-.266-.051l-6.566 2.914a.236.236 0 0 1-.305-.326l3.342-6.36a.235.235 0 0 0-.034-.267l-4.8-5.344a.237.237 0 0 1 .216-.392l7.08 1.214a.236.236 0 0 0 .245-.115"
+        />
+        <polygon
+          className={fill({ mode, outline: true })}
+          points="27.249 52.284 33.16 56.902 34.699 54.931 28.788 50.314"
+        />
+        <polygon
+          className={fill({ mode, outline: true })}
+          points="18.805 45.689 24.716 50.306 26.255 48.336 20.344 43.719"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M39.005 58.295l-1.773-1.385-1.54 1.97 1.774 1.386-8.493 10.873-5.142-4.017c2.725-3.54 2.085-8.64-1.441-11.395-3.528-2.756-8.632-2.141-11.406 1.36l-4.979-3.89 8.494-10.872 1.773 1.386 1.539-1.97-1.774-1.385L42.088 7.005l22.968 17.94-26.051 33.35zM51.397 5.024a1.252 1.252 0 0 0-1.735.047l-2.6 2.647-4.42-3.452a1.25 1.25 0 0 0-1.755.215L3.265 52.645a1.25 1.25 0 0 0 .216 1.754l7.036 5.497a1.251 1.251 0 0 0 1.872-.397c.169-.316.342-.587.53-.827a5.655 5.655 0 0 1 7.931-.975 5.659 5.659 0 0 1 .975 7.932c-.188.24-.408.474-.675.715a1.248 1.248 0 0 0 .069 1.912l7.2 5.623a1.246 1.246 0 0 0 1.754-.216l44.637-45.5a1.251 1.251 0 0 0-.049-1.798L51.397 5.024z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/nest-egg-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 NestEggPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Nest egg',
+  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="M40.592 37.265a3.36 3.36 0 0 1-1.562 1.037v-6.26c.752.278 1.322.636 1.688 1.085.443.543.664 1.19.664 1.942 0 .842-.263 1.572-.79 2.196M34.47 25.12a2.83 2.83 0 0 1-.538-1.657c0-.651.197-1.244.588-1.783.35-.48.813-.827 1.377-1.058v5.633c-.623-.3-1.104-.675-1.427-1.135m9.572 4.878c-.915-1.087-2.59-1.982-5.01-2.691v-6.432c.791.51 1.312 1.3 1.527 2.403l4.255-.555c-.29-1.682-.963-3.024-2.017-4.028-.953-.907-2.219-1.473-3.766-1.735v-1.756h-3.135v1.7c-1.829.223-3.312.924-4.429 2.128-1.16 1.249-1.74 2.794-1.74 4.633 0 1.817.512 3.362 1.538 4.634.993 1.233 2.54 2.158 4.631 2.786v6.996c-.524-.294-1.007-.72-1.444-1.295-.493-.651-.829-1.425-1.009-2.322l-4.39.47c.337 2.21 1.11 3.92 2.321 5.132 1.166 1.166 2.68 1.868 4.522 2.13v3.1h3.135v-3.233c1.95-.366 3.497-1.185 4.631-2.47 1.227-1.39 1.843-3.1 1.843-5.13 0-1.816-.49-3.304-1.464-4.465"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M49.556 64.324c2.018 0 3.885-.075 5.596-.192-6.676 3.652-20.474 8.463-35.31-2.565 2.579-.056 5.033-.165 7.378-.316 8.307 2.347 16.015 3.073 22.336 3.073m-31.17-26.562c0-15.644 8.622-28.372 19.219-28.372 10.597 0 19.219 12.728 19.219 28.372 0 3.217-.395 6.161-1.1 8.826-9.013 1.581-21.531 2.182-36.545-1.23-.512-2.335-.792-4.868-.792-7.596M71.08 56.94l-.6-2.428c-.142.036-6.325 1.502-15.165 1.731 10.146-3.373 14.23-7.142 14.538-7.438l-1.731-1.802c-.088.084-5.924 5.466-21.545 9.026-8.59-.66-18.345-2.81-27.242-8.046 8.022 1.791 15.319 2.471 21.76 2.471 19.137 0 30.737-5.962 31.463-6.346l-1.17-2.21c-.086.046-3.055 1.558-8.38 3.047.199-1.567.306-3.155.306-4.742 0-17.078-11.9-32.199-23.801-33.164-1.866-.12-3.887-.022-7.257 1.082-9.397 3.394-16.37 15.518-16.37 29.918 0 2.248.21 4.495.615 6.681a112.816 112.816 0 0 1-10.648-3.288L5 43.782c2.449.89 4.843 1.668 7.187 2.355 8.222 6.478 17.602 9.81 26.427 11.385-3.38.51-7.104.921-11.186 1.198a76.34 76.34 0 0 1-18.182-7.949l-1.29 2.141a78.61 78.61 0 0 0 12.609 6.13c-3.157.083-6.483.095-10.022.007l-.063 2.5c1.792.045 3.533.066 5.228.066 7.924 6.542 16.497 9.175 23.296 9.175 11.484 0 20.09-6.062 21.639-7.228 3.368-.478 5.342-1.008 5.416-1.028l-.673-2.408c-.19.052-13.14 3.52-30.233.407 4.418-.525 8.332-1.212 11.794-1.989 2.123.148 4.18.22 6.128.22 10.377 0 17.847-1.785 18.006-1.824z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/noodles-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 NoodlesPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Noodles',
+  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="M15.01 13.728c.027-.6.456-1.062.963-1.035l50.164 2.72c1.012.011 1.846.754 1.863 1.66.016.905-.79 1.63-1.8 1.618a2.212 2.212 0 0 1-.204-.013l-50.139-3.612c-.5-.036-.882-.545-.856-1.14l.01-.198z"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M49.08 61.198l-.676.367v5.63h-25.37v-5.63l-.676-.367C13.658 56.472 8.046 47.464 7.6 37.581h56.24c-.448 9.884-6.06 18.891-14.76 23.617zM71.586 38.2c-.579-.596-4.555-2.454-6.168-2.947-.366-.11-.857-.26-1.276-.262h-28.71c-.195-1.35-.673-2.205-1.109-2.973-.481-.847-.86-1.515-.86-2.983 0-1.469.379-2.138.86-2.984.562-.99 1.201-2.11 1.201-4.268 0-2.156-.64-3.278-1.2-4.267-.482-.846-.862-1.512-.862-2.98 0-1.466.38-2.133.861-2.977.562-.988 1.201-2.108 1.201-4.264 0-.715-.577-1.295-1.288-1.295-.713 0-1.289.58-1.289 1.295 0 1.466-.38 2.133-.86 2.976-.563.99-1.201 2.11-1.201 4.266 0 2.155.638 3.276 1.2 4.265.48.845.861 1.514.861 2.98 0 1.47-.38 2.138-.86 2.984-.563.99-1.201 2.111-1.201 4.269 0 2.157.638 3.278 1.2 4.268.31.547.578 1.024.73 1.688h-3.94c-.194-1.35-.672-2.205-1.11-2.973-.48-.847-.86-1.515-.86-2.983 0-1.469.38-2.138.86-2.984.563-.99 1.201-2.11 1.201-4.268 0-2.156-.638-3.278-1.2-4.267-.482-.846-.861-1.512-.861-2.98 0-1.466.38-2.133.86-2.977.563-.988 1.201-2.108 1.201-4.264A1.29 1.29 0 0 0 27.68 6c-.711 0-1.288.58-1.288 1.295 0 1.466-.38 2.133-.861 2.976-.563.99-1.201 2.11-1.201 4.266 0 2.155.638 3.276 1.2 4.265.482.845.862 1.514.862 2.98 0 1.47-.38 2.138-.861 2.984-.563.99-1.201 2.111-1.201 4.269 0 2.157.638 3.278 1.2 4.268.312.547.58 1.024.73 1.688h-3.94c-.194-1.35-.672-2.205-1.109-2.973-.481-.847-.86-1.515-.86-2.983 0-1.469.379-2.138.86-2.984.563-.99 1.2-2.11 1.2-4.268 0-2.156-.637-3.278-1.2-4.267-.481-.846-.86-1.512-.86-2.98 0-1.466.379-2.133.86-2.977.563-.988 1.2-2.108 1.2-4.264 0-.715-.576-1.295-1.288-1.295-.712 0-1.288.58-1.288 1.295 0 1.466-.38 2.133-.86 2.976-.563.99-1.201 2.11-1.201 4.266 0 2.155.638 3.276 1.2 4.265.482.845.861 1.514.861 2.98 0 1.47-.38 2.138-.86 2.984-.563.99-1.201 2.111-1.201 4.269 0 2.157.638 3.278 1.2 4.268.312.547.578 1.024.73 1.688H6.976c-.528 0-1.045.218-1.416.6A1.975 1.975 0 0 0 5 37.018c.25 10.795 6.152 20.717 15.457 26.08v4.494c0 .837.475 1.558 1.163 1.927C23.57 70.981 28.144 72 28.203 72h26.159a2.19 2.19 0 0 0 2.182-2.194v-4.492C65.854 59.946 71.756 50.017 72 39.216c.006-.496-.01-.584-.413-1.016z"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M15.001 10.642a.932.932 0 0 1 .867-.982l50.125-2.958c1.009-.096 1.903.449 1.999 1.217.095.768-.644 1.47-1.652 1.566-.067.006-.136.01-.202.01L15.96 11.691a.919.919 0 0 1-.95-.88l-.009-.17z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/number-1-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 Number1Pictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Number 1',
+  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="M42.762 52.16h-5.35V31.994c-1.956 1.828-4.26 3.18-6.914 4.056v-4.857c1.397-.457 2.914-1.323 4.552-2.598 1.638-1.277 2.761-2.765 3.37-4.466h4.342V52.16z"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M38.268 68.037C21.855 68.037 8.5 54.683 8.5 38.269S21.855 8.502 38.268 8.502s29.768 13.353 29.768 29.767-13.355 29.768-29.768 29.768m27.17-47.142C59.697 11.947 49.666 6 38.268 6 20.476 6 6 20.475 6 38.268c0 7.133 2.331 13.73 6.266 19.078C18.006 66.3 28.039 72.25 39.443 72.25c17.792 0 32.266-14.475 32.266-32.267a32.101 32.101 0 0 0-6.271-19.088"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/number-2-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 Number2Pictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Number 2',
+  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.237 46.492v4.971H28.479c.203-1.879.813-3.659 1.828-5.342 1.016-1.682 3.022-3.913 6.018-6.693 2.412-2.248 3.89-3.77 4.437-4.57.737-1.105 1.104-2.197 1.104-3.276 0-1.194-.32-2.11-.961-2.752-.641-.64-1.527-.96-2.656-.96-1.117 0-2.006.335-2.666 1.008-.66.673-1.041 1.79-1.143 3.351l-5.332-.533c.317-2.945 1.315-5.058 2.99-6.34 1.676-1.283 3.77-1.925 6.284-1.925 2.755 0 4.919.743 6.494 2.23 1.574 1.483 2.36 3.331 2.36 5.54a9.685 9.685 0 0 1-.675 3.59c-.451 1.136-1.166 2.326-2.142 3.57-.65.825-1.817 2.013-3.504 3.561-1.69 1.55-2.758 2.578-3.21 3.086a9.23 9.23 0 0 0-1.095 1.484h10.627z"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M38.268 68.037C21.855 68.037 8.5 54.683 8.5 38.269S21.855 8.502 38.268 8.502s29.768 13.353 29.768 29.767-13.355 29.768-29.768 29.768m27.17-47.142C59.697 11.947 49.666 6 38.268 6 20.476 6 6 20.474 6 38.267a32.088 32.088 0 0 0 6.266 19.079C18.006 66.3 28.039 72.25 39.443 72.25c17.792 0 32.266-14.475 32.266-32.267a32.101 32.101 0 0 0-6.271-19.088"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/number-3-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 Number3Pictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Number 3',
+  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="M29.436 44.514l5.18-.628c.165 1.32.609 2.33 1.333 3.028.723.7 1.599 1.047 2.628 1.047 1.104 0 2.034-.419 2.789-1.257.756-.837 1.133-1.967 1.133-3.389 0-1.346-.362-2.412-1.085-3.199-.724-.788-1.606-1.18-2.647-1.18-.685 0-1.505.133-2.457.398l.591-4.36c1.447.038 2.552-.276 3.313-.942.762-.667 1.143-1.553 1.143-2.657 0-.939-.279-1.688-.838-2.248-.559-.557-1.302-.838-2.229-.838-.914 0-1.694.32-2.341.954-.648.634-1.041 1.56-1.181 2.78l-4.933-.839c.343-1.688.861-3.037 1.552-4.046.693-1.01 1.657-1.803 2.895-2.38 1.238-.578 2.625-.867 4.161-.867 2.628 0 4.735.838 6.322 2.514 1.308 1.371 1.962 2.92 1.962 4.646 0 2.45-1.34 4.405-4.019 5.865 1.6.343 2.879 1.112 3.837 2.305.959 1.193 1.439 2.634 1.439 4.322 0 2.45-.896 4.54-2.686 6.266s-4.017 2.59-6.683 2.59c-2.527 0-4.621-.728-6.284-2.18-1.664-1.455-2.628-3.355-2.895-5.705"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M38.268 68.037C21.855 68.037 8.5 54.683 8.5 38.268c0-16.414 13.355-29.766 29.768-29.766s29.768 13.352 29.768 29.766c0 16.415-13.355 29.769-29.768 29.769m27.17-47.143C59.697 11.946 49.666 6 38.268 6 20.476 6 6 20.474 6 38.267a32.09 32.09 0 0 0 6.266 19.079C18.006 66.3 28.039 72.25 39.443 72.25c17.792 0 32.266-14.476 32.266-32.268a32.106 32.106 0 0 0-6.271-19.088"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/number-4-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 Number4Pictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Number 4',
+  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="M38.675 41.513v-9.54l-6.417 9.54h6.417zm0 10.32v-5.616H27.25v-4.685l12.112-17.73h4.494v17.71h3.466v4.705h-3.466v5.617h-5.18z"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M38.268 68.037C21.855 68.037 8.5 54.683 8.5 38.269S21.855 8.502 38.268 8.502s29.768 13.353 29.768 29.767-13.355 29.768-29.768 29.768m27.17-47.142C59.697 11.947 49.666 6 38.268 6 20.476 6 6 20.475 6 38.268c0 7.133 2.331 13.73 6.266 19.079C18.006 66.3 28.039 72.25 39.443 72.25c17.792 0 32.266-14.475 32.266-32.267a32.104 32.104 0 0 0-6.271-19.088"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/number-5-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 Number5Pictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Number 5',
+  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="M29.28 45.165l5.332-.552c.152 1.206.603 2.161 1.352 2.866.749.705 1.612 1.057 2.589 1.057 1.118 0 2.064-.454 2.838-1.36.775-.909 1.16-2.277 1.16-4.105 0-1.715-.382-3-1.151-3.856-.767-.858-1.767-1.286-3-1.286-1.535 0-2.912.68-4.131 2.038l-4.342-.628 2.743-14.53h14.148v5.008H36.725l-.838 4.742c1.194-.597 2.413-.896 3.657-.896 2.374 0 4.386.864 6.037 2.59 1.65 1.727 2.475 3.968 2.475 6.723 0 2.297-.667 4.348-2 6.15-1.815 2.464-4.335 3.695-7.56 3.695-2.576 0-4.678-.692-6.303-2.076-1.625-1.384-2.596-3.243-2.913-5.58"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M38.268 68.037C21.855 68.037 8.5 54.683 8.5 38.268c0-16.414 13.355-29.766 29.768-29.766s29.768 13.352 29.768 29.766c0 16.415-13.355 29.769-29.768 29.769m0-62.037C20.476 6 6 20.474 6 38.267a32.09 32.09 0 0 0 6.266 19.079C18.006 66.3 28.039 72.25 39.443 72.25c17.792 0 32.266-14.476 32.266-32.268a32.106 32.106 0 0 0-6.271-19.088C59.697 11.947 49.666 6 38.268 6z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/padlock-locked-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 PadlockLockedPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Locked padlock',
+  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="M43.3732,45.7012 C43.3732,42.1112 40.4632,39.2012 36.8732,39.2012 C33.2832,39.2012 30.3732,42.1112 30.3732,45.7012 C30.3732,48.0012 31.5712,50.0172 33.3732,51.1732 L33.3732,56.7012 C33.3732,58.6342 34.9402,60.2012 36.8732,60.2012 C38.8062,60.2012 40.3732,58.6342 40.3732,56.7012 L40.3732,51.1732 C42.1762,50.0172 43.3732,48.0012 43.3732,45.7012"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M57.2682,63.1953 C57.2682,65.5683 55.3382,67.4983 52.9662,67.4983 L19.8032,67.4983 C17.4302,67.4983 15.5002,65.5683 15.5002,63.1953 L15.5002,30.9983 L57.2682,30.9983 L57.2682,63.1953 Z M24.3842,22.7083 C24.3842,15.1493 30.2152,9.0003 37.3842,9.0003 C44.5522,9.0003 50.3842,15.1493 50.3842,22.7083 L50.3842,28.4983 L24.3842,28.4983 L24.3842,22.7083 Z M62.9972,32.3353 L62.9982,32.3313 L59.1862,29.0623 L59.1852,29.0633 C58.8322,28.7153 58.3492,28.4983 57.8152,28.4983 L54.3842,28.4983 L54.3842,22.7083 C54.3842,12.9443 46.7582,5.0003 37.3842,5.0003 C28.0102,5.0003 20.3842,12.9443 20.3842,22.7083 L20.3842,28.4983 L14.9392,28.4983 C13.8702,28.4983 13.0002,29.3683 13.0002,30.4373 L13.0002,63.1953 C13.0002,63.3293 13.0122,63.4603 13.0202,63.5913 C13.0192,63.5913 13.0122,63.5893 13.0122,63.5893 C13.0122,63.5893 13.0172,63.6983 13.0352,63.8863 C13.0352,63.8883 13.0352,63.8913 13.0362,63.8943 C13.1832,65.3883 14.2892,71.9863 22.2362,73.1483 C22.6912,73.2443 23.1622,73.2963 23.6452,73.2963 L56.8082,73.2963 C60.5592,73.2963 63.6112,70.2453 63.6112,66.4943 L63.6112,33.7503 C63.6112,33.1923 63.3722,32.6913 62.9972,32.3353 L62.9972,32.3353 Z"
+        />
+      </g>
+    </Pictogram>
+  );
+}