@4alldigital/foundation-ui--core 3.10.1 → 3.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4alldigital/foundation-ui--core",
-  "version": "3.10.1",
+  "version": "3.11.0",
   "description": "Foundation UI Core Component Library (source distribution)",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -35,5 +35,5 @@
   },
   "author": "Joe Mewes",
   "license": "MIT",
-  "gitHead": "b113a4c018016b27fd3cdfa1d991b9aec006f086"
+  "gitHead": "f241bcb8eb542b8150a62af69d513687f870dd2b"
 }

package/src/components/Accordion/Accordion.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 import { useState } from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props } from './Accordion.types';
 import Icon from '../Icon';
 import Copy from '../Copy';

package/src/components/AddressForm/AddressForm.tsx

@@ -1,8 +1,11 @@
+"use client";
+
 import * as React from 'react';
 import { useState, useEffect } from 'react';
 import { cn } from '../../utils';
 import { AddressFormProps, ShippingAddress, AddressErrors } from './AddressForm.types';
 import TextInput from '../TextInput';
+import { InputType } from '../TextInput/TextInput.types';
 import FormSelect from '../FormSelect';
 
 // Common countries
@@ -205,7 +208,7 @@ export const AddressForm = React.forwardRef<HTMLDivElement, AddressFormProps>(
         {/* Phone */}
         <TextInput
           id="shipping-phone"
-          type="tel"
+          type={InputType.TEL}
           placeholder="Phone Number (optional)"
           value={address.phone || ''}
           onChange={(e) => handleChange('phone', e.target.value)}

package/src/components/AnimationCounter/AnimationCounter.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 import { useRef } from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props } from './AnimationCounter.types';
 import { animate, useInView, useIsomorphicLayoutEffect } from 'framer-motion';
 

package/src/components/AnimationSet1/AnimationSet1.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 import React from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { motion } from 'framer-motion';
 import { Props } from './AnimationSet1.types';
 import Image from '../Image';

package/src/components/Authenticator/Authenticator.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from 'react';
 import { Props } from './Authenticator.types';
 import Tabs from '../Tabs';

package/src/components/Avatar/Avatar.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useState } from 'react';
 import { Props } from './Avatar.types';
 import Image from '../Image';

package/src/components/Banner/Banner.tsx

@@ -1,4 +1,4 @@
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props } from './Banner.types';
 import Heading from '../Heading';
 import { HEADING_TAGS } from '../Heading/Heading.types';

package/src/components/Blockquote/Blockquote.tsx

@@ -1,4 +1,4 @@
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props } from './Blockquote.types';
 import Icon from '../Icon';
 

package/src/components/Button/Button.tsx

