@transferwise/components 46.50.0 → 46.51.0

package/build/carousel/Carousel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.mjs","sources":["../../src/carousel/Carousel.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@transferwise/icons';\nimport classNames from 'classnames';\nimport { type CSSProperties, type ReactNode, useEffect, useRef, useState } from 'react';\n\nimport ActionButton from '../actionButton';\nimport Title from '../title';\nimport type { PromoCardLinkProps } from '../promoCard/PromoCard';\nimport PromoCard from '../promoCard/PromoCard';\n\nexport type CarouselCardCommon = {\n  id: string;\n  href?: string;\n  hrefTarget?: HTMLAnchorElement['target'];\n  onClick?: () => void;\n  className?: string;\n  styles?: CSSProperties;\n};\n\nexport type CarouselDefaultCard = CarouselCardCommon & {\n  type: 'anchor' | 'button';\n  content: ReactNode;\n};\n\nexport type CarouselPromoCard = CarouselCardCommon & {\n  type: 'promo';\n} & Omit<PromoCardLinkProps, 'type'>;\n\nexport type CarouselCard = CarouselDefaultCard | CarouselPromoCard;\nexport interface CarouselProps {\n  header: string | ReactNode;\n  className?: string;\n  cards: CarouselCard[];\n  onClick?: (cardId: string) => void;\n}\n\ntype CardsReference = {\n  type: 'promo' | 'default';\n  cardElement: HTMLDivElement | HTMLAnchorElement;\n  anchorElement?: HTMLAnchorElement;\n};\n\nconst LEFT_SCROLL_OFFSET = 8;\n\nconst Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }) => {\n  const [scrollPosition, setScrollPosition] = useState(0);\n  const [previousScrollPosition, setPreviousScrollPosition] = useState(0);\n  const [scrollIsAtEnd, setScrollIsAtEnd] = useState(false);\n  const [visibleCardOnMobileView, setVisibleCardOnMobileView] = useState<string>('');\n  const carouselElementRef = useRef<HTMLDivElement>(null);\n  const carouselCardsRef = useRef<CardsReference[]>([]);\n\n  const isLeftActionButtonEnabled = scrollPosition > LEFT_SCROLL_OFFSET;\n\n  const areActionButtonsEnabled = isLeftActionButtonEnabled || !scrollIsAtEnd;\n\n  const [focusedCard, setFocusedCard] = useState(cards?.[0]?.id);\n\n  const updateScrollButtonsState = () => {\n    if (carouselElementRef.current) {\n      const { scrollWidth, offsetWidth } = carouselElementRef.current;\n\n      const scrollAtEnd = scrollWidth - offsetWidth <= scrollPosition + LEFT_SCROLL_OFFSET;\n      setScrollIsAtEnd(scrollAtEnd);\n    }\n\n    const scrollDirecton = scrollPosition > previousScrollPosition ? 'right' : 'left';\n\n    const cardsInFullViewIds: string[] = [];\n    carouselCardsRef.current.forEach((card) => {\n      if (isVisible(carouselElementRef.current as HTMLElement, card.cardElement as HTMLElement)) {\n        // eslint-disable-next-line functional/immutable-data\n        cardsInFullViewIds.push(card.cardElement.getAttribute('id') ?? '');\n      }\n    });\n\n    if (cardsInFullViewIds.length >= 1) {\n      const visibleCardIndex = scrollDirecton === 'right' ? cardsInFullViewIds.length - 1 : 0;\n      const visibleCardId = cardsInFullViewIds[visibleCardIndex];\n      setVisibleCardOnMobileView(visibleCardId);\n      setFocusedCard(visibleCardId);\n    }\n\n    setPreviousScrollPosition(scrollPosition);\n  };\n\n  const scrollCarousel = (direction: 'left' | 'right' = 'right') => {\n    if (carouselElementRef.current) {\n      const { scrollWidth } = carouselElementRef.current;\n\n      const cardWidth = scrollWidth / carouselCardsRef.current.length;\n\n      const res = Math.floor(cardWidth - cardWidth * 0.05);\n\n      carouselElementRef.current.scrollBy({\n        left: direction === 'right' ? res : -res,\n        behavior: 'smooth',\n      });\n    }\n  };\n\n  const handleOnKeyDown = (\n    event: React.KeyboardEvent<HTMLAnchorElement | HTMLDivElement>,\n    index: number,\n  ) => {\n    if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {\n      const nextIndex = event.key === 'ArrowRight' ? index + 1 : index - 1;\n      const nextCard = cards[nextIndex];\n      if (nextCard) {\n        const ref = carouselCardsRef.current[nextIndex];\n        if (ref.type === 'promo') {\n          ref.anchorElement?.focus();\n        } else {\n          ref.cardElement?.focus();\n        }\n\n        scrollCardIntoView(carouselCardsRef.current[nextIndex].cardElement, nextCard);\n        event.preventDefault();\n      }\n    }\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.currentTarget.click();\n    }\n  };\n\n  const scrollCardIntoView = (element: HTMLElement, card: CarouselCard) => {\n    element.scrollIntoView({\n      behavior: 'smooth',\n      block: 'nearest',\n      inline: 'center',\n    });\n\n    setFocusedCard(card.id);\n  };\n\n  useEffect(() => {\n    updateScrollButtonsState();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [scrollPosition]);\n\n  useEffect(() => {\n    window.addEventListener('resize', updateScrollButtonsState);\n\n    return () => {\n      window.removeEventListener('resize', updateScrollButtonsState);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const addElementToCardsRefArray = (index: number, ref: Partial<CardsReference>) => {\n    if (ref) {\n      // eslint-disable-next-line functional/immutable-data\n      carouselCardsRef.current[index] = {\n        type: ref.type ?? carouselCardsRef.current?.[index]?.type,\n        cardElement: ref.cardElement ?? carouselCardsRef.current?.[index]?.cardElement,\n        anchorElement: ref.anchorElement ?? carouselCardsRef.current?.[index]?.anchorElement,\n      };\n    }\n  };\n\n  return (\n    <div className={classNames('carousel-wrapper', className)}>\n      <div className=\"d-flex justify-content-between carousel__header\">\n        {typeof header === 'string' ? (\n          <Title as=\"span\" type=\"title-body\">\n            {header}\n          </Title>\n        ) : (\n          header\n        )}\n        {areActionButtonsEnabled ? (\n          <div className=\"hidden-xs\">\n            <ActionButton\n              className=\"carousel__scroll-button\"\n              tabIndex={-1}\n              priority=\"secondary\"\n              disabled={!isLeftActionButtonEnabled}\n              aria-hidden=\"true\"\n              data-testid=\"scroll-carousel-left\"\n              onClick={() => scrollCarousel('left')}\n            >\n              <ChevronLeft />\n            </ActionButton>\n            <ActionButton\n              tabIndex={-1}\n              className=\"carousel__scroll-button m-l-1\"\n              priority=\"secondary\"\n              aria-hidden=\"true\"\n              data-testid=\"scroll-carousel-right\"\n              disabled={scrollIsAtEnd}\n              onClick={() => scrollCarousel()}\n            >\n              <ChevronRight />\n            </ActionButton>\n          </div>\n        ) : null}\n      </div>\n      <div\n        ref={carouselElementRef}\n        tabIndex={-1}\n        role=\"list\"\n        className=\"carousel\"\n        onScroll={(event) => {\n          const target = event.target as HTMLElement;\n          setScrollPosition(target.scrollLeft);\n        }}\n      >\n        {cards?.map((card, index) => {\n          const sharedProps = {\n            id: card.id,\n            className: classNames('carousel__card', {\n              'carousel__card--focused': card.id === focusedCard,\n            }),\n            onClick: () => {\n              card.onClick?.();\n              onClick?.(card.id);\n            },\n            onFocus: (event: React.FocusEvent<HTMLAnchorElement | HTMLDivElement>) => {\n              scrollCardIntoView(event.currentTarget, card);\n            },\n          };\n\n          const cardContent =\n            card.type !== 'promo' ? (\n              <div\n                id={`${card.id}-content`}\n                className={classNames('carousel__card-content', {\n                  [card.className ?? '']: !!card.className,\n                })}\n                // eslint-disable-next-line react/forbid-dom-props\n                style={card.styles}\n              >\n                {card.content}\n              </div>\n            ) : null;\n\n          if (card.type === 'button') {\n            return (\n              <div key={card.id} aria-labelledby={`${card.id}-content`} role=\"listitem\">\n                <div\n                  {...sharedProps}\n                  ref={(el) => {\n                    if (el) {\n                      // eslint-disable-next-line functional/immutable-data\n                      carouselCardsRef.current[index] = {\n                        type: 'default',\n                        cardElement: el,\n                      };\n                    }\n                  }}\n                  role=\"button\"\n                  tabIndex={0}\n                  onKeyDown={(event) => handleOnKeyDown(event, index)}\n                >\n                  {cardContent}\n                </div>\n              </div>\n            );\n          }\n\n          if (card.type === 'promo') {\n            return (\n              <div key={card.id} id={card.id} role=\"listitem\" aria-labelledby={`${card.id}-anchor`}>\n                <PromoCard\n                  {...{ ...card, type: undefined }}\n                  {...{ ...sharedProps }}\n                  ref={(el: HTMLDivElement | null) => {\n                    if (el) {\n                      addElementToCardsRefArray(index, {\n                        type: 'promo',\n                        cardElement: el,\n                      });\n                    }\n                  }}\n                  anchorRef={(el: HTMLAnchorElement) => {\n                    if (el) {\n                      addElementToCardsRefArray(index, {\n                        type: 'promo',\n                        anchorElement: el,\n                      });\n                    }\n                  }}\n                  anchorId={`${card.id}-anchor`}\n                  onKeyDown={(event) => handleOnKeyDown(event, index)}\n                />\n              </div>\n            );\n          }\n\n          return (\n            <div key={card.id} aria-labelledby={`${card.id}-content`} role=\"listitem\">\n              <a\n                {...sharedProps}\n                ref={(el) => {\n                  if (el) {\n                    // eslint-disable-next-line functional/immutable-data\n                    carouselCardsRef.current[index] = {\n                      type: 'default',\n                      cardElement: el,\n                    };\n                  }\n                }}\n                href={card.href}\n                target={card.hrefTarget}\n                rel=\"noreferrer\"\n                onKeyDown={(event) => handleOnKeyDown(event, index)}\n              >\n                {cardContent}\n              </a>\n            </div>\n          );\n        })}\n      </div>\n      <div className=\"visible-xs\">\n        <div className=\"carousel__indicators\">\n          {cards?.map((card, index) => (\n            <button\n              key={`${card.id}-indicator`}\n              data-testid={`${card.id}-indicator`}\n              tabIndex={-1}\n              aria-hidden\n              type=\"button\"\n              className={classNames('carousel__indicator', {\n                'carousel__indicator--selected': card.id === visibleCardOnMobileView,\n              })}\n              onClick={() => {\n                scrollCardIntoView(carouselCardsRef.current[index].cardElement, card);\n              }}\n            />\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nconst isVisible = (container: HTMLElement, el: HTMLElement) => {\n  const cWidth = container.offsetWidth;\n  const cScrollOffset = container.scrollLeft;\n\n  const elemLeft = el.offsetLeft - container.offsetLeft;\n  const elemRight = elemLeft + el.offsetWidth;\n\n  return elemLeft >= cScrollOffset && elemRight <= cScrollOffset + cWidth;\n};\n\nexport default Carousel;\n"],"names":["LEFT_SCROLL_OFFSET","Carousel","header","className","cards","onClick","scrollPosition","setScrollPosition","useState","previousScrollPosition","setPreviousScrollPosition","scrollIsAtEnd","setScrollIsAtEnd","visibleCardOnMobileView","setVisibleCardOnMobileView","carouselElementRef","useRef","carouselCardsRef","isLeftActionButtonEnabled","areActionButtonsEnabled","focusedCard","setFocusedCard","id","updateScrollButtonsState","current","scrollWidth","offsetWidth","scrollAtEnd","scrollDirecton","cardsInFullViewIds","forEach","card","isVisible","cardElement","push","getAttribute","length","visibleCardIndex","visibleCardId","scrollCarousel","direction","cardWidth","res","Math","floor","scrollBy","left","behavior","handleOnKeyDown","event","index","key","nextIndex","nextCard","ref","type","anchorElement","focus","scrollCardIntoView","preventDefault","currentTarget","click","element","scrollIntoView","block","inline","useEffect","window","addEventListener","removeEventListener","addElementToCardsRefArray","_jsxs","classNames","children","_jsx","Title","as","ActionButton","tabIndex","priority","disabled","ChevronLeft","ChevronRight","role","onScroll","target","scrollLeft","map","sharedProps","onFocus","cardContent","style","styles","content","el","onKeyDown","PromoCard","undefined","anchorRef","anchorId","href","hrefTarget","rel","container","cWidth","cScrollOffset","elemLeft","offsetLeft","elemRight"],"mappings":"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"}
+{"version":3,"file":"Carousel.mjs","sources":["../../src/carousel/Carousel.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { type CSSProperties, type ReactNode, useEffect, useRef, useState } from 'react';\n\nimport ActionButton from '../actionButton';\nimport Title from '../title';\nimport type { PromoCardLinkProps } from '../promoCard/PromoCard';\nimport PromoCard from '../promoCard/PromoCard';\n\nexport type CarouselCardCommon = {\n  id: string;\n  href?: string;\n  hrefTarget?: HTMLAnchorElement['target'];\n  onClick?: () => void;\n  className?: string;\n  styles?: CSSProperties;\n};\n\nexport type CarouselDefaultCard = CarouselCardCommon & {\n  type: 'anchor' | 'button';\n  content: ReactNode;\n};\n\nexport type CarouselPromoCard = CarouselCardCommon & {\n  type: 'promo';\n} & Omit<PromoCardLinkProps, 'type'>;\n\nexport type CarouselCard = CarouselDefaultCard | CarouselPromoCard;\nexport interface CarouselProps {\n  header: string | ReactNode;\n  className?: string;\n  cards: CarouselCard[];\n  onClick?: (cardId: string) => void;\n}\n\ntype CardsReference = {\n  type: 'promo' | 'default';\n  cardElement: HTMLDivElement | HTMLAnchorElement;\n  anchorElement?: HTMLAnchorElement;\n};\n\nconst LEFT_SCROLL_OFFSET = 8;\n\nconst Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }) => {\n  const [scrollPosition, setScrollPosition] = useState(0);\n  const [previousScrollPosition, setPreviousScrollPosition] = useState(0);\n  const [scrollIsAtEnd, setScrollIsAtEnd] = useState(false);\n  const [visibleCardOnMobileView, setVisibleCardOnMobileView] = useState<string>('');\n  const carouselElementRef = useRef<HTMLDivElement>(null);\n  const carouselCardsRef = useRef<CardsReference[]>([]);\n\n  const isLeftActionButtonEnabled = scrollPosition > LEFT_SCROLL_OFFSET;\n\n  const areActionButtonsEnabled = isLeftActionButtonEnabled || !scrollIsAtEnd;\n\n  const [focusedCard, setFocusedCard] = useState(cards?.[0]?.id);\n\n  const updateScrollButtonsState = () => {\n    if (carouselElementRef.current) {\n      const { scrollWidth, offsetWidth } = carouselElementRef.current;\n\n      const scrollAtEnd = scrollWidth - offsetWidth <= scrollPosition + LEFT_SCROLL_OFFSET;\n      setScrollIsAtEnd(scrollAtEnd);\n    }\n\n    const scrollDirecton = scrollPosition > previousScrollPosition ? 'right' : 'left';\n\n    const cardsInFullViewIds: string[] = [];\n    carouselCardsRef.current.forEach((card) => {\n      if (isVisible(carouselElementRef.current as HTMLElement, card.cardElement as HTMLElement)) {\n        // eslint-disable-next-line functional/immutable-data\n        cardsInFullViewIds.push(card.cardElement.getAttribute('id') ?? '');\n      }\n    });\n\n    if (cardsInFullViewIds.length >= 1) {\n      const visibleCardIndex = scrollDirecton === 'right' ? cardsInFullViewIds.length - 1 : 0;\n      const visibleCardId = cardsInFullViewIds[visibleCardIndex];\n      setVisibleCardOnMobileView(visibleCardId);\n      setFocusedCard(visibleCardId);\n    }\n\n    setPreviousScrollPosition(scrollPosition);\n  };\n\n  const scrollCarousel = (direction: 'left' | 'right' = 'right') => {\n    if (carouselElementRef.current) {\n      const { scrollWidth } = carouselElementRef.current;\n\n      const cardWidth = scrollWidth / carouselCardsRef.current.length;\n\n      const res = Math.floor(cardWidth - cardWidth * 0.05);\n\n      carouselElementRef.current.scrollBy({\n        left: direction === 'right' ? res : -res,\n        behavior: 'smooth',\n      });\n    }\n  };\n\n  const handleOnKeyDown = (\n    event: React.KeyboardEvent<HTMLAnchorElement | HTMLDivElement>,\n    index: number,\n  ) => {\n    if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {\n      const nextIndex = event.key === 'ArrowRight' ? index + 1 : index - 1;\n      const nextCard = cards[nextIndex];\n      if (nextCard) {\n        const ref = carouselCardsRef.current[nextIndex];\n        if (ref.type === 'promo') {\n          ref.anchorElement?.focus();\n        } else {\n          ref.cardElement?.focus();\n        }\n\n        scrollCardIntoView(carouselCardsRef.current[nextIndex].cardElement, nextCard);\n        event.preventDefault();\n      }\n    }\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.currentTarget.click();\n    }\n  };\n\n  const scrollCardIntoView = (element: HTMLElement, card: CarouselCard) => {\n    element.scrollIntoView({\n      behavior: 'smooth',\n      block: 'nearest',\n      inline: 'center',\n    });\n\n    setFocusedCard(card.id);\n  };\n\n  useEffect(() => {\n    updateScrollButtonsState();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [scrollPosition]);\n\n  useEffect(() => {\n    window.addEventListener('resize', updateScrollButtonsState);\n\n    return () => {\n      window.removeEventListener('resize', updateScrollButtonsState);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const addElementToCardsRefArray = (index: number, ref: Partial<CardsReference>) => {\n    if (ref) {\n      // eslint-disable-next-line functional/immutable-data\n      carouselCardsRef.current[index] = {\n        type: ref.type ?? carouselCardsRef.current?.[index]?.type,\n        cardElement: ref.cardElement ?? carouselCardsRef.current?.[index]?.cardElement,\n        anchorElement: ref.anchorElement ?? carouselCardsRef.current?.[index]?.anchorElement,\n      };\n    }\n  };\n\n  return (\n    <div className={clsx('carousel-wrapper', className)}>\n      <div className=\"d-flex justify-content-between carousel__header\">\n        {typeof header === 'string' ? (\n          <Title as=\"span\" type=\"title-body\">\n            {header}\n          </Title>\n        ) : (\n          header\n        )}\n        {areActionButtonsEnabled ? (\n          <div className=\"hidden-xs\">\n            <ActionButton\n              className=\"carousel__scroll-button\"\n              tabIndex={-1}\n              priority=\"secondary\"\n              disabled={!isLeftActionButtonEnabled}\n              aria-hidden=\"true\"\n              data-testid=\"scroll-carousel-left\"\n              onClick={() => scrollCarousel('left')}\n            >\n              <ChevronLeft />\n            </ActionButton>\n            <ActionButton\n              tabIndex={-1}\n              className=\"carousel__scroll-button m-l-1\"\n              priority=\"secondary\"\n              aria-hidden=\"true\"\n              data-testid=\"scroll-carousel-right\"\n              disabled={scrollIsAtEnd}\n              onClick={() => scrollCarousel()}\n            >\n              <ChevronRight />\n            </ActionButton>\n          </div>\n        ) : null}\n      </div>\n      <div\n        ref={carouselElementRef}\n        tabIndex={-1}\n        role=\"list\"\n        className=\"carousel\"\n        onScroll={(event) => {\n          const target = event.target as HTMLElement;\n          setScrollPosition(target.scrollLeft);\n        }}\n      >\n        {cards?.map((card, index) => {\n          const sharedProps = {\n            id: card.id,\n            className: clsx('carousel__card', {\n              'carousel__card--focused': card.id === focusedCard,\n            }),\n            onClick: () => {\n              card.onClick?.();\n              onClick?.(card.id);\n            },\n            onFocus: (event: React.FocusEvent<HTMLAnchorElement | HTMLDivElement>) => {\n              scrollCardIntoView(event.currentTarget, card);\n            },\n          };\n\n          const cardContent =\n            card.type !== 'promo' ? (\n              <div\n                id={`${card.id}-content`}\n                className={clsx('carousel__card-content', {\n                  [card.className ?? '']: !!card.className,\n                })}\n                // eslint-disable-next-line react/forbid-dom-props\n                style={card.styles}\n              >\n                {card.content}\n              </div>\n            ) : null;\n\n          if (card.type === 'button') {\n            return (\n              <div key={card.id} aria-labelledby={`${card.id}-content`} role=\"listitem\">\n                <div\n                  {...sharedProps}\n                  ref={(el) => {\n                    if (el) {\n                      // eslint-disable-next-line functional/immutable-data\n                      carouselCardsRef.current[index] = {\n                        type: 'default',\n                        cardElement: el,\n                      };\n                    }\n                  }}\n                  role=\"button\"\n                  tabIndex={0}\n                  onKeyDown={(event) => handleOnKeyDown(event, index)}\n                >\n                  {cardContent}\n                </div>\n              </div>\n            );\n          }\n\n          if (card.type === 'promo') {\n            return (\n              <div key={card.id} id={card.id} role=\"listitem\" aria-labelledby={`${card.id}-anchor`}>\n                <PromoCard\n                  {...{ ...card, type: undefined }}\n                  {...{ ...sharedProps }}\n                  ref={(el: HTMLDivElement | null) => {\n                    if (el) {\n                      addElementToCardsRefArray(index, {\n                        type: 'promo',\n                        cardElement: el,\n                      });\n                    }\n                  }}\n                  anchorRef={(el: HTMLAnchorElement) => {\n                    if (el) {\n                      addElementToCardsRefArray(index, {\n                        type: 'promo',\n                        anchorElement: el,\n                      });\n                    }\n                  }}\n                  anchorId={`${card.id}-anchor`}\n                  onKeyDown={(event) => handleOnKeyDown(event, index)}\n                />\n              </div>\n            );\n          }\n\n          return (\n            <div key={card.id} aria-labelledby={`${card.id}-content`} role=\"listitem\">\n              <a\n                {...sharedProps}\n                ref={(el) => {\n                  if (el) {\n                    // eslint-disable-next-line functional/immutable-data\n                    carouselCardsRef.current[index] = {\n                      type: 'default',\n                      cardElement: el,\n                    };\n                  }\n                }}\n                href={card.href}\n                target={card.hrefTarget}\n                rel=\"noreferrer\"\n                onKeyDown={(event) => handleOnKeyDown(event, index)}\n              >\n                {cardContent}\n              </a>\n            </div>\n          );\n        })}\n      </div>\n      <div className=\"visible-xs\">\n        <div className=\"carousel__indicators\">\n          {cards?.map((card, index) => (\n            <button\n              key={`${card.id}-indicator`}\n              data-testid={`${card.id}-indicator`}\n              tabIndex={-1}\n              aria-hidden\n              type=\"button\"\n              className={clsx('carousel__indicator', {\n                'carousel__indicator--selected': card.id === visibleCardOnMobileView,\n              })}\n              onClick={() => {\n                scrollCardIntoView(carouselCardsRef.current[index].cardElement, card);\n              }}\n            />\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nconst isVisible = (container: HTMLElement, el: HTMLElement) => {\n  const cWidth = container.offsetWidth;\n  const cScrollOffset = container.scrollLeft;\n\n  const elemLeft = el.offsetLeft - container.offsetLeft;\n  const elemRight = elemLeft + el.offsetWidth;\n\n  return elemLeft >= cScrollOffset && elemRight <= cScrollOffset + cWidth;\n};\n\nexport default Carousel;\n"],"names":["LEFT_SCROLL_OFFSET","Carousel","header","className","cards","onClick","scrollPosition","setScrollPosition","useState","previousScrollPosition","setPreviousScrollPosition","scrollIsAtEnd","setScrollIsAtEnd","visibleCardOnMobileView","setVisibleCardOnMobileView","carouselElementRef","useRef","carouselCardsRef","isLeftActionButtonEnabled","areActionButtonsEnabled","focusedCard","setFocusedCard","id","updateScrollButtonsState","current","scrollWidth","offsetWidth","scrollAtEnd","scrollDirecton","cardsInFullViewIds","forEach","card","isVisible","cardElement","push","getAttribute","length","visibleCardIndex","visibleCardId","scrollCarousel","direction","cardWidth","res","Math","floor","scrollBy","left","behavior","handleOnKeyDown","event","index","key","nextIndex","nextCard","ref","type","anchorElement","focus","scrollCardIntoView","preventDefault","currentTarget","click","element","scrollIntoView","block","inline","useEffect","window","addEventListener","removeEventListener","addElementToCardsRefArray","_jsxs","clsx","children","_jsx","Title","as","ActionButton","tabIndex","priority","disabled","ChevronLeft","ChevronRight","role","onScroll","target","scrollLeft","map","sharedProps","onFocus","cardContent","style","styles","content","el","onKeyDown","PromoCard","undefined","anchorRef","anchorId","href","hrefTarget","rel","container","cWidth","cScrollOffset","elemLeft","offsetLeft","elemRight"],"mappings":";;;;;;;;AAyCA,MAAMA,kBAAkB,GAAG,CAAC,CAAA;AAEtBC,MAAAA,QAAQ,GAA4BA,CAAC;EAAEC,MAAM;EAAEC,SAAS;EAAEC,KAAK;AAAEC,EAAAA,OAAAA;AAAO,CAAE,KAAI;EAClF,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGC,QAAQ,CAAC,CAAC,CAAC,CAAA;EACvD,MAAM,CAACC,sBAAsB,EAAEC,yBAAyB,CAAC,GAAGF,QAAQ,CAAC,CAAC,CAAC,CAAA;EACvE,MAAM,CAACG,aAAa,EAAEC,gBAAgB,CAAC,GAAGJ,QAAQ,CAAC,KAAK,CAAC,CAAA;EACzD,MAAM,CAACK,uBAAuB,EAAEC,0BAA0B,CAAC,GAAGN,QAAQ,CAAS,EAAE,CAAC,CAAA;AAClF,EAAA,MAAMO,kBAAkB,GAAGC,MAAM,CAAiB,IAAI,CAAC,CAAA;AACvD,EAAA,MAAMC,gBAAgB,GAAGD,MAAM,CAAmB,EAAE,CAAC,CAAA;AAErD,EAAA,MAAME,yBAAyB,GAAGZ,cAAc,GAAGN,kBAAkB,CAAA;AAErE,EAAA,MAAMmB,uBAAuB,GAAGD,yBAAyB,IAAI,CAACP,aAAa,CAAA;AAE3E,EAAA,MAAM,CAACS,WAAW,EAAEC,cAAc,CAAC,GAAGb,QAAQ,CAACJ,KAAK,GAAG,CAAC,CAAC,EAAEkB,EAAE,CAAC,CAAA;EAE9D,MAAMC,wBAAwB,GAAGA,MAAK;IACpC,IAAIR,kBAAkB,CAACS,OAAO,EAAE;MAC9B,MAAM;QAAEC,WAAW;AAAEC,QAAAA,WAAAA;OAAa,GAAGX,kBAAkB,CAACS,OAAO,CAAA;MAE/D,MAAMG,WAAW,GAAGF,WAAW,GAAGC,WAAW,IAAIpB,cAAc,GAAGN,kBAAkB,CAAA;MACpFY,gBAAgB,CAACe,WAAW,CAAC,CAAA;AAC/B,KAAA;IAEA,MAAMC,cAAc,GAAGtB,cAAc,GAAGG,sBAAsB,GAAG,OAAO,GAAG,MAAM,CAAA;IAEjF,MAAMoB,kBAAkB,GAAa,EAAE,CAAA;AACvCZ,IAAAA,gBAAgB,CAACO,OAAO,CAACM,OAAO,CAAEC,IAAI,IAAI;MACxC,IAAIC,SAAS,CAACjB,kBAAkB,CAACS,OAAsB,EAAEO,IAAI,CAACE,WAA0B,CAAC,EAAE;AACzF;AACAJ,QAAAA,kBAAkB,CAACK,IAAI,CAACH,IAAI,CAACE,WAAW,CAACE,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAA;AACpE,OAAA;AACF,KAAC,CAAC,CAAA;AAEF,IAAA,IAAIN,kBAAkB,CAACO,MAAM,IAAI,CAAC,EAAE;AAClC,MAAA,MAAMC,gBAAgB,GAAGT,cAAc,KAAK,OAAO,GAAGC,kBAAkB,CAACO,MAAM,GAAG,CAAC,GAAG,CAAC,CAAA;AACvF,MAAA,MAAME,aAAa,GAAGT,kBAAkB,CAACQ,gBAAgB,CAAC,CAAA;MAC1DvB,0BAA0B,CAACwB,aAAa,CAAC,CAAA;MACzCjB,cAAc,CAACiB,aAAa,CAAC,CAAA;AAC/B,KAAA;IAEA5B,yBAAyB,CAACJ,cAAc,CAAC,CAAA;GAC1C,CAAA;AAED,EAAA,MAAMiC,cAAc,GAAGA,CAACC,SAA8B,GAAA,OAAO,KAAI;IAC/D,IAAIzB,kBAAkB,CAACS,OAAO,EAAE;MAC9B,MAAM;AAAEC,QAAAA,WAAAA;OAAa,GAAGV,kBAAkB,CAACS,OAAO,CAAA;MAElD,MAAMiB,SAAS,GAAGhB,WAAW,GAAGR,gBAAgB,CAACO,OAAO,CAACY,MAAM,CAAA;MAE/D,MAAMM,GAAG,GAAGC,IAAI,CAACC,KAAK,CAACH,SAAS,GAAGA,SAAS,GAAG,IAAI,CAAC,CAAA;AAEpD1B,MAAAA,kBAAkB,CAACS,OAAO,CAACqB,QAAQ,CAAC;QAClCC,IAAI,EAAEN,SAAS,KAAK,OAAO,GAAGE,GAAG,GAAG,CAACA,GAAG;AACxCK,QAAAA,QAAQ,EAAE,QAAA;AACX,OAAA,CAAC,CAAA;AACJ,KAAA;GACD,CAAA;AAED,EAAA,MAAMC,eAAe,GAAGA,CACtBC,KAA8D,EAC9DC,KAAa,KACX;IACF,IAAID,KAAK,CAACE,GAAG,KAAK,YAAY,IAAIF,KAAK,CAACE,GAAG,KAAK,WAAW,EAAE;AAC3D,MAAA,MAAMC,SAAS,GAAGH,KAAK,CAACE,GAAG,KAAK,YAAY,GAAGD,KAAK,GAAG,CAAC,GAAGA,KAAK,GAAG,CAAC,CAAA;AACpE,MAAA,MAAMG,QAAQ,GAAGjD,KAAK,CAACgD,SAAS,CAAC,CAAA;AACjC,MAAA,IAAIC,QAAQ,EAAE;AACZ,QAAA,MAAMC,GAAG,GAAGrC,gBAAgB,CAACO,OAAO,CAAC4B,SAAS,CAAC,CAAA;AAC/C,QAAA,IAAIE,GAAG,CAACC,IAAI,KAAK,OAAO,EAAE;AACxBD,UAAAA,GAAG,CAACE,aAAa,EAAEC,KAAK,EAAE,CAAA;AAC5B,SAAC,MAAM;AACLH,UAAAA,GAAG,CAACrB,WAAW,EAAEwB,KAAK,EAAE,CAAA;AAC1B,SAAA;QAEAC,kBAAkB,CAACzC,gBAAgB,CAACO,OAAO,CAAC4B,SAAS,CAAC,CAACnB,WAAW,EAAEoB,QAAQ,CAAC,CAAA;QAC7EJ,KAAK,CAACU,cAAc,EAAE,CAAA;AACxB,OAAA;AACF,KAAA;IAEA,IAAIV,KAAK,CAACE,GAAG,KAAK,OAAO,IAAIF,KAAK,CAACE,GAAG,KAAK,GAAG,EAAE;AAC9CF,MAAAA,KAAK,CAACW,aAAa,CAACC,KAAK,EAAE,CAAA;AAC7B,KAAA;GACD,CAAA;AAED,EAAA,MAAMH,kBAAkB,GAAGA,CAACI,OAAoB,EAAE/B,IAAkB,KAAI;IACtE+B,OAAO,CAACC,cAAc,CAAC;AACrBhB,MAAAA,QAAQ,EAAE,QAAQ;AAClBiB,MAAAA,KAAK,EAAE,SAAS;AAChBC,MAAAA,MAAM,EAAE,QAAA;AACT,KAAA,CAAC,CAAA;AAEF5C,IAAAA,cAAc,CAACU,IAAI,CAACT,EAAE,CAAC,CAAA;GACxB,CAAA;AAED4C,EAAAA,SAAS,CAAC,MAAK;AACb3C,IAAAA,wBAAwB,EAAE,CAAA;AAC1B;AACF,GAAC,EAAE,CAACjB,cAAc,CAAC,CAAC,CAAA;AAEpB4D,EAAAA,SAAS,CAAC,MAAK;AACbC,IAAAA,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAE7C,wBAAwB,CAAC,CAAA;AAE3D,IAAA,OAAO,MAAK;AACV4C,MAAAA,MAAM,CAACE,mBAAmB,CAAC,QAAQ,EAAE9C,wBAAwB,CAAC,CAAA;KAC/D,CAAA;AACD;GACD,EAAE,EAAE,CAAC,CAAA;AAEN,EAAA,MAAM+C,yBAAyB,GAAGA,CAACpB,KAAa,EAAEI,GAA4B,KAAI;AAChF,IAAA,IAAIA,GAAG,EAAE;AACP;AACArC,MAAAA,gBAAgB,CAACO,OAAO,CAAC0B,KAAK,CAAC,GAAG;AAChCK,QAAAA,IAAI,EAAED,GAAG,CAACC,IAAI,IAAItC,gBAAgB,CAACO,OAAO,GAAG0B,KAAK,CAAC,EAAEK,IAAI;AACzDtB,QAAAA,WAAW,EAAEqB,GAAG,CAACrB,WAAW,IAAIhB,gBAAgB,CAACO,OAAO,GAAG0B,KAAK,CAAC,EAAEjB,WAAW;QAC9EuB,aAAa,EAAEF,GAAG,CAACE,aAAa,IAAIvC,gBAAgB,CAACO,OAAO,GAAG0B,KAAK,CAAC,EAAEM,aAAAA;OACxE,CAAA;AACH,KAAA;GACD,CAAA;AAED,EAAA,oBACEe,IAAA,CAAA,KAAA,EAAA;AAAKpE,IAAAA,SAAS,EAAEqE,IAAI,CAAC,kBAAkB,EAAErE,SAAS,CAAE;AAAAsE,IAAAA,QAAA,gBAClDF,IAAA,CAAA,KAAA,EAAA;AAAKpE,MAAAA,SAAS,EAAC,iDAAiD;MAAAsE,QAAA,EAAA,CAC7D,OAAOvE,MAAM,KAAK,QAAQ,gBACzBwE,GAAA,CAACC,KAAK,EAAA;AAACC,QAAAA,EAAE,EAAC,MAAM;AAACrB,QAAAA,IAAI,EAAC,YAAY;AAAAkB,QAAAA,QAAA,EAC/BvE,MAAAA;AAAM,OACF,CAAC,GAERA,MACD,EACAiB,uBAAuB,gBACtBoD,IAAA,CAAA,KAAA,EAAA;AAAKpE,QAAAA,SAAS,EAAC,WAAW;QAAAsE,QAAA,EAAA,cACxBC,GAAA,CAACG,YAAY,EAAA;AACX1E,UAAAA,SAAS,EAAC,yBAAyB;UACnC2E,QAAQ,EAAE,CAAC,CAAE;AACbC,UAAAA,QAAQ,EAAC,WAAW;UACpBC,QAAQ,EAAE,CAAC9D,yBAA0B;AACrC,UAAA,aAAA,EAAY,MAAM;AAClB,UAAA,aAAA,EAAY,sBAAsB;AAClCb,UAAAA,OAAO,EAAEA,MAAMkC,cAAc,CAAC,MAAM,CAAE;AAAAkC,UAAAA,QAAA,eAEtCC,GAAA,CAACO,WAAW,EACd,EAAA,CAAA;AAAA,SAAc,CACd,eAAAP,GAAA,CAACG,YAAY,EAAA;UACXC,QAAQ,EAAE,CAAC,CAAE;AACb3E,UAAAA,SAAS,EAAC,+BAA+B;AACzC4E,UAAAA,QAAQ,EAAC,WAAW;AACpB,UAAA,aAAA,EAAY,MAAM;AAClB,UAAA,aAAA,EAAY,uBAAuB;AACnCC,UAAAA,QAAQ,EAAErE,aAAc;AACxBN,UAAAA,OAAO,EAAEA,MAAMkC,cAAc,EAAG;AAAAkC,UAAAA,QAAA,eAEhCC,GAAA,CAACQ,YAAY,EACf,EAAA,CAAA;AAAA,SAAc,CAChB,CAAA;OAAK,CAAC,GACJ,IAAI,CAAA;KACL,CACL,eAAAR,GAAA,CAAA,KAAA,EAAA;AACEpB,MAAAA,GAAG,EAAEvC,kBAAmB;MACxB+D,QAAQ,EAAE,CAAC,CAAE;AACbK,MAAAA,IAAI,EAAC,MAAM;AACXhF,MAAAA,SAAS,EAAC,UAAU;MACpBiF,QAAQ,EAAGnC,KAAK,IAAI;AAClB,QAAA,MAAMoC,MAAM,GAAGpC,KAAK,CAACoC,MAAqB,CAAA;AAC1C9E,QAAAA,iBAAiB,CAAC8E,MAAM,CAACC,UAAU,CAAC,CAAA;OACpC;MAAAb,QAAA,EAEDrE,KAAK,EAAEmF,GAAG,CAAC,CAACxD,IAAI,EAAEmB,KAAK,KAAI;AAC1B,QAAA,MAAMsC,WAAW,GAAG;UAClBlE,EAAE,EAAES,IAAI,CAACT,EAAE;AACXnB,UAAAA,SAAS,EAAEqE,IAAI,CAAC,gBAAgB,EAAE;AAChC,YAAA,yBAAyB,EAAEzC,IAAI,CAACT,EAAE,KAAKF,WAAAA;WACxC,CAAC;UACFf,OAAO,EAAEA,MAAK;YACZ0B,IAAI,CAAC1B,OAAO,IAAI,CAAA;AAChBA,YAAAA,OAAO,GAAG0B,IAAI,CAACT,EAAE,CAAC,CAAA;WACnB;UACDmE,OAAO,EAAGxC,KAA2D,IAAI;AACvES,YAAAA,kBAAkB,CAACT,KAAK,CAACW,aAAa,EAAE7B,IAAI,CAAC,CAAA;AAC/C,WAAA;SACD,CAAA;QAED,MAAM2D,WAAW,GACf3D,IAAI,CAACwB,IAAI,KAAK,OAAO,gBACnBmB,GAAA,CAAA,KAAA,EAAA;AACEpD,UAAAA,EAAE,EAAE,CAAA,EAAGS,IAAI,CAACT,EAAE,CAAW,QAAA,CAAA;AACzBnB,UAAAA,SAAS,EAAEqE,IAAI,CAAC,wBAAwB,EAAE;YACxC,CAACzC,IAAI,CAAC5B,SAAS,IAAI,EAAE,GAAG,CAAC,CAAC4B,IAAI,CAAC5B,SAAAA;WAChC,CAAA;AACD;AAAA;UACAwF,KAAK,EAAE5D,IAAI,CAAC6D,MAAO;UAAAnB,QAAA,EAElB1C,IAAI,CAAC8D,OAAAA;SACH,CAAC,GACJ,IAAI,CAAA;AAEV,QAAA,IAAI9D,IAAI,CAACwB,IAAI,KAAK,QAAQ,EAAE;AAC1B,UAAA,oBACEmB,GAAA,CAAA,KAAA,EAAA;AAAmB,YAAA,iBAAA,EAAiB,CAAG3C,EAAAA,IAAI,CAACT,EAAE,CAAW,QAAA,CAAA;AAAC6D,YAAAA,IAAI,EAAC,UAAU;AAAAV,YAAAA,QAAA,eACvEC,GAAA,CAAA,KAAA,EAAA;AAAA,cAAA,GACMc,WAAW;cACflC,GAAG,EAAGwC,EAAE,IAAI;AACV,gBAAA,IAAIA,EAAE,EAAE;AACN;AACA7E,kBAAAA,gBAAgB,CAACO,OAAO,CAAC0B,KAAK,CAAC,GAAG;AAChCK,oBAAAA,IAAI,EAAE,SAAS;AACftB,oBAAAA,WAAW,EAAE6D,EAAAA;mBACd,CAAA;AACH,iBAAA;eACA;AACFX,cAAAA,IAAI,EAAC,QAAQ;AACbL,cAAAA,QAAQ,EAAE,CAAE;cACZiB,SAAS,EAAG9C,KAAK,IAAKD,eAAe,CAACC,KAAK,EAAEC,KAAK,CAAE;AAAAuB,cAAAA,QAAA,EAEnDiB,WAAAA;aACE,CAAA;WAjBG3D,EAAAA,IAAI,CAACT,EAkBV,CAAC,CAAA;AAEV,SAAA;AAEA,QAAA,IAAIS,IAAI,CAACwB,IAAI,KAAK,OAAO,EAAE;AACzB,UAAA,oBACEmB,GAAA,CAAA,KAAA,EAAA;YAAmBpD,EAAE,EAAES,IAAI,CAACT,EAAG;AAAC6D,YAAAA,IAAI,EAAC,UAAU;AAAC,YAAA,iBAAA,EAAiB,CAAGpD,EAAAA,IAAI,CAACT,EAAE,CAAU,OAAA,CAAA;YAAAmD,QAAA,eACnFC,GAAA,CAACsB,SAAS,EAAA;AACF,cAAA,GAAGjE,IAAI;AAAEwB,cAAAA,IAAI,EAAE0C,SAAS;AACxB,cAAA,GAAGT,WAAW;cACpBlC,GAAG,EAAGwC,EAAyB,IAAI;AACjC,gBAAA,IAAIA,EAAE,EAAE;kBACNxB,yBAAyB,CAACpB,KAAK,EAAE;AAC/BK,oBAAAA,IAAI,EAAE,OAAO;AACbtB,oBAAAA,WAAW,EAAE6D,EAAAA;AACd,mBAAA,CAAC,CAAA;AACJ,iBAAA;eACA;cACFI,SAAS,EAAGJ,EAAqB,IAAI;AACnC,gBAAA,IAAIA,EAAE,EAAE;kBACNxB,yBAAyB,CAACpB,KAAK,EAAE;AAC/BK,oBAAAA,IAAI,EAAE,OAAO;AACbC,oBAAAA,aAAa,EAAEsC,EAAAA;AAChB,mBAAA,CAAC,CAAA;AACJ,iBAAA;eACA;AACFK,cAAAA,QAAQ,EAAE,CAAA,EAAGpE,IAAI,CAACT,EAAE,CAAU,OAAA,CAAA;AAC9ByE,cAAAA,SAAS,EAAG9C,KAAK,IAAKD,eAAe,CAACC,KAAK,EAAEC,KAAK,CAAA;aAEtD,CAAA;WAvBUnB,EAAAA,IAAI,CAACT,EAuBV,CAAC,CAAA;AAEV,SAAA;AAEA,QAAA,oBACEoD,GAAA,CAAA,KAAA,EAAA;AAAmB,UAAA,iBAAA,EAAiB,CAAG3C,EAAAA,IAAI,CAACT,EAAE,CAAW,QAAA,CAAA;AAAC6D,UAAAA,IAAI,EAAC,UAAU;AAAAV,UAAAA,QAAA,eACvEC,GAAA,CAAA,GAAA,EAAA;AAAA,YAAA,GACMc,WAAW;YACflC,GAAG,EAAGwC,EAAE,IAAI;AACV,cAAA,IAAIA,EAAE,EAAE;AACN;AACA7E,gBAAAA,gBAAgB,CAACO,OAAO,CAAC0B,KAAK,CAAC,GAAG;AAChCK,kBAAAA,IAAI,EAAE,SAAS;AACftB,kBAAAA,WAAW,EAAE6D,EAAAA;iBACd,CAAA;AACH,eAAA;aACA;YACFM,IAAI,EAAErE,IAAI,CAACqE,IAAK;YAChBf,MAAM,EAAEtD,IAAI,CAACsE,UAAW;AACxBC,YAAAA,GAAG,EAAC,YAAY;YAChBP,SAAS,EAAG9C,KAAK,IAAKD,eAAe,CAACC,KAAK,EAAEC,KAAK,CAAE;AAAAuB,YAAAA,QAAA,EAEnDiB,WAAAA;WACA,CAAA;SAlBK3D,EAAAA,IAAI,CAACT,EAmBV,CAAC,CAAA;OAET,CAAA;KACE,CACL,eAAAoD,GAAA,CAAA,KAAA,EAAA;AAAKvE,MAAAA,SAAS,EAAC,YAAY;AAAAsE,MAAAA,QAAA,eACzBC,GAAA,CAAA,KAAA,EAAA;AAAKvE,QAAAA,SAAS,EAAC,sBAAsB;QAAAsE,QAAA,EAClCrE,KAAK,EAAEmF,GAAG,CAAC,CAACxD,IAAI,EAAEmB,KAAK,kBACtBwB,GAAA,CAAA,QAAA,EAAA;AAEE,UAAA,aAAA,EAAa,CAAG3C,EAAAA,IAAI,CAACT,EAAE,CAAa,UAAA,CAAA;UACpCwD,QAAQ,EAAE,CAAC,CAAE;UACb,aAAW,EAAA,IAAA;AACXvB,UAAAA,IAAI,EAAC,QAAQ;AACbpD,UAAAA,SAAS,EAAEqE,IAAI,CAAC,qBAAqB,EAAE;AACrC,YAAA,+BAA+B,EAAEzC,IAAI,CAACT,EAAE,KAAKT,uBAAAA;AAC9C,WAAA,CAAE;UACHR,OAAO,EAAEA,MAAK;YACZqD,kBAAkB,CAACzC,gBAAgB,CAACO,OAAO,CAAC0B,KAAK,CAAC,CAACjB,WAAW,EAAEF,IAAI,CAAC,CAAA;AACvE,WAAA;AAAE,SAAA,EAVG,CAAGA,EAAAA,IAAI,CAACT,EAAE,YAUb,CAEL,CAAA;OACE,CAAA;AACP,KAAK,CACP,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV,EAAC;AAED,MAAMU,SAAS,GAAGA,CAACuE,SAAsB,EAAET,EAAe,KAAI;AAC5D,EAAA,MAAMU,MAAM,GAAGD,SAAS,CAAC7E,WAAW,CAAA;AACpC,EAAA,MAAM+E,aAAa,GAAGF,SAAS,CAACjB,UAAU,CAAA;EAE1C,MAAMoB,QAAQ,GAAGZ,EAAE,CAACa,UAAU,GAAGJ,SAAS,CAACI,UAAU,CAAA;AACrD,EAAA,MAAMC,SAAS,GAAGF,QAAQ,GAAGZ,EAAE,CAACpE,WAAW,CAAA;EAE3C,OAAOgF,QAAQ,IAAID,aAAa,IAAIG,SAAS,IAAIH,aAAa,GAAGD,MAAM,CAAA;AACzE,CAAC;;;;"}

