npm - @westpac/ui - Versions diffs - 0.2.0 → 0.3.0 - Mend

@westpac/ui 0.2.0 → 0.3.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 (696) hide show

package/src/components/symbol/components/symbols/mastercard-accepted-symbol.tsx ADDED Viewed

@@ -0,0 +1,44 @@
+import { clsx } from 'clsx';
+import React from 'react';
+import { Symbol } from '../../symbol.component.js';
+import { type SymbolProps } from '../../symbol.types.js';
+export const MastercardAcceptedSymbol = ({
+  'aria-label': ariaLabel = 'Mastercard Accepted',
+  copyrightYear = '',
+  viewBoxWidth = 80,
+  viewBoxHeight = 50,
+  className,
+  ...props
+}: SymbolProps) => (
+  <Symbol
+    className={clsx('h-[50px] w-[80px]', className)}
+    aria-label={ariaLabel}
+    copyrightYear={copyrightYear}
+    viewBoxWidth={viewBoxWidth}
+    viewBoxHeight={viewBoxHeight}
+    {...props}
+  >
+    <g fill="none">
+      <path fill="#000" d="M0 50h80V0H0" />
+      <path
+        d="M66.88 31.6v-.66h-.173l-.2.453-.197-.454h-.173v.66h.122v-.5l.185.43h.127l.186-.43v.5h.122zm-1.094 0v-.55h.22v-.11h-.562v.11h.22v.55h.122z"
+        fill="#F89E1B"
+      />
+      <path
+        d="M61.085 44.387c0 .853.54 1.535 1.413 1.535.834 0 1.383-.654 1.383-1.535 0-.882-.548-1.536-1.382-1.536-.872 0-1.413.684-1.413 1.537zm3.67 0v2.265h-.912v-.55c-.312.408-.824.664-1.47.664-1.27 0-2.236-.995-2.236-2.38 0-1.384.967-2.378 2.237-2.378.645 0 1.157.256 1.47.663V40.3h.91v4.087zm-12.817 0c0 .853.54 1.535 1.413 1.535.835 0 1.384-.654 1.384-1.535 0-.882-.55-1.536-1.383-1.536-.872 0-1.412.684-1.412 1.537zm3.67 0v2.265h-.912v-.55c-.312.408-.824.664-1.47.664-1.27 0-2.236-.995-2.236-2.38 0-1.384.967-2.378 2.237-2.378.645 0 1.157.256 1.47.663v-.548h.91v2.265zm10.71 1.925v.112h.103c.024 0 .043-.005.057-.014.014-.01.02-.023.02-.042 0-.02-.006-.033-.02-.042-.014-.01-.033-.014-.056-.014h-.1zm.104-.078c.054 0 .095.012.124.036.03.024.043.056.043.098 0 .034-.012.063-.035.085-.023.022-.056.036-.1.04l.138.16h-.107l-.127-.158h-.04v.157h-.09v-.418h.192zm-.026.56c.048 0 .093-.008.135-.026.043-.02.08-.044.11-.075.033-.032.057-.07.076-.11.018-.044.027-.09.027-.138 0-.05-.01-.094-.027-.137-.02-.043-.043-.08-.075-.11-.03-.033-.067-.058-.11-.076-.04-.018-.086-.027-.134-.027-.05 0-.096.01-.138.027-.044.018-.08.043-.113.075-.03.03-.056.068-.074.11-.017.044-.026.09-.026.138 0 .048.01.094.027.137.02.042.044.08.075.11.032.032.07.057.113.076.042.018.088.027.138.027zm0-.8c.063 0 .122.013.178.037.055.023.103.056.145.097.04.04.073.088.097.143.024.055.037.113.037.175 0 .062-.013.12-.037.174-.024.053-.057.1-.098.142-.043.04-.09.073-.146.097-.056.022-.115.035-.178.035-.065 0-.126-.013-.182-.036-.056-.025-.105-.057-.146-.098-.04-.04-.074-.09-.097-.143-.023-.055-.035-.113-.035-.175 0-.062.012-.12.036-.175.024-.055.057-.102.098-.143.04-.04.09-.074.146-.096.056-.023.117-.035.182-.035zm-7.302-3.986c-.568 0-.976.265-1.232.663v-.548h-.9v4.53h.91v-2.55c0-.75.36-1.232 1.005-1.232.2 0 .407.028.616.114l.303-.853c-.218-.084-.502-.122-.702-.122zm-34.976 2.38c0 .852.54 1.534 1.412 1.534.835 0 1.384-.654 1.384-1.535 0-.882-.55-1.536-1.384-1.536-.872 0-1.412.684-1.412 1.537zm3.668 0v2.264h-.91v-.55c-.313.408-.824.664-1.47.664-1.27 0-2.236-.995-2.236-2.38 0-1.384.967-2.378 2.237-2.378.645 0 1.156.256 1.47.663v-.548h.91v2.265zm12.266-1.537c-.73 0-1.166.484-1.25 1.148h2.444c-.066-.71-.52-1.147-1.194-1.147zm.02-.842c1.27 0 2.122.957 2.13 2.37 0 .132-.008.255-.018.378H38.8c.115.815.76 1.176 1.394 1.176.455 0 .938-.17 1.317-.474l.485.673c-.55.465-1.176.636-1.858.636-1.355 0-2.304-.948-2.304-2.39 0-1.41.91-2.368 2.238-2.368zm6.368 2.38c0 1.373.92 2.378 2.38 2.378.682 0 1.137-.152 1.63-.54l-.474-.71c-.37.264-.758.406-1.185.406-.786-.01-1.402-.625-1.402-1.535 0-.91.616-1.527 1.403-1.536.428 0 .816.143 1.186.41l.474-.712c-.493-.39-.948-.54-1.63-.54-1.46 0-2.38 1.004-2.38 2.38zM32.696 42.48c-.474-.314-1.128-.474-1.848-.474-1.147 0-1.85.54-1.85 1.44 0 .74.513 1.185 1.527 1.327l.465.067c.54.075.834.265.834.52 0 .352-.398.58-1.07.58-.712 0-1.177-.22-1.508-.475l-.464.71c.672.494 1.478.59 1.962.59 1.308 0 2.028-.608 2.028-1.47 0-.797-.55-1.204-1.545-1.346l-.464-.066c-.427-.057-.806-.19-.806-.493 0-.33.36-.558.9-.558.578 0 1.138.218 1.412.39l.426-.74zm12.71-.474c-.567 0-.975.265-1.23.663v-.548h-.902v4.53h.91v-2.55c0-.75.36-1.232 1.005-1.232.198 0 .407.028.615.114l.303-.853c-.217-.084-.5-.122-.7-.122zM37 42.122h-1.65v-1.375h-.92v1.375h-.957v.824h.958v2.142c0 1.052.37 1.678 1.536 1.678.427 0 .92-.133 1.233-.35l-.286-.807c-.294.17-.616.255-.872.255-.493 0-.692-.303-.692-.758v-2.16H37v-.825zm-14.768 4.53V43.8c0-1.072-.645-1.783-1.744-1.792-.58-.01-1.176.17-1.593.805-.313-.502-.806-.805-1.498-.805-.483 0-.995.132-1.365.663v-.548h-.91v4.53h.92v-2.597c0-.787.474-1.204 1.147-1.204.653 0 1.023.427 1.023 1.195v2.607h.92v-2.597c0-.787.492-1.204 1.146-1.204.672 0 1.032.427 1.032 1.195v2.607h.92z"
+        fill="#FFF"
+      />
+      <path fill="#FF5F00" d="M31.637 34.438h16.405V7.642H31.637" />
+      <path
+        d="M33.33 21.04c0-5.436 2.547-10.277 6.51-13.398C36.94 5.36 33.284 4 29.308 4c-9.41 0-17.04 7.63-17.04 17.04 0 9.412 7.63 17.042 17.04 17.042 3.976 0 7.633-1.362 10.532-3.644-3.963-3.12-6.51-7.962-6.51-13.398"
+        fill="#EC001B"
+      />
+      <path
+        d="M67.412 21.04c0 9.412-7.63 17.042-17.04 17.042-3.976 0-7.633-1.362-10.532-3.644 3.964-3.12 6.51-7.962 6.51-13.398s-2.546-10.277-6.51-13.398C42.74 5.36 46.396 4 50.37 4c9.412 0 17.042 7.63 17.042 17.04"
+        fill="#F89E1B"
+      />
+    </g>
+  </Symbol>
+);

package/src/components/symbol/components/symbols/mastercard-horizontal-symbol.tsx ADDED Viewed

