@westpac/ui 0.42.2 → 0.43.0

package/src/components/icon/components/text-increase-icon.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function TextIncreaseIcon({
+  'aria-label': ariaLabel = 'Text Increase',
+  copyrightYear = '2025',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17 22H14L12.25 17H4.75L3 22H0L7 2H10L17 22ZM5.7998 14H11.2002L8.5 6.28516L5.7998 14Z"
+        fill="currentColor"
+      />
+      <path d="M21 7H24V9H21V12H19V9H16V7H19V4H21V7Z" fill="currentColor" />
+    </Icon>
+  );
+}

package/src/components/icon/components/text-large-icon.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function TextLargeIcon({ 'aria-label': ariaLabel = 'Text Large', copyrightYear = '2025', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        d="m8.315 13.157-.947 2.527L6 12.399 4.083 17h2.792l-.75 2H3.25L2 22H0l5-12h2l1.315 3.157Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M24 22h-3l-1.75-5h-7.5L10 22H7l7-20h3l7 20Zm-11.2-8h5.4l-2.7-7.715L12.8 14Z"
+        fill="currentColor"
+      />
+    </Icon>
+  );
+}

package/src/components/icon/components/voiceover-on-icon.tsx

@@ -0,0 +1,51 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function VoiceoverOnIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Voiceover On',
+  copyrightYear = '2025',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M10 14.071c3.004 0 9 1.34 9 4v4H1v-4c0-2.66 5.996-4 9-4ZM21.071 1A9.97 9.97 0 0 1 24 8.071a9.97 9.97 0 0 1-2.929 7.072l-1.414-1.415A7.976 7.976 0 0 0 22 8.072c0-2.209-.895-4.21-2.343-5.657L21.071 1ZM10 3.071c2.762 0 5 2.238 5 5 0 2.763-2.238 5-5 5-2.763 0-5-2.237-5-5 0-2.762 2.237-5 5-5Z"
+            fill="currentColor"
+          />
+          <path
+            d="M18.242 3.83A5.98 5.98 0 0 1 20 8.07a5.98 5.98 0 0 1-1.758 4.242L16.828 10.9A3.987 3.987 0 0 0 18 8.071a3.987 3.987 0 0 0-1.172-2.828l1.414-1.414Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M10 14.071c3.004 0 9 1.34 9 4v4H1v-4c0-2.66 5.996-4 9-4Zm0 2c-1.28 0-3.303.299-4.955.887-.83.295-1.434.617-1.793.912a1.14 1.14 0 0 0-.252.262v1.94h14v-1.94a1.142 1.142 0 0 0-.252-.262c-.36-.295-.964-.617-1.793-.912-1.652-.588-3.674-.887-4.955-.887Z"
+            fill="currentColor"
+          />
+          <path
+            d="M21.071 1A9.97 9.97 0 0 1 24 8.071a9.97 9.97 0 0 1-2.929 7.072l-1.414-1.415A7.976 7.976 0 0 0 22 8.072c0-2.209-.895-4.21-2.343-5.657L21.071 1Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M10 3.071c2.762 0 5 2.238 5 5 0 2.763-2.238 5-5 5-2.763 0-5-2.237-5-5 0-2.762 2.237-5 5-5Zm0 2c-1.658 0-3 1.342-3 3s1.342 3 3 3 3-1.342 3-3-1.342-3-3-3Z"
+            fill="currentColor"
+          />
+          <path
+            d="M18.242 3.83A5.98 5.98 0 0 1 20 8.07a5.98 5.98 0 0 1-1.758 4.242L16.828 10.9A3.987 3.987 0 0 0 18 8.071a3.987 3.987 0 0 0-1.172-2.828l1.414-1.414Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/components/volume-off-icon.tsx

@@ -0,0 +1,51 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function VolumeOffIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Volume Off',
+  copyrightYear = '2025',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M11.9998 11.9971V11.9981L13.9998 13.9981V13.9971L15.5367 15.5341C15.5365 15.5343 15.5369 15.5339 15.5367 15.5341L17.6575 17.6559C17.6577 17.6557 17.6573 17.6561 17.6575 17.6559L19.0722 19.0696C19.072 19.0698 19.0724 19.0694 19.0722 19.0696L21.6242 21.6226L20.21 23.0368L17.5156 20.3424C16.4657 21.038 15.2769 21.5406 13.9998 21.7999V19.7479C14.7342 19.5588 15.4279 19.2681 16.0648 18.8916L11.9998 14.8266V21L6.99976 16H1.99976V8H5.17319L1.22266 4.04947L2.63687 2.63525L11.9998 11.9971Z"
+            fill="currentColor"
+          />
+          <path
+            d="M13.9998 11.1687L16.6562 13.8251C16.878 13.2597 16.9998 12.6441 16.9998 12C16.9998 9.94965 15.7657 8.18757 13.9998 7.41602V11.1687Z"
+            fill="currentColor"
+          />
+          <path
+            d="M18.8932 16.0621L20.3441 17.513C21.3904 15.9325 21.9998 14.0374 21.9998 11.9999C21.9998 7.162 18.5642 3.12649 13.9998 2.19995V4.25195C17.4502 5.14004 19.9998 8.27224 19.9998 11.9999C19.9998 13.4828 19.5963 14.8715 18.8932 16.0621Z"
+            fill="currentColor"
+          />
+          <path d="M8.91541 6.08435L11.9998 9.1687V3L8.91541 6.08435Z" fill="currentColor" />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M15.5366 15.5341C15.5365 15.5342 15.5368 15.5339 15.5366 15.5341L17.6574 17.6558C17.6576 17.6557 17.6573 17.656 17.6574 17.6558L19.0721 19.0696C19.072 19.0697 19.0723 19.0694 19.0721 19.0696L21.6242 21.6226L20.21 23.0368L17.5156 20.3424C16.4657 21.0379 15.2769 21.5406 13.9997 21.7999V19.7479C14.7342 19.5588 15.4278 19.2681 16.0648 18.8916L11.9997 14.8265V21L6.99966 16H1.99966V8H5.17319L1.22266 4.04947L2.63687 2.63525L15.5366 15.5341ZM7.17319 10H3.99966V14H7.82809L9.99966 16.1716V12.8265L7.17319 10Z"
+            fill="currentColor"
+          />
+          <path
+            d="M13.9997 11.1687L16.6561 13.8251C16.8779 13.2597 16.9997 12.6441 16.9997 12C16.9997 9.94965 15.7656 8.18757 13.9997 7.41602V11.1687Z"
+            fill="currentColor"
+          />
+          <path
+            d="M18.8931 16.0621L20.344 17.513C21.3903 15.9325 21.9997 14.0374 21.9997 11.9999C21.9997 7.162 18.5641 3.12649 13.9997 2.19995V4.25195C17.4501 5.14004 19.9997 8.27224 19.9997 11.9999C19.9997 13.4828 19.5962 14.8715 18.8931 16.0621Z"
+            fill="currentColor"
+          />
+          <path d="M8.91531 6.08435L11.9997 9.1687V3L8.91531 6.08435Z" fill="currentColor" />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/components/volume-on-icon.tsx

