@westpac/ui 0.44.0 → 0.47.0

package/src/components/pictogram/components/umbrella-pictogram.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Pictogram } from '../pictogram.component.js';
+import { fill } from '../pictogram.styles.js';
+import { type PictogramProps } from '../pictogram.types.js';
+
+export function UmbrellaPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Umbrella',
+  copyrightYear = '2021',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('size-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M33.463 72.144c-5.36-.098-7.302-4.975-7.3-8.23v-.007c0-1.204.978-2.181 2.182-2.18h.017a2.18 2.18 0 0 1 2.179 2.182c.009.647.196 3.806 3 3.857.929.009 1.61-.211 2.11-.695.936-.907 1.162-2.595 1.169-3.17V55.32h4.379v8.596c0 .394-.07 3.913-2.468 6.267-1.95 1.914-4.087 1.983-5.268 1.96z"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M61.249 34.714c-2.133 0-4.07.478-5.606 1.286v-.001h-.004c-.896-13.834-6.623-21.597-10.681-25.412a.01.01 0 0 1 .007.002l-.003-.002a28.06 28.06 0 0 1 2.123.66c.126.045.246.1.371.147.564.208 1.125.424 1.675.666.219.096.43.209.646.31.446.21.891.417 1.326.648.266.14.524.3.787.45.37.21.743.418 1.104.645.297.186.584.389.874.585.312.21.626.416.931.638.318.232.625.48.934.724.26.205.524.406.778.619.332.28.652.574.973.868.213.195.43.386.639.588.341.328.668.67.994 1.014.172.18.348.36.516.546.342.377.669.767.993 1.16.136.166.274.329.407.497.337.426.659.864.976 1.308.103.146.209.29.31.439.326.474.635.958.936 1.449.078.129.157.256.234.385.307.518.597 1.046.874 1.582l.172.332c.281.558.545 1.125.794 1.7l.124.292a31.374 31.374 0 0 1 1.361 3.95l.065.244c.169.644.319 1.294.448 1.952l.023.098-.005-.001c.088.458.186.913.255 1.378-1.637-1.084-3.874-1.746-6.351-1.746m-15.714 0c-2.007 0-3.834.43-5.323 1.153v-.002c-.001 0-.003 0-.005.002V10.2c0-.076-.029-.142-.043-.214l.006.003-.001-.003c.708.436 2.172 1.443 3.873 3.19l.03.032a26.51 26.51 0 0 1 .989 1.079l.094.11c.143.165.285.336.429.51l.118.148a23.236 23.236 0 0 1 .549.703c.131.174.262.352.394.535l.153.215c.126.179.252.362.378.549l.165.248c.121.185.243.375.363.569.058.09.115.182.172.275.117.192.234.39.351.59l.175.305a49.19 49.19 0 0 1 .515.945c.11.21.219.429.327.648.058.117.115.23.172.348.106.223.212.453.316.684.055.122.112.242.166.367.104.238.205.482.306.727.052.126.105.249.155.377.102.255.2.517.297.78.047.127.096.252.142.38.099.279.195.566.291.854.04.12.082.239.121.362.101.315.196.639.291.965.03.104.062.204.093.309.108.386.212.782.312 1.184l.038.147c.338 1.377.622 2.846.839 4.412.009.06.016.126.024.187.061.458.119.922.169 1.397.012.112.02.229.031.342.038.38.076.758.105 1.149l-.005-.002c.049.642.089 1.295.115 1.965-1.601-1.726-4.41-2.857-7.687-2.857M37.712 10.2v25.548l-.005-.002v1.962c-.01.01-.021.02-.031.032-1.57-1.825-4.47-3.026-7.857-3.026-2.101 0-4.013.464-5.538 1.25v-.001h-.005C25.384 16.502 37.182 10.248 37.709 9.98c.019-.011.032-.03.052-.041l-.001.004.005-.004c-.019.087-.053.169-.053.262m-15.9 25.466l-.003-.002c-.037.604-.081 1.199-.096 1.827-1.613-1.68-4.383-2.777-7.609-2.777-.243 0-.483.01-.722.024-.056.003-.112.002-.167.005-.88.058-1.722.2-2.509.415v-.001c-1.078.293-2.054.72-2.88 1.256 1.975-13.436 12.584-24.41 25.54-26.45-.334.278-.688.594-1.051.93a.019.019 0 0 0 .007-.002c-4.083 3.78-9.704 11.374-10.51 24.775m11.884-28.28C18.17 9.465 5.591 23.376 5.03 39.792A54.08 54.08 0 0 0 5 40.927c0 .69.56 1.25 1.25 1.25h2.539c1.33 0 1.354-.813 1.379-1.336.075-1.574 2.463-3.885 5.689-3.48 2.585.432 4.603 1.773 4.815 3.305v.438c0 .69.585 1.25 1.306 1.25h2.249c1.284 0 1.644-.69 1.644-1.427 0-1.581 2.649-3.9 5.702-3.565 2.733.456 4.857 1.925 4.857 3.565 0 .352.281 1.307 1.282 1.412v12.98h2.5V42.323c.902-.147 1.375-.76 1.375-1.395 0-1.581 2.59-4.03 5.701-3.565 2.492.415 4.786 1.94 4.788 3.14v.602c0 .69.609 1.25 1.361 1.25h2.341c1.12 0 1.524-.838 1.524-1.427 0-1.585 2.895-3.916 5.729-3.567 2.87.467 4.819 1.996 4.819 3.484.045 1.17.607 1.51 1.391 1.51h2.231c1.264 0 1.63-.642 1.61-1.77-.174-17.115-13.474-31.734-29.7-33.422-4.373-.369-6.434-.146-9.686.224z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/unsecure-pictogram.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Pictogram } from '../pictogram.component.js';
+import { fill } from '../pictogram.styles.js';
+import { type PictogramProps } from '../pictogram.types.js';
+
+export function UnsecurePictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Unsecure',
+  copyrightYear = '2021',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('size-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <polygon
+          className={fill({ mode, highlight: true })}
+          points="46.982 30.009 44.893 27.92 36.813 36 28.733 27.92 26.644 30.009 34.724 38.089 26.644 46.169 28.733 48.258 36.813 40.178 44.893 48.258 46.982 46.169 38.902 38.089"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M61.126 35.491c0 14.786-10.432 28.462-24.312 31.944C22.932 63.953 12.5 50.276 12.5 35.491V19.683l24.313-10.94 24.312 10.94v15.808zM36.814 6.001L10 18.065V35.49c0 7.274 2.169 14.549 7.16 21.287.02.025.037.05.056.073 3.158 4.25 7.204 7.795 11.836 10.246a42.537 42.537 0 0 0 10.97 4.326l.29.07.292-.07c15.12-3.625 26.52-18.435 26.52-34.449V19.551l-30.31-13.55z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/wallet-pictogram.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Pictogram } from '../pictogram.component.js';
+import { fill } from '../pictogram.styles.js';
+import { type PictogramProps } from '../pictogram.types.js';
+
+export function WalletPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Wallet',
+  copyrightYear = '2025',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('size-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, outline: true })}
+          d="M68.8052,65.865 L11.0882,65.865 C9.1102,65.865 7.5002,64.255 7.5002,62.277 L7.5002,25.487 L7.5002,21.893 L7.5002,18.949 C8.1712,20.682 9.50878906,21.893 11.4362,21.893 L68.8052,21.893 L68.8052,65.865 Z M53.3662,19.393 L53.3662,11 L9.2482,11 C6.9022,11 5.0002,12.902 5.0002,15.248 L5.0002,19.393 L5.0002,21.347 L5.0002,62.277 C5.0002,65.634 7.7312,68.365 11.0882,68.365 L71.3052,68.365 L71.3052,19.393 L53.3662,19.393 Z"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M73.1484,32.6428 C73.7014,32.6428 74.1484,33.0908 74.1484,33.6428 L74.1484,53.6428 C74.1484,54.1948 73.7014,54.6428 73.1484,54.6428 L56.1484,54.6428 C56.0014,54.6428 55.8604,54.6108 55.7344,54.5538 C50.3274,53.8588 46.1484,49.2388 46.1484,43.6428 C46.1484,38.0468 50.3274,33.4268 55.7344,32.7328 C55.8604,32.6748 56.0014,32.6428 56.1484,32.6428 L73.1484,32.6428 Z M56.6484,39.1428 C54.1634,39.1428 52.1484,41.1578 52.1484,43.6428 C52.1484,46.1278 54.1634,48.1428 56.6484,48.1428 C59.1334,48.1428 61.1484,46.1278 61.1484,43.6428 C61.1484,41.1578 59.1334,39.1428 56.6484,39.1428 L56.6484,39.1428 Z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/wearables-pictogram.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Pictogram } from '../pictogram.component.js';
+import { fill } from '../pictogram.styles.js';
+import { type PictogramProps } from '../pictogram.types.js';
+
+export function WearablesPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Wearables',
+  copyrightYear = '2021',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('size-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M47.436 52.37h-20.7a1.94 1.94 0 0 1-1.936-1.934V24.54a1.94 1.94 0 0 1 1.935-1.934h20.701a1.94 1.94 0 0 1 1.934 1.934v25.896a1.94 1.94 0 0 1-1.934 1.934"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M52.674 51.958a3.716 3.716 0 0 1-3.711 3.711h-23.75c-1.38 0-2.573-.768-3.213-1.89v.004c-.01-.017-.016-.036-.026-.053-.1-.18-.185-.37-.253-.568a4.018 4.018 0 0 1-.11-.348 3.48 3.48 0 0 1-.042-.208 3.375 3.375 0 0 1-.07-.648V23.031a3.716 3.716 0 0 1 3.712-3.71h23.752a3.716 3.716 0 0 1 3.71 3.71v28.927zm-7.53 12.405a87.928 87.928 0 0 1-.352 1.76c-.294 1.37-1.537 2.366-2.956 2.366h-9.327c-1.42 0-2.662-.996-2.956-2.367-.12-.554-.234-1.148-.353-1.759-.42-2.17-.871-4.495-1.69-6.194h19.324c-.818 1.7-1.27 4.023-1.69 6.194zM29.198 10.625c.119-.61.234-1.204.353-1.758.294-1.372 1.537-2.367 2.956-2.367h9.327c.162 0 .32.016.476.041.092.015.178.04.267.063.054.013.109.025.16.041.122.04.236.085.349.136l.035.017a2.992 2.992 0 0 1 1.672 2.07c.119.553.235 1.147.353 1.757.42 2.171.87 4.496 1.689 6.195H27.508c.819-1.699 1.27-4.024 1.689-6.195zm27.577 11.532c-2-2.833-3.93-4.113-5.183-4.72-.44-1.426-1.235-5.525-1.356-6.094a5.386 5.386 0 0 0-.981-2.104c-.761-.939-3.434-3.974-5.208-4.754A5.49 5.49 0 0 0 41.833 4h-9.35c-2.58.011-4.84 1.834-5.378 4.343a97.633 97.633 0 0 0-.362 1.807c-.308 1.59-.862 4.445-1.6 5.847-.267.506-.429.817-.87.902-2.98.455-5.273 3.028-5.273 6.132v28.927c0 1.342.243 2.27 1.13 3.527 2 2.833 4.459 4.5 4.459 4.5l-.007-.015c.37.27.77.494 1.196.676.425 1.407 1.206 5.43 1.327 6a5.41 5.41 0 0 0 .593 1.518s1.872 3.655 5.377 5.242a5.535 5.535 0 0 0 2.43.583h9.328c2.59 0 4.862-1.826 5.402-4.343.12-.569 1.103-8.216 2.832-8.576a6.22 6.22 0 0 0 5.104-6.11V26.03c0-1.35-.892-3.158-1.397-3.874z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/index.ts

@@ -1,98 +1,97 @@
-export { AccessibilityPictogram } from './components/informative/accessibility-pictogram.js';
-export { AccountsPictogram } from './components/informative/accounts-pictogram.js';
-export { AeroplanePictogram } from './components/informative/aeroplane-pictogram.js';
-export { ArrowDownPictogram } from './components/informative/arrow-down-pictogram.js';
-export { ArrowLeftPictogram } from './components/informative/arrow-left-pictogram.js';
-export { ArrowRightPictogram } from './components/informative/arrow-right-pictogram.js';
-export { ArrowUpPictogram } from './components/informative/arrow-up-pictogram.js';
-export { ArrowsPassingPictogram } from './components/informative/arrows-passing-pictogram.js';
-export { ATMPictogram } from './components/informative/atm-pictogram.js';
-export { AustraliaPictogram } from './components/informative/australia-pictogram.js';
-export { BankCardLockedPictogram } from './components/informative/bank-card-locked-pictogram.js';
-export { BankCardPictogram } from './components/informative/bank-card-pictogram.js';
-export { BankPictogram } from './components/informative/bank-pictogram.js';
-export { BirthCertificatePictogram } from './components/informative/birth-certificate-pictogram.js';
-export { BuildingPictogram } from './components/informative/building-pictogram.js';
-export { BuoyPictogram } from './components/informative/buoy-pictogram.js';
-export { BusPictogram } from './components/informative/bus-pictogram.js';
-export { BusinessPersonPictogram } from './components/informative/business-person-pictogram.js';
-export { CalculatorPictogram } from './components/informative/calculator-pictogram.js';
-export { CalendarPictogram } from './components/informative/calendar-pictogram.js';
-export { CarPictogram } from './components/informative/car-pictogram.js';
-export { CashPictogram } from './components/informative/cash-pictogram.js';
-export { CelebrationPictogram } from './components/informative/celebration-pictogram.js';
-export { ChatPictogram } from './components/informative/chat-pictogram.js';
-export { ClockPictogram } from './components/informative/clock-pictogram.js';
-export { CoffeePictogram } from './components/informative/coffee-pictogram.js';
-export { CoinsPictogram } from './components/informative/coins-pictogram.js';
-export { CompassPictogram } from './components/informative/compass-pictogram.js';
-export { CustomerProfilePictogram } from './components/informative/customer-profile-pictogram.js';
-export { DesktopComputerPictogram } from './components/informative/desktop-computer-pictogram.js';
-export { DocumentAndPenPictogram } from './components/informative/document-and-pen-pictogram.js';
-export { DollarSignPictogram } from './components/informative/dollar-sign-pictogram.js';
-export { DriversLicencePictogram } from './components/informative/drivers-licence-pictogram.js';
-export { EducationPictogram } from './components/informative/education-pictogram.js';
-export { EftposPictogram } from './components/informative/eftpos-pictogram.js';
-export { EnvelopeEmailPictogram } from './components/informative/envelope-email-pictogram.js';
-export { EnvelopePrintedPictogram } from './components/informative/envelope-printed-pictogram.js';
-export { FaceHappyPictogram } from './components/informative/face-happy-pictogram.js';
-export { FaceUnhappyPictogram } from './components/informative/face-unhappy-pictogram.js';
-export { FaceUnsurePictogram } from './components/informative/face-unsure-pictogram.js';
-export { FingerMotionPictogram } from './components/informative/finger-motion-pictogram.js';
-export { FingerprintPictogram } from './components/informative/fingerprint-pictogram.js';
-export { FootballPictogram } from './components/informative/football-pictogram.js';
-export { ForkKnifePictogram } from './components/informative/fork-knife-pictogram.js';
-export { GenericDocumentPictogram } from './components/informative/generic-document-pictogram.js';
-export { GiftPictogram } from './components/informative/gift-pictogram.js';
-export { GlobeAustraliaPictogram } from './components/informative/globe-australia-pictogram.js';
-export { GlobePictogram } from './components/informative/globe-pictogram.js';
-export { GraphDecreasingPictogram } from './components/informative/graph-decreasing-pictogram.js';
-export { GraphIncreasingPictogram } from './components/informative/graph-increasing-pictogram.js';
-export { GymPictogram } from './components/informative/gym-pictogram.js';
-export { HeadsetPictogram } from './components/informative/headset-pictogram.js';
-export { HeartPictogram } from './components/informative/heart-pictogram.js';
-export { HousePictogram } from './components/informative/house-pictogram.js';
-export { LightBulbPictogram } from './components/informative/light-bulb-pictogram.js';
-export { LoopPictogram } from './components/informative/loop-pictogram.js';
-export { MedicareCardPictogram } from './components/informative/medicare-card-pictogram.js';
-export { MobileDevicePictogram } from './components/informative/mobile-device-pictogram.js';
-export { MoneyInPictogram } from './components/informative/money-in-pictogram.js';
-export { MoneyOutPictogram } from './components/informative/money-out-pictogram.js';
-export { MovieTicketsPictogram } from './components/informative/movie-tickets-pictogram.js';
-export { NestEggPictogram } from './components/informative/nest-egg-pictogram.js';
-export { NoodlesPictogram } from './components/informative/noodles-pictogram.js';
-export { Number1Pictogram } from './components/informative/number-1-pictogram.js';
-export { Number2Pictogram } from './components/informative/number-2-pictogram.js';
-export { Number3Pictogram } from './components/informative/number-3-pictogram.js';
-export { Number4Pictogram } from './components/informative/number-4-pictogram.js';
-export { Number5Pictogram } from './components/informative/number-5-pictogram.js';
-export { PadlockLockedPictogram } from './components/informative/padlock-locked-pictogram.js';
-export { PadlockUnlockedPictogram } from './components/informative/padlock-unlocked-pictogram.js';
-export { PassportPictogram } from './components/informative/passport-pictogram.js';
-export { PercentSignPictogram } from './components/informative/percent-sign-pictogram.js';
-export { PersonPictogram } from './components/informative/person-pictogram.js';
-export { PiggyBankPictogram } from './components/informative/piggy-bank-pictogram.js';
-export { PizzaPictogram } from './components/informative/pizza-pictogram.js';
-export { PlantPictogram } from './components/informative/plant-pictogram.js';
-export { SearchPictogram } from './components/informative/search-pictogram.js';
-export { SecurePictogram } from './components/informative/secure-pictogram.js';
-export { ShopPictogram } from './components/informative/shop-pictogram.js';
-export { ShoppingPictogram } from './components/informative/shopping-pictogram.js';
-export { SparklePictogram } from './components/informative/sparkle-pictogram.js';
-export { StarPictogram } from './components/informative/star-pictogram.js';
-export { StopwatchPictogram } from './components/informative/stopwatch-pictogram.js';
-export { TargetPictogram } from './components/informative/target-pictogram.js';
-export { TaxDocumentPictogram } from './components/informative/tax-document-pictogram.js';
-export { TelephoneCallPictogram } from './components/informative/telephone-call-pictogram.js';
-export { ThumbsUpPictogram } from './components/informative/thumbs-up-pictogram.js';
-export { TickPictogram } from './components/informative/tick-pictogram.js';
-export { ToolsPictogram } from './components/informative/tools-pictogram.js';
-export { TractorPictogram } from './components/informative/tractor-pictogram.js';
-export { TruckPictogram } from './components/informative/truck-pictogram.js';
-export { UmbrellaPictogram } from './components/informative/umbrella-pictogram.js';
-export { UnsecurePictogram } from './components/informative/unsecure-pictogram.js';
-export { WalletPictogram } from './components/informative/wallet-pictogram.js';
-export { WearablesPictogram } from './components/informative/wearables-pictogram.js';
+export { AccessibilityPictogram } from './components/accessibility-pictogram.js';
+export { AccountsPictogram } from './components/accounts-pictogram.js';
+export { AeroplanePictogram } from './components/aeroplane-pictogram.js';
+export { ArrowDownPictogram } from './components/arrow-down-pictogram.js';
+export { ArrowLeftPictogram } from './components/arrow-left-pictogram.js';
+export { ArrowRightPictogram } from './components/arrow-right-pictogram.js';
+export { ArrowUpPictogram } from './components/arrow-up-pictogram.js';
+export { ArrowsPassingPictogram } from './components/arrows-passing-pictogram.js';
+export { ATMPictogram } from './components/atm-pictogram.js';
+export { AustraliaPictogram } from './components/australia-pictogram.js';
+export { BankCardLockedPictogram } from './components/bank-card-locked-pictogram.js';
+export { BankCardPictogram } from './components/bank-card-pictogram.js';
+export { BankPictogram } from './components/bank-pictogram.js';
+export { BirthCertificatePictogram } from './components/birth-certificate-pictogram.js';
+export { BuildingPictogram } from './components/building-pictogram.js';
+export { BuoyPictogram } from './components/buoy-pictogram.js';
+export { BusPictogram } from './components/bus-pictogram.js';
+export { BusinessPersonPictogram } from './components/business-person-pictogram.js';
+export { CalculatorPictogram } from './components/calculator-pictogram.js';
+export { CalendarPictogram } from './components/calendar-pictogram.js';
+export { CarPictogram } from './components/car-pictogram.js';
+export { CashPictogram } from './components/cash-pictogram.js';
+export { CelebrationPictogram } from './components/celebration-pictogram.js';
+export { ChatPictogram } from './components/chat-pictogram.js';
+export { ClockPictogram } from './components/clock-pictogram.js';
+export { CoffeePictogram } from './components/coffee-pictogram.js';
+export { CoinsPictogram } from './components/coins-pictogram.js';
+export { CompassPictogram } from './components/compass-pictogram.js';
+export { CustomerProfilePictogram } from './components/customer-profile-pictogram.js';
+export { DesktopComputerPictogram } from './components/desktop-computer-pictogram.js';
+export { DocumentAndPenPictogram } from './components/document-and-pen-pictogram.js';
+export { DollarSignPictogram } from './components/dollar-sign-pictogram.js';
+export { DriversLicencePictogram } from './components/drivers-licence-pictogram.js';
+export { EducationPictogram } from './components/education-pictogram.js';
+export { EftposPictogram } from './components/eftpos-pictogram.js';
+export { EnvelopeEmailPictogram } from './components/envelope-email-pictogram.js';
+export { EnvelopePrintedPictogram } from './components/envelope-printed-pictogram.js';
+export { FaceHappyPictogram } from './components/face-happy-pictogram.js';
+export { FaceUnhappyPictogram } from './components/face-unhappy-pictogram.js';
+export { FaceUnsurePictogram } from './components/face-unsure-pictogram.js';
+export { FingerMotionPictogram } from './components/finger-motion-pictogram.js';
+export { FingerprintPictogram } from './components/fingerprint-pictogram.js';
+export { FootballPictogram } from './components/football-pictogram.js';
+export { ForkKnifePictogram } from './components/fork-knife-pictogram.js';
+export { GenericDocumentPictogram } from './components/generic-document-pictogram.js';
+export { GiftPictogram } from './components/gift-pictogram.js';
+export { GlobeAustraliaPictogram } from './components/globe-australia-pictogram.js';
+export { GlobePictogram } from './components/globe-pictogram.js';
+export { GraphDecreasingPictogram } from './components/graph-decreasing-pictogram.js';
+export { GraphIncreasingPictogram } from './components/graph-increasing-pictogram.js';
+export { GymPictogram } from './components/gym-pictogram.js';
+export { HeadsetPictogram } from './components/headset-pictogram.js';
+export { HeartPictogram } from './components/heart-pictogram.js';
+export { HousePictogram } from './components/house-pictogram.js';
+export { LightBulbPictogram } from './components/light-bulb-pictogram.js';
+export { LoopPictogram } from './components/loop-pictogram.js';
+export { MedicareCardPictogram } from './components/medicare-card-pictogram.js';
+export { MobileDevicePictogram } from './components/mobile-device-pictogram.js';
+export { MoneyInPictogram } from './components/money-in-pictogram.js';
+export { MoneyOutPictogram } from './components/money-out-pictogram.js';
+export { MovieTicketsPictogram } from './components/movie-tickets-pictogram.js';
+export { NestEggPictogram } from './components/nest-egg-pictogram.js';
+export { NoodlesPictogram } from './components/noodles-pictogram.js';
+export { Number1Pictogram } from './components/number-1-pictogram.js';
+export { Number2Pictogram } from './components/number-2-pictogram.js';
+export { Number3Pictogram } from './components/number-3-pictogram.js';
+export { Number4Pictogram } from './components/number-4-pictogram.js';
+export { Number5Pictogram } from './components/number-5-pictogram.js';
+export { PadlockLockedPictogram } from './components/padlock-locked-pictogram.js';
+export { PadlockUnlockedPictogram } from './components/padlock-unlocked-pictogram.js';
+export { PassportPictogram } from './components/passport-pictogram.js';
+export { PercentSignPictogram } from './components/percent-sign-pictogram.js';
+export { PersonPictogram } from './components/person-pictogram.js';
+export { PiggyBankPictogram } from './components/piggy-bank-pictogram.js';
+export { PizzaPictogram } from './components/pizza-pictogram.js';
+export { PlantPictogram } from './components/plant-pictogram.js';
+export { SearchPictogram } from './components/search-pictogram.js';
+export { SecurePictogram } from './components/secure-pictogram.js';
+export { ShopPictogram } from './components/shop-pictogram.js';
+export { ShoppingPictogram } from './components/shopping-pictogram.js';
+export { SparklePictogram } from './components/sparkle-pictogram.js';
+export { StarPictogram } from './components/star-pictogram.js';
+export { StopwatchPictogram } from './components/stopwatch-pictogram.js';
+export { TargetPictogram } from './components/target-pictogram.js';
+export { TaxDocumentPictogram } from './components/tax-document-pictogram.js';
+export { TelephoneCallPictogram } from './components/telephone-call-pictogram.js';
+export { ThumbsUpPictogram } from './components/thumbs-up-pictogram.js';
+export { TickPictogram } from './components/tick-pictogram.js';
+export { ToolsPictogram } from './components/tools-pictogram.js';
+export { TractorPictogram } from './components/tractor-pictogram.js';
+export { TruckPictogram } from './components/truck-pictogram.js';
+export { UmbrellaPictogram } from './components/umbrella-pictogram.js';
+export { UnsecurePictogram } from './components/unsecure-pictogram.js';
+export { WalletPictogram } from './components/wallet-pictogram.js';
+export { WearablesPictogram } from './components/wearables-pictogram.js';
 
-export { WBCBankCardPictogram } from './components/decorative/wbc-bank-card-pictogram.js';
 export { type PictogramProps, type PictogramMode } from './pictogram.types.js';

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

@@ -35,7 +35,7 @@ export function BasePanel({
           <Button
             look="link"
             size="small"
-            onClick={state.close}
+            onClick={() => state.close()}
             className={styles.closeBtn()}
             iconAfter={() => <CloseIcon color="muted" size="small" aria-hidden />}
             aria-label="Close popover"

package/src/components/progress-indicator/progress-indicator.component.tsx

@@ -30,6 +30,8 @@ export function ProgressIndicator({
     xsmall: { strokeWidth: 30 },
   };
 
+  // TODO: fix this properly
+  // eslint-disable-next-line @typescript-eslint/no-base-to-string
   const strokeHalfWidth = sizeMap[size.toString()].strokeWidth / 2;
 
   return (

package/src/components/progress-rope/components/progress-rope-group-step/progress-rope-group-step.component.tsx

@@ -1,4 +1,4 @@
-import { AnimatePresence, LazyMotion, m } from 'framer-motion';
+import { AnimatePresence, LazyMotion, m } from 'motion/react';
 import React, { useId, useMemo } from 'react';
 import { useFocusRing } from 'react-aria';
 

package/src/components/progress-rope/components/progress-rope-group-step/progress-rope-group-step.utils.ts

@@ -1,3 +1,3 @@
-import { domAnimation } from 'framer-motion';
+import { domAnimation } from 'motion/react';
 
 export default domAnimation;

package/src/components/progress-rope/components/progress-rope-step/progress-rope-step.styles.ts

@@ -15,7 +15,7 @@ export const styles = tv(
         visited: {
           base: 'text-text before:absolute before:inset-y-0 before:left-1 before:z-10 before:block before:translate-y-[1.25rem] before:border-l-2 before:border-primary before:transition-colors',
           // Can't use a const without getting tailwind errors, compound slots/variants don't work correctly for this
-          // eslint-disable-next-line sonarjs/no-duplicate-string
+
           circle: 'border-[3px] border-primary bg-primary',
         },
         'non-visited': {

package/src/components/repeater/repeater.component.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { AnimatePresence, LazyMotion, m } from 'framer-motion';
+import { AnimatePresence, LazyMotion, m } from 'motion/react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useFocusRing } from 'react-aria';
 
@@ -12,11 +12,11 @@ import { VisuallyHidden } from '../index.js';
 import { styles as repeaterStyles } from './repeater.styles.js';
 import { type RepeaterProps } from './repeater.types.js';
 
-interface Action {
+type Action = {
   id?: string;
   index: number;
   type: string;
-}
+};
 
 const loadAnimations = () => import('./repeater.utils.js').then(res => res.default);
 

package/src/components/repeater/repeater.utils.tsx

@@ -1,3 +1,3 @@
-import { domAnimation } from 'framer-motion';
+import { domAnimation } from 'motion/react';
 
 export default domAnimation;

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

@@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/no-globals-shadowing */
 import React from 'react';
 
 import { styles } from './symbol.styles.js';

package/src/components/symbol/symbol.types.ts

@@ -14,7 +14,7 @@ export type SymbolProps = Omit<SVGAttributes<SVGElement>, 'offset'> & {
   /**
    * Symbol offset alignment array i.e. [left, center, right]
    */
-  offset?: Array<number | null>;
+  offset?: (number | null)[];
   /**
    * Tag to render
    */

package/src/components/table/components/table-row/table-row.component.tsx

@@ -5,13 +5,14 @@ import { TableContext } from '../../table.component.js';
 import { styles as rowStyles } from './table-row.styles.js';
 import { type TableRowProps } from './table-row.types.js';
 
-const generateHighlightMap = (highlighted: unknown[], tdCount: number) => {
-  const map = Array(tdCount).fill(false);
+const generateHighlightMap = (highlighted: unknown[], tdCount: number): boolean[] => {
+  const map = Array(tdCount).fill(false) as boolean[];
 
   highlighted.forEach(highlight => {
     if (typeof highlight === 'number') {
       map[highlight] = true;
     } else if (Array.isArray(highlight)) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       map.fill(true, highlight[0], highlight[1] + 1);
     }
   });
@@ -26,6 +27,7 @@ export function TableRow({ className, children, highlighted, ...props }: TableRo
   if (Array.isArray(highlighted)) {
     const highlightMap = generateHighlightMap(highlighted, Children.count(children));
 
+    // eslint-disable-next-line sonarjs/function-return-type
     highlightedChildren = Children.map(children, (child, index) => {
       if (highlightMap[index] === true) {
         if (index === 0 || highlightMap[index - 1] === false) {

package/src/components/tabs/components/tabs-tab/tabs-tab.component.tsx

@@ -1,12 +1,12 @@
 import React, { useRef } from 'react';
-import { Key, mergeProps, useFocusRing, useTab } from 'react-aria';
+import { mergeProps, useFocusRing, useTab } from 'react-aria';
 
 import { styles } from './tabs-tab.styles.js';
 import { type TabsTabProps } from './tabs-tab.types.js';
 
 export function TabsTab({ item: { key, rendered }, state, orientation, justify, color, look }: TabsTabProps) {
   const ref = useRef(null);
-  const { tabProps } = useTab({ key: key as Key }, state, ref);
+  const { tabProps } = useTab({ key: key }, state, ref);
   const { isFocusVisible, focusProps } = useFocusRing();
   return (
     <div

package/src/components/tabs/components/tabs-tab-panel/tabs-tab-panel.component.tsx

@@ -1,15 +1,29 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import React, { useRef } from 'react';
 import { mergeProps, useFocusRing, useTabPanel } from 'react-aria';
 
 import { styles } from './tabs-tab-panel.styles.js';
 import { type TabsTabPanelProps } from './tabs-tab-panel.types.js';
 
-export function TabsTabPanel({ className, state, look, ...props }: TabsTabPanelProps) {
+export function TabsTabPanel({ className, state, look, id, keepMounted = false, ...props }: TabsTabPanelProps) {
   const ref = useRef(null);
   const { isFocused, focusProps } = useFocusRing();
   const { tabPanelProps } = useTabPanel({ ...props }, state, ref);
+
+  const isSelected = state.selectedItem?.key === id;
+
+  // if not selected and panel does not needto be retained in DOM, return null
+  if (!isSelected && !keepMounted) {
+    return null;
+  }
   return (
-    <div {...mergeProps(tabPanelProps, focusProps)} ref={ref} className={styles({ className, look, isFocused })}>
+    <div
+      {...mergeProps(tabPanelProps, focusProps)}
+      ref={ref}
+      className={styles({ className, look, isFocused })}
+      hidden={!isSelected}
+      aria-hidden={!isSelected}
+    >
       <div className="animate-fadeIn">{state.selectedItem?.props.children}</div>
     </div>
   );

package/src/components/tabs/components/tabs-tab-panel/tabs-tab-panel.types.ts

@@ -16,6 +16,7 @@ export type TabsTabPanelProps<T = object> = {
    * Look of tab panel
    */
   look?: Variants['look'];
+  keepMounted?: boolean;
   /**
    * Tab list state
    */

package/src/components/tabs/tabs.component.tsx

@@ -4,7 +4,7 @@ import React, { useRef } from 'react';
 import { AriaLinkOptions, Key, useTabList } from 'react-aria';
 import { Item, ItemProps, useTabListState } from 'react-stately';
 
-import { TabsTab, TabsTabPanel } from './components/index.js';
+import { TabsTab, TabsTabPanel, TabsTabPanelProps } from './components/index.js';
 import { styles as tabStyles } from './tabs.styles.js';
 import { type TabsProps } from './tabs.types.js';
 
@@ -58,11 +58,20 @@ export function Tabs({
           />
         ))}
       </div>
-      <TabsTabPanel look={look} key={state.selectedItem?.key} state={state} />
+
+      {[...state.collection].map(item => (
+        <TabsTabPanel
+          look={look}
+          key={item.key}
+          id={item.key as string}
+          state={state}
+          keepMounted={(item.props as TabsTabPanelProps)?.keepMounted}
+        />
+      ))}
     </div>
   );
 }
 
 export const TabsPanel = Item as (
-  props: ItemProps<AriaLinkOptions> & AriaLinkOptions & { href?: string },
+  props: ItemProps<AriaLinkOptions> & AriaLinkOptions & { href?: string } & Omit<TabsTabPanelProps, 'state'>,
 ) => JSX.Element;

package/src/tailwind/__mocks__/utils.constants.ts

@@ -1,4 +1,3 @@
-/* eslint-disable sonarjs/no-duplicate-string */
 export const EXPECTED_SPACING = {
   '0': '0rem',
   '1': '0.375rem',

package/src/tailwind/constants/typography.ts

@@ -1,4 +1,3 @@
-/* eslint-disable sonarjs/no-duplicate-string */
 export const DEFAULT_BODY_TYPOGRAPHY = [
   '-apple-system',
   'BlinkMacSystemFont',