@westpac/ui 0.31.0 → 0.32.0

package/dist/components/accordion/components/accordion-item/accordion-item.styles.js

@@ -3,7 +3,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/dist/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.styles.js

@@ -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/dist/components/circle/circle.styles.d.ts

@@ -1,5 +1,5 @@
-export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "flex h-5 w-5 flex-col items-center justify-center overflow-hidden rounded-full bg-background", {
+export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "flex size-5 flex-col items-center justify-center overflow-hidden rounded-full bg-background", {
     responsiveVariants: string[];
-}, {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "flex h-5 w-5 flex-col items-center justify-center overflow-hidden rounded-full bg-background", {
+}, {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "flex size-5 flex-col items-center justify-center overflow-hidden rounded-full bg-background", {
     responsiveVariants: string[];
 }, unknown, unknown, undefined>>;

package/dist/components/circle/circle.styles.js

@@ -1,6 +1,6 @@
 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: [

package/dist/components/flexi-cell/components/flexi-cell-circle/flexi-cell-circle.styles.js

@@ -1,7 +1,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'
+        base: 'pointer-events-none size-4 text-[12px] font-bold text-muted'
     },
     variants: {}
 }, {

package/dist/components/header/header.styles.js

@@ -7,7 +7,7 @@ export const styles = tv({
         smallLogo: 'sm:hidden',
         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]',
+        leftButton: '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/dist/components/icon/icon.styles.js

@@ -3,11 +3,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/dist/components/list/components/list-item/list-item.styles.js

@@ -39,10 +39,10 @@ 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]'
+                bullet: '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: ' left-[0.125rem] top-[0.3125rem] h-1 w-2 rotate-[-44deg] border-b-[0.125rem] border-l-[0.125rem] border-r-0 border-t-0 bg-[transparent]'
@@ -80,7 +80,7 @@ export const styles = tv({
             ],
             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: [

package/dist/components/pictogram/components/decorative/wbc-bank-card-pictogram.js

@@ -18,7 +18,7 @@ import React from 'react';
 import { Pictogram } from '../../pictogram.component.js';
 export function WBCBankCardPictogram({ 'aria-label': ariaLabel = 'Bank card' , copyrightYear ='2024' , viewBoxHeight =200 , viewBoxWidth =200 , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-[200px] w-[200px]', className),
+        className: clsx('size-[200px]', className),
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear,
         viewBoxHeight: viewBoxHeight,

package/dist/components/pictogram/components/informative/accessibility-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function AccessibilityPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Accessibility' , copyrightYear ='2024' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/accounts-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function AccountsPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Accounts' , copyrightYear ='2024' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/aeroplane-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function AeroplanePictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Aeroplane' , copyrightYear ='2024' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/arrow-down-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function ArrowDownPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Arrow down' , copyrightYear ='2021' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/arrow-left-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function ArrowLeftPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Arrow left' , copyrightYear ='2021' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/arrow-right-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function ArrowRightPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Arrow right' , copyrightYear ='2021' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/arrow-up-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function ArrowUpPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Arrow up' , copyrightYear ='2021' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/arrows-passing-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function ArrowsPassingPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Arrows pointing left and right' , copyrightYear ='2021' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/atm-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function ATMPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'ATM' , copyrightYear ='2024' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/australia-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function AustraliaPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Australia' , copyrightYear ='2021' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/bank-card-locked-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function BankCardLockedPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Locked bank card' , copyrightYear ='2024' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/bank-card-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function BankCardPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Bank card' , copyrightYear ='2024' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/bank-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function BankPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Bank' , copyrightYear ='2021' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/birth-certificate-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function BirthCertificatePictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Birth certificate' , copyrightYear ='2024' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/building-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function BuildingPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Building' , copyrightYear ='2021' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/buoy-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function BuoyPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Buoy' , copyrightYear ='2021' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/bus-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function BusPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Bus' , copyrightYear ='2021' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/business-person-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function BusinessPersonPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Business person' , copyrightYear ='2024' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/calculator-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function CalculatorPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Calculator' , copyrightYear ='2024' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/calendar-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function CalendarPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Calendar' , copyrightYear ='2024' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/car-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function CarPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Car' , copyrightYear ='2021' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/cash-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function CashPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Cash' , copyrightYear ='2024' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/celebration-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function CelebrationPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Celebration' , copyrightYear ='2021' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/chat-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function ChatPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Chat' , copyrightYear ='2024' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/clock-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function ClockPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Clock' , copyrightYear ='2024' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/coffee-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function CoffeePictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Coffee' , copyrightYear ='2021' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/coins-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function CoinsPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Coins' , copyrightYear ='2024' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/compass-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function CompassPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Compass' , copyrightYear ='2021' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/customer-profile-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function CustomerProfilePictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Customer profile' , copyrightYear ='2021' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/desktop-computer-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function DesktopComputerPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Desktop computer' , copyrightYear ='2024' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/document-and-pen-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function DocumentAndPenPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Document and pen' , copyrightYear ='2021' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/dollar-sign-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function DollarSignPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Dollar sign' , copyrightYear ='2024' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/drivers-licence-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function DriversLicencePictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Drivers licence' , copyrightYear ='2024' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/education-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function EducationPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Education' , copyrightYear ='2021' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/eftpos-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function EftposPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Eftpos' , copyrightYear ='2024' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/envelope-email-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function EnvelopeEmailPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Email envelope' , copyrightYear ='2024' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/envelope-printed-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function EnvelopePrintedPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Printed envelope' , copyrightYear ='2021' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/face-happy-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function FaceHappyPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Face looking happy' , copyrightYear ='2021' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/face-unhappy-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function FaceUnhappyPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Face looking unhappy' , copyrightYear ='2021' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/face-unsure-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function FaceUnsurePictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Face looking unsure' , copyrightYear ='2021' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/finger-motion-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function FingerMotionPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Hand with finger raised' , copyrightYear ='2021' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/fingerprint-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function FingerprintPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Fingerprint' , copyrightYear ='2021' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/football-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function FootballPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Football' , copyrightYear ='2021' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/fork-knife-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function ForkKnifePictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Fork and knife' , copyrightYear ='2021' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,

package/dist/components/pictogram/components/informative/generic-document-pictogram.js

@@ -19,7 +19,7 @@ import { Pictogram } from '../../pictogram.component.js';
 import { fill } from '../../pictogram.styles.js';
 export function GenericDocumentPictogram({ mode ='duo' , viewBoxWidth =78 , viewBoxHeight =78 , 'aria-label': ariaLabel = 'Generic document' , copyrightYear ='2024' , className , ...props }) {
     return React.createElement(Pictogram, _extends({
-        className: clsx('h-13 w-13', className),
+        className: clsx('size-13', className),
         viewBoxWidth: viewBoxWidth,
         viewBoxHeight: viewBoxHeight,
         "aria-label": ariaLabel,