@westpac/ui 0.31.0 → 0.32.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.31.0",
+  "version": "0.32.1",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -257,9 +257,9 @@
     "typescript": "^5.5.4",
     "vite": "^5.2.12",
     "vitest": "^0.30.1",
-    "@westpac/ts-config": "~0.0.0",
     "@westpac/eslint-config": "~0.4.0",
-    "@westpac/test-config": "~0.0.0"
+    "@westpac/test-config": "~0.0.0",
+    "@westpac/ts-config": "~0.0.0"
   },
   "dependencies": {
     "@duetds/date-picker": "~1.4.0",

package/src/components/accordion/components/accordion-item/accordion-item.styles.ts

@@ -5,7 +5,7 @@ export const styles = tv(
     slots: {
       base: 'relative',
       itemHeader: 'typography-body-9 flex w-full items-center justify-between px-3 py-2',
-      indicator: 'h-3 w-3 rotate-90',
+      indicator: 'size-3 rotate-90',
       content: 'hidden',
     },
     variants: {

package/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.styles.ts

@@ -33,14 +33,14 @@ export const styles = tv(
       },
       size: {
         large: {
-          checkIcon: 'h-5 w-5',
+          checkIcon: 'size-5',
           base: 'mb-2',
-          checkbox: 'h-5 w-5',
+          checkbox: 'size-5',
         },
         medium: {
-          checkIcon: 'h-4 w-4',
+          checkIcon: 'size-4',
           base: 'mb-1',
-          checkbox: 'h-4 w-4',
+          checkbox: 'size-4',
         },
       },
     },

package/src/components/circle/circle.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'flex h-5 w-5 flex-col items-center justify-center overflow-hidden rounded-full bg-background',
+    base: 'flex size-5 flex-col items-center justify-center overflow-hidden rounded-full bg-background',
     variants: {},
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },

package/src/components/flexi-cell/components/flexi-cell-circle/flexi-cell-circle.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    slots: { base: 'pointer-events-none h-4 w-4 text-[12px] font-bold text-muted' },
+    slots: { base: 'pointer-events-none size-4 text-[12px] font-bold text-muted' },
     variants: {},
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },

package/src/components/header/header.styles.ts

