@westpac/ui 0.2.1 → 0.4.0

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

package/src/components/pictogram/components/informative/padlock-unlocked-pictogram.tsx

@@ -0,0 +1,49 @@
+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 PadlockUnlockedPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Unlocked 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.3735,45.9736 C43.3735,42.3836 40.4635,39.4736 36.8735,39.4736 C33.2835,39.4736 30.3735,42.3836 30.3735,45.9736 C30.3735,48.2736 31.5705,50.2896 33.3735,51.4446 L33.3735,56.9736 C33.3735,58.9066 34.9405,60.4736 36.8735,60.4736 C38.8065,60.4736 40.3735,58.9066 40.3735,56.9736 L40.3735,51.4446 C42.1755,50.2896 43.3735,48.2736 43.3735,45.9736"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M57.2681,63.4677 C57.2681,65.8407 55.3381,67.7707 52.9661,67.7707 L19.8031,67.7707 C17.4301,67.7707
+        15.5001,65.8407 15.5001,63.4677 L15.5001,31.2707 L57.2681,31.2707 L57.2681,63.4677 Z M62.9971,32.6077
+        L62.9991,32.6037 L59.1861,29.3347 L59.1851,29.3357 C58.8331,28.9867 58.3491,28.7707 57.8151,28.7707
+        L53.8401,28.7707 L53.8401,21.1667 C53.8401,11.7007 46.4461,3.9997 37.3571,3.9997 C28.2681,3.9997 20.8731,11.7007
+        20.8731,21.1667 L20.8731,21.5837 L24.8731,21.5837 L24.8731,21.1667 C24.8731,13.9067 30.4741,7.9997
+        37.3571,7.9997 C44.2401,7.9997 49.8401,13.9067 49.8401,21.1667 L49.8401,28.7707 L14.9391,28.7707
+        C13.8701,28.7707 13.0001,29.6397 13.0001,30.7097 L13.0001,63.4677 C13.0001,63.6017 13.0121,63.7317
+        13.0201,63.8637 C13.0191,63.8637 13.0131,63.8607 13.0131,63.8607 C13.0131,63.8607 13.0171,63.9707
+        13.0351,64.1577 C13.0351,64.1607 13.0361,64.1637 13.0361,64.1657 C13.1831,65.6597 14.2891,72.2587
+        22.2371,73.4197 C22.6911,73.5157 23.1621,73.5687 23.6451,73.5687 L56.8081,73.5687 C60.5591,73.5687
+        63.6111,70.5167 63.6111,66.7657 L63.6111,34.0217 C63.6111,33.4647 63.3731,32.9637 62.9971,32.6077
+        L62.9971,32.6077 Z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/passport-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 PassportPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Passport',
+  copyrightYear = '2023',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('h-13 w-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <polygon
+          className={fill({ mode, outline: true })}
+          points="27.791 24.295 51.496 24.295 51.496 21.295 27.791 21.295"
+        />
+        <polygon
+          className={fill({ mode, outline: true })}
+          points="27.791 64.275 51.496 64.275 51.496 61.275 27.791 61.275"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M61.2246,69.1045 C61.2246,70.3925 60.1766,71.4395 58.8896,71.4395 L19.8346,71.4395 C18.5476,71.4395 17.4996,70.3925 17.4996,69.1045 L17.4996,66.1635 L17.4616,66.2145 L17.4616,14.1215 L17.4616,12.0395 C17.4616,13.0255 18.6616,14.0495 19.9836,14.0625 L58.8896,14.0625 C60.1766,14.0625 61.2246,15.1095 61.2246,16.3975 L61.2246,69.1045 Z M58.8896,11.5625 L56.4266,11.5625 L56.4586,8.0345 C56.4716,5.8195 54.6876,4.0135 52.4726,4.00040673 C52.3186,3.9995 52.1646,4.0065 52.0126,4.0235 L19.1396,7.6145 L19.1416,7.6235 C15.0616,8.0975 15.0276,11.0845 15.0276,11.0845 L15.0276,16.1275 C15.0226,16.2195 14.9996,16.3055 14.9996,16.3975 L14.9996,69.1045 C14.9996,71.7715 17.1686,73.9395 19.8346,73.9395 L58.8896,73.9395 C61.5556,73.9395 63.7246,71.7715 63.7246,69.1045 L63.7246,16.3975 C63.7246,13.7315 61.5556,11.5625 58.8896,11.5625 L58.8896,11.5625 Z"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M31.4902,35.2675 C32.1602,35.4995 32.8552,35.7045 33.5682,35.8785 C33.8812,34.9395 34.3392,33.8215 34.9882,32.7895 C33.6802,33.3815 32.4952,34.2205 31.4902,35.2675 L31.4902,35.2675 Z M44.2982,32.7895 C44.9472,33.8215 45.4062,34.9395 45.7182,35.8785 C46.4302,35.7045 47.1262,35.4995 47.7942,35.2675 C46.7902,34.2205 45.6062,33.3825 44.2982,32.7895 L44.2982,32.7895 Z M35.6632,36.2935 C36.6232,36.4395 37.6012,36.5345 38.5852,36.5735 L38.5852,32.0675 C37.7522,32.5085 36.9492,33.4595 36.2782,34.8185 C36.0532,35.2745 35.8472,35.7695 35.6632,36.2935 L35.6632,36.2935 Z M40.7012,32.0675 L40.7012,36.5735 C41.6842,36.5345 42.6632,36.4395 43.6232,36.2935 C43.4382,35.7685 43.2322,35.2745 43.0072,34.8185 C42.3372,33.4595 41.5352,32.5085 40.7012,32.0675 L40.7012,32.0675 Z M28.3852,42.0355 L32.5052,42.0355 C32.5612,40.6085 32.7322,39.2285 33.0132,37.9235 C32.0122,37.6755 31.0402,37.3715 30.1122,37.0175 C29.1432,38.5315 28.5522,40.2495 28.3852,42.0355 L28.3852,42.0355 Z M34.6242,42.0355 L38.5852,42.0355 L38.5852,38.6925 C37.4032,38.6485 36.2302,38.5315 35.0892,38.3465 C34.8352,39.5145 34.6792,40.7515 34.6242,42.0355 L34.6242,42.0355 Z M40.7012,42.0355 L44.6612,42.0355 C44.6072,40.7505 44.4512,39.5135 44.1972,38.3465 C43.0542,38.5315 41.8832,38.6485 40.7012,38.6925 L40.7012,42.0355 Z M46.7812,42.0355 L50.9012,42.0355 C50.7332,40.2495 50.1422,38.5315 49.1742,37.0175 C48.2452,37.3725 47.2722,37.6755 46.2702,37.9235 C46.5532,39.2305 46.7242,40.6105 46.7812,42.0355 L46.7812,42.0355 Z M34.6242,44.1535 C34.6792,45.4365 34.8352,46.6735 35.0892,47.8415 C36.2322,47.6555 37.4062,47.5385 38.5852,47.4965 L38.5852,44.1535 L34.6242,44.1535 Z M40.7012,47.4965 C41.8812,47.5385 43.0532,47.6555 44.1972,47.8415 C44.4512,46.6745 44.6072,45.4375 44.6612,44.1535 L40.7012,44.1535 L40.7012,47.4965 Z M46.2702,48.2645 C47.2712,48.5115 48.2452,48.8145 49.1742,49.1705 C50.1422,47.6575 50.7332,45.9385 50.9012,44.1535 L46.7812,44.1535 C46.7242,45.5775 46.5532,46.9565 46.2702,48.2645 L46.2702,48.2645 Z M28.3852,44.1535 C28.5522,45.9375 29.1432,47.6565 30.1122,49.1705 C31.0412,48.8145 32.0132,48.5115 33.0132,48.2645 C32.7322,46.9585 32.5612,45.5795 32.5052,44.1535 L28.3852,44.1535 Z M31.4902,50.9205 C32.4952,51.9675 33.6802,52.8065 34.9882,53.3985 C34.3392,52.3665 33.8812,51.2485 33.5682,50.3095 C32.8562,50.4825 32.1612,50.6875 31.4902,50.9205 L31.4902,50.9205 Z M45.7182,50.3095 C45.4062,51.2485 44.9472,52.3665 44.2982,53.3985 C45.6062,52.8065 46.7902,51.9675 47.7942,50.9205 C47.1252,50.6875 46.4292,50.4825 45.7182,50.3095 L45.7182,50.3095 Z M35.6632,49.8955 C35.8482,50.4215 36.0542,50.9155 36.2782,51.3695 C36.9492,52.7275 37.7522,53.6795 38.5852,54.1215 L38.5852,49.6145 C37.5992,49.6545 36.6212,49.7485 35.6632,49.8955 L35.6632,49.8955 Z M40.7012,49.6145 L40.7012,54.1215 C41.5352,53.6795 42.3372,52.7275 43.0072,51.3695 C43.2322,50.9135 43.4392,50.4195 43.6232,49.8955 C42.6652,49.7485 41.6862,49.6545 40.7012,49.6145 L40.7012,49.6145 Z M39.6392,56.5175 C36.1402,56.5175 32.8502,55.1955 30.3282,52.7645 C27.6772,50.2105 26.2192,46.7765 26.2192,43.0945 C26.2192,37.0565 30.2752,31.7305 36.0852,30.1445 C40.1562,29.0275 44.4212,29.8565 47.7832,32.4205 C51.1412,34.9825 53.0682,38.8725 53.0682,43.0945 C53.0682,50.3455 47.3952,56.2385 40.1542,56.5075 C39.9822,56.5145 39.8112,56.5175 39.6392,56.5175 L39.6392,56.5175 Z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/percent-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 PercentSignPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Percent 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="M37.7109,67.9121 C21.2969,67.9121 7.9429,54.5581 7.9429,38.1441 C7.9429,21.7301 21.2969,8.3771 37.7109,8.3771 C54.1239,8.3771 67.4779,21.7301 67.4779,38.1441 C67.4779,54.5581 54.1239,67.9121 37.7109,67.9121 M64.8799,20.7701 C59.1389,11.8221 49.1089,5.8751 37.7109,5.8751 C19.9189,5.8751 5.4429,20.3501 5.4429,38.1431 C5.4429,45.2761 7.7739,51.8731 11.7089,57.2211 C17.4489,66.1751 27.4819,72.1251 38.8849,72.1251 C56.6769,72.1251 71.1519,57.6501 71.1519,39.8581 C71.1519,32.7201 68.8179,26.1201 64.8799,20.7701"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M45.749,46.3555 C45.749,48.2365 45.966,49.4935 46.4,50.1245 C46.729,50.6115 47.183,50.8545 47.762,50.8545 C48.354,50.8545 48.808,50.6185 49.124,50.1445 C49.558,49.4995 49.774,48.2365 49.774,46.3555 C49.774,44.4745 49.564,43.2115 49.143,42.5665 C48.814,42.0935 48.354,41.8565 47.762,41.8565 C47.17,41.8565 46.716,42.0935 46.4,42.5665 C45.966,43.2115 45.749,44.4745 45.749,46.3555 L45.749,46.3555 Z M41.428,46.3755 C41.428,43.7835 41.997,41.8635 43.134,40.6135 C44.272,39.3635 45.828,38.7385 47.801,38.7385 C49.788,38.7385 51.35,39.3635 52.488,40.6135 C53.626,41.8635 54.195,43.7835 54.195,46.3755 C54.195,48.9805 53.626,50.9075 52.488,52.1575 C51.35,53.4065 49.808,54.0315 47.86,54.0315 C45.848,54.0315 44.272,53.4065 43.134,52.1575 C41.997,50.9075 41.428,48.9805 41.428,46.3755 L41.428,46.3755 Z M31.892,53.9725 L27.402,53.9725 L44.738,23.4455 L49.109,23.4455 L31.892,53.9725 Z M26.233,31.0425 C26.233,32.9235 26.45,34.1875 26.884,34.8315 C27.213,35.3055 27.667,35.5425 28.246,35.5425 C28.838,35.5425 29.298,35.3055 29.627,34.8315 C30.048,34.1875 30.259,32.9235 30.259,31.0425 C30.259,29.1615 30.048,27.9055 29.627,27.2735 C29.298,26.7875 28.838,26.5435 28.246,26.5435 C27.667,26.5435 27.213,26.7805 26.884,27.2535 C26.45,27.8985 26.233,29.1615 26.233,31.0425 L26.233,31.0425 Z M21.912,31.0825 C21.912,28.4905 22.48,26.5695 23.619,25.3205 C24.756,24.0705 26.299,23.4455 28.246,23.4455 C30.259,23.4455 31.834,24.0675 32.972,25.3105 C34.11,26.5535 34.679,28.4775 34.679,31.0825 C34.679,33.6735 34.11,35.5945 32.972,36.8445 C31.834,38.0945 30.291,38.7185 28.345,38.7185 C26.332,38.7185 24.756,38.0975 23.619,36.8545 C22.48,35.6105 21.912,33.6875 21.912,31.0825 L21.912,31.0825 Z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

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

@@ -0,0 +1,38 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Pictogram } from '../../pictogram.component.js';
+import { fill } from '../../pictogram.styles.js';
+import { type PictogramProps } from '../../pictogram.types.js';
+
+export function PersonPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Person',
+  copyrightYear = '2023',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('h-13 w-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, outline: true })}
+          d="M11.0083,70.6138 L12.4083,61.5538 L12.4313,61.4228 C12.8923,58.7648 14.7063,56.4798 17.2833,55.3088 C18.9823,54.5388 22.2633,53.0408 25.3243,51.5928 L27.7163,50.4488 C28.1483,50.2388 28.5623,50.0368 28.9533,49.8418 C30.1843,51.0458 34.1093,54.4438 39.3113,54.5178 C39.3693,54.5188 39.4273,54.5188 39.4863,54.5188 C43.0623,54.5188 46.4453,52.9238 49.5573,49.8068 C50.2323,50.1368 50.9683,50.4898 51.7473,50.8588 L54.1573,51.9838 C56.9103,53.2568 59.6883,54.5058 61.2073,55.1848 C63.7913,56.3398 65.6183,58.6148 66.0963,61.2758 L67.5703,70.4528 L11.0083,70.6138 Z M32.7083,46.6698 C33.2943,45.6138 33.6163,44.4358 33.7663,43.2758 C35.4403,44.4098 37.3373,45.1278 39.4753,45.1278 C41.4393,45.1278 43.1793,44.5748 44.7183,43.6738 C44.9833,45.2178 45.5273,46.5018 46.3223,47.5118 C46.6353,47.9078 46.9953,48.2398 47.3193,48.5008 C44.8033,50.8608 42.1693,52.0438 39.3653,52.0178 C35.6313,51.9718 32.5743,49.7188 31.1953,48.5058 C32.4263,47.4508 32.7083,46.6698 32.7083,46.6698 L32.7083,46.6698 Z M26.5493,27.2048 C26.9343,25.2968 29.0463,22.8498 31.1973,22.3648 C34.0273,21.5958 39.9333,23.0248 43.3033,17.7808 C45.5773,18.5498 47.9683,16.8728 50.1283,20.5308 C50.8863,22.2178 51.0023,23.9908 51.3233,26.0318 C51.2953,26.5118 51.6523,27.3488 52.0393,27.6808 C51.1763,30.7408 47.3153,42.6278 39.4753,42.6278 C31.4863,42.6278 27.0683,28.9168 26.5493,27.2048 L26.5493,27.2048 Z M71.3583,60.5278 L71.3283,60.3568 C70.6723,56.6398 68.1543,53.4628 64.5923,51.8588 C61.9373,50.6628 55.1613,48.4448 51.7473,46.7078 C48.5563,45.0848 47.3163,42.5308 47.3173,41.6718 C50.0043,39.0578 51.8623,35.4368 53.0373,32.5078 C53.1073,32.5738 53.1893,32.6178 53.2943,32.6178 C55.7723,32.6178 57.0083,28.9798 57.0083,27.6208 C57.0083,26.3188 56.2123,25.2638 55.2103,25.1778 C56.0643,23.8248 56.2823,22.5128 56.2823,22.5128 C57.0993,18.1358 56.0553,15.2538 54.3063,12.6518 C52.4393,9.8138 49.6613,7.8158 46.0443,8.2298 C45.1813,6.6688 43.7953,5.7128 42.1253,5.2258 C41.2893,4.9828 40.4173,4.9018 39.5463,4.8918 C38.4133,4.8778 37.2183,4.9458 36.0393,5.0358 C30.4173,5.4638 25.9773,8.3768 23.8483,12.5468 C22.2433,15.6818 21.4873,19.3478 22.4183,22.5428 C22.7043,23.5238 23.1263,24.4058 23.5783,25.1718 C22.5523,25.2278 21.7333,26.2978 21.7333,27.6208 C21.7333,28.9798 22.9693,32.6178 25.4463,32.6178 C25.6073,32.6178 25.7183,32.5278 25.7983,32.3828 C27.0073,35.1808 28.8683,38.6818 31.4333,41.3088 C31.4463,42.9938 31.1533,45.5218 29.4263,46.7648 C29.2733,46.8758 29.1073,46.9768 28.9303,47.0678 C25.4933,48.8268 18.9503,51.8178 16.2973,53.0218 C12.9653,54.5338 10.6163,57.5108 10.0173,60.9728 L8.1373,73.1108 L57.5823,72.9708 L73.3643,72.9708 L71.3583,60.5278 Z"
+        />
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="47.304 73.012 58.165 73.012 58.165 60.461 47.304 60.461"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/piggy-bank-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 PiggyBankPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Piggy bank',
+  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="M51.4653747,34.8946 C49.7333747,34.8946 48.3273747,36.2976 48.3273747,38.0326 C48.3273747,39.7676 49.7333747,41.1696 51.4653747,41.1696 C53.1963747,41.1696 54.6023747,39.7676 54.6023747,38.0326 C54.6023747,36.2976 53.1963747,34.8946 51.4653747,34.8946"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M68.1177747,51.152 L60.1427747,55.268 C59.7487747,55.472 59.4917747,55.87 59.4687747,56.313 L58.8647747,67.777 C58.8417747,68.211 58.6817747,68.621 58.4167747,68.929 C58.3417747,69.016 58.2587747,69.106 58.1697747,69.195 C57.7287747,69.633 57.1187747,69.813 56.4907747,69.689 C55.8347747,69.558 55.2897747,69.115 55.0317747,68.504 L52.1947747,61.755 C52.0597747,61.435 51.7977747,61.185 51.4717747,61.066 C51.1427747,60.945 50.7817747,60.968 50.4727747,61.127 C50.3337747,61.197 36.3147747,68.185 22.1947747,61.302 C21.8827747,61.15 21.5207747,61.134 21.1967747,61.259 C20.8727747,61.384 20.6157747,61.639 20.4867747,61.961 L17.7087747,68.904 C17.5287747,69.356 17.1647747,69.715 16.6507747,69.914 C16.0767747,70.135 15.4507747,70.07 14.9347747,69.735 C14.4177747,69.401 14.1037747,68.856 14.0737747,68.241 L13.4077747,55.052 C13.3947747,54.799 13.3037747,54.554 13.1497747,54.353 C12.7457747,53.826 3.4767747,41.379 17.1967747,28.945 L17.4297747,28.879 C18.7037747,30.038 20.1977747,30.957 21.8347747,31.577 C20.6627747,32.268 19.4807747,33.053 18.2997747,33.967 C17.7537747,34.39 17.6537747,35.174 18.0757747,35.721 C18.3227747,36.039 18.6927747,36.206 19.0657747,36.206 C19.3327747,36.206 19.6017747,36.12 19.8297747,35.944 C30.0637747,28.026 40.7207747,29.81 40.8777747,29.836 C41.5617747,29.963 42.2077747,29.511 42.3327747,28.833 C42.4577747,28.154 42.0087747,27.503 41.3297747,27.377 C41.1667747,27.347 39.7357747,27.1 37.4837747,27.127 C38.5087747,25.809 39.3067747,24.307 39.7987747,22.67 L42.6427747,23.502 C44.3867747,24.012 46.2917747,23.685 47.7387747,22.627 C48.9487747,21.741 51.2297747,20.072 52.8237747,17.506 C53.7287747,19.015 54.7647747,21.792 53.9007747,25.91 C53.6917747,26.913 54.0317747,27.965 54.9127747,29.039 L61.3087747,36.836 C61.7827747,37.414 62.3467747,37.905 62.9817747,38.296 L68.1177747,41.45 L68.1177747,51.152 Z M15.4177747,18.731 C15.4177747,12.831 20.2177747,8.03 26.1177747,8.03 C32.0187747,8.03 36.8187747,12.831 36.8187747,18.731 C36.8187747,24.631 32.0187747,29.432 26.1177747,29.432 C20.2177747,29.432 15.4177747,24.631 15.4177747,18.731 L15.4177747,18.731 Z M73.0217747,40.686 L67.2907747,37.166 C66.8917747,36.921 66.5387747,36.612 66.2417747,36.25 L59.8467747,28.453 C59.4267747,27.943 59.3137747,27.586 59.3477747,27.423 C61.0237747,19.431 53.7957747,14.434 53.6067747,14.268 C53.3537747,14.046 53.0247747,13.943 52.6957747,13.965 C52.5687747,13.956 52.4407747,13.959 52.3147747,13.988 C51.9207747,14.081 51.5957747,14.36 51.4427747,14.735 C50.2397747,17.699 47.6527747,19.592 46.2627747,20.609 C45.4387747,21.212 44.3497747,21.395 43.3457747,21.103 L40.2977747,20.211 C40.3497747,19.724 40.3807747,19.232 40.3807747,18.732 C40.3807747,11.16 34.2207747,5 26.6487747,5 C19.0767747,5 12.9167747,11.16 12.9167747,18.732 C12.9167747,21.817 13.9517747,24.658 15.6767747,26.953 C13.4097747,28.985 11.7017747,31.029 10.4387747,33.042 C8.9007747,32.134 6.8657747,30.633 6.4187747,29.458 C6.1747747,28.812 5.4507747,28.488 4.8067747,28.733 C4.1607747,28.978 3.8367747,29.7 4.0817747,30.345 C4.8937747,32.482 7.8237747,34.405 9.2267747,35.229 C4.4867747,45.087 9.7097747,53.74 10.9287747,55.538 L11.5757747,68.367 C11.6477747,69.792 12.3757747,71.055 13.5737747,71.833 C13.6237747,71.866 13.6937747,71.903 13.7737747,71.944 C14.1187747,72.144 14.4807747,72.296 14.8567747,72.394 C16.2787747,72.923 18.3527747,73.542 18.9437747,73.542 C19.4957747,73.542 20.0587747,73.437 20.6127747,73.223 C21.7117747,72.798 22.5927747,71.926 23.0307747,70.833 L25.2747747,65.223 C25.7757747,65.386 26.2757747,65.548 26.7727747,65.685 C36.8537747,69.537 46.2877747,67.439 51.1657747,65.758 L52.7267747,69.473 C53.3067747,70.852 54.5327747,71.849 56.0047747,72.141 C56.1427747,72.169 56.2817747,72.183 56.4207747,72.198 C56.4297747,72.2 56.4377747,72.203 56.4477747,72.205 C57.8857747,72.49 61.9037747,72.987 62.9297747,71.97 C63.0667747,71.835 63.1927747,71.697 63.3097747,71.561 C63.9357747,70.835 64.3087747,69.893 64.3607747,68.909 L64.9277747,58.161 L72.9407747,54.025 C73.3567747,53.81 73.6177747,53.381 73.6177747,52.914 L73.6177747,41.751 C73.6177747,41.317 73.3917747,40.913 73.0217747,40.686 L73.0217747,40.686 Z"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M27.8457747,22.3883 C27.6267747,22.6463 27.3537747,22.8243 27.0317747,22.9293 L27.0317747,19.6653 C27.4237747,19.8103 27.7207747,19.9963 27.9107747,20.2313 C28.1417747,20.5143 28.2577747,20.8523 28.2577747,21.2433 C28.2577747,21.6823 28.1207747,22.0633 27.8457747,22.3883 M24.6537747,16.0563 C24.4667747,15.7903 24.3727747,15.5023 24.3727747,15.1933 C24.3727747,14.8533 24.4747747,14.5443 24.6797747,14.2633 C24.8627747,14.0133 25.1037747,13.8313 25.3977747,13.7113 L25.3977747,16.6483 C25.0727747,16.4923 24.8217747,16.2963 24.6537747,16.0563 M29.6437747,18.6003 C29.1667747,18.0333 28.2927747,17.5663 27.0317747,17.1973 L27.0317747,13.8433 C27.4447747,14.1093 27.7157747,14.5213 27.8277747,15.0963 L30.0467747,14.8063 C29.8947747,13.9303 29.5437747,13.2303 28.9947747,12.7063 C28.4977747,12.2343 27.8377747,11.9383 27.0317747,11.8023 L27.0317747,10.8873 L26.7757747,10.8873 L25.5047747,10.8873 L25.3977747,10.8873 L25.3977747,11.7743 C24.4437747,11.8893 23.6707747,12.2543 23.0877747,12.8823 C22.4827747,13.5343 22.1807747,14.3393 22.1807747,15.2983 C22.1807747,16.2453 22.4477747,17.0513 22.9827747,17.7143 C23.5007747,18.3563 24.3067747,18.8393 25.3977747,19.1673 L25.3977747,22.8143 C25.1237747,22.6603 24.8727747,22.4383 24.6447747,22.1383 C24.3877747,21.7993 24.2117747,21.3953 24.1187747,20.9283 L21.8297747,21.1733 C22.0057747,22.3253 22.4087747,23.2173 23.0397747,23.8483 C23.6477747,24.4563 24.4367747,24.8223 25.3977747,24.9593 L25.3977747,26.5753 L25.5047747,26.5753 L26.7757747,26.5753 L27.0317747,26.5753 L27.0317747,24.8893 C28.0487747,24.6993 28.8547747,24.2723 29.4457747,23.6023 C30.0857747,22.8783 30.4067747,21.9863 30.4067747,20.9283 C30.4067747,19.9813 30.1517747,19.2043 29.6437747,18.6003"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/pizza-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 PizzaPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Pizza',
+  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="M35.581 29.212a5.542 5.542 0 1 1-11.085 0 5.542 5.542 0 1 1 11.085 0m-6.175 20.36a5.507 5.507 0 1 1-10.859-1.85 5.507 5.507 0 0 1 10.859 1.85M47.9 40.385a5.507 5.507 0 1 1-9.54 5.507 5.507 5.507 0 0 1 9.54-5.507"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M63.934 50.143a3.123 3.123 0 0 1-2.084 1.194 3.114 3.114 0 0 1-.578.012c-.058-.004-.113-.012-.17-.019a2.936 2.936 0 0 1-.4-.072c-.056-.013-.112-.026-.165-.043a3.1 3.1 0 0 1-.478-.187 3.147 3.147 0 0 1-1.6-1.854 3.147 3.147 0 0 1-.128-.554 41.522 41.522 0 0 0-.334-2.14 40.347 40.347 0 0 0-4.635-12.84 39.505 39.505 0 0 0-8.74-10.557 38.204 38.204 0 0 0-2.367-1.858 37.71 37.71 0 0 0-1.98-1.335c-.036-.023-.073-.049-.112-.072a37.077 37.077 0 0 0-1.982-1.154l-.208-.11a35.02 35.02 0 0 0-4.034-1.834c-.102-.038-.205-.078-.308-.115a31.854 31.854 0 0 0-1.986-.66c-.073-.023-.148-.04-.221-.063a30.675 30.675 0 0 0-1.848-.468c-.097-.02-.193-.045-.288-.066a29.098 29.098 0 0 0-4.273-.565 3.137 3.137 0 0 1-2.852-2.293 2.694 2.694 0 0 1-.1-.467 2.826 2.826 0 0 1-.027-.538 3.127 3.127 0 0 1 1.032-2.184 3.105 3.105 0 0 1 2.265-.795C46.886 9.6 62.205 29.356 64.565 47.823a3.119 3.119 0 0 1-.631 2.32zM9.928 62.617l13.02-45.796c.6.26 1.25.422 1.94.457 13.318.677 28.54 12.704 30.963 31.657.078.608.263 1.178.517 1.706L9.928 62.617zm38.486-47.78C45.96 12.91 37.09 6.601 25.463 6.01a5.605 5.605 0 0 0-4.07 1.435 5.618 5.618 0 0 0-1.855 3.914 5.617 5.617 0 0 0 1.313 3.896L7.04 63.824c-.095.35-.098.739.268 1.172l3.196 3.598a1.248 1.248 0 0 0 1.246.38l49.358-12.728c.015-.004.025-.016.04-.02.965.771 2.653 1.387 4.209 1.19a5.608 5.608 0 0 0 3.748-2.145 5.606 5.606 0 0 0 1.135-4.167c-1.606-12.564-9.967-27.162-21.827-36.267z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/plant-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 PlantPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Plant',
+  copyrightYear = '2021',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('h-13 w-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M14.432 12.509c-1.465 9.27.978 14.144 4.574 16.618 8.354 5.749 18.521-5.04 12.287-13.037-2.684-3.444-7.692-5.594-16.86-3.581"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M19.361 49.883h36.697v-4.558H19.361v4.558zm32.297 2.83l-1.653 17.12h-24.59l-1.685-17.45h19.199l8.764.056-.035.274zM43.48 11.962c2.045-2.972 5.564-4.466 10.492-4.466.991 0 2.056.078 3.16.198-2.198 1.658-7.975 6.378-13.046 13.646-2.041-2.351-2.95-5.973-.606-9.378zm14.884-2.067c.775 5.908-.442 10.162-3.645 12.659-2.978 2.322-6.297 1.944-8.731.415 4.711-6.821 10.118-11.344 12.376-13.074zm-1.146 32.93H38.081c.878-6.825 3.432-12.775 6.491-17.696.646.39 1.406.727 2.236 1 .477.171.966.312 1.469.411 1.494.351 3.033.527 4.262.527 2.014 0 4.127-.648 6.126-2.206 4.538-3.537 5.895-9.632 4.033-18.114a1.248 1.248 0 0 0-1.026-.967 83.38 83.38 0 0 0-3.722-.519c-7.872-.978-13.427.794-16.519 5.283-3.29 4.782-1.776 9.865 1.241 12.932-2.786 4.406-5.212 9.611-6.481 15.534-1.283-4.671-3.209-8.501-5.307-11.538-.557.653-1.272 1.252-1.976 1.741 2.782 4.097 4.633 8.655 5.56 13.612H18.111c-.69 0-1.25.56-1.25 1.25v7.058c0 .69.56 1.25 1.25 1.25h3.108l1.816 18.82c.038.389.262.704.567.906.314.306 1.261.89 3.926.89h26.86c.644 0 1.183-.489 1.244-1.13l1.829-18.937 3.095.117c.691 0 1.25-.56 1.25-1.25v-7.058c0-.463-.263-.851-.638-1.067-.923-.432-2.476-.849-3.95-.849z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/search-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 SearchPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Search',
+  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="M18.641 35.799l-.127-1.243c-.449-4.38.48-7.95 2.762-10.61 3.564-4.153 9.097-4.477 9.331-4.49l1.248-.062.126 2.497-1.246.062c-.104.007-4.743.32-7.576 3.639-1.808 2.117-2.534 5.047-2.158 8.708l.127 1.244-2.487.255z"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M61.276 68.744a4.509 4.509 0 0 1-3.209-1.329L41.79 51.138a1.248 1.248 0 0 0-1.452-.23 21.658 21.658 0 0 1-9.935 2.401C18.326 53.309 8.5 43.482 8.5 31.404 8.5 19.326 18.326 9.5 30.403 9.5c12.08 0 21.905 9.826 21.905 21.904 0 4.388-1.293 8.623-3.74 12.246a1.25 1.25 0 0 0 .152 1.583l15.764 15.764a4.506 4.506 0 0 1 1.33 3.209 4.506 4.506 0 0 1-1.33 3.209 4.505 4.505 0 0 1-3.208 1.329zM55 44.179a24.3 24.3 0 0 0 3.606-12.775C58.606 17.035 47.01 7 30.403 7 16.947 7 6 17.947 6 31.404s10.947 24.405 24.403 24.405c3.567 0 7.011-.764 10.25-2.273l15.646 15.647a6.976 6.976 0 0 0 3.897 1.97c1.516.191 3.573.153 5.016.083 1.344-.148 3.31-.523 4.838-2.053a6.99 6.99 0 0 0 2.062-4.977 6.99 6.99 0 0 0-2.062-4.977L55 44.179z"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M30.305 47.243c-8.68 0-15.74-7.06-15.74-15.739 0-8.679 7.06-15.74 15.74-15.74 8.679 0 15.739 7.061 15.739 15.74 0 8.678-7.06 15.74-15.74 15.74m0-33.98c-10.056 0-18.238 8.182-18.238 18.24 0 10.057 8.182 18.24 18.239 18.24s18.239-8.183 18.239-18.24c0-10.058-8.182-18.24-18.24-18.24"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/informative/secure-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 SecurePictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Secure',
+  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.115 40.343a3.115 3.115 0 1 0-4.792 2.622v2.649a1.677 1.677 0 0 0 3.355 0v-2.65a3.108 3.108 0 0 0 1.437-2.621"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M31.061 30.879c0-3.461 2.664-6.277 5.938-6.277 3.276 0 5.94 2.816 5.94 6.277v.786H31.062v-.786zm15.297 3.286v11.887a4.308 4.308 0 0 1-4.302 4.303h-10.11a4.309 4.309 0 0 1-4.304-4.303V34.165h18.716zm-17.796-2.5h-3.42v14.387a6.81 6.81 0 0 0 6.803 6.803h10.11a6.81 6.81 0 0 0 6.803-6.803V31.665H45.44v-.786c0-4.84-3.786-8.777-8.44-8.777s-8.439 3.937-8.439 8.777v.786z"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M61.126 35.491c0 14.786-10.432 28.462-24.312 31.944C22.932 63.953 12.5 50.276 12.5 35.491V19.683l24.314-10.94 24.312 10.94v15.808zM57.92 15.498L36.814 6 10 18.066v17.425c0 7.274 2.358 14.296 6.345 20.138l.047.068a35.796 35.796 0 0 0 .823 1.154c3.159 4.25 7.204 7.795 11.837 10.246a42.523 42.523 0 0 0 10.97 4.326l.291.07.291-.07c15.12-3.625 26.521-18.435 26.521-34.449V19.551l-9.205-4.053z"
+        />
+      </g>
+    </Pictogram>
+  );
+}