@westpac/ui 0.30.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/components/child-care-icon.js

@@ -14,7 +14,7 @@ function _extends() {
 }
 import React, { Fragment } from 'react';
 import { Icon } from '../icon.component.js';
-export function ChildCareIcon({ look ='filled' , 'aria-label': ariaLabel = 'Child Care' , copyrightYear ='2024' , ...props }) {
+export function ChildCareIcon({ look ='filled' , 'aria-label': ariaLabel = 'Child Care' , copyrightYear ='2023' , ...props }) {
     return React.createElement(Icon, _extends({
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear

package/dist/components/icon/components/child-icon.js

@@ -14,7 +14,7 @@ function _extends() {
 }
 import React from 'react';
 import { Icon } from '../icon.component.js';
-export function ChildIcon({ 'aria-label': ariaLabel = 'Child' , copyrightYear ='2024' , ...props }) {
+export function ChildIcon({ 'aria-label': ariaLabel = 'Child' , copyrightYear ='2023' , ...props }) {
     return React.createElement(Icon, _extends({
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear

package/dist/components/icon/components/piggy-bank-icon.d.ts

@@ -0,0 +1,2 @@
+import { type IconProps } from '../icon.types.js';
+export declare function PiggyBankIcon({ look, 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/icon/components/piggy-bank-icon.js

@@ -0,0 +1,35 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React, { Fragment } from 'react';
+import { Icon } from '../icon.component.js';
+export function PiggyBankIcon({ look ='filled' , 'aria-label': ariaLabel = 'Piggy Bank' , copyrightYear ='2023' , ...props }) {
+    return React.createElement(Icon, _extends({
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear
+    }, props), look === 'filled' ? React.createElement("path", {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M.99 15.975A101.66 101.66 0 0 0 3 24h6v-3h4v3h5.6l2.01-7.92L24 14.97V6.5h-2.61l-2.73-2.63c.04-.24.095-.475.165-.705.07-.23.145-.455.225-.675.04-.1.075-.21.105-.33a1.736 1.736 0 0 0-.48-1.635A1.736 1.736 0 0 0 17.4 0c-.96 0-1.855.21-2.685.63A6.098 6.098 0 0 0 12.6 2.4h-6c-1.84 0-3.4.64-4.68 1.92C.64 5.6 0 7.16 0 9c0 2.136.42 4.19.845 6.264l.145.711ZM6 7a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1Zm12.5 3.25a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Z",
+        clipRule: "evenodd"
+    }) : React.createElement(Fragment, null, React.createElement("g", {
+        fill: "currentColor"
+    }, React.createElement("path", {
+        d: "M18.5 10.25a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM7 6a1 1 0 0 0 0 2h5a1 1 0 1 0 0-2H7Z"
+    }), React.createElement("path", {
+        fillRule: "evenodd",
+        d: "M12.6 2.4h-6c-1.84 0-3.4.64-4.68 1.92C.64 5.6 0 7.16 0 9c0 2.136.42 4.19.845 6.264l.145.711A101.66 101.66 0 0 0 3 24h6v-3h4v3h5.6l2.01-7.92L24 14.97V6.5h-2.61l-2.73-2.63c.04-.24.095-.475.165-.705.07-.23.145-.455.225-.675.04-.1.075-.21.105-.33a1.736 1.736 0 0 0-.48-1.635A1.736 1.736 0 0 0 17.4 0c-.96 0-1.855.21-2.685.63A6.098 6.098 0 0 0 12.6 2.4ZM22 8.5h-1.417l-4.069-3.92.173-1.039c.054-.324.129-.644.225-.958.058-.193.12-.384.186-.573a3.808 3.808 0 0 0-1.48.405 4.1 4.1 0 0 0-1.428 1.198l-.6.787H6.6c-1.32 0-2.368.436-3.266 1.334C2.436 6.632 2 7.681 2 9c0 1.921.378 3.772.808 5.877l.142.702A99.66 99.66 0 0 0 4.507 22H7v-3h8v3h2.044l1.898-7.478L22 13.52V8.5Z",
+        clipRule: "evenodd"
+    }))));
+}

package/dist/components/icon/components/x-icon.js

@@ -14,7 +14,7 @@ function _extends() {
 }
 import React, { Fragment } from 'react';
 import { Icon } from '../icon.component.js';
-export function XIcon({ look ='filled' , 'aria-label': ariaLabel = 'X' , copyrightYear ='2024' , ...props }) {
+export function XIcon({ look ='filled' , 'aria-label': ariaLabel = 'X' , copyrightYear ='2023' , ...props }) {
     return React.createElement(Icon, _extends({
         "aria-label": ariaLabel,
         copyrightYear: copyrightYear

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/icon/index.d.ts

@@ -41,6 +41,8 @@ export { CardlessCashIcon } from './components/cardless-cash-icon.js';
 export { CartIcon } from './components/cart-icon.js';
 export { ChatIcon } from './components/chat-icon.js';
 export { CheckIcon } from './components/check-icon.js';
+export { ChildCareIcon } from './components/child-care-icon.js';
+export { ChildIcon } from './components/child-icon.js';
 export { CircleIcon } from './components/circle-icon.js';
 export { ClearIcon } from './components/clear-icon.js';
 export { ClockIcon } from './components/clock-icon.js';
@@ -164,6 +166,7 @@ export { PercentIcon } from './components/percent-icon.js';
 export { PersonIcon } from './components/person-icon.js';
 export { PhoneIcon } from './components/phone-icon.js';
 export { PieChartIcon } from './components/pie-chart-icon.js';
+export { PiggyBankIcon } from './components/piggy-bank-icon.js';
 export { PizzaIcon } from './components/pizza-icon.js';
 export { PlaneIcon } from './components/plane-icon.js';
 export { PlayCircleIcon } from './components/play-circle-icon.js';
@@ -236,6 +239,7 @@ export { WindowsNewIcon } from './components/windows-new-icon.js';
 export { WineGlassIcon } from './components/wine-glass-icon.js';
 export { WordFileIcon } from './components/word-file-icon.js';
 export { WriteIcon } from './components/write-icon.js';
+export { XIcon } from './components/x-icon.js';
 export { YammerIcon } from './components/yammer-icon.js';
 export { YoutubeIcon } from './components/youtube-icon.js';
 export { ZipFileIcon } from './components/zip-file-icon.js';

package/dist/components/icon/index.js

@@ -41,6 +41,8 @@ export { CardlessCashIcon } from './components/cardless-cash-icon.js';
 export { CartIcon } from './components/cart-icon.js';
 export { ChatIcon } from './components/chat-icon.js';
 export { CheckIcon } from './components/check-icon.js';
+export { ChildCareIcon } from './components/child-care-icon.js';
+export { ChildIcon } from './components/child-icon.js';
 export { CircleIcon } from './components/circle-icon.js';
 export { ClearIcon } from './components/clear-icon.js';
 export { ClockIcon } from './components/clock-icon.js';
@@ -164,6 +166,7 @@ export { PercentIcon } from './components/percent-icon.js';
 export { PersonIcon } from './components/person-icon.js';
 export { PhoneIcon } from './components/phone-icon.js';
 export { PieChartIcon } from './components/pie-chart-icon.js';
+export { PiggyBankIcon } from './components/piggy-bank-icon.js';
 export { PizzaIcon } from './components/pizza-icon.js';
 export { PlaneIcon } from './components/plane-icon.js';
 export { PlayCircleIcon } from './components/play-circle-icon.js';
@@ -236,6 +239,7 @@ export { WindowsNewIcon } from './components/windows-new-icon.js';
 export { WineGlassIcon } from './components/wine-glass-icon.js';
 export { WordFileIcon } from './components/word-file-icon.js';
 export { WriteIcon } from './components/write-icon.js';
+export { XIcon } from './components/x-icon.js';
 export { YammerIcon } from './components/yammer-icon.js';
 export { YoutubeIcon } from './components/youtube-icon.js';
 export { ZipFileIcon } from './components/zip-file-icon.js';

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,