@transferwise/components 46.47.0 → 46.49.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 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":";;;;;;;;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,UAAU,CAAC,kBAAkB,EAAErE,SAAS,CAAE;AAAAsE,IAAAA,QAAA,gBACxDF,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,UAAU,CAAC,gBAAgB,EAAE;AACtC,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,UAAU,CAAC,wBAAwB,EAAE;YAC9C,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,UAAU,CAAC,qBAAqB,EAAE;AAC3C,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/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;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,GAAiB,CAAA,YAAA,CAAA,GAAuB,CAAC,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 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;;;;"}

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;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,GAAiB,CAAA,YAAA,CAAA,GAAuB,CAAC,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 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;;;;"}

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;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 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;;;;"}

package/build/chips/Chips.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Chips.mjs","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,OAAO,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,GAAA,CAAA,KAAA,EAAA;AACEb,IAAAA,SAAS,EAAEc,UAAU,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,GAAA,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,QAAQ,CAAC1B,SAAS,EAAE;YAAE2B,MAAM,EAAEP,IAAI,CAACG,KAAAA;WAAO,CAAA;SAC3E;AACFtB,QAAAA,SAAS,EAAEc,UAAU,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;OApBAD,EAAAA,IAAI,CAACd,KAqBV,CAAA,CAAA;KAEL,CAAA;AAAC,GACC,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"Chips.mjs","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,OAAO,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,GAAA,CAAA,KAAA,EAAA;AACEb,IAAAA,SAAS,EAAEc,UAAU,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,GAAA,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,QAAQ,CAAC1B,SAAS,EAAE;YAAE2B,MAAM,EAAEP,IAAI,CAACG,KAAAA;WAAO,CAAA;SAC3E;AACFtB,QAAAA,SAAS,EAAEc,UAAU,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;;;;"}