@@ -0,0 +1,43 @@
+import { clsx } from 'clsx';
+import React from 'react';
+import { Symbol } from '../../symbol.component.js';
+import { type SymbolProps } from '../../symbol.types.js';
+export const MastercardHorizontalSymbol = ({
+  'aria-label': ariaLabel = 'Mastercard',
+  copyrightYear = '',
+  viewBoxWidth = 160,
+  viewBoxHeight = 28,
+  className,
+  ...props
+}: SymbolProps) => (
+  <Symbol
+    className={clsx('h-[28px] w-[160px]', className)}
+    aria-label={ariaLabel}
+    copyrightYear={copyrightYear}
+    viewBoxWidth={viewBoxWidth}
+    viewBoxHeight={viewBoxHeight}
+    {...props}
+  >
+    <g fill="none">
+      <path
+        d="M73.4 14.404c0-1.638 1.073-2.983 2.827-2.983 1.678 0 2.808 1.288 2.808 2.984s-1.13 2.983-2.808 2.983c-1.754 0-2.827-1.345-2.827-2.983zm7.547 0v-4.66h-2.03v1.13c-.642-.838-1.617-1.365-2.943-1.365-2.613 0-4.66 2.047-4.66 4.894s2.047 4.894 4.66 4.894c1.326 0 2.3-.527 2.944-1.365v1.13h2.03v-4.66zm68.478 0c0-1.638 1.072-2.983 2.827-2.983 1.677 0 2.808 1.288 2.808 2.984s-1.13 2.983-2.808 2.983c-1.755 0-2.827-1.345-2.827-2.983zm9.814 4.217v.148h.135c.03 0 .055-.006.074-.018.017-.013.026-.03.026-.056 0-.024-.01-.042-.027-.055-.02-.013-.045-.02-.075-.02h-.136zm.136-.1c.07 0 .125.014.163.046.037.03.056.074.056.128 0 .045-.015.083-.045.112-.03.03-.073.048-.13.055l.18.208h-.14l-.167-.206h-.054v.206h-.118v-.55h.254zm-.035.736c.065 0 .124-.012.18-.036.054-.024.103-.057.144-.098.042-.042.075-.09.098-.147.024-.056.036-.116.036-.18 0-.064-.012-.123-.036-.18-.023-.056-.056-.104-.098-.146-.04-.043-.09-.075-.145-.1-.056-.023-.115-.034-.18-.034-.064 0-.125.01-.18.035-.058.025-.107.057-.148.1-.042.04-.074.09-.098.145-.023.057-.035.116-.035.18 0 .064.01.124.034.18.024.056.056.105.098.147.04.04.09.074.147.098.055.024.116.036.18.036zm0-1.052c.084 0 .162.015.235.046.073.03.137.074.192.127.054.054.097.116.13.19.03.07.046.147.046.228 0 .082-.016.158-.047.23-.032.07-.075.133-.13.187-.054.054-.118.096-.19.128-.074.03-.152.047-.235.047-.084 0-.163-.016-.238-.047-.074-.032-.137-.074-.19-.128-.056-.054-.098-.116-.13-.187-.03-.072-.047-.148-.047-.23 0-.08.016-.158.047-.23.032-.072.074-.134.13-.188.053-.053.116-.096.19-.127.075-.03.154-.046.24-.046zm-2.37-3.8V6h-2.027v4.874c-.643-.838-1.618-1.365-2.944-1.365-2.614 0-4.66 2.047-4.66 4.894s2.046 4.894 4.66 4.894c1.325 0 2.3-.527 2.943-1.365v1.13h2.028v-4.66zm-50.87-3.08c1.306 0 2.144.818 2.36 2.26h-4.837c.215-1.345 1.033-2.26 2.476-2.26zm.04-1.815c-2.73 0-4.642 1.988-4.642 4.894 0 2.964 1.99 4.894 4.777 4.894 1.404 0 2.69-.35 3.822-1.307l-.995-1.5c-.78.624-1.774.975-2.71.975-1.306 0-2.496-.604-2.79-2.282h6.923c.02-.253.04-.506.04-.78-.02-2.905-1.814-4.894-4.426-4.894zm24.47 4.894c0-1.638 1.07-2.983 2.827-2.983 1.676 0 2.807 1.288 2.807 2.984s-1.13 2.983-2.807 2.983c-1.756 0-2.828-1.345-2.828-2.983zm7.545 0v-4.66h-2.028v1.13c-.643-.838-1.618-1.365-2.944-1.365-2.613 0-4.66 2.047-4.66 4.894s2.047 4.894 4.66 4.894c1.326 0 2.3-.527 2.944-1.365v1.13h2.028v-4.66zm-18.99 0c0 2.827 1.968 4.894 4.97 4.894 1.405 0 2.34-.312 3.354-1.112l-.975-1.638c-.76.547-1.56.84-2.438.84-1.618-.02-2.808-1.19-2.808-2.984s1.19-2.964 2.807-2.983c.878 0 1.677.293 2.438.84l.974-1.64c-1.015-.8-1.95-1.11-3.354-1.11-3.003 0-4.972 2.066-4.972 4.894zM145.29 9.51c-1.168 0-1.93.546-2.455 1.364v-1.13h-2.01v9.32h2.03v-5.226c0-1.54.662-2.398 1.988-2.398.41 0 .84.058 1.268.234l.625-1.91c-.45-.177-1.034-.255-1.444-.255zm-54.32.975c-.977-.644-2.322-.976-3.804-.976-2.36 0-3.88 1.13-3.88 2.983 0 1.52 1.13 2.457 3.217 2.75l.956.135c1.11.157 1.636.45 1.636.975 0 .722-.74 1.132-2.125 1.132-1.403 0-2.417-.45-3.1-.975l-.954 1.58c1.11.818 2.515 1.208 4.036 1.208 2.69 0 4.25-1.268 4.25-3.042 0-1.638-1.228-2.496-3.256-2.788l-.955-.137c-.877-.116-1.578-.29-1.578-.915 0-.683.662-1.092 1.774-1.092 1.19 0 2.34.45 2.905.8l.88-1.638zm26.146-.976c-1.17 0-1.93.546-2.457 1.364v-1.13h-2.01v9.32h2.028v-5.226c0-1.54.663-2.398 1.99-2.398.41 0 .838.058 1.267.234l.624-1.91c-.45-.177-1.034-.255-1.444-.255zm-17.295.233h-3.314V6.916H94.46v2.827h-1.893v1.853h1.892v4.25c0 2.165.837 3.452 3.236 3.452.877 0 1.89-.273 2.534-.722l-.584-1.735c-.605.352-1.268.528-1.794.528-1.014 0-1.346-.625-1.346-1.56v-4.212h3.315V9.743zm-30.3 9.32v-5.85c0-2.202-1.404-3.684-3.666-3.704-1.19-.02-2.418.35-3.275 1.657-.645-1.033-1.66-1.658-3.082-1.658-.995 0-1.97.292-2.73 1.384v-1.15H54.74v9.32h2.048v-5.167c0-1.618.897-2.476 2.28-2.476 1.346 0 2.03.878 2.03 2.457v5.187h2.046v-5.167c0-1.618.936-2.476 2.28-2.476 1.386 0 2.05.878 2.05 2.457v5.187h2.046z"
+        fill="#000"
+      />
+      <path
+        d="M44.912 22.7h-.1v-.413l-.154.355h-.104l-.153-.353v.41h-.1v-.545h.143l.163.374.163-.375h.142v.544zm-.9 0h-.1v-.452h-.18v-.092h.462v.092h-.182v.45z"
+        fill="#F89E1B"
+      />
+      <path fill="#FF5F00" d="M16.543 25.015h12.62V2.995h-12.62" />
+      <path
+        d="M22.65 2.993C20.27 1.118 17.266 0 14 0 6.267 0 0 6.268 0 14s6.268 14 14 14c3.265 0 6.27-1.118 8.65-2.993-3.255-2.564-5.346-6.54-5.346-11.007 0-4.466 2.09-8.443 5.347-11.007z"
+        fill="#EC001B"
+      />
+      <path
+        d="M45.31 14c0 7.732-6.267 14-13.998 14-3.266 0-6.27-1.118-8.652-2.993 3.256-2.564 5.347-6.54 5.347-11.007 0-4.466-2.09-8.443-5.347-11.007C25.04 1.118 28.046 0 31.312 0c7.73 0 14 6.268 14 14z"
+        fill="#F89E1B"
+      />
+    </g>
+  </Symbol>
+);

package/src/components/symbol/components/symbols/mastercard-symbol.tsx ADDED Viewed

