@westpac/ui 0.15.0 → 0.17.0

package/src/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.component.tsx

@@ -5,7 +5,8 @@ import { Overlay, useModalOverlay } from 'react-aria';
 
 import { BREAKPOINTS } from '../../../../tailwind/constants/index.js';
 
-import { ModalProps, Sizes } from './bottom-sheet-modal.types.js';
+import { styles as bottomSheetModalStyles } from './bottom-sheet-modal.styles.js';
+import { ModalProps } from './bottom-sheet-modal.types.js';
 
 const isBrowser = typeof window !== 'undefined';
 
@@ -18,27 +19,11 @@ function checkIfItIsMobile(breakpoint: number) {
   }
 }
 
-const SIZES: Record<Sizes, string> = {
-  xs: 'md:w-[20rem]',
-  sm: 'md:w-[32.25rem]',
-  md: 'md:w-[44.5rem]',
-  lg: 'md:w-[56.75rem]',
-  xl: 'md:w-[79rem]',
-  full: 'md:h-full md:w-full',
-};
-
 const MEDIUM_BREAKPOINT_AS_NUMBER = +BREAKPOINTS.md.replace('px', '');
 
 // TODO: discuss about the animation
-export function BottomSheetModal({
-  state,
-  height,
-  width,
-  children,
-  size = 'md',
-  portalContainer,
-  ...props
-}: ModalProps) {
+export function BottomSheetModal({ state, height, width, children, portalContainer, ...props }: ModalProps) {
+  const styles = bottomSheetModalStyles({});
   const ref = useRef(null);
   const { modalProps, underlayProps } = useModalOverlay(props, state, ref);
   const controls = useAnimation();
@@ -81,10 +66,7 @@ export function BottomSheetModal({
 
   return (
     <Overlay portalContainer={portalContainer}>
-      <div
-        className="fixed inset-0 z-10 flex animate-fadeIn flex-col justify-end bg-black/50 transition-all md:items-center md:justify-center"
-        {...underlayProps}
-      >
+      <div className={styles.underlay()} {...underlayProps}>
         <motion.div
           animate={controls}
           dragElastic={0}
@@ -103,9 +85,9 @@ export function BottomSheetModal({
             visible: { y: 0 },
             hidden: { y: '100%' },
           }}
-          className={clsx('flex flex-col', SIZES[size])}
+          className={styles.motionWrapper()}
         >
-          <div className="flex w-full flex-col" {...modalProps} ref={ref} style={{ height, width }}>
+          <div className={styles.modal()} {...modalProps} ref={ref} style={{ height, width }}>
             {children}
           </div>
         </motion.div>

package/src/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.styles.ts

@@ -0,0 +1,14 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      underlay:
+        'fixed inset-0 z-10 flex animate-fadeIn flex-col justify-end bg-black/50 transition-all md:items-center md:justify-center',
+      motionWrapper: 'flex flex-col',
+      modal: 'flex w-full flex-col',
+    },
+    variants: {},
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.types.ts

@@ -2,7 +2,6 @@ import { CSSProperties, ReactNode } from 'react';
 import { AriaModalOverlayProps } from 'react-aria';
 import { OverlayTriggerState } from 'react-stately';
 
-export type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
 export type ModalProps = AriaModalOverlayProps & {
   /**
    * Body content of Modal
@@ -16,10 +15,6 @@ export type ModalProps = AriaModalOverlayProps & {
    * Element where the modal will be rendered, by default it will be into the body
    */
   portalContainer?: Element;
-  /**
-   * Size of the Modal
-   */
-  size?: Sizes;
   /**
    * The modal opening and closing state, should use OverlayTriggerState from react-stately
    */

package/src/components/breadcrumb/breadcrumb.component.tsx

@@ -5,12 +5,12 @@ import { useBreadcrumbs } from 'react-aria';
 
 import { type BreadcrumbProps } from './breadcrumb.types.js';
 
-export function Breadcrumb({ className, children, ...props }: BreadcrumbProps) {
+export function Breadcrumb({ className, children, 'aria-label': ariaLabel = 'Breadcrumb', ...props }: BreadcrumbProps) {
   const { navProps } = useBreadcrumbs(props);
   const childCount = Children.count(children);
 
   return (
-    <nav className={className} {...navProps}>
+    <nav className={className} aria-label={ariaLabel} {...navProps}>
       <ol className="m-0 flex list-none p-0">
         {Children.map(
           children,

package/src/components/button/button.component.tsx

@@ -38,9 +38,9 @@ function BaseButton(
 
   return (
     <Tag ref={ref} className={styles.base({ className })} {...mergeProps(props, focusProps)}>
-      {IconBefore && <IconBefore size={iconSize} className={styles.iconBefore()} color={iconColor} />}
+      {IconBefore && <IconBefore size={iconSize} className={styles.iconBefore()} color={iconColor} aria-hidden />}
       <span className={styles.text()}>{children}</span>
-      {IconAfter && <IconAfter size={iconSize} className={styles.iconAfter()} color={iconColor} />}
+      {IconAfter && <IconAfter size={iconSize} className={styles.iconAfter()} color={iconColor} aria-hidden />}
     </Tag>
   );
 }

package/src/components/button-group/button-group.types.ts

@@ -1,15 +1,19 @@
 import { AriaRadioGroupProps } from 'react-aria';
 import { RadioGroupState } from 'react-stately';
+import { VariantProps } from 'tailwind-variants';
 
 import { type ButtonProps } from '../button/index.js';
 
+import { styles } from './components/button-group-button/button-group-button.styles.js';
 import { ButtonGroupButtonProps } from './components/button-group-button/button-group-button.types.js';
 
+type Variants = VariantProps<typeof styles>;
+
 export type ButtonGroupProps = {
   /**
    * Sets whether buttons fill the entire box they are located in
    */
-  block?: boolean;
+  block?: Variants['block'];
   /**
    * The `Button` components to render in the form of an object
    */
@@ -37,7 +41,7 @@ export type ButtonGroupContextState = {
   /**
    * Sets whether buttons fill the entire box they are located in
    */
-  block?: boolean;
+  block?: Variants['block'];
   /**
    * Controls look of `Button` components, can't be applied directly to `Button`
    */

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

@@ -22,6 +22,7 @@ export const styles = tv(
         true: {
           base: 'w-full',
         },
+        false: { base: 'w-auto' },
       },
     },
   },

package/src/components/checkbox-group/checkbox-group.component.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { createContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { createContext, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { useCheckboxGroup, useFocusRing } from 'react-aria';
 import { useCheckboxGroupState } from 'react-stately';
 
@@ -42,6 +42,7 @@ export function CheckboxGroup({
   const firstNewCheckboxRef = useRef<HTMLDivElement>(null);
   const revealAmount = checkboxes && checkboxes.length - showAmount;
   const styles = checkboxStyles({ orientation, isFocusVisible });
+  const panelId = useId();
   const childrenToRender = useMemo(() => {
     const newChildren = checkboxes.map((checkbox, index) => (
       <CheckboxGroupCheckbox key={index} ref={index === showAmount ? firstNewCheckboxRef : null} {...checkbox} />
@@ -63,7 +64,7 @@ export function CheckboxGroup({
       {errorMessage && state.validationState === 'invalid' && (
         <ErrorMessage {...errorMessageProps} message={errorMessage} />
       )}
-      <div className={styles.itemWrapper()}>
+      <div className={styles.itemWrapper()} id={panelId}>
         <CheckboxGroupContext.Provider value={{ ...state, orientation, size }}>
           {childrenToRender}
         </CheckboxGroupContext.Provider>
@@ -73,6 +74,8 @@ export function CheckboxGroup({
             className={styles.revealButton()}
             look="link"
             iconAfter={() => <ExpandMoreIcon size="small" color="link" />}
+            aria-controls={panelId}
+            aria-expanded={!hiddenOptions}
             {...focusProps}
           >
             <p className={styles.buttonText()}>{`Show ${revealAmount} more ${

package/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.component.tsx

@@ -12,7 +12,7 @@ import { type CheckboxGroupCheckboxProps } from './checkbox-group-checkbox.types
 
 // TODO: Discuss with designers if this icon should be included as part of Icons
 // Icon based on SVGs/instructions received from this issue https://github.com/WestpacGEL/GEL-next/issues/159
-function CheckIcon({ copyrightYear = '2023', size, ...props }: IconProps) {
+function CheckIcon({ copyrightYear = '2024', size, ...props }: IconProps) {
   const viewBoxSize = size === 'large' ? '0 0 30 30' : '0 0 24 24';
   return (
     <Icon copyrightYear={copyrightYear} viewBox={viewBoxSize} {...props}>

package/src/components/compacta/compacta.styles.ts

@@ -14,7 +14,7 @@ export const styles = tv(
       addBtn: 'h-auto p-0 no-underline hover:underline',
       toggleBtn: 'p-0',
       collapsible: '',
-      content: 'px-3 pb-5 pt-0 xsl:pl-9',
+      content: 'px-3 pb-5 pt-0 md:px-9',
       footer: '',
       titlePrimary: 'typography-body-9 font-bold',
       titleSecondary: 'mt-1 items-center',

package/src/components/footer/footer.component.tsx

@@ -57,16 +57,16 @@ export function Footer({
         <Grid className={styles.topRow()}>
           <GridItem span={12}>{children}</GridItem>
         </Grid>
-        <Grid>
-          <GridItem span={{ initial: 12, md: 1 }}>
-            {!hideLogo && (
+        {!hideLogo && (
+          <Grid>
+            <GridItem span={{ initial: 12, md: 1 }}>
               <a href={logoLink} className={styles.link()} {...focusProps}>
                 {srOnlyText && <VisuallyHidden>{srOnlyText}</VisuallyHidden>}
                 <Logo align="right" aria-label={logoAssistiveText} />
               </a>
-            )}
-          </GridItem>
-        </Grid>
+            </GridItem>
+          </Grid>
+        )}
       </div>
     </footer>
   );

package/src/components/footer/footer.styles.ts

@@ -5,7 +5,7 @@ export const styles = tv(
     slots: {
       base: 'relative overflow-hidden border-t-[1px] border-t-primary',
       wrapper: 'pt-3 max-md:px-2 max-md:pb-3 md:px-4 md:pb-4',
-      topRow: 'max-md:mb-7 md:mb-4',
+      topRow: '',
       link: 'float-right block',
     },
     variants: {
@@ -18,6 +18,10 @@ export const styles = tv(
       isFocusVisible: {
         true: { link: 'focus-outline' },
       },
+      hideLogo: {
+        true: '',
+        false: { topRow: 'max-md:mb-7 md:mb-4' },
+      },
     },
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },

package/src/components/icon/components/accessibility-icon.tsx

@@ -5,7 +5,7 @@ import { type IconProps } from '../icon.types.js';
 
 export function AccessibilityIcon({
   'aria-label': ariaLabel = 'Accessibility',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/account-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function AccountIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Account',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/add-circle-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function AddCircleIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Add Circle',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/add-icon.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function AddIcon({ 'aria-label': ariaLabel = 'Add', copyrightYear = '2023', ...props }: IconProps) {
+export function AddIcon({ 'aria-label': ariaLabel = 'Add', copyrightYear = '2024', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path d="M11 11H4V13H11V20H13V13H20V11H13V4H11V11Z" fill="currentColor" />

package/src/components/icon/components/alert-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function AlertIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Alert',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/android-icon.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function AndroidIcon({ 'aria-label': ariaLabel = 'Android', copyrightYear = '2023', ...props }: IconProps) {
+export function AndroidIcon({ 'aria-label': ariaLabel = 'Android', copyrightYear = '2024', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path

package/src/components/icon/components/apple-icon.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function AppleIcon({ 'aria-label': ariaLabel = 'Apple', copyrightYear = '2023', ...props }: IconProps) {
+export function AppleIcon({ 'aria-label': ariaLabel = 'Apple', copyrightYear = '2024', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path

package/src/components/icon/components/archive-box-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function ArchiveBoxIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Archive Box',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/arrow-fork-icon.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function ArrowForkIcon({ 'aria-label': ariaLabel = 'Arrow Fork', copyrightYear = '2023', ...props }: IconProps) {
+export function ArrowForkIcon({ 'aria-label': ariaLabel = 'Arrow Fork', copyrightYear = '2024', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path

package/src/components/icon/components/arrow-left-icon.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function ArrowLeftIcon({ 'aria-label': ariaLabel = 'Arrow Left', copyrightYear = '2023', ...props }: IconProps) {
+export function ArrowLeftIcon({ 'aria-label': ariaLabel = 'Arrow Left', copyrightYear = '2024', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path d="M9.82435 12L16.4121 18.5878L15 20L7 12L15 4L16.4122 5.41218L9.82435 12Z" fill="currentColor" />

package/src/components/icon/components/arrow-right-icon.tsx

@@ -5,7 +5,7 @@ import { type IconProps } from '../icon.types.js';
 
 export function ArrowRightIcon({
   'aria-label': ariaLabel = 'Arrow Right',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/arrow-split-icon.tsx

@@ -5,7 +5,7 @@ import { type IconProps } from '../icon.types.js';
 
 export function ArrowSplitIcon({
   'aria-label': ariaLabel = 'Arrow Split',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/atm-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function AtmIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Atm',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/attache-case-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function AttacheCaseIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Attache Case',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/australia-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function AustraliaIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Australia',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/baby-buggy-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function BabyBuggyIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Baby Buggy',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/backspace-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function BackspaceIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Backspace',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/bank-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function BankIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Bank',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/bar-chart-down-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function BarChartDownIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Bar Chart Down',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/bar-chart-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function BarChartIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Bar Chart',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/barbell-icon.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function BarbellIcon({ 'aria-label': ariaLabel = 'Barbell', copyrightYear = '2023', ...props }: IconProps) {
+export function BarbellIcon({ 'aria-label': ariaLabel = 'Barbell', copyrightYear = '2024', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path

package/src/components/icon/components/book-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function BookIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Book',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/bpay-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function BpayIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Bpay',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/briefcase-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function BriefcaseIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Briefcase',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/bug-report-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function BugReportIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Bug Report',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/burger-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function BurgerIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Burger',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/business-person-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function BusinessPersonIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Business Person',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/cafe-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function CafeIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Cafe',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/cake-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function CakeIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Cake',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/calculate-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function CalculateIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Calculate',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/calculator-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function CalculatorIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Calculator',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/calendar-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function CalendarIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Calendar',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/camera-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function CameraIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Camera',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/car-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function CarIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Car',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/cardless-cash-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function CardlessCashIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Cardless Cash',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   ...props
 }: IconProps) {
   return (

package/src/components/icon/components/cart-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function CartIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Cart',
-  copyrightYear = '2023',
+  copyrightYear = '2024',
   ...props
 }: IconProps) {
   return (