package/build/common/bottomSheet/BottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.js","sources":["../../../src/common/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useRef, useState, PropsWithChildren, CSSProperties, SyntheticEvent } from 'react';\n\nimport Dimmer from '../../dimmer';\nimport Drawer from '../../drawer';\nimport SlidingPanel from '../../slidingPanel';\nimport { CloseButton } from '../closeButton';\nimport { CommonProps } from '../commonProps';\nimport { isServerSide } from '../domHelpers';\nimport { useConditionalListener } from '../hooks';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\nimport { Position } from '../propsValues/position';\n\nconst INITIAL_Y_POSITION = 0;\n\nconst CONTENT_SCROLL_THRESHOLD = 1;\n\nconst MOVE_OFFSET_THRESHOLD = 50;\n\nexport type BottomSheetProps = PropsWithChildren<\n  {\n    onClose?: (event: Event | SyntheticEvent) => void;\n    open: boolean;\n  } & CommonProps\n>;\n\n/**\n * Neptune: https://transferwise.github.io/neptune/components/bottom-sheet/\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet\n *\n */\nconst BottomSheet = (props: BottomSheetProps) => {\n  const bottomSheetReference = useRef<HTMLDivElement>(null);\n  const topBarReference = useRef<HTMLDivElement>(null);\n  const contentReference = useRef<HTMLDivElement>(null);\n\n  const [pressed, setPressed] = useState<boolean>(false);\n\n  /**\n   * Used to track `requestAnimationFrame` requests\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#return_value\n   */\n  const animationId = useRef<number>(0);\n\n  /**\n   * Difference between initial coordinate ({@link initialYCoordinate})\n   * and new position (when user moves component), it's get calculated on `onTouchMove` and `onMouseMove` events\n   *\n   * @see {@link calculateOffsetAfterMove}\n   */\n  const moveOffset = useRef<number>(0);\n  const initialYCoordinate = useRef<number>(0);\n\n  // apply shadow to the bottom of top-bar when scroll over content\n  useConditionalListener({\n    attachListener: props.open && !isServerSide(),\n    callback: () => {\n      if (topBarReference.current !== null) {\n        const { classList } = topBarReference.current;\n        if (!isContentScrollPositionAtTop()) {\n          classList.add('np-bottom-sheet--top-bar--shadow');\n        } else {\n          classList.remove('np-bottom-sheet--top-bar--shadow');\n        }\n      }\n    },\n    eventType: 'scroll',\n    parent: isServerSide() ? undefined : document,\n  });\n\n  function move(newHeight: number): void {\n    if (bottomSheetReference.current !== null) {\n      bottomSheetReference.current.style.transform = `translateY(${newHeight}px)`;\n    }\n  }\n\n  function close(event: Event | SyntheticEvent): void {\n    setPressed(false);\n    moveOffset.current = INITIAL_Y_POSITION;\n    if (bottomSheetReference.current !== null) {\n      bottomSheetReference.current.style.removeProperty('transform');\n    }\n    if (props.onClose) {\n      props.onClose(event);\n    }\n  }\n\n  const onSwipeStart = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void => {\n    initialYCoordinate.current = ('touches' in event ? event.touches[0] : event).clientY;\n    setPressed(true);\n  };\n\n  const onSwipeMove = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void => {\n    if (pressed) {\n      const { clientY } = 'touches' in event ? event.touches[0] : event;\n\n      const offset = calculateOffsetAfterMove(clientY);\n      // check whether move is to the bottom only and content scroll position is at the top\n      if (offset > INITIAL_Y_POSITION && isContentScrollPositionAtTop()) {\n        moveOffset.current = offset;\n        animationId.current = requestAnimationFrame(() => {\n          if (animationId.current !== undefined && bottomSheetReference.current !== null) {\n            move(offset);\n          }\n        });\n      }\n    }\n  };\n\n  function onSwipeEnd(\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void {\n    // stop moving component\n    cancelAnimationFrame(animationId.current);\n    setPressed(false);\n    // check whether move down is strong enough\n    // and content scroll position is at the top to close the component\n    if (moveOffset.current > MOVE_OFFSET_THRESHOLD && isContentScrollPositionAtTop()) {\n      close(event);\n    }\n    // otherwise move component back to default (initial) position\n    else {\n      move(INITIAL_Y_POSITION);\n    }\n    moveOffset.current = INITIAL_Y_POSITION;\n  }\n\n  function isContentScrollPositionAtTop(): boolean {\n    return (\n      contentReference?.current?.scrollTop !== undefined &&\n      contentReference.current.scrollTop <= CONTENT_SCROLL_THRESHOLD\n    );\n  }\n\n  /**\n   * Calculates how hard user moves component,\n   * result value used to determine whether to hide component or re-position to default state\n   *\n   * @param afterMoveYCoordinate\n   */\n  function calculateOffsetAfterMove(afterMoveYCoordinate: number): number {\n    return afterMoveYCoordinate - initialYCoordinate.current;\n  }\n\n  /**\n   * Set `max-height` for content part (in order to keep it scrollable for content overflow cases) of the component\n   * and ensures space for safe zone (32px) at the top.\n   */\n  function setContentMaxHeight(): CSSProperties {\n    const safeZoneHeight = '64px';\n    const topbarHeight = '32px';\n    const windowHight: number = isServerSide() ? 0 : window.innerHeight;\n    /**\n     * Calculate _real_ height of the screen (taking into account parts of browser interface).\n     *\n     * See https://css-tricks.com/the-trick-to-viewport-units-on-mobile for more details.\n     */\n    const screenHeight = `${windowHight * 0.01 * 100}px`;\n    return {\n      maxHeight: `calc(${screenHeight} - ${safeZoneHeight} - ${topbarHeight})`,\n    };\n  }\n\n  const is400Zoom = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n\n  return is400Zoom ? (\n    <Drawer open={props.open} className={props.className} onClose={close}>\n      {props.children}\n    </Drawer>\n  ) : (\n    <Dimmer open={props.open} fadeContentOnEnter fadeContentOnExit onClose={close}>\n      <SlidingPanel\n        ref={bottomSheetReference}\n        open={props.open}\n        position={Position.BOTTOM}\n        className={classNames('np-bottom-sheet', props.className)}\n      >\n        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\n        <div\n          role=\"dialog\"\n          aria-modal\n          onTouchStart={onSwipeStart}\n          onTouchMove={onSwipeMove}\n          onTouchEnd={onSwipeEnd}\n          onMouseDown={onSwipeStart}\n          onMouseMove={onSwipeMove}\n          onMouseUp={onSwipeEnd}\n        >\n          <div ref={topBarReference} className=\"np-bottom-sheet--top-bar\">\n            <div className=\"np-bottom-sheet--handler\" />\n            <CloseButton size=\"sm\" className=\"sr-only np-bottom-sheet--close-btn\" onClick={close} />\n          </div>\n          <div\n            ref={contentReference}\n            style={setContentMaxHeight()}\n            className=\"np-bottom-sheet--content\"\n          >\n            {props.children}\n          </div>\n        </div>\n      </SlidingPanel>\n    </Dimmer>\n  );\n};\n\nexport default BottomSheet;\n"],"names":["INITIAL_Y_POSITION","CONTENT_SCROLL_THRESHOLD","MOVE_OFFSET_THRESHOLD","BottomSheet","props","bottomSheetReference","useRef","topBarReference","contentReference","pressed","setPressed","useState","animationId","moveOffset","initialYCoordinate","useConditionalListener","attachListener","open","isServerSide","callback","current","classList","isContentScrollPositionAtTop","add","remove","eventType","parent","undefined","document","move","newHeight","style","transform","close","event","removeProperty","onClose","onSwipeStart","touches","clientY","onSwipeMove","offset","calculateOffsetAfterMove","requestAnimationFrame","onSwipeEnd","cancelAnimationFrame","scrollTop","afterMoveYCoordinate","setContentMaxHeight","safeZoneHeight","topbarHeight","windowHight","window","innerHeight","screenHeight","maxHeight","is400Zoom","useMedia","Breakpoint","ZOOM_400","_jsx","Drawer","className","children","Dimmer","fadeContentOnEnter","fadeContentOnExit","SlidingPanel","ref","position","Position","BOTTOM","classNames","_jsxs","role","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","CloseButton","size","onClick"],"mappings":"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"}
+{"version":3,"file":"BottomSheet.js","sources":["../../../src/common/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useRef, useState, PropsWithChildren, CSSProperties, SyntheticEvent } from 'react';\n\nimport Dimmer from '../../dimmer';\nimport Drawer from '../../drawer';\nimport SlidingPanel from '../../slidingPanel';\nimport { CloseButton } from '../closeButton';\nimport { CommonProps } from '../commonProps';\nimport { isServerSide } from '../domHelpers';\nimport { useConditionalListener } from '../hooks';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\nimport { Position } from '../propsValues/position';\n\nconst INITIAL_Y_POSITION = 0;\n\nconst CONTENT_SCROLL_THRESHOLD = 1;\n\nconst MOVE_OFFSET_THRESHOLD = 50;\n\nexport type BottomSheetProps = PropsWithChildren<\n  {\n    onClose?: (event: Event | SyntheticEvent) => void;\n    open: boolean;\n  } & CommonProps\n>;\n\n/**\n * Neptune: https://transferwise.github.io/neptune/components/bottom-sheet/\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet\n *\n */\nconst BottomSheet = (props: BottomSheetProps) => {\n  const bottomSheetReference = useRef<HTMLDivElement>(null);\n  const topBarReference = useRef<HTMLDivElement>(null);\n  const contentReference = useRef<HTMLDivElement>(null);\n\n  const [pressed, setPressed] = useState<boolean>(false);\n\n  /**\n   * Used to track `requestAnimationFrame` requests\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#return_value\n   */\n  const animationId = useRef<number>(0);\n\n  /**\n   * Difference between initial coordinate ({@link initialYCoordinate})\n   * and new position (when user moves component), it's get calculated on `onTouchMove` and `onMouseMove` events\n   *\n   * @see {@link calculateOffsetAfterMove}\n   */\n  const moveOffset = useRef<number>(0);\n  const initialYCoordinate = useRef<number>(0);\n\n  // apply shadow to the bottom of top-bar when scroll over content\n  useConditionalListener({\n    attachListener: props.open && !isServerSide(),\n    callback: () => {\n      if (topBarReference.current !== null) {\n        const { classList } = topBarReference.current;\n        if (!isContentScrollPositionAtTop()) {\n          classList.add('np-bottom-sheet--top-bar--shadow');\n        } else {\n          classList.remove('np-bottom-sheet--top-bar--shadow');\n        }\n      }\n    },\n    eventType: 'scroll',\n    parent: isServerSide() ? undefined : document,\n  });\n\n  function move(newHeight: number): void {\n    if (bottomSheetReference.current !== null) {\n      bottomSheetReference.current.style.transform = `translateY(${newHeight}px)`;\n    }\n  }\n\n  function close(event: Event | SyntheticEvent): void {\n    setPressed(false);\n    moveOffset.current = INITIAL_Y_POSITION;\n    if (bottomSheetReference.current !== null) {\n      bottomSheetReference.current.style.removeProperty('transform');\n    }\n    if (props.onClose) {\n      props.onClose(event);\n    }\n  }\n\n  const onSwipeStart = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void => {\n    initialYCoordinate.current = ('touches' in event ? event.touches[0] : event).clientY;\n    setPressed(true);\n  };\n\n  const onSwipeMove = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void => {\n    if (pressed) {\n      const { clientY } = 'touches' in event ? event.touches[0] : event;\n\n      const offset = calculateOffsetAfterMove(clientY);\n      // check whether move is to the bottom only and content scroll position is at the top\n      if (offset > INITIAL_Y_POSITION && isContentScrollPositionAtTop()) {\n        moveOffset.current = offset;\n        animationId.current = requestAnimationFrame(() => {\n          if (animationId.current !== undefined && bottomSheetReference.current !== null) {\n            move(offset);\n          }\n        });\n      }\n    }\n  };\n\n  function onSwipeEnd(\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void {\n    // stop moving component\n    cancelAnimationFrame(animationId.current);\n    setPressed(false);\n    // check whether move down is strong enough\n    // and content scroll position is at the top to close the component\n    if (moveOffset.current > MOVE_OFFSET_THRESHOLD && isContentScrollPositionAtTop()) {\n      close(event);\n    }\n    // otherwise move component back to default (initial) position\n    else {\n      move(INITIAL_Y_POSITION);\n    }\n    moveOffset.current = INITIAL_Y_POSITION;\n  }\n\n  function isContentScrollPositionAtTop(): boolean {\n    return (\n      contentReference?.current?.scrollTop !== undefined &&\n      contentReference.current.scrollTop <= CONTENT_SCROLL_THRESHOLD\n    );\n  }\n\n  /**\n   * Calculates how hard user moves component,\n   * result value used to determine whether to hide component or re-position to default state\n   *\n   * @param afterMoveYCoordinate\n   */\n  function calculateOffsetAfterMove(afterMoveYCoordinate: number): number {\n    return afterMoveYCoordinate - initialYCoordinate.current;\n  }\n\n  /**\n   * Set `max-height` for content part (in order to keep it scrollable for content overflow cases) of the component\n   * and ensures space for safe zone (32px) at the top.\n   */\n  function setContentMaxHeight(): CSSProperties {\n    const safeZoneHeight = '64px';\n    const topbarHeight = '32px';\n    const windowHight: number = isServerSide() ? 0 : window.innerHeight;\n    /**\n     * Calculate _real_ height of the screen (taking into account parts of browser interface).\n     *\n     * See https://css-tricks.com/the-trick-to-viewport-units-on-mobile for more details.\n     */\n    const screenHeight = `${windowHight * 0.01 * 100}px`;\n    return {\n      maxHeight: `calc(${screenHeight} - ${safeZoneHeight} - ${topbarHeight})`,\n    };\n  }\n\n  const is400Zoom = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n\n  return is400Zoom ? (\n    <Drawer open={props.open} className={props.className} onClose={close}>\n      {props.children}\n    </Drawer>\n  ) : (\n    <Dimmer open={props.open} fadeContentOnEnter fadeContentOnExit onClose={close}>\n      <SlidingPanel\n        ref={bottomSheetReference}\n        open={props.open}\n        position={Position.BOTTOM}\n        className={classNames('np-bottom-sheet', props.className)}\n      >\n        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\n        <div\n          role=\"dialog\"\n          aria-modal\n          onTouchStart={onSwipeStart}\n          onTouchMove={onSwipeMove}\n          onTouchEnd={onSwipeEnd}\n          onMouseDown={onSwipeStart}\n          onMouseMove={onSwipeMove}\n          onMouseUp={onSwipeEnd}\n        >\n          <div ref={topBarReference} className=\"np-bottom-sheet--top-bar\">\n            <div className=\"np-bottom-sheet--handler\" />\n            <CloseButton size=\"sm\" className=\"sr-only np-bottom-sheet--close-btn\" onClick={close} />\n          </div>\n          <div\n            ref={contentReference}\n            style={setContentMaxHeight()}\n            className=\"np-bottom-sheet--content\"\n          >\n            {props.children}\n          </div>\n        </div>\n      </SlidingPanel>\n    </Dimmer>\n  );\n};\n\nexport default BottomSheet;\n"],"names":["INITIAL_Y_POSITION","CONTENT_SCROLL_THRESHOLD","MOVE_OFFSET_THRESHOLD","BottomSheet","props","bottomSheetReference","useRef","topBarReference","contentReference","pressed","setPressed","useState","animationId","moveOffset","initialYCoordinate","useConditionalListener","attachListener","open","isServerSide","callback","current","classList","isContentScrollPositionAtTop","add","remove","eventType","parent","undefined","document","move","newHeight","style","transform","close","event","removeProperty","onClose","onSwipeStart","touches","clientY","onSwipeMove","offset","calculateOffsetAfterMove","requestAnimationFrame","onSwipeEnd","cancelAnimationFrame","scrollTop","afterMoveYCoordinate","setContentMaxHeight","safeZoneHeight","topbarHeight","windowHight","window","innerHeight","screenHeight","maxHeight","is400Zoom","useMedia","Breakpoint","ZOOM_400","_jsx","Drawer","className","children","Dimmer","fadeContentOnEnter","fadeContentOnExit","SlidingPanel","ref","position","Position","BOTTOM","classNames","_jsxs","role","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","CloseButton","size","onClick"],"mappings":"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"}

package/build/common/bottomSheet/BottomSheet.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.mjs","sources":["../../../src/common/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useRef, useState, PropsWithChildren, CSSProperties, SyntheticEvent } from 'react';\n\nimport Dimmer from '../../dimmer';\nimport Drawer from '../../drawer';\nimport SlidingPanel from '../../slidingPanel';\nimport { CloseButton } from '../closeButton';\nimport { CommonProps } from '../commonProps';\nimport { isServerSide } from '../domHelpers';\nimport { useConditionalListener } from '../hooks';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\nimport { Position } from '../propsValues/position';\n\nconst INITIAL_Y_POSITION = 0;\n\nconst CONTENT_SCROLL_THRESHOLD = 1;\n\nconst MOVE_OFFSET_THRESHOLD = 50;\n\nexport type BottomSheetProps = PropsWithChildren<\n  {\n    onClose?: (event: Event | SyntheticEvent) => void;\n    open: boolean;\n  } & CommonProps\n>;\n\n/**\n * Neptune: https://transferwise.github.io/neptune/components/bottom-sheet/\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet\n *\n */\nconst BottomSheet = (props: BottomSheetProps) => {\n  const bottomSheetReference = useRef<HTMLDivElement>(null);\n  const topBarReference = useRef<HTMLDivElement>(null);\n  const contentReference = useRef<HTMLDivElement>(null);\n\n  const [pressed, setPressed] = useState<boolean>(false);\n\n  /**\n   * Used to track `requestAnimationFrame` requests\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#return_value\n   */\n  const animationId = useRef<number>(0);\n\n  /**\n   * Difference between initial coordinate ({@link initialYCoordinate})\n   * and new position (when user moves component), it's get calculated on `onTouchMove` and `onMouseMove` events\n   *\n   * @see {@link calculateOffsetAfterMove}\n   */\n  const moveOffset = useRef<number>(0);\n  const initialYCoordinate = useRef<number>(0);\n\n  // apply shadow to the bottom of top-bar when scroll over content\n  useConditionalListener({\n    attachListener: props.open && !isServerSide(),\n    callback: () => {\n      if (topBarReference.current !== null) {\n        const { classList } = topBarReference.current;\n        if (!isContentScrollPositionAtTop()) {\n          classList.add('np-bottom-sheet--top-bar--shadow');\n        } else {\n          classList.remove('np-bottom-sheet--top-bar--shadow');\n        }\n      }\n    },\n    eventType: 'scroll',\n    parent: isServerSide() ? undefined : document,\n  });\n\n  function move(newHeight: number): void {\n    if (bottomSheetReference.current !== null) {\n      bottomSheetReference.current.style.transform = `translateY(${newHeight}px)`;\n    }\n  }\n\n  function close(event: Event | SyntheticEvent): void {\n    setPressed(false);\n    moveOffset.current = INITIAL_Y_POSITION;\n    if (bottomSheetReference.current !== null) {\n      bottomSheetReference.current.style.removeProperty('transform');\n    }\n    if (props.onClose) {\n      props.onClose(event);\n    }\n  }\n\n  const onSwipeStart = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void => {\n    initialYCoordinate.current = ('touches' in event ? event.touches[0] : event).clientY;\n    setPressed(true);\n  };\n\n  const onSwipeMove = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void => {\n    if (pressed) {\n      const { clientY } = 'touches' in event ? event.touches[0] : event;\n\n      const offset = calculateOffsetAfterMove(clientY);\n      // check whether move is to the bottom only and content scroll position is at the top\n      if (offset > INITIAL_Y_POSITION && isContentScrollPositionAtTop()) {\n        moveOffset.current = offset;\n        animationId.current = requestAnimationFrame(() => {\n          if (animationId.current !== undefined && bottomSheetReference.current !== null) {\n            move(offset);\n          }\n        });\n      }\n    }\n  };\n\n  function onSwipeEnd(\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void {\n    // stop moving component\n    cancelAnimationFrame(animationId.current);\n    setPressed(false);\n    // check whether move down is strong enough\n    // and content scroll position is at the top to close the component\n    if (moveOffset.current > MOVE_OFFSET_THRESHOLD && isContentScrollPositionAtTop()) {\n      close(event);\n    }\n    // otherwise move component back to default (initial) position\n    else {\n      move(INITIAL_Y_POSITION);\n    }\n    moveOffset.current = INITIAL_Y_POSITION;\n  }\n\n  function isContentScrollPositionAtTop(): boolean {\n    return (\n      contentReference?.current?.scrollTop !== undefined &&\n      contentReference.current.scrollTop <= CONTENT_SCROLL_THRESHOLD\n    );\n  }\n\n  /**\n   * Calculates how hard user moves component,\n   * result value used to determine whether to hide component or re-position to default state\n   *\n   * @param afterMoveYCoordinate\n   */\n  function calculateOffsetAfterMove(afterMoveYCoordinate: number): number {\n    return afterMoveYCoordinate - initialYCoordinate.current;\n  }\n\n  /**\n   * Set `max-height` for content part (in order to keep it scrollable for content overflow cases) of the component\n   * and ensures space for safe zone (32px) at the top.\n   */\n  function setContentMaxHeight(): CSSProperties {\n    const safeZoneHeight = '64px';\n    const topbarHeight = '32px';\n    const windowHight: number = isServerSide() ? 0 : window.innerHeight;\n    /**\n     * Calculate _real_ height of the screen (taking into account parts of browser interface).\n     *\n     * See https://css-tricks.com/the-trick-to-viewport-units-on-mobile for more details.\n     */\n    const screenHeight = `${windowHight * 0.01 * 100}px`;\n    return {\n      maxHeight: `calc(${screenHeight} - ${safeZoneHeight} - ${topbarHeight})`,\n    };\n  }\n\n  const is400Zoom = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n\n  return is400Zoom ? (\n    <Drawer open={props.open} className={props.className} onClose={close}>\n      {props.children}\n    </Drawer>\n  ) : (\n    <Dimmer open={props.open} fadeContentOnEnter fadeContentOnExit onClose={close}>\n      <SlidingPanel\n        ref={bottomSheetReference}\n        open={props.open}\n        position={Position.BOTTOM}\n        className={classNames('np-bottom-sheet', props.className)}\n      >\n        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\n        <div\n          role=\"dialog\"\n          aria-modal\n          onTouchStart={onSwipeStart}\n          onTouchMove={onSwipeMove}\n          onTouchEnd={onSwipeEnd}\n          onMouseDown={onSwipeStart}\n          onMouseMove={onSwipeMove}\n          onMouseUp={onSwipeEnd}\n        >\n          <div ref={topBarReference} className=\"np-bottom-sheet--top-bar\">\n            <div className=\"np-bottom-sheet--handler\" />\n            <CloseButton size=\"sm\" className=\"sr-only np-bottom-sheet--close-btn\" onClick={close} />\n          </div>\n          <div\n            ref={contentReference}\n            style={setContentMaxHeight()}\n            className=\"np-bottom-sheet--content\"\n          >\n            {props.children}\n          </div>\n        </div>\n      </SlidingPanel>\n    </Dimmer>\n  );\n};\n\nexport default BottomSheet;\n"],"names":["INITIAL_Y_POSITION","CONTENT_SCROLL_THRESHOLD","MOVE_OFFSET_THRESHOLD","BottomSheet","props","bottomSheetReference","useRef","topBarReference","contentReference","pressed","setPressed","useState","animationId","moveOffset","initialYCoordinate","useConditionalListener","attachListener","open","isServerSide","callback","current","classList","isContentScrollPositionAtTop","add","remove","eventType","parent","undefined","document","move","newHeight","style","transform","close","event","removeProperty","onClose","onSwipeStart","touches","clientY","onSwipeMove","offset","calculateOffsetAfterMove","requestAnimationFrame","onSwipeEnd","cancelAnimationFrame","scrollTop","afterMoveYCoordinate","setContentMaxHeight","safeZoneHeight","topbarHeight","windowHight","window","innerHeight","screenHeight","maxHeight","is400Zoom","useMedia","Breakpoint","ZOOM_400","_jsx","Drawer","className","children","Dimmer","fadeContentOnEnter","fadeContentOnExit","SlidingPanel","ref","position","Position","BOTTOM","classNames","_jsxs","role","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","CloseButton","size","onClick"],"mappings":"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"}
+{"version":3,"file":"BottomSheet.mjs","sources":["../../../src/common/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useRef, useState, PropsWithChildren, CSSProperties, SyntheticEvent } from 'react';\n\nimport Dimmer from '../../dimmer';\nimport Drawer from '../../drawer';\nimport SlidingPanel from '../../slidingPanel';\nimport { CloseButton } from '../closeButton';\nimport { CommonProps } from '../commonProps';\nimport { isServerSide } from '../domHelpers';\nimport { useConditionalListener } from '../hooks';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\nimport { Position } from '../propsValues/position';\n\nconst INITIAL_Y_POSITION = 0;\n\nconst CONTENT_SCROLL_THRESHOLD = 1;\n\nconst MOVE_OFFSET_THRESHOLD = 50;\n\nexport type BottomSheetProps = PropsWithChildren<\n  {\n    onClose?: (event: Event | SyntheticEvent) => void;\n    open: boolean;\n  } & CommonProps\n>;\n\n/**\n * Neptune: https://transferwise.github.io/neptune/components/bottom-sheet/\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet\n *\n */\nconst BottomSheet = (props: BottomSheetProps) => {\n  const bottomSheetReference = useRef<HTMLDivElement>(null);\n  const topBarReference = useRef<HTMLDivElement>(null);\n  const contentReference = useRef<HTMLDivElement>(null);\n\n  const [pressed, setPressed] = useState<boolean>(false);\n\n  /**\n   * Used to track `requestAnimationFrame` requests\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#return_value\n   */\n  const animationId = useRef<number>(0);\n\n  /**\n   * Difference between initial coordinate ({@link initialYCoordinate})\n   * and new position (when user moves component), it's get calculated on `onTouchMove` and `onMouseMove` events\n   *\n   * @see {@link calculateOffsetAfterMove}\n   */\n  const moveOffset = useRef<number>(0);\n  const initialYCoordinate = useRef<number>(0);\n\n  // apply shadow to the bottom of top-bar when scroll over content\n  useConditionalListener({\n    attachListener: props.open && !isServerSide(),\n    callback: () => {\n      if (topBarReference.current !== null) {\n        const { classList } = topBarReference.current;\n        if (!isContentScrollPositionAtTop()) {\n          classList.add('np-bottom-sheet--top-bar--shadow');\n        } else {\n          classList.remove('np-bottom-sheet--top-bar--shadow');\n        }\n      }\n    },\n    eventType: 'scroll',\n    parent: isServerSide() ? undefined : document,\n  });\n\n  function move(newHeight: number): void {\n    if (bottomSheetReference.current !== null) {\n      bottomSheetReference.current.style.transform = `translateY(${newHeight}px)`;\n    }\n  }\n\n  function close(event: Event | SyntheticEvent): void {\n    setPressed(false);\n    moveOffset.current = INITIAL_Y_POSITION;\n    if (bottomSheetReference.current !== null) {\n      bottomSheetReference.current.style.removeProperty('transform');\n    }\n    if (props.onClose) {\n      props.onClose(event);\n    }\n  }\n\n  const onSwipeStart = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void => {\n    initialYCoordinate.current = ('touches' in event ? event.touches[0] : event).clientY;\n    setPressed(true);\n  };\n\n  const onSwipeMove = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void => {\n    if (pressed) {\n      const { clientY } = 'touches' in event ? event.touches[0] : event;\n\n      const offset = calculateOffsetAfterMove(clientY);\n      // check whether move is to the bottom only and content scroll position is at the top\n      if (offset > INITIAL_Y_POSITION && isContentScrollPositionAtTop()) {\n        moveOffset.current = offset;\n        animationId.current = requestAnimationFrame(() => {\n          if (animationId.current !== undefined && bottomSheetReference.current !== null) {\n            move(offset);\n          }\n        });\n      }\n    }\n  };\n\n  function onSwipeEnd(\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void {\n    // stop moving component\n    cancelAnimationFrame(animationId.current);\n    setPressed(false);\n    // check whether move down is strong enough\n    // and content scroll position is at the top to close the component\n    if (moveOffset.current > MOVE_OFFSET_THRESHOLD && isContentScrollPositionAtTop()) {\n      close(event);\n    }\n    // otherwise move component back to default (initial) position\n    else {\n      move(INITIAL_Y_POSITION);\n    }\n    moveOffset.current = INITIAL_Y_POSITION;\n  }\n\n  function isContentScrollPositionAtTop(): boolean {\n    return (\n      contentReference?.current?.scrollTop !== undefined &&\n      contentReference.current.scrollTop <= CONTENT_SCROLL_THRESHOLD\n    );\n  }\n\n  /**\n   * Calculates how hard user moves component,\n   * result value used to determine whether to hide component or re-position to default state\n   *\n   * @param afterMoveYCoordinate\n   */\n  function calculateOffsetAfterMove(afterMoveYCoordinate: number): number {\n    return afterMoveYCoordinate - initialYCoordinate.current;\n  }\n\n  /**\n   * Set `max-height` for content part (in order to keep it scrollable for content overflow cases) of the component\n   * and ensures space for safe zone (32px) at the top.\n   */\n  function setContentMaxHeight(): CSSProperties {\n    const safeZoneHeight = '64px';\n    const topbarHeight = '32px';\n    const windowHight: number = isServerSide() ? 0 : window.innerHeight;\n    /**\n     * Calculate _real_ height of the screen (taking into account parts of browser interface).\n     *\n     * See https://css-tricks.com/the-trick-to-viewport-units-on-mobile for more details.\n     */\n    const screenHeight = `${windowHight * 0.01 * 100}px`;\n    return {\n      maxHeight: `calc(${screenHeight} - ${safeZoneHeight} - ${topbarHeight})`,\n    };\n  }\n\n  const is400Zoom = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n\n  return is400Zoom ? (\n    <Drawer open={props.open} className={props.className} onClose={close}>\n      {props.children}\n    </Drawer>\n  ) : (\n    <Dimmer open={props.open} fadeContentOnEnter fadeContentOnExit onClose={close}>\n      <SlidingPanel\n        ref={bottomSheetReference}\n        open={props.open}\n        position={Position.BOTTOM}\n        className={classNames('np-bottom-sheet', props.className)}\n      >\n        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\n        <div\n          role=\"dialog\"\n          aria-modal\n          onTouchStart={onSwipeStart}\n          onTouchMove={onSwipeMove}\n          onTouchEnd={onSwipeEnd}\n          onMouseDown={onSwipeStart}\n          onMouseMove={onSwipeMove}\n          onMouseUp={onSwipeEnd}\n        >\n          <div ref={topBarReference} className=\"np-bottom-sheet--top-bar\">\n            <div className=\"np-bottom-sheet--handler\" />\n            <CloseButton size=\"sm\" className=\"sr-only np-bottom-sheet--close-btn\" onClick={close} />\n          </div>\n          <div\n            ref={contentReference}\n            style={setContentMaxHeight()}\n            className=\"np-bottom-sheet--content\"\n          >\n            {props.children}\n          </div>\n        </div>\n      </SlidingPanel>\n    </Dimmer>\n  );\n};\n\nexport default BottomSheet;\n"],"names":["INITIAL_Y_POSITION","CONTENT_SCROLL_THRESHOLD","MOVE_OFFSET_THRESHOLD","BottomSheet","props","bottomSheetReference","useRef","topBarReference","contentReference","pressed","setPressed","useState","animationId","moveOffset","initialYCoordinate","useConditionalListener","attachListener","open","isServerSide","callback","current","classList","isContentScrollPositionAtTop","add","remove","eventType","parent","undefined","document","move","newHeight","style","transform","close","event","removeProperty","onClose","onSwipeStart","touches","clientY","onSwipeMove","offset","calculateOffsetAfterMove","requestAnimationFrame","onSwipeEnd","cancelAnimationFrame","scrollTop","afterMoveYCoordinate","setContentMaxHeight","safeZoneHeight","topbarHeight","windowHight","window","innerHeight","screenHeight","maxHeight","is400Zoom","useMedia","Breakpoint","ZOOM_400","_jsx","Drawer","className","children","Dimmer","fadeContentOnEnter","fadeContentOnExit","SlidingPanel","ref","position","Position","BOTTOM","classNames","_jsxs","role","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","CloseButton","size","onClick"],"mappings":"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"}

package/build/common/deviceDetection/deviceDetection.js.map

@@ -1 +1 @@
-{"version":3,"file":"deviceDetection.js","sources":["../../../src/common/deviceDetection/deviceDetection.ts"],"sourcesContent":["export function isIosDevice() {\n  const sampleTouchDevices = ['iphone', 'ipad', 'ipod'];\n  const matchString = sampleTouchDevices.map((device: string) => `(${device})`).join('|');\n  const regex = new RegExp(matchString, 'gi');\n\n  return typeof navigator !== 'undefined' && !!regex.test(navigator.userAgent);\n}\n"],"names":["isIosDevice","sampleTouchDevices","matchString","map","device","join","regex","RegExp","navigator","test","userAgent"],"mappings":";;SAAgBA,WAAWA,GAAA;EACzB,MAAMC,kBAAkB,GAAG,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AACrD,EAAA,MAAMC,WAAW,GAAGD,kBAAkB,CAACE,GAAG,CAAEC,MAAc,IAAS,CAAAA,CAAAA,EAAAA,SAAS,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC,CAAA;EACvF,MAAMC,KAAK,GAAG,IAAIC,MAAM,CAACL,WAAW,EAAE,IAAI,CAAC,CAAA;AAE3C,EAAA,OAAO,OAAOM,SAAS,KAAK,WAAW,IAAI,CAAC,CAACF,KAAK,CAACG,IAAI,CAACD,SAAS,CAACE,SAAS,CAAC,CAAA;AAC9E;;;;"}
+{"version":3,"file":"deviceDetection.js","sources":["../../../src/common/deviceDetection/deviceDetection.ts"],"sourcesContent":["export function isIosDevice() {\n  const sampleTouchDevices = ['iphone', 'ipad', 'ipod'];\n  const matchString = sampleTouchDevices.map((device: string) => `(${device})`).join('|');\n  const regex = new RegExp(matchString, 'gi');\n\n  return typeof navigator !== 'undefined' && !!regex.test(navigator.userAgent);\n}\n"],"names":["isIosDevice","sampleTouchDevices","matchString","map","device","join","regex","RegExp","navigator","test","userAgent"],"mappings":";;SAAgBA,WAAWA,GAAA;EACzB,MAAMC,kBAAkB,GAAG,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AACrD,EAAA,MAAMC,WAAW,GAAGD,kBAAkB,CAACE,GAAG,CAAEC,MAAc,IAAK,CAAIA,CAAAA,EAAAA,MAAM,GAAG,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC,CAAA;EACvF,MAAMC,KAAK,GAAG,IAAIC,MAAM,CAACL,WAAW,EAAE,IAAI,CAAC,CAAA;AAE3C,EAAA,OAAO,OAAOM,SAAS,KAAK,WAAW,IAAI,CAAC,CAACF,KAAK,CAACG,IAAI,CAACD,SAAS,CAACE,SAAS,CAAC,CAAA;AAC9E;;;;"}

package/build/common/deviceDetection/deviceDetection.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"deviceDetection.mjs","sources":["../../../src/common/deviceDetection/deviceDetection.ts"],"sourcesContent":["export function isIosDevice() {\n  const sampleTouchDevices = ['iphone', 'ipad', 'ipod'];\n  const matchString = sampleTouchDevices.map((device: string) => `(${device})`).join('|');\n  const regex = new RegExp(matchString, 'gi');\n\n  return typeof navigator !== 'undefined' && !!regex.test(navigator.userAgent);\n}\n"],"names":["isIosDevice","sampleTouchDevices","matchString","map","device","join","regex","RegExp","navigator","test","userAgent"],"mappings":"SAAgBA,WAAWA,GAAA;EACzB,MAAMC,kBAAkB,GAAG,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AACrD,EAAA,MAAMC,WAAW,GAAGD,kBAAkB,CAACE,GAAG,CAAEC,MAAc,IAAS,CAAAA,CAAAA,EAAAA,SAAS,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC,CAAA;EACvF,MAAMC,KAAK,GAAG,IAAIC,MAAM,CAACL,WAAW,EAAE,IAAI,CAAC,CAAA;AAE3C,EAAA,OAAO,OAAOM,SAAS,KAAK,WAAW,IAAI,CAAC,CAACF,KAAK,CAACG,IAAI,CAACD,SAAS,CAACE,SAAS,CAAC,CAAA;AAC9E;;;;"}
+{"version":3,"file":"deviceDetection.mjs","sources":["../../../src/common/deviceDetection/deviceDetection.ts"],"sourcesContent":["export function isIosDevice() {\n  const sampleTouchDevices = ['iphone', 'ipad', 'ipod'];\n  const matchString = sampleTouchDevices.map((device: string) => `(${device})`).join('|');\n  const regex = new RegExp(matchString, 'gi');\n\n  return typeof navigator !== 'undefined' && !!regex.test(navigator.userAgent);\n}\n"],"names":["isIosDevice","sampleTouchDevices","matchString","map","device","join","regex","RegExp","navigator","test","userAgent"],"mappings":"SAAgBA,WAAWA,GAAA;EACzB,MAAMC,kBAAkB,GAAG,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AACrD,EAAA,MAAMC,WAAW,GAAGD,kBAAkB,CAACE,GAAG,CAAEC,MAAc,IAAK,CAAIA,CAAAA,EAAAA,MAAM,GAAG,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC,CAAA;EACvF,MAAMC,KAAK,GAAG,IAAIC,MAAM,CAACL,WAAW,EAAE,IAAI,CAAC,CAAA;AAE3C,EAAA,OAAO,OAAOM,SAAS,KAAK,WAAW,IAAI,CAAC,CAACF,KAAK,CAACG,IAAI,CAACD,SAAS,CAACE,SAAS,CAAC,CAAA;AAC9E;;;;"}