@@ -0,0 +1,46 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function VolumeOnIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Volume On',
+  copyrightYear = '2025',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M14 21.7999C18.5645 20.8733 22 16.8378 22 11.9999C22 7.162 18.5645 3.12649 14 2.19995V4.25195C17.4505 5.14004 20 8.27224 20 11.9999C20 15.7276 17.4505 18.8598 14 19.7479V21.7999Z"
+            fill="currentColor"
+          />
+          <path
+            d="M14 16.5839C15.7659 15.8124 17 14.0503 17 12C17 9.94965 15.7659 8.18757 14 7.41602V16.5839Z"
+            fill="currentColor"
+          />
+          <path d="M12 3L7 8H2V16H7L12 21V3Z" fill="currentColor" />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            d="M22 11.9999C22 16.8378 18.5645 20.8733 14 21.7999V19.7479C17.4505 18.8598 20 15.7276 20 11.9999C20 8.27224 17.4505 5.14004 14 4.25195V2.19995C18.5645 3.12649 22 7.162 22 11.9999Z"
+            fill="currentColor"
+          />
+          <path
+            d="M14 16.5839V7.41602C15.7659 8.18757 17 9.94965 17 12C17 14.0503 15.7659 15.8124 14 16.5839Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M7 16H2V8H7L12 3V21L7 16ZM4 14V10H7.82843L10 7.82843V16.1716L7.82843 14H4Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/index.ts

@@ -13,6 +13,7 @@ export { ArrowForwardCircleIcon } from './components/arrow-forward-circle-icon.j
 export { ArrowLeftIcon } from './components/arrow-left-icon.js';
 export { ArrowRightIcon } from './components/arrow-right-icon.js';
 export { ArrowSplitIcon } from './components/arrow-split-icon.js';
+export { ArrowThreadReplyIcon } from './components/arrow-thread-reply-icon.js';
 export { ArrowUpCircleIcon } from './components/arrow-up-circle-icon.js';
 export { AtmIcon } from './components/atm-icon.js';
 export { AttacheCaseIcon } from './components/attache-case-icon.js';
@@ -29,6 +30,7 @@ export { BriefcaseIcon } from './components/briefcase-icon.js';
 export { BugReportIcon } from './components/bug-report-icon.js';
 export { BurgerIcon } from './components/burger-icon.js';
 export { BusinessPersonIcon } from './components/business-person-icon.js';
+export { ButtonShapeIcon } from './components/button-shape-icon.js';
 export { CafeIcon } from './components/cafe-icon.js';
 export { CakeIcon } from './components/cake-icon.js';
 export { CalculateIcon } from './components/calculate-icon.js';
@@ -47,7 +49,9 @@ export { CircleIcon } from './components/circle-icon.js';
 export { ClearIcon } from './components/clear-icon.js';
 export { ClockIcon } from './components/clock-icon.js';
 export { CloseIcon } from './components/close-icon.js';
+export { ClosedCaptionIcon } from './components/closed-caption-icon.js';
 export { CocktailGlassIcon } from './components/cocktail-glass-icon.js';
+export { ColorFiltersIcon } from './components/color-filters-icon.js';
 export { CompassIcon } from './components/compass-icon.js';
 export { ContactIcon } from './components/contact-icon.js';
 export { ContentCopyIcon } from './components/content-copy-icon.js';
@@ -88,6 +92,9 @@ export { FilterIcon } from './components/filter-icon.js';
 export { FingerprintIcon } from './components/fingerprint-icon.js';
 export { FirstAidCaseIcon } from './components/first-aid-case-icon.js';
 export { FirstAidIcon } from './components/first-aid-icon.js';
+export { FormatColorIcon } from './components/format-color-icon.js';
+export { FullscreenExitIcon } from './components/fullscreen-exit-icon.js';
+export { FullscreenIcon } from './components/fullscreen-icon.js';
 export { FutureClockIcon } from './components/future-clock-icon.js';
 export { GelIcon } from './components/gel-icon.js';
 export { GenericFileIcon } from './components/generic-file-icon.js';
@@ -182,6 +189,7 @@ export { ReceiptIcon } from './components/receipt-icon.js';
 export { RefreshIcon } from './components/refresh-icon.js';
 export { RemoveCircleIcon } from './components/remove-circle-icon.js';
 export { RemoveIcon } from './components/remove-icon.js';
+export { ReplayIcon } from './components/replay-icon.js';
 export { RestaurantIcon } from './components/restaurant-icon.js';
 export { RssIcon } from './components/rss-icon.js';
 export { ScanDocumentIcon } from './components/scan-document-icon.js';
@@ -213,6 +221,9 @@ export { TakeoutCoffeeIcon } from './components/takeout-coffee-icon.js';
 export { TakeoutFoodIcon } from './components/takeout-food-icon.js';
 export { TargetIcon } from './components/target-icon.js';
 export { TelephoneIcon } from './components/telephone-icon.js';
+export { TextBoldIcon } from './components/text-bold-icon.js';
+export { TextIncreaseIcon } from './components/text-increase-icon.js';
+export { TextLargeIcon } from './components/text-large-icon.js';
 export { ThumbDownIcon } from './components/thumb-down-icon.js';
 export { ThumbUpIcon } from './components/thumb-up-icon.js';
 export { TickCircleIcon } from './components/tick-circle-icon.js';
@@ -231,6 +242,9 @@ export { VideoIcon } from './components/video-icon.js';
 export { VisibilityIcon } from './components/visibility-icon.js';
 export { VisibilityOffIcon } from './components/visibility-off-icon.js';
 export { VoiceIcon } from './components/voice-icon.js';
+export { VoiceoverOnIcon } from './components/voiceover-on-icon.js';
+export { VolumeOffIcon } from './components/volume-off-icon.js';
+export { VolumeOnIcon } from './components/volume-on-icon.js';
 export { WalkIcon } from './components/walk-icon.js';
 export { WalletIcon } from './components/wallet-icon.js';
 export { WarningIcon } from './components/warning-icon.js';

package/src/components/panel/panel.types.ts

