@westpac/ui 1.0.0-canary.9 → 1.1.0

package/src/components/symbol/components/symbols/pay-id-inverse-symbol.tsx

@@ -0,0 +1,37 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Symbol } from '../../symbol.component.js';
+import { type SymbolProps } from '../../symbol.types.js';
+
+export const PayIDInverseSymbol = ({
+  '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}
+  >
+    <g clipPath="url(#clip0_94_2075)">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M24.5167 30.5143H24.43C24.082 31.1341 23.5215 31.6426 22.749 32.0393C21.976 32.4357 21.0972 32.6344 20.1118 32.6344C19.5513 32.6344 18.967 32.5621 18.3585 32.4168C17.75 32.2713 17.1893 32.0295 16.6777 31.6906C16.1657 31.3521 15.7404 30.9064 15.4026 30.3546C15.0643 29.8028 14.8954 29.1202 14.8954 28.3068C14.8954 27.2613 15.1897 26.4289 15.7794 25.8091C16.3683 25.1896 17.1268 24.7153 18.0543 24.3859C18.9816 24.0569 20.0104 23.8389 21.1406 23.7323C22.2708 23.6261 23.3767 23.5726 24.4589 23.5726V23.2239C24.4589 22.3527 24.1446 21.7092 23.5171 21.2924C22.8889 20.8765 22.1405 20.668 21.271 20.668C20.5365 20.668 19.8315 20.8234 19.1555 21.1327C18.4789 21.4427 17.9189 21.8204 17.4747 22.2656L15.6778 20.1451C16.4698 19.4096 17.3827 18.8577 18.4165 18.4897C19.4499 18.1222 20.498 17.9379 21.5609 17.9379C22.7969 17.9379 23.8163 18.1121 24.6182 18.4608C25.4196 18.8092 26.0528 19.2645 26.5163 19.8257C26.98 20.3876 27.3034 21.0167 27.4873 21.7137C27.6706 22.4108 27.7626 23.1079 27.7626 23.805V32.2861H24.5167V30.5143ZM24.4589 25.9251V26.419C24.4589 27.5226 24.1496 28.394 23.5315 29.033C22.9128 29.672 22.0051 29.9915 20.8073 29.9915C20.5175 29.9915 20.2277 29.9625 19.9379 29.9044C19.6481 29.8462 19.3873 29.7497 19.1555 29.6139C18.9236 29.4787 18.7352 29.2995 18.5904 29.0765C18.4455 28.8543 18.373 28.5782 18.373 28.2487C18.373 27.726 18.5468 27.3149 18.8946 27.0145C19.2423 26.7146 19.6771 26.4821 20.1986 26.3172C20.7205 26.153 21.29 26.0465 21.9086 25.998C22.5268 25.9498 23.1158 25.9251 23.6763 25.9251H24.4589ZM28.7969 18.3444H32.651L36.5345 28.4812H36.5925L40.0412 18.3444H43.6637L37.0851 35.2778C36.8338 35.9166 36.5636 36.483 36.2738 36.9768C35.984 37.4706 35.636 37.8868 35.2305 38.2258C34.8247 38.5642 34.3466 38.8213 33.7957 38.9954C33.2452 39.1696 32.5833 39.2567 31.8108 39.2567C31.5208 39.2567 31.226 39.2423 30.9268 39.2133C30.6271 39.1842 30.3227 39.1306 30.0139 39.0536L30.3037 36.033C30.5356 36.1099 30.7625 36.1635 30.9848 36.1927C31.2067 36.2216 31.4146 36.2362 31.6078 36.2362C31.9746 36.2362 32.2839 36.1927 32.5352 36.1056C32.7861 36.0182 32.999 35.8827 33.1727 35.6988C33.3467 35.5144 33.5011 35.2872 33.6366 35.0163C33.7715 34.745 33.9165 34.4252 34.0712 34.0578L34.7668 32.2861L28.7969 18.3444ZM0 11.7222H6.69451C7.87261 11.7222 8.93543 11.8291 9.88233 12.0416C10.8286 12.2551 11.6401 12.6037 12.3166 13.0874C12.9927 13.5715 13.5142 14.1912 13.8815 14.9462C14.2482 15.7015 14.432 16.6117 14.432 17.6766C14.432 18.8193 14.2193 19.7777 13.7946 20.552C13.3694 21.3267 12.7949 21.9512 12.0702 22.4253C11.3458 22.9002 10.5004 23.2434 9.53455 23.4563C8.56817 23.6696 7.54431 23.776 6.46266 23.776H3.65169V32.2861H0V11.7222ZM6.20191 20.6969C6.80053 20.6969 7.37042 20.6536 7.91158 20.5664C8.4524 20.4793 8.93543 20.3244 9.36066 20.1018C9.78539 19.8795 10.1236 19.5743 10.3751 19.1869C10.6258 18.7997 10.7516 18.2964 10.7516 17.6766C10.7516 17.0765 10.6258 16.5874 10.3751 16.2096C10.1236 15.8322 9.79035 15.5371 9.37519 15.3238C8.95954 15.1109 8.48626 14.9707 7.95501 14.9027C7.42343 14.8352 6.87782 14.8009 6.31767 14.8009H3.65169V20.6969H6.20191ZM56.8667 0H80.8667C85.8373 0 89.8667 4.02944 89.8667 9V33C89.8667 37.9706 85.8373 42 80.8667 42H56.8667C51.8962 42 47.8667 37.9706 47.8667 33V9C47.8667 4.02944 51.8962 0 56.8667 0ZM65.6692 10.2191V25.3042H68.3841V12.7102C70.7012 12.6926 75.7507 13.1719 77.5336 17.4035L80.0355 16.3496C78.7269 13.2431 76.0002 11.1736 72.1503 10.3646C69.3673 9.78005 66.9638 10.0618 66.8628 10.0739L65.6692 10.2191ZM57.099 11.9407C57.099 13.0612 58.0075 13.9698 59.1281 13.9698C60.2488 13.9698 61.1572 13.0612 61.1572 11.9407C61.1572 10.82 60.2488 9.91158 59.1281 9.91158C58.0075 9.91158 57.099 10.82 57.099 11.9407ZM80.7012 23.4989L83.4554 23.5018L79.5725 18.6304L75.6981 23.4935L77.9487 23.4959C77.8438 24.0595 77.708 24.5557 77.5483 24.9304C76.1756 28.1542 72.7286 29.7889 67.3039 29.7889H60.3911V17.5176H57.6762V32.5038H67.3039C73.9196 32.5038 78.2068 30.3135 80.0463 25.9941C80.3315 25.3241 80.5546 24.4597 80.7012 23.4989Z"
+        className="fill-white"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_94_2075">
+        <rect width="90" height="42" fill="white" />
+      </clipPath>
+    </defs>
+  </Symbol>
+);

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

@@ -20,9 +20,18 @@ export const PayIDSymbol = ({
     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"
-    />
+    <g clipPath="url(#clip0_94_2071)">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M24.5167 30.5143H24.43C24.082 31.1341 23.5215 31.6426 22.749 32.0393C21.976 32.4357 21.0972 32.6344 20.1118 32.6344C19.5513 32.6344 18.967 32.5621 18.3585 32.4168C17.75 32.2713 17.1893 32.0295 16.6777 31.6906C16.1657 31.3521 15.7404 30.9064 15.4026 30.3546C15.0643 29.8028 14.8954 29.1202 14.8954 28.3068C14.8954 27.2613 15.1897 26.4289 15.7794 25.8091C16.3683 25.1896 17.1268 24.7153 18.0543 24.3859C18.9816 24.0569 20.0104 23.8389 21.1406 23.7323C22.2708 23.6261 23.3767 23.5726 24.4589 23.5726V23.2239C24.4589 22.3527 24.1446 21.7092 23.5171 21.2924C22.8889 20.8765 22.1405 20.668 21.271 20.668C20.5365 20.668 19.8315 20.8234 19.1555 21.1327C18.4789 21.4427 17.9189 21.8204 17.4747 22.2656L15.6778 20.1451C16.4698 19.4096 17.3827 18.8577 18.4165 18.4897C19.4499 18.1222 20.498 17.9379 21.5609 17.9379C22.7969 17.9379 23.8163 18.1121 24.6182 18.4608C25.4196 18.8092 26.0528 19.2645 26.5163 19.8257C26.98 20.3876 27.3034 21.0167 27.4873 21.7137C27.6706 22.4108 27.7626 23.1079 27.7626 23.805V32.2861H24.5167V30.5143ZM24.4589 25.9251V26.419C24.4589 27.5226 24.1496 28.394 23.5315 29.033C22.9128 29.672 22.0051 29.9915 20.8073 29.9915C20.5175 29.9915 20.2277 29.9625 19.9379 29.9044C19.6481 29.8462 19.3873 29.7497 19.1555 29.6139C18.9236 29.4787 18.7352 29.2995 18.5904 29.0765C18.4455 28.8543 18.373 28.5782 18.373 28.2487C18.373 27.726 18.5468 27.3149 18.8946 27.0145C19.2423 26.7146 19.6771 26.4821 20.1986 26.3172C20.7205 26.153 21.29 26.0465 21.9086 25.998C22.5268 25.9498 23.1158 25.9251 23.6763 25.9251H24.4589ZM28.7969 18.3444H32.651L36.5345 28.4812H36.5925L40.0412 18.3444H43.6637L37.0851 35.2778C36.8338 35.9166 36.5636 36.483 36.2738 36.9768C35.984 37.4706 35.636 37.8868 35.2305 38.2258C34.8247 38.5642 34.3466 38.8213 33.7957 38.9954C33.2452 39.1696 32.5833 39.2567 31.8108 39.2567C31.5208 39.2567 31.226 39.2423 30.9268 39.2133C30.6271 39.1842 30.3227 39.1306 30.0139 39.0536L30.3037 36.033C30.5356 36.1099 30.7625 36.1635 30.9848 36.1927C31.2067 36.2216 31.4146 36.2362 31.6078 36.2362C31.9746 36.2362 32.2839 36.1927 32.5352 36.1056C32.7861 36.0182 32.999 35.8827 33.1727 35.6988C33.3467 35.5144 33.5011 35.2872 33.6366 35.0163C33.7715 34.745 33.9165 34.4252 34.0712 34.0578L34.7668 32.2861L28.7969 18.3444ZM0 11.7222H6.69451C7.87261 11.7222 8.93543 11.8291 9.88233 12.0416C10.8286 12.2551 11.6401 12.6037 12.3166 13.0874C12.9927 13.5715 13.5142 14.1912 13.8815 14.9462C14.2482 15.7015 14.432 16.6117 14.432 17.6766C14.432 18.8193 14.2193 19.7777 13.7946 20.552C13.3694 21.3267 12.7949 21.9512 12.0702 22.4253C11.3458 22.9002 10.5004 23.2434 9.53455 23.4563C8.56817 23.6696 7.54431 23.776 6.46266 23.776H3.65169V32.2861H0V11.7222ZM6.20191 20.6969C6.80053 20.6969 7.37042 20.6536 7.91158 20.5664C8.4524 20.4793 8.93543 20.3244 9.36066 20.1018C9.78539 19.8795 10.1236 19.5743 10.3751 19.1869C10.6258 18.7997 10.7516 18.2964 10.7516 17.6766C10.7516 17.0765 10.6258 16.5874 10.3751 16.2096C10.1236 15.8322 9.79035 15.5371 9.37519 15.3238C8.95954 15.1109 8.48626 14.9707 7.95501 14.9027C7.42343 14.8352 6.87782 14.8009 6.31767 14.8009H3.65169V20.6969H6.20191ZM56.8667 0H80.8667C85.8373 0 89.8667 4.02944 89.8667 9V33C89.8667 37.9706 85.8373 42 80.8667 42H56.8667C51.8962 42 47.8667 37.9706 47.8667 33V9C47.8667 4.02944 51.8962 0 56.8667 0ZM65.6692 10.2191V25.3042H68.3841V12.7102C70.7012 12.6926 75.7507 13.1719 77.5336 17.4035L80.0355 16.3496C78.7269 13.2431 76.0002 11.1736 72.1503 10.3646C69.3673 9.78005 66.9638 10.0618 66.8628 10.0739L65.6692 10.2191ZM57.099 11.9407C57.099 13.0612 58.0075 13.9698 59.1281 13.9698C60.2488 13.9698 61.1572 13.0612 61.1572 11.9407C61.1572 10.82 60.2488 9.91158 59.1281 9.91158C58.0075 9.91158 57.099 10.82 57.099 11.9407ZM80.7012 23.4989L83.4554 23.5018L79.5725 18.6304L75.6981 23.4935L77.9487 23.4959C77.8438 24.0595 77.708 24.5557 77.5483 24.9304C76.1756 28.1542 72.7286 29.7889 67.3039 29.7889H60.3911V17.5176H57.6762V32.5038H67.3039C73.9196 32.5038 78.2068 30.3135 80.0463 25.9941C80.3315 25.3241 80.5546 24.4597 80.7012 23.4989Z"
+        className="fill-black"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_94_2071">
+        <rect width="90" height="42" fill="white" />
+      </clipPath>
+    </defs>
   </Symbol>
 );

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

@@ -0,0 +1,35 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Symbol } from '../../symbol.component.js';
+import { type SymbolProps } from '../../symbol.types.js';
+
+export const PayToInverseSymbol = ({
+  '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 clipPath="url(#clip0_94_2473)">
+      <path
+        d="M49.6727 0H14.5127C10.6681 0.00331005 6.98186 1.53205 4.2633 4.25061C1.54474 6.96917 0.0160054 10.6554 0.0126953 14.5V49.6725C0.0126953 53.5181 1.54037 57.2063 4.25965 59.9255C6.97892 62.6448 10.6671 64.1725 14.5127 64.1725H49.6727C53.5183 64.1725 57.2065 62.6448 59.9257 59.9255C62.645 57.2063 64.1727 53.5181 64.1727 49.6725V14.5125C64.1743 12.6073 63.8005 10.7204 63.0725 8.95975C62.3446 7.19909 61.2768 5.59914 59.9302 4.25137C58.5836 2.9036 56.9845 1.83442 55.2245 1.10494C53.4645 0.375468 51.5779 -7.07943e-07 49.6727 0ZM37.3102 47.895C35.6886 47.9182 34.0785 47.6188 32.5737 47.0143C31.0688 46.4098 29.6991 45.5121 28.5441 44.3736C27.3892 43.235 26.4721 41.8783 25.8461 40.3822C25.2201 38.8861 24.8978 37.2805 24.8978 35.6587C24.8978 34.037 25.2201 32.4314 25.8461 30.9353C26.4721 29.4392 27.3892 28.0825 28.5441 26.9439C29.6991 25.8054 31.0688 24.9077 32.5737 24.3032C34.0785 23.6987 35.6886 23.3993 37.3102 23.4225H51.1152V19.62L58.2127 25.5275L51.1027 31.4425V27.56H37.1327C32.8552 27.56 29.3177 31.3825 29.3177 35.6575C29.271 36.7362 29.4431 37.8132 29.8236 38.8237C30.2042 39.8341 30.7854 40.757 31.5322 41.5369C32.279 42.3167 33.1759 42.9373 34.1689 43.3613C35.1619 43.7853 36.2305 44.0038 37.3102 44.0038C38.3899 44.0038 39.4585 43.7853 40.4515 43.3613C41.4445 42.9373 42.3414 42.3167 43.0882 41.5369C43.835 40.757 44.4162 39.8341 44.7967 38.8237C45.1773 37.8132 45.3494 36.7362 45.3027 35.6575C45.2793 33.8343 44.7345 32.0559 43.7327 30.5325H48.4227C49.1624 32.1399 49.5461 33.8881 49.5477 35.6575C49.5617 37.2684 49.2547 38.8661 48.6447 40.3571C48.0347 41.8482 47.1338 43.2028 45.9946 44.3419C44.8555 45.4811 43.5008 46.382 42.0098 46.992C40.5187 47.602 38.9211 47.909 37.3102 47.895ZM20.3102 43.645C21.2889 43.5967 22.2559 43.4107 23.1827 43.0925V47.2975C22.2683 47.6664 21.2958 47.8703 20.3102 47.9C18.2848 47.8835 16.3485 47.0644 14.9262 45.6223C13.5038 44.1803 12.7114 42.233 12.7227 40.2075V27.56H7.94019V23.4225H12.7277V18.1725H16.8802V23.4225H28.2127C26.5952 24.5316 25.2009 25.9352 24.1027 27.56H16.8802V40.2025C16.8861 41.1119 17.2498 41.9825 17.8926 42.6258C18.5355 43.2691 19.4058 43.6334 20.3152 43.64L20.3102 43.645Z"
+        className="fill-white"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_94_2473">
+        <rect width="64.1825" height="64.1825" fill="white" />
+      </clipPath>
+    </defs>
+  </Symbol>
+);

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

@@ -0,0 +1,35 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Symbol } from '../../symbol.component.js';
+import { type SymbolProps } from '../../symbol.types.js';
+
+export const PayToSymbol = ({
+  '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 clipPath="url(#clip0_94_2468)">
+      <path
+        d="M49.6727 0H14.5127C10.6681 0.00331005 6.98186 1.53205 4.2633 4.25061C1.54474 6.96917 0.0160054 10.6554 0.0126953 14.5V49.6725C0.0126953 53.5181 1.54037 57.2063 4.25965 59.9255C6.97892 62.6448 10.6671 64.1725 14.5127 64.1725H49.6727C53.5183 64.1725 57.2065 62.6448 59.9257 59.9255C62.645 57.2063 64.1727 53.5181 64.1727 49.6725V14.5125C64.1743 12.6073 63.8005 10.7204 63.0725 8.95975C62.3446 7.19909 61.2768 5.59914 59.9302 4.25137C58.5836 2.9036 56.9845 1.83442 55.2245 1.10494C53.4645 0.375468 51.5779 -7.07943e-07 49.6727 0ZM37.3102 47.895C35.6886 47.9182 34.0785 47.6188 32.5737 47.0143C31.0688 46.4098 29.6991 45.5121 28.5441 44.3736C27.3892 43.235 26.4721 41.8783 25.8461 40.3822C25.2201 38.8861 24.8978 37.2805 24.8978 35.6587C24.8978 34.037 25.2201 32.4314 25.8461 30.9353C26.4721 29.4392 27.3892 28.0825 28.5441 26.9439C29.6991 25.8054 31.0688 24.9077 32.5737 24.3032C34.0785 23.6987 35.6886 23.3993 37.3102 23.4225H51.1152V19.62L58.2127 25.5275L51.1027 31.4425V27.56H37.1327C32.8552 27.56 29.3177 31.3825 29.3177 35.6575C29.271 36.7362 29.4431 37.8132 29.8236 38.8237C30.2042 39.8341 30.7854 40.757 31.5322 41.5369C32.279 42.3167 33.1759 42.9373 34.1689 43.3613C35.1619 43.7853 36.2305 44.0038 37.3102 44.0038C38.3899 44.0038 39.4585 43.7853 40.4515 43.3613C41.4445 42.9373 42.3414 42.3167 43.0882 41.5369C43.835 40.757 44.4162 39.8341 44.7967 38.8237C45.1773 37.8132 45.3494 36.7362 45.3027 35.6575C45.2793 33.8343 44.7345 32.0559 43.7327 30.5325H48.4227C49.1624 32.1399 49.5461 33.8881 49.5477 35.6575C49.5617 37.2684 49.2547 38.8661 48.6447 40.3571C48.0347 41.8482 47.1338 43.2028 45.9946 44.3419C44.8555 45.4811 43.5008 46.382 42.0098 46.992C40.5187 47.602 38.9211 47.909 37.3102 47.895ZM20.3102 43.645C21.2889 43.5967 22.2559 43.4107 23.1827 43.0925V47.2975C22.2683 47.6664 21.2958 47.8703 20.3102 47.9C18.2848 47.8835 16.3485 47.0644 14.9262 45.6223C13.5038 44.1803 12.7114 42.233 12.7227 40.2075V27.56H7.94019V23.4225H12.7277V18.1725H16.8802V23.4225H28.2127C26.5952 24.5316 25.2009 25.9352 24.1027 27.56H16.8802V40.2025C16.8861 41.1119 17.2498 41.9825 17.8926 42.6258C18.5355 43.2691 19.4058 43.6334 20.3152 43.64L20.3102 43.645Z"
+        className="fill-[#231F20]"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_94_2468">
+        <rect width="64.1825" height="64.1825" fill="white" />
+      </clipPath>
+    </defs>
+  </Symbol>
+);

package/src/components/symbol/components/symbols/samsung-pay-button-inverse-symbol.tsx

@@ -0,0 +1,79 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Symbol } from '../../symbol.component.js';
+import { type SymbolProps } from '../../symbol.types.js';
+
+export const SamsungPayButtonInverseSymbol = ({
+  'aria-label': ariaLabel = 'Samsung Pay',
+  copyrightYear = '',
+  viewBoxWidth = 268,
+  viewBoxHeight = 63,
+  className,
+  ...props
+}: SymbolProps) => (
+  <Symbol
+    className={clsx('h-[63px] w-[268px]', className)}
+    aria-label={ariaLabel}
+    copyrightYear={copyrightYear}
+    viewBoxWidth={viewBoxWidth}
+    viewBoxHeight={viewBoxHeight}
+    {...props}
+  >
+    <g clip-path="url(#clip0_206_1336)">
+      <path
+        d="M257.57 0.23999H10.6302C4.89023 0.23999 0.240234 4.88999 0.240234 10.63V52.2C0.240234 57.94 4.89023 62.59 10.6302 62.59H257.57C263.31 62.59 267.96 57.94 267.96 52.2V10.63C267.96 4.88999 263.31 0.23999 257.57 0.23999Z"
+        className="fill-white"
+      />
+      <path
+        d="M133.43 36.87H133.33L128.87 21.64H121.66V40.85H126.43L126.17 25.09H126.27L131.06 40.85H137.98V21.64H133.17L133.43 36.87Z"
+        className="fill-black"
+      />
+      <path
+        d="M41.8002 21.64L38.2002 41.05H43.4502L46.1002 23.44H46.2102L48.8002 41.05H54.0102L50.4402 21.64H41.8002Z"
+        className="fill-black"
+      />
+      <path
+        d="M71.1301 21.64L68.7301 36.48H68.6301L66.2301 21.64H58.3201L57.8901 41.05H62.7501L62.8701 23.6H62.9801L66.2201 41.05H71.1401L74.3901 23.6H74.4901L74.6201 41.05H79.4701L79.0401 21.64H71.1301Z"
+        className="fill-black"
+      />
+      <path
+        d="M26.1803 26.64C26.0903 26.24 26.1103 25.84 26.1603 25.62C26.3003 25 26.7203 24.32 27.9303 24.32C29.0703 24.32 29.7303 25.02 29.7303 26.08V27.28H34.5703V25.91C34.5703 21.68 30.7703 21.02 28.0303 21.02C24.5803 21.02 21.7603 22.16 21.2403 25.33C21.1003 26.2 21.0803 26.97 21.2803 27.95C22.1203 31.92 29.0203 33.06 30.0203 35.58C30.2103 36.05 30.1503 36.65 30.0603 37.02C29.9003 37.67 29.4603 38.33 28.1703 38.33C26.9603 38.33 26.2203 37.63 26.2203 36.57V34.69H21.0103V36.19C21.0103 40.52 24.4203 41.83 28.0603 41.83C31.5703 41.83 34.4603 40.63 34.9203 37.39C35.1603 35.71 34.9803 34.62 34.9003 34.21C34.1003 30.12 26.7303 28.91 26.1803 26.64Z"
+        className="fill-black"
+      />
+      <path
+        d="M89.3305 26.69C89.2405 26.3 89.2605 25.9 89.3105 25.68C89.4505 25.06 89.8705 24.39 91.0605 24.39C92.1905 24.39 92.8505 25.08 92.8505 26.13V27.32H97.6405V25.97C97.6405 21.78 93.8805 21.13 91.1605 21.13C87.7505 21.13 84.9505 22.26 84.4505 25.39C84.3105 26.25 84.2905 27.01 84.4905 27.98C85.3205 31.91 92.1505 33.04 93.1405 35.53C93.3305 36 93.2705 36.59 93.1805 36.95C93.0205 37.59 92.5905 38.24 91.3105 38.24C90.1105 38.24 89.3805 37.55 89.3805 36.5V34.64H84.2305V36.12C84.2305 40.41 87.6005 41.7 91.2205 41.7C94.7005 41.7 97.5605 40.52 98.0105 37.31C98.2405 35.65 98.0705 34.57 97.9905 34.16C97.1605 30.14 89.8705 28.94 89.3305 26.69Z"
+        className="fill-black"
+      />
+      <path
+        d="M111.34 35.99C111.34 36.24 111.34 36.52 111.3 36.73C111.2 37.21 110.79 38.14 109.44 38.14C108.09 38.14 107.67 37.21 107.58 36.73C107.54 36.52 107.53 36.24 107.53 35.99V21.64H102.62V35.56C102.61 35.92 102.65 36.65 102.66 36.84C103 40.46 105.86 41.64 109.43 41.64C113 41.64 115.86 40.47 116.2 36.84C116.22 36.65 116.26 35.92 116.25 35.56V21.64H111.34V35.99Z"
+        className="fill-black"
+      />
+      <path
+        d="M149.95 30.15V32.98H151.94V35.8C151.94 36.05 151.93 36.32 151.89 36.54C151.8 37.06 151.31 37.95 149.91 37.95C148.51 37.95 148.02 37.06 147.92 36.54C147.88 36.32 147.87 36.05 147.88 35.8V26.93C147.88 26.61 147.9 26.27 147.96 26.01C148.07 25.53 148.48 24.6 149.89 24.6C151.37 24.6 151.74 25.58 151.83 26.01C151.89 26.29 151.89 26.75 151.89 26.75V27.84H156.79V27.19C156.79 27.19 156.81 26.53 156.74 25.91C156.38 22.27 153.37 21.11 149.93 21.11C146.49 21.11 143.55 22.28 143.12 25.91C143.08 26.23 143.04 26.84 143.04 27.19V35.36C143.04 35.73 143.05 35.99 143.11 36.64C143.43 40.17 146.5 41.44 149.94 41.44C153.38 41.44 156.44 40.18 156.77 36.64C156.83 35.99 156.84 35.73 156.84 35.36V30.16H149.95V30.15Z"
+        className="fill-black"
+      />
+      <path
+        d="M247.11 30.9C246.76 30.48 246.39 30.08 245.99 29.7C245.58 29.32 245.18 28.93 244.78 28.53C244.39 28.15 243.98 27.76 243.57 27.35C243.15 26.97 242.74 26.58 242.33 26.18C241.94 25.78 241.53 25.39 241.12 25.01C240.73 24.61 240.32 24.21 239.91 23.81C239.52 23.41 239.12 23.01 238.7 22.61L238.11 22.01C237.92 21.81 237.67 21.65 237.36 21.53H237.17C236.92 21.57 236.74 21.65 236.61 21.77C236.2 22.17 235.79 22.57 235.4 22.97L235.15 23.33C235.05 23.63 235.1 23.88 235.31 24.08C235.7 24.5 236.1 24.91 236.49 25.32C236.9 25.7 237.31 26.09 237.7 26.49C238.09 26.89 238.5 27.29 238.91 27.69C239.3 28.07 239.71 28.46 240.12 28.87C240.51 29.27 240.91 29.67 241.33 30.07C241.72 30.47 242.12 30.87 242.51 31.28L242.23 31.58C241.82 31.98 241.41 32.37 241.02 32.75C240.61 33.15 240.2 33.55 239.81 33.95C239.39 34.35 238.99 34.75 238.6 35.16C238.19 35.56 237.78 35.96 237.39 36.36C237 36.76 236.59 37.16 236.18 37.57L235.59 38.14L235.19 38.62L235.16 39.22L235.35 39.55L235.41 39.58C235.8 39.98 236.21 40.38 236.62 40.78C236.76 40.92 236.99 40.99 237.3 40.99L237.55 40.93C237.82 40.77 238.07 40.57 238.29 40.33C238.54 40.07 238.8 39.81 239.07 39.55L239.5 39.13C239.89 38.75 240.3 38.36 240.71 37.96C241.12 37.56 241.53 37.17 241.92 36.79C242.33 36.39 242.73 35.99 243.13 35.58C243.54 35.2 243.95 34.81 244.34 34.4C244.75 34 245.16 33.61 245.55 33.23C245.96 32.83 246.37 32.44 246.76 32.06L247.1 31.64L247.16 31.01L247.11 30.9Z"
+        className="fill-black"
+      />
+      <path
+        d="M180.69 21.06H173.58V41.81H177.45V35.87H180.66C184.98 35.87 188.16 32.57 188.16 28.45C188.16 24.35 184.98 21.06 180.69 21.06ZM180.4 32.28H177.44V24.63H180.4C182.7 24.63 184.27 26.34 184.27 28.44C184.27 30.58 182.7 32.28 180.4 32.28Z"
+        className="fill-black"
+      />
+      <path
+        d="M202.49 27.17C201.3 25.75 199.33 24.84 197.15 24.84C192.94 24.84 188.91 28 188.91 33.51C188.91 38.94 193.09 42.15 197.1 42.15C199.29 42.15 201.28 41.18 202.5 39.65V41.81H206.34V25.18H202.5V27.17H202.49ZM197.72 38.62C194.88 38.62 192.69 36.35 192.69 33.45C192.69 30.58 194.88 28.33 197.72 28.33C200.56 28.33 202.69 30.63 202.69 33.45C202.69 36.32 200.56 38.62 197.72 38.62Z"
+        className="fill-black"
+      />
+      <path
+        d="M220.69 25.18L216.31 36.38L211.67 25.18H207.58L214.4 40.98L210.91 49.48H214.8L224.72 25.18H220.69Z"
+        className="fill-black"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_206_1336">
+        <rect width="268" height="63" fill="white" />
+      </clipPath>
+    </defs>
+  </Symbol>
+);

package/src/components/symbol/components/symbols/samsung-pay-button-symbol.tsx

@@ -0,0 +1,79 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Symbol } from '../../symbol.component.js';
+import { type SymbolProps } from '../../symbol.types.js';
+
+export const SamsungPayButtonSymbol = ({
+  'aria-label': ariaLabel = 'Samsung Pay',
+  copyrightYear = '',
+  viewBoxWidth = 268,
+  viewBoxHeight = 63,
+  className,
+  ...props
+}: SymbolProps) => (
+  <Symbol
+    className={clsx('h-[63px] w-[268px]', className)}
+    aria-label={ariaLabel}
+    copyrightYear={copyrightYear}
+    viewBoxWidth={viewBoxWidth}
+    viewBoxHeight={viewBoxHeight}
+    {...props}
+  >
+    <g clipPath="url(#clip0_94_2479)">
+      <path
+        d="M257.57 0.23999H10.6302C4.89023 0.23999 0.240234 4.88999 0.240234 10.63V52.2C0.240234 57.94 4.89023 62.59 10.6302 62.59H257.57C263.31 62.59 267.96 57.94 267.96 52.2V10.63C267.96 4.88999 263.31 0.23999 257.57 0.23999Z"
+        className="fill-black"
+      />
+      <path
+        d="M133.43 36.87H133.33L128.87 21.64H121.66V40.85H126.43L126.17 25.09H126.27L131.06 40.85H137.98V21.64H133.17L133.43 36.87Z"
+        className="fill-white"
+      />
+      <path
+        d="M41.8002 21.64L38.2002 41.05H43.4502L46.1002 23.44H46.2102L48.8002 41.05H54.0102L50.4402 21.64H41.8002Z"
+        className="fill-white"
+      />
+      <path
+        d="M71.1301 21.64L68.7301 36.48H68.6301L66.2301 21.64H58.3201L57.8901 41.05H62.7501L62.8701 23.6H62.9801L66.2201 41.05H71.1401L74.3901 23.6H74.4901L74.6201 41.05H79.4701L79.0401 21.64H71.1301Z"
+        className="fill-white"
+      />
+      <path
+        d="M26.1803 26.64C26.0903 26.24 26.1103 25.84 26.1603 25.62C26.3003 25 26.7203 24.32 27.9303 24.32C29.0703 24.32 29.7303 25.02 29.7303 26.08V27.28H34.5703V25.91C34.5703 21.68 30.7703 21.02 28.0303 21.02C24.5803 21.02 21.7603 22.16 21.2403 25.33C21.1003 26.2 21.0803 26.97 21.2803 27.95C22.1203 31.92 29.0203 33.06 30.0203 35.58C30.2103 36.05 30.1503 36.65 30.0603 37.02C29.9003 37.67 29.4603 38.33 28.1703 38.33C26.9603 38.33 26.2203 37.63 26.2203 36.57V34.69H21.0103V36.19C21.0103 40.52 24.4203 41.83 28.0603 41.83C31.5703 41.83 34.4603 40.63 34.9203 37.39C35.1603 35.71 34.9803 34.62 34.9003 34.21C34.1003 30.12 26.7303 28.91 26.1803 26.64Z"
+        className="fill-white"
+      />
+      <path
+        d="M89.3305 26.69C89.2405 26.3 89.2605 25.9 89.3105 25.68C89.4505 25.06 89.8705 24.39 91.0605 24.39C92.1905 24.39 92.8505 25.08 92.8505 26.13V27.32H97.6405V25.97C97.6405 21.78 93.8805 21.13 91.1605 21.13C87.7505 21.13 84.9505 22.26 84.4505 25.39C84.3105 26.25 84.2905 27.01 84.4905 27.98C85.3205 31.91 92.1505 33.04 93.1405 35.53C93.3305 36 93.2705 36.59 93.1805 36.95C93.0205 37.59 92.5905 38.24 91.3105 38.24C90.1105 38.24 89.3805 37.55 89.3805 36.5V34.64H84.2305V36.12C84.2305 40.41 87.6005 41.7 91.2205 41.7C94.7005 41.7 97.5605 40.52 98.0105 37.31C98.2405 35.65 98.0705 34.57 97.9905 34.16C97.1605 30.14 89.8705 28.94 89.3305 26.69Z"
+        className="fill-white"
+      />
+      <path
+        d="M111.34 35.99C111.34 36.24 111.34 36.52 111.3 36.73C111.2 37.21 110.79 38.14 109.44 38.14C108.09 38.14 107.67 37.21 107.58 36.73C107.54 36.52 107.53 36.24 107.53 35.99V21.64H102.62V35.56C102.61 35.92 102.65 36.65 102.66 36.84C103 40.46 105.86 41.64 109.43 41.64C113 41.64 115.86 40.47 116.2 36.84C116.22 36.65 116.26 35.92 116.25 35.56V21.64H111.34V35.99Z"
+        className="fill-white"
+      />
+      <path
+        d="M149.95 30.15V32.98H151.94V35.8C151.94 36.05 151.93 36.32 151.89 36.54C151.8 37.06 151.31 37.95 149.91 37.95C148.51 37.95 148.02 37.06 147.92 36.54C147.88 36.32 147.87 36.05 147.88 35.8V26.93C147.88 26.61 147.9 26.27 147.96 26.01C148.07 25.53 148.48 24.6 149.89 24.6C151.37 24.6 151.74 25.58 151.83 26.01C151.89 26.29 151.89 26.75 151.89 26.75V27.84H156.79V27.19C156.79 27.19 156.81 26.53 156.74 25.91C156.38 22.27 153.37 21.11 149.93 21.11C146.49 21.11 143.55 22.28 143.12 25.91C143.08 26.23 143.04 26.84 143.04 27.19V35.36C143.04 35.73 143.05 35.99 143.11 36.64C143.43 40.17 146.5 41.44 149.94 41.44C153.38 41.44 156.44 40.18 156.77 36.64C156.83 35.99 156.84 35.73 156.84 35.36V30.16H149.95V30.15Z"
+        className="fill-white"
+      />
+      <path
+        d="M247.11 30.9C246.76 30.48 246.39 30.08 245.99 29.7C245.58 29.32 245.18 28.93 244.78 28.53C244.39 28.15 243.98 27.76 243.57 27.35C243.15 26.97 242.74 26.58 242.33 26.18C241.94 25.78 241.53 25.39 241.12 25.01C240.73 24.61 240.32 24.21 239.91 23.81C239.52 23.41 239.12 23.01 238.7 22.61L238.11 22.01C237.92 21.81 237.67 21.65 237.36 21.53H237.17C236.92 21.57 236.74 21.65 236.61 21.77C236.2 22.17 235.79 22.57 235.4 22.97L235.15 23.33C235.05 23.63 235.1 23.88 235.31 24.08C235.7 24.5 236.1 24.91 236.49 25.32C236.9 25.7 237.31 26.09 237.7 26.49C238.09 26.89 238.5 27.29 238.91 27.69C239.3 28.07 239.71 28.46 240.12 28.87C240.51 29.27 240.91 29.67 241.33 30.07C241.72 30.47 242.12 30.87 242.51 31.28L242.23 31.58C241.82 31.98 241.41 32.37 241.02 32.75C240.61 33.15 240.2 33.55 239.81 33.95C239.39 34.35 238.99 34.75 238.6 35.16C238.19 35.56 237.78 35.96 237.39 36.36C237 36.76 236.59 37.16 236.18 37.57L235.59 38.14L235.19 38.62L235.16 39.22L235.35 39.55L235.41 39.58C235.8 39.98 236.21 40.38 236.62 40.78C236.76 40.92 236.99 40.99 237.3 40.99L237.55 40.93C237.82 40.77 238.07 40.57 238.29 40.33C238.54 40.07 238.8 39.81 239.07 39.55L239.5 39.13C239.89 38.75 240.3 38.36 240.71 37.96C241.12 37.56 241.53 37.17 241.92 36.79C242.33 36.39 242.73 35.99 243.13 35.58C243.54 35.2 243.95 34.81 244.34 34.4C244.75 34 245.16 33.61 245.55 33.23C245.96 32.83 246.37 32.44 246.76 32.06L247.1 31.64L247.16 31.01L247.11 30.9Z"
+        className="fill-white"
+      />
+      <path
+        d="M180.69 21.0601H173.58V41.8101H177.45V35.8701H180.66C184.98 35.8701 188.16 32.5701 188.16 28.4501C188.16 24.3501 184.98 21.0601 180.69 21.0601ZM180.4 32.2801H177.44V24.6301H180.4C182.7 24.6301 184.27 26.3401 184.27 28.4401C184.27 30.5801 182.7 32.2801 180.4 32.2801Z"
+        className="fill-white"
+      />
+      <path
+        d="M202.49 27.1701C201.3 25.7501 199.33 24.8401 197.15 24.8401C192.94 24.8401 188.91 28.0001 188.91 33.5101C188.91 38.9401 193.09 42.1501 197.1 42.1501C199.29 42.1501 201.28 41.1801 202.5 39.6501V41.8101H206.34V25.1801H202.5V27.1701H202.49ZM197.72 38.6201C194.88 38.6201 192.69 36.3501 192.69 33.4501C192.69 30.5801 194.88 28.3301 197.72 28.3301C200.56 28.3301 202.69 30.6301 202.69 33.4501C202.69 36.3201 200.56 38.6201 197.72 38.6201Z"
+        className="fill-white"
+      />
+      <path
+        d="M220.69 25.1801L216.31 36.3801L211.67 25.1801H207.58L214.4 40.9801L210.91 49.4801H214.8L224.72 25.1801H220.69Z"
+        className="fill-white"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_94_2479">
+        <rect width="268" height="63" fill="white" />
+      </clipPath>
+    </defs>
+  </Symbol>
+);

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