@@ -0,0 +1,43 @@
+import { clsx } from 'clsx';
+import React from 'react';
+import { Symbol } from '../../symbol.component.js';
+import { type SymbolProps } from '../../symbol.types.js';
+export const MastercardSymbol = ({
+  'aria-label': ariaLabel = 'Mastercard',
+  copyrightYear = '',
+  viewBoxWidth = 80,
+  viewBoxHeight = 50,
+  className,
+  ...props
+}: SymbolProps) => (
+  <Symbol
+    className={clsx('h-[50px] w-[80px]', className)}
+    aria-label={ariaLabel}
+    copyrightYear={copyrightYear}
+    viewBoxWidth={viewBoxWidth}
+    viewBoxHeight={viewBoxHeight}
+    {...props}
+  >
+    <g fill="none">
+      <path
+        d="M66.88 31.6v-.66h-.173l-.2.453-.197-.454h-.173v.66h.122v-.5l.185.43h.127l.186-.43v.5h.122zm-1.094 0v-.55h.22v-.11h-.562v.11h.22v.55h.122z"
+        fill="#F89E1B"
+      />
+      <path
+        d="M61.085 44.387c0 .853.54 1.535 1.413 1.535.834 0 1.383-.654 1.383-1.535 0-.882-.548-1.536-1.382-1.536-.872 0-1.413.684-1.413 1.537zm3.67 0v2.265h-.912v-.55c-.312.408-.824.664-1.47.664-1.27 0-2.236-.995-2.236-2.38 0-1.384.967-2.378 2.237-2.378.645 0 1.157.256 1.47.663V40.3h.91v4.087zm-12.817 0c0 .853.54 1.535 1.413 1.535.835 0 1.384-.654 1.384-1.535 0-.882-.55-1.536-1.383-1.536-.872 0-1.412.684-1.412 1.537zm3.67 0v2.265h-.912v-.55c-.312.408-.824.664-1.47.664-1.27 0-2.236-.995-2.236-2.38 0-1.384.967-2.378 2.237-2.378.645 0 1.157.256 1.47.663v-.548h.91v2.265zm10.71 1.925v.112h.103c.024 0 .043-.005.057-.014.014-.01.02-.023.02-.042 0-.02-.006-.033-.02-.042-.014-.01-.033-.014-.056-.014h-.1zm.104-.078c.054 0 .095.012.124.036.03.024.043.056.043.098 0 .034-.012.063-.035.085-.023.022-.056.036-.1.04l.138.16h-.107l-.127-.158h-.04v.157h-.09v-.418h.192zm-.026.56c.048 0 .093-.008.135-.026.043-.02.08-.044.11-.075.033-.032.057-.07.076-.11.018-.044.027-.09.027-.138 0-.05-.01-.094-.027-.137-.02-.043-.043-.08-.075-.11-.03-.033-.067-.058-.11-.076-.04-.018-.086-.027-.134-.027-.05 0-.096.01-.138.027-.044.018-.08.043-.113.075-.03.03-.056.068-.074.11-.017.044-.026.09-.026.138 0 .048.01.094.027.137.02.042.044.08.075.11.032.032.07.057.113.076.042.018.088.027.138.027zm0-.8c.063 0 .122.013.178.037.055.023.103.056.145.097.04.04.073.088.097.143.024.055.037.113.037.175 0 .062-.013.12-.037.174-.024.053-.057.1-.098.142-.043.04-.09.073-.146.097-.056.022-.115.035-.178.035-.065 0-.126-.013-.182-.036-.056-.025-.105-.057-.146-.098-.04-.04-.074-.09-.097-.143-.023-.055-.035-.113-.035-.175 0-.062.012-.12.036-.175.024-.055.057-.102.098-.143.04-.04.09-.074.146-.096.056-.023.117-.035.182-.035zm-7.302-3.986c-.568 0-.976.265-1.232.663v-.548h-.9v4.53h.91v-2.55c0-.75.36-1.232 1.005-1.232.2 0 .407.028.616.114l.303-.853c-.218-.084-.502-.122-.702-.122zm-34.976 2.38c0 .852.54 1.534 1.412 1.534.835 0 1.384-.654 1.384-1.535 0-.882-.55-1.536-1.384-1.536-.872 0-1.412.684-1.412 1.537zm3.668 0v2.264h-.91v-.55c-.313.408-.824.664-1.47.664-1.27 0-2.236-.995-2.236-2.38 0-1.384.967-2.378 2.237-2.378.645 0 1.156.256 1.47.663v-.548h.91v2.265zm12.266-1.537c-.73 0-1.166.484-1.25 1.148h2.444c-.066-.71-.52-1.147-1.194-1.147zm.02-.842c1.27 0 2.122.957 2.13 2.37 0 .132-.008.255-.018.378H38.8c.115.815.76 1.176 1.394 1.176.455 0 .938-.17 1.317-.474l.485.673c-.55.465-1.176.636-1.858.636-1.355 0-2.304-.948-2.304-2.39 0-1.41.91-2.368 2.238-2.368zm6.368 2.38c0 1.373.92 2.378 2.38 2.378.682 0 1.137-.152 1.63-.54l-.474-.71c-.37.264-.758.406-1.185.406-.786-.01-1.402-.625-1.402-1.535 0-.91.616-1.527 1.403-1.536.428 0 .816.143 1.186.41l.474-.712c-.493-.39-.948-.54-1.63-.54-1.46 0-2.38 1.004-2.38 2.38zM32.696 42.48c-.474-.314-1.128-.474-1.848-.474-1.147 0-1.85.54-1.85 1.44 0 .74.513 1.185 1.527 1.327l.465.067c.54.075.834.265.834.52 0 .352-.398.58-1.07.58-.712 0-1.177-.22-1.508-.475l-.464.71c.672.494 1.478.59 1.962.59 1.308 0 2.028-.608 2.028-1.47 0-.797-.55-1.204-1.545-1.346l-.464-.066c-.427-.057-.806-.19-.806-.493 0-.33.36-.558.9-.558.578 0 1.138.218 1.412.39l.426-.74zm12.71-.474c-.567 0-.975.265-1.23.663v-.548h-.902v4.53h.91v-2.55c0-.75.36-1.232 1.005-1.232.198 0 .407.028.615.114l.303-.853c-.217-.084-.5-.122-.7-.122zM37 42.122h-1.65v-1.375h-.92v1.375h-.957v.824h.958v2.142c0 1.052.37 1.678 1.536 1.678.427 0 .92-.133 1.233-.35l-.286-.807c-.294.17-.616.255-.872.255-.493 0-.692-.303-.692-.758v-2.16H37v-.825zm-14.768 4.53V43.8c0-1.072-.645-1.783-1.744-1.792-.58-.01-1.176.17-1.593.805-.313-.502-.806-.805-1.498-.805-.483 0-.995.132-1.365.663v-.548h-.91v4.53h.92v-2.597c0-.787.474-1.204 1.147-1.204.653 0 1.023.427 1.023 1.195v2.607h.92v-2.597c0-.787.492-1.204 1.146-1.204.672 0 1.032.427 1.032 1.195v2.607h.92z"
+        fill="#000"
+      />
+      <path fill="#FF5F00" d="M31.637 34.438h16.405V7.642H31.637" />
+      <path
+        d="M33.33 21.04c0-5.436 2.547-10.277 6.51-13.398C36.94 5.36 33.284 4 29.308 4c-9.41 0-17.04 7.63-17.04 17.04 0 9.412 7.63 17.042 17.04 17.042 3.976 0 7.633-1.362 10.532-3.644-3.963-3.12-6.51-7.962-6.51-13.398"
+        fill="#EC001B"
+      />
+      <path
+        d="M67.412 21.04c0 9.412-7.63 17.042-17.04 17.042-3.976 0-7.633-1.362-10.532-3.644 3.964-3.12 6.51-7.962 6.51-13.398s-2.546-10.277-6.51-13.398C42.74 5.36 46.396 4 50.37 4c9.412 0 17.042 7.63 17.042 17.04"
+        fill="#F89E1B"
+      />
+    </g>
+  </Symbol>
+);

package/src/components/symbol/components/symbols/microsoft-store-symbol.tsx ADDED Viewed