@@ -8,7 +8,7 @@ export type PanelProps = {
   /**
    * The heading of the panel
    */
-  heading?: string;
+  heading?: ReactNode;
   /**
    * Tag for heading defaults to h1
    * @default h1

package/src/components/popover/components/panel/panel.styles.ts

@@ -9,7 +9,7 @@ export const styles = tv(
         before:absolute before:left-[1px] before:top-[0.5px] before:size-0 before:border-x-[7px] before:border-t-[12px] before:border-x-[transparent] before:border-t-muted after:absolute
         after:left-[1.5px] after:top-0 after:size-0 after:border-x-[6.5px] after:border-t-[11px] after:border-x-[transparent] after:border-t-white
       `,
-      closeBtn: 'absolute right-1 h-3 top-1 p-0 hover:opacity-80',
+      closeBtn: 'absolute right-1 top-1 h-3 p-0 hover:opacity-80',
       content: 'w-[17.625rem] rounded-[3px] bg-white py-4 pl-3 pr-5',
       heading: 'typography-body-9 mb-2 font-medium text-text',
       body: 'typography-body-10 text-text',

package/src/components/popover/popover.component.tsx

@@ -64,6 +64,7 @@ export function Popover({
   return (
     <div className={styles.base({ className })}>
       <Button
+        type="button"
         look={(icon && !children) || linkStyling ? 'link' : look}
         iconAfter={icon}
         soft={soft}

package/src/components/radio-group/components/radio-group-radio/radio-group-radio.component.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { Ref, forwardRef, useContext, useRef } from 'react';
-import { VisuallyHidden, useFocusRing, useRadio } from 'react-aria';
+import { VisuallyHidden, mergeProps, useFocusRing, useRadio } from 'react-aria';
 
 import { RadioGroupContext } from '../../radio-group.component.js';
 
@@ -11,14 +11,14 @@ import { type RadioGroupRadioProps } from './radio-group-radio.types.js';
 function BaseRadioGroupRadio({ className, hint, label, ...props }: RadioGroupRadioProps, ref: Ref<HTMLLabelElement>) {
   const { state, size, orientation } = useContext(RadioGroupContext);
   const localRef = useRef(null);
-  const { inputProps, isSelected, isDisabled } = useRadio({ ...props, children: label }, state, localRef);
+  const { inputProps, labelProps, isSelected, isDisabled } = useRadio({ ...props, children: label }, state, localRef);
   const { isFocusVisible, focusProps } = useFocusRing();
   const styles = radioStyles({ isDisabled, isSelected, isFocusVisible, size, orientation });
 
   return (
-    <label className={styles.base({ className })} ref={ref}>
+    <label className={styles.base({ className })} ref={ref} {...labelProps}>
       <VisuallyHidden elementType="span">
-        <input {...inputProps} {...focusProps} ref={localRef} />
+        <input {...mergeProps(inputProps, focusProps)} ref={localRef} />
       </VisuallyHidden>
       <span className={styles.selector()} />
       <span className={styles.textWrapper()}>

package/src/components/selector/components/selector-radio-group/components/selector-radio-group-option/selector-radio-group-option.component.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { Ref, forwardRef, useContext, useRef } from 'react';
+import React, { Ref, forwardRef, useCallback, useContext, useRef } from 'react';
 import { VisuallyHidden, mergeProps, useFocusRing, useRadio } from 'react-aria';
 
 import { ArrowRightIcon, TickIcon } from '../../../../../../components/icon/index.js';
@@ -32,9 +32,12 @@ function BaseSelectorRadioGroupOption(
 
   const FinalIcon = checkIcon === 'checkbox' ? TickIcon : ArrowRightIcon;
 
-  const onItemClick = () => {
+  const onItemClick = useCallback(() => {
+    if (isDisabled) {
+      return;
+    }
     state.setSelectedValue(value);
-  };
+  }, [isDisabled, state, value]);
 
   return (
     <FlexiCell

package/src/components/switch/switch.component.tsx

@@ -20,7 +20,7 @@ export function Switch({
   const labelId = useId();
   const ref = useRef(null);
   const { isSelected } = state;
-  const { inputProps } = useCheckbox(
+  const { inputProps, labelProps } = useCheckbox(
     { isDisabled, 'aria-labelledby': labelId, defaultSelected: checked, ...props },
     state,
     ref,
@@ -29,7 +29,7 @@ export function Switch({
   const styles = switchStyles({ block, isFocusVisible, isSelected, isDisabled, size });
 
   return (
-    <label className={styles.base({ className })}>
+    <label className={styles.base({ className })} {...labelProps}>
       <span className={styles.label()} id={labelId}>
         {label}
       </span>

package/src/components/symbol/components/symbols/pay-to-black-symbol.tsx

@@ -0,0 +1,30 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Symbol } from '../../symbol.component.js';
+import { type SymbolProps } from '../../symbol.types.js';
+
+export const PayToBlackSymbol = ({
+  'aria-label': ariaLabel = 'PayTo',
+  copyrightYear = '',
+  viewBoxWidth = 65,
+  viewBoxHeight = 65,
+  className,
+  ...props
+}: SymbolProps) => (
+  <Symbol
+    className={clsx('size-[65px]', className)}
+    aria-label={ariaLabel}
+    copyrightYear={copyrightYear}
+    viewBoxWidth={viewBoxWidth}
+    viewBoxHeight={viewBoxHeight}
+    {...props}
+  >
+    <g clip-path="url(#clip0_2267_107)">
+      <path
+        d="M49.6724 0H14.5125C10.6678 0.00331005 6.98162 1.53205 4.26306 4.25061C1.5445 6.96917 0.0157612 10.6554 0.0124512 14.5V49.6725C0.0124512 53.5181 1.54013 57.2063 4.2594 59.9255C6.97868 62.6448 10.6668 64.1725 14.5125 64.1725H49.6724C53.5181 64.1725 57.2062 62.6448 59.9255 59.9255C62.6448 57.2063 64.1724 53.5181 64.1724 49.6725V14.5125C64.1741 12.6073 63.8003 10.7204 63.0723 8.95975C62.3443 7.19909 61.2765 5.59914 59.9299 4.25137C58.5833 2.9036 56.9843 1.83442 55.2243 1.10494C53.4642 0.375468 51.5777 -7.07943e-07 49.6724 0ZM37.31 47.895C35.6883 47.9182 34.0783 47.6188 32.5734 47.0143C31.0685 46.4098 29.6988 45.5121 28.5439 44.3736C27.389 43.235 26.4718 41.8783 25.8459 40.3822C25.2199 38.8861 24.8975 37.2805 24.8975 35.6587C24.8975 34.037 25.2199 32.4314 25.8459 30.9353C26.4718 29.4392 27.389 28.0825 28.5439 26.9439C29.6988 25.8054 31.0685 24.9077 32.5734 24.3032C34.0783 23.6987 35.6883 23.3993 37.31 23.4225H51.115V19.62L58.2124 25.5275L51.1024 31.4425V27.56H37.1325C32.855 27.56 29.3175 31.3825 29.3175 35.6575C29.2707 36.7362 29.4428 37.8132 29.8234 38.8237C30.204 39.8341 30.7852 40.757 31.5319 41.5369C32.2787 42.3167 33.1756 42.9373 34.1686 43.3613C35.1617 43.7853 36.2302 44.0038 37.31 44.0038C38.3897 44.0038 39.4582 43.7853 40.4513 43.3613C41.4443 42.9373 42.3412 42.3167 43.088 41.5369C43.8347 40.757 44.4159 39.8341 44.7965 38.8237C45.1771 37.8132 45.3492 36.7362 45.3025 35.6575C45.2791 33.8343 44.7343 32.0559 43.7325 30.5325H48.4224C49.1622 32.1399 49.5459 33.8881 49.5474 35.6575C49.5615 37.2684 49.2545 38.8661 48.6444 40.3571C48.0344 41.8482 47.1335 43.2028 45.9944 44.3419C44.8552 45.4811 43.5006 46.382 42.0096 46.992C40.5185 47.602 38.9209 47.909 37.31 47.895ZM20.31 43.645C21.2887 43.5967 22.2557 43.4107 23.1824 43.0925V47.2975C22.268 47.6664 21.2955 47.8703 20.31 47.9C18.2845 47.8835 16.3483 47.0644 14.9259 45.6223C13.5035 44.1803 12.7111 42.233 12.7225 40.2075V27.56H7.93995V23.4225H12.7275V18.1725H16.88V23.4225H28.2125C26.595 24.5316 25.2007 25.9352 24.1025 27.56H16.88V40.2025C16.8858 41.1119 17.2496 41.9825 17.8924 42.6258C18.5352 43.2691 19.4055 43.6334 20.3149 43.64L20.31 43.645Z"
+        fill="#231F20"
+      />
+    </g>
+  </Symbol>
+);

package/src/components/symbol/components/symbols/pay-to-dark-grey-symbol.tsx

@@ -0,0 +1,30 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Symbol } from '../../symbol.component.js';
+import { type SymbolProps } from '../../symbol.types.js';
+
+export const PayToDarkGreySymbol = ({
+  'aria-label': ariaLabel = 'PayTo',
+  copyrightYear = '',
+  viewBoxWidth = 65,
+  viewBoxHeight = 65,
+  className,
+  ...props
+}: SymbolProps) => (
+  <Symbol
+    className={clsx('size-[65px]', className)}
+    aria-label={ariaLabel}
+    copyrightYear={copyrightYear}
+    viewBoxWidth={viewBoxWidth}
+    viewBoxHeight={viewBoxHeight}
+    {...props}
+  >
+    <g clip-path="url(#clip0_2267_107)">
+      <path
+        d="M49.6724 0H14.5125C10.6678 0.00331005 6.98162 1.53205 4.26306 4.25061C1.5445 6.96917 0.0157612 10.6554 0.0124512 14.5V49.6725C0.0124512 53.5181 1.54013 57.2063 4.2594 59.9255C6.97868 62.6448 10.6668 64.1725 14.5125 64.1725H49.6724C53.5181 64.1725 57.2062 62.6448 59.9255 59.9255C62.6448 57.2063 64.1724 53.5181 64.1724 49.6725V14.5125C64.1741 12.6073 63.8003 10.7204 63.0723 8.95975C62.3443 7.19909 61.2765 5.59914 59.9299 4.25137C58.5833 2.9036 56.9843 1.83442 55.2243 1.10494C53.4642 0.375468 51.5777 -7.07943e-07 49.6724 0ZM37.31 47.895C35.6883 47.9182 34.0783 47.6188 32.5734 47.0143C31.0685 46.4098 29.6988 45.5121 28.5439 44.3736C27.389 43.235 26.4718 41.8783 25.8459 40.3822C25.2199 38.8861 24.8975 37.2805 24.8975 35.6587C24.8975 34.037 25.2199 32.4314 25.8459 30.9353C26.4718 29.4392 27.389 28.0825 28.5439 26.9439C29.6988 25.8054 31.0685 24.9077 32.5734 24.3032C34.0783 23.6987 35.6883 23.3993 37.31 23.4225H51.115V19.62L58.2124 25.5275L51.1024 31.4425V27.56H37.1325C32.855 27.56 29.3175 31.3825 29.3175 35.6575C29.2707 36.7362 29.4428 37.8132 29.8234 38.8237C30.204 39.8341 30.7852 40.757 31.5319 41.5369C32.2787 42.3167 33.1756 42.9373 34.1686 43.3613C35.1617 43.7853 36.2302 44.0038 37.31 44.0038C38.3897 44.0038 39.4582 43.7853 40.4513 43.3613C41.4443 42.9373 42.3412 42.3167 43.088 41.5369C43.8347 40.757 44.4159 39.8341 44.7965 38.8237C45.1771 37.8132 45.3492 36.7362 45.3025 35.6575C45.2791 33.8343 44.7343 32.0559 43.7325 30.5325H48.4224C49.1622 32.1399 49.5459 33.8881 49.5474 35.6575C49.5615 37.2684 49.2545 38.8661 48.6444 40.3571C48.0344 41.8482 47.1335 43.2028 45.9944 44.3419C44.8552 45.4811 43.5006 46.382 42.0096 46.992C40.5185 47.602 38.9209 47.909 37.31 47.895ZM20.31 43.645C21.2887 43.5967 22.2557 43.4107 23.1824 43.0925V47.2975C22.268 47.6664 21.2955 47.8703 20.31 47.9C18.2845 47.8835 16.3483 47.0644 14.9259 45.6223C13.5035 44.1803 12.7111 42.233 12.7225 40.2075V27.56H7.93995V23.4225H12.7275V18.1725H16.88V23.4225H28.2125C26.595 24.5316 25.2007 25.9352 24.1025 27.56H16.88V40.2025C16.8858 41.1119 17.2496 41.9825 17.8924 42.6258C18.5352 43.2691 19.4055 43.6334 20.3149 43.64L20.31 43.645Z"
+        fill="#4A4A49"
+      />
+    </g>
+  </Symbol>
+);

package/src/components/symbol/components/symbols/pay-to-light-grey-symbol.tsx

@@ -0,0 +1,30 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Symbol } from '../../symbol.component.js';
+import { type SymbolProps } from '../../symbol.types.js';
+
+export const PayToLightGreySymbol = ({
+  'aria-label': ariaLabel = 'PayTo',
+  copyrightYear = '',
+  viewBoxWidth = 65,
+  viewBoxHeight = 65,
+  className,
+  ...props
+}: SymbolProps) => (
+  <Symbol
+    className={clsx('size-[65px]', className)}
+    aria-label={ariaLabel}
+    copyrightYear={copyrightYear}
+    viewBoxWidth={viewBoxWidth}
+    viewBoxHeight={viewBoxHeight}
+    {...props}
+  >
+    <g clip-path="url(#clip0_2267_107)">
+      <path
+        d="M49.6724 0H14.5125C10.6678 0.00331005 6.98162 1.53205 4.26306 4.25061C1.5445 6.96917 0.0157612 10.6554 0.0124512 14.5V49.6725C0.0124512 53.5181 1.54013 57.2063 4.2594 59.9255C6.97868 62.6448 10.6668 64.1725 14.5125 64.1725H49.6724C53.5181 64.1725 57.2062 62.6448 59.9255 59.9255C62.6448 57.2063 64.1724 53.5181 64.1724 49.6725V14.5125C64.1741 12.6073 63.8003 10.7204 63.0723 8.95975C62.3443 7.19909 61.2765 5.59914 59.9299 4.25137C58.5833 2.9036 56.9843 1.83442 55.2243 1.10494C53.4642 0.375468 51.5777 -7.07943e-07 49.6724 0ZM37.31 47.895C35.6883 47.9182 34.0783 47.6188 32.5734 47.0143C31.0685 46.4098 29.6988 45.5121 28.5439 44.3736C27.389 43.235 26.4718 41.8783 25.8459 40.3822C25.2199 38.8861 24.8975 37.2805 24.8975 35.6587C24.8975 34.037 25.2199 32.4314 25.8459 30.9353C26.4718 29.4392 27.389 28.0825 28.5439 26.9439C29.6988 25.8054 31.0685 24.9077 32.5734 24.3032C34.0783 23.6987 35.6883 23.3993 37.31 23.4225H51.115V19.62L58.2124 25.5275L51.1024 31.4425V27.56H37.1325C32.855 27.56 29.3175 31.3825 29.3175 35.6575C29.2707 36.7362 29.4428 37.8132 29.8234 38.8237C30.204 39.8341 30.7852 40.757 31.5319 41.5369C32.2787 42.3167 33.1756 42.9373 34.1686 43.3613C35.1617 43.7853 36.2302 44.0038 37.31 44.0038C38.3897 44.0038 39.4582 43.7853 40.4513 43.3613C41.4443 42.9373 42.3412 42.3167 43.088 41.5369C43.8347 40.757 44.4159 39.8341 44.7965 38.8237C45.1771 37.8132 45.3492 36.7362 45.3025 35.6575C45.2791 33.8343 44.7343 32.0559 43.7325 30.5325H48.4224C49.1622 32.1399 49.5459 33.8881 49.5474 35.6575C49.5615 37.2684 49.2545 38.8661 48.6444 40.3571C48.0344 41.8482 47.1335 43.2028 45.9944 44.3419C44.8552 45.4811 43.5006 46.382 42.0096 46.992C40.5185 47.602 38.9209 47.909 37.31 47.895ZM20.31 43.645C21.2887 43.5967 22.2557 43.4107 23.1824 43.0925V47.2975C22.268 47.6664 21.2955 47.8703 20.31 47.9C18.2845 47.8835 16.3483 47.0644 14.9259 45.6223C13.5035 44.1803 12.7111 42.233 12.7225 40.2075V27.56H7.93995V23.4225H12.7275V18.1725H16.88V23.4225H28.2125C26.595 24.5316 25.2007 25.9352 24.1025 27.56H16.88V40.2025C16.8858 41.1119 17.2496 41.9825 17.8924 42.6258C18.5352 43.2691 19.4055 43.6334 20.3149 43.64L20.31 43.645Z"
+        fill="#DADADA"
+      />
+    </g>
+  </Symbol>
+);

package/src/components/symbol/components/symbols/pay-to-white-symbol.tsx

@@ -0,0 +1,30 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Symbol } from '../../symbol.component.js';
+import { type SymbolProps } from '../../symbol.types.js';
+
+export const PayToWhiteSymbol = ({
+  'aria-label': ariaLabel = 'PayTo',
+  copyrightYear = '',
+  viewBoxWidth = 65,
+  viewBoxHeight = 65,
+  className,
+  ...props
+}: SymbolProps) => (
+  <Symbol
+    className={clsx('size-[65px]', className)}
+    aria-label={ariaLabel}
+    copyrightYear={copyrightYear}
+    viewBoxWidth={viewBoxWidth}
+    viewBoxHeight={viewBoxHeight}
+    {...props}
+  >
+    <g clip-path="url(#clip0_2267_107)">
+      <path
+        d="M49.6724 0H14.5125C10.6678 0.00331005 6.98162 1.53205 4.26306 4.25061C1.5445 6.96917 0.0157612 10.6554 0.0124512 14.5V49.6725C0.0124512 53.5181 1.54013 57.2063 4.2594 59.9255C6.97868 62.6448 10.6668 64.1725 14.5125 64.1725H49.6724C53.5181 64.1725 57.2062 62.6448 59.9255 59.9255C62.6448 57.2063 64.1724 53.5181 64.1724 49.6725V14.5125C64.1741 12.6073 63.8003 10.7204 63.0723 8.95975C62.3443 7.19909 61.2765 5.59914 59.9299 4.25137C58.5833 2.9036 56.9843 1.83442 55.2243 1.10494C53.4642 0.375468 51.5777 -7.07943e-07 49.6724 0ZM37.31 47.895C35.6883 47.9182 34.0783 47.6188 32.5734 47.0143C31.0685 46.4098 29.6988 45.5121 28.5439 44.3736C27.389 43.235 26.4718 41.8783 25.8459 40.3822C25.2199 38.8861 24.8975 37.2805 24.8975 35.6587C24.8975 34.037 25.2199 32.4314 25.8459 30.9353C26.4718 29.4392 27.389 28.0825 28.5439 26.9439C29.6988 25.8054 31.0685 24.9077 32.5734 24.3032C34.0783 23.6987 35.6883 23.3993 37.31 23.4225H51.115V19.62L58.2124 25.5275L51.1024 31.4425V27.56H37.1325C32.855 27.56 29.3175 31.3825 29.3175 35.6575C29.2707 36.7362 29.4428 37.8132 29.8234 38.8237C30.204 39.8341 30.7852 40.757 31.5319 41.5369C32.2787 42.3167 33.1756 42.9373 34.1686 43.3613C35.1617 43.7853 36.2302 44.0038 37.31 44.0038C38.3897 44.0038 39.4582 43.7853 40.4513 43.3613C41.4443 42.9373 42.3412 42.3167 43.088 41.5369C43.8347 40.757 44.4159 39.8341 44.7965 38.8237C45.1771 37.8132 45.3492 36.7362 45.3025 35.6575C45.2791 33.8343 44.7343 32.0559 43.7325 30.5325H48.4224C49.1622 32.1399 49.5459 33.8881 49.5474 35.6575C49.5615 37.2684 49.2545 38.8661 48.6444 40.3571C48.0344 41.8482 47.1335 43.2028 45.9944 44.3419C44.8552 45.4811 43.5006 46.382 42.0096 46.992C40.5185 47.602 38.9209 47.909 37.31 47.895ZM20.31 43.645C21.2887 43.5967 22.2557 43.4107 23.1824 43.0925V47.2975C22.268 47.6664 21.2955 47.8703 20.31 47.9C18.2845 47.8835 16.3483 47.0644 14.9259 45.6223C13.5035 44.1803 12.7111 42.233 12.7225 40.2075V27.56H7.93995V23.4225H12.7275V18.1725H16.88V23.4225H28.2125C26.595 24.5316 25.2007 25.9352 24.1025 27.56H16.88V40.2025C16.8858 41.1119 17.2496 41.9825 17.8924 42.6258C18.5352 43.2691 19.4055 43.6334 20.3149 43.64L20.31 43.645Z"
+        fill="white"
+      />
+    </g>
+  </Symbol>
+);

package/src/components/symbol/components/symbols/pay-to-wordmark-black-symbol.tsx

@@ -0,0 +1,42 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Symbol } from '../../symbol.component.js';
+import { type SymbolProps } from '../../symbol.types.js';
+
+export const PayToWordmarkBlackSymbol = ({
+  'aria-label': ariaLabel = 'PayTo Wordmark',
+  copyrightYear = '',
+  viewBoxWidth = 135,
+  viewBoxHeight = 65,
+  className,
+  ...props
+}: SymbolProps) => (
+  <Symbol
+    className={clsx('h-[42px] w-[90px]', className)}
+    aria-label={ariaLabel}
+    copyrightYear={copyrightYear}
+    viewBoxWidth={viewBoxWidth}
+    viewBoxHeight={viewBoxHeight}
+    {...props}
+  >
+    <g clip-path="url(#clip0_2266_139)">
+      <path
+        d="M0 17.555H10.135C11.7561 17.5392 13.3741 17.701 14.96 18.0375C16.2816 18.3126 17.5346 18.8498 18.645 19.6175C19.6586 20.3391 20.4738 21.3047 21.015 22.425C21.6018 23.7191 21.8865 25.1297 21.8475 26.55C21.8475 28.275 21.5258 29.7225 20.8825 30.8925C20.2624 32.039 19.3652 33.0119 18.2725 33.7225C17.098 34.4701 15.7965 34.9962 14.4325 35.275C12.9093 35.609 11.3544 35.7766 9.795 35.775H5.545V48.63H0V17.555ZM9.3875 31.1125C10.2547 31.116 11.1208 31.05 11.9775 30.915C12.7415 30.8009 13.4819 30.5637 14.17 30.2125C14.7936 29.8947 15.3229 29.4189 15.705 28.8325C16.1127 28.1432 16.3107 27.3501 16.275 26.55C16.3094 25.7714 16.111 25.0003 15.705 24.335C15.3287 23.7667 14.812 23.3051 14.205 22.995C13.5303 22.661 12.8029 22.4462 12.055 22.36C11.2324 22.2568 10.4041 22.2059 9.575 22.2075H5.5275V31.1125H9.3875Z"
+        fill="#231F20"
+      />
+      <path
+        d="M37.1151 45.9425H36.9826C36.3827 46.9455 35.4975 47.7471 34.4401 48.245C33.1983 48.8617 31.8263 49.1704 30.4401 49.145C29.5486 49.1387 28.6609 49.028 27.7951 48.815C26.8887 48.6021 26.0271 48.2306 25.2501 47.7175C24.4644 47.1973 23.805 46.508 23.3201 45.7C22.7781 44.7618 22.5096 43.6905 22.5451 42.6075C22.5451 41.0275 22.9909 39.77 23.8826 38.835C24.8438 37.8547 26.0247 37.1177 27.3276 36.685C28.8383 36.164 30.4078 35.8323 32.0001 35.6975C33.7101 35.5308 35.3843 35.4475 37.0226 35.4475V34.9225C37.0226 33.605 36.5476 32.635 35.5976 32.005C34.5841 31.3574 33.3999 31.0283 32.1976 31.06C31.0917 31.0639 29.9999 31.3078 28.9976 31.775C28.0551 32.1903 27.1942 32.7702 26.4551 33.4875L23.7351 30.275C24.9305 29.1659 26.3414 28.3149 27.8801 27.775C29.4041 27.2276 31.0108 26.946 32.6301 26.9425C34.5034 26.9425 36.0459 27.2058 37.2576 27.7325C38.3667 28.1809 39.3525 28.888 40.1326 29.795C40.8253 30.626 41.3271 31.5989 41.6026 32.645C41.8776 33.6759 42.0179 34.7381 42.0201 35.805V48.615H37.1151V45.9425ZM37.0276 39.01H35.8426C34.9959 39.01 34.1043 39.0467 33.1676 39.12C32.2886 39.1811 31.4196 39.343 30.5776 39.6025C29.8544 39.8151 29.1823 40.1732 28.6026 40.655C28.3399 40.887 28.1328 41.175 27.9965 41.4978C27.8602 41.8206 27.7982 42.17 27.8151 42.52C27.7997 42.9597 27.9136 43.3943 28.1426 43.77C28.3597 44.1044 28.6526 44.3827 28.9976 44.5825C29.3657 44.7929 29.7661 44.9407 30.1826 45.02C30.6163 45.1074 31.0577 45.1518 31.5001 45.1525C33.3134 45.1525 34.6876 44.67 35.6226 43.705C36.5576 42.74 37.0259 41.4233 37.0276 39.755V39.01Z"
+        fill="#231F20"
+      />
+      <path
+        d="M43.5952 27.5601H49.4302L55.3077 42.8701H55.3977L60.6177 27.5601H66.1027L56.1427 53.1376C55.8005 54.023 55.3901 54.8806 54.9152 55.7026C54.5011 56.418 53.9666 57.0565 53.3352 57.5901C52.694 58.1158 51.9559 58.5108 51.1627 58.7526C50.1883 59.0346 49.1769 59.1678 48.1627 59.1476C47.7227 59.1476 47.2777 59.1251 46.8252 59.0826C46.3588 59.0335 45.8967 58.9499 45.4427 58.8326L45.8752 54.2751C46.2107 54.391 46.5564 54.4747 46.9077 54.5251C47.2202 54.5664 47.535 54.5881 47.8502 54.5901C48.3262 54.602 48.8009 54.5353 49.2552 54.3926C49.6219 54.2675 49.953 54.0556 50.2202 53.7751C50.5031 53.4682 50.739 53.1211 50.9202 52.7451C51.1252 52.3351 51.3452 51.8526 51.5802 51.2976L52.6327 48.6201L43.5952 27.5601Z"
+        fill="#231F20"
+      />
+      <path
+        d="M121.457 0H86.2949C84.3891 0.00164082 82.5023 0.378644 80.7422 1.10948C78.9821 1.84032 77.3832 2.91068 76.0367 4.25945C74.6903 5.60822 73.6226 7.20899 72.8948 8.97036C72.167 10.7317 71.7933 12.6192 71.7949 14.525V49.6725C71.7949 51.5777 72.1704 53.4643 72.8999 55.2243C73.6293 56.9843 74.6985 58.5834 76.0463 59.93C77.3941 61.2766 78.994 62.3444 80.7547 63.0723C82.5153 63.8003 84.4022 64.1741 86.3074 64.1725H121.457C125.303 64.1725 128.991 62.6448 131.71 59.9256C134.43 57.2063 135.957 53.5181 135.957 49.6725V14.525C135.961 12.6187 135.588 10.7305 134.861 8.96841C134.134 7.20631 133.066 5.60489 131.719 4.25579C130.373 2.90669 128.773 1.83639 127.012 1.10614C125.251 0.37588 123.364 -2.83333e-06 121.457 0ZM109.095 47.895C105.945 47.7526 102.971 46.4011 100.793 44.1217C98.614 41.8423 97.3982 38.8106 97.3982 35.6575C97.3982 32.5044 98.614 29.4727 100.793 27.1933C102.971 24.9139 105.945 23.5624 109.095 23.42H122.9V19.62L130.002 25.525L122.892 31.4425V27.56H108.917C104.64 27.56 101.102 31.3825 101.102 35.6575C101.056 36.7362 101.228 37.8132 101.608 38.8237C101.989 39.8341 102.57 40.757 103.317 41.5369C104.064 42.3167 104.961 42.9373 105.954 43.3613C106.947 43.7853 108.015 44.0038 109.095 44.0038C110.175 44.0038 111.243 43.7853 112.236 43.3613C113.229 42.9373 114.126 42.3167 114.873 41.5369C115.62 40.757 116.201 39.8341 116.581 38.8237C116.962 37.8132 117.134 36.7362 117.087 35.6575C117.064 33.8343 116.519 32.0559 115.517 30.5325H120.207C120.947 32.1399 121.331 33.8881 121.332 35.6575C121.346 37.2685 121.039 38.8661 120.429 40.3571C119.819 41.8482 118.919 43.2028 117.779 44.3419C116.64 45.4811 115.286 46.382 113.795 46.992C112.303 47.602 110.706 47.909 109.095 47.895ZM92.0949 43.645C93.0739 43.5973 94.0411 43.4104 94.9674 43.09V47.2975C94.053 47.6664 93.0805 47.8703 92.0949 47.9C90.0695 47.8835 88.1333 47.0644 86.7109 45.6223C85.2885 44.1803 84.4961 42.233 84.5074 40.2075V27.56H79.7224V23.42H84.5124V18.17H88.6649V23.42H99.9974C98.3799 24.53 96.9856 25.9344 95.8874 27.56H88.6649V40.2025C88.6702 41.1121 89.0337 41.9831 89.6767 42.6265C90.3196 43.27 91.1903 43.6341 92.0999 43.64L92.0949 43.645Z"
+        fill="#231F20"
+      />
+    </g>
+  </Symbol>
+);

package/src/components/symbol/components/symbols/pay-to-wordmark-dark-grey-symbol.tsx

@@ -0,0 +1,42 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Symbol } from '../../symbol.component.js';
+import { type SymbolProps } from '../../symbol.types.js';
+
+export const PayToWordmarkDarkGreySymbol = ({
+  'aria-label': ariaLabel = 'PayTo Wordmark',
+  copyrightYear = '',
+  viewBoxWidth = 135,
+  viewBoxHeight = 65,
+  className,
+  ...props
+}: SymbolProps) => (
+  <Symbol
+    className={clsx('h-[42px] w-[90px]', className)}
+    aria-label={ariaLabel}
+    copyrightYear={copyrightYear}
+    viewBoxWidth={viewBoxWidth}
+    viewBoxHeight={viewBoxHeight}
+    {...props}
+  >
+    <g clip-path="url(#clip0_2266_139)">
+      <path
+        d="M0 17.555H10.135C11.7561 17.5392 13.3741 17.701 14.96 18.0375C16.2816 18.3126 17.5346 18.8498 18.645 19.6175C19.6586 20.3391 20.4738 21.3047 21.015 22.425C21.6018 23.7191 21.8865 25.1297 21.8475 26.55C21.8475 28.275 21.5258 29.7225 20.8825 30.8925C20.2624 32.039 19.3652 33.0119 18.2725 33.7225C17.098 34.4701 15.7965 34.9962 14.4325 35.275C12.9093 35.609 11.3544 35.7766 9.795 35.775H5.545V48.63H0V17.555ZM9.3875 31.1125C10.2547 31.116 11.1208 31.05 11.9775 30.915C12.7415 30.8009 13.4819 30.5637 14.17 30.2125C14.7936 29.8947 15.3229 29.4189 15.705 28.8325C16.1127 28.1432 16.3107 27.3501 16.275 26.55C16.3094 25.7714 16.111 25.0003 15.705 24.335C15.3287 23.7667 14.812 23.3051 14.205 22.995C13.5303 22.661 12.8029 22.4462 12.055 22.36C11.2324 22.2568 10.4041 22.2059 9.575 22.2075H5.5275V31.1125H9.3875Z"
+        fill="#4A4A49"
+      />
+      <path
+        d="M37.1151 45.9425H36.9826C36.3827 46.9455 35.4975 47.7471 34.4401 48.245C33.1983 48.8617 31.8263 49.1704 30.4401 49.145C29.5486 49.1387 28.6609 49.028 27.7951 48.815C26.8887 48.6021 26.0271 48.2306 25.2501 47.7175C24.4644 47.1973 23.805 46.508 23.3201 45.7C22.7781 44.7618 22.5096 43.6905 22.5451 42.6075C22.5451 41.0275 22.9909 39.77 23.8826 38.835C24.8438 37.8547 26.0247 37.1177 27.3276 36.685C28.8383 36.164 30.4078 35.8323 32.0001 35.6975C33.7101 35.5308 35.3843 35.4475 37.0226 35.4475V34.9225C37.0226 33.605 36.5476 32.635 35.5976 32.005C34.5841 31.3574 33.3999 31.0283 32.1976 31.06C31.0917 31.0639 29.9999 31.3078 28.9976 31.775C28.0551 32.1903 27.1942 32.7702 26.4551 33.4875L23.7351 30.275C24.9305 29.1659 26.3414 28.3149 27.8801 27.775C29.4041 27.2276 31.0108 26.946 32.6301 26.9425C34.5034 26.9425 36.0459 27.2058 37.2576 27.7325C38.3667 28.1809 39.3525 28.888 40.1326 29.795C40.8253 30.626 41.3271 31.5989 41.6026 32.645C41.8776 33.6759 42.0179 34.7381 42.0201 35.805V48.615H37.1151V45.9425ZM37.0276 39.01H35.8426C34.9959 39.01 34.1043 39.0467 33.1676 39.12C32.2886 39.1811 31.4196 39.343 30.5776 39.6025C29.8544 39.8151 29.1823 40.1732 28.6026 40.655C28.3399 40.887 28.1328 41.175 27.9965 41.4978C27.8602 41.8206 27.7982 42.17 27.8151 42.52C27.7997 42.9597 27.9136 43.3943 28.1426 43.77C28.3597 44.1044 28.6526 44.3827 28.9976 44.5825C29.3657 44.7929 29.7661 44.9407 30.1826 45.02C30.6163 45.1074 31.0577 45.1518 31.5001 45.1525C33.3134 45.1525 34.6876 44.67 35.6226 43.705C36.5576 42.74 37.0259 41.4233 37.0276 39.755V39.01Z"
+        fill="#4A4A49"
+      />
+      <path
+        d="M43.5952 27.5601H49.4302L55.3077 42.8701H55.3977L60.6177 27.5601H66.1027L56.1427 53.1376C55.8005 54.023 55.3901 54.8806 54.9152 55.7026C54.5011 56.418 53.9666 57.0565 53.3352 57.5901C52.694 58.1158 51.9559 58.5108 51.1627 58.7526C50.1883 59.0346 49.1769 59.1678 48.1627 59.1476C47.7227 59.1476 47.2777 59.1251 46.8252 59.0826C46.3588 59.0335 45.8967 58.9499 45.4427 58.8326L45.8752 54.2751C46.2107 54.391 46.5564 54.4747 46.9077 54.5251C47.2202 54.5664 47.535 54.5881 47.8502 54.5901C48.3262 54.602 48.8009 54.5353 49.2552 54.3926C49.6219 54.2675 49.953 54.0556 50.2202 53.7751C50.5031 53.4682 50.739 53.1211 50.9202 52.7451C51.1252 52.3351 51.3452 51.8526 51.5802 51.2976L52.6327 48.6201L43.5952 27.5601Z"
+        fill="#4A4A49"
+      />
+      <path
+        d="M121.457 0H86.2949C84.3891 0.00164082 82.5023 0.378644 80.7422 1.10948C78.9821 1.84032 77.3832 2.91068 76.0367 4.25945C74.6903 5.60822 73.6226 7.20899 72.8948 8.97036C72.167 10.7317 71.7933 12.6192 71.7949 14.525V49.6725C71.7949 51.5777 72.1704 53.4643 72.8999 55.2243C73.6293 56.9843 74.6985 58.5834 76.0463 59.93C77.3941 61.2766 78.994 62.3444 80.7547 63.0723C82.5153 63.8003 84.4022 64.1741 86.3074 64.1725H121.457C125.303 64.1725 128.991 62.6448 131.71 59.9256C134.43 57.2063 135.957 53.5181 135.957 49.6725V14.525C135.961 12.6187 135.588 10.7305 134.861 8.96841C134.134 7.20631 133.066 5.60489 131.719 4.25579C130.373 2.90669 128.773 1.83639 127.012 1.10614C125.251 0.37588 123.364 -2.83333e-06 121.457 0ZM109.095 47.895C105.945 47.7526 102.971 46.4011 100.793 44.1217C98.614 41.8423 97.3982 38.8106 97.3982 35.6575C97.3982 32.5044 98.614 29.4727 100.793 27.1933C102.971 24.9139 105.945 23.5624 109.095 23.42H122.9V19.62L130.002 25.525L122.892 31.4425V27.56H108.917C104.64 27.56 101.102 31.3825 101.102 35.6575C101.056 36.7362 101.228 37.8132 101.608 38.8237C101.989 39.8341 102.57 40.757 103.317 41.5369C104.064 42.3167 104.961 42.9373 105.954 43.3613C106.947 43.7853 108.015 44.0038 109.095 44.0038C110.175 44.0038 111.243 43.7853 112.236 43.3613C113.229 42.9373 114.126 42.3167 114.873 41.5369C115.62 40.757 116.201 39.8341 116.581 38.8237C116.962 37.8132 117.134 36.7362 117.087 35.6575C117.064 33.8343 116.519 32.0559 115.517 30.5325H120.207C120.947 32.1399 121.331 33.8881 121.332 35.6575C121.346 37.2685 121.039 38.8661 120.429 40.3571C119.819 41.8482 118.919 43.2028 117.779 44.3419C116.64 45.4811 115.286 46.382 113.795 46.992C112.303 47.602 110.706 47.909 109.095 47.895ZM92.0949 43.645C93.0739 43.5973 94.0411 43.4104 94.9674 43.09V47.2975C94.053 47.6664 93.0805 47.8703 92.0949 47.9C90.0695 47.8835 88.1333 47.0644 86.7109 45.6223C85.2885 44.1803 84.4961 42.233 84.5074 40.2075V27.56H79.7224V23.42H84.5124V18.17H88.6649V23.42H99.9974C98.3799 24.53 96.9856 25.9344 95.8874 27.56H88.6649V40.2025C88.6702 41.1121 89.0337 41.9831 89.6767 42.6265C90.3196 43.27 91.1903 43.6341 92.0999 43.64L92.0949 43.645Z"
+        fill="#4A4A49"
+      />
+    </g>
+  </Symbol>
+);