@westpac/ui 0.2.1 → 0.4.0

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

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

@@ -0,0 +1,35 @@
+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 CoffeePictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Coffee',
+  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="52.827 52 20.163 52 19 39 54 39" />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M13.594 22.366h45.8v-3.908h-45.8v3.908zm37.41 49.058h-29.02L17.92 24.942h37.148l-4.063 46.482zM18.512 9.007l36.09 3.675 1.189 3.2H16.877l1.634-6.875zm43.49 6.876l-3.26-4.793a1.294 1.294 0 0 0-.959-.554l.004-.004-2.116-.275-38.026-3.872a1.285 1.285 0 0 0-1.395.985l-2.026 8.513h-1.926c-.716 0-1.297.576-1.297 1.288v6.483c0 .711.581 1.288 1.297 1.288h3.018L19.5 72.823c.058.666.62 1.177 1.293 1.177h31.399c2.751 0 5.352-2.802 5.58-5.588l3.822-43.47h3.02c.716 0 1.297-.577 1.297-1.288v-6.483c0-.712-.581-1.288-1.297-1.288H62z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

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

@@ -0,0 +1,40 @@
+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 CoinsPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Coins',
+  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 })}
+          fillRule="nonzero"
+          d="M32,15.123752 C33.9177195,14.6301651 35.9282026,14.3676471 38,14.3676471 C40.0717974,14.3676471 42.0822805,14.6301651 44,15.123752 C45.9177195,14.6301651 47.9282026,14.3676471 50,14.3676471 C63.254834,14.3676471 74,25.1128131 74,38.3676471 C74,51.6224811 63.254834,62.3676471 50,62.3676471 C47.9282026,62.3676471 45.9177195,62.105129 44,61.6115421 C42.0822805,62.105129 40.0717974,62.3676471 38,62.3676471 C35.9282026,62.3676471 33.9177195,62.105129 32,61.6115421 C30.0822805,62.105129 28.0717974,62.3676471 26,62.3676471 C12.745166,62.3676471 2,51.6224811 2,38.3676471 C2,25.1128131 12.745166,14.3676471 26,14.3676471 C28.0717974,14.3676471 30.0822805,14.6301651 32,15.123752 L32,15.123752 Z M24.6628705,18.4116367 C14.2406232,19.0996068 6,27.7712766 6,38.3676471 C6,48.9640175 14.2406232,57.6356873 24.6628705,58.3236574 C25.1048295,58.3528305 25.5506845,58.3676471 26,58.3676471 C28.0904114,58.3676471 30.1059176,58.0469394 32,57.4520425 C40.1142139,54.9035152 46,47.3229306 46,38.3676471 C46,29.4123635 40.1142139,21.8317789 32,19.2832516 C30.1059176,18.6883547 28.0904114,18.3676471 26,18.3676471 C25.5506845,18.3676471 25.1048295,18.3824637 24.6628971,18.4116349 L24.6628705,18.4116367 Z M39.3371029,18.4116349 C45.7669118,22.71737 50,30.0481631 50,38.3676471 C50,46.687131 45.7669118,54.0179242 39.3371029,58.3236592 C49.7593628,57.635702 58,48.9640265 58,38.3676471 C58,27.7712676 49.7593628,19.0995921 39.3371029,18.4116349 L39.3371029,18.4116349 Z M51.3371029,18.4116349 C57.7669118,22.71737 62,30.0481631 62,38.3676471 C62,46.687131 57.7669118,54.0179242 51.3371029,58.3236592 C61.7593628,57.635702 70,48.9640265 70,38.3676471 C70,27.7712676 61.7593628,19.0995921 51.3371029,18.4116349 L51.3371029,18.4116349 Z"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          fillRule="nonzero"
+          d="M27.2,51.68 L24.08,51.68 L24.08,48.65 C21.5,48.32 18.98,47.3 17,45.8 L19.34,42.38 C20.96,43.61 22.46,44.45 24.23,44.81 L24.23,40.04 C19.91,38.87 17.78,37.19 17.78,33.65 C17.78,30.32 20.3,28.13 24.08,27.74 L24.08,26 L27.2,26 L27.2,27.8 C29.33,28.1 31.16,28.88 32.78,30.02 L30.77,33.53 C29.57,32.72 28.31,32.09 27.05,31.76 L27.05,36.29 C31.61,37.52 33.56,39.41 33.56,42.77 C33.56,46.1 31.01,48.29 27.2,48.71 L27.2,51.68 Z M24.23,35.54 L24.23,31.49 C22.79,31.7 22.16,32.42 22.16,33.38 C22.16,34.31 22.58,34.94 24.23,35.54 Z M27.05,44.96 C28.46,44.75 29.18,44.09 29.18,43.01 C29.18,41.99 28.67,41.36 27.05,40.76 L27.05,44.96 Z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/compass-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 CompassPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Compass',
+  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="M37.014 35.276a2.602 2.602 0 1 1 3.681 3.681l2.877 2.878c.021-.02.047-.036.061-.06l10.464-19.502a.295.295 0 0 0-.4-.399l-19.5 10.464c-.026.013-.04.04-.06.06l2.877 2.878z"
+        />
+        <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.17-47.142C59.695 11.947 49.665 6 38.267 6 20.476 6 6 20.475 6 38.268c0 7.133 2.331 13.73 6.266 19.078C18.006 66.3 28.04 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, outline: true })}
+          d="M40.606 14.275a2.416 2.416 0 1 0-4.831.001 2.416 2.416 0 0 0 4.831 0zM38.19 59.396a2.416 2.416 0 1 0 0 4.831 2.416 2.416 0 0 0 0-4.83m23.863-23.543a2.415 2.415 0 1 0 0 4.83 2.415 2.415 0 0 0 0-4.83m-47.779 0a2.415 2.415 0 1 0 0 4.83 2.415 2.415 0 0 0 0-4.83m22.74 3.103a2.604 2.604 0 0 1 0-3.681l-2.878-2.878c-.02.02-.046.036-.06.06l-10.464 19.5a.295.295 0 0 0 .4.4l19.5-10.463c.025-.014.04-.041.061-.06l-2.878-2.878a2.604 2.604 0 0 1-3.68 0"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/customer-profile-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 CustomerProfilePictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Customer profile',
+  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.079C18.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="M43.704 41.03c4.501 0 8.202 3.26 8.338 7.282l.004.228v3.253c0 .66-.565 1.173-1.25 1.232l-.13.005H26.34c-.694 0-1.223-.472-1.287-1.108l-.006-.129V48.54c0-4.05 3.617-7.384 8.087-7.506l.254-.004h10.317zm-5.158-20a8.499 8.499 0 0 0-8.5 8.5c0 2.366.972 4.579 2.656 6.173a8.5 8.5 0 1 0 5.843-14.673z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/desktop-computer-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 DesktopComputerPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Desktop computer',
+  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="M12.936,47.6466 L61.229,47.6466 L61.229,17.1096 L12.936,17.1096 L12.936,47.6466 Z M61.987,14.6096 L12.177,14.6096 C11.217,14.6096 10.436,15.3906 10.436,16.3506 L10.436,48.4046 C10.436,49.3656 11.217,50.1466 12.177,50.1466 L61.987,50.1466 C62.947,50.1466 63.729,49.3656 63.729,48.4046 L63.729,16.3506 C63.729,15.3906 62.947,14.6096 61.987,14.6096 L61.987,14.6096 Z"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M66.9102,51.145 C66.9102,52.309 65.9642,53.255 64.8002,53.255 L45.2362,53.255 L31.2322,53.255 L9.6102,53.255 C8.4462,53.255 7.5002,52.309 7.5002,51.145 L7.5002,13.611 C7.5002,12.447 8.4462,11.5 9.6102,11.5 L64.8002,11.5 C65.9642,11.5 66.9102,12.447 66.9102,13.611 L66.9102,51.145 Z M68.1412,9 L64.8002,9 L12.9522,9 L9.6102,9 C7.0682,9 5.0002,11.068 5.0002,13.611 L5.0002,51.145 C5.0002,53.687 7.0682,55.755 9.6102,55.755 L12.9522,55.755 L31.2322,55.755 L31.2322,60.515 L33.7322,60.515 L33.7322,55.755 L42.7362,55.755 L42.7362,60.515 L47.5492,60.515 L47.5492,55.755 L64.8002,55.755 L68.1412,55.755 C70.6842,55.755 72.7532,53.687 72.7532,51.145 L72.7532,13.611 C72.7532,11.068 70.6842,9 68.1412,9 L68.1412,9 Z"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M53.8887,68.2934 L23.9137,68.2934 C23.2687,68.2934 22.7407,67.7654 22.7407,67.1204 L22.7407,66.7364 C22.7407,63.3144 25.5397,60.5154 28.9617,60.5154 L48.8407,60.5154 C52.2627,60.5154 55.0627,63.3144 55.0627,66.7364 L55.0627,67.1204 C55.0627,67.7654 54.5347,68.2934 53.8887,68.2934"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/document-and-pen-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 DocumentAndPenPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Document and pen',
+  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="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/informative/dollar-sign-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 DollarSignPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Dollar sign',
+  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.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/informative/drivers-licence-pictogram.tsx

@@ -0,0 +1,51 @@
+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 = '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 })}
+          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/informative/education-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 EducationPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Education',
+  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="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/informative/eftpos-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 EftposPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Eftpos',
+  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="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>
+  );
+}