@ndla/ui 35.0.9 → 35.0.10

package/lib/types.d.ts

@@ -7,7 +7,7 @@
  */
 import { ReactNode } from 'react';
 declare const locales: readonly ["nb", "nn", "en", "se", "sma"];
-export type Locale = typeof locales[number];
+export type Locale = (typeof locales)[number];
 export type Link = {
     text: string;
     to: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "35.0.9",
+  "version": "35.0.10",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -32,19 +32,19 @@
   ],
   "dependencies": {
     "@ndla/article-scripts": "^3.0.16",
-    "@ndla/button": "^10.0.4",
-    "@ndla/carousel": "^3.0.7",
+    "@ndla/button": "^10.0.5",
+    "@ndla/carousel": "^3.0.8",
     "@ndla/core": "^3.1.3",
-    "@ndla/forms": "^4.2.12",
+    "@ndla/forms": "^4.2.13",
     "@ndla/hooks": "^2.0.3",
-    "@ndla/icons": "^2.2.7",
-    "@ndla/licenses": "^7.0.2",
-    "@ndla/modal": "^2.2.11",
-    "@ndla/notion": "^4.2.9",
-    "@ndla/safelink": "^4.0.14",
+    "@ndla/icons": "^2.2.8",
+    "@ndla/licenses": "^7.0.3",
+    "@ndla/modal": "^2.2.12",
+    "@ndla/notion": "^4.2.10",
+    "@ndla/safelink": "^4.0.15",
     "@ndla/switch": "^1.0.8",
-    "@ndla/tabs": "^2.1.12",
-    "@ndla/tooltip": "^4.0.14",
+    "@ndla/tabs": "^2.1.13",
+    "@ndla/tooltip": "^4.0.15",
     "@ndla/types-learningpath-api": "^0.0.20",
     "@ndla/util": "^3.1.11",
     "@radix-ui/react-accordion": "1.1.0",
@@ -87,5 +87,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "27dac8e675121d005ea26442c1391d83fa4c04ea"
+  "gitHead": "22f7610e54a80f8e6f4a8eb2e0dd66d164bb36af"
 }

package/src/Article/ArticleByline.tsx