package/build/common/panel/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sources":["../../../src/common/panel/Panel.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  MutableRefObject,\n  PropsWithChildren,\n  SyntheticEvent,\n  forwardRef,\n  useEffect,\n  useState,\n} from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { Position, PositionBottom, PositionLeft, PositionRight, PositionTop } from '..';\nimport Dimmer from '../../dimmer';\n\nconst POPOVER_OFFSET = [0, 16];\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nconst fallbackPlacements = {\n  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],\n  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],\n  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],\n  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],\n};\n\nexport type PanelProps = PropsWithChildren<{\n  arrow?: boolean;\n  flip?: boolean;\n  altAxis?: boolean;\n  open?: boolean;\n  onClose?: (event: Event | SyntheticEvent) => void;\n  position?: PositionBottom | PositionLeft | PositionRight | PositionTop;\n  anchorRef: MutableRefObject<Element | null>;\n  anchorWidth?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  {\n    arrow = false,\n    flip = true,\n    altAxis = false,\n    children,\n    open = false,\n    onClose,\n    position = Position.BOTTOM,\n    anchorRef,\n    anchorWidth = false,\n    ...rest\n  }: PanelProps,\n  reference,\n) {\n  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n\n  const modifiers = [];\n\n  if (altAxis) {\n    modifiers.push({\n      // https://popper.js.org/docs/v2/modifiers/prevent-overflow\n      name: 'preventOverflow',\n      options: {\n        altAxis: true,\n        tether: false,\n      },\n    });\n  }\n\n  if (arrow) {\n    modifiers.push({\n      name: 'arrow',\n      options: {\n        element: arrowElement,\n        options: {\n          padding: 8, // 8px from the edges of the popper\n        },\n      },\n    });\n    // This lets you displace a popper element from its reference element.\n    modifiers.push({ name: 'offset', options: { offset: POPOVER_OFFSET } });\n  }\n  if (flip && fallbackPlacements[position]) {\n    modifiers.push({\n      name: 'flip',\n      options: {\n        fallbackPlacements: fallbackPlacements[position],\n      },\n    });\n  }\n\n  const { styles, attributes, forceUpdate } = usePopper(anchorRef.current, popperElement, {\n    placement: position,\n    modifiers,\n  });\n\n  // If the trigger is not visible when the position is calculated, it will be incorrect. Because this can happen repeatedly (on resize for example),\n  // it is most simple just to always position before opening\n  useEffect(() => {\n    if (open && forceUpdate) {\n      forceUpdate();\n    }\n  }, [open]);\n\n  const contentStyle: CSSProperties = {\n    ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n  };\n\n  return (\n    <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n      <div\n        {...rest}\n        ref={setPopperElement}\n        role=\"dialog\"\n        // eslint-disable-next-line react/forbid-dom-props\n        style={{ ...styles.popper }}\n        {...attributes.popper}\n        className={classnames('np-panel', { 'np-panel--open': open }, rest.className)}\n      >\n        <div\n          ref={reference}\n          /* eslint-disable-next-line react/forbid-dom-props */\n          style={contentStyle}\n          className={classnames('np-panel__content')}\n        >\n          {children}\n          {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n          {arrow && (\n            <div\n              ref={setArrowElement}\n              className={classnames('np-panel__arrow')}\n              // eslint-disable-next-line react/forbid-dom-props\n              style={styles.arrow}\n            />\n          )}\n        </div>\n      </div>\n    </Dimmer>\n  );\n});\n\nexport default Panel;\n"],"names":["POPOVER_OFFSET","fallbackPlacements","Position","TOP","BOTTOM","RIGHT","LEFT","Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","anchorRef","anchorWidth","rest","reference","arrowElement","setArrowElement","useState","popperElement","setPopperElement","modifiers","push","name","options","tether","element","padding","offset","styles","attributes","forceUpdate","usePopper","current","placement","useEffect","contentStyle","width","clientWidth","undefined","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","ref","role","style","popper","className","classnames","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Panel.js","sources":["../../../src/common/panel/Panel.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  MutableRefObject,\n  PropsWithChildren,\n  SyntheticEvent,\n  forwardRef,\n  useEffect,\n  useState,\n} from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { Position, PositionBottom, PositionLeft, PositionRight, PositionTop } from '..';\nimport Dimmer from '../../dimmer';\n\nconst POPOVER_OFFSET = [0, 16];\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nconst fallbackPlacements = {\n  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],\n  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],\n  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],\n  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],\n};\n\nexport type PanelProps = PropsWithChildren<{\n  arrow?: boolean;\n  flip?: boolean;\n  altAxis?: boolean;\n  open?: boolean;\n  onClose?: (event: Event | SyntheticEvent) => void;\n  position?: PositionBottom | PositionLeft | PositionRight | PositionTop;\n  anchorRef: MutableRefObject<Element | null>;\n  anchorWidth?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  {\n    arrow = false,\n    flip = true,\n    altAxis = false,\n    children,\n    open = false,\n    onClose,\n    position = Position.BOTTOM,\n    anchorRef,\n    anchorWidth = false,\n    ...rest\n  }: PanelProps,\n  reference,\n) {\n  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n\n  const modifiers = [];\n\n  if (altAxis) {\n    modifiers.push({\n      // https://popper.js.org/docs/v2/modifiers/prevent-overflow\n      name: 'preventOverflow',\n      options: {\n        altAxis: true,\n        tether: false,\n      },\n    });\n  }\n\n  if (arrow) {\n    modifiers.push({\n      name: 'arrow',\n      options: {\n        element: arrowElement,\n        options: {\n          padding: 8, // 8px from the edges of the popper\n        },\n      },\n    });\n    // This lets you displace a popper element from its reference element.\n    modifiers.push({ name: 'offset', options: { offset: POPOVER_OFFSET } });\n  }\n  if (flip && fallbackPlacements[position]) {\n    modifiers.push({\n      name: 'flip',\n      options: {\n        fallbackPlacements: fallbackPlacements[position],\n      },\n    });\n  }\n\n  const { styles, attributes, forceUpdate } = usePopper(anchorRef.current, popperElement, {\n    placement: position,\n    modifiers,\n  });\n\n  // If the trigger is not visible when the position is calculated, it will be incorrect. Because this can happen repeatedly (on resize for example),\n  // it is most simple just to always position before opening\n  useEffect(() => {\n    if (open && forceUpdate) {\n      forceUpdate();\n    }\n  }, [open]);\n\n  const contentStyle: CSSProperties = {\n    ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n  };\n\n  return (\n    <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n      <div\n        {...rest}\n        ref={setPopperElement}\n        role=\"dialog\"\n        // eslint-disable-next-line react/forbid-dom-props\n        style={{ ...styles.popper }}\n        {...attributes.popper}\n        className={classnames('np-panel', { 'np-panel--open': open }, rest.className)}\n      >\n        <div\n          ref={reference}\n          /* eslint-disable-next-line react/forbid-dom-props */\n          style={contentStyle}\n          className={classnames('np-panel__content')}\n        >\n          {children}\n          {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n          {arrow && (\n            <div\n              ref={setArrowElement}\n              className={classnames('np-panel__arrow')}\n              // eslint-disable-next-line react/forbid-dom-props\n              style={styles.arrow}\n            />\n          )}\n        </div>\n      </div>\n    </Dimmer>\n  );\n});\n\nexport default Panel;\n"],"names":["POPOVER_OFFSET","fallbackPlacements","Position","TOP","BOTTOM","RIGHT","LEFT","Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","anchorRef","anchorWidth","rest","reference","arrowElement","setArrowElement","useState","popperElement","setPopperElement","modifiers","push","name","options","tether","element","padding","offset","styles","attributes","forceUpdate","usePopper","current","placement","useEffect","contentStyle","width","clientWidth","undefined","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","ref","role","style","popper","className","classnames","_jsxs"],"mappings":"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"}

package/build/common/panel/Panel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.mjs","sources":["../../../src/common/panel/Panel.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  MutableRefObject,\n  PropsWithChildren,\n  SyntheticEvent,\n  forwardRef,\n  useEffect,\n  useState,\n} from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { Position, PositionBottom, PositionLeft, PositionRight, PositionTop } from '..';\nimport Dimmer from '../../dimmer';\n\nconst POPOVER_OFFSET = [0, 16];\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nconst fallbackPlacements = {\n  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],\n  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],\n  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],\n  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],\n};\n\nexport type PanelProps = PropsWithChildren<{\n  arrow?: boolean;\n  flip?: boolean;\n  altAxis?: boolean;\n  open?: boolean;\n  onClose?: (event: Event | SyntheticEvent) => void;\n  position?: PositionBottom | PositionLeft | PositionRight | PositionTop;\n  anchorRef: MutableRefObject<Element | null>;\n  anchorWidth?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  {\n    arrow = false,\n    flip = true,\n    altAxis = false,\n    children,\n    open = false,\n    onClose,\n    position = Position.BOTTOM,\n    anchorRef,\n    anchorWidth = false,\n    ...rest\n  }: PanelProps,\n  reference,\n) {\n  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n\n  const modifiers = [];\n\n  if (altAxis) {\n    modifiers.push({\n      // https://popper.js.org/docs/v2/modifiers/prevent-overflow\n      name: 'preventOverflow',\n      options: {\n        altAxis: true,\n        tether: false,\n      },\n    });\n  }\n\n  if (arrow) {\n    modifiers.push({\n      name: 'arrow',\n      options: {\n        element: arrowElement,\n        options: {\n          padding: 8, // 8px from the edges of the popper\n        },\n      },\n    });\n    // This lets you displace a popper element from its reference element.\n    modifiers.push({ name: 'offset', options: { offset: POPOVER_OFFSET } });\n  }\n  if (flip && fallbackPlacements[position]) {\n    modifiers.push({\n      name: 'flip',\n      options: {\n        fallbackPlacements: fallbackPlacements[position],\n      },\n    });\n  }\n\n  const { styles, attributes, forceUpdate } = usePopper(anchorRef.current, popperElement, {\n    placement: position,\n    modifiers,\n  });\n\n  // If the trigger is not visible when the position is calculated, it will be incorrect. Because this can happen repeatedly (on resize for example),\n  // it is most simple just to always position before opening\n  useEffect(() => {\n    if (open && forceUpdate) {\n      forceUpdate();\n    }\n  }, [open]);\n\n  const contentStyle: CSSProperties = {\n    ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n  };\n\n  return (\n    <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n      <div\n        {...rest}\n        ref={setPopperElement}\n        role=\"dialog\"\n        // eslint-disable-next-line react/forbid-dom-props\n        style={{ ...styles.popper }}\n        {...attributes.popper}\n        className={classnames('np-panel', { 'np-panel--open': open }, rest.className)}\n      >\n        <div\n          ref={reference}\n          /* eslint-disable-next-line react/forbid-dom-props */\n          style={contentStyle}\n          className={classnames('np-panel__content')}\n        >\n          {children}\n          {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n          {arrow && (\n            <div\n              ref={setArrowElement}\n              className={classnames('np-panel__arrow')}\n              // eslint-disable-next-line react/forbid-dom-props\n              style={styles.arrow}\n            />\n          )}\n        </div>\n      </div>\n    </Dimmer>\n  );\n});\n\nexport default Panel;\n"],"names":["POPOVER_OFFSET","fallbackPlacements","Position","TOP","BOTTOM","RIGHT","LEFT","Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","anchorRef","anchorWidth","rest","reference","arrowElement","setArrowElement","useState","popperElement","setPopperElement","modifiers","push","name","options","tether","element","padding","offset","styles","attributes","forceUpdate","usePopper","current","placement","useEffect","contentStyle","width","clientWidth","undefined","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","ref","role","style","popper","className","classnames","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Panel.mjs","sources":["../../../src/common/panel/Panel.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  MutableRefObject,\n  PropsWithChildren,\n  SyntheticEvent,\n  forwardRef,\n  useEffect,\n  useState,\n} from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { Position, PositionBottom, PositionLeft, PositionRight, PositionTop } from '..';\nimport Dimmer from '../../dimmer';\n\nconst POPOVER_OFFSET = [0, 16];\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nconst fallbackPlacements = {\n  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],\n  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],\n  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],\n  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],\n};\n\nexport type PanelProps = PropsWithChildren<{\n  arrow?: boolean;\n  flip?: boolean;\n  altAxis?: boolean;\n  open?: boolean;\n  onClose?: (event: Event | SyntheticEvent) => void;\n  position?: PositionBottom | PositionLeft | PositionRight | PositionTop;\n  anchorRef: MutableRefObject<Element | null>;\n  anchorWidth?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  {\n    arrow = false,\n    flip = true,\n    altAxis = false,\n    children,\n    open = false,\n    onClose,\n    position = Position.BOTTOM,\n    anchorRef,\n    anchorWidth = false,\n    ...rest\n  }: PanelProps,\n  reference,\n) {\n  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n\n  const modifiers = [];\n\n  if (altAxis) {\n    modifiers.push({\n      // https://popper.js.org/docs/v2/modifiers/prevent-overflow\n      name: 'preventOverflow',\n      options: {\n        altAxis: true,\n        tether: false,\n      },\n    });\n  }\n\n  if (arrow) {\n    modifiers.push({\n      name: 'arrow',\n      options: {\n        element: arrowElement,\n        options: {\n          padding: 8, // 8px from the edges of the popper\n        },\n      },\n    });\n    // This lets you displace a popper element from its reference element.\n    modifiers.push({ name: 'offset', options: { offset: POPOVER_OFFSET } });\n  }\n  if (flip && fallbackPlacements[position]) {\n    modifiers.push({\n      name: 'flip',\n      options: {\n        fallbackPlacements: fallbackPlacements[position],\n      },\n    });\n  }\n\n  const { styles, attributes, forceUpdate } = usePopper(anchorRef.current, popperElement, {\n    placement: position,\n    modifiers,\n  });\n\n  // If the trigger is not visible when the position is calculated, it will be incorrect. Because this can happen repeatedly (on resize for example),\n  // it is most simple just to always position before opening\n  useEffect(() => {\n    if (open && forceUpdate) {\n      forceUpdate();\n    }\n  }, [open]);\n\n  const contentStyle: CSSProperties = {\n    ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n  };\n\n  return (\n    <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n      <div\n        {...rest}\n        ref={setPopperElement}\n        role=\"dialog\"\n        // eslint-disable-next-line react/forbid-dom-props\n        style={{ ...styles.popper }}\n        {...attributes.popper}\n        className={classnames('np-panel', { 'np-panel--open': open }, rest.className)}\n      >\n        <div\n          ref={reference}\n          /* eslint-disable-next-line react/forbid-dom-props */\n          style={contentStyle}\n          className={classnames('np-panel__content')}\n        >\n          {children}\n          {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n          {arrow && (\n            <div\n              ref={setArrowElement}\n              className={classnames('np-panel__arrow')}\n              // eslint-disable-next-line react/forbid-dom-props\n              style={styles.arrow}\n            />\n          )}\n        </div>\n      </div>\n    </Dimmer>\n  );\n});\n\nexport default Panel;\n"],"names":["POPOVER_OFFSET","fallbackPlacements","Position","TOP","BOTTOM","RIGHT","LEFT","Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","anchorRef","anchorWidth","rest","reference","arrowElement","setArrowElement","useState","popperElement","setPopperElement","modifiers","push","name","options","tether","element","padding","offset","styles","attributes","forceUpdate","usePopper","current","placement","useEffect","contentStyle","width","clientWidth","undefined","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","ref","role","style","popper","className","classnames","_jsxs"],"mappings":"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"}

package/build/common/responsivePanel/ResponsivePanel.js

@@ -15,7 +15,8 @@ const ResponsivePanel = /*#__PURE__*/React.forwardRef(function ResponsivePanel({
   className = undefined,
   onClose,
   open = false,
-  position: position$1 = position.Position.BOTTOM
+  position: position$1 = position.Position.BOTTOM,
+  anchorWidth = false
 }, reference) {
   const {
     isMobile
@@ -34,6 +35,7 @@ const ResponsivePanel = /*#__PURE__*/React.forwardRef(function ResponsivePanel({
     arrow: arrow,
     open: open,
     position: position$1,
+    anchorWidth: anchorWidth,
     anchorRef: anchorRef,
     className: className,
     onClose: onClose,

package/build/common/responsivePanel/ResponsivePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsivePanel.js","sources":["../../../src/common/responsivePanel/ResponsivePanel.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { Position } from '..';\nimport BottomSheet from '../bottomSheet';\nimport { useLayout } from '../hooks';\nimport Panel from '../panel';\nimport { PanelProps } from '../panel/Panel';\n\nconst ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(function ResponsivePanel(\n  {\n    anchorRef,\n    arrow = false,\n    flip = true,\n    children,\n    className = undefined,\n    onClose,\n    open = false,\n    position = Position.BOTTOM,\n  }: PanelProps,\n  reference,\n) {\n  const { isMobile } = useLayout();\n  if (isMobile) {\n    return (\n      <BottomSheet key=\"bottomSheet\" open={open} className={className} onClose={onClose}>\n        {children}\n      </BottomSheet>\n    );\n  }\n  return (\n    <Panel\n      key=\"panel\"\n      ref={reference}\n      flip={flip}\n      arrow={arrow}\n      open={open}\n      position={position}\n      anchorRef={anchorRef}\n      className={className}\n      onClose={onClose}\n    >\n      {children}\n    </Panel>\n  );\n});\n\nexport default ResponsivePanel;\n"],"names":["ResponsivePanel","forwardRef","anchorRef","arrow","flip","children","className","undefined","onClose","open","position","Position","BOTTOM","reference","isMobile","useLayout","_jsx","BottomSheet","Panel","ref"],"mappings":";;;;;;;;;AAQA,MAAMA,eAAe,gBAAGC,gBAAU,CAA6B,SAASD,eAAeA,CACrF;EACEE,SAAS;AACTC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,IAAI,GAAG,IAAI;EACXC,QAAQ;AACRC,EAAAA,SAAS,GAAGC,SAAS;EACrBC,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;YACZC,UAAQ,GAAGC,iBAAQ,CAACC,MAAAA;AAAM,CACf,EACbC,SAAS,EAAA;EAET,MAAM;AAAEC,IAAAA,QAAAA;GAAU,GAAGC,mBAAS,EAAE,CAAA;AAChC,EAAA,IAAID,QAAQ,EAAE;IACZ,oBACEE,cAAA,CAACC,WAAW,EAAA;AAAmBR,MAAAA,IAAI,EAAEA,IAAK;AAACH,MAAAA,SAAS,EAAEA,SAAU;AAACE,MAAAA,OAAO,EAAEA,OAAQ;AAAAH,MAAAA,QAAA,EAC/EA,QAAAA;AAAQ,KAAA,EADM,aAEJ,CAAC,CAAA;AAElB,GAAA;EACA,oBACEW,cAAA,CAACE,KAAK,EAAA;AAEJC,IAAAA,GAAG,EAAEN,SAAU;AACfT,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,KAAK,EAAEA,KAAM;AACbM,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,UAAS;AACnBR,IAAAA,SAAS,EAAEA,SAAU;AACrBI,IAAAA,SAAS,EAAEA,SAAU;AACrBE,IAAAA,OAAO,EAAEA,OAAQ;AAAAH,IAAAA,QAAA,EAEhBA,QAAAA;AAAQ,GAAA,EAVL,OAWC,CAAC,CAAA;AAEZ,CAAC;;;;"}
+{"version":3,"file":"ResponsivePanel.js","sources":["../../../src/common/responsivePanel/ResponsivePanel.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { Position } from '..';\nimport BottomSheet from '../bottomSheet';\nimport { useLayout } from '../hooks';\nimport Panel from '../panel';\nimport { PanelProps } from '../panel/Panel';\n\nconst ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(function ResponsivePanel(\n  {\n    anchorRef,\n    arrow = false,\n    flip = true,\n    children,\n    className = undefined,\n    onClose,\n    open = false,\n    position = Position.BOTTOM,\n    anchorWidth = false,\n  }: PanelProps,\n  reference,\n) {\n  const { isMobile } = useLayout();\n  if (isMobile) {\n    return (\n      <BottomSheet key=\"bottomSheet\" open={open} className={className} onClose={onClose}>\n        {children}\n      </BottomSheet>\n    );\n  }\n  return (\n    <Panel\n      key=\"panel\"\n      ref={reference}\n      flip={flip}\n      arrow={arrow}\n      open={open}\n      position={position}\n      anchorWidth={anchorWidth}\n      anchorRef={anchorRef}\n      className={className}\n      onClose={onClose}\n    >\n      {children}\n    </Panel>\n  );\n});\n\nexport default ResponsivePanel;\n"],"names":["ResponsivePanel","forwardRef","anchorRef","arrow","flip","children","className","undefined","onClose","open","position","Position","BOTTOM","anchorWidth","reference","isMobile","useLayout","_jsx","BottomSheet","Panel","ref"],"mappings":";;;;;;;;;AAQA,MAAMA,eAAe,gBAAGC,gBAAU,CAA6B,SAASD,eAAeA,CACrF;EACEE,SAAS;AACTC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,IAAI,GAAG,IAAI;EACXC,QAAQ;AACRC,EAAAA,SAAS,GAAGC,SAAS;EACrBC,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;YACZC,UAAQ,GAAGC,iBAAQ,CAACC,MAAM;AAC1BC,EAAAA,WAAW,GAAG,KAAA;AAAK,CACR,EACbC,SAAS,EAAA;EAET,MAAM;AAAEC,IAAAA,QAAAA;GAAU,GAAGC,mBAAS,EAAE,CAAA;AAChC,EAAA,IAAID,QAAQ,EAAE;IACZ,oBACEE,cAAA,CAACC,WAAW,EAAA;AAAmBT,MAAAA,IAAI,EAAEA,IAAK;AAACH,MAAAA,SAAS,EAAEA,SAAU;AAACE,MAAAA,OAAO,EAAEA,OAAQ;AAAAH,MAAAA,QAAA,EAC/EA,QAAAA;AAAQ,KAAA,EADM,aAEJ,CAAC,CAAA;AAElB,GAAA;EACA,oBACEY,cAAA,CAACE,KAAK,EAAA;AAEJC,IAAAA,GAAG,EAAEN,SAAU;AACfV,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,KAAK,EAAEA,KAAM;AACbM,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,UAAS;AACnBG,IAAAA,WAAW,EAAEA,WAAY;AACzBX,IAAAA,SAAS,EAAEA,SAAU;AACrBI,IAAAA,SAAS,EAAEA,SAAU;AACrBE,IAAAA,OAAO,EAAEA,OAAQ;AAAAH,IAAAA,QAAA,EAEhBA,QAAAA;AAAQ,GAAA,EAXL,OAYC,CAAC,CAAA;AAEZ,CAAC;;;;"}

package/build/common/responsivePanel/ResponsivePanel.mjs

@@ -13,7 +13,8 @@ const ResponsivePanel = /*#__PURE__*/forwardRef(function ResponsivePanel({
   className = undefined,
   onClose,
   open = false,
-  position = Position.BOTTOM
+  position = Position.BOTTOM,
+  anchorWidth = false
 }, reference) {
   const {
     isMobile
@@ -32,6 +33,7 @@ const ResponsivePanel = /*#__PURE__*/forwardRef(function ResponsivePanel({
     arrow: arrow,
     open: open,
     position: position,
+    anchorWidth: anchorWidth,
     anchorRef: anchorRef,
     className: className,
     onClose: onClose,

package/build/common/responsivePanel/ResponsivePanel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsivePanel.mjs","sources":["../../../src/common/responsivePanel/ResponsivePanel.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { Position } from '..';\nimport BottomSheet from '../bottomSheet';\nimport { useLayout } from '../hooks';\nimport Panel from '../panel';\nimport { PanelProps } from '../panel/Panel';\n\nconst ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(function ResponsivePanel(\n  {\n    anchorRef,\n    arrow = false,\n    flip = true,\n    children,\n    className = undefined,\n    onClose,\n    open = false,\n    position = Position.BOTTOM,\n  }: PanelProps,\n  reference,\n) {\n  const { isMobile } = useLayout();\n  if (isMobile) {\n    return (\n      <BottomSheet key=\"bottomSheet\" open={open} className={className} onClose={onClose}>\n        {children}\n      </BottomSheet>\n    );\n  }\n  return (\n    <Panel\n      key=\"panel\"\n      ref={reference}\n      flip={flip}\n      arrow={arrow}\n      open={open}\n      position={position}\n      anchorRef={anchorRef}\n      className={className}\n      onClose={onClose}\n    >\n      {children}\n    </Panel>\n  );\n});\n\nexport default ResponsivePanel;\n"],"names":["ResponsivePanel","forwardRef","anchorRef","arrow","flip","children","className","undefined","onClose","open","position","Position","BOTTOM","reference","isMobile","useLayout","_jsx","BottomSheet","Panel","ref"],"mappings":";;;;;;;AAQA,MAAMA,eAAe,gBAAGC,UAAU,CAA6B,SAASD,eAAeA,CACrF;EACEE,SAAS;AACTC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,IAAI,GAAG,IAAI;EACXC,QAAQ;AACRC,EAAAA,SAAS,GAAGC,SAAS;EACrBC,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;EACZC,QAAQ,GAAGC,QAAQ,CAACC,MAAAA;AAAM,CACf,EACbC,SAAS,EAAA;EAET,MAAM;AAAEC,IAAAA,QAAAA;GAAU,GAAGC,SAAS,EAAE,CAAA;AAChC,EAAA,IAAID,QAAQ,EAAE;IACZ,oBACEE,GAAA,CAACC,WAAW,EAAA;AAAmBR,MAAAA,IAAI,EAAEA,IAAK;AAACH,MAAAA,SAAS,EAAEA,SAAU;AAACE,MAAAA,OAAO,EAAEA,OAAQ;AAAAH,MAAAA,QAAA,EAC/EA,QAAAA;AAAQ,KAAA,EADM,aAEJ,CAAC,CAAA;AAElB,GAAA;EACA,oBACEW,GAAA,CAACE,KAAK,EAAA;AAEJC,IAAAA,GAAG,EAAEN,SAAU;AACfT,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,KAAK,EAAEA,KAAM;AACbM,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,QAAS;AACnBR,IAAAA,SAAS,EAAEA,SAAU;AACrBI,IAAAA,SAAS,EAAEA,SAAU;AACrBE,IAAAA,OAAO,EAAEA,OAAQ;AAAAH,IAAAA,QAAA,EAEhBA,QAAAA;AAAQ,GAAA,EAVL,OAWC,CAAC,CAAA;AAEZ,CAAC;;;;"}
+{"version":3,"file":"ResponsivePanel.mjs","sources":["../../../src/common/responsivePanel/ResponsivePanel.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { Position } from '..';\nimport BottomSheet from '../bottomSheet';\nimport { useLayout } from '../hooks';\nimport Panel from '../panel';\nimport { PanelProps } from '../panel/Panel';\n\nconst ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(function ResponsivePanel(\n  {\n    anchorRef,\n    arrow = false,\n    flip = true,\n    children,\n    className = undefined,\n    onClose,\n    open = false,\n    position = Position.BOTTOM,\n    anchorWidth = false,\n  }: PanelProps,\n  reference,\n) {\n  const { isMobile } = useLayout();\n  if (isMobile) {\n    return (\n      <BottomSheet key=\"bottomSheet\" open={open} className={className} onClose={onClose}>\n        {children}\n      </BottomSheet>\n    );\n  }\n  return (\n    <Panel\n      key=\"panel\"\n      ref={reference}\n      flip={flip}\n      arrow={arrow}\n      open={open}\n      position={position}\n      anchorWidth={anchorWidth}\n      anchorRef={anchorRef}\n      className={className}\n      onClose={onClose}\n    >\n      {children}\n    </Panel>\n  );\n});\n\nexport default ResponsivePanel;\n"],"names":["ResponsivePanel","forwardRef","anchorRef","arrow","flip","children","className","undefined","onClose","open","position","Position","BOTTOM","anchorWidth","reference","isMobile","useLayout","_jsx","BottomSheet","Panel","ref"],"mappings":";;;;;;;AAQA,MAAMA,eAAe,gBAAGC,UAAU,CAA6B,SAASD,eAAeA,CACrF;EACEE,SAAS;AACTC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,IAAI,GAAG,IAAI;EACXC,QAAQ;AACRC,EAAAA,SAAS,GAAGC,SAAS;EACrBC,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;EACZC,QAAQ,GAAGC,QAAQ,CAACC,MAAM;AAC1BC,EAAAA,WAAW,GAAG,KAAA;AAAK,CACR,EACbC,SAAS,EAAA;EAET,MAAM;AAAEC,IAAAA,QAAAA;GAAU,GAAGC,SAAS,EAAE,CAAA;AAChC,EAAA,IAAID,QAAQ,EAAE;IACZ,oBACEE,GAAA,CAACC,WAAW,EAAA;AAAmBT,MAAAA,IAAI,EAAEA,IAAK;AAACH,MAAAA,SAAS,EAAEA,SAAU;AAACE,MAAAA,OAAO,EAAEA,OAAQ;AAAAH,MAAAA,QAAA,EAC/EA,QAAAA;AAAQ,KAAA,EADM,aAEJ,CAAC,CAAA;AAElB,GAAA;EACA,oBACEY,GAAA,CAACE,KAAK,EAAA;AAEJC,IAAAA,GAAG,EAAEN,SAAU;AACfV,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,KAAK,EAAEA,KAAM;AACbM,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,QAAS;AACnBG,IAAAA,WAAW,EAAEA,WAAY;AACzBX,IAAAA,SAAS,EAAEA,SAAU;AACrBI,IAAAA,SAAS,EAAEA,SAAU;AACrBE,IAAAA,OAAO,EAAEA,OAAQ;AAAAH,IAAAA,QAAA,EAEhBA,QAAAA;AAAQ,GAAA,EAXL,OAYC,CAAC,CAAA;AAEZ,CAAC;;;;"}