npm - @westpac/ui - Versions diffs - 0.44.0 → 0.46.0 - Mend

@westpac/ui 0.44.0 → 0.46.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1642) hide show

package/src/components/pictogram/components/football-pictogram.tsx ADDED Viewed

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

package/src/components/pictogram/components/fork-knife-pictogram.tsx ADDED Viewed

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

package/src/components/pictogram/components/generic-document-pictogram.tsx ADDED Viewed

@@ -0,0 +1,56 @@
+'use client';
+import { clsx } from 'clsx';
+import React from 'react';
+import { Pictogram } from '../pictogram.component.js';
+import { fill } from '../pictogram.styles.js';
+import { type PictogramProps } from '../pictogram.types.js';
+export function GenericDocumentPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Generic document',
+  copyrightYear = '2025',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('size-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, outline: true })}
+          d="M56.4719,68.4324 L52.9119,68.4324 L16.0879,68.4324 C14.1099,68.4324 12.4999,66.8234 12.4999,64.8444
+        L12.4999,9.5784 L56.4719,9.5784 L56.4719,63.3174 C56.6249,66.4534 57.6539,67.7374 59.4509,68.4324
+        L56.4719,68.4324 Z M58.9719,56.4784 L58.9719,6.9994 L9.9999,6.9994 L9.9999,64.7664 C9.9999,68.1234
+        12.7319,70.8544 16.0879,70.8544 L58.9719,70.8544 L58.9719,70.8444 L63.1169,70.8444 C65.4619,70.8444
+        67.3649,68.9424 67.3649,66.5964 L67.3649,56.4784 L58.9719,56.4784 Z"
+        />
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="18.655 18.872 50.317 18.872 50.317 15.871 18.655 15.871"
+        />
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="18.655 27.169 50.317 27.169 50.317 24.169 18.655 24.169"
+        />
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="18.655 35.467 50.317 35.467 50.317 32.467 18.655 32.467"
+        />
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="18.654 43.764 39.83 43.764 39.83 40.764 18.654 40.764"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/gift-pictogram.tsx ADDED Viewed

@@ -0,0 +1,40 @@
+'use client';
+import { clsx } from 'clsx';
+import React from 'react';
+import { Pictogram } from '../pictogram.component.js';
+import { fill } from '../pictogram.styles.js';
+import { type PictogramProps } from '../pictogram.types.js';
+export function GiftPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Gift',
+  copyrightYear = '2025',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('size-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, outline: true })}
+          d="M65.2891,34.4415 C65.2891,34.9575 64.9411,35.3935 64.5291,35.3935 L62.0211,35.3935 L62.0211,35.3975 L12.7851,35.3975 L12.7851,35.3935 L10.2601,35.3935 C9.8481,35.3935 9.5001,34.9575 9.5001,34.4415 L9.5001,22.3335 C9.5001,21.8175 9.8481,21.3815 10.2601,21.3815 L64.5291,21.3815 C64.9411,21.3815 65.2891,21.8175 65.2891,22.3335 L65.2891,34.4415 Z M58.3181,66.8645 L16.4881,66.8645 C14.4461,66.8645 12.7851,65.2025 12.7851,63.1605 L12.7851,37.8975 L62.0211,37.8975 L62.0211,63.1605 C62.0211,65.2025 60.3601,66.8645 58.3181,66.8645 L58.3181,66.8645 Z M71.1361,23.4815 C69.3581,20.6115 66.0021,19.2495 65.8841,19.2025 C65.4701,19.0015 65.0141,18.8815 64.5291,18.8815 L10.2601,18.8815 C8.4621,18.8815 7.0001,20.4295 7.0001,22.3335 L7.0001,34.4415 C7.0001,36.3445 8.4621,37.8935 10.2601,37.8935 L10.2851,37.8935 L10.2851,63.1605 C10.2851,64.1105 10.5061,65.0085 10.8901,65.8145 L10.8731,65.8115 C13.2311,71.0035 18.9751,72.4215 18.9751,72.4215 L18.9671,72.4135 C19.5201,72.5755 20.1041,72.6665 20.7091,72.6665 L62.5391,72.6665 C65.9601,72.6665 68.7421,69.8835 68.7421,66.4635 L68.7421,41.1815 C70.4771,41.1055 71.8691,39.5985 71.8691,37.7445 L71.8691,25.6355 C71.8691,24.8165 71.5871,24.0735 71.1361,23.4815 L71.1361,23.4815 Z"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M52.0859,13.0479 C51.7119,14.2179 50.5719,15.6199 48.4989,16.0409 L41.6659,17.4299 L44.1569,11.7469 C44.7569,10.3799 46.1429,9.3579 47.7739,9.0809 C48.0619,9.0319 48.3449,9.0069 48.6209,9.0069 C49.7589,9.0069 50.7879,9.4109 51.4759,10.1499 C52.4719,11.2199 52.2859,12.4239 52.0859,13.0479 L52.0859,13.0479 Z M26.4239,16.0409 C24.3509,15.6209 23.2119,14.2189 22.8369,13.0479 C22.6379,12.4249 22.4519,11.2199 23.4479,10.1499 C24.1339,9.4109 25.1639,9.0069 26.3019,9.0069 C26.5789,9.0069 26.8619,9.0319 27.1489,9.0809 C28.7809,9.3579 30.1669,10.3799 30.7659,11.7469 L33.2569,17.4299 L26.4239,16.0409 Z M54.4009,7.4179 C52.6279,5.5089 49.9049,4.6539 47.1059,5.1289 C44.1179,5.6359 41.6469,7.5079 40.4949,10.1339 L37.4609,17.0539 L34.4279,10.1339 C33.2769,7.5079 30.8059,5.6359 27.8169,5.1289 C25.0229,4.6539 22.2949,5.5089 20.5209,7.4179 C18.8039,9.2639 18.2459,11.8269 19.0279,14.2719 C19.9479,17.1459 22.4779,19.3289 25.6289,19.9689 L35.1759,21.9089 L35.1759,66.8639 L39.6309,66.8639 L39.6309,21.9329 L49.2939,19.9689 C52.4459,19.3289 54.9759,17.1459 55.8959,14.2709 C56.6779,11.8269 56.1189,9.2639 54.4009,7.4179 L54.4009,7.4179 Z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/globe-australia-pictogram.tsx ADDED Viewed

@@ -0,0 +1,44 @@
+'use client';
+import { clsx } from 'clsx';
+import React from 'react';
+import { Pictogram } from '../pictogram.component.js';
+import { fill } from '../pictogram.styles.js';
+import { type PictogramProps } from '../pictogram.types.js';
+export function GlobeAustraliaPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Globe showing Australia',
+  copyrightYear = '2021',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('size-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, outline: true })}
+          d="M38.718 5.9c11.398 0 21.429 5.947 27.17 14.895a32.104 32.104 0 0 1 6.271 19.088c0 17.792-14.474 32.267-32.266 32.267-11.404 0-21.437-5.95-27.177-14.903A32.093 32.093 0 0 1 6.45 38.168C6.45 20.375 20.926 5.9 38.718 5.9zm0 2.502a29.95 29.95 0 0 0-3.445.198c1.258 2.395.558 3.37-2.097 2.926-4.379-.733 1.43 5.243-4.882 5.48-6.312.238-3.876 9.16-7.503 9.16-2.343 0-4.392-1.828-6.148-5.485A29.605 29.605 0 0 0 8.95 38.169c0 12.215 7.397 22.736 17.946 27.32.832-.017 1.655.05 1.855.17.836.506.08-3.023 1.48-3.023 1.398 0 8.62-2.14 10.668-1.07s6.245 3.527 4.557 3.81c-1.506.253-2.599.617-.363 1.873 13.36-2.926 23.393-14.854 23.393-29.08 0-16.414-13.355-29.767-29.768-29.767z"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M48.413 58.1c-1.043.698-3.175-.013-4.258-1.791-1.082-1.779-.787-2.767-1.378-3.162-.59-.395-.393-.395-.984 0-.59.395-.984.296-1.87-.593-.886-.889-1.575-1.284-2.756-1.284-1.18 0-1.574-.297-3.149.494-1.575.79-2.165 2.075-3.15 2.075-.984 0-2.165-.1-2.854.395-.689.494-.196.79-1.18.79-.985 0-1.87-1.284-1.674-2.667.197-1.384-1.28-3.26-1.968-4.15-.69-.89-1.87-3.853.197-5.533 2.066-1.68 4.822-1.976 5.314-2.865.492-.89.492.24.69-1.482.196-1.723 1.476-.89 1.968-1.878.492-.988 1.574-2.569 2.263-2.173.69.395 1.181 1.086 1.575.889.394-.198.394-.395.689-.89.295-.493 1.083-1.58 2.559-1.778 1.404-.188 2.362-.197 3.392.254 1.03.451.446.734-.243 1.722-.689.988.197 1.581.886 1.779.69.197 2.362 2.173 3.051 1.778.69-.395 1.476-1.58 1.476-2.47 0-.89.394-3.162.394-3.458 0-.296.492-1.087 1.181 1.482.69 2.569 1.224 1.684 1.673 2.668.45.984.492.988.492 2.075 0 1.086 2.166 3.853 2.658 4.347.492.494 3.445 4.545 2.46 6.719-.984 2.173-2.46 4.15-3.444 6.125-.985 1.976-2.967 1.884-4.01 2.582zm.399 2.255c.487-.232.88.163.684.537-.197.374-.534 1.034-.684 1.034-.15 0-.329.13-.329.42s-.416.292-.587.146c-.171-.146-.571-1.16-.477-1.474.048-.16-.377-.585-.128-.858.25-.274 1.033.427 1.52.195z"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M31.202 21.84c-1.642-1.098-6.242 2.463-6.242 4.27 0 1.807 2.331 3.4 3.326 2.629.994-.77 4.56-5.803 2.916-6.9zm-1.684 11.498c.802-.555-5.582-1.86-7.97-4.427-1.858-1.998-1.886-2.01-2.928-1.288-.96.664 3.128 7.61 10.898 5.715zm23.128-8.967c3.08 0 2.167 4.23 1.844 4.579-.323.35-5.177.657-6.326 0-1.15-.657-1.65-2.772-2.978-2.772-1.329 0-6.158-2.359-7.207-4.107-1.05-1.748 11.588 2.3 14.667 2.3zm9.919 25.345c-.01.888-.172 2.876-1.309 3.188-.794.217.145 1.72.549 1.296.744-.781 1.842-1.08 1.405-3.157-.438-2.077-.641-1.758-.645-1.327zM60.01 53.83c-.297.304-.774.902-1.08 1.027-.57.233-1.54.679-2.004.679-.464 0-1.009.543-1.316.908-.307.366.094.9.473.9.38 0 1.632-.124 1.732-.687.1-.563.85-.894 1.116-.894.266 0 1.15-.976 1.491-1.185.342-.21-.341-.823-.413-.749zM32.48 25.485c.343-1.079 1.48.915 2.116 1.701.636.787 0 .787-1.484.787-.884 0-1.268-.128-1.46-.178-.51-.132.484-1.232.828-2.31z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/globe-pictogram.tsx ADDED Viewed

@@ -0,0 +1,39 @@
+'use client';
+import { clsx } from 'clsx';
+import React from 'react';
+import { Pictogram } from '../pictogram.component.js';
+import { fill } from '../pictogram.styles.js';
+import { type PictogramProps } from '../pictogram.types.js';
+export function GlobePictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Globe',
+  copyrightYear = '2025',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('size-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, outline: true })}
+          d="M38.718,5.9 C50.116,5.9 60.147,11.847 65.888,20.795 C69.825,26.145 72.159,32.746 72.159,39.883 C72.159,57.675 57.685,72.15 39.893,72.15 C28.489,72.15 18.456,66.2 12.716,57.247 C8.781,51.898 6.45,45.301 6.45,38.168 C6.45,20.375 20.926,5.9 38.718,5.9 Z M16.5614634,57.9938036 C20.6925263,62.5970189 26.2335858,65.9102975 32.4974651,67.2465916 C29.9808597,65.2070673 27.7849133,62.005381 26.0941961,57.9940614 L26.0941961,57.9940614 Z M38.3235635,58.0121042 L28.9756594,58.0122002 C31.4175656,63.3711564 34.7828573,66.8103685 38.3231156,67.1930004 L38.3231156,67.1930004 L38.3235635,58.0121042 Z M60.870741,57.9938036 L51.7469883,57.9940614 L51.5374228,58.4812331 C49.9115825,62.184817 47.847015,65.1620083 45.4964799,67.1210364 L45.4964799,67.1210364 L45.8607848,67.0335907 C51.7445761,65.5785992 56.9444856,62.3688033 60.870741,57.9938036 L60.870741,57.9938036 Z M48.988652,58.0122002 L40.9565635,58.0121042 L40.957769,66.9088972 C44.0075033,65.9215268 46.8516663,62.7019841 48.988652,58.0122002 L48.988652,58.0122002 Z M38.3235635,40.5671042 L25.1972837,40.5673091 C25.4020401,46.1097033 26.3939143,51.1816895 27.9071403,55.3795735 L27.9071403,55.3795735 L38.3235635,55.3791042 L38.3235635,40.5671042 Z M52.7670277,40.5673091 L40.9565635,40.5671042 L40.9565635,55.3791042 L50.057171,55.3795735 C51.570397,51.1816895 52.5622713,46.1097033 52.7670277,40.5673091 L52.7670277,40.5673091 Z M68.3870049,40.5480997 L55.3364835,40.5480997 L55.3028102,41.3220291 C55.0457653,46.4637417 54.1402299,51.2440782 52.7442123,55.3612428 L52.7442123,55.3612428 L62.9788772,55.3608546 C66.0048326,51.1119282 67.9439851,46.0379646 68.3870049,40.5480997 L68.3870049,40.5480997 Z M22.5047009,40.5480997 L9.0451995,40.5480997 C9.48821933,46.0379646 11.4273718,51.1119282 14.4533272,55.3608546 L14.4533272,55.3608546 L25.0969721,55.3612428 L24.8912678,54.738732 C23.5446934,50.5560048 22.6965017,45.7251954 22.5047009,40.5480997 L22.5047009,40.5480997 Z M27.2541286,23.4502386 C25.9781795,27.6646426 25.2051018,32.6065952 25.1599917,37.9341786 L25.1599917,37.9341786 L38.3235635,37.9341786 L38.3235635,23.4511042 Z M50.7101828,23.4502386 L40.9565635,23.4511042 L40.9565635,37.9341786 L52.8043196,37.9341786 C52.7592095,32.6065952 51.9861318,27.6646426 50.7101828,23.4502386 L50.7101828,23.4502386 Z M64.5948863,23.4327671 L53.4253787,23.4327671 L53.6131446,24.120035 C54.7138465,28.2733398 55.3460076,32.956496 55.3768528,37.9159028 L55.3768528,37.9159028 L68.4833237,37.9152377 C68.4455646,32.6540196 67.035822,27.713016 64.5948863,23.4327671 L64.5948863,23.4327671 Z M24.4158057,23.4327671 L12.8373181,23.4327671 C10.4388768,27.6385023 9.03603693,32.4821834 8.9520984,37.640752 L8.9520984,37.640752 L8.95,37.915 L22.464,37.9154923 L22.4777356,36.9613201 C22.5845216,32.0820593 23.27364,27.49023 24.4158057,23.4327671 L24.4158057,23.4327671 Z M38.3231156,9.66324343 C34.365624,10.09097 30.6267702,14.3381912 28.151996,20.8168977 L28.151996,20.8168977 L38.3235635,20.8181042 Z M40.957769,9.94734668 L40.9565635,20.8181042 L49.8123153,20.8168977 C47.6139858,15.0618952 44.4182115,11.0676864 40.957769,9.94734668 L40.957769,9.94734668 Z M33.0803332,8.9 L32.4661385,9.02531264 C25.1203664,10.6009727 18.7712503,14.8953032 14.5279082,20.7997247 L14.5279082,20.7997247 L25.2464428,20.7997247 L25.4258852,20.2996099 C27.3054621,15.1677614 29.9670146,11.157658 33.0803332,8.9 L33.0803332,8.9 Z M44.9170975,9.01505678 C48.063155,11.3671885 50.7376335,15.5155639 52.5947416,20.7997247 L52.5947416,20.7997247 L62.9042962,20.7997247 C58.6516219,14.8823179 52.2839012,10.5820919 44.9170975,9.01505678 Z"
+        />
+        <circle cx="51.752" cy="22.128" r="3.95" className={fill({ mode, highlight: true })} />
+        <circle cx="50.752" cy="56.689" r="3.95" className={fill({ mode, highlight: true })} />
+        <circle cx="23.445" cy="38.915" r="3.95" className={fill({ mode, highlight: true })} />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/graph-decreasing-pictogram.tsx ADDED Viewed

@@ -0,0 +1,40 @@
+'use client';
+import { clsx } from 'clsx';
+import React from 'react';
+import { Pictogram } from '../pictogram.component.js';
+import { fill } from '../pictogram.styles.js';
+import { type PictogramProps } from '../pictogram.types.js';
+export function GraphDecreasingPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Graph showing decreasing trend',
+  copyrightYear = '2025',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('size-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M8 7.456l18.612 18.528a2.009 2.009 0 0 0 2.787.046l10.786-10.057a.84.84 0 0 1 1.159.015l21.924 21.444H50.443l-.045 3.691H67.75c.955 0 1.728-.773 1.728-1.727V22.224h-3.64l.038 12.912-23.865-23.343a1.732 1.732 0 0 0-2.394-.029L28.496 22.132a.615.615 0 0 1-.855-.015L10.446 5 8 7.456z"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M51.614 68.985h11.055V58.86H51.614v10.124zm-13.554 0h11.055V51.01H38.06v17.975zm-13.555 0H35.56V42.603H24.505v26.382zm-13.554 0h11.054V34.754H10.951v34.23zm52.52-12.624H51.615v-6.152a1.7 1.7 0 0 0-1.699-1.7H38.06v-6.708a1.7 1.7 0 0 0-1.698-1.698H24.505v-6.151a1.7 1.7 0 0 0-1.697-1.698H10.149a1.7 1.7 0 0 0-1.698 1.698v37.533c.002.163.151.261.358.388 1.08.663 4.482 1.383 5.14 1.383h55.483V61.688c0-1.828-3.117-4.855-5.245-5.258a4.242 4.242 0 0 0-.716-.07z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/graph-increasing-pictogram.tsx ADDED Viewed

@@ -0,0 +1,40 @@
+'use client';
+import { clsx } from 'clsx';
+import React from 'react';
+import { Pictogram } from '../pictogram.component.js';
+import { fill } from '../pictogram.styles.js';
+import { type PictogramProps } from '../pictogram.types.js';
+export function GraphIncreasingPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Graph showing increasing trend',
+  copyrightYear = '2021',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('size-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M8 37.667L26.612 19.14a2.009 2.009 0 0 1 2.787-.046L40.185 29.15a.84.84 0 0 0 1.159-.015L63.268 7.691H50.443l-.045-3.69H67.75c.955 0 1.728.772 1.728 1.726V22.9h-3.64l.038-12.912L42.012 33.33a1.732 1.732 0 0 1-2.394.03L28.496 22.99a.615.615 0 0 0-.855.015L10.446 40.123 8 37.667z"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M51.614 68.901h11.055v-34.23H51.614V68.9zm-13.554 0h11.055V42.52H38.06v26.382zm-13.554 0H35.56V50.926H24.506v17.975zm-13.555 0h11.055V58.777H10.951v10.124zm52.46-36.73c-.369-.008-4.568-.008-12.598 0-.938 0-1.698.76-1.698 1.697v6.151H37.258c-.938 0-1.698.76-1.698 1.698v6.71H23.703c-.937 0-1.697.76-1.697 1.697v6.153H10.149c-.938 0-1.698.76-1.698 1.698-.007 8.761-.007 13.229 0 13.403.01.262.196.333.52.493 1.19.585 4.026 1.132 4.593 1.132h55.411V35.47c0-.734-2.742-2.367-4.376-3.037-.448-.184-.635-.252-1.188-.263z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/gym-pictogram.tsx ADDED Viewed

@@ -0,0 +1,48 @@
+'use client';
+import { clsx } from 'clsx';
+import React from 'react';
+import { Pictogram } from '../pictogram.component.js';
+import { fill } from '../pictogram.styles.js';
+import { type PictogramProps } from '../pictogram.types.js';
+export function GymPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Gym',
+  copyrightYear = '2021',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('size-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="24.855 57.164 24.855 40.328 28.081 40.328 28.081 49.263 31.86 44.968 35.834 44.968 31.666 49.424 36.133 57.164 32.653 57.164 29.585 51.686 28.081 53.26 28.081 57.164"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M40.575 50.813c0 1.294.25 2.241.752 2.843.5.6 1.12.901 1.855.901.789 0 1.455-.308 1.998-.925.544-.615.816-1.529.816-2.738 0-1.264-.26-2.201-.781-2.813-.521-.614-1.18-.92-1.975-.92-.774 0-1.412.3-1.913.902-.501.601-.752 1.518-.752 2.75m-2.883 7.155l3.687.448c.06.428.203.724.425.885.306.23.788.344 1.447.344.842 0 1.474-.127 1.895-.379.283-.169.498-.44.643-.816.099-.267.149-.762.149-1.48v-1.782c-.965 1.319-2.182 1.976-3.652 1.976-1.638 0-2.936-.693-3.893-2.078-.751-1.094-1.126-2.459-1.126-4.088 0-2.045.493-3.606 1.476-4.686.984-1.08 2.207-1.62 3.669-1.62 1.509 0 2.753.663 3.733 1.986v-1.71h3.02v10.944c0 1.44-.118 2.516-.356 3.227-.237.712-.57 1.272-1 1.677-.428.405-1 .724-1.716.953-.716.23-1.621.346-2.716.346-2.067 0-3.533-.355-4.398-1.064-.866-.708-1.298-1.605-1.298-2.693 0-.106.004-.236.01-.39"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M46.712 18.294l-2.289 8.39a24.81 24.81 0 0 0-9.169-1.117 24.96 24.96 0 0 0-1.498.142l-2.023-7.415c-.187-.686-.076-1.386.297-1.872.133-.175.235-.229.251-.233h13.88c.02.006.121.058.255.233.372.488.483 1.188.296 1.872m-.548-4.604h-18.61c-.845 0-1.64.43-2.238 1.213-.843 1.103-1.112 2.617-.722 4.048l3.005 11.014 1.287-.488a22.267 22.267 0 0 1 6.525-1.413 22.296 22.296 0 0 1 9.42 1.41l1.289.491 3.004-11.012c.391-1.433.121-2.947-.722-4.048-.598-.784-1.393-1.215-2.238-1.215"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M46.069 69.847H27.637a7.157 7.157 0 0 1-5.151-2.202c-4.215-4.41-8.306-12.171-7.973-18.473a22.437 22.437 0 0 1 7.865-15.861l.607-.515-3.404-12.478c-.812-2.983-.213-6.184 1.605-8.565 1.58-2.067 3.898-3.253 6.362-3.253h18.61c2.464 0 4.782 1.186 6.362 3.253 1.818 2.38 2.418 5.582 1.605 8.565L50.718 32.81l.603.514a22.46 22.46 0 0 1 7.904 17.065c0 5.809-4.012 13.062-7.975 17.224a7.193 7.193 0 0 1-5.181 2.234zm12.208-37.898l2.994-10.974c1.016-3.73.257-7.744-2.031-10.74C57.185 7.545 54.142 6 50.892 6H27.554c-3.25 0-6.292 1.544-8.348 4.236-2.288 2.996-3.047 7.01-2.03 10.739l2.989 10.958a24.953 24.953 0 0 0-8.142 17.107c-.388 7.337 4.218 15.683 8.663 20.333a9.67 9.67 0 0 0 6.958 2.974h23.159a9.706 9.706 0 0 0 6.992-3.01c4.306-4.522 8.664-12.483 8.664-18.948a24.965 24.965 0 0 0-8.182-18.44z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/headset-pictogram.tsx ADDED Viewed

@@ -0,0 +1,40 @@
+'use client';
+import { clsx } from 'clsx';
+import React from 'react';
+import { Pictogram } from '../pictogram.component.js';
+import { fill } from '../pictogram.styles.js';
+import { type PictogramProps } from '../pictogram.types.js';
+export function HeadsetPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Headset',
+  copyrightYear = '2021',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('size-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, outline: true })}
+          d="M63.779 53.145c0 3.82-3.16 6.932-7.05 6.946a4.035 4.035 0 0 1-4.004-4.034V44.743c0-2.227 1.805-4.038 4.024-4.038h4.033v-6.786c0-12.833-10.588-23.272-23.602-23.272-13.014 0-23.603 10.44-23.603 23.272v6.786h5.066a4.035 4.035 0 0 1 4.024 4.038v11.314a4.034 4.034 0 0 1-4.024 4.034h-.986c-3.901 0-7.075-3.116-7.075-6.946V33.919c0-14.434 11.932-26.176 26.598-26.176 14.667 0 26.599 11.742 26.599 26.176v19.226zM36.673 5.166C20.817 5.436 8 18.226 8 33.92v19.226c0 4.982 3.891 9.078 8.83 9.494 1.729.132 4.203.344 6.534-.058a6.622 6.622 0 0 0 5.51-6.524V44.743c0-3.655-2.965-6.628-6.607-6.628h-2.484V33.92c0-10.803 8.466-19.683 19.209-20.592 10.744.909 19.208 9.79 19.208 20.592v4.196h-1.45c-3.643 0-6.607 2.973-6.607 6.628v11.314a6.624 6.624 0 0 0 5.525 6.526c2.138.327 3.74.279 5.533.053l.006-.001c4.914-.441 8.778-4.526 8.778-9.49V33.919c0-15.816-13.016-28.688-29.042-28.762l-4.27.01z"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M55.668 62.58a19.69 19.69 0 0 0 2.272.222c-.621 4.466-4.289 7.933-8.758 8.067l-.27.004h-4.284c-.477 1.186-1.579 2.04-2.88 2.118l-.197.006h-6.217c-1.838 0-3.334-1.542-3.334-3.435 0-1.834 1.398-3.337 3.152-3.435l.182-.005h6.217c1.32 0 2.462.797 3.001 1.95l.076.176h4.285c3.275 0 5.994-2.482 6.492-5.719.087.02.175.036.263.05z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/heart-pictogram.tsx ADDED Viewed

@@ -0,0 +1,40 @@
+'use client';
+import { clsx } from 'clsx';
+import React from 'react';
+import { Pictogram } from '../pictogram.component.js';
+import { fill } from '../pictogram.styles.js';
+import { type PictogramProps } from '../pictogram.types.js';
+export function HeartPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Heart',
+  copyrightYear = '2021',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('size-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, outline: true })}
+          d="M38.268 68.037C21.854 68.037 8.5 54.683 8.5 38.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 })}
+          d="M46.548 24c-3.304 0-7.483 1.753-8.548 8.59-1.065-6.837-5.244-8.59-8.55-8.59C23.599 24 19 28.484 19 34.191c0 7.004 6.46 12.71 16.246 21.364l2.751 2.44V58l.003-.003.003.003v-.004l2.75-2.441C50.539 46.9 57 41.195 57 34.19 57 28.484 52.402 24 46.548 24"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/house-pictogram.tsx ADDED Viewed

@@ -0,0 +1,40 @@
+'use client';
+import { clsx } from 'clsx';
+import React from 'react';
+import { Pictogram } from '../pictogram.component.js';
+import { fill } from '../pictogram.styles.js';
+import { type PictogramProps } from '../pictogram.types.js';
+export function HousePictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'House',
+  copyrightYear = '2025',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('size-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="26.843 67.963 41.563 73.985 41.563 51.654 26.829 45.602"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M57.4766,36.557 L57.4766,63.173 C57.4766,64.443 56.4466,65.473 55.1766,65.473 L47.2976,65.474 L47.2976,43.103 L24.3536,43.103 L24.3536,65.483 L14.1716,65.485 L14.1716,36.557 L7.4076,36.557 L35.8246,10.397 L64.2446,36.557 L57.4766,36.557 Z M41.1836,7 L35.8246,7 L0.9996,39.057 L11.6716,39.057 L11.6716,67.986 L17.0306,67.985 L17.0306,67.986 L22.5286,67.983 L26.8536,67.982 L26.8536,45.603 L44.7976,45.603 L44.7976,67.975 L51.1566,67.974 L51.1566,67.975 L58.8446,67.974 C62.4296,67.973 65.3356,65.066 65.3356,61.48 L65.3356,39.057 L70.6516,39.057 L76.0106,39.057 L41.1836,7 Z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/light-bulb-pictogram.tsx ADDED Viewed

@@ -0,0 +1,61 @@
+'use client';
+import { clsx } from 'clsx';
+import React from 'react';
+import { Pictogram } from '../pictogram.component.js';
+import { fill } from '../pictogram.styles.js';
+import { type PictogramProps } from '../pictogram.types.js';
+export function LightBulbPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Light bulb',
+  copyrightYear = '2021',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('size-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="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/loop-pictogram.tsx ADDED Viewed

@@ -0,0 +1,41 @@
+'use client';
+import { clsx } from 'clsx';
+import React from 'react';
+import { Pictogram } from '../pictogram.component.js';
+import { fill } from '../pictogram.styles.js';
+import { type PictogramProps } from '../pictogram.types.js';
+export function LoopPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Loop',
+  copyrightYear = '2021',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('size-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, outline: true })}
+          d="M38.268 68.037C21.854 68.037 8.5 54.683 8.5 38.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>
+  );
+}