@@ -7,7 +7,7 @@ import Loader from '../Loader';
 import { BTN_VARIANTS, BTN_SIZES, type ButtonProps } from './Button.types';
 
 const buttonVariants = cva(
-  'inline-flex items-center cursor-pointer justify-center whitespace-nowrap rounded-sm text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center gap-2 cursor-pointer justify-center whitespace-nowrap rounded-sm text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
@@ -248,7 +248,6 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         type={type as 'button' | 'submit' | 'reset'}
         disabled={disabled}
         aria-label={ariaLabel}
-        role="button"
         {...props}
       >
         {renderContent()}

package/src/components/ButtonDeprecated/Button.tsx

@@ -1,4 +1,6 @@
-import cx from 'classnames';
+"use client";
+
+import { clsx as cx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { BTN_SIZES, BTN_TYPES, BTN_VARIANTS, Props } from './Button.types';
 import Icon from '../Icon';

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props } from './ButtonGroup.types';
 import Button from '../Button/Button';
 

package/src/components/Card/Card.types.ts

@@ -20,10 +20,10 @@ export interface ImageData {
   aspectRatio?: 'aspect-[16/10]' | 'aspect-[16/9]' | 'aspect-[4/3]' | 'aspect-[1/1]' | 'aspect-[3/4]' | 'aspect-[9/16]';
 }
 
-type ActionItem = {
+export type ActionItem = {
   count?: number;
   isActive: boolean;
-  onClick: (event: any) => void;
+  onClick: (data: { id: string }) => void;
 };
 
 export interface Actions {
@@ -53,7 +53,7 @@ export interface CardData {
   moreTitle?: string;
   metaData?: string[];
   actions?: Actions;
-  onClick?: (data: any) => void;
+  onClick?: (data: unknown) => void;
   playCallback?: (event: MouseEvent<HTMLButtonElement>) => void;
   isMuted?: boolean;
   icon?: string;

package/src/components/Card/types/CardBasic/CardBasic.tsx

@@ -1,5 +1,7 @@
-import React, { MouseEvent, useContext } from 'react';
-import cx from 'classnames';
+"use client";
+
+import React, { MouseEvent, useCallback, useContext } from 'react';
+import { clsx as cx } from 'clsx';
 import Image from '../../../Image';
 import { Props } from './CardBasic.types';
 import Heading from '../../../Heading';
@@ -8,6 +10,7 @@ import Copy from '../../../Copy';
 import { COPY_TAG } from '../../../Copy/Copy.types';
 import Button from '../../../Button';
 import { BTN_SIZES, BTN_VARIANTS } from '../../../Button/Button.types';
+import { type ActionItem } from '../../Card.types';
 import { animateClasses, cardWrapperClasses, clickableCardWrapperClasses } from '../../constants';
 import { twMerge } from 'tailwind-merge';
 import HtmlContent from '../../../HtmlContent';
@@ -30,6 +33,17 @@ const CardBasic = ({
 }: Props) => {
   const appContext = useContext(AppContext);
   const cardClasses = onClick ? clickableCardWrapperClasses : cardWrapperClasses;
+
+  const handleAction = useCallback(
+    (actionKey: string) => (event: MouseEvent<HTMLButtonElement>) => {
+      event.stopPropagation();
+      const action = actions?.[actionKey as keyof Omit<typeof actions, 'custom'>] as ActionItem | undefined;
+      if (action?.onClick) {
+        action.onClick({ id });
+      }
+    },
+    [actions, id],
+  );
   return (
     <div
       id={id}
@@ -37,7 +51,10 @@ const CardBasic = ({
       className={twMerge(
         cx(animateClasses, cardClasses, { 'p-4': padded }, { 'hover:scale-100': !scaleOnHover }, className),
       )}
-      onClick={onClick}>
+      onClick={onClick}
+      onKeyDown={onClick ? (e) => { if (e.key === 'Enter') onClick(e as unknown); } : undefined}
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}>
       {image && (
         <div
           className={twMerge(
@@ -115,136 +132,30 @@ const CardBasic = ({
               )}
               {actions && (
                 <div className="flex items-center gap-1 flex-wrap flex-1 justify-end">
-                  {actions.like && (
-                    <Button
-                      variant={BTN_VARIANTS.PRIMARY}
-                      icon={actions.like.isActive ? 'mdi:like' : 'mdi:like-outline'}
-                      size={BTN_SIZES.SMALL}
-                      onClick={(event: MouseEvent<HTMLButtonElement>) => {
-                        event.stopPropagation();
-                        if (actions?.like?.onClick && typeof actions.like.onClick === 'function') {
-                          actions.like.onClick({ id });
-                        }
-                      }}
-                    />
-                  )}
-                  {actions.share && (
-                    <Button
-                      variant={BTN_VARIANTS.PRIMARY}
-                      icon={actions.share.isActive ? 'mdi:share' : 'mdi:share-outline'}
-                      size={BTN_SIZES.SMALL}
-                      onClick={(event: MouseEvent<HTMLButtonElement>) => {
-                        event.stopPropagation();
-                        if (actions?.share?.onClick && typeof actions.share.onClick === 'function') {
-                          actions.share.onClick({ id });
-                        }
-                      }}
-                    />
-                  )}
-                  {actions.save && (
-                    <Button
-                      variant={BTN_VARIANTS.PRIMARY}
-                      icon={actions.save.isActive ? 'mdi:bookmark' : 'mdi:bookmark-outline'}
-                      size={BTN_SIZES.SMALL}
-                      onClick={(event: MouseEvent<HTMLButtonElement>) => {
-                        event.stopPropagation();
-                        if (actions?.save?.onClick && typeof actions.save.onClick === 'function') {
-                          actions.save.onClick({ id });
-                        }
-                      }}
-                    />
-                  )}
-                  {actions.comment && (
-                    <Button
-                      variant={BTN_VARIANTS.PRIMARY}
-                      icon={actions.comment.isActive ? 'mdi:comment' : 'mdi:comment-outline'}
-                      size={BTN_SIZES.SMALL}
-                      onClick={(event: MouseEvent<HTMLButtonElement>) => {
-                        event.stopPropagation();
-                        if (actions?.comment?.onClick && typeof actions.comment.onClick === 'function') {
-                          actions.comment.onClick({ id });
-                        }
-                      }}
-                    />
-                  )}
-                  {actions.bookmark && (
-                    <Button
-                      variant={BTN_VARIANTS.PRIMARY}
-                      icon={actions.bookmark.isActive ? 'mdi:bookmark' : 'mdi:bookmark-outline'}
-                      size={BTN_SIZES.SMALL}
-                      onClick={(event: MouseEvent<HTMLButtonElement>) => {
-                        event.stopPropagation();
-                        if (actions?.bookmark?.onClick && typeof actions.bookmark.onClick === 'function') {
-                          actions.bookmark.onClick({ id });
-                        }
-                      }}
-                    />
-                  )}
-                  {actions.report && (
-                    <Button
-                      variant={BTN_VARIANTS.PRIMARY}
-                      icon={actions.report.isActive ? 'mdi:flag' : 'mdi:flag-outline'}
-                      size={BTN_SIZES.SMALL}
-                      onClick={(event: MouseEvent<HTMLButtonElement>) => {
-                        event.stopPropagation();
-                        if (actions?.report?.onClick && typeof actions.report.onClick === 'function') {
-                          actions.report.onClick({ id });
-                        }
-                      }}
-                    />
-                  )}
-                  {actions.follow && (
-                    <Button
-                      variant={BTN_VARIANTS.PRIMARY}
-                      icon={actions.follow.isActive ? 'mdi:account-plus' : 'mdi:account-plus-outline'}
-                      size={BTN_SIZES.SMALL}
-                      onClick={(event: MouseEvent<HTMLButtonElement>) => {
-                        event.stopPropagation();
-                        if (actions?.follow?.onClick && typeof actions.follow.onClick === 'function') {
-                          actions.follow.onClick({ id });
-                        }
-                      }}
-                    />
-                  )}
-                  {actions.download && (
-                    <Button
-                      variant={BTN_VARIANTS.PRIMARY}
-                      icon={actions.download.isActive ? 'mdi:download' : 'mdi:download-outline'}
-                      size={BTN_SIZES.SMALL}
-                      onClick={(event: MouseEvent<HTMLButtonElement>) => {
-                        event.stopPropagation();
-                        if (actions?.download?.onClick && typeof actions.download.onClick === 'function') {
-                          actions.download.onClick({ id });
-                        }
-                      }}
-                    />
-                  )}
-                  {actions.edit && (
-                    <Button
-                      variant={BTN_VARIANTS.PRIMARY}
-                      icon={actions.edit.isActive ? 'mdi:pencil' : 'mdi:pencil-outline'}
-                      size={BTN_SIZES.SMALL}
-                      onClick={(event: MouseEvent<HTMLButtonElement>) => {
-                        event.stopPropagation();
-                        if (actions?.edit?.onClick && typeof actions.edit.onClick === 'function') {
-                          actions.edit.onClick({ id });
-                        }
-                      }}
-                    />
-                  )}
-                  {actions.delete && (
-                    <Button
-                      variant={BTN_VARIANTS.PRIMARY}
-                      icon={actions.delete.isActive ? 'mdi:delete' : 'mdi:delete-outline'}
-                      size={BTN_SIZES.SMALL}
-                      onClick={(event: MouseEvent<HTMLButtonElement>) => {
-                        event.stopPropagation();
-                        if (actions?.delete?.onClick && typeof actions.delete.onClick === 'function') {
-                          actions.delete.onClick({ id });
-                        }
-                      }}
-                    />
-                  )}
+                  {([
+                    { key: 'like', icon: 'mdi:like', iconOutline: 'mdi:like-outline' },
+                    { key: 'share', icon: 'mdi:share', iconOutline: 'mdi:share-outline' },
+                    { key: 'save', icon: 'mdi:bookmark', iconOutline: 'mdi:bookmark-outline' },
+                    { key: 'comment', icon: 'mdi:comment', iconOutline: 'mdi:comment-outline' },
+                    { key: 'bookmark', icon: 'mdi:bookmark', iconOutline: 'mdi:bookmark-outline' },
+                    { key: 'report', icon: 'mdi:flag', iconOutline: 'mdi:flag-outline' },
+                    { key: 'follow', icon: 'mdi:account-plus', iconOutline: 'mdi:account-plus-outline' },
+                    { key: 'download', icon: 'mdi:download', iconOutline: 'mdi:download-outline' },
+                    { key: 'edit', icon: 'mdi:pencil', iconOutline: 'mdi:pencil-outline' },
+                    { key: 'delete', icon: 'mdi:delete', iconOutline: 'mdi:delete-outline' },
+                  ] as const).map(({ key, icon, iconOutline }) => {
+                    const action = actions[key as keyof Omit<typeof actions, 'custom'>] as ActionItem | undefined;
+                    if (!action) return null;
+                    return (
+                      <Button
+                        key={key}
+                        variant={BTN_VARIANTS.PRIMARY}
+                        icon={action.isActive ? icon : iconOutline}
+                        size={BTN_SIZES.SMALL}
+                        onClick={handleAction(key)}
+                      />
+                    );
+                  })}
                   {actions.custom && actions.custom.map((action, index) => <div key={index}>{action}</div>)}
                 </div>
               )}

package/src/components/Card/types/CardData/CardData.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 import React, { useEffect } from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { animate, motionValue } from 'framer-motion';
 import { Props } from './CardData.types';
 import Heading from '../../../Heading';

package/src/components/Card/types/CardHorz/CardHorz.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 import React from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props } from './CardHorz.types';
 import { twMerge } from 'tailwind-merge';
 import Image from '../../../Image';

package/src/components/Card/types/CardIcon/CardIcon.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 import React from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props } from './CardIcon.types';
 import { animateClasses, cardWrapperClasses, clickableCardWrapperClasses } from '../../constants';
 import Heading from '../../../Heading';

package/src/components/Card/types/CardMedia/CardMedia.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 import React, { MouseEvent, useContext } from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props } from './CardMedia.types';
 import { animateClasses, cardWrapperClasses, clickableCardWrapperClasses } from '../../constants';
 import Image from '../../../Image';

package/src/components/Card/types/CardVideo/CardVideo.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 import React, { MouseEvent } from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import HoverVideoPlayer from 'react-hover-video-player';
 import { Props } from './CardVideo.types';
 import Image from '../../../Image';

package/src/components/Carousel/Carousel.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 import * as React from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props } from './Carousel.types';
 import Card from '../Card';
 import {

package/src/components/Cart/Cart.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 import React, { useEffect, useRef, useState } from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props } from './Cart.types';
 import { useCartContext } from '../../context';
 import DisplayHeading from '../DisplayHeading';
@@ -31,14 +33,20 @@ const Cart = ({ testID, isCheckout }: Props) => {
   };
 
   useEffect(() => {
-    // Attach the event listener when the component mounts
+    const handleEscKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && showCart) {
+        setShowCart(false);
+      }
+    };
+
     document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('keydown', handleEscKey);
 
-    // Cleanup the event listener when the component unmounts
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleEscKey);
     };
-  }, []);
+  }, [showCart]);
 
   return (
     <div data-testid={testID || '"Cart"'} className="relative">
@@ -48,6 +56,8 @@ const Cart = ({ testID, isCheckout }: Props) => {
             <Button
               rounded
               icon="mdi:cart"
+              ariaLabel="Shopping cart"
+              aria-expanded={showCart}
               onClick={event => {
                 event.stopPropagation();
                 setShowCart(!showCart);
@@ -121,7 +131,7 @@ const Cart = ({ testID, isCheckout }: Props) => {
               {isCheckout && (
                 <>
                   <div className="flex items-start justify-start">
-                    <PromoCodeForm handleSubmit={(value: string) => context?.handleAddPromoCode?.(value)} />
+                    <PromoCodeForm handleSubmit={(values) => context?.handleAddPromoCode?.(values.promoCode)} />
                   </div>
                   <Copy>
                     {T?.UI?.TAX}: {context?.value?.taxRate?.percentage}%

package/src/components/Checkbox/Checkbox.tsx

@@ -1,11 +1,11 @@
 import { forwardRef } from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props } from './Checkbox.types';
 import Icon from '../Icon';
 
-const Checkbox = forwardRef(function MyInput(
-  { id, label, required, className, disabled, ...rest }: Props,
-  ref: any,
+const Checkbox = forwardRef<HTMLInputElement, Props>(function MyInput(
+  { id, label, required, className, disabled, ...rest },
+  ref,
 ) {
   return (
     <div data-testid="Checkbox" className={cx('flex items-center', className)}>

package/src/components/Chip/Chip.tsx

@@ -1,6 +1,8 @@
+"use client";
+
 import React, { useMemo } from 'react';
 import { twMerge } from 'tailwind-merge';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props } from './Chip.types';
 import Icon from '../Icon';
 import Link from '../Link';

package/src/components/Collapsible/Collapsible.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { CollapsibleRootProps, CollapsibleTriggerProps, CollapsibleContentProps } from './Collapsible.types';
 

package/src/components/Container/Container.tsx

@@ -1,4 +1,4 @@
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { CONTAINER_DIRECTION, Props } from './Container.types';
 import { twMerge } from 'tailwind-merge';
 

package/src/components/ContentPageLayout/ContentPageLayout.tsx

@@ -1,4 +1,4 @@
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props, CPL_SPACING } from './ContentPageLayout.types';
 
 const ContentPageLayout = ({

package/src/components/ContentRowsLayout/ContentRowsLayout.tsx

@@ -1,4 +1,4 @@
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props, CRL_SIZE } from './ContentRowsLayout.types';
 
 const ContentRowsLayout = ({ className, children, size = CRL_SIZE.DEFAULT }: Props) => {

package/src/components/Copy/Copy.tsx

@@ -1,4 +1,4 @@
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Props, COPY_TAG } from './Copy.types';
 

package/src/components/DisplayHeading/DisplayHeading.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props } from './DisplayHeading.types';
 import Heading from '../Heading';
 import { HEADING_TAGS } from '../Heading/Heading.types';

package/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import React, { Component } from 'react';
+import { Props, State } from './ErrorBoundary.types';
+
+class ErrorBoundary extends Component<Props, State> {
+  static displayName = 'ErrorBoundary';
+
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+    this.props.onError?.(error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError && this.state.error) {
+      if (typeof this.props.fallback === 'function') {
+        return this.props.fallback(this.state.error);
+      }
+
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <div role="alert" data-testid="ErrorBoundary" className="p-4 rounded border border-red-200 bg-red-50 dark:bg-red-950 dark:border-red-800">
+          <p className="text-sm text-red-800 dark:text-red-200">Something went wrong.</p>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;
+export type { Props };

package/src/components/ErrorBoundary/ErrorBoundary.types.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+
+export interface Props {
+  children: ReactNode;
+  fallback?: ReactNode | ((error: Error) => ReactNode);
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+
+export interface State {
+  hasError: boolean;
+  error: Error | null;
+}

package/src/components/ErrorBoundary/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ErrorBoundary';
+export type { Props as ErrorBoundaryProps } from './ErrorBoundary.types';

package/src/components/FileUpload/FileUpload.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 import React from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props } from './FileUpload.types';
 
 const FileUpload = React.forwardRef(function FileUploadInput(

package/src/components/Footer/Footer.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 import React, { useContext } from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props } from './Footer.types';
 import Logo from '../Logo';
 import Copy from '../Copy';