@@ -20,12 +20,17 @@ export const VisaBlueSymbol = ({
     viewBoxHeight={viewBoxHeight}
     {...props}
   >
-    <g fill="none">
-      <path fill="#1A1F71" d="M0 37h80V0H0" />
+    <g clipPath="url(#clip0_118_1227)">
+      <path d="M0 37H80V0H0" className="fill-[#1434CB]" />
       <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"
+        d="M38.5268 7.9299L34.0668 28.7839H28.6698L33.1278 7.9299H38.5278H38.5268ZM61.2198 21.3919L64.0578 13.5649L65.6978 21.3919H61.2178H61.2198ZM67.2438 28.7839H72.2258L67.8698 7.9299H63.2698C62.2328 7.9299 61.3568 8.5319 60.9698 9.4599L52.8798 28.7839H58.5438L59.6678 25.6689H66.5878L67.2438 28.7829V28.7839ZM53.1598 21.9739C53.1818 16.4689 45.5498 16.1679 45.5998 13.7059C45.6198 12.9619 46.3358 12.1619 47.8868 11.9589C48.6608 11.8589 50.7928 11.7819 53.2098 12.8919L54.1548 8.4659C52.8548 8.0059 51.1878 7.5459 49.1078 7.5459C43.7778 7.5459 40.0248 10.3759 39.9928 14.4399C39.9628 17.4419 42.6728 19.1199 44.7148 20.1139C46.8168 21.1439 47.5248 21.7919 47.5148 22.7069C47.4978 24.1069 45.8348 24.7239 44.2868 24.7499C41.5728 24.7929 40.0028 24.0149 38.7448 23.4299L37.7718 28.0019C39.0318 28.5849 41.3568 29.0889 43.7658 29.1149C49.4328 29.1149 53.1388 26.3129 53.1598 21.9749V21.9739ZM30.8138 7.9299L22.0798 28.7839H16.3768L12.0728 12.1419C11.8168 11.1169 11.5878 10.7419 10.7928 10.3089C9.49484 9.6029 7.35284 8.9459 5.46484 8.5309L5.59684 7.9289H14.7798C15.9468 7.9289 16.9978 8.7059 17.2658 10.0549L19.5358 22.1179L25.1508 7.9279H30.8148L30.8138 7.9299Z"
+        className="fill-white"
       />
     </g>
+    <defs>
+      <clipPath id="clip0_118_1227">
+        <rect width="80" height="37" fill="white" />
+      </clipPath>
+    </defs>
   </Symbol>
 );

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

@@ -20,12 +20,17 @@ export const VisaWhiteSymbol = ({
     viewBoxHeight={viewBoxHeight}
     {...props}
   >
-    <g fill="none">
-      <path fill="#FFF" d="M0 37h80V0H0" />
+    <g clipPath="url(#clip0_118_1243)">
+      <path d="M0 37H80V0H0" className="fill-white" />
       <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"
+        d="M38.5268 7.9299L34.0668 28.7839H28.6698L33.1278 7.9299H38.5278H38.5268ZM61.2198 21.3919L64.0578 13.5649L65.6978 21.3919H61.2178H61.2198ZM67.2438 28.7839H72.2258L67.8698 7.9299H63.2698C62.2328 7.9299 61.3568 8.5319 60.9698 9.4599L52.8798 28.7839H58.5438L59.6678 25.6689H66.5878L67.2438 28.7829V28.7839ZM53.1598 21.9739C53.1818 16.4689 45.5498 16.1679 45.5998 13.7059C45.6198 12.9619 46.3358 12.1619 47.8868 11.9589C48.6608 11.8589 50.7928 11.7819 53.2098 12.8919L54.1548 8.4659C52.8548 8.0059 51.1878 7.5459 49.1078 7.5459C43.7778 7.5459 40.0248 10.3759 39.9928 14.4399C39.9628 17.4419 42.6728 19.1199 44.7148 20.1139C46.8168 21.1439 47.5248 21.7919 47.5148 22.7069C47.4978 24.1069 45.8348 24.7239 44.2868 24.7499C41.5728 24.7929 40.0028 24.0149 38.7448 23.4299L37.7718 28.0019C39.0318 28.5849 41.3568 29.0889 43.7658 29.1149C49.4328 29.1149 53.1388 26.3129 53.1598 21.9749V21.9739ZM30.8138 7.9299L22.0798 28.7839H16.3768L12.0728 12.1419C11.8168 11.1169 11.5878 10.7419 10.7928 10.3089C9.49484 9.6029 7.35284 8.9459 5.46484 8.5309L5.59684 7.9289H14.7798C15.9468 7.9289 16.9978 8.7059 17.2658 10.0549L19.5358 22.1179L25.1508 7.9279H30.8148L30.8138 7.9299Z"
+        className="fill-[#1434CB]"
       />
     </g>
+    <defs>
+      <clipPath id="clip0_118_1243">
+        <rect width="80" height="37" fill="white" />
+      </clipPath>
+    </defs>
   </Symbol>
 );

package/src/components/symbol/components/symbols/x-symbol.tsx

@@ -20,18 +20,18 @@ export const XSymbol = ({
     viewBoxHeight={viewBoxHeight}
     {...props}
   >
-    <g clip-path="url(#clip0_1842_16)">
+    <g clipPath="url(#clip0_94_846)">
       <path
         d="M30 0H2C0.89543 0 0 0.89543 0 2V30C0 31.1046 0.89543 32 2 32H30C31.1046 32 32 31.1046 32 30V2C32 0.89543 31.1046 0 30 0Z"
-        fill="black"
+        className="fill-black"
       />
       <path
         d="M18.093 14.1624L26.283 4H24.3422L17.2308 12.8238L11.551 4H5L13.589 17.3432L5 28H6.94088L14.4507 18.6817L20.449 28H27L18.0925 14.1624H18.093ZM15.4347 17.4608L14.5644 16.1321L7.6402 5.55962H10.6213L16.2092 14.0919L17.0795 15.4206L24.3431 26.5113H21.3621L15.4347 17.4613V17.4608Z"
-        fill="white"
+        className="fill-white"
       />
     </g>
     <defs>
-      <clipPath id="clip0_1842_16">
+      <clipPath id="clip0_94_846">
         <rect width="32" height="32" fill="white" />
       </clipPath>
     </defs>

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

@@ -20,19 +20,14 @@ export const YouTubeSymbol = ({
     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>
+    <path
+      d="M30 0H2C0.89543 0 0 0.89543 0 2V30C0 31.1046 0.89543 32 2 32H30C31.1046 32 32 31.1046 32 30V2C32 0.89543 31.1046 0 30 0Z"
+      className="fill-[#FF0033]"
+    />
+    <path
+      d="M6.62981 23.8463C5.59544 23.5739 4.78925 22.7727 4.49086 21.7845C4 19.9615 4 16.1614 4 16.1614C4 16.1614 4 12.3619 4.49086 10.5559C4.78864 9.55063 5.59544 8.76708 6.62981 8.49413C8.48793 8 15.9912 8 15.9912 8C15.9912 8 23.5121 8 25.3702 8.49413C26.4221 8.76649 27.2108 9.55063 27.4916 10.5559C28 12.3619 28 16.1614 28 16.1614C28 16.1614 28 19.9609 27.4916 21.7845C27.2108 22.7727 26.4221 23.5733 25.3702 23.8463C23.5121 24.3404 15.9912 24.3404 15.9912 24.3404C15.9912 24.3404 8.48793 24.3404 6.62981 23.8463ZM13.6071 19.6721L19.8309 16.162L13.6071 12.6689V19.6721Z"
+      className="fill-white"
+    />
+    <path d="M13.6074 19.6721L19.8306 16.162L13.6074 12.6689V19.6721Z" className="fill-[#FF0033]" />
   </Symbol>
 );

package/src/components/symbol/index.ts

@@ -1,4 +1,5 @@
 export { AmericanExpressSymbol } from './components/symbols/american-express-symbol.js';
+export { ApplePaySymbol } from './components/symbols/apple-pay-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';
@@ -10,8 +11,6 @@ export { BTLogo } from './components/logos/bt-logo.js';
 export { BTPanoramaLogo } from './components/logos/bt-panorama-logo.js';
 export { BTMultibrandSmallLogo } from './components/logos/bt-multibrand-small-logo.js';
 export { BTMultibrandLargeLogo } from './components/logos/bt-multibrand-large-logo.js';
-export { BTPanoramaMultibrandSmallLogo } from './components/logos/bt-panorama-multibrand-small-logo.js';
-export { BTPanoramaMultibrandLargeLogo } from './components/logos/bt-panorama-multibrand-large-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';
@@ -19,43 +18,38 @@ 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 { EftposHorizontalInverseSymbol } from './components/symbols/eftpos-horizontal-inverse-symbol.js';
+export { EftposHorizontalSymbol } from './components/symbols/eftpos-horizontal-symbol.js';
+export { EftposVerticalInverseSymbol } from './components/symbols/eftpos-vertical-inverse-symbol.js';
+export { EftposVerticalSymbol } from './components/symbols/eftpos-vertical-symbol.js';
+export { FacebookCircularSymbol } from './components/symbols/facebook-circular-symbol.js';
 export { FacebookSymbol } from './components/symbols/facebook-symbol.js';
-export { GooglePlusSymbol } from './components/symbols/google-plus-symbol.js';
+export { GooglePayInverseSymbol } from './components/symbols/google-pay-inverse-symbol.js';
+export { GooglePaySymbol } from './components/symbols/google-pay-symbol.js';
 export { GoogleStoreSymbol } from './components/symbols/google-store-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 { PayIDInverseSymbol } from './components/symbols/pay-id-inverse-symbol.js';
 export { PayIDSymbol } from './components/symbols/pay-id-symbol.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 { PayToBlackSymbol } from './components/symbols/pay-to-black-symbol.js';
-export { PayToDarkGreySymbol } from './components/symbols/pay-to-dark-grey-symbol.js';
-export { PayToLightGreySymbol } from './components/symbols/pay-to-light-grey-symbol.js';
-export { PayToWhiteSymbol } from './components/symbols/pay-to-white-symbol.js';
-export { PayToWordmarkBlackSymbol } from './components/symbols/pay-to-wordmark-black-symbol.js';
-export { PayToWordmarkLightGreySymbol } from './components/symbols/pay-to-wordmark-light-grey-symbol.js';
-export { PayToWordmarkDarkGreySymbol } from './components/symbols/pay-to-wordmark-dark-grey-symbol.js';
-export { PayToWordmarkWhiteSymbol } from './components/symbols/pay-to-wordmark-white-symbol.js';
-export { SlackSymbol } from './components/symbols/slack-symbol.js';
+export { PayToInverseSymbol } from './components/symbols/pay-to-inverse-symbol.js';
+export { PayToSymbol } from './components/symbols/pay-to-symbol.js';
+export { SamsungPayButtonInverseSymbol } from './components/symbols/samsung-pay-button-inverse-symbol.js';
+export { SamsungPayButtonSymbol } from './components/symbols/samsung-pay-button-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 { XSymbol } from './components/symbols/x-symbol.js';
-export { XMarkSymbol } from './components/symbols/x-mark-symbol.js';
-export { XMarkInverseSymbol } from './components/symbols/x-mark-inverse-symbol.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.types.ts

@@ -3,10 +3,6 @@ import { type SVGAttributes } from 'react';
 export type Align = 'left' | 'center' | 'right';
 
 export type SymbolProps = Omit<SVGAttributes<SVGElement>, 'offset' | 'mode'> & {
-  /**
-   * mode
-   */
-  mode?: 'light' | 'dark' | 'auto';
   /**
    * SVG alignment
    */

package/src/components/tooltip/components/tooltip-content/tooltip-content.component.tsx

@@ -3,9 +3,9 @@ import React from 'react';
 import { styles } from './tooltip-content.styles.js';
 import { TooltipContentProps } from './tooltip-content.types.js';
 
-export function TooltipContent({ children, id }: TooltipContentProps) {
+export function TooltipContent({ children, id, position }: TooltipContentProps) {
   return children ? (
-    <span className={styles()} role="tooltip" id={id}>
+    <span className={styles({ position })} role="tooltip" id={id}>
       {children}
     </span>
   ) : null;

package/src/components/tooltip/components/tooltip-content/tooltip-content.styles.ts

@@ -1,5 +1,11 @@
 import { tv } from 'tailwind-variants';
 
 export const styles = tv({
-  base: 'absolute top-full left-1 z-10 mt-2 rounded-sm border border-border-muted-soft bg-surface-muted-faint p-0.5 whitespace-nowrap text-text-body',
+  base: 'absolute left-1 z-10 rounded-sm border border-border-muted-soft bg-surface-muted-faint p-0.5 whitespace-nowrap text-text-body',
+  variants: {
+    position: {
+      top: 'top-auto bottom-full',
+      bottom: 'top-full mt-2 mb-0',
+    },
+  },
 });

package/src/components/tooltip/components/tooltip-content/tooltip-content.types.ts

@@ -3,4 +3,5 @@ import { ReactNode } from 'react';
 export type TooltipContentProps = {
   children?: ReactNode;
   id: string;
+  position?: 'top' | 'bottom';
 };

package/src/components/tooltip/tooltip.component.tsx

@@ -8,7 +8,7 @@ import { styles } from './tooltip.styles.js';
 import { TooltipProps } from './tooltip.types.js';
 
 // TODO: Complete component/replace with a library that works (react-tooltip if can find a way to remove aria-described by for select)
-export function Tooltip({ children, tooltip, id, className }: TooltipProps) {
+export function Tooltip({ children, disabled, tooltip, id, className, position = 'bottom' }: TooltipProps) {
   const localId = useId();
   const [isOpen, setIsOpen] = useState(false);
   const tooltipWaitTime = useRef<NodeJS.Timeout | null>(null);
@@ -34,11 +34,12 @@ export function Tooltip({ children, tooltip, id, className }: TooltipProps) {
   }, []);
 
   useEffect(() => {
-    setIsOpen(isFocusVisible);
+    setIsOpen(isFocusVisible && !disabled);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isFocusVisible]);
 
   useEffect(() => {
-    if (isHovered && !isOpen) startTimer();
+    if (isHovered && !isOpen && !disabled) startTimer();
     if (!isHovered) setIsOpen(false);
 
     return () => stopTimer();
@@ -55,7 +56,11 @@ export function Tooltip({ children, tooltip, id, className }: TooltipProps) {
   return (
     <span {...mergeProps(hoverProps, focusProps)} className={styles({ className })}>
       {children}
-      {isOpen && <TooltipContent id={id ?? localId}>{tooltip}</TooltipContent>}
+      {isOpen && (
+        <TooltipContent id={id ?? localId} position={position}>
+          {tooltip}
+        </TooltipContent>
+      )}
     </span>
   );
 }