@@ -155,7 +155,8 @@ const ArticleByline = ({
             }
             backgroundColor="white"
             position="top"
-            size="medium">
+            size="medium"
+          >
             {(onClose: () => void) => (
               <>
                 <ModalHeader modifier="no-bottom-padding">
@@ -174,7 +175,8 @@ const ArticleByline = ({
             aria-live="assertive"
             copyNode={t('license.hasCopiedTitle')}
             data-copy-string={copySourceReference}
-            onClick={copyLicense}>
+            onClick={copyLicense}
+          >
             {`${t('license.copy')} ${t('license.copyTitle').toLowerCase()}`}
           </CopyButton>
         )}
@@ -186,7 +188,8 @@ const ArticleByline = ({
             variant="outline"
             aria-live="assertive"
             data-copy-string={copyPageUrlLink}
-            copyNode={t('article.copyPageLinkCopied')}>
+            copyNode={t('article.copyPageLinkCopied')}
+          >
             {t('article.copyPageLink')}
           </CopyButton>
         )}
@@ -198,7 +201,8 @@ const ArticleByline = ({
             aria-live="assertive"
             copyNode={t('license.hasCopiedTitle')}
             data-copy-string={copyEmbedLink}
-            onClick={copyEmbededLink}>
+            onClick={copyEmbededLink}
+          >
             {`${t('license.copy')}  ${t('license.tabs.embedlink').toLowerCase()}`}
           </CopyButton>
         )}

package/src/Article/ArticleHeaderWrapper.tsx

@@ -83,7 +83,8 @@ const ArticleHeaderWrapper = ({ children, competenceGoals, competenceGoalsLoadin
         colorTheme="light"
         shape="pill"
         onClick={openDialog}
-        disabled={competenceGoalsLoading}>
+        disabled={competenceGoalsLoading}
+      >
         <FooterHeaderIcon />
         <CompetenceBadgeText>{t('competenceGoals.showCompetenceGoals')}</CompetenceBadgeText>
       </ButtonV2>

package/src/Article/ArticleNotions.tsx

@@ -179,7 +179,8 @@ export const ArticleNotions = ({ notions, relatedContent = [], buttonOffsetRight
           </NotionsTrigger>
         }
         size="large"
-        backgroundColor="white">
+        backgroundColor="white"
+      >
         {(onClose: () => void) => (
           <div>
             <ModalHeader modifier="notions-modal-header no-padding">

package/src/Article/ArticleSideBar.tsx

@@ -41,7 +41,8 @@ const ArticleSideBar = ({ copyPageUrlLink, licenseBox }: Props) => {
             variant="outline"
             aria-live="assertive"
             copyNode={t('article.copyPageLinkCopied')}
-            data-copy-string={copyPageUrlLink}>
+            data-copy-string={copyPageUrlLink}
+          >
             {t('article.copyPageLink')}
           </CopyButton>
         </ButtonWrapper>
@@ -53,7 +54,8 @@ const ArticleSideBar = ({ copyPageUrlLink, licenseBox }: Props) => {
               {t('article.useContent')}
             </ButtonV2>
           }
-          size="medium">
+          size="medium"
+        >
           {(onClose: () => void) => (
             <>
               <ModalHeader modifier="no-bottom-padding">

package/src/AudioPlayer/AudioPlayer.tsx

@@ -247,7 +247,8 @@ const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersi
               <div
                 ref={descriptionRef}
                 data-audio-player-description={1}
-                data-read-more-text={t('audio.readMoreDescriptionLabel')}>
+                data-read-more-text={t('audio.readMoreDescriptionLabel')}
+              >
                 {description}
               </div>
             </StyledDescription>
@@ -266,7 +267,8 @@ const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersi
               variant="link"
               size="normal"
               onClick={toggleTextVersion}
-              data-audio-text-button-id={staticRenderId}>
+              data-audio-text-button-id={staticRenderId}
+            >
               <CrossIcon style={{ width: '20px', height: '20px' }} />
               <CloseText>{t('audio.textVersion.close')}</CloseText>
             </LinkButton>

package/src/AudioPlayer/Controls.tsx

@@ -444,7 +444,8 @@ const Controls = ({ src, title }: Props) => {
             aria-label={t('audio.controls.rewind15sec')}
             onClick={() => {
               onSeekSeconds(-15);
-            }}>
+            }}
+          >
             <Back15 />
           </Back15SecButton>
         </WardButtonWrapper>
@@ -455,7 +456,8 @@ const Controls = ({ src, title }: Props) => {
               type="button"
               as="button"
               title={t('audio.controls.selectSpeed')}
-              aria-label={t('audio.controls.selectSpeed')}>
+              aria-label={t('audio.controls.selectSpeed')}
+            >
               {speedValue}x
             </SpeedButton>
             <SpeedMenu as="div" portal={false}>
@@ -470,7 +472,8 @@ const Controls = ({ src, title }: Props) => {
                       selected={speed === speedValue}
                       onSelect={() => {
                         setSpeedValue(speed);
-                      }}>
+                      }}
+                    >
                       {speed}x{speed === speedValue && <SpeedSelectedMark />}
                     </SpeedValueButton>
                   ))}
@@ -486,7 +489,8 @@ const Controls = ({ src, title }: Props) => {
             aria-label={t('audio.controls.forward15sec')}
             onClick={() => {
               onSeekSeconds(15);
-            }}>
+            }}
+          >
             <Forward15 />
           </Forward15SecButton>
         </WardButtonWrapper>
@@ -509,7 +513,8 @@ const Controls = ({ src, title }: Props) => {
               type="button"
               as="button"
               title={t('audio.controls.adjustVolume')}
-              aria-label={t('audio.controls.adjustVolume')}>
+              aria-label={t('audio.controls.adjustVolume')}
+            >
               <VolumeUp />
             </VolumeButton>
             <VolumeMenu as="div" portal={false}>
@@ -518,7 +523,8 @@ const Controls = ({ src, title }: Props) => {
                   <SliderInput
                     orientation={SliderOrientation.Vertical}
                     onChange={handleVolumeSliderChange}
-                    value={volumeValue}>
+                    value={volumeValue}
+                  >
                     <VolumeSliderBackground as="div">
                       <VolumeSliderSelected as="div" />
                       <VolumeSliderHandle as="div" />

package/src/AuthorInfo/AuthorInfo.tsx

@@ -53,7 +53,7 @@ const StyledPortrait = styled(Portrait)`
       width: 4rem;
       height: 4rem;
     }
-  } ;
+  }
 `;
 
 const StyledHeading = styled.h1`

package/src/Breadcrumblist/Breadcrumblist.tsx

@@ -279,7 +279,8 @@ const Breadcrumblist = ({
         startOffset={wrapperOffset}
         hideOnNarrow={hideOnNarrow}
         isVisible={isVisible}
-        mastheadHeight={mastheadHeight}>
+        mastheadHeight={mastheadHeight}
+      >
         {items.length > 0 && (
           <>
             <Heading invertedStyle={invertedStyle}>{t('breadcrumb.youAreHere')}</Heading>
@@ -296,7 +297,8 @@ const Breadcrumblist = ({
                       onClick={(e: MouseEvent<HTMLElement>) => {
                         onNav && onNav(e, item);
                       }}
-                      aria-label={label}>
+                      aria-label={label}
+                    >
                       <IconWrapper invertedStyle={invertedStyle} isCurrent={isCurrent}>
                         {icon && icon}
                         {typename && TypeIcon(typename)}

package/src/CompetenceGoalTab/CompetenceGoalTab.tsx

@@ -51,12 +51,14 @@ const CompetenceGoalTab = ({ list, isOembed }: CompetenceProps) => {
                     ? t('competenceGoals.competenceTabCoreTooltip')
                     : t('competenceGoals.showCompetenceGoals')
                 }
-                key={`tabitem-${id}`}>
+                key={`tabitem-${id}`}
+              >
                 <ButtonV2
                   shape="pill"
                   aria-current={id === currentTabItem.id}
                   colorTheme={id !== currentTabItem.id ? 'lighter' : undefined}
-                  onClick={() => setCurrentTab(list[index])}>
+                  onClick={() => setCurrentTab(list[index])}
+                >
                   {tabTitle}
                 </ButtonV2>
               </Tooltip>

package/src/CompetenceGoals/CompetenceGoalsDialog.tsx

@@ -70,7 +70,8 @@ export const CompetenceGoalsDialog = ({ children, isOpen, onClose, subjectName,
       onClose={onClose}
       size="fullscreen"
       backgroundColor="light-gradient"
-      narrow>
+      narrow
+    >
       {(close) => (
         <>
           <ModalHeader modifier="menu">

package/src/ContentLoader/index.tsx

@@ -40,7 +40,8 @@ const ContentLoader = ({
       className={className}
       {...rest}
       height={typeof height === 'string' ? height : undefined}
-      width={typeof width === 'string' ? width : undefined}>
+      width={typeof width === 'string' ? width : undefined}
+    >
       <rect
         style={{ fill: `url(#${idGradient})` }}
         clipPath={`url(#${idClip})`}

package/src/Dialog/Dialog.tsx

@@ -52,7 +52,8 @@ export const Dialog = ({
       aria-hidden={hidden}
       aria-labelledby={labelledby}
       aria-label={label}
-      {...rest}>
+      {...rest}
+    >
       <div {...classes('content')}>
         <button
           {...classes('close')}
@@ -61,7 +62,8 @@ export const Dialog = ({
             if (onClose) {
               onClose();
             }
-          }}>
+          }}
+        >
           {messages.close}
         </button>
         {children}

package/src/Embed/AudioEmbed.tsx

@@ -54,7 +54,8 @@ const AudioEmbed = ({ embed, articlePath }: Props) => {
           viewBox="0 0 24 12"
           width="100%"
           xmlns="http://www.w3.org/2000/svg"
-          style={{ backgroundColor: '#EFF0F2' }}>
+          style={{ backgroundColor: '#EFF0F2' }}
+        >
           <path d="M0 0h24v24H0V0z" fill="none" />
           <path
             transform="scale(0.3) translate(28, 8.5)"
@@ -138,14 +139,16 @@ const AudioEmbed = ({ embed, articlePath }: Props) => {
             authors={contributors}
             origin={data.copyright.origin}
             locale={i18n.language}
-            type="audio">
+            type="audio"
+          >
             {data.copyright.license.license !== 'COPYRIGHT' && (
               <>
                 {copyString && (
                   <CopyButton
                     variant="outline"
                     copyNode={t('license.hasCopiedTitle')}
-                    onClick={() => navigator.clipboard.writeText(copyString)}>
+                    onClick={() => navigator.clipboard.writeText(copyString)}
+                  >
                     {t('license.copyTitle')}
                   </CopyButton>
                 )}
@@ -212,7 +215,8 @@ const ImageLicense = ({ articlePath, title, imageUrl, copyright }: ImageLicenseP
           </ButtonV2>
         }
         authors={captionAuthors}
-        locale={i18n.language}>
+        locale={i18n.language}
+      >
         <ModalV2 controlled isOpen={isOpen} onClose={() => setIsOpen(false)}>
           {(close) => (
             <FigureLicenseDialogContent
@@ -222,14 +226,16 @@ const ImageLicense = ({ articlePath, title, imageUrl, copyright }: ImageLicenseP
               authors={contributors}
               origin={copyright.origin}
               locale={i18n.language}
-              type="image">
+              type="image"
+            >
               {copyright.license.license !== 'COPYRIGHTED' && (
                 <>
                   {copyString && (
                     <CopyButton
                       variant="outline"
                       copyNode={t('license.hasCopiedTitle')}
-                      onClick={() => navigator.clipboard.writeText(copyString)}>
+                      onClick={() => navigator.clipboard.writeText(copyString)}
+                    >
                       {t('license.copyTitle')}
                     </CopyButton>
                   )}

package/src/Embed/BrightcoveEmbed.tsx

@@ -142,7 +142,8 @@ const BrightcoveEmbed = ({ embed, isConcept }: Props) => {
             variant="outline"
             shape="pill"
             size="small"
-            onClick={() => setShowOriginalVideo((p) => !p)}>
+            onClick={() => setShowOriginalVideo((p) => !p)}
+          >
             {t(`figure.button.${showOriginalVideo ? 'original' : 'alternative'}`)}
           </LinkedVideoButton>
         }
@@ -158,7 +159,8 @@ const BrightcoveEmbed = ({ embed, isConcept }: Props) => {
             locale={i18n.language}
             license={license}
             authors={contributors}
-            type="video">
+            type="video"
+          >
             <VideoLicenseButtons
               download={download}
               licenseCode={data.copyright?.license.license}
@@ -195,7 +197,8 @@ const VideoLicenseButtons = ({ download, src, width, height, name, licenseCode }
       <CopyButton
         variant="outline"
         copyNode={t('license.hasCopiedTitle')}
-        onClick={() => navigator.clipboard.writeText(makeIframeString(src, width, height, name))}>
+        onClick={() => navigator.clipboard.writeText(makeIframeString(src, width, height, name))}
+      >
         {t('license.embed')}
       </CopyButton>
     </>

package/src/Embed/ConceptEmbed.tsx

@@ -336,7 +336,8 @@ export const BlockConcept = ({
                     typeof document !== 'undefined'
                       ? (document.querySelector('.c-article') as HTMLElement | null) || undefined
                       : undefined
-                  }>
+                  }
+                >
                   <PopoverWrapper top={modalPos}>
                     <Content avoidCollisions={false} asChild side="bottom">
                       <ConceptNotionV2
@@ -373,12 +374,14 @@ export const BlockConcept = ({
               <ButtonV2 variant="outline" size="small" shape="pill" onClick={() => setIsOpen(true)}>
                 {t('concept.reuse')}
               </ButtonV2>
-            }>
+            }
+          >
             <ModalV2
               controlled
               isOpen={isOpen}
               onClose={() => setIsOpen(false)}
-              labelledBy="license-dialog-rules-heading">
+              labelledBy="license-dialog-rules-heading"
+            >
               {(close) => (
                 <FigureLicenseDialogContent
                   authors={groupedAuthors}

package/src/Embed/ImageEmbed.tsx

@@ -152,7 +152,8 @@ const ImageEmbed = ({ embed, articlePath, previewAlt }: Props) => {
     <Figure
       id={figureId}
       type={imageSizes ? undefined : figureType}
-      className={imageSizes ? 'c-figure--right expanded' : ''}>
+      className={imageSizes ? 'c-figure--right expanded' : ''}
+    >
       <ImageWrapper src={data.imageUrl} crop={crop} size={embedData.size}>
         <Image
           focalPoint={focalPoint}
@@ -186,7 +187,8 @@ const ImageEmbed = ({ embed, articlePath, previewAlt }: Props) => {
         }
         licenseRights={license.rights}
         authors={captionAuthors}
-        locale={i18n.language}>
+        locale={i18n.language}
+      >
         <ModalV2 controlled isOpen={isOpen} onClose={() => setIsOpen(false)} labelledBy="license-dialog-rules-heading">
           {(close) => (
             <FigureLicenseDialogContent
@@ -196,7 +198,8 @@ const ImageEmbed = ({ embed, articlePath, previewAlt }: Props) => {
               authors={contributors}
               origin={data.copyright.origin}
               locale={i18n.language}
-              type="image">
+              type="image"
+            >
               <ImageLicenseButtons
                 articlePath={articlePath}
                 title={data.title.title}
@@ -255,7 +258,8 @@ export const ImageLicenseButtons = ({ imageUrl, title, articlePath, copyright }:
         variant="outline"
         onClick={() => navigator.clipboard.writeText(copyString)}
         copyNode={t('license.hasCopiedTitle')}
-        aria-live="assertive">
+        aria-live="assertive"
+      >
         {t('license.copyTitle')}
       </CopyButton>
       <SafeLinkButton to={`${imageUrl}?download=true`} download variant="outline">
@@ -294,7 +298,8 @@ const ExpandButton = ({ size, expanded, bylineHidden, onExpand, onHideByline }:
         type="button"
         className="c-figure__fullscreen-btn"
         aria-label={t(`license.images.itemImage.zoom${expanded ? 'Out' : ''}ImageButtonLabel`)}
-        onClick={onExpand}>
+        onClick={onExpand}
+      >
         {expanded ? <ArrowCollapse /> : <ExpandTwoArrows />}
       </button>
     );
@@ -304,7 +309,8 @@ const ExpandButton = ({ size, expanded, bylineHidden, onExpand, onHideByline }:
         type="button"
         className="c-figure__show-byline-btn"
         aria-label={t(`license.images.itemImage.${bylineHidden ? 'expandByline' : 'minimizeByline'}`)}
-        onClick={onHideByline}>
+        onClick={onHideByline}
+      >
         {bylineHidden ? <ChevronDown /> : <ChevronUp />}
       </button>
     );

package/src/Embed/conceptComponents.tsx

@@ -318,7 +318,8 @@ export const ConceptNotionV2 = forwardRef<HTMLDivElement, ConceptNotionProps>(
                       modalButton={<></>}
                       reuseLabel={t('reuse')}
                       authors={visualElementAuthors}
-                      licenseRights={visualElementLicense.rights}>
+                      licenseRights={visualElementLicense.rights}
+                    >
                       {visualElementLicense.abbreviation && (
                         <Header>
                           <Trigger asChild>
@@ -344,7 +345,8 @@ export const ConceptNotionV2 = forwardRef<HTMLDivElement, ConceptNotionProps>(
                           authors={visualElementGroupedAuthors}
                           title={notionVisualElement?.title}
                           origin={notionVisualElement?.copyright?.origin}
-                          messages={{ source: t('source'), title: t('title') }}>
+                          messages={{ source: t('source'), title: t('title') }}
+                        >
                           {visualElementType === 'image' ? (
                             <ImageLicenseButtons
                               imageUrl={notionVisualElement.image?.src ?? ''}

package/src/Figure/Figure.tsx

@@ -59,7 +59,8 @@ export const FigureCaption = ({
                     variant="outline"
                     size="small"
                     data-dialog-trigger-id={id}
-                    data-dialog-source-id={figureId}>
+                    data-dialog-source-id={figureId}
+                  >
                     {reuseLabel}
                   </ButtonV2>
                 )}
@@ -83,7 +84,8 @@ export const FigureCaption = ({
                 to={link.url}
                 {...classes('link')}
                 target={link.external ? '_blank' : undefined}
-                rel={link.external ? 'noopener noreferrer' : undefined}>
+                rel={link.external ? 'noopener noreferrer' : undefined}
+              >
                 <span {...classes('link-text')}>{link.text}</span>
                 <LinkIcon />
               </SafeLink>
@@ -140,7 +142,8 @@ const Figure = ({ children, type = 'full', resizeIframe, className, ...rest }: P
     <figure
       data-sizetype={type}
       {...classes('', { resize: !!resizeIframe, right }, `${typeClass} ${className ?? ''}`)}
-      {...rest}>
+      {...rest}
+    >
       {isFunction(children) ? children({ typeClass }) : children}
     </figure>
   );

package/src/Figure/FigureBylineExpandButton.tsx

@@ -26,7 +26,8 @@ export const FigureBylineExpandButton = ({ messages, typeClass }: Props) => {
       data-classtype={typeClass}
       data-aria={messages.expandBylineButtonLabel}
       data-ariaexpanded={messages.minimizeBylineButtonLabel}
-      aria-label={messages.expandBylineButtonLabel}>
+      aria-label={messages.expandBylineButtonLabel}
+    >
       <ChevronUp className="expanded-icon" />
       <ChevronDown className="contracted-icon" />
     </button>

package/src/Figure/FigureExpandButton.tsx

@@ -19,7 +19,8 @@ export function FigureExpandButton({ messages, typeClass }: Props) {
       data-ariaexpanded={messages.zoomOutImageButtonLabel}
       aria-label={messages.zoomImageButtonLabel}
       data-figure-button
-      data-classtype={typeClass}>
+      data-classtype={typeClass}
+    >
       <ExpandTwoArrows className="contracted-icon" />
       <ArrowCollapse className="expanded-icon" />
     </button>

package/src/Figure/FigureOpenDialogButton.tsx

@@ -24,7 +24,8 @@ export const FigureOpenDialogButton = ({ messages, type }: Props) => {
       className="c-figure__fullscreen-btn"
       data-aria={messages.zoomImageButtonLabel}
       data-ariaexpanded={messages.zoomOutImageButtonLabel}
-      aria-label={messages.zoomImageButtonLabel}>
+      aria-label={messages.zoomImageButtonLabel}
+    >
       {type === 'image' && <ExpandTwoArrows className="contracted-icon" />}
       {type === 'h5p' && <CursorClick style={{ width: '24px', height: '24px' }} />}
       {type === 'iframe' && <CursorClick style={{ width: '24px', height: '24px' }} />}

package/src/Filter/FilterButtons.tsx

@@ -117,7 +117,8 @@ export const FilterButtons = ({ heading, items, onFilterToggle, onRemoveAllFilte
                 shape="pill"
                 onClick={() => {
                   onFilterToggle(item.value);
-                }}>
+                }}
+              >
                 <StyledButtonContent>{item.label}</StyledButtonContent>
                 <StyledButtonContentSelected>
                   <CrossIcon />
@@ -139,7 +140,8 @@ export const FilterButtons = ({ heading, items, onFilterToggle, onRemoveAllFilte
                   </StyledButtonContentSelected>
                 </ButtonV2>
               </StyledButtonElementWrapper>
-            }>
+            }
+          >
             {(onClose: () => void) => (
               <>
                 <ModalHeader modifier={['left-align']}>
@@ -177,7 +179,8 @@ export const FilterButtons = ({ heading, items, onFilterToggle, onRemoveAllFilte
                   size="normal"
                   colorTheme={!item.selected ? 'greyLighter' : undefined}
                   shape="pill"
-                  onClick={() => onFilterToggle(item.value)}>
+                  onClick={() => onFilterToggle(item.value)}
+                >
                   <StyledButtonContent>{item.label}</StyledButtonContent>
                   {item.selected && (
                     <StyledButtonContentSelected>

package/src/Filter/FilterList.tsx

@@ -69,7 +69,8 @@ const FilterList = ({
         {...classes('item-wrapper', {
           'aligned-grouping': !!alignedGroup,
           'collapse-mobile': !!collapseMobile,
-        })}>
+        })}
+      >
         {options.map((option, index) => {
           const itemModifiers = [];
 
@@ -116,7 +117,8 @@ const FilterList = ({
           type="button"
           onClick={() => {
             setVisibleCount((prev) => (prev === defaultVisibleCount ? options.length : defaultVisibleCount));
-          }}>
+          }}
+        >
           {visibleCount === defaultVisibleCount ? (
             <>
               <span>{showLabel}</span> <ChevronDown />

package/src/Filter/FilterListPhone.tsx

@@ -144,7 +144,8 @@ const FilterListPhone = ({
             <ButtonV2 variant="outline" {...classes('modal-button')}>
               {messages.openFilter}
             </ButtonV2>
-          }>
+          }
+        >
           {(onClose) => (
             <>
               <ModalHeader modifier={['left-align']}>
@@ -167,7 +168,8 @@ const FilterListPhone = ({
                       'aligned-grouping': !!alignedGroup,
                       'collapse-mobile': !!collapseMobile,
                       'grouped-options': !!isGroupedOptions,
-                    })}>
+                    })}
+                  >
                     {options.map((option) => {
                       const itemModifiers = [];
 
@@ -254,7 +256,8 @@ const FilterListPhone = ({
               type="button"
               onClick={() => {
                 setVisibleCount((prev) => (prev === defaultVisibleCount ? options.length : defaultVisibleCount));
-              }}>
+              }}
+            >
               {visibleCount === defaultVisibleCount ? (
                 <>
                   <span>{showLabel}</span> <ChevronDown />