package/build/checkbox/Checkbox.js

@@ -1,15 +1,11 @@
 'use strict';
 
-var classNames = require('classnames');
+var clsx = require('clsx');
 var Body = require('../body/Body.js');
 var jsxRuntime = require('react/jsx-runtime');
 var CheckboxButton = require('../checkboxButton/CheckboxButton.js');
 var typography = require('../common/propsValues/typography.js');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
-
 function Checkbox({
   id,
   checked,
@@ -23,7 +19,7 @@ function Checkbox({
   onFocus,
   onBlur
 }) {
-  const classList = classNames__default.default('np-checkbox', {
+  const classList = clsx.clsx('np-checkbox', {
     checkbox: true,
     'checkbox-lg': secondary,
     disabled
@@ -33,7 +29,7 @@ function Checkbox({
     id: id,
     className: classList,
     children: /*#__PURE__*/jsxRuntime.jsxs("label", {
-      className: classNames__default.default({
+      className: clsx.clsx({
         disabled
       }),
       children: [/*#__PURE__*/jsxRuntime.jsx(CheckboxButton, {

package/build/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../src/checkbox/Checkbox.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport Body from '../body/Body';\nimport CheckboxButton from '../checkboxButton';\nimport { Typography } from '../common';\n\nexport interface CheckboxProps {\n  id?: string;\n  checked?: boolean;\n  required?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  label: React.ReactNode;\n  secondary?: string;\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  onChange: (checked: boolean) => void;\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  className?: string;\n}\n\nexport default function Checkbox({\n  id,\n  checked,\n  required,\n  disabled,\n  readOnly,\n  label,\n  className,\n  secondary,\n  onChange,\n  onFocus,\n  onBlur,\n}: CheckboxProps) {\n  const classList = classNames(\n    'np-checkbox',\n    {\n      checkbox: true,\n      'checkbox-lg': secondary,\n      disabled,\n    },\n    className,\n  );\n\n  const innerDisabled = disabled || readOnly;\n  return (\n    <div id={id} className={classList}>\n      {/* eslint-disable-next-line jsx-a11y/label-has-for */}\n      <label className={classNames({ disabled })}>\n        <CheckboxButton\n          className=\"p-r-2\"\n          checked={checked}\n          disabled={innerDisabled}\n          required={!innerDisabled && required}\n          onFocus={onFocus}\n          onChange={() => onChange(!checked)}\n          onBlur={onBlur}\n        />\n        <Body\n          as=\"span\"\n          className=\"np-checkbox__text\"\n          type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n        >\n          <span className={required ? 'has-required' : undefined}>{label}</span>\n          {secondary && <Body as=\"span\">{secondary}</Body>}\n        </Body>\n      </label>\n    </div>\n  );\n}\n"],"names":["Checkbox","id","checked","required","disabled","readOnly","label","className","secondary","onChange","onFocus","onBlur","classList","classNames","checkbox","innerDisabled","_jsx","children","_jsxs","CheckboxButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE","undefined"],"mappings":";;;;;;;;;;;;AAoBc,SAAUA,QAAQA,CAAC;EAC/BC,EAAE;EACFC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC,OAAO;AACPC,EAAAA,MAAAA;AACc,CAAA,EAAA;AACd,EAAA,MAAMC,SAAS,GAAGC,2BAAU,CAC1B,aAAa,EACb;AACEC,IAAAA,QAAQ,EAAE,IAAI;AACd,IAAA,aAAa,EAAEN,SAAS;AACxBJ,IAAAA,QAAAA;GACD,EACDG,SAAS,CACV,CAAA;AAED,EAAA,MAAMQ,aAAa,GAAGX,QAAQ,IAAIC,QAAQ,CAAA;AAC1C,EAAA,oBACEW,cAAA,CAAA,KAAA,EAAA;AAAKf,IAAAA,EAAE,EAAEA,EAAG;AAACM,IAAAA,SAAS,EAAEK,SAAU;AAAAK,IAAAA,QAAA,eAEhCC,eAAA,CAAA,OAAA,EAAA;MAAOX,SAAS,EAAEM,2BAAU,CAAC;AAAET,QAAAA,QAAAA;AAAQ,OAAE,CAAE;MAAAa,QAAA,EAAA,cACzCD,cAAA,CAACG,cAAc,EAAA;AACbZ,QAAAA,SAAS,EAAC,OAAO;AACjBL,QAAAA,OAAO,EAAEA,OAAQ;AACjBE,QAAAA,QAAQ,EAAEW,aAAc;AACxBZ,QAAAA,QAAQ,EAAE,CAACY,aAAa,IAAIZ,QAAS;AACrCO,QAAAA,OAAO,EAAEA,OAAQ;AACjBD,QAAAA,QAAQ,EAAEA,MAAMA,QAAQ,CAAC,CAACP,OAAO,CAAE;AACnCS,QAAAA,MAAM,EAAEA,MAAAA;AAAO,OAEjB,CAAA,eAAAO,eAAA,CAACE,IAAI,EAAA;AACHC,QAAAA,EAAE,EAAC,MAAM;AACTd,QAAAA,SAAS,EAAC,mBAAmB;QAC7Be,IAAI,EAAEd,SAAS,GAAGe,qBAAU,CAACC,eAAe,GAAGD,qBAAU,CAACE,UAAW;AAAAR,QAAAA,QAAA,gBAErED,cAAA,CAAA,MAAA,EAAA;AAAMT,UAAAA,SAAS,EAAEJ,QAAQ,GAAG,cAAc,GAAGuB,SAAU;AAAAT,UAAAA,QAAA,EAAEX,KAAAA;AAAK,SAAO,CACrE,EAACE,SAAS,iBAAIQ,cAAA,CAACI,IAAI,EAAA;AAACC,UAAAA,EAAE,EAAC,MAAM;AAAAJ,UAAAA,QAAA,EAAET,SAAAA;AAAS,SAAO,CAAC,CAAA;AAAA,OAC5C,CACR,CAAA;KAAO,CAAA;AACT,GAAK,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"Checkbox.js","sources":["../../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport CheckboxButton from '../checkboxButton';\nimport { Typography } from '../common';\n\nexport interface CheckboxProps {\n  id?: string;\n  checked?: boolean;\n  required?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  label: React.ReactNode;\n  secondary?: string;\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  onChange: (checked: boolean) => void;\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  className?: string;\n}\n\nexport default function Checkbox({\n  id,\n  checked,\n  required,\n  disabled,\n  readOnly,\n  label,\n  className,\n  secondary,\n  onChange,\n  onFocus,\n  onBlur,\n}: CheckboxProps) {\n  const classList = clsx(\n    'np-checkbox',\n    {\n      checkbox: true,\n      'checkbox-lg': secondary,\n      disabled,\n    },\n    className,\n  );\n\n  const innerDisabled = disabled || readOnly;\n  return (\n    <div id={id} className={classList}>\n      {/* eslint-disable-next-line jsx-a11y/label-has-for */}\n      <label className={clsx({ disabled })}>\n        <CheckboxButton\n          className=\"p-r-2\"\n          checked={checked}\n          disabled={innerDisabled}\n          required={!innerDisabled && required}\n          onFocus={onFocus}\n          onChange={() => onChange(!checked)}\n          onBlur={onBlur}\n        />\n        <Body\n          as=\"span\"\n          className=\"np-checkbox__text\"\n          type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n        >\n          <span className={required ? 'has-required' : undefined}>{label}</span>\n          {secondary && <Body as=\"span\">{secondary}</Body>}\n        </Body>\n      </label>\n    </div>\n  );\n}\n"],"names":["Checkbox","id","checked","required","disabled","readOnly","label","className","secondary","onChange","onFocus","onBlur","classList","clsx","checkbox","innerDisabled","_jsx","children","_jsxs","CheckboxButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE","undefined"],"mappings":";;;;;;;;AAoBc,SAAUA,QAAQA,CAAC;EAC/BC,EAAE;EACFC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC,OAAO;AACPC,EAAAA,MAAAA;AACc,CAAA,EAAA;AACd,EAAA,MAAMC,SAAS,GAAGC,SAAI,CACpB,aAAa,EACb;AACEC,IAAAA,QAAQ,EAAE,IAAI;AACd,IAAA,aAAa,EAAEN,SAAS;AACxBJ,IAAAA,QAAAA;GACD,EACDG,SAAS,CACV,CAAA;AAED,EAAA,MAAMQ,aAAa,GAAGX,QAAQ,IAAIC,QAAQ,CAAA;AAC1C,EAAA,oBACEW,cAAA,CAAA,KAAA,EAAA;AAAKf,IAAAA,EAAE,EAAEA,EAAG;AAACM,IAAAA,SAAS,EAAEK,SAAU;AAAAK,IAAAA,QAAA,eAEhCC,eAAA,CAAA,OAAA,EAAA;MAAOX,SAAS,EAAEM,SAAI,CAAC;AAAET,QAAAA,QAAAA;AAAQ,OAAE,CAAE;MAAAa,QAAA,EAAA,cACnCD,cAAA,CAACG,cAAc,EAAA;AACbZ,QAAAA,SAAS,EAAC,OAAO;AACjBL,QAAAA,OAAO,EAAEA,OAAQ;AACjBE,QAAAA,QAAQ,EAAEW,aAAc;AACxBZ,QAAAA,QAAQ,EAAE,CAACY,aAAa,IAAIZ,QAAS;AACrCO,QAAAA,OAAO,EAAEA,OAAQ;AACjBD,QAAAA,QAAQ,EAAEA,MAAMA,QAAQ,CAAC,CAACP,OAAO,CAAE;AACnCS,QAAAA,MAAM,EAAEA,MAAAA;AAAO,OAEjB,CAAA,eAAAO,eAAA,CAACE,IAAI,EAAA;AACHC,QAAAA,EAAE,EAAC,MAAM;AACTd,QAAAA,SAAS,EAAC,mBAAmB;QAC7Be,IAAI,EAAEd,SAAS,GAAGe,qBAAU,CAACC,eAAe,GAAGD,qBAAU,CAACE,UAAW;AAAAR,QAAAA,QAAA,gBAErED,cAAA,CAAA,MAAA,EAAA;AAAMT,UAAAA,SAAS,EAAEJ,QAAQ,GAAG,cAAc,GAAGuB,SAAU;AAAAT,UAAAA,QAAA,EAAEX,KAAAA;AAAK,SAAO,CACrE,EAACE,SAAS,iBAAIQ,cAAA,CAACI,IAAI,EAAA;AAACC,UAAAA,EAAE,EAAC,MAAM;AAAAJ,UAAAA,QAAA,EAAET,SAAAA;AAAS,SAAO,CAAC,CAAA;AAAA,OAC5C,CACR,CAAA;KAAO,CAAA;AACT,GAAK,CAAC,CAAA;AAEV;;;;"}

package/build/checkbox/Checkbox.mjs

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import Body from '../body/Body.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import CheckboxButton from '../checkboxButton/CheckboxButton.mjs';
@@ -17,7 +17,7 @@ function Checkbox({
   onFocus,
   onBlur
 }) {
-  const classList = classNames('np-checkbox', {
+  const classList = clsx('np-checkbox', {
     checkbox: true,
     'checkbox-lg': secondary,
     disabled
@@ -27,7 +27,7 @@ function Checkbox({
     id: id,
     className: classList,
     children: /*#__PURE__*/jsxs("label", {
-      className: classNames({
+      className: clsx({
         disabled
       }),
       children: [/*#__PURE__*/jsx(CheckboxButton, {

package/build/checkbox/Checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","sources":["../../src/checkbox/Checkbox.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport Body from '../body/Body';\nimport CheckboxButton from '../checkboxButton';\nimport { Typography } from '../common';\n\nexport interface CheckboxProps {\n  id?: string;\n  checked?: boolean;\n  required?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  label: React.ReactNode;\n  secondary?: string;\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  onChange: (checked: boolean) => void;\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  className?: string;\n}\n\nexport default function Checkbox({\n  id,\n  checked,\n  required,\n  disabled,\n  readOnly,\n  label,\n  className,\n  secondary,\n  onChange,\n  onFocus,\n  onBlur,\n}: CheckboxProps) {\n  const classList = classNames(\n    'np-checkbox',\n    {\n      checkbox: true,\n      'checkbox-lg': secondary,\n      disabled,\n    },\n    className,\n  );\n\n  const innerDisabled = disabled || readOnly;\n  return (\n    <div id={id} className={classList}>\n      {/* eslint-disable-next-line jsx-a11y/label-has-for */}\n      <label className={classNames({ disabled })}>\n        <CheckboxButton\n          className=\"p-r-2\"\n          checked={checked}\n          disabled={innerDisabled}\n          required={!innerDisabled && required}\n          onFocus={onFocus}\n          onChange={() => onChange(!checked)}\n          onBlur={onBlur}\n        />\n        <Body\n          as=\"span\"\n          className=\"np-checkbox__text\"\n          type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n        >\n          <span className={required ? 'has-required' : undefined}>{label}</span>\n          {secondary && <Body as=\"span\">{secondary}</Body>}\n        </Body>\n      </label>\n    </div>\n  );\n}\n"],"names":["Checkbox","id","checked","required","disabled","readOnly","label","className","secondary","onChange","onFocus","onBlur","classList","classNames","checkbox","innerDisabled","_jsx","children","_jsxs","CheckboxButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE","undefined"],"mappings":";;;;;;AAoBc,SAAUA,QAAQA,CAAC;EAC/BC,EAAE;EACFC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC,OAAO;AACPC,EAAAA,MAAAA;AACc,CAAA,EAAA;AACd,EAAA,MAAMC,SAAS,GAAGC,UAAU,CAC1B,aAAa,EACb;AACEC,IAAAA,QAAQ,EAAE,IAAI;AACd,IAAA,aAAa,EAAEN,SAAS;AACxBJ,IAAAA,QAAAA;GACD,EACDG,SAAS,CACV,CAAA;AAED,EAAA,MAAMQ,aAAa,GAAGX,QAAQ,IAAIC,QAAQ,CAAA;AAC1C,EAAA,oBACEW,GAAA,CAAA,KAAA,EAAA;AAAKf,IAAAA,EAAE,EAAEA,EAAG;AAACM,IAAAA,SAAS,EAAEK,SAAU;AAAAK,IAAAA,QAAA,eAEhCC,IAAA,CAAA,OAAA,EAAA;MAAOX,SAAS,EAAEM,UAAU,CAAC;AAAET,QAAAA,QAAAA;AAAQ,OAAE,CAAE;MAAAa,QAAA,EAAA,cACzCD,GAAA,CAACG,cAAc,EAAA;AACbZ,QAAAA,SAAS,EAAC,OAAO;AACjBL,QAAAA,OAAO,EAAEA,OAAQ;AACjBE,QAAAA,QAAQ,EAAEW,aAAc;AACxBZ,QAAAA,QAAQ,EAAE,CAACY,aAAa,IAAIZ,QAAS;AACrCO,QAAAA,OAAO,EAAEA,OAAQ;AACjBD,QAAAA,QAAQ,EAAEA,MAAMA,QAAQ,CAAC,CAACP,OAAO,CAAE;AACnCS,QAAAA,MAAM,EAAEA,MAAAA;AAAO,OAEjB,CAAA,eAAAO,IAAA,CAACE,IAAI,EAAA;AACHC,QAAAA,EAAE,EAAC,MAAM;AACTd,QAAAA,SAAS,EAAC,mBAAmB;QAC7Be,IAAI,EAAEd,SAAS,GAAGe,UAAU,CAACC,eAAe,GAAGD,UAAU,CAACE,UAAW;AAAAR,QAAAA,QAAA,gBAErED,GAAA,CAAA,MAAA,EAAA;AAAMT,UAAAA,SAAS,EAAEJ,QAAQ,GAAG,cAAc,GAAGuB,SAAU;AAAAT,UAAAA,QAAA,EAAEX,KAAAA;AAAK,SAAO,CACrE,EAACE,SAAS,iBAAIQ,GAAA,CAACI,IAAI,EAAA;AAACC,UAAAA,EAAE,EAAC,MAAM;AAAAJ,UAAAA,QAAA,EAAET,SAAAA;AAAS,SAAO,CAAC,CAAA;AAAA,OAC5C,CACR,CAAA;KAAO,CAAA;AACT,GAAK,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"Checkbox.mjs","sources":["../../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport CheckboxButton from '../checkboxButton';\nimport { Typography } from '../common';\n\nexport interface CheckboxProps {\n  id?: string;\n  checked?: boolean;\n  required?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  label: React.ReactNode;\n  secondary?: string;\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  onChange: (checked: boolean) => void;\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  className?: string;\n}\n\nexport default function Checkbox({\n  id,\n  checked,\n  required,\n  disabled,\n  readOnly,\n  label,\n  className,\n  secondary,\n  onChange,\n  onFocus,\n  onBlur,\n}: CheckboxProps) {\n  const classList = clsx(\n    'np-checkbox',\n    {\n      checkbox: true,\n      'checkbox-lg': secondary,\n      disabled,\n    },\n    className,\n  );\n\n  const innerDisabled = disabled || readOnly;\n  return (\n    <div id={id} className={classList}>\n      {/* eslint-disable-next-line jsx-a11y/label-has-for */}\n      <label className={clsx({ disabled })}>\n        <CheckboxButton\n          className=\"p-r-2\"\n          checked={checked}\n          disabled={innerDisabled}\n          required={!innerDisabled && required}\n          onFocus={onFocus}\n          onChange={() => onChange(!checked)}\n          onBlur={onBlur}\n        />\n        <Body\n          as=\"span\"\n          className=\"np-checkbox__text\"\n          type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n        >\n          <span className={required ? 'has-required' : undefined}>{label}</span>\n          {secondary && <Body as=\"span\">{secondary}</Body>}\n        </Body>\n      </label>\n    </div>\n  );\n}\n"],"names":["Checkbox","id","checked","required","disabled","readOnly","label","className","secondary","onChange","onFocus","onBlur","classList","clsx","checkbox","innerDisabled","_jsx","children","_jsxs","CheckboxButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE","undefined"],"mappings":";;;;;;AAoBc,SAAUA,QAAQA,CAAC;EAC/BC,EAAE;EACFC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC,OAAO;AACPC,EAAAA,MAAAA;AACc,CAAA,EAAA;AACd,EAAA,MAAMC,SAAS,GAAGC,IAAI,CACpB,aAAa,EACb;AACEC,IAAAA,QAAQ,EAAE,IAAI;AACd,IAAA,aAAa,EAAEN,SAAS;AACxBJ,IAAAA,QAAAA;GACD,EACDG,SAAS,CACV,CAAA;AAED,EAAA,MAAMQ,aAAa,GAAGX,QAAQ,IAAIC,QAAQ,CAAA;AAC1C,EAAA,oBACEW,GAAA,CAAA,KAAA,EAAA;AAAKf,IAAAA,EAAE,EAAEA,EAAG;AAACM,IAAAA,SAAS,EAAEK,SAAU;AAAAK,IAAAA,QAAA,eAEhCC,IAAA,CAAA,OAAA,EAAA;MAAOX,SAAS,EAAEM,IAAI,CAAC;AAAET,QAAAA,QAAAA;AAAQ,OAAE,CAAE;MAAAa,QAAA,EAAA,cACnCD,GAAA,CAACG,cAAc,EAAA;AACbZ,QAAAA,SAAS,EAAC,OAAO;AACjBL,QAAAA,OAAO,EAAEA,OAAQ;AACjBE,QAAAA,QAAQ,EAAEW,aAAc;AACxBZ,QAAAA,QAAQ,EAAE,CAACY,aAAa,IAAIZ,QAAS;AACrCO,QAAAA,OAAO,EAAEA,OAAQ;AACjBD,QAAAA,QAAQ,EAAEA,MAAMA,QAAQ,CAAC,CAACP,OAAO,CAAE;AACnCS,QAAAA,MAAM,EAAEA,MAAAA;AAAO,OAEjB,CAAA,eAAAO,IAAA,CAACE,IAAI,EAAA;AACHC,QAAAA,EAAE,EAAC,MAAM;AACTd,QAAAA,SAAS,EAAC,mBAAmB;QAC7Be,IAAI,EAAEd,SAAS,GAAGe,UAAU,CAACC,eAAe,GAAGD,UAAU,CAACE,UAAW;AAAAR,QAAAA,QAAA,gBAErED,GAAA,CAAA,MAAA,EAAA;AAAMT,UAAAA,SAAS,EAAEJ,QAAQ,GAAG,cAAc,GAAGuB,SAAU;AAAAT,UAAAA,QAAA,EAAEX,KAAAA;AAAK,SAAO,CACrE,EAACE,SAAS,iBAAIQ,GAAA,CAACI,IAAI,EAAA;AAACC,UAAAA,EAAE,EAAC,MAAM;AAAAJ,UAAAA,QAAA,EAAET,SAAAA;AAAS,SAAO,CAAC,CAAA;AAAA,OAC5C,CACR,CAAA;KAAO,CAAA;AACT,GAAK,CAAC,CAAA;AAEV;;;;"}

package/build/checkboxButton/CheckboxButton.js

@@ -1,14 +1,10 @@
 'use strict';
 
-var classNames = require('classnames');
+var clsx = require('clsx');
 var React = require('react');
 var contexts = require('../inputs/contexts.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
-
 const CheckboxButton = /*#__PURE__*/React.forwardRef(function CheckboxButton({
   checked,
   className,
@@ -18,7 +14,7 @@ const CheckboxButton = /*#__PURE__*/React.forwardRef(function CheckboxButton({
 }, reference) {
   const inputAttributes = contexts.useInputAttributes();
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: classNames__default.default('np-checkbox-button', className, disabled && 'disabled'),
+    className: clsx.clsx('np-checkbox-button', className, disabled && 'disabled'),
     children: [/*#__PURE__*/jsxRuntime.jsx("input", {
       ...inputAttributes,
       ...rest,

package/build/checkboxButton/CheckboxButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxButton.js","sources":["../../src/checkboxButton/CheckboxButton.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { InputHTMLAttributes, forwardRef } from 'react';\n\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type CheckboxButtonProps = InputHTMLAttributes<HTMLInputElement>;\n\nconst CheckboxButton = forwardRef<HTMLInputElement, CheckboxButtonProps>(function CheckboxButton(\n  { checked, className, disabled, onChange, ...rest },\n  reference,\n) {\n  const inputAttributes = useInputAttributes();\n\n  return (\n    <span className={classNames('np-checkbox-button', className, disabled && 'disabled')}>\n      <input\n        {...inputAttributes}\n        {...rest}\n        ref={reference}\n        type=\"checkbox\"\n        disabled={disabled}\n        checked={checked}\n        onChange={onChange}\n      />\n      <span className=\"tw-checkbox-button\">\n        <span className=\"tw-checkbox-check\" />\n      </span>\n    </span>\n  );\n});\n\nexport default CheckboxButton;\n"],"names":["CheckboxButton","forwardRef","checked","className","disabled","onChange","rest","reference","inputAttributes","useInputAttributes","_jsxs","classNames","children","_jsx","ref","type"],"mappings":";;;;;;;;;;;AAOA,MAAMA,cAAc,gBAAGC,gBAAU,CAAwC,SAASD,cAAcA,CAC9F;EAAEE,OAAO;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC,IAAAA;AAAI,CAAE,EACnDC,SAAS,EAAA;AAET,EAAA,MAAMC,eAAe,GAAGC,2BAAkB,EAAE,CAAA;AAE5C,EAAA,oBACEC,eAAA,CAAA,MAAA,EAAA;IAAMP,SAAS,EAAEQ,2BAAU,CAAC,oBAAoB,EAAER,SAAS,EAAEC,QAAQ,IAAI,UAAU,CAAE;AAAAQ,IAAAA,QAAA,gBACnFC,cAAA,CAAA,OAAA,EAAA;AAAA,MAAA,GACML,eAAe;AAAA,MAAA,GACfF,IAAI;AACRQ,MAAAA,GAAG,EAAEP,SAAU;AACfQ,MAAAA,IAAI,EAAC,UAAU;AACfX,MAAAA,QAAQ,EAAEA,QAAS;AACnBF,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,QAAQ,EAAEA,QAAAA;KAEZ,CAAA,eAAAQ,cAAA,CAAA,MAAA,EAAA;AAAMV,MAAAA,SAAS,EAAC,oBAAoB;AAAAS,MAAAA,QAAA,eAClCC,cAAA,CAAA,MAAA,EAAA;AAAMV,QAAAA,SAAS,EAAC,mBAAA;OAClB,CAAA;AAAA,KAAM,CACR,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX,CAAC;;;;"}
+{"version":3,"file":"CheckboxButton.js","sources":["../../src/checkboxButton/CheckboxButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { InputHTMLAttributes, forwardRef } from 'react';\n\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type CheckboxButtonProps = InputHTMLAttributes<HTMLInputElement>;\n\nconst CheckboxButton = forwardRef<HTMLInputElement, CheckboxButtonProps>(function CheckboxButton(\n  { checked, className, disabled, onChange, ...rest },\n  reference,\n) {\n  const inputAttributes = useInputAttributes();\n\n  return (\n    <span className={clsx('np-checkbox-button', className, disabled && 'disabled')}>\n      <input\n        {...inputAttributes}\n        {...rest}\n        ref={reference}\n        type=\"checkbox\"\n        disabled={disabled}\n        checked={checked}\n        onChange={onChange}\n      />\n      <span className=\"tw-checkbox-button\">\n        <span className=\"tw-checkbox-check\" />\n      </span>\n    </span>\n  );\n});\n\nexport default CheckboxButton;\n"],"names":["CheckboxButton","forwardRef","checked","className","disabled","onChange","rest","reference","inputAttributes","useInputAttributes","_jsxs","clsx","children","_jsx","ref","type"],"mappings":";;;;;;;AAOA,MAAMA,cAAc,gBAAGC,gBAAU,CAAwC,SAASD,cAAcA,CAC9F;EAAEE,OAAO;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC,IAAAA;AAAI,CAAE,EACnDC,SAAS,EAAA;AAET,EAAA,MAAMC,eAAe,GAAGC,2BAAkB,EAAE,CAAA;AAE5C,EAAA,oBACEC,eAAA,CAAA,MAAA,EAAA;IAAMP,SAAS,EAAEQ,SAAI,CAAC,oBAAoB,EAAER,SAAS,EAAEC,QAAQ,IAAI,UAAU,CAAE;AAAAQ,IAAAA,QAAA,gBAC7EC,cAAA,CAAA,OAAA,EAAA;AAAA,MAAA,GACML,eAAe;AAAA,MAAA,GACfF,IAAI;AACRQ,MAAAA,GAAG,EAAEP,SAAU;AACfQ,MAAAA,IAAI,EAAC,UAAU;AACfX,MAAAA,QAAQ,EAAEA,QAAS;AACnBF,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,QAAQ,EAAEA,QAAAA;KAEZ,CAAA,eAAAQ,cAAA,CAAA,MAAA,EAAA;AAAMV,MAAAA,SAAS,EAAC,oBAAoB;AAAAS,MAAAA,QAAA,eAClCC,cAAA,CAAA,MAAA,EAAA;AAAMV,QAAAA,SAAS,EAAC,mBAAA;OAClB,CAAA;AAAA,KAAM,CACR,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX,CAAC;;;;"}

package/build/checkboxButton/CheckboxButton.mjs

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { useInputAttributes } from '../inputs/contexts.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -12,7 +12,7 @@ const CheckboxButton = /*#__PURE__*/forwardRef(function CheckboxButton({
 }, reference) {
   const inputAttributes = useInputAttributes();
   return /*#__PURE__*/jsxs("span", {
-    className: classNames('np-checkbox-button', className, disabled && 'disabled'),
+    className: clsx('np-checkbox-button', className, disabled && 'disabled'),
     children: [/*#__PURE__*/jsx("input", {
       ...inputAttributes,
       ...rest,

package/build/checkboxButton/CheckboxButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxButton.mjs","sources":["../../src/checkboxButton/CheckboxButton.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { InputHTMLAttributes, forwardRef } from 'react';\n\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type CheckboxButtonProps = InputHTMLAttributes<HTMLInputElement>;\n\nconst CheckboxButton = forwardRef<HTMLInputElement, CheckboxButtonProps>(function CheckboxButton(\n  { checked, className, disabled, onChange, ...rest },\n  reference,\n) {\n  const inputAttributes = useInputAttributes();\n\n  return (\n    <span className={classNames('np-checkbox-button', className, disabled && 'disabled')}>\n      <input\n        {...inputAttributes}\n        {...rest}\n        ref={reference}\n        type=\"checkbox\"\n        disabled={disabled}\n        checked={checked}\n        onChange={onChange}\n      />\n      <span className=\"tw-checkbox-button\">\n        <span className=\"tw-checkbox-check\" />\n      </span>\n    </span>\n  );\n});\n\nexport default CheckboxButton;\n"],"names":["CheckboxButton","forwardRef","checked","className","disabled","onChange","rest","reference","inputAttributes","useInputAttributes","_jsxs","classNames","children","_jsx","ref","type"],"mappings":";;;;;AAOA,MAAMA,cAAc,gBAAGC,UAAU,CAAwC,SAASD,cAAcA,CAC9F;EAAEE,OAAO;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC,IAAAA;AAAI,CAAE,EACnDC,SAAS,EAAA;AAET,EAAA,MAAMC,eAAe,GAAGC,kBAAkB,EAAE,CAAA;AAE5C,EAAA,oBACEC,IAAA,CAAA,MAAA,EAAA;IAAMP,SAAS,EAAEQ,UAAU,CAAC,oBAAoB,EAAER,SAAS,EAAEC,QAAQ,IAAI,UAAU,CAAE;AAAAQ,IAAAA,QAAA,gBACnFC,GAAA,CAAA,OAAA,EAAA;AAAA,MAAA,GACML,eAAe;AAAA,MAAA,GACfF,IAAI;AACRQ,MAAAA,GAAG,EAAEP,SAAU;AACfQ,MAAAA,IAAI,EAAC,UAAU;AACfX,MAAAA,QAAQ,EAAEA,QAAS;AACnBF,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,QAAQ,EAAEA,QAAAA;KAEZ,CAAA,eAAAQ,GAAA,CAAA,MAAA,EAAA;AAAMV,MAAAA,SAAS,EAAC,oBAAoB;AAAAS,MAAAA,QAAA,eAClCC,GAAA,CAAA,MAAA,EAAA;AAAMV,QAAAA,SAAS,EAAC,mBAAA;OAClB,CAAA;AAAA,KAAM,CACR,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX,CAAC;;;;"}
+{"version":3,"file":"CheckboxButton.mjs","sources":["../../src/checkboxButton/CheckboxButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { InputHTMLAttributes, forwardRef } from 'react';\n\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type CheckboxButtonProps = InputHTMLAttributes<HTMLInputElement>;\n\nconst CheckboxButton = forwardRef<HTMLInputElement, CheckboxButtonProps>(function CheckboxButton(\n  { checked, className, disabled, onChange, ...rest },\n  reference,\n) {\n  const inputAttributes = useInputAttributes();\n\n  return (\n    <span className={clsx('np-checkbox-button', className, disabled && 'disabled')}>\n      <input\n        {...inputAttributes}\n        {...rest}\n        ref={reference}\n        type=\"checkbox\"\n        disabled={disabled}\n        checked={checked}\n        onChange={onChange}\n      />\n      <span className=\"tw-checkbox-button\">\n        <span className=\"tw-checkbox-check\" />\n      </span>\n    </span>\n  );\n});\n\nexport default CheckboxButton;\n"],"names":["CheckboxButton","forwardRef","checked","className","disabled","onChange","rest","reference","inputAttributes","useInputAttributes","_jsxs","clsx","children","_jsx","ref","type"],"mappings":";;;;;AAOA,MAAMA,cAAc,gBAAGC,UAAU,CAAwC,SAASD,cAAcA,CAC9F;EAAEE,OAAO;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC,IAAAA;AAAI,CAAE,EACnDC,SAAS,EAAA;AAET,EAAA,MAAMC,eAAe,GAAGC,kBAAkB,EAAE,CAAA;AAE5C,EAAA,oBACEC,IAAA,CAAA,MAAA,EAAA;IAAMP,SAAS,EAAEQ,IAAI,CAAC,oBAAoB,EAAER,SAAS,EAAEC,QAAQ,IAAI,UAAU,CAAE;AAAAQ,IAAAA,QAAA,gBAC7EC,GAAA,CAAA,OAAA,EAAA;AAAA,MAAA,GACML,eAAe;AAAA,MAAA,GACfF,IAAI;AACRQ,MAAAA,GAAG,EAAEP,SAAU;AACfQ,MAAAA,IAAI,EAAC,UAAU;AACfX,MAAAA,QAAQ,EAAEA,QAAS;AACnBF,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,QAAQ,EAAEA,QAAAA;KAEZ,CAAA,eAAAQ,GAAA,CAAA,MAAA,EAAA;AAAMV,MAAAA,SAAS,EAAC,oBAAoB;AAAAS,MAAAA,QAAA,eAClCC,GAAA,CAAA,MAAA,EAAA;AAAMV,QAAAA,SAAS,EAAC,mBAAA;OAClB,CAAA;AAAA,KAAM,CACR,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX,CAAC;;;;"}

package/build/chevron/Chevron.js

@@ -1,15 +1,11 @@
 'use strict';
 
 var icons = require('@transferwise/icons');
-var classNames = require('classnames');
+var clsx = require('clsx');
 var jsxRuntime = require('react/jsx-runtime');
 var size = require('../common/propsValues/size.js');
 var position = require('../common/propsValues/position.js');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
-
 const CONTAINER_SIZE = {
   [size.Size.EXTRA_SMALL]: 10,
   [size.Size.SMALL]: 16,
@@ -19,7 +15,7 @@ const ExtraSmallChevron = ({
   className
 }) => {
   return /*#__PURE__*/jsxRuntime.jsx("span", {
-    className: classNames__default.default('tw-icon', 'tw-icon-chevron', className),
+    className: clsx.clsx('tw-icon', 'tw-icon-chevron', className),
     role: "presentation",
     "aria-hidden": true,
     children: /*#__PURE__*/jsxRuntime.jsx("svg", {
@@ -41,7 +37,7 @@ const Chevron = ({
   disabled = false,
   className
 }) => {
-  const classNameValue = classNames__default.default('tw-chevron', {
+  const classNameValue = clsx.clsx('tw-chevron', {
     'chevron-color': !disabled
   }, orientation, className);
   if (size$1 === size.Size.EXTRA_SMALL) {

package/build/chevron/Chevron.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chevron.js","sources":["../../src/chevron/Chevron.tsx"],"sourcesContent":["import { ChevronUp } from '@transferwise/icons';\nimport { IconSize } from '@transferwise/icons/lib/types';\nimport classNames from 'classnames';\n\nimport {\n  Size,\n  Position,\n  PositionTop,\n  PositionBottom,\n  PositionRight,\n  PositionLeft,\n  SizeExtraSmall,\n  SizeSmall,\n  SizeMedium,\n} from '../common';\n\nconst CONTAINER_SIZE = {\n  [Size.EXTRA_SMALL]: 10,\n  [Size.SMALL]: 16,\n  [Size.MEDIUM]: 24,\n};\n\nexport interface ChevronProps {\n  orientation?: PositionTop | PositionBottom | PositionLeft | PositionRight;\n  size?: SizeExtraSmall | SizeSmall | SizeMedium;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport interface ExtraSmallChevronProps {\n  className?: string;\n}\n\nconst ExtraSmallChevron = ({ className }: ExtraSmallChevronProps) => {\n  return (\n    <span\n      className={classNames('tw-icon', 'tw-icon-chevron', className)}\n      role=\"presentation\"\n      aria-hidden\n    >\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"currentColor\" focusable=\"false\">\n        <path\n          fillRule=\"evenodd\"\n          d=\"M4.9995 2.0865L0.0635004 6.7645L1.2745 7.9125L4.9995 4.3835L8.7245 7.9135L9.9355 6.7645L4.9995 2.0865Z\"\n        />\n      </svg>\n    </span>\n  );\n};\n\nconst Chevron = ({\n  orientation = Position.BOTTOM,\n  size = Size.SMALL,\n  disabled = false,\n  className,\n}: ChevronProps) => {\n  const classNameValue = classNames(\n    'tw-chevron',\n    { 'chevron-color': !disabled },\n    orientation,\n    className,\n  );\n\n  if (size === Size.EXTRA_SMALL) {\n    return <ExtraSmallChevron className={classNameValue} />;\n  }\n\n  const sizeValue = CONTAINER_SIZE[size] as IconSize;\n\n  return <ChevronUp className={classNameValue} size={sizeValue} />;\n};\n\nexport default Chevron;\n"],"names":["CONTAINER_SIZE","Size","EXTRA_SMALL","SMALL","MEDIUM","ExtraSmallChevron","className","_jsx","classNames","role","children","width","height","viewBox","fill","focusable","fillRule","d","Chevron","orientation","Position","BOTTOM","size","disabled","classNameValue","sizeValue","ChevronUp"],"mappings":";;;;;;;;;;;;AAgBA,MAAMA,cAAc,GAAG;AACrB,EAAA,CAACC,SAAI,CAACC,WAAW,GAAG,EAAE;AACtB,EAAA,CAACD,SAAI,CAACE,KAAK,GAAG,EAAE;EAChB,CAACF,SAAI,CAACG,MAAM,GAAG,EAAA;CAChB,CAAA;AAaD,MAAMC,iBAAiB,GAAGA,CAAC;AAAEC,EAAAA,SAAAA;AAAS,CAA0B,KAAI;AAClE,EAAA,oBACEC,cAAA,CAAA,MAAA,EAAA;IACED,SAAS,EAAEE,2BAAU,CAAC,SAAS,EAAE,iBAAiB,EAAEF,SAAS,CAAE;AAC/DG,IAAAA,IAAI,EAAC,cAAc;IACnB,aAAW,EAAA,IAAA;AAAAC,IAAAA,QAAA,eAEXH,cAAA,CAAA,KAAA,EAAA;AAAKI,MAAAA,KAAK,EAAC,IAAI;AAACC,MAAAA,MAAM,EAAC,IAAI;AAACC,MAAAA,OAAO,EAAC,WAAW;AAACC,MAAAA,IAAI,EAAC,cAAc;AAACC,MAAAA,SAAS,EAAC,OAAO;AAAAL,MAAAA,QAAA,eACnFH,cAAA,CAAA,MAAA,EAAA;AACES,QAAAA,QAAQ,EAAC,SAAS;AAClBC,QAAAA,CAAC,EAAC,wGAAA;OAEN,CAAA;KAAK,CAAA;AACP,GAAM,CAAC,CAAA;AAEX,CAAC,CAAA;AAEKC,MAAAA,OAAO,GAAGA,CAAC;EACfC,WAAW,GAAGC,iBAAQ,CAACC,MAAM;QAC7BC,MAAI,GAAGrB,SAAI,CAACE,KAAK;AACjBoB,EAAAA,QAAQ,GAAG,KAAK;AAChBjB,EAAAA,SAAAA;AACa,CAAA,KAAI;AACjB,EAAA,MAAMkB,cAAc,GAAGhB,2BAAU,CAC/B,YAAY,EACZ;AAAE,IAAA,eAAe,EAAE,CAACe,QAAAA;AAAU,GAAA,EAC9BJ,WAAW,EACXb,SAAS,CACV,CAAA;AAED,EAAA,IAAIgB,MAAI,KAAKrB,SAAI,CAACC,WAAW,EAAE;IAC7B,oBAAOK,cAAA,CAACF,iBAAiB,EAAA;AAACC,MAAAA,SAAS,EAAEkB,cAAAA;AAAe,KAAA,CAAG,CAAA;AACzD,GAAA;AAEA,EAAA,MAAMC,SAAS,GAAGzB,cAAc,CAACsB,MAAI,CAAa,CAAA;EAElD,oBAAOf,cAAA,CAACmB,eAAS,EAAA;AAACpB,IAAAA,SAAS,EAAEkB,cAAe;AAACF,IAAAA,IAAI,EAAEG,SAAAA;AAAU,IAAG,CAAA;AAClE;;;;"}
+{"version":3,"file":"Chevron.js","sources":["../../src/chevron/Chevron.tsx"],"sourcesContent":["import { ChevronUp } from '@transferwise/icons';\nimport { IconSize } from '@transferwise/icons/lib/types';\nimport { clsx } from 'clsx';\n\nimport {\n  Size,\n  Position,\n  PositionTop,\n  PositionBottom,\n  PositionRight,\n  PositionLeft,\n  SizeExtraSmall,\n  SizeSmall,\n  SizeMedium,\n} from '../common';\n\nconst CONTAINER_SIZE = {\n  [Size.EXTRA_SMALL]: 10,\n  [Size.SMALL]: 16,\n  [Size.MEDIUM]: 24,\n};\n\nexport interface ChevronProps {\n  orientation?: PositionTop | PositionBottom | PositionLeft | PositionRight;\n  size?: SizeExtraSmall | SizeSmall | SizeMedium;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport interface ExtraSmallChevronProps {\n  className?: string;\n}\n\nconst ExtraSmallChevron = ({ className }: ExtraSmallChevronProps) => {\n  return (\n    <span className={clsx('tw-icon', 'tw-icon-chevron', className)} role=\"presentation\" aria-hidden>\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"currentColor\" focusable=\"false\">\n        <path\n          fillRule=\"evenodd\"\n          d=\"M4.9995 2.0865L0.0635004 6.7645L1.2745 7.9125L4.9995 4.3835L8.7245 7.9135L9.9355 6.7645L4.9995 2.0865Z\"\n        />\n      </svg>\n    </span>\n  );\n};\n\nconst Chevron = ({\n  orientation = Position.BOTTOM,\n  size = Size.SMALL,\n  disabled = false,\n  className,\n}: ChevronProps) => {\n  const classNameValue = clsx('tw-chevron', { 'chevron-color': !disabled }, orientation, className);\n\n  if (size === Size.EXTRA_SMALL) {\n    return <ExtraSmallChevron className={classNameValue} />;\n  }\n\n  const sizeValue = CONTAINER_SIZE[size] as IconSize;\n\n  return <ChevronUp className={classNameValue} size={sizeValue} />;\n};\n\nexport default Chevron;\n"],"names":["CONTAINER_SIZE","Size","EXTRA_SMALL","SMALL","MEDIUM","ExtraSmallChevron","className","_jsx","clsx","role","children","width","height","viewBox","fill","focusable","fillRule","d","Chevron","orientation","Position","BOTTOM","size","disabled","classNameValue","sizeValue","ChevronUp"],"mappings":";;;;;;;;AAgBA,MAAMA,cAAc,GAAG;AACrB,EAAA,CAACC,SAAI,CAACC,WAAW,GAAG,EAAE;AACtB,EAAA,CAACD,SAAI,CAACE,KAAK,GAAG,EAAE;EAChB,CAACF,SAAI,CAACG,MAAM,GAAG,EAAA;CAChB,CAAA;AAaD,MAAMC,iBAAiB,GAAGA,CAAC;AAAEC,EAAAA,SAAAA;AAAS,CAA0B,KAAI;AAClE,EAAA,oBACEC,cAAA,CAAA,MAAA,EAAA;IAAMD,SAAS,EAAEE,SAAI,CAAC,SAAS,EAAE,iBAAiB,EAAEF,SAAS,CAAE;AAACG,IAAAA,IAAI,EAAC,cAAc;IAAC,aAAW,EAAA,IAAA;AAAAC,IAAAA,QAAA,eAC7FH,cAAA,CAAA,KAAA,EAAA;AAAKI,MAAAA,KAAK,EAAC,IAAI;AAACC,MAAAA,MAAM,EAAC,IAAI;AAACC,MAAAA,OAAO,EAAC,WAAW;AAACC,MAAAA,IAAI,EAAC,cAAc;AAACC,MAAAA,SAAS,EAAC,OAAO;AAAAL,MAAAA,QAAA,eACnFH,cAAA,CAAA,MAAA,EAAA;AACES,QAAAA,QAAQ,EAAC,SAAS;AAClBC,QAAAA,CAAC,EAAC,wGAAA;OAEN,CAAA;KAAK,CAAA;AACP,GAAM,CAAC,CAAA;AAEX,CAAC,CAAA;AAEKC,MAAAA,OAAO,GAAGA,CAAC;EACfC,WAAW,GAAGC,iBAAQ,CAACC,MAAM;QAC7BC,MAAI,GAAGrB,SAAI,CAACE,KAAK;AACjBoB,EAAAA,QAAQ,GAAG,KAAK;AAChBjB,EAAAA,SAAAA;AACa,CAAA,KAAI;AACjB,EAAA,MAAMkB,cAAc,GAAGhB,SAAI,CAAC,YAAY,EAAE;AAAE,IAAA,eAAe,EAAE,CAACe,QAAAA;AAAU,GAAA,EAAEJ,WAAW,EAAEb,SAAS,CAAC,CAAA;AAEjG,EAAA,IAAIgB,MAAI,KAAKrB,SAAI,CAACC,WAAW,EAAE;IAC7B,oBAAOK,cAAA,CAACF,iBAAiB,EAAA;AAACC,MAAAA,SAAS,EAAEkB,cAAAA;AAAe,KAAA,CAAG,CAAA;AACzD,GAAA;AAEA,EAAA,MAAMC,SAAS,GAAGzB,cAAc,CAACsB,MAAI,CAAa,CAAA;EAElD,oBAAOf,cAAA,CAACmB,eAAS,EAAA;AAACpB,IAAAA,SAAS,EAAEkB,cAAe;AAACF,IAAAA,IAAI,EAAEG,SAAAA;AAAU,IAAG,CAAA;AAClE;;;;"}

package/build/chevron/Chevron.mjs

@@ -1,5 +1,5 @@
 import { ChevronUp } from '@transferwise/icons';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { jsx } from 'react/jsx-runtime';
 import { Size } from '../common/propsValues/size.mjs';
 import { Position } from '../common/propsValues/position.mjs';
@@ -13,7 +13,7 @@ const ExtraSmallChevron = ({
   className
 }) => {
   return /*#__PURE__*/jsx("span", {
-    className: classNames('tw-icon', 'tw-icon-chevron', className),
+    className: clsx('tw-icon', 'tw-icon-chevron', className),
     role: "presentation",
     "aria-hidden": true,
     children: /*#__PURE__*/jsx("svg", {
@@ -35,7 +35,7 @@ const Chevron = ({
   disabled = false,
   className
 }) => {
-  const classNameValue = classNames('tw-chevron', {
+  const classNameValue = clsx('tw-chevron', {
     'chevron-color': !disabled
   }, orientation, className);
   if (size === Size.EXTRA_SMALL) {

package/build/chevron/Chevron.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Chevron.mjs","sources":["../../src/chevron/Chevron.tsx"],"sourcesContent":["import { ChevronUp } from '@transferwise/icons';\nimport { IconSize } from '@transferwise/icons/lib/types';\nimport classNames from 'classnames';\n\nimport {\n  Size,\n  Position,\n  PositionTop,\n  PositionBottom,\n  PositionRight,\n  PositionLeft,\n  SizeExtraSmall,\n  SizeSmall,\n  SizeMedium,\n} from '../common';\n\nconst CONTAINER_SIZE = {\n  [Size.EXTRA_SMALL]: 10,\n  [Size.SMALL]: 16,\n  [Size.MEDIUM]: 24,\n};\n\nexport interface ChevronProps {\n  orientation?: PositionTop | PositionBottom | PositionLeft | PositionRight;\n  size?: SizeExtraSmall | SizeSmall | SizeMedium;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport interface ExtraSmallChevronProps {\n  className?: string;\n}\n\nconst ExtraSmallChevron = ({ className }: ExtraSmallChevronProps) => {\n  return (\n    <span\n      className={classNames('tw-icon', 'tw-icon-chevron', className)}\n      role=\"presentation\"\n      aria-hidden\n    >\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"currentColor\" focusable=\"false\">\n        <path\n          fillRule=\"evenodd\"\n          d=\"M4.9995 2.0865L0.0635004 6.7645L1.2745 7.9125L4.9995 4.3835L8.7245 7.9135L9.9355 6.7645L4.9995 2.0865Z\"\n        />\n      </svg>\n    </span>\n  );\n};\n\nconst Chevron = ({\n  orientation = Position.BOTTOM,\n  size = Size.SMALL,\n  disabled = false,\n  className,\n}: ChevronProps) => {\n  const classNameValue = classNames(\n    'tw-chevron',\n    { 'chevron-color': !disabled },\n    orientation,\n    className,\n  );\n\n  if (size === Size.EXTRA_SMALL) {\n    return <ExtraSmallChevron className={classNameValue} />;\n  }\n\n  const sizeValue = CONTAINER_SIZE[size] as IconSize;\n\n  return <ChevronUp className={classNameValue} size={sizeValue} />;\n};\n\nexport default Chevron;\n"],"names":["CONTAINER_SIZE","Size","EXTRA_SMALL","SMALL","MEDIUM","ExtraSmallChevron","className","_jsx","classNames","role","children","width","height","viewBox","fill","focusable","fillRule","d","Chevron","orientation","Position","BOTTOM","size","disabled","classNameValue","sizeValue","ChevronUp"],"mappings":";;;;;;AAgBA,MAAMA,cAAc,GAAG;AACrB,EAAA,CAACC,IAAI,CAACC,WAAW,GAAG,EAAE;AACtB,EAAA,CAACD,IAAI,CAACE,KAAK,GAAG,EAAE;EAChB,CAACF,IAAI,CAACG,MAAM,GAAG,EAAA;CAChB,CAAA;AAaD,MAAMC,iBAAiB,GAAGA,CAAC;AAAEC,EAAAA,SAAAA;AAAS,CAA0B,KAAI;AAClE,EAAA,oBACEC,GAAA,CAAA,MAAA,EAAA;IACED,SAAS,EAAEE,UAAU,CAAC,SAAS,EAAE,iBAAiB,EAAEF,SAAS,CAAE;AAC/DG,IAAAA,IAAI,EAAC,cAAc;IACnB,aAAW,EAAA,IAAA;AAAAC,IAAAA,QAAA,eAEXH,GAAA,CAAA,KAAA,EAAA;AAAKI,MAAAA,KAAK,EAAC,IAAI;AAACC,MAAAA,MAAM,EAAC,IAAI;AAACC,MAAAA,OAAO,EAAC,WAAW;AAACC,MAAAA,IAAI,EAAC,cAAc;AAACC,MAAAA,SAAS,EAAC,OAAO;AAAAL,MAAAA,QAAA,eACnFH,GAAA,CAAA,MAAA,EAAA;AACES,QAAAA,QAAQ,EAAC,SAAS;AAClBC,QAAAA,CAAC,EAAC,wGAAA;OAEN,CAAA;KAAK,CAAA;AACP,GAAM,CAAC,CAAA;AAEX,CAAC,CAAA;AAEKC,MAAAA,OAAO,GAAGA,CAAC;EACfC,WAAW,GAAGC,QAAQ,CAACC,MAAM;EAC7BC,IAAI,GAAGrB,IAAI,CAACE,KAAK;AACjBoB,EAAAA,QAAQ,GAAG,KAAK;AAChBjB,EAAAA,SAAAA;AACa,CAAA,KAAI;AACjB,EAAA,MAAMkB,cAAc,GAAGhB,UAAU,CAC/B,YAAY,EACZ;AAAE,IAAA,eAAe,EAAE,CAACe,QAAAA;AAAU,GAAA,EAC9BJ,WAAW,EACXb,SAAS,CACV,CAAA;AAED,EAAA,IAAIgB,IAAI,KAAKrB,IAAI,CAACC,WAAW,EAAE;IAC7B,oBAAOK,GAAA,CAACF,iBAAiB,EAAA;AAACC,MAAAA,SAAS,EAAEkB,cAAAA;AAAe,KAAA,CAAG,CAAA;AACzD,GAAA;AAEA,EAAA,MAAMC,SAAS,GAAGzB,cAAc,CAACsB,IAAI,CAAa,CAAA;EAElD,oBAAOf,GAAA,CAACmB,SAAS,EAAA;AAACpB,IAAAA,SAAS,EAAEkB,cAAe;AAACF,IAAAA,IAAI,EAAEG,SAAAA;AAAU,IAAG,CAAA;AAClE;;;;"}
+{"version":3,"file":"Chevron.mjs","sources":["../../src/chevron/Chevron.tsx"],"sourcesContent":["import { ChevronUp } from '@transferwise/icons';\nimport { IconSize } from '@transferwise/icons/lib/types';\nimport { clsx } from 'clsx';\n\nimport {\n  Size,\n  Position,\n  PositionTop,\n  PositionBottom,\n  PositionRight,\n  PositionLeft,\n  SizeExtraSmall,\n  SizeSmall,\n  SizeMedium,\n} from '../common';\n\nconst CONTAINER_SIZE = {\n  [Size.EXTRA_SMALL]: 10,\n  [Size.SMALL]: 16,\n  [Size.MEDIUM]: 24,\n};\n\nexport interface ChevronProps {\n  orientation?: PositionTop | PositionBottom | PositionLeft | PositionRight;\n  size?: SizeExtraSmall | SizeSmall | SizeMedium;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport interface ExtraSmallChevronProps {\n  className?: string;\n}\n\nconst ExtraSmallChevron = ({ className }: ExtraSmallChevronProps) => {\n  return (\n    <span className={clsx('tw-icon', 'tw-icon-chevron', className)} role=\"presentation\" aria-hidden>\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"currentColor\" focusable=\"false\">\n        <path\n          fillRule=\"evenodd\"\n          d=\"M4.9995 2.0865L0.0635004 6.7645L1.2745 7.9125L4.9995 4.3835L8.7245 7.9135L9.9355 6.7645L4.9995 2.0865Z\"\n        />\n      </svg>\n    </span>\n  );\n};\n\nconst Chevron = ({\n  orientation = Position.BOTTOM,\n  size = Size.SMALL,\n  disabled = false,\n  className,\n}: ChevronProps) => {\n  const classNameValue = clsx('tw-chevron', { 'chevron-color': !disabled }, orientation, className);\n\n  if (size === Size.EXTRA_SMALL) {\n    return <ExtraSmallChevron className={classNameValue} />;\n  }\n\n  const sizeValue = CONTAINER_SIZE[size] as IconSize;\n\n  return <ChevronUp className={classNameValue} size={sizeValue} />;\n};\n\nexport default Chevron;\n"],"names":["CONTAINER_SIZE","Size","EXTRA_SMALL","SMALL","MEDIUM","ExtraSmallChevron","className","_jsx","clsx","role","children","width","height","viewBox","fill","focusable","fillRule","d","Chevron","orientation","Position","BOTTOM","size","disabled","classNameValue","sizeValue","ChevronUp"],"mappings":";;;;;;AAgBA,MAAMA,cAAc,GAAG;AACrB,EAAA,CAACC,IAAI,CAACC,WAAW,GAAG,EAAE;AACtB,EAAA,CAACD,IAAI,CAACE,KAAK,GAAG,EAAE;EAChB,CAACF,IAAI,CAACG,MAAM,GAAG,EAAA;CAChB,CAAA;AAaD,MAAMC,iBAAiB,GAAGA,CAAC;AAAEC,EAAAA,SAAAA;AAAS,CAA0B,KAAI;AAClE,EAAA,oBACEC,GAAA,CAAA,MAAA,EAAA;IAAMD,SAAS,EAAEE,IAAI,CAAC,SAAS,EAAE,iBAAiB,EAAEF,SAAS,CAAE;AAACG,IAAAA,IAAI,EAAC,cAAc;IAAC,aAAW,EAAA,IAAA;AAAAC,IAAAA,QAAA,eAC7FH,GAAA,CAAA,KAAA,EAAA;AAAKI,MAAAA,KAAK,EAAC,IAAI;AAACC,MAAAA,MAAM,EAAC,IAAI;AAACC,MAAAA,OAAO,EAAC,WAAW;AAACC,MAAAA,IAAI,EAAC,cAAc;AAACC,MAAAA,SAAS,EAAC,OAAO;AAAAL,MAAAA,QAAA,eACnFH,GAAA,CAAA,MAAA,EAAA;AACES,QAAAA,QAAQ,EAAC,SAAS;AAClBC,QAAAA,CAAC,EAAC,wGAAA;OAEN,CAAA;KAAK,CAAA;AACP,GAAM,CAAC,CAAA;AAEX,CAAC,CAAA;AAEKC,MAAAA,OAAO,GAAGA,CAAC;EACfC,WAAW,GAAGC,QAAQ,CAACC,MAAM;EAC7BC,IAAI,GAAGrB,IAAI,CAACE,KAAK;AACjBoB,EAAAA,QAAQ,GAAG,KAAK;AAChBjB,EAAAA,SAAAA;AACa,CAAA,KAAI;AACjB,EAAA,MAAMkB,cAAc,GAAGhB,IAAI,CAAC,YAAY,EAAE;AAAE,IAAA,eAAe,EAAE,CAACe,QAAAA;AAAU,GAAA,EAAEJ,WAAW,EAAEb,SAAS,CAAC,CAAA;AAEjG,EAAA,IAAIgB,IAAI,KAAKrB,IAAI,CAACC,WAAW,EAAE;IAC7B,oBAAOK,GAAA,CAACF,iBAAiB,EAAA;AAACC,MAAAA,SAAS,EAAEkB,cAAAA;AAAe,KAAA,CAAG,CAAA;AACzD,GAAA;AAEA,EAAA,MAAMC,SAAS,GAAGzB,cAAc,CAACsB,IAAI,CAAa,CAAA;EAElD,oBAAOf,GAAA,CAACmB,SAAS,EAAA;AAACpB,IAAAA,SAAS,EAAEkB,cAAe;AAACF,IAAAA,IAAI,EAAEG,SAAAA;AAAU,IAAG,CAAA;AAClE;;;;"}

package/build/chips/Chip.js

@@ -1,17 +1,13 @@
 'use strict';
 
 var componentsTheming = require('@wise/components-theming');
-var classNames = require('classnames');
+var clsx = require('clsx');
 var React = require('react');
 var Body = require('../body/Body.js');
 var CloseButton = require('../common/closeButton/CloseButton.js');
 var jsxRuntime = require('react/jsx-runtime');
 var typography = require('../common/propsValues/typography.js');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
-
 const Chip = ({
   label,
   value,
@@ -43,7 +39,7 @@ const Chip = ({
     tabIndex: tabIndex,
     "aria-label": ariaLabel,
     "aria-checked": ariaChecked,
-    className: classNames__default.default('np-chip', 'd-flex', 'align-items-center', 'justify-content-between', onRemove ? 'np-chip--removable' : '', className),
+    className: clsx.clsx('np-chip', 'd-flex', 'align-items-center', 'justify-content-between', onRemove ? 'np-chip--removable' : '', className),
     ...(isActionable && {
       onClick,
       onKeyPress

package/build/chips/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","sources":["../../src/chips/Chip.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport classNames from 'classnames';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../body/Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type Props = {\n  value?: ChipValue;\n  label: string;\n  onRemove?: () => void;\n  onClick?: () => void;\n  onKeyPress?: () => void;\n  closeButton?: AriaLabelProperty;\n  'aria-checked'?: boolean;\n  role?: string;\n} & AriaLabelProperty &\n  CommonProps;\n\nconst Chip = ({\n  label,\n  value,\n  onRemove,\n  onClick,\n  onKeyPress,\n  className = undefined,\n  'aria-label': ariaLabel,\n  'aria-checked': ariaChecked,\n  role,\n  closeButton,\n}: Props) => {\n  const isActionable = onClick || onKeyPress;\n  const defaultRole = isActionable ? 'button' : undefined;\n  const tabIndex = isActionable ? 0 : -1;\n\n  const { isModern } = useTheme();\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n  const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n  useEffect(() => {\n    if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n      closeButtonReference.current?.focus();\n    }\n    previousCloseButtonShown.current = closeButtonReference.current != null;\n  }, [onRemove]);\n\n  return (\n    <div\n      key={value}\n      role={role ?? defaultRole}\n      tabIndex={tabIndex}\n      aria-label={ariaLabel}\n      aria-checked={ariaChecked}\n      className={classNames(\n        'np-chip',\n        'd-flex',\n        'align-items-center',\n        'justify-content-between',\n        onRemove ? 'np-chip--removable' : '',\n        className,\n      )}\n      {...(isActionable && { onClick, onKeyPress })}\n    >\n      {isModern ? (\n        <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n          {label}\n        </Body>\n      ) : (\n        <span aria-hidden=\"false\" className=\"np-chip-label\">\n          {label}\n        </span>\n      )}\n      {onRemove ? (\n        <CloseButton\n          ref={closeButtonReference}\n          className={isModern ? `btn-unstyled` : `btn-unstyled m-l-1`}\n          aria-label={closeButton?.['aria-label']}\n          size=\"sm\"\n          filled={isModern}\n          onClick={onRemove}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","defaultRole","tabIndex","isModern","useTheme","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","classNames","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled"],"mappings":";;;;;;;;;;;;;;AAsBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,UAAU;AACVC,EAAAA,SAAS,GAAGC,SAAS;AACrB,EAAA,YAAY,EAAEC,SAAS;AACvB,EAAA,cAAc,EAAEC,WAAW;EAC3BC,IAAI;AACJC,EAAAA,WAAAA;AAAW,CACL,KAAI;AACV,EAAA,MAAMC,YAAY,GAAGR,OAAO,IAAIC,UAAU,CAAA;AAC1C,EAAA,MAAMQ,WAAW,GAAGD,YAAY,GAAG,QAAQ,GAAGL,SAAS,CAAA;AACvD,EAAA,MAAMO,QAAQ,GAAGF,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;EAEtC,MAAM;AAAEG,IAAAA,QAAAA;GAAU,GAAGC,0BAAQ,EAAE,CAAA;AAE/B,EAAA,MAAMC,oBAAoB,GAAGC,YAAM,CAAoB,IAAI,CAAC,CAAA;AAC5D,EAAA,MAAMC,wBAAwB,GAAGD,YAAM,CAAsBX,SAAS,CAAC,CAAA;AACvEa,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIH,oBAAoB,CAACI,OAAO,IAAI,IAAI,IAAIF,wBAAwB,CAACE,OAAO,KAAK,KAAK,EAAE;AACtFJ,MAAAA,oBAAoB,CAACI,OAAO,EAAEC,KAAK,EAAE,CAAA;AACvC,KAAA;AACAH,IAAAA,wBAAwB,CAACE,OAAO,GAAGJ,oBAAoB,CAACI,OAAO,IAAI,IAAI,CAAA;AACzE,GAAC,EAAE,CAAClB,QAAQ,CAAC,CAAC,CAAA;AAEd,EAAA,oBACEoB,eAAA,CAAA,KAAA,EAAA;IAEEb,IAAI,EAAEA,IAAI,IAAIG,WAAY;AAC1BC,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,YAAA,EAAYN,SAAU;AACtB,IAAA,cAAA,EAAcC,WAAY;AAC1BH,IAAAA,SAAS,EAAEkB,2BAAU,CACnB,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzBrB,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EACpCG,SAAS,CACT;AAAA,IAAA,IACGM,YAAY,IAAI;MAAER,OAAO;AAAEC,MAAAA,UAAAA;KAAY,CAAA;AAAAoB,IAAAA,QAAA,EAE3CV,CAAAA,QAAQ,gBACPW,cAAA,CAACC,IAAI,EAAA;MAAC,aAAa,EAAA,CAAC,CAACxB,QAAS;MAACyB,IAAI,EAAEC,qBAAU,CAACC,iBAAkB;AAAAL,MAAAA,QAAA,EAC/DxB,KAAAA;KACG,CAAC,gBAEPyB,cAAA,CAAA,MAAA,EAAA;AAAM,MAAA,aAAA,EAAY,OAAO;AAACpB,MAAAA,SAAS,EAAC,eAAe;AAAAmB,MAAAA,QAAA,EAChDxB,KAAAA;AAAK,KACF,CACP,EACAE,QAAQ,gBACPuB,cAAA,CAACK,uBAAW,EAAA;AACVC,MAAAA,GAAG,EAAEf,oBAAqB;AAC1BX,MAAAA,SAAS,EAAES,QAAQ,GAAG,CAAA,YAAA,CAAc,GAAG,CAAqB,kBAAA,CAAA;MAC5D,YAAYJ,EAAAA,WAAW,GAAG,YAAY,CAAE;AACxCsB,MAAAA,IAAI,EAAC,IAAI;AACTC,MAAAA,MAAM,EAAEnB,QAAS;AACjBX,MAAAA,OAAO,EAAED,QAAAA;KACT,CAAA,GACA,IAAI,CAAA;AAAA,GAAA,EAjCHD,KAkCF,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"Chip.js","sources":["../../src/chips/Chip.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../body/Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type Props = {\n  value?: ChipValue;\n  label: string;\n  onRemove?: () => void;\n  onClick?: () => void;\n  onKeyPress?: () => void;\n  closeButton?: AriaLabelProperty;\n  'aria-checked'?: boolean;\n  role?: string;\n} & AriaLabelProperty &\n  CommonProps;\n\nconst Chip = ({\n  label,\n  value,\n  onRemove,\n  onClick,\n  onKeyPress,\n  className = undefined,\n  'aria-label': ariaLabel,\n  'aria-checked': ariaChecked,\n  role,\n  closeButton,\n}: Props) => {\n  const isActionable = onClick || onKeyPress;\n  const defaultRole = isActionable ? 'button' : undefined;\n  const tabIndex = isActionable ? 0 : -1;\n\n  const { isModern } = useTheme();\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n  const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n  useEffect(() => {\n    if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n      closeButtonReference.current?.focus();\n    }\n    previousCloseButtonShown.current = closeButtonReference.current != null;\n  }, [onRemove]);\n\n  return (\n    <div\n      key={value}\n      role={role ?? defaultRole}\n      tabIndex={tabIndex}\n      aria-label={ariaLabel}\n      aria-checked={ariaChecked}\n      className={clsx(\n        'np-chip',\n        'd-flex',\n        'align-items-center',\n        'justify-content-between',\n        onRemove ? 'np-chip--removable' : '',\n        className,\n      )}\n      {...(isActionable && { onClick, onKeyPress })}\n    >\n      {isModern ? (\n        <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n          {label}\n        </Body>\n      ) : (\n        <span aria-hidden=\"false\" className=\"np-chip-label\">\n          {label}\n        </span>\n      )}\n      {onRemove ? (\n        <CloseButton\n          ref={closeButtonReference}\n          className={isModern ? `btn-unstyled` : `btn-unstyled m-l-1`}\n          aria-label={closeButton?.['aria-label']}\n          size=\"sm\"\n          filled={isModern}\n          onClick={onRemove}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","defaultRole","tabIndex","isModern","useTheme","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","clsx","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled"],"mappings":";;;;;;;;;;AAsBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,UAAU;AACVC,EAAAA,SAAS,GAAGC,SAAS;AACrB,EAAA,YAAY,EAAEC,SAAS;AACvB,EAAA,cAAc,EAAEC,WAAW;EAC3BC,IAAI;AACJC,EAAAA,WAAAA;AAAW,CACL,KAAI;AACV,EAAA,MAAMC,YAAY,GAAGR,OAAO,IAAIC,UAAU,CAAA;AAC1C,EAAA,MAAMQ,WAAW,GAAGD,YAAY,GAAG,QAAQ,GAAGL,SAAS,CAAA;AACvD,EAAA,MAAMO,QAAQ,GAAGF,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;EAEtC,MAAM;AAAEG,IAAAA,QAAAA;GAAU,GAAGC,0BAAQ,EAAE,CAAA;AAE/B,EAAA,MAAMC,oBAAoB,GAAGC,YAAM,CAAoB,IAAI,CAAC,CAAA;AAC5D,EAAA,MAAMC,wBAAwB,GAAGD,YAAM,CAAsBX,SAAS,CAAC,CAAA;AACvEa,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIH,oBAAoB,CAACI,OAAO,IAAI,IAAI,IAAIF,wBAAwB,CAACE,OAAO,KAAK,KAAK,EAAE;AACtFJ,MAAAA,oBAAoB,CAACI,OAAO,EAAEC,KAAK,EAAE,CAAA;AACvC,KAAA;AACAH,IAAAA,wBAAwB,CAACE,OAAO,GAAGJ,oBAAoB,CAACI,OAAO,IAAI,IAAI,CAAA;AACzE,GAAC,EAAE,CAAClB,QAAQ,CAAC,CAAC,CAAA;AAEd,EAAA,oBACEoB,eAAA,CAAA,KAAA,EAAA;IAEEb,IAAI,EAAEA,IAAI,IAAIG,WAAY;AAC1BC,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,YAAA,EAAYN,SAAU;AACtB,IAAA,cAAA,EAAcC,WAAY;AAC1BH,IAAAA,SAAS,EAAEkB,SAAI,CACb,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzBrB,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EACpCG,SAAS,CACT;AAAA,IAAA,IACGM,YAAY,IAAI;MAAER,OAAO;AAAEC,MAAAA,UAAAA;KAAY,CAAA;AAAAoB,IAAAA,QAAA,EAE3CV,CAAAA,QAAQ,gBACPW,cAAA,CAACC,IAAI,EAAA;MAAC,aAAa,EAAA,CAAC,CAACxB,QAAS;MAACyB,IAAI,EAAEC,qBAAU,CAACC,iBAAkB;AAAAL,MAAAA,QAAA,EAC/DxB,KAAAA;KACG,CAAC,gBAEPyB,cAAA,CAAA,MAAA,EAAA;AAAM,MAAA,aAAA,EAAY,OAAO;AAACpB,MAAAA,SAAS,EAAC,eAAe;AAAAmB,MAAAA,QAAA,EAChDxB,KAAAA;AAAK,KACF,CACP,EACAE,QAAQ,gBACPuB,cAAA,CAACK,uBAAW,EAAA;AACVC,MAAAA,GAAG,EAAEf,oBAAqB;AAC1BX,MAAAA,SAAS,EAAES,QAAQ,GAAG,CAAA,YAAA,CAAc,GAAG,CAAqB,kBAAA,CAAA;MAC5D,YAAYJ,EAAAA,WAAW,GAAG,YAAY,CAAE;AACxCsB,MAAAA,IAAI,EAAC,IAAI;AACTC,MAAAA,MAAM,EAAEnB,QAAS;AACjBX,MAAAA,OAAO,EAAED,QAAAA;KACT,CAAA,GACA,IAAI,CAAA;AAAA,GAAA,EAjCHD,KAkCF,CAAC,CAAA;AAEV;;;;"}

package/build/chips/Chip.mjs

@@ -1,5 +1,5 @@
 import { useTheme } from '@wise/components-theming';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useRef, useEffect } from 'react';
 import Body from '../body/Body.mjs';
 import { CloseButton } from '../common/closeButton/CloseButton.mjs';
@@ -37,7 +37,7 @@ const Chip = ({
     tabIndex: tabIndex,
     "aria-label": ariaLabel,
     "aria-checked": ariaChecked,
-    className: classNames('np-chip', 'd-flex', 'align-items-center', 'justify-content-between', onRemove ? 'np-chip--removable' : '', className),
+    className: clsx('np-chip', 'd-flex', 'align-items-center', 'justify-content-between', onRemove ? 'np-chip--removable' : '', className),
     ...(isActionable && {
       onClick,
       onKeyPress

package/build/chips/Chip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.mjs","sources":["../../src/chips/Chip.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport classNames from 'classnames';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../body/Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type Props = {\n  value?: ChipValue;\n  label: string;\n  onRemove?: () => void;\n  onClick?: () => void;\n  onKeyPress?: () => void;\n  closeButton?: AriaLabelProperty;\n  'aria-checked'?: boolean;\n  role?: string;\n} & AriaLabelProperty &\n  CommonProps;\n\nconst Chip = ({\n  label,\n  value,\n  onRemove,\n  onClick,\n  onKeyPress,\n  className = undefined,\n  'aria-label': ariaLabel,\n  'aria-checked': ariaChecked,\n  role,\n  closeButton,\n}: Props) => {\n  const isActionable = onClick || onKeyPress;\n  const defaultRole = isActionable ? 'button' : undefined;\n  const tabIndex = isActionable ? 0 : -1;\n\n  const { isModern } = useTheme();\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n  const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n  useEffect(() => {\n    if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n      closeButtonReference.current?.focus();\n    }\n    previousCloseButtonShown.current = closeButtonReference.current != null;\n  }, [onRemove]);\n\n  return (\n    <div\n      key={value}\n      role={role ?? defaultRole}\n      tabIndex={tabIndex}\n      aria-label={ariaLabel}\n      aria-checked={ariaChecked}\n      className={classNames(\n        'np-chip',\n        'd-flex',\n        'align-items-center',\n        'justify-content-between',\n        onRemove ? 'np-chip--removable' : '',\n        className,\n      )}\n      {...(isActionable && { onClick, onKeyPress })}\n    >\n      {isModern ? (\n        <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n          {label}\n        </Body>\n      ) : (\n        <span aria-hidden=\"false\" className=\"np-chip-label\">\n          {label}\n        </span>\n      )}\n      {onRemove ? (\n        <CloseButton\n          ref={closeButtonReference}\n          className={isModern ? `btn-unstyled` : `btn-unstyled m-l-1`}\n          aria-label={closeButton?.['aria-label']}\n          size=\"sm\"\n          filled={isModern}\n          onClick={onRemove}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","defaultRole","tabIndex","isModern","useTheme","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","classNames","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled"],"mappings":";;;;;;;;AAsBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,UAAU;AACVC,EAAAA,SAAS,GAAGC,SAAS;AACrB,EAAA,YAAY,EAAEC,SAAS;AACvB,EAAA,cAAc,EAAEC,WAAW;EAC3BC,IAAI;AACJC,EAAAA,WAAAA;AAAW,CACL,KAAI;AACV,EAAA,MAAMC,YAAY,GAAGR,OAAO,IAAIC,UAAU,CAAA;AAC1C,EAAA,MAAMQ,WAAW,GAAGD,YAAY,GAAG,QAAQ,GAAGL,SAAS,CAAA;AACvD,EAAA,MAAMO,QAAQ,GAAGF,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;EAEtC,MAAM;AAAEG,IAAAA,QAAAA;GAAU,GAAGC,QAAQ,EAAE,CAAA;AAE/B,EAAA,MAAMC,oBAAoB,GAAGC,MAAM,CAAoB,IAAI,CAAC,CAAA;AAC5D,EAAA,MAAMC,wBAAwB,GAAGD,MAAM,CAAsBX,SAAS,CAAC,CAAA;AACvEa,EAAAA,SAAS,CAAC,MAAK;IACb,IAAIH,oBAAoB,CAACI,OAAO,IAAI,IAAI,IAAIF,wBAAwB,CAACE,OAAO,KAAK,KAAK,EAAE;AACtFJ,MAAAA,oBAAoB,CAACI,OAAO,EAAEC,KAAK,EAAE,CAAA;AACvC,KAAA;AACAH,IAAAA,wBAAwB,CAACE,OAAO,GAAGJ,oBAAoB,CAACI,OAAO,IAAI,IAAI,CAAA;AACzE,GAAC,EAAE,CAAClB,QAAQ,CAAC,CAAC,CAAA;AAEd,EAAA,oBACEoB,IAAA,CAAA,KAAA,EAAA;IAEEb,IAAI,EAAEA,IAAI,IAAIG,WAAY;AAC1BC,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,YAAA,EAAYN,SAAU;AACtB,IAAA,cAAA,EAAcC,WAAY;AAC1BH,IAAAA,SAAS,EAAEkB,UAAU,CACnB,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzBrB,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EACpCG,SAAS,CACT;AAAA,IAAA,IACGM,YAAY,IAAI;MAAER,OAAO;AAAEC,MAAAA,UAAAA;KAAY,CAAA;AAAAoB,IAAAA,QAAA,EAE3CV,CAAAA,QAAQ,gBACPW,GAAA,CAACC,IAAI,EAAA;MAAC,aAAa,EAAA,CAAC,CAACxB,QAAS;MAACyB,IAAI,EAAEC,UAAU,CAACC,iBAAkB;AAAAL,MAAAA,QAAA,EAC/DxB,KAAAA;KACG,CAAC,gBAEPyB,GAAA,CAAA,MAAA,EAAA;AAAM,MAAA,aAAA,EAAY,OAAO;AAACpB,MAAAA,SAAS,EAAC,eAAe;AAAAmB,MAAAA,QAAA,EAChDxB,KAAAA;AAAK,KACF,CACP,EACAE,QAAQ,gBACPuB,GAAA,CAACK,WAAW,EAAA;AACVC,MAAAA,GAAG,EAAEf,oBAAqB;AAC1BX,MAAAA,SAAS,EAAES,QAAQ,GAAG,CAAA,YAAA,CAAc,GAAG,CAAqB,kBAAA,CAAA;MAC5D,YAAYJ,EAAAA,WAAW,GAAG,YAAY,CAAE;AACxCsB,MAAAA,IAAI,EAAC,IAAI;AACTC,MAAAA,MAAM,EAAEnB,QAAS;AACjBX,MAAAA,OAAO,EAAED,QAAAA;KACT,CAAA,GACA,IAAI,CAAA;AAAA,GAAA,EAjCHD,KAkCF,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"Chip.mjs","sources":["../../src/chips/Chip.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../body/Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type Props = {\n  value?: ChipValue;\n  label: string;\n  onRemove?: () => void;\n  onClick?: () => void;\n  onKeyPress?: () => void;\n  closeButton?: AriaLabelProperty;\n  'aria-checked'?: boolean;\n  role?: string;\n} & AriaLabelProperty &\n  CommonProps;\n\nconst Chip = ({\n  label,\n  value,\n  onRemove,\n  onClick,\n  onKeyPress,\n  className = undefined,\n  'aria-label': ariaLabel,\n  'aria-checked': ariaChecked,\n  role,\n  closeButton,\n}: Props) => {\n  const isActionable = onClick || onKeyPress;\n  const defaultRole = isActionable ? 'button' : undefined;\n  const tabIndex = isActionable ? 0 : -1;\n\n  const { isModern } = useTheme();\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n  const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n  useEffect(() => {\n    if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n      closeButtonReference.current?.focus();\n    }\n    previousCloseButtonShown.current = closeButtonReference.current != null;\n  }, [onRemove]);\n\n  return (\n    <div\n      key={value}\n      role={role ?? defaultRole}\n      tabIndex={tabIndex}\n      aria-label={ariaLabel}\n      aria-checked={ariaChecked}\n      className={clsx(\n        'np-chip',\n        'd-flex',\n        'align-items-center',\n        'justify-content-between',\n        onRemove ? 'np-chip--removable' : '',\n        className,\n      )}\n      {...(isActionable && { onClick, onKeyPress })}\n    >\n      {isModern ? (\n        <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n          {label}\n        </Body>\n      ) : (\n        <span aria-hidden=\"false\" className=\"np-chip-label\">\n          {label}\n        </span>\n      )}\n      {onRemove ? (\n        <CloseButton\n          ref={closeButtonReference}\n          className={isModern ? `btn-unstyled` : `btn-unstyled m-l-1`}\n          aria-label={closeButton?.['aria-label']}\n          size=\"sm\"\n          filled={isModern}\n          onClick={onRemove}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","defaultRole","tabIndex","isModern","useTheme","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","clsx","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled"],"mappings":";;;;;;;;AAsBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,UAAU;AACVC,EAAAA,SAAS,GAAGC,SAAS;AACrB,EAAA,YAAY,EAAEC,SAAS;AACvB,EAAA,cAAc,EAAEC,WAAW;EAC3BC,IAAI;AACJC,EAAAA,WAAAA;AAAW,CACL,KAAI;AACV,EAAA,MAAMC,YAAY,GAAGR,OAAO,IAAIC,UAAU,CAAA;AAC1C,EAAA,MAAMQ,WAAW,GAAGD,YAAY,GAAG,QAAQ,GAAGL,SAAS,CAAA;AACvD,EAAA,MAAMO,QAAQ,GAAGF,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;EAEtC,MAAM;AAAEG,IAAAA,QAAAA;GAAU,GAAGC,QAAQ,EAAE,CAAA;AAE/B,EAAA,MAAMC,oBAAoB,GAAGC,MAAM,CAAoB,IAAI,CAAC,CAAA;AAC5D,EAAA,MAAMC,wBAAwB,GAAGD,MAAM,CAAsBX,SAAS,CAAC,CAAA;AACvEa,EAAAA,SAAS,CAAC,MAAK;IACb,IAAIH,oBAAoB,CAACI,OAAO,IAAI,IAAI,IAAIF,wBAAwB,CAACE,OAAO,KAAK,KAAK,EAAE;AACtFJ,MAAAA,oBAAoB,CAACI,OAAO,EAAEC,KAAK,EAAE,CAAA;AACvC,KAAA;AACAH,IAAAA,wBAAwB,CAACE,OAAO,GAAGJ,oBAAoB,CAACI,OAAO,IAAI,IAAI,CAAA;AACzE,GAAC,EAAE,CAAClB,QAAQ,CAAC,CAAC,CAAA;AAEd,EAAA,oBACEoB,IAAA,CAAA,KAAA,EAAA;IAEEb,IAAI,EAAEA,IAAI,IAAIG,WAAY;AAC1BC,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,YAAA,EAAYN,SAAU;AACtB,IAAA,cAAA,EAAcC,WAAY;AAC1BH,IAAAA,SAAS,EAAEkB,IAAI,CACb,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzBrB,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EACpCG,SAAS,CACT;AAAA,IAAA,IACGM,YAAY,IAAI;MAAER,OAAO;AAAEC,MAAAA,UAAAA;KAAY,CAAA;AAAAoB,IAAAA,QAAA,EAE3CV,CAAAA,QAAQ,gBACPW,GAAA,CAACC,IAAI,EAAA;MAAC,aAAa,EAAA,CAAC,CAACxB,QAAS;MAACyB,IAAI,EAAEC,UAAU,CAACC,iBAAkB;AAAAL,MAAAA,QAAA,EAC/DxB,KAAAA;KACG,CAAC,gBAEPyB,GAAA,CAAA,MAAA,EAAA;AAAM,MAAA,aAAA,EAAY,OAAO;AAACpB,MAAAA,SAAS,EAAC,eAAe;AAAAmB,MAAAA,QAAA,EAChDxB,KAAAA;AAAK,KACF,CACP,EACAE,QAAQ,gBACPuB,GAAA,CAACK,WAAW,EAAA;AACVC,MAAAA,GAAG,EAAEf,oBAAqB;AAC1BX,MAAAA,SAAS,EAAES,QAAQ,GAAG,CAAA,YAAA,CAAc,GAAG,CAAqB,kBAAA,CAAA;MAC5D,YAAYJ,EAAAA,WAAW,GAAG,YAAY,CAAE;AACxCsB,MAAAA,IAAI,EAAC,IAAI;AACTC,MAAAA,MAAM,EAAEnB,QAAS;AACjBX,MAAAA,OAAO,EAAED,QAAAA;KACT,CAAA,GACA,IAAI,CAAA;AAAA,GAAA,EAjCHD,KAkCF,CAAC,CAAA;AAEV;;;;"}

package/build/chips/Chips.js

@@ -1,15 +1,11 @@
 'use strict';
 
-var classNames = require('classnames');
+var clsx = require('clsx');
 var reactIntl = require('react-intl');
 var Chip = require('./Chip.js');
 var Chips_messages = require('./Chips.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
-
 const Chips = ({
   chips,
   onChange,
@@ -27,7 +23,7 @@ const Chips = ({
     });
   };
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: classNames__default.default('np-chips d-flex', className),
+    className: clsx.clsx('np-chips d-flex', className),
     "aria-label": ariaLabel,
     role: !multiple ? 'radiogroup' : undefined,
     children: chips.map(chip => {
@@ -40,7 +36,7 @@ const Chips = ({
             choice: chip.label
           })
         },
-        className: classNames__default.default('text-xs-nowrap', {
+        className: clsx.clsx('text-xs-nowrap', {
           'np-chip--selected': chipSelected,
           'p-r-1': multiple && chipSelected
         }),

package/build/chips/Chips.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chips.js","sources":["../../src/chips/Chips.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useIntl } from 'react-intl';\n\nimport { CommonProps, AriaLabelProperty } from '../common';\n\nimport Chip from './Chip';\nimport messages from './Chips.messages';\n\nexport type ChipValue = string | number;\n\nexport type Chip = {\n  value: ChipValue;\n  label: string;\n};\n\nexport type ChipsProps = CommonProps &\n  AriaLabelProperty & {\n    /** List of chips with string labels and string/number values */\n    chips: readonly Chip[];\n    /** Callback which is invoked when a chip is selected or deselected */\n    onChange: ({\n      isEnabled,\n      selectedValue,\n    }: {\n      isEnabled: boolean;\n      selectedValue: ChipValue;\n    }) => void;\n    /** Used to manage which chips are selected */\n    selected: ChipValue | readonly ChipValue[];\n    /** Used to activate multi-selection */\n    multiple?: boolean;\n  };\n\nconst Chips = ({\n  chips,\n  onChange,\n  selected,\n  'aria-label': ariaLabel,\n  className,\n  multiple,\n}: ChipsProps) => {\n  const intl = useIntl();\n\n  const isSelected = (value: ChipValue) =>\n    Array.isArray(selected) ? selected.includes(value) : selected === value;\n\n  const handleOnChange = (selectedValue: ChipValue, isCurrentlyEnabled: boolean) => {\n    onChange({ isEnabled: !isCurrentlyEnabled, selectedValue });\n  };\n\n  return (\n    <div\n      className={classNames('np-chips d-flex', className)}\n      aria-label={ariaLabel}\n      role={!multiple ? 'radiogroup' : undefined}\n    >\n      {chips.map((chip) => {\n        const chipSelected = isSelected(chip.value);\n        return (\n          <Chip\n            key={chip.value}\n            value={chip.value}\n            label={chip.label}\n            closeButton={{\n              'aria-label': intl.formatMessage(messages.ariaLabel, { choice: chip.label }),\n            }}\n            className={classNames('text-xs-nowrap', {\n              'np-chip--selected': chipSelected,\n              'p-r-1': multiple && chipSelected,\n            })}\n            {...(multiple && chipSelected\n              ? {\n                  onRemove: () => handleOnChange(chip.value, chipSelected),\n                  'aria-label': chip.label,\n                }\n              : {\n                  onClick: () => handleOnChange(chip.value, chipSelected),\n                  onKeyPress: () => handleOnChange(chip.value, chipSelected),\n                  role: !multiple ? 'radio' : undefined,\n                  'aria-checked': chipSelected,\n                })}\n          />\n        );\n      })}\n    </div>\n  );\n};\n\nexport default Chips;\n"],"names":["Chips","chips","onChange","selected","ariaLabel","className","multiple","intl","useIntl","isSelected","value","Array","isArray","includes","handleOnChange","selectedValue","isCurrentlyEnabled","isEnabled","_jsx","classNames","role","undefined","children","map","chip","chipSelected","Chip","label","closeButton","formatMessage","messages","choice","onRemove","onClick","onKeyPress"],"mappings":";;;;;;;;;;;;AAiCMA,MAAAA,KAAK,GAAGA,CAAC;EACbC,KAAK;EACLC,QAAQ;EACRC,QAAQ;AACR,EAAA,YAAY,EAAEC,SAAS;EACvBC,SAAS;AACTC,EAAAA,QAAAA;AAAQ,CACG,KAAI;AACf,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE,CAAA;EAEtB,MAAMC,UAAU,GAAIC,KAAgB,IAClCC,KAAK,CAACC,OAAO,CAACT,QAAQ,CAAC,GAAGA,QAAQ,CAACU,QAAQ,CAACH,KAAK,CAAC,GAAGP,QAAQ,KAAKO,KAAK,CAAA;AAEzE,EAAA,MAAMI,cAAc,GAAGA,CAACC,aAAwB,EAAEC,kBAA2B,KAAI;AAC/Ed,IAAAA,QAAQ,CAAC;MAAEe,SAAS,EAAE,CAACD,kBAAkB;AAAED,MAAAA,aAAAA;AAAe,KAAA,CAAC,CAAA;GAC5D,CAAA;AAED,EAAA,oBACEG,cAAA,CAAA,KAAA,EAAA;AACEb,IAAAA,SAAS,EAAEc,2BAAU,CAAC,iBAAiB,EAAEd,SAAS,CAAE;AACpD,IAAA,YAAA,EAAYD,SAAU;AACtBgB,IAAAA,IAAI,EAAE,CAACd,QAAQ,GAAG,YAAY,GAAGe,SAAU;AAAAC,IAAAA,QAAA,EAE1CrB,KAAK,CAACsB,GAAG,CAAEC,IAAI,IAAI;AAClB,MAAA,MAAMC,YAAY,GAAGhB,UAAU,CAACe,IAAI,CAACd,KAAK,CAAC,CAAA;MAC3C,oBACEQ,cAAA,CAACQ,IAAI,EAAA;QAEHhB,KAAK,EAAEc,IAAI,CAACd,KAAM;QAClBiB,KAAK,EAAEH,IAAI,CAACG,KAAM;AAClBC,QAAAA,WAAW,EAAE;UACX,YAAY,EAAErB,IAAI,CAACsB,aAAa,CAACC,cAAQ,CAAC1B,SAAS,EAAE;YAAE2B,MAAM,EAAEP,IAAI,CAACG,KAAAA;WAAO,CAAA;SAC3E;AACFtB,QAAAA,SAAS,EAAEc,2BAAU,CAAC,gBAAgB,EAAE;AACtC,UAAA,mBAAmB,EAAEM,YAAY;UACjC,OAAO,EAAEnB,QAAQ,IAAImB,YAAAA;AACtB,SAAA,CAAE;QAAA,IACEnB,QAAQ,IAAImB,YAAY,GACzB;UACEO,QAAQ,EAAEA,MAAMlB,cAAc,CAACU,IAAI,CAACd,KAAK,EAAEe,YAAY,CAAC;UACxD,YAAY,EAAED,IAAI,CAACG,KAAAA;AACpB,SAAA,GACD;UACEM,OAAO,EAAEA,MAAMnB,cAAc,CAACU,IAAI,CAACd,KAAK,EAAEe,YAAY,CAAC;UACvDS,UAAU,EAAEA,MAAMpB,cAAc,CAACU,IAAI,CAACd,KAAK,EAAEe,YAAY,CAAC;AAC1DL,UAAAA,IAAI,EAAE,CAACd,QAAQ,GAAG,OAAO,GAAGe,SAAS;AACrC,UAAA,cAAc,EAAEI,YAAAA;SACjB,CAAA;OApBAD,EAAAA,IAAI,CAACd,KAqBV,CAAA,CAAA;KAEL,CAAA;AAAC,GACC,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"Chips.js","sources":["../../src/chips/Chips.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { CommonProps, AriaLabelProperty } from '../common';\n\nimport Chip from './Chip';\nimport messages from './Chips.messages';\n\nexport type ChipValue = string | number;\n\nexport type Chip = {\n  value: ChipValue;\n  label: string;\n};\n\nexport type ChipsProps = CommonProps &\n  AriaLabelProperty & {\n    /** List of chips with string labels and string/number values */\n    chips: readonly Chip[];\n    /** Callback which is invoked when a chip is selected or deselected */\n    onChange: ({\n      isEnabled,\n      selectedValue,\n    }: {\n      isEnabled: boolean;\n      selectedValue: ChipValue;\n    }) => void;\n    /** Used to manage which chips are selected */\n    selected: ChipValue | readonly ChipValue[];\n    /** Used to activate multi-selection */\n    multiple?: boolean;\n  };\n\nconst Chips = ({\n  chips,\n  onChange,\n  selected,\n  'aria-label': ariaLabel,\n  className,\n  multiple,\n}: ChipsProps) => {\n  const intl = useIntl();\n\n  const isSelected = (value: ChipValue) =>\n    Array.isArray(selected) ? selected.includes(value) : selected === value;\n\n  const handleOnChange = (selectedValue: ChipValue, isCurrentlyEnabled: boolean) => {\n    onChange({ isEnabled: !isCurrentlyEnabled, selectedValue });\n  };\n\n  return (\n    <div\n      className={clsx('np-chips d-flex', className)}\n      aria-label={ariaLabel}\n      role={!multiple ? 'radiogroup' : undefined}\n    >\n      {chips.map((chip) => {\n        const chipSelected = isSelected(chip.value);\n        return (\n          <Chip\n            key={chip.value}\n            value={chip.value}\n            label={chip.label}\n            closeButton={{\n              'aria-label': intl.formatMessage(messages.ariaLabel, { choice: chip.label }),\n            }}\n            className={clsx('text-xs-nowrap', {\n              'np-chip--selected': chipSelected,\n              'p-r-1': multiple && chipSelected,\n            })}\n            {...(multiple && chipSelected\n              ? {\n                  onRemove: () => handleOnChange(chip.value, chipSelected),\n                  'aria-label': chip.label,\n                }\n              : {\n                  onClick: () => handleOnChange(chip.value, chipSelected),\n                  onKeyPress: () => handleOnChange(chip.value, chipSelected),\n                  role: !multiple ? 'radio' : undefined,\n                  'aria-checked': chipSelected,\n                })}\n          />\n        );\n      })}\n    </div>\n  );\n};\n\nexport default Chips;\n"],"names":["Chips","chips","onChange","selected","ariaLabel","className","multiple","intl","useIntl","isSelected","value","Array","isArray","includes","handleOnChange","selectedValue","isCurrentlyEnabled","isEnabled","_jsx","clsx","role","undefined","children","map","chip","chipSelected","Chip","label","closeButton","formatMessage","messages","choice","onRemove","onClick","onKeyPress"],"mappings":";;;;;;;;AAiCMA,MAAAA,KAAK,GAAGA,CAAC;EACbC,KAAK;EACLC,QAAQ;EACRC,QAAQ;AACR,EAAA,YAAY,EAAEC,SAAS;EACvBC,SAAS;AACTC,EAAAA,QAAAA;AAAQ,CACG,KAAI;AACf,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE,CAAA;EAEtB,MAAMC,UAAU,GAAIC,KAAgB,IAClCC,KAAK,CAACC,OAAO,CAACT,QAAQ,CAAC,GAAGA,QAAQ,CAACU,QAAQ,CAACH,KAAK,CAAC,GAAGP,QAAQ,KAAKO,KAAK,CAAA;AAEzE,EAAA,MAAMI,cAAc,GAAGA,CAACC,aAAwB,EAAEC,kBAA2B,KAAI;AAC/Ed,IAAAA,QAAQ,CAAC;MAAEe,SAAS,EAAE,CAACD,kBAAkB;AAAED,MAAAA,aAAAA;AAAe,KAAA,CAAC,CAAA;GAC5D,CAAA;AAED,EAAA,oBACEG,cAAA,CAAA,KAAA,EAAA;AACEb,IAAAA,SAAS,EAAEc,SAAI,CAAC,iBAAiB,EAAEd,SAAS,CAAE;AAC9C,IAAA,YAAA,EAAYD,SAAU;AACtBgB,IAAAA,IAAI,EAAE,CAACd,QAAQ,GAAG,YAAY,GAAGe,SAAU;AAAAC,IAAAA,QAAA,EAE1CrB,KAAK,CAACsB,GAAG,CAAEC,IAAI,IAAI;AAClB,MAAA,MAAMC,YAAY,GAAGhB,UAAU,CAACe,IAAI,CAACd,KAAK,CAAC,CAAA;MAC3C,oBACEQ,cAAA,CAACQ,IAAI,EAAA;QAEHhB,KAAK,EAAEc,IAAI,CAACd,KAAM;QAClBiB,KAAK,EAAEH,IAAI,CAACG,KAAM;AAClBC,QAAAA,WAAW,EAAE;UACX,YAAY,EAAErB,IAAI,CAACsB,aAAa,CAACC,cAAQ,CAAC1B,SAAS,EAAE;YAAE2B,MAAM,EAAEP,IAAI,CAACG,KAAAA;WAAO,CAAA;SAC3E;AACFtB,QAAAA,SAAS,EAAEc,SAAI,CAAC,gBAAgB,EAAE;AAChC,UAAA,mBAAmB,EAAEM,YAAY;UACjC,OAAO,EAAEnB,QAAQ,IAAImB,YAAAA;AACtB,SAAA,CAAE;QAAA,IACEnB,QAAQ,IAAImB,YAAY,GACzB;UACEO,QAAQ,EAAEA,MAAMlB,cAAc,CAACU,IAAI,CAACd,KAAK,EAAEe,YAAY,CAAC;UACxD,YAAY,EAAED,IAAI,CAACG,KAAAA;AACpB,SAAA,GACD;UACEM,OAAO,EAAEA,MAAMnB,cAAc,CAACU,IAAI,CAACd,KAAK,EAAEe,YAAY,CAAC;UACvDS,UAAU,EAAEA,MAAMpB,cAAc,CAACU,IAAI,CAACd,KAAK,EAAEe,YAAY,CAAC;AAC1DL,UAAAA,IAAI,EAAE,CAACd,QAAQ,GAAG,OAAO,GAAGe,SAAS;AACrC,UAAA,cAAc,EAAEI,YAAAA;SACjB,CAAA;OApBAD,EAAAA,IAAI,CAACd,KAqBV,CAAA,CAAA;KAEL,CAAA;AAAC,GACC,CAAC,CAAA;AAEV;;;;"}

package/build/chips/Chips.mjs

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useIntl } from 'react-intl';
 import Chip from './Chip.mjs';
 import messages from './Chips.messages.mjs';
@@ -21,7 +21,7 @@ const Chips = ({
     });
   };
   return /*#__PURE__*/jsx("div", {
-    className: classNames('np-chips d-flex', className),
+    className: clsx('np-chips d-flex', className),
     "aria-label": ariaLabel,
     role: !multiple ? 'radiogroup' : undefined,
     children: chips.map(chip => {
@@ -34,7 +34,7 @@ const Chips = ({
             choice: chip.label
           })
         },
-        className: classNames('text-xs-nowrap', {
+        className: clsx('text-xs-nowrap', {
           'np-chip--selected': chipSelected,
           'p-r-1': multiple && chipSelected
         }),