@@ -11,7 +11,7 @@ export const styles = tv(
       largeLogo: 'max-sm:hidden',
       leftContent: 'flex items-center',
       leftButton:
-        'my-1 border-r border-[#E8E8ED] p-0 rounded-none max-sm:-ml-2 max-sm:mr-2 max-sm:h-7 max-sm:min-w-[2.625rem] sm:-ml-4 sm:mr-3 sm:h-[3.3125rem] sm:min-w-[3.75rem]',
+        'my-1 rounded-none border-r border-[#E8E8ED] p-0 max-sm:-ml-2 max-sm:mr-2 max-sm:h-7 max-sm:min-w-7 sm:-ml-4 sm:mr-3 sm:h-[3.3125rem] sm:min-w-10',
       rightContent: 'ml-auto flex items-center',
     },
     variants: {

package/src/components/icon/icon.styles.ts

@@ -5,11 +5,11 @@ export const styles = tv(
     base: 'inline-block transition-colors disabled:pointer-events-none disabled:opacity-50',
     variants: {
       size: {
-        xsmall: 'h-2 w-2',
-        small: 'h-3 w-3',
-        medium: 'h-4 w-4',
-        large: 'h-6 w-6',
-        xlarge: 'h-8 w-8',
+        xsmall: 'size-2',
+        small: 'size-3',
+        medium: 'size-4',
+        large: 'size-6',
+        xlarge: 'size-8',
       },
       color: {
         success: 'text-success',

package/src/components/list/components/list-item/list-item.styles.ts

@@ -41,11 +41,11 @@ export const styles = tv(
       },
       type: {
         bullet: {
-          bullet: 'left-[0.25rem] top-1 h-[0.5rem] w-[0.5rem] rounded-full',
+          bullet: 'left-[0.25rem] top-1 size-[0.5rem] rounded-full',
         },
         link: {
           bullet:
-            'left-[0.125rem] top-1 h-[0.5rem] w-[0.5rem] rotate-45 border-b-0 border-l-0 border-r-[0.125rem] border-t-[0.125rem] bg-[transparent]',
+            'left-[0.125rem] top-1 size-[0.5rem] rotate-45 border-b-0 border-l-0 border-r-[0.125rem] border-t-[0.125rem] bg-[transparent]',
         },
         tick: {
           bullet:
@@ -79,7 +79,7 @@ export const styles = tv(
         slots: ['bullet'],
         type: 'link',
         icon: true,
-        className: 'left-0 top-0 h-3 w-3 rotate-0 border-none bg-[transparent]',
+        className: 'left-0 top-0 size-3 rotate-0 border-none bg-[transparent]',
       },
       {
         slots: ['base'],

package/src/components/pictogram/components/decorative/wbc-bank-card-pictogram.tsx

@@ -16,7 +16,7 @@ export function WBCBankCardPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-[200px] w-[200px]', className)}
+      className={clsx('size-[200px]', className)}
       aria-label={ariaLabel}
       copyrightYear={copyrightYear}
       viewBoxHeight={viewBoxHeight}

package/src/components/pictogram/components/informative/accessibility-pictogram.tsx

@@ -18,7 +18,7 @@ export function AccessibilityPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/accounts-pictogram.tsx

@@ -18,7 +18,7 @@ export function AccountsPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/aeroplane-pictogram.tsx

@@ -18,7 +18,7 @@ export function AeroplanePictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/arrow-down-pictogram.tsx

@@ -18,7 +18,7 @@ export function ArrowDownPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/arrow-left-pictogram.tsx

@@ -18,7 +18,7 @@ export function ArrowLeftPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/arrow-right-pictogram.tsx

@@ -18,7 +18,7 @@ export function ArrowRightPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/arrow-up-pictogram.tsx

@@ -18,7 +18,7 @@ export function ArrowUpPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/arrows-passing-pictogram.tsx

@@ -18,7 +18,7 @@ export function ArrowsPassingPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/atm-pictogram.tsx

@@ -18,7 +18,7 @@ export function ATMPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/australia-pictogram.tsx

@@ -18,7 +18,7 @@ export function AustraliaPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/bank-card-locked-pictogram.tsx

@@ -18,7 +18,7 @@ export function BankCardLockedPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/bank-card-pictogram.tsx

@@ -18,7 +18,7 @@ export function BankCardPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/bank-pictogram.tsx

@@ -18,7 +18,7 @@ export function BankPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/birth-certificate-pictogram.tsx

@@ -18,7 +18,7 @@ export function BirthCertificatePictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/building-pictogram.tsx

@@ -18,7 +18,7 @@ export function BuildingPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/buoy-pictogram.tsx

@@ -18,7 +18,7 @@ export function BuoyPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/bus-pictogram.tsx

@@ -18,7 +18,7 @@ export function BusPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/business-person-pictogram.tsx

@@ -18,7 +18,7 @@ export function BusinessPersonPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/calculator-pictogram.tsx

@@ -18,7 +18,7 @@ export function CalculatorPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/calendar-pictogram.tsx

@@ -18,7 +18,7 @@ export function CalendarPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/car-pictogram.tsx

@@ -18,7 +18,7 @@ export function CarPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/cash-pictogram.tsx

@@ -18,7 +18,7 @@ export function CashPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/celebration-pictogram.tsx

@@ -18,7 +18,7 @@ export function CelebrationPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/chat-pictogram.tsx

@@ -18,7 +18,7 @@ export function ChatPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/clock-pictogram.tsx

@@ -18,7 +18,7 @@ export function ClockPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/coffee-pictogram.tsx

@@ -18,7 +18,7 @@ export function CoffeePictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/coins-pictogram.tsx

@@ -18,7 +18,7 @@ export function CoinsPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/compass-pictogram.tsx

@@ -18,7 +18,7 @@ export function CompassPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/customer-profile-pictogram.tsx

@@ -18,7 +18,7 @@ export function CustomerProfilePictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/desktop-computer-pictogram.tsx

@@ -18,7 +18,7 @@ export function DesktopComputerPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/document-and-pen-pictogram.tsx

@@ -18,7 +18,7 @@ export function DocumentAndPenPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/dollar-sign-pictogram.tsx

@@ -18,7 +18,7 @@ export function DollarSignPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/drivers-licence-pictogram.tsx

@@ -18,7 +18,7 @@ export function DriversLicencePictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/education-pictogram.tsx

@@ -18,7 +18,7 @@ export function EducationPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/eftpos-pictogram.tsx

@@ -18,7 +18,7 @@ export function EftposPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/envelope-email-pictogram.tsx

@@ -18,7 +18,7 @@ export function EnvelopeEmailPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/envelope-printed-pictogram.tsx

@@ -18,7 +18,7 @@ export function EnvelopePrintedPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/face-happy-pictogram.tsx

@@ -18,7 +18,7 @@ export function FaceHappyPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/face-unhappy-pictogram.tsx

@@ -18,7 +18,7 @@ export function FaceUnhappyPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/face-unsure-pictogram.tsx

@@ -18,7 +18,7 @@ export function FaceUnsurePictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/finger-motion-pictogram.tsx

@@ -18,7 +18,7 @@ export function FingerMotionPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/fingerprint-pictogram.tsx

@@ -18,7 +18,7 @@ export function FingerprintPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/football-pictogram.tsx

@@ -18,7 +18,7 @@ export function FootballPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/fork-knife-pictogram.tsx

@@ -18,7 +18,7 @@ export function ForkKnifePictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/generic-document-pictogram.tsx

@@ -18,7 +18,7 @@ export function GenericDocumentPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/gift-pictogram.tsx

@@ -18,7 +18,7 @@ export function GiftPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/globe-australia-pictogram.tsx

@@ -18,7 +18,7 @@ export function GlobeAustraliaPictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}

package/src/components/pictogram/components/informative/globe-pictogram.tsx

@@ -18,7 +18,7 @@ export function GlobePictogram({
 }: PictogramProps) {
   return (
     <Pictogram
-      className={clsx('h-13 w-13', className)}
+      className={clsx('size-13', className)}
       viewBoxWidth={viewBoxWidth}
       viewBoxHeight={viewBoxHeight}
       aria-label={ariaLabel}