@@ -0,0 +1,38 @@
+import { clsx } from 'clsx';
+import React from 'react';
+import { Symbol } from '../../symbol.component.js';
+import { type SymbolProps } from '../../symbol.types.js';
+export const MicrosoftStoreSymbol = ({
+  'aria-label': ariaLabel = 'Microsoft Store',
+  copyrightYear = '',
+  viewBoxWidth = 170,
+  viewBoxHeight = 62,
+  className,
+  ...props
+}: SymbolProps) => (
+  <Symbol
+    className={clsx('h-[62px] w-[170px]', className)}
+    aria-label={ariaLabel}
+    copyrightYear={copyrightYear}
+    viewBoxWidth={viewBoxWidth}
+    viewBoxHeight={viewBoxHeight}
+    {...props}
+  >
+    <g fillRule="nonzero" fill="none">
+      <path fill="#000" d="M.453.453h169.115v60.503H.453z" />
+      <path d="M.885.885h168.23v59.618H.885V.885zM0 61.39h170V0H0v61.389z" fill="#D2D2D2" />
+      <g>
+        <path fill="#F25022" d="M13.871 13.498H30.36v16.488H13.871z" />
+        <path fill="#7FBA00" d="M32.072 13.498H48.56v16.488H32.072z" />
+        <path fill="#00A4EF" d="M13.871 31.679H30.36v16.488H13.871z" />
+        <path fill="#FFB900" d="M32.072 31.679H48.56v16.488H32.072z" />
+        <path
+          d="M80.337 32.072c0-.492.177-.886.531-1.22a1.752 1.752 0 0 1 1.26-.492c.51 0 .944.177 1.278.512.335.334.512.747.512 1.2 0 .472-.177.885-.531 1.2-.355.334-.768.492-1.28.492-.51 0-.924-.158-1.278-.492-.315-.334-.492-.728-.492-1.2zm3.246 16.095h-2.931V35.672h2.931v12.495zM92.516 46.022c.433 0 .925-.098 1.456-.295a5.852 5.852 0 0 0 1.456-.807v2.735a5.71 5.71 0 0 1-1.594.61c-.59.138-1.259.216-1.967.216-1.83 0-3.325-.59-4.486-1.75-1.161-1.162-1.732-2.657-1.732-4.447 0-2.007.59-3.66 1.771-4.959 1.18-1.298 2.833-1.948 4.998-1.948.55 0 1.102.079 1.672.217.57.137 1.004.315 1.338.492v2.813a5.767 5.767 0 0 0-1.397-.767 4.153 4.153 0 0 0-1.456-.276c-1.16 0-2.085.374-2.813 1.122-.709.748-1.063 1.77-1.063 3.05 0 1.259.335 2.243 1.023 2.951.689.709 1.614 1.043 2.794 1.043M103.79 35.476c.237 0 .453.02.63.039.177.04.354.079.472.118v2.971c-.157-.118-.373-.216-.669-.315a3.4 3.4 0 0 0-1.082-.157c-.728 0-1.338.295-1.83.905-.492.61-.747 1.535-.747 2.814v6.316h-2.932V35.672h2.932v1.968h.039c.275-.689.669-1.22 1.22-1.594.55-.374 1.2-.57 1.968-.57M105.05 42.106c0-2.065.59-3.699 1.75-4.918 1.162-1.2 2.795-1.81 4.86-1.81 1.949 0 3.484.59 4.585 1.75 1.102 1.161 1.653 2.735 1.653 4.703 0 2.027-.59 3.64-1.751 4.84-1.16 1.2-2.755 1.79-4.762 1.79-1.928 0-3.482-.57-4.604-1.711-1.16-1.122-1.731-2.676-1.731-4.644m3.07-.098c0 1.299.294 2.302.885 2.99.59.69 1.436 1.024 2.538 1.024 1.062 0 1.889-.334 2.44-1.023.55-.689.846-1.712.846-3.07 0-1.338-.295-2.36-.866-3.05-.57-.688-1.397-1.023-2.44-1.023-1.082 0-1.908.355-2.518 1.083-.59.728-.886 1.731-.886 3.07M122.266 38.958c0 .414.138.748.394.984.275.236.865.531 1.77.905 1.181.472 2.007 1.004 2.48 1.594.472.59.708 1.299.708 2.125 0 1.18-.452 2.125-1.358 2.833-.905.709-2.125 1.063-3.66 1.063a8.02 8.02 0 0 1-1.711-.197 8.16 8.16 0 0 1-1.594-.472V44.9a6.851 6.851 0 0 0 1.732.886c.61.216 1.18.334 1.672.334.67 0 1.161-.098 1.476-.275.315-.177.472-.492.472-.945 0-.413-.157-.747-.492-1.023-.334-.275-.944-.61-1.87-.964-1.081-.452-1.849-.964-2.301-1.535-.453-.57-.689-1.298-.689-2.164 0-1.121.453-2.046 1.338-2.774.886-.728 2.046-1.082 3.483-1.082a8.4 8.4 0 0 1 1.475.137c.551.099 1.004.217 1.358.374v2.794a7.272 7.272 0 0 0-1.358-.669 4.773 4.773 0 0 0-1.534-.275c-.551 0-1.004.118-1.299.334a1.027 1.027 0 0 0-.492.905M128.917 42.106c0-2.065.59-3.699 1.75-4.918 1.162-1.2 2.795-1.81 4.86-1.81 1.949 0 3.483.59 4.585 1.75 1.102 1.161 1.653 2.735 1.653 4.703 0 2.027-.59 3.64-1.751 4.84-1.161 1.2-2.755 1.79-4.762 1.79-1.928 0-3.482-.57-4.604-1.711-1.16-1.122-1.731-2.676-1.731-4.644m3.05-.098c0 1.299.295 2.302.885 2.99.59.69 1.436 1.024 2.538 1.024 1.063 0 1.889-.334 2.44-1.023.55-.689.846-1.712.846-3.07 0-1.338-.295-2.36-.866-3.05-.57-.688-1.397-1.023-2.44-1.023-1.082 0-1.908.355-2.518 1.083-.59.728-.886 1.731-.886 3.07M151.465 38.093v6.414c0 1.338.315 2.322.925 2.99.61.67 1.554.984 2.794.984.413 0 .846-.039 1.279-.137.433-.099.748-.177.925-.295v-2.44a2.663 2.663 0 0 1-.63.295 2.051 2.051 0 0 1-.61.118c-.59 0-1.043-.157-1.318-.472-.276-.315-.413-.866-.413-1.633v-5.844h2.99v-2.4h-2.97v-3.7l-2.952.905v2.814h-4.388v-1.515c0-.748.158-1.318.492-1.712.335-.393.807-.57 1.417-.57.315 0 .59.039.846.118.236.078.413.157.511.216v-2.538a3.631 3.631 0 0 0-.728-.157 6.74 6.74 0 0 0-.944-.06c-1.338 0-2.44.414-3.286 1.26-.846.846-1.279 1.908-1.279 3.227v1.731h-2.085v2.4h2.085v10.094h2.971V38.093h4.368zM77.818 30.734v17.433h-3.03V34.512h-.04l-5.41 13.655h-2.007l-5.549-13.655h-.039v13.655H58.95V30.734h4.329l5.017 12.927h.079l5.293-12.927zM66.898 23.198c-1.043.59-2.223.885-3.542.885-1.003 0-1.888-.216-2.675-.669a4.438 4.438 0 0 1-1.791-1.869c-.413-.807-.63-1.712-.63-2.715 0-1.063.237-2.027.69-2.853a4.93 4.93 0 0 1 1.947-1.968c.846-.472 1.79-.708 2.853-.708a8.75 8.75 0 0 1 1.594.157c.531.099.964.236 1.298.394v1.574c-.787-.531-1.79-.787-3.01-.787-.728 0-1.377.177-1.968.531a3.585 3.585 0 0 0-1.357 1.456c-.315.63-.473 1.338-.473 2.125 0 1.24.335 2.224.984 2.952.65.728 1.555 1.082 2.696 1.082.728 0 1.377-.138 1.928-.433v-2.696H63.22v-1.298h3.68v4.84zM75.378 20.581h-5.155c.02.748.256 1.318.65 1.732.413.393.944.61 1.613.61.886 0 1.653-.256 2.322-.768v1.26a3.703 3.703 0 0 1-1.122.491 5.55 5.55 0 0 1-1.397.177c-1.121 0-2.007-.334-2.617-1.003-.61-.67-.924-1.614-.924-2.833 0-.748.157-1.437.452-2.027a3.398 3.398 0 0 1 1.26-1.417 3.33 3.33 0 0 1 1.79-.511c.964 0 1.731.314 2.282.944.551.63.827 1.495.827 2.617v.728h.02zm-1.436-1.122c0-.649-.157-1.14-.452-1.475-.296-.335-.709-.512-1.26-.512-.492 0-.924.177-1.298.531-.374.355-.59.847-.709 1.456h3.72zM80.966 23.828a1.627 1.627 0 0 1-.57.177c-.236.039-.453.059-.65.059-1.377 0-2.065-.768-2.065-2.283V17.65h-1.26v-1.18h1.26v-1.771l1.436-.453v2.204h1.83v1.18h-1.83v3.896c0 .492.079.847.236 1.043.157.197.433.295.846.295.276 0 .531-.078.748-.236v1.2h.02zM88.09 13.832a.818.818 0 0 1-.257.61.875.875 0 0 1-.649.256.875.875 0 0 1-.65-.256c-.176-.157-.255-.374-.255-.63 0-.255.098-.472.275-.63a.948.948 0 0 1 .63-.255c.236 0 .453.079.63.256a.85.85 0 0 1 .275.65zm-.198 10.074h-1.436V16.47h1.436v7.437zM94.13 23.828a1.627 1.627 0 0 1-.571.177c-.236.039-.453.059-.65.059-1.377 0-2.065-.768-2.065-2.283V17.65h-1.26v-1.18h1.26v-1.771l1.436-.453v2.204h1.83v1.18h-1.83v3.896c0 .492.079.847.236 1.043.158.197.433.295.846.295.276 0 .532-.078.748-.236v1.2h.02zM103.535 14.108a1.726 1.726 0 0 0-.787-.197c-.807 0-1.2.492-1.2 1.476v1.062h1.692v1.18h-1.693v6.258h-1.436v-6.238h-1.26v-1.18h1.26v-1.141c0-.787.217-1.417.67-1.89.452-.472 1.062-.708 1.849-.708.393 0 .688.04.924.138v1.24h-.02zM108.828 17.905c-.08-.059-.237-.118-.433-.177-.197-.04-.374-.079-.512-.079-.511 0-.925.236-1.24.689-.314.453-.472 1.043-.472 1.77v3.798h-1.436V16.47h1.436v1.495h.04c.157-.511.413-.905.747-1.2a1.704 1.704 0 0 1 1.161-.433c.295 0 .531.04.689.098v1.476h.02zM117.032 20.148c0 1.2-.354 2.165-1.042 2.873-.69.708-1.614 1.062-2.755 1.062-1.122 0-2.027-.354-2.696-1.042-.669-.69-1.003-1.614-1.003-2.775 0-1.24.354-2.203 1.043-2.912.688-.708 1.633-1.062 2.833-1.062 1.122 0 2.007.334 2.637 1.023.669.688.983 1.633.983 2.833m-1.475.04c0-.886-.197-1.555-.57-2.007-.394-.453-.926-.69-1.634-.69-.708 0-1.279.237-1.692.729-.413.472-.61 1.16-.61 2.027 0 .846.197 1.495.61 1.967s.964.708 1.692.708 1.279-.236 1.653-.688c.354-.492.55-1.161.55-2.046M129.88 23.906h-1.436v-4.23c0-.767-.118-1.318-.354-1.673-.236-.354-.649-.511-1.22-.511-.472 0-.885.216-1.2.65-.334.432-.492.963-.492 1.554v4.21h-1.436v-4.368c0-1.357-.531-2.046-1.574-2.046-.492 0-.905.216-1.22.63-.315.413-.472.944-.472 1.593v4.21h-1.437V16.47h1.437v1.16h.02c.53-.904 1.318-1.337 2.321-1.337.472 0 .905.137 1.299.393.374.256.649.63.826 1.102.295-.512.63-.885 1.043-1.141a2.836 2.836 0 0 1 1.436-.374c1.633 0 2.44 1.003 2.44 3.03v4.604h.02z"
+          fill="#FFF"
+        />
+      </g>
+    </g>
+  </Symbol>
+);

package/src/components/symbol/components/symbols/pay-id-symbol.tsx ADDED Viewed

@@ -0,0 +1,28 @@
+import { clsx } from 'clsx';
+import React from 'react';
+import { Symbol } from '../../symbol.component.js';
+import { type SymbolProps } from '../../symbol.types.js';
+export const PayIDSymbol = ({
+  'aria-label': ariaLabel = 'PayID',
+  copyrightYear = '',
+  viewBoxWidth = 90,
+  viewBoxHeight = 42,
+  className,
+  ...props
+}: SymbolProps) => (
+  <Symbol
+    className={clsx('h-[42px] w-[90px]', className)}
+    aria-label={ariaLabel}
+    copyrightYear={copyrightYear}
+    viewBoxWidth={viewBoxWidth}
+    viewBoxHeight={viewBoxHeight}
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M24.5166606 30.5143057h-.0866973c-.347945.6198226-.908422 1.1282592-1.6809358 1.5249788-.7730092.3963886-1.6518715.5951621-2.6372477.5951621-.560477 0-1.1447339-.0723264-1.753266-.2176413-.6085321-.1454804-1.1691744-.3872857-1.6807707-.7262434-.5120917-.3384612-.9373211-.7841708-1.2751926-1.3359701-.3382019-.5517994-.5071377-1.2343491-.5071377-2.0478145 0-1.0455059.2942753-1.8778391.8839817-2.4976617.5888807-.6194916 1.3473578-1.0938338 2.2749358-1.4231922.9272477-.3290273 1.956055-.5469996 3.0862569-.6535859 1.1302018-.1062553 2.2361284-.159714 3.3182752-.159714v-.3487226c0-.8712273-.3142569-1.5147174-.9417798-1.9314633-.6281835-.4159183-1.3765872-.6244568-2.2460367-.6244568-.7345321 0-1.4395046.1554108-2.115578.4647428-.6765688.3099941-1.2365505.6876804-1.6807707 1.1328934l-1.7968623-2.1204719c.792-.7355118 1.7048807-1.2874766 2.7386422-1.655398 1.0334312-.3675904 2.0815596-.5517994 3.1443853-.5517994 1.236055 0 2.2554495.1741131 3.0573578.5228357.8014128.3483916 1.4345504.8037006 1.8980917 1.3649338.4637064.5618953.7870459 1.1909862.9710092 1.887935.1833028.6971142.2752844 1.3942285.2752844 2.0913427v8.4810601h-3.2459449v-1.7717493zm-.0577982-4.5891699v.493872c0 1.1035987-.3093028 1.9749915-.9274129 2.6140129-.6186055.6390214-1.5263669.9584493-2.7241101.9584493-.2898165 0-.579633-.0289636-.8694495-.0870565-.2898165-.0582583-.5505688-.1547488-.782422-.2904643-.2318532-.1352189-.4202752-.3144627-.5651009-.5374002-.1448257-.2222755-.2173211-.4983407-.2173211-.8278646 0-.5226701.1737247-.9337888.5215046-1.2341835.3477798-.2998981.7825871-.532435 1.3040917-.6972797.5218349-.1641827 1.0913945-.270769 1.71-.3192624.6181101-.0481625 1.207156-.072823 1.767633-.072823h.7825872zm4.338-7.5807036h3.8541468l3.8835413 10.1367892h.0579633l3.4487339-10.1367892h3.6224587l-6.5785871 16.933322c-.2513395.6388559-.5215046 1.2052198-.8113211 1.6990918-.2898165.4937065-.6377615.9099559-1.0433395 1.2489136-.4057431.3384612-.8838165.5954932-1.4347156.7696062-.5505688.1742786-1.2124403.2613351-1.9849541.2613351-.2899817 0-.5847523-.0143991-.8839817-.0433628-.2997247-.0291291-.6040734-.0827533-.9128807-.1597139l.2898165-3.0206629c.2318532.0769606.4587523.1305848.6810275.159714.221945.0289636.4298533.0435282.6230643.0435282.3667706 0 .6760734-.0435282.9274128-.1305848.250844-.0873875.4637064-.2229375.6374312-.4068154.174055-.1843745.3284587-.4116152.4638716-.6825497.1349174-.2712655.2799082-.5910244.4346422-.9584493l.6955596-1.7717493-5.9698899-13.9416228zM0 11.7221779h6.69451376c1.17809174 0 2.24091743.1069173 3.18781652.3194279.94623852.2135037 1.75772472.5620608 2.43429362 1.0458369.6760733.4841071 1.1975779 1.1037642 1.564844 1.8588058.3667706.7552071.5505688 1.665494.5505688 2.7303641 0 1.1426583-.2126973 2.1011077-.6374312 2.875348-.4252294.7747369-.9997431 1.3991937-1.724367 1.8733704-.7244587.4748388-1.5697981.8180997-2.53568804 1.0309413-.96638532.2133381-1.99023853.3197589-3.07188991.3197589H3.65168807v8.5100238H0V11.7221779zm6.20190826 8.9747666c.59862385 0 1.16851376-.0433628 1.70966972-.1305848.54082569-.0870565 1.02385321-.2419708 1.44908257-.4645773.42473395-.2222755.76293575-.5274699 1.01444035-.9149211.2506789-.3871202.3765138-.8904261.3765138-1.5102487 0-.6001273-.1258349-1.0891996-.3765138-1.4670514-.2515046-.3773553-.58475228-.6724537-.99990824-.8857919-.41565138-.2128416-.88893578-.3530258-1.42018349-.421049-.53157798-.0675268-1.07719266-.1017867-1.63733945-.1017867H3.65168807v5.8960109h2.55022019zM56.8667339 0h24c4.9705628 0 9 4.02943725 9 9v24c0 4.9705627-4.0294372 9-9 9h-24c-4.9705627 0-9-4.0294373-9-9V9c0-4.97056275 4.0294373-9 9-9zm8.8024914 10.2191433v15.0850358h2.7148967V12.7102486c2.3170281-.0176685 7.3666215.4616733 9.1495045 4.6932968l2.5018931-1.0538977c-1.3086146-3.1065607-4.0352903-5.1760742-7.8852248-5.9850659-2.7829532-.58453529-5.1865243-.3028197-5.2874638-.2907134l-1.1936057.1452749zm-8.5702066 1.7215408c0 1.120482.9084556 2.0291048 2.0290969 2.0291048s2.029097-.9086228 2.029097-2.0291048c0-1.1206457-.9084557-2.02910487-2.029097-2.02910487-1.1206413 0-2.0290969.90845917-2.0290969 2.02910487zm23.6021782 11.5581921l2.75416.0029448-3.8828176-4.8714549-3.8744741 4.8631114 2.2506076.002454c-.1048658.5635948-.2406516 1.0597872-.4003225 1.4344264-1.3727447 3.2238604-4.8197392 4.8585307-10.2444611 4.8585307h-6.9128026V17.5175731h-2.7148967v14.9862228h9.6276993c6.61571 0 10.9029401-2.1902488 12.7424278-6.5097244.28515-.6699334.5082967-1.5343848.6548799-2.4951953z"
+    />
+  </Symbol>
+);

package/src/components/symbol/components/symbols/slack-symbol.tsx ADDED Viewed

@@ -0,0 +1,43 @@
+import { clsx } from 'clsx';
+import React from 'react';
+import { Symbol } from '../../symbol.component.js';
+import { type SymbolProps } from '../../symbol.types.js';
+export const SlackSymbol = ({
+  'aria-label': ariaLabel = 'Slack',
+  copyrightYear = '',
+  viewBoxWidth = 32,
+  viewBoxHeight = 32,
+  className,
+  ...props
+}: SymbolProps) => (
+  <Symbol
+    className={clsx('h-[32px] w-[32px]', className)}
+    aria-label={ariaLabel}
+    copyrightYear={copyrightYear}
+    viewBoxWidth={viewBoxWidth}
+    viewBoxHeight={viewBoxHeight}
+    {...props}
+  >
+    <g fill="none" fillRule="evenodd">
+      <rect width="32" height="32" fill="#611F69" rx="2" />
+      <path
+        fill="#E01E5A"
+        d="M10.5762712,19.2372881 C10.5762712,18.0338983 11.559322,17.0508475 12.7627119,17.0508475 C13.9661017,17.0508475 14.9491525,18.0338983 14.9491525,19.2372881 L14.9491525,24.7118644 C14.9491525,25.9152542 13.9661017,26.8983051 12.7627119,26.8983051 C11.559322,26.8983051 10.5762712,25.9152542 10.5762712,24.7118644 L10.5762712,19.2372881 Z M9.47457627,19.2372881 C9.47457627,20.440678 8.49152542,21.4237288 7.28813559,21.4237288 C6.08474576,21.4237288 5.10169492,20.440678 5.10169492,19.2372881 C5.10169492,18.0338983 6.08474576,17.0508475 7.28813559,17.0508475 L9.47457627,17.0508475 L9.47457627,19.2372881 Z"
+      />
+      <path
+        fill="#36C5F0"
+        d="M12.7627119,10.5762712 C13.9661017,10.5762712 14.9491525,11.559322 14.9491525,12.7627119 C14.9491525,13.9661017 13.9661017,14.9491525 12.7627119,14.9491525 L7.28813559,14.9491525 C6.08474576,14.9491525 5.10169492,13.9661017 5.10169492,12.7627119 C5.10169492,11.559322 6.08474576,10.5762712 7.28813559,10.5762712 L12.7627119,10.5762712 Z M12.7627119,9.47457627 C11.559322,9.47457627 10.5762712,8.49152542 10.5762712,7.28813559 C10.5762712,6.08474576 11.559322,5.10169492 12.7627119,5.10169492 C13.9661017,5.10169492 14.9491525,6.08474576 14.9491525,7.28813559 L14.9491525,9.47457627 L12.7627119,9.47457627 Z"
+      />
+      <path
+        fill="#2EB67D"
+        d="M22.5254237,12.7627119 C22.5254237,11.559322 23.5084746,10.5762712 24.7118644,10.5762712 C25.9152542,10.5762712 26.8983051,11.559322 26.8983051,12.7627119 C26.8983051,13.9661017 25.9152542,14.9491525 24.7118644,14.9491525 L22.5254237,14.9491525 L22.5254237,12.7627119 Z M21.4237288,12.7627119 C21.4237288,13.9661017 20.440678,14.9491525 19.2372881,14.9491525 C18.0338983,14.9491525 17.0508475,13.9661017 17.0508475,12.7627119 L17.0508475,7.28813559 C17.0508475,6.08474576 18.0338983,5.10169492 19.2372881,5.10169492 C20.440678,5.10169492 21.4237288,6.08474576 21.4237288,7.28813559 L21.4237288,12.7627119 Z"
+      />
+      <path
+        fill="#ECB22E"
+        d="M19.2372881,21.4237288 C18.0338983,21.4237288 17.0508475,20.440678 17.0508475,19.2372881 C17.0508475,18.0338983 18.0338983,17.0508475 19.2372881,17.0508475 L24.7118644,17.0508475 C25.9152542,17.0508475 26.8983051,18.0338983 26.8983051,19.2372881 C26.8983051,20.440678 25.9152542,21.4237288 24.7118644,21.4237288 L19.2372881,21.4237288 Z M19.2372881,22.5254237 C20.440678,22.5254237 21.4237288,23.5084746 21.4237288,24.7118644 C21.4237288,25.9152542 20.440678,26.8983051 19.2372881,26.8983051 C18.0338983,26.8983051 17.0508475,25.9152542 17.0508475,24.7118644 L17.0508475,22.5254237 L19.2372881,22.5254237 Z"
+      />
+    </g>
+  </Symbol>
+);

package/src/components/symbol/components/symbols/twitter-symbol.tsx ADDED Viewed

@@ -0,0 +1,31 @@
+import { clsx } from 'clsx';
+import React from 'react';
+import { Symbol } from '../../symbol.component.js';
+import { type SymbolProps } from '../../symbol.types.js';
+export const TwitterSymbol = ({
+  'aria-label': ariaLabel = 'Twitter',
+  copyrightYear = '',
+  viewBoxWidth = 32,
+  viewBoxHeight = 32,
+  className,
+  ...props
+}: SymbolProps) => (
+  <Symbol
+    className={clsx('h-[32px] w-[32px]', className)}
+    aria-label={ariaLabel}
+    copyrightYear={copyrightYear}
+    viewBoxWidth={viewBoxWidth}
+    viewBoxHeight={viewBoxHeight}
+    {...props}
+  >
+    <g fillRule="nonzero" fill="none">
+      <rect fill="#0BABE3" width="32" height="32" rx="2" />
+      <path
+        d="M26.7 9.5c-.8.338-1.64.573-2.5.7.916-.53 1.596-1.387 1.9-2.4-.862.528-1.81.9-2.8 1.1-.81-.914-1.98-1.425-3.2-1.4-2.42.022-4.378 1.98-4.4 4.4-.016.336.017.673.1 1-3.522-.167-6.802-1.843-9-4.6-.41.66-.618 1.424-.6 2.2.016 1.488.764 2.872 2 3.7-.696-.01-1.38-.183-2-.5v.1c.003 2.08 1.463 3.874 3.5 4.3-.39.115-.793.182-1.2.2-.27.02-.543-.013-.8-.1.598 1.764 2.238 2.964 4.1 3-1.533 1.227-3.437 1.897-5.4 1.9-.337.022-.674-.012-1-.1 2 1.287 4.322 1.98 6.7 2 3.29.024 6.457-1.26 8.802-3.57 2.344-2.312 3.674-5.46 3.698-8.75v-.78c.803-.704 1.51-1.51 2.1-2.4"
+        fill="#FFF"
+      />
+    </g>
+  </Symbol>
+);

package/src/components/symbol/components/symbols/visa-blue-symbol.tsx ADDED Viewed

@@ -0,0 +1,31 @@
+import { clsx } from 'clsx';
+import React from 'react';
+import { Symbol } from '../../symbol.component.js';
+import { type SymbolProps } from '../../symbol.types.js';
+export const VisaBlueSymbol = ({
+  'aria-label': ariaLabel = 'Visa',
+  copyrightYear = '',
+  viewBoxWidth = 80,
+  viewBoxHeight = 37,
+  className,
+  ...props
+}: SymbolProps) => (
+  <Symbol
+    className={clsx('h-[37px] w-[80px]', className)}
+    aria-label={ariaLabel}
+    copyrightYear={copyrightYear}
+    viewBoxWidth={viewBoxWidth}
+    viewBoxHeight={viewBoxHeight}
+    {...props}
+  >
+    <g fill="none">
+      <path fill="#1A1F71" d="M0 37h80V0H0" />
+      <path
+        d="M38.527 7.93l-4.46 20.854H28.67L33.128 7.93h5.4zM61.22 21.392l2.838-7.827 1.64 7.827h-4.48zm6.024 7.392h4.982L67.87 7.93h-4.6c-1.037 0-1.913.602-2.3 1.53l-8.09 19.324h5.664l1.124-3.115h6.92l.656 3.114zm-14.084-6.81c.022-5.505-7.61-5.806-7.56-8.268.02-.744.736-1.544 2.287-1.747.774-.1 2.906-.177 5.323.933l.945-4.426c-1.3-.46-2.967-.92-5.047-.92-5.33 0-9.083 2.83-9.115 6.894-.03 3.002 2.68 4.68 4.722 5.674 2.102 1.03 2.81 1.678 2.8 2.593-.017 1.4-1.68 2.017-3.228 2.043-2.714.043-4.284-.735-5.542-1.32l-.973 4.572c1.26.583 3.585 1.087 5.994 1.113 5.667 0 9.373-2.802 9.394-7.14zM30.814 7.93L22.08 28.784h-5.703l-4.304-16.642c-.256-1.025-.485-1.4-1.28-1.833-1.298-.706-3.44-1.363-5.328-1.778l.132-.602h9.183c1.167 0 2.218.777 2.486 2.126l2.27 12.063 5.615-14.19h5.664z"
+        fill="#FFF"
+      />
+    </g>
+  </Symbol>
+);

package/src/components/symbol/components/symbols/visa-symbol.tsx ADDED Viewed

@@ -0,0 +1,28 @@
+import { clsx } from 'clsx';
+import React from 'react';
+import { Symbol } from '../../symbol.component.js';
+import { type SymbolProps } from '../../symbol.types.js';
+export const VisaSymbol = ({
+  'aria-label': ariaLabel = 'Visa',
+  copyrightYear = '',
+  viewBoxWidth = 80,
+  viewBoxHeight = 26,
+  className,
+  ...props
+}: SymbolProps) => (
+  <Symbol
+    className={clsx('h-[26px] w-[80px]', className)}
+    aria-label={ariaLabel}
+    copyrightYear={copyrightYear}
+    viewBoxWidth={viewBoxWidth}
+    viewBoxHeight={viewBoxHeight}
+    {...props}
+  >
+    <path
+      d="M39.617.453l-5.35 24.99h-6.463L33.146.453h6.47zm27.19 16.132L70.21 7.2l1.964 9.385h-5.366zm7.22 8.858H80L74.778.453h-5.513c-1.24 0-2.29.718-2.754 1.832l-9.693 23.158h6.785l1.346-3.732h8.292l.787 3.733zm-16.877-8.16c.03-6.597-9.115-6.963-9.057-9.908.022-.896.88-1.85 2.738-2.093.93-.123 3.488-.214 6.382 1.123L58.345 1.1C56.785.54 54.788 0 52.295 0c-6.39 0-10.88 3.387-10.922 8.256-.038 3.592 3.213 5.605 5.657 6.798 2.52 1.228 3.366 2.015 3.357 3.108-.017 1.672-2.015 2.412-3.866 2.448-3.254.05-5.135-.88-6.64-1.58l-1.17 5.477c1.51.693 4.298 1.298 7.183 1.33 6.79 0 11.234-3.36 11.257-8.554zM30.373.453l-10.468 24.99H13.07L7.915 5.5c-.31-1.228-.584-1.676-1.532-2.196C4.823 2.46 2.256 1.668 0 1.174l.156-.72h11c1.398 0 2.663.93 2.98 2.547l2.726 14.457L23.586.453h6.787z"
+      fill="#1A1F71"
+    />
+  </Symbol>
+);

package/src/components/symbol/components/symbols/visa-white-symbol.tsx ADDED Viewed

@@ -0,0 +1,31 @@
+import { clsx } from 'clsx';
+import React from 'react';
+import { Symbol } from '../../symbol.component.js';
+import { type SymbolProps } from '../../symbol.types.js';
+export const VisaWhiteSymbol = ({
+  'aria-label': ariaLabel = 'Visa',
+  copyrightYear = '',
+  viewBoxWidth = 80,
+  viewBoxHeight = 37,
+  className,
+  ...props
+}: SymbolProps) => (
+  <Symbol
+    className={clsx('h-[44px] w-[122px]', className)}
+    aria-label={ariaLabel}
+    copyrightYear={copyrightYear}
+    viewBoxWidth={viewBoxWidth}
+    viewBoxHeight={viewBoxHeight}
+    {...props}
+  >
+    <g fill="none">
+      <path fill="#FFF" d="M0 37h80V0H0" />
+      <path
+        d="M38.527 7.93l-4.46 20.854H28.67L33.128 7.93h5.4zM61.22 21.392l2.838-7.827 1.64 7.827h-4.48zm6.024 7.392h4.982L67.87 7.93h-4.6c-1.037 0-1.913.602-2.3 1.53l-8.09 19.324h5.664l1.124-3.115h6.92l.656 3.114zm-14.084-6.81c.022-5.505-7.61-5.806-7.56-8.268.02-.744.736-1.544 2.287-1.747.774-.1 2.906-.177 5.323.933l.945-4.426c-1.3-.46-2.967-.92-5.047-.92-5.33 0-9.083 2.83-9.115 6.894-.03 3.002 2.68 4.68 4.722 5.674 2.102 1.03 2.81 1.678 2.8 2.593-.017 1.4-1.68 2.017-3.228 2.043-2.714.043-4.284-.735-5.542-1.32l-.973 4.572c1.26.583 3.585 1.087 5.994 1.113 5.667 0 9.373-2.802 9.394-7.14zM30.814 7.93L22.08 28.784h-5.703l-4.304-16.642c-.256-1.025-.485-1.4-1.28-1.833-1.298-.706-3.44-1.363-5.328-1.778l.132-.602h9.183c1.167 0 2.218.777 2.486 2.126l2.27 12.063 5.615-14.19h5.664z"
+        fill="#1A1F71"
+      />
+    </g>
+  </Symbol>
+);

package/src/components/symbol/components/symbols/yammer-symbol.tsx ADDED Viewed

@@ -0,0 +1,31 @@
+import { clsx } from 'clsx';
+import React from 'react';
+import { Symbol } from '../../symbol.component.js';
+import { type SymbolProps } from '../../symbol.types.js';
+export const YammerSymbol = ({
+  'aria-label': ariaLabel = 'Yammer',
+  copyrightYear = '',
+  viewBoxWidth = 32,
+  viewBoxHeight = 32,
+  className,
+  ...props
+}: SymbolProps) => (
+  <Symbol
+    className={clsx('h-[32px] w-[32px]', className)}
+    aria-label={ariaLabel}
+    copyrightYear={copyrightYear}
+    viewBoxWidth={viewBoxWidth}
+    viewBoxHeight={viewBoxHeight}
+    {...props}
+  >
+    <g fill="none" fillRule="evenodd">
+      <rect fill="#0072C6" width="32" height="32" rx="2" />
+      <path
+        d="M27.95 17.994c-3.018 0-7.253-.338-7.597-1.03-.344-.702 6.532-1.456 7.49-1.458.056 0 .11 0 .163.003.534.117.95.575.99 1.15.044.652-.414 1.224-1.046 1.334M25.95 24.456c-.313.484-.897.686-1.424.533-.046-.026-.094-.05-.145-.08-.837-.46-6.502-4.43-5.863-4.877.636-.445 4.51 1.3 7.157 2.75.5.4.628 1.122.275 1.673M17.925 7.706l-6.023 15.026c-1.02 2.595-2.04 4.373-5.128 4.373-.41 0-.865-.03-1.31-.107-.613-.176-.975-.812-.808-1.43.146-.542.65-.894 1.19-.866.037.003.6.037.762.037 1.675 0 2.405-1.043 3.192-3.267L4.193 7.793c-.226-.693.128-1.447.817-1.706.672-.252 1.418.032 1.72.67L11.18 18h.067L15.48 6.84c.238-.646.942-.984 1.607-.772.677.217 1.055.957.838 1.638M24.38 8.716l.146-.076c.527-.153 1.11.047 1.423.532.352.55.225 1.273-.276 1.674-2.647 1.45-6.52 3.193-7.157 2.75-.64-.45 5.026-4.418 5.864-4.88"
+        fill="#FFF"
+      />
+    </g>
+  </Symbol>
+);

package/src/components/symbol/components/symbols/youtube-symbol.tsx ADDED Viewed

@@ -0,0 +1,38 @@
+import { clsx } from 'clsx';
+import React from 'react';
+import { Symbol } from '../../symbol.component.js';
+import { type SymbolProps } from '../../symbol.types.js';
+export const YouTubeSymbol = ({
+  'aria-label': ariaLabel = 'YouTube',
+  copyrightYear = '',
+  viewBoxWidth = 32,
+  viewBoxHeight = 32,
+  className,
+  ...props
+}: SymbolProps) => (
+  <Symbol
+    className={clsx('h-[32px] w-[32px]', className)}
+    aria-label={ariaLabel}
+    copyrightYear={copyrightYear}
+    viewBoxWidth={viewBoxWidth}
+    viewBoxHeight={viewBoxHeight}
+    {...props}
+  >
+    <defs>
+      <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="YouTubeSymbol">
+        <stop stopColor="#E52D27" offset="0%" />
+        <stop stopColor="#B31217" offset="100%" />
+      </linearGradient>
+    </defs>
+    <g fill="none" fillRule="evenodd">
+      <rect fill="url(#YouTubeSymbol)" width="32" height="32" rx="2" />
+      <path fillOpacity=".25" fill="#000" d="M13.5 12.5l6 4.5.5-1" />
+      <path
+        d="M15.995 7.5h.01s5.038 0 8.397.244c.47.057 1.492.062 2.404 1.024.72.733.954 2.398.954 2.398s.24 1.956.24 3.91v1.835c0 1.956-.24 3.91-.24 3.91s-.234 1.667-.954 2.4c-.912.962-1.935.967-2.404 1.023-3.36.245-8.402.253-8.402.253s-6.24-.058-8.16-.243c-.534-.1-1.733-.07-2.646-1.033-.72-.733-.954-2.4-.954-2.4S4 18.867 4 16.91v-1.833c0-1.955.24-3.91.24-3.91s.234-1.666.954-2.4c.913-.96 1.935-.966 2.404-1.023 3.36-.244 8.397-.244 8.397-.244zm-2.495 5v7L20 16l-6.5-3.5z"
+        fill="#FFF"
+      />
+    </g>
+  </Symbol>
+);

package/src/components/symbol/index.ts ADDED Viewed

@@ -0,0 +1,48 @@
+export { AmericanExpressSymbol } from './components/symbols/american-express-symbol.js';
+export { AppleStoreInverseSymbol } from './components/symbols/apple-store-inverse-symbol.js';
+export { AppleStoreSymbol } from './components/symbols/apple-store-symbol.js';
+export { BOMLogo } from './components/logos/bom-logo.js';
+export { BOMMultibrandLargeLogo } from './components/logos/bom-multibrand-large-logo.js';
+export { BOMMultibrandSmallLogo } from './components/logos/bom-multibrand-small-logo.js';
+export { BOMShieldLogo } from './components/logos/bom-shield-logo.js';
+export { BPayLandSymbol } from './components/symbols/bpay-land-symbol.js';
+export { BPayPortSymbol } from './components/symbols/bpay-port-symbol.js';
+export { BSALogo } from './components/logos/bsa-logo.js';
+export { BSAMultibrandLargeLogo } from './components/logos/bsa-multibrand-large-logo.js';
+export { BSAMultibrandSmallLogo } from './components/logos/bsa-multibrand-small-logo.js';
+export { BSAStackedLogo } from './components/logos/bsa-stacked-logo.js';
+export { FacebookSymbol } from './components/symbols/facebook-symbol.js';
+export { GooglePlusSymbol } from './components/symbols/google-plus-symbol.js';
+export { InstagramSymbol } from './components/symbols/instagram-symbol.js';
+export { LinkedInSymbol } from './components/symbols/linked-in-symbol.js';
+export { MastercardAcceptedSymbol } from './components/symbols/mastercard-accepted-symbol.js';
+export { MastercardHorizontalSymbol } from './components/symbols/mastercard-horizontal-symbol.js';
+export { MastercardSymbol } from './components/symbols/mastercard-symbol.js';
+export { MicrosoftStoreSymbol } from './components/symbols/microsoft-store-symbol.js';
+export { PayIDSymbol } from './components/symbols/pay-id-symbol.js';
+export { RAMSLogo } from './components/logos/rams-logo.js';
+export { RAMSMultibrandLargeLogo } from './components/logos/rams-multibrand-large-logo.js';
+export { RAMSMultibrandSmallLogo } from './components/logos/rams-multibrand-small-logo.js';
+export { RedAvatarCircleLogo } from './components/logos/red-avatar-circle-logo.js';
+export { RedAvatarCircleReversedLogo } from './components/logos/red-avatar-circle-reversed-logo.js';
+export { RedAvatarLogo } from './components/logos/red-avatar-logo.js';
+export { SlackSymbol } from './components/symbols/slack-symbol.js';
+export { STGDragonLogo } from './components/logos/stg-dragon-logo.js';
+export { STGLogo } from './components/logos/stg-logo.js';
+export { STGMultibrandLargeLogo } from './components/logos/stg-multibrand-large-logo.js';
+export { STGMultibrandSmallLogo } from './components/logos/stg-multibrand-small-logo.js';
+export { TwitterSymbol } from './components/symbols/twitter-symbol.js';
+export { VisaBlueSymbol } from './components/symbols/visa-blue-symbol.js';
+export { VisaSymbol } from './components/symbols/visa-symbol.js';
+export { VisaWhiteSymbol } from './components/symbols/visa-white-symbol.js';
+export { WBCLogo } from './components/logos/wbc-logo.js';
+export { WBCMultibrandLargeLogo } from './components/logos/wbc-multibrand-large-logo.js';
+export { WBCMultibrandSmallLogo } from './components/logos/wbc-multibrand-small-logo.js';
+export { WBGInternalLogo } from './components/logos/wbg-internal-logo.js';
+export { WBGLogo } from './components/logos/wbg-logo.js';
+export { WBGMultibrandLargeLogo } from './components/logos/wbg-multibrand-large-logo.js';
+export { WBGMultibrandSmallLogo } from './components/logos/wbg-multibrand-small-logo.js';
+export { YammerSymbol } from './components/symbols/yammer-symbol.js';
+export { YouTubeSymbol } from './components/symbols/youtube-symbol.js';
+export { type SymbolProps } from './symbol.types.js';

package/src/components/symbol/symbol.component.tsx ADDED Viewed

@@ -0,0 +1,37 @@
+import React from 'react';
+import { styles } from './symbol.styles.js';
+import { type SymbolProps } from './symbol.types.js';
+import { getTransform } from './symbol.utils.js';
+export function Symbol({
+  copyrightYear = '',
+  xmlns = 'http://www.w3.org/2000/svg',
+  role = 'img',
+  focusable = false,
+  className,
+  viewBoxWidth,
+  viewBoxHeight,
+  align,
+  offset,
+  children,
+  ...props
+}: SymbolProps) {
+  return (
+    <span className={styles({ className })}>
+      <svg
+        xmlns={xmlns}
+        role={role}
+        viewBox={`0 0 ${viewBoxWidth} ${viewBoxHeight}`}
+        focusable={focusable}
+        className="block"
+        {...props}
+      >
+        {copyrightYear && (
+          <metadata>{`Copyright © ${copyrightYear} by Westpac Banking Corporation. All rights reserved.`}</metadata>
+        )}
+        {align && offset ? <g transform={getTransform({ align, offset })}>{children}</g> : children}
+      </svg>
+    </span>
+  );
+}