@helsenorge/designsystem-react 15.0.0-beta.1 → 15.0.0

package/lib/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","names":[],"sources":["../src/resources/HN.Designsystem.Drawer.en-GB.json","../src/resources/HN.Designsystem.Drawer.nb-NO.json","../src/resources/HN.Designsystem.Drawer.nn-NO.json","../src/components/Drawer/resourceHelper.ts","../src/components/Drawer/Drawer.tsx","../src/components/Drawer/index.ts"],"sourcesContent":["{\n  \"ariaLabelCloseBtn\": \"Close\",\n  \"ariaLabelBackButton\": \"Go back\"\n}\n","{\n  \"ariaLabelBackButton\": \"Gå tilbake\",\n  \"ariaLabelCloseBtn\": \"Lukk\"\n}\n","{\n  \"ariaLabelCloseBtn\": \"Lukk\",\n  \"ariaLabelBackButton\": \"Gå tilbake\"\n}\n","import type { HNDesignsystemDrawer } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Drawer.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Drawer.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.Drawer.nn-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDrawer => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN_NYNORSK:\n      return nnNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { AnimatePresence, useAnimate, usePresence } from 'motion/react';\n\nimport type { HNDesignsystemDrawer } from '../../resources/Resources';\nimport type { TitleTags } from '../Title';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, KeyboardEventKey, LanguageLocales, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useKeyboardEvent } from '../../hooks/useKeyboardEvent';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { disableBodyScroll, enableBodyScroll } from '../../utils/scroll';\nimport uuid from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Icon from '../Icon';\nimport ChevronLeft from '../Icons/ChevronLeft';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\ntype DesktopDirections = 'left' | 'right';\n\nexport interface DrawerProps extends InnerDrawerProps {\n  /** Opens and closes the drawer */\n  isOpen: boolean;\n}\n\nexport interface InnerDrawerProps {\n  /** Sets the aria-label of the drawer */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the drawer */\n  ariaLabelledBy?: string;\n  /** Sets the style of the Drawer Close button. Meant for use by HelpDrawer */\n  closeColor?: 'blueberry' | 'plum';\n  /** Direction of the drawer on desktop. Default: left */\n  desktopDirection?: DesktopDirections;\n  /** Sets the style of the Drawer header */\n  headerClasses?: string;\n  /** Title to display in the header of the drawer */\n  title: string;\n  /** id of the drawer title */\n  titleId?: string;\n  /** Changes the underlying element of the title. Default: h3 */\n  titleHtmlMarkup?: TitleTags;\n  /** Callback that triggers when clicking on close button or outside the drawer, update isOpen state when this triggers */\n  onRequestClose?: () => void;\n  /** Optional footer content that can be rendered instead of default CTA(s) */\n  footerContent?: React.ReactNode;\n  /** Main content of the drawer */\n  children?: React.ReactNode;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Primary CTA callback */\n  onPrimaryAction?: () => void;\n  /** Text for primary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n  primaryActionText?: string;\n  /** Text for secondary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n  secondaryActionText?: string;\n  /** Secondary CTA callback */\n  onSecondaryAction?: () => void;\n  /** Customize the z-index of the drawer */\n  zIndex?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemDrawer>;\n  /** Sets mobile styling and animation from outer level Drawer */\n  isMobile?: boolean;\n  /** Shows a back button to the left of title */\n  withBackButton?: boolean;\n  /** Callback for the back button */\n  onRequestBack?: () => void;\n  /** Sets classname for content part in Drawer */\n  contentClassName?: string;\n}\n\nconst Drawer: React.FC<DrawerProps> = props => {\n  const { isOpen, ...rest } = props;\n  const isMobile = useIsMobileBreakpoint();\n\n  return <AnimatePresence>{isOpen && <InnerDrawer {...rest} isMobile={isMobile} />}</AnimatePresence>;\n};\n\nconst InnerDrawer: React.FC<InnerDrawerProps> = props => {\n  const {\n    ariaLabel,\n    ariaLabelledBy,\n    children,\n    closeColor = 'blueberry',\n    desktopDirection = 'left',\n    footerContent,\n    headerClasses,\n    noCloseButton = false,\n    onPrimaryAction,\n    onRequestClose,\n    onSecondaryAction,\n    primaryActionText,\n    secondaryActionText,\n    title,\n    titleHtmlMarkup = 'h3',\n    titleId = uuid(),\n    zIndex = ZIndex.OverlayScreen,\n    resources,\n    isMobile,\n    withBackButton,\n    onRequestBack,\n    contentClassName,\n  } = props;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledBy, fallbackId: titleId });\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  // topContent and bottomContent are used to detect scroll position for shadow effects\n  const topContent = useRef<HTMLDivElement>(null);\n  const bottomContent = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null);\n  const footerRef = useRef<HTMLDivElement>(null);\n  const titleRef = useRef<HTMLHeadingElement>(null);\n  const [scope, animate] = useAnimate();\n  const [isPresent, safeToRemove] = usePresence();\n  const [headerHeight, setHeaderHeight] = React.useState(0);\n  const [footerHeight, setFooterHeight] = React.useState(0);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContentVisible = useIsVisible(bottomContent, 0);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemDrawer = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  // eslint-disable-next-line react-hooks/refs\n  const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;\n  const headerStyling = classNames(styles.drawer__header, headerClasses);\n  const hasFooterContent = (typeof footerContent !== 'undefined' && footerContent) || onPrimaryAction || onSecondaryAction;\n\n  useFocusTrap(containerRef, true);\n  useReturnFocusOnUnmount(containerRef);\n  useOutsideEvent(containerRef, () => {\n    if (onRequestClose) onRequestClose();\n  });\n  useKeyboardEvent(containerRef, () => onRequestClose && onRequestClose(), [KeyboardEventKey.Escape]);\n\n  // Close animasjon, vi kaller `onClose()` til slutt\n  const closeDrawer = (): void => {\n    if (!overlayRef.current || !containerRef.current) return;\n\n    animate(overlayRef.current, { opacity: 0, pointerEvents: 'none' }, { duration: 0.3, ease: 'easeInOut' });\n\n    if (isMobile) {\n      animate(\n        containerRef.current,\n        { y: '100%' },\n        {\n          duration: 0.3,\n          ease: 'easeInOut',\n          onComplete: () => {\n            if (safeToRemove) safeToRemove();\n          },\n        }\n      );\n    } else {\n      animate(\n        containerRef.current,\n        { x: desktopDirection === 'left' ? '-100%' : '100%' },\n        {\n          duration: 0.3,\n          ease: 'easeInOut',\n          onComplete: () => {\n            if (safeToRemove) safeToRemove();\n          },\n        }\n      );\n    }\n  };\n\n  useEffect(() => {\n    containerRef.current?.focus();\n    disableBodyScroll();\n\n    return (): void => {\n      enableBodyScroll();\n    };\n  }, []);\n\n  // Measure header and footer heights\n  useEffect(() => {\n    const updateHeights = (): void => {\n      if (headerRef.current) {\n        setHeaderHeight(headerRef.current.offsetHeight);\n      }\n      if (footerRef.current) {\n        setFooterHeight(footerRef.current.offsetHeight);\n      }\n    };\n\n    updateHeights();\n\n    // Update heights when content changes\n    const resizeObserver = new ResizeObserver(updateHeights);\n    if (headerRef.current) {\n      resizeObserver.observe(headerRef.current);\n    }\n    if (footerRef.current) {\n      resizeObserver.observe(footerRef.current);\n    }\n\n    return (): void => {\n      resizeObserver.disconnect();\n    };\n  }, [hasFooterContent]);\n\n  // Open animation.\n  useEffect(() => {\n    if (!overlayRef.current || !containerRef.current) return;\n\n    if (!isPresent) {\n      closeDrawer();\n      return;\n    }\n\n    if (isMobile) {\n      animate(containerRef.current, { y: '0' }, { duration: 0.3, ease: 'easeInOut' });\n    } else {\n      animate(containerRef.current, { x: '0' }, { duration: 0.3, ease: 'easeInOut' });\n    }\n\n    animate(overlayRef.current, { opacity: 1, pointerEvents: 'auto' }, { duration: 0.3, ease: 'easeInOut' });\n  }, [isPresent]);\n\n  const handleCTA = (callback?: () => void): void => {\n    if (callback) {\n      callback();\n    }\n  };\n\n  useEffect(() => {\n    titleRef.current?.focus();\n  }, [title]);\n\n  return (\n    <div className={styles.drawer} ref={scope} style={{ zIndex }} data-analyticsid={AnalyticsId.Drawer}>\n      <div className={styles.drawer__overlay} ref={overlayRef} aria-hidden=\"true\" />\n      <div\n        className={classNames(styles.drawer__container, {\n          [styles['drawer__container--right']]: desktopDirection === 'right',\n        })}\n        ref={containerRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabIndex={-1}\n        {...ariaLabelAttributes}\n      >\n        <div className={styles.drawer__container__inner}>\n          <div className={headerStyling} ref={headerRef}>\n            <Title\n              id={ariaLabelAttributes?.['aria-labelledby']}\n              className={styles['drawer__header__title']}\n              htmlMarkup={titleHtmlMarkup}\n              appearance=\"title3\"\n              ref={titleRef}\n              tabIndex={-1}\n            >\n              {title}\n            </Title>\n            {withBackButton && onRequestBack !== undefined && (\n              <Button\n                ariaLabel={mergedResources.ariaLabelBackButton}\n                onClick={onRequestBack}\n                variant=\"borderless\"\n                wrapperClassName={styles['drawer__header__back-button']}\n              >\n                <Icon svgIcon={ChevronLeft} />\n              </Button>\n            )}\n            {!noCloseButton && onRequestClose != undefined && (\n              <Close\n                ariaLabel={mergedResources.ariaLabelCloseBtn}\n                color={closeColor}\n                onClick={onRequestClose}\n                className={styles['drawer__header__close-button']}\n              />\n            )}\n          </div>\n          <div\n            className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--top'])}\n            style={{\n              opacity: !topContentVisible && contentIsScrollable ? 1 : 0,\n              top: headerHeight,\n            }}\n          />\n          <div\n            className={classNames(styles.drawer__content, contentClassName)}\n            tabIndex={contentIsScrollable ? 0 : undefined}\n            role={contentIsScrollable ? 'region' : undefined}\n            {...(contentIsScrollable ? ariaLabelAttributes : {})}\n            ref={contentRef}\n          >\n            <div ref={topContent} />\n            <div className={styles['drawer__content__children']}>{children}</div>\n            <div ref={bottomContent} style={{ height: '1px' }} />\n          </div>\n          <div\n            className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--bottom'])}\n            style={{\n              opacity: !bottomContentVisible && contentIsScrollable ? 1 : 0,\n              bottom: hasFooterContent ? footerHeight : 0,\n            }}\n          />\n        </div>\n        {hasFooterContent && (\n          <div className={styles.drawer__footer} ref={footerRef}>\n            {footerContent ? (\n              footerContent\n            ) : (\n              <>\n                {onPrimaryAction && <Button onClick={() => handleCTA(onPrimaryAction)}>{primaryActionText}</Button>}\n                {onSecondaryAction && (\n                  <Button variant=\"borderless\" onClick={() => handleCTA(onSecondaryAction)}>\n                    {secondaryActionText}\n                  </Button>\n                )}\n              </>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Drawer;\n","import Drawer from './Drawer';\nexport * from './Drawer';\nexport default Drawer;\n"],"mappings":"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"}
+{"version":3,"file":"Drawer.js","names":[],"sources":["../src/resources/HN.Designsystem.Drawer.en-GB.json","../src/resources/HN.Designsystem.Drawer.nb-NO.json","../src/resources/HN.Designsystem.Drawer.nn-NO.json","../src/components/Drawer/resourceHelper.ts","../src/components/Drawer/Drawer.tsx","../src/components/Drawer/index.ts"],"sourcesContent":["{\n  \"ariaLabelCloseBtn\": \"Close\",\n  \"ariaLabelBackButton\": \"Go back\"\n}\n","{\n  \"ariaLabelBackButton\": \"Gå tilbake\",\n  \"ariaLabelCloseBtn\": \"Lukk\"\n}\n","{\n  \"ariaLabelCloseBtn\": \"Lukk\",\n  \"ariaLabelBackButton\": \"Gå tilbake\"\n}\n","import type { HNDesignsystemDrawer } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Drawer.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Drawer.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.Drawer.nn-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDrawer => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN_NYNORSK:\n      return nnNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { AnimatePresence, useAnimate, usePresence } from 'motion/react';\n\nimport type { HNDesignsystemDrawer } from '../../resources/Resources';\nimport type { TitleTags } from '../Title';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, KeyboardEventKey, LanguageLocales, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useKeyboardEvent } from '../../hooks/useKeyboardEvent';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { disableBodyScroll, enableBodyScroll } from '../../utils/scroll';\nimport uuid from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Icon from '../Icon';\nimport ChevronLeft from '../Icons/ChevronLeft';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\ntype DesktopDirections = 'left' | 'right';\n\nexport interface DrawerProps extends InnerDrawerProps {\n  /** Opens and closes the drawer */\n  isOpen: boolean;\n}\n\nexport interface InnerDrawerProps {\n  /** Sets the aria-label of the drawer */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the drawer */\n  ariaLabelledBy?: string;\n  /** Sets the style of the Drawer Close button. Meant for use by HelpDrawer */\n  closeColor?: 'blueberry' | 'plum';\n  /** Direction of the drawer on desktop. Default: left */\n  desktopDirection?: DesktopDirections;\n  /** Sets the style of the Drawer header */\n  headerClasses?: string;\n  /** Title to display in the header of the drawer */\n  title: string;\n  /** id of the drawer title */\n  titleId?: string;\n  /** Changes the underlying element of the title. Default: h3 */\n  titleHtmlMarkup?: TitleTags;\n  /** Callback that triggers when clicking on close button or outside the drawer, update isOpen state when this triggers */\n  onRequestClose?: () => void;\n  /** Optional footer content that can be rendered instead of default CTA(s) */\n  footerContent?: React.ReactNode;\n  /** Main content of the drawer */\n  children?: React.ReactNode;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Primary CTA callback */\n  onPrimaryAction?: () => void;\n  /** Text for primary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n  primaryActionText?: string;\n  /** Text for secondary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n  secondaryActionText?: string;\n  /** Secondary CTA callback */\n  onSecondaryAction?: () => void;\n  /** Customize the z-index of the drawer */\n  zIndex?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemDrawer>;\n  /** Sets mobile styling and animation from outer level Drawer */\n  isMobile?: boolean;\n  /** Shows a back button to the left of title */\n  withBackButton?: boolean;\n  /** Callback for the back button */\n  onRequestBack?: () => void;\n  /** Sets classname for content part in Drawer */\n  contentClassName?: string;\n}\n\nconst Drawer: React.FC<DrawerProps> = props => {\n  const { isOpen, ...rest } = props;\n  const isMobile = useIsMobileBreakpoint();\n\n  return <AnimatePresence>{isOpen && <InnerDrawer {...rest} isMobile={isMobile} />}</AnimatePresence>;\n};\n\nconst InnerDrawer: React.FC<InnerDrawerProps> = props => {\n  const {\n    ariaLabel,\n    ariaLabelledBy,\n    children,\n    closeColor = 'blueberry',\n    desktopDirection = 'left',\n    footerContent,\n    headerClasses,\n    noCloseButton = false,\n    onPrimaryAction,\n    onRequestClose,\n    onSecondaryAction,\n    primaryActionText,\n    secondaryActionText,\n    title,\n    titleHtmlMarkup = 'h3',\n    titleId = uuid(),\n    zIndex = ZIndex.OverlayScreen,\n    resources,\n    isMobile,\n    withBackButton,\n    onRequestBack,\n    contentClassName,\n  } = props;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledBy, fallbackId: titleId });\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  // topContent and bottomContent are used to detect scroll position for shadow effects\n  const topContent = useRef<HTMLDivElement>(null);\n  const bottomContent = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null);\n  const footerRef = useRef<HTMLDivElement>(null);\n  const titleRef = useRef<HTMLHeadingElement>(null);\n  const [scope, animate] = useAnimate();\n  const [isPresent, safeToRemove] = usePresence();\n  const [headerHeight, setHeaderHeight] = React.useState(0);\n  const [footerHeight, setFooterHeight] = React.useState(0);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContentVisible = useIsVisible(bottomContent, 0);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemDrawer = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  // eslint-disable-next-line react-hooks/refs\n  const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;\n  const headerStyling = classNames(styles.drawer__header, headerClasses);\n  const hasFooterContent = (typeof footerContent !== 'undefined' && footerContent) || onPrimaryAction || onSecondaryAction;\n\n  useFocusTrap(containerRef, true);\n  useReturnFocusOnUnmount(containerRef);\n  useOutsideEvent(containerRef, () => {\n    if (onRequestClose) onRequestClose();\n  });\n  useKeyboardEvent(containerRef, () => onRequestClose && onRequestClose(), [KeyboardEventKey.Escape]);\n\n  // Close animasjon, vi kaller `onClose()` til slutt\n  const closeDrawer = (): void => {\n    if (!overlayRef.current || !containerRef.current) return;\n\n    animate(overlayRef.current, { opacity: 0, pointerEvents: 'none' }, { duration: 0.3, ease: 'easeInOut' });\n\n    if (isMobile) {\n      animate(\n        containerRef.current,\n        { y: '100%' },\n        {\n          duration: 0.3,\n          ease: 'easeInOut',\n          onComplete: () => {\n            if (safeToRemove) safeToRemove();\n          },\n        }\n      );\n    } else {\n      animate(\n        containerRef.current,\n        { x: desktopDirection === 'left' ? '-100%' : '100%' },\n        {\n          duration: 0.3,\n          ease: 'easeInOut',\n          onComplete: () => {\n            if (safeToRemove) safeToRemove();\n          },\n        }\n      );\n    }\n  };\n\n  useEffect(() => {\n    containerRef.current?.focus();\n    disableBodyScroll();\n\n    return (): void => {\n      enableBodyScroll();\n    };\n  }, []);\n\n  // Measure header and footer heights\n  useEffect(() => {\n    const updateHeights = (): void => {\n      if (headerRef.current) {\n        setHeaderHeight(headerRef.current.offsetHeight);\n      }\n      if (footerRef.current) {\n        setFooterHeight(footerRef.current.offsetHeight);\n      }\n    };\n\n    updateHeights();\n\n    // Update heights when content changes\n    const resizeObserver = new ResizeObserver(updateHeights);\n    if (headerRef.current) {\n      resizeObserver.observe(headerRef.current);\n    }\n    if (footerRef.current) {\n      resizeObserver.observe(footerRef.current);\n    }\n\n    return (): void => {\n      resizeObserver.disconnect();\n    };\n  }, [hasFooterContent]);\n\n  // Open animation.\n  useEffect(() => {\n    if (!overlayRef.current || !containerRef.current) return;\n\n    if (!isPresent) {\n      closeDrawer();\n      return;\n    }\n\n    if (isMobile) {\n      animate(containerRef.current, { y: '0' }, { duration: 0.3, ease: 'easeInOut' });\n    } else {\n      animate(containerRef.current, { x: '0' }, { duration: 0.3, ease: 'easeInOut' });\n    }\n\n    animate(overlayRef.current, { opacity: 1, pointerEvents: 'auto' }, { duration: 0.3, ease: 'easeInOut' });\n  }, [isPresent]);\n\n  const handleCTA = (callback?: () => void): void => {\n    if (callback) {\n      callback();\n    }\n  };\n\n  useEffect(() => {\n    titleRef.current?.focus();\n  }, [title]);\n\n  return (\n    <div className={styles.drawer} ref={scope} style={{ zIndex }} data-analyticsid={AnalyticsId.Drawer}>\n      <div className={styles.drawer__overlay} ref={overlayRef} aria-hidden=\"true\" />\n      <div\n        className={classNames(styles.drawer__container, {\n          [styles['drawer__container--right']]: desktopDirection === 'right',\n        })}\n        ref={containerRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabIndex={-1}\n        {...ariaLabelAttributes}\n      >\n        <div className={styles.drawer__container__inner}>\n          <div className={headerStyling} ref={headerRef}>\n            <Title\n              id={ariaLabelAttributes?.['aria-labelledby']}\n              className={styles['drawer__header__title']}\n              htmlMarkup={titleHtmlMarkup}\n              appearance=\"title3\"\n              ref={titleRef}\n              tabIndex={-1}\n            >\n              {title}\n            </Title>\n            {withBackButton && onRequestBack !== undefined && (\n              <Button\n                ariaLabel={mergedResources.ariaLabelBackButton}\n                onClick={onRequestBack}\n                variant=\"borderless\"\n                wrapperClassName={styles['drawer__header__back-button']}\n              >\n                <Icon svgIcon={ChevronLeft} />\n              </Button>\n            )}\n            {!noCloseButton && onRequestClose != undefined && (\n              <Close\n                ariaLabel={mergedResources.ariaLabelCloseBtn}\n                color={closeColor}\n                onClick={onRequestClose}\n                className={styles['drawer__header__close-button']}\n              />\n            )}\n          </div>\n          <div\n            className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--top'])}\n            style={{\n              opacity: !topContentVisible && contentIsScrollable ? 1 : 0,\n              top: headerHeight,\n            }}\n          />\n          <div\n            className={classNames(styles.drawer__content, contentClassName)}\n            tabIndex={contentIsScrollable ? 0 : undefined}\n            role={contentIsScrollable ? 'region' : undefined}\n            {...(contentIsScrollable ? ariaLabelAttributes : {})}\n            ref={contentRef}\n          >\n            <div ref={topContent} />\n            <div className={styles['drawer__content__children']}>{children}</div>\n            <div ref={bottomContent} style={{ height: '1px' }} />\n          </div>\n          <div\n            className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--bottom'])}\n            style={{\n              opacity: !bottomContentVisible && contentIsScrollable ? 1 : 0,\n              bottom: hasFooterContent ? footerHeight : 0,\n            }}\n          />\n        </div>\n        {hasFooterContent && (\n          <div className={styles.drawer__footer} ref={footerRef}>\n            {footerContent ? (\n              footerContent\n            ) : (\n              <>\n                {onPrimaryAction && <Button onClick={() => handleCTA(onPrimaryAction)}>{primaryActionText}</Button>}\n                {onSecondaryAction && (\n                  <Button variant=\"borderless\" onClick={() => handleCTA(onSecondaryAction)}>\n                    {secondaryActionText}\n                  </Button>\n                )}\n              </>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Drawer;\n","import Drawer from './Drawer';\nexport * from './Drawer';\nexport default Drawer;\n"],"mappings":"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"}

package/lib/DrawerNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerNavigation.js","names":[],"sources":["../src/components/Filter/DrawerNavigation/useDrawerNavigation.ts","../src/components/Filter/DrawerNavigation/DrawerNavigation.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport interface NavigateProps<ViewId extends string = string> {\n  goToView: (id: ViewId) => void;\n  goBack: () => void;\n  goToViewAndClearStack: (id: ViewId) => void;\n}\n\nexport const DrawerNavigationContext = createContext<NavigateProps | null>(null);\n\nexport function useDrawerNavigation<ViewId extends string = string>(): NavigateProps<ViewId> {\n  const context = useContext(DrawerNavigationContext);\n  if (!context) {\n    throw new Error('useDrawerNavigation must be used inside a <DrawerNavigation> component');\n  }\n  return context as NavigateProps<ViewId>;\n}\n","import type React from 'react';\nimport { Children, isValidElement, useCallback, useMemo, useState } from 'react';\n\nimport { type NavigateProps, DrawerNavigationContext } from './useDrawerNavigation';\nimport Drawer from '../../Drawer';\n\nexport interface DrawerViewProps<ViewId extends string = string> {\n  /** Id for the view. Important for navigation */\n  id: ViewId;\n  /** Title used for Drawer in current view */\n  title: string;\n  /** Mark this view as the home/default view */\n  home?: boolean;\n  /** Content inside the drawer for this view */\n  children: React.ReactNode;\n  /** Default onClose callback for drawer. Will override onCloseButton on parent */\n  onCloseButton?: () => void;\n  /** Content sent to footer section of Drawer. Will override footer on parent */\n  footer?: React.ReactNode;\n  /** Classname set on the content inside Drawer */\n  drawerContentClassname?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction DrawerView<ViewId extends string>(_props: DrawerViewProps<ViewId>): React.ReactNode {\n  // DrawerView is never rendered directly — DrawerNavigation reads its props\n  return null;\n}\n\nexport interface DrawerNavigationProps {\n  /** Views and other children components inside the Drawer navigation. Views are put in stack */\n  children: React.ReactNode;\n  /** Is drawer open or closed */\n  isOpen: boolean;\n  /** Navigate to this view when the drawer opens. Defaults to home view. */\n  initialView?: string;\n  /** Default onClose callback for drawer. View onCloseButton callback will override this. */\n  onCloseButton?: () => void;\n  /** Content sent to footer section of Drawer. View footer will override this */\n  footer?: React.ReactNode;\n}\n\nfunction parseChildren(children: React.ReactNode): { views: DrawerViewProps[]; other: React.ReactNode[] } {\n  const views: DrawerViewProps[] = [];\n  const other: React.ReactNode[] = [];\n  Children.forEach(children, child => {\n    if (isValidElement<DrawerViewProps>(child) && child.type === DrawerView) {\n      views.push({\n        id: child.props.id,\n        title: child.props.title,\n        home: child.props.home,\n        children: child.props.children,\n        onCloseButton: child.props.onCloseButton,\n        footer: child.props.footer,\n        drawerContentClassname: child.props.drawerContentClassname,\n      });\n    } else {\n      /** Added possibility of other children to support Modals that need navigation context */\n      other.push(child);\n    }\n  });\n  return { views, other };\n}\n\nfunction DrawerNavigation({ children, isOpen, initialView, onCloseButton, footer }: DrawerNavigationProps): React.ReactNode {\n  const { views, other } = useMemo(() => parseChildren(children), [children]);\n\n  const homeView = views.find(v => v.home) ?? views[0];\n  const [viewStack, setViewStack] = useState<string[]>([homeView?.id]);\n\n  const goToView = useCallback(\n    (id: string): void => {\n      if (views.some(v => v.id === id)) {\n        setViewStack(stack => [...stack, id]);\n      }\n    },\n    [views]\n  );\n\n  const goBack = useCallback((): void => {\n    setViewStack(stack => (stack.length > 1 ? stack.slice(0, -1) : stack));\n  }, []);\n\n  const goToViewAndClearStack = useCallback(\n    (id: string): void => {\n      if (views.some(v => v.id === id)) {\n        setViewStack(id === homeView?.id ? [homeView.id] : [homeView?.id, id]);\n      }\n    },\n    [views, homeView]\n  );\n\n  const currentViewId = viewStack[viewStack.length - 1];\n  const currentView = views.find(v => v.id === currentViewId);\n\n  const navigate = useMemo<NavigateProps>(() => ({ goBack, goToView, goToViewAndClearStack }), [goBack, goToView, goToViewAndClearStack]);\n\n  const [prevIsOpen, setPrevIsOpen] = useState(isOpen);\n  if (prevIsOpen !== isOpen) {\n    setPrevIsOpen(isOpen);\n    if (!isOpen) {\n      setViewStack([homeView?.id]);\n    } else if (initialView && views.some(v => v.id === initialView)) {\n      setViewStack(initialView === homeView?.id ? [homeView.id] : [homeView?.id, initialView]);\n    }\n  }\n\n  return (\n    <DrawerNavigationContext.Provider value={navigate}>\n      <Drawer\n        isOpen={isOpen}\n        title={currentView?.title ?? 'Filter'}\n        withBackButton={viewStack.length > 1}\n        onRequestBack={goBack}\n        onRequestClose={currentView?.onCloseButton ?? onCloseButton}\n        footerContent={currentView?.footer ?? footer}\n        contentClassName={currentView?.drawerContentClassname}\n      >\n        {currentView?.children}\n      </Drawer>\n      {other}\n    </DrawerNavigationContext.Provider>\n  );\n}\n\nDrawerNavigation.View = DrawerView;\n\nexport default DrawerNavigation;\n"],"mappings":";;;;AAQA,IAAa,0BAA0B,cAAoC,KAAK;AAEhF,SAAgB,sBAA6E;CAC3F,MAAM,UAAU,WAAW,wBAAwB;CACnD,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,yEAAyE;CAE3F,OAAO;;;;ACST,SAAS,WAAkC,QAAkD;CAE3F,OAAO;;AAgBT,SAAS,cAAc,UAAmF;CACxG,MAAM,QAA2B,EAAE;CACnC,MAAM,QAA2B,EAAE;CACnC,SAAS,QAAQ,WAAU,UAAS;EAClC,IAAI,eAAgC,MAAM,IAAI,MAAM,SAAS,YAC3D,MAAM,KAAK;GACT,IAAI,MAAM,MAAM;GAChB,OAAO,MAAM,MAAM;GACnB,MAAM,MAAM,MAAM;GAClB,UAAU,MAAM,MAAM;GACtB,eAAe,MAAM,MAAM;GAC3B,QAAQ,MAAM,MAAM;GACpB,wBAAwB,MAAM,MAAM;GACrC,CAAC;;;EAGF,MAAM,KAAK,MAAM;GAEnB;CACF,OAAO;EAAE;EAAO;EAAO;;AAGzB,SAAS,iBAAiB,EAAE,UAAU,QAAQ,aAAa,eAAe,UAAkD;CAC1H,MAAM,EAAE,OAAO,UAAU,cAAc,cAAc,SAAS,EAAE,CAAC,SAAS,CAAC;CAE3E,MAAM,WAAW,MAAM,MAAK,MAAK,EAAE,KAAK,IAAI,MAAM;CAClD,MAAM,CAAC,WAAW,gBAAgB,SAAmB,CAAC,UAAU,GAAG,CAAC;CAEpE,MAAM,WAAW,aACd,OAAqB;EACpB,IAAI,MAAM,MAAK,MAAK,EAAE,OAAO,GAAG,EAC9B,cAAa,UAAS,CAAC,GAAG,OAAO,GAAG,CAAC;IAGzC,CAAC,MAAM,CACR;CAED,MAAM,SAAS,kBAAwB;EACrC,cAAa,UAAU,MAAM,SAAS,IAAI,MAAM,MAAM,GAAG,GAAG,GAAG,MAAO;IACrE,EAAE,CAAC;CAEN,MAAM,wBAAwB,aAC3B,OAAqB;EACpB,IAAI,MAAM,MAAK,MAAK,EAAE,OAAO,GAAG,EAC9B,aAAa,OAAO,UAAU,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC,UAAU,IAAI,GAAG,CAAC;IAG1E,CAAC,OAAO,SAAS,CAClB;CAED,MAAM,gBAAgB,UAAU,UAAU,SAAS;CACnD,MAAM,cAAc,MAAM,MAAK,MAAK,EAAE,OAAO,cAAc;CAE3D,MAAM,WAAW,eAA8B;EAAE;EAAQ;EAAU;EAAuB,GAAG;EAAC;EAAQ;EAAU;EAAsB,CAAC;CAEvI,MAAM,CAAC,YAAY,iBAAiB,SAAS,OAAO;CACpD,IAAI,eAAe,QAAQ;EACzB,cAAc,OAAO;EACrB,IAAI,CAAC,QACH,aAAa,CAAC,UAAU,GAAG,CAAC;OACvB,IAAI,eAAe,MAAM,MAAK,MAAK,EAAE,OAAO,YAAY,EAC7D,aAAa,gBAAgB,UAAU,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC,UAAU,IAAI,YAAY,CAAC;;CAI5F,OACE,qBAAC,wBAAwB,UAAzB;EAAkC,OAAO;YAAzC,CACE,oBAAC,gBAAD;GACU;GACR,OAAO,aAAa,SAAS;GAC7B,gBAAgB,UAAU,SAAS;GACnC,eAAe;GACf,gBAAgB,aAAa,iBAAiB;GAC9C,eAAe,aAAa,UAAU;GACtC,kBAAkB,aAAa;aAE9B,aAAa;GACP,CAAA,EACR,MACgC;;;AAIvC,iBAAiB,OAAO"}
+{"version":3,"file":"DrawerNavigation.js","names":[],"sources":["../src/components/Filter/DrawerNavigation/useDrawerNavigation.ts","../src/components/Filter/DrawerNavigation/DrawerNavigation.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport interface NavigateProps<ViewId extends string = string> {\n  goToView: (id: ViewId) => void;\n  goBack: () => void;\n  goToViewAndClearStack: (id: ViewId) => void;\n}\n\nexport const DrawerNavigationContext = createContext<NavigateProps | null>(null);\n\nexport function useDrawerNavigation<ViewId extends string = string>(): NavigateProps<ViewId> {\n  const context = useContext(DrawerNavigationContext);\n  if (!context) {\n    throw new Error('useDrawerNavigation must be used inside a <DrawerNavigation> component');\n  }\n  return context as NavigateProps<ViewId>;\n}\n","import type React from 'react';\nimport { Children, isValidElement, useCallback, useMemo, useState } from 'react';\n\nimport { type NavigateProps, DrawerNavigationContext } from './useDrawerNavigation';\nimport Drawer from '../../Drawer';\n\nexport interface DrawerViewProps<ViewId extends string = string> {\n  /** Id for the view. Important for navigation */\n  id: ViewId;\n  /** Title used for Drawer in current view */\n  title: string;\n  /** Mark this view as the home/default view */\n  home?: boolean;\n  /** Content inside the drawer for this view */\n  children: React.ReactNode;\n  /** Default onClose callback for drawer. Will override onCloseButton on parent */\n  onCloseButton?: () => void;\n  /** Content sent to footer section of Drawer. Will override footer on parent */\n  footer?: React.ReactNode;\n  /** Classname set on the content inside Drawer */\n  drawerContentClassname?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction DrawerView<ViewId extends string>(_props: DrawerViewProps<ViewId>): React.ReactNode {\n  // DrawerView is never rendered directly — DrawerNavigation reads its props\n  return null;\n}\n\nexport interface DrawerNavigationProps {\n  /** Views and other children components inside the Drawer navigation. Views are put in stack */\n  children: React.ReactNode;\n  /** Is drawer open or closed */\n  isOpen: boolean;\n  /** Navigate to this view when the drawer opens. Defaults to home view. */\n  initialView?: string;\n  /** Default onClose callback for drawer. View onCloseButton callback will override this. */\n  onCloseButton?: () => void;\n  /** Content sent to footer section of Drawer. View footer will override this */\n  footer?: React.ReactNode;\n}\n\nfunction parseChildren(children: React.ReactNode): { views: DrawerViewProps[]; other: React.ReactNode[] } {\n  const views: DrawerViewProps[] = [];\n  const other: React.ReactNode[] = [];\n  Children.forEach(children, child => {\n    if (isValidElement<DrawerViewProps>(child) && child.type === DrawerView) {\n      views.push({\n        id: child.props.id,\n        title: child.props.title,\n        home: child.props.home,\n        children: child.props.children,\n        onCloseButton: child.props.onCloseButton,\n        footer: child.props.footer,\n        drawerContentClassname: child.props.drawerContentClassname,\n      });\n    } else {\n      /** Added possibility of other children to support Modals that need navigation context */\n      other.push(child);\n    }\n  });\n  return { views, other };\n}\n\nfunction DrawerNavigation({ children, isOpen, initialView, onCloseButton, footer }: DrawerNavigationProps): React.ReactNode {\n  const { views, other } = useMemo(() => parseChildren(children), [children]);\n\n  const homeView = views.find(v => v.home) ?? views[0];\n  const [viewStack, setViewStack] = useState<string[]>([homeView?.id]);\n\n  const goToView = useCallback(\n    (id: string): void => {\n      if (views.some(v => v.id === id)) {\n        setViewStack(stack => [...stack, id]);\n      }\n    },\n    [views]\n  );\n\n  const goBack = useCallback((): void => {\n    setViewStack(stack => (stack.length > 1 ? stack.slice(0, -1) : stack));\n  }, []);\n\n  const goToViewAndClearStack = useCallback(\n    (id: string): void => {\n      if (views.some(v => v.id === id)) {\n        setViewStack(id === homeView?.id ? [homeView.id] : [homeView?.id, id]);\n      }\n    },\n    [views, homeView]\n  );\n\n  const currentViewId = viewStack[viewStack.length - 1];\n  const currentView = views.find(v => v.id === currentViewId);\n\n  const navigate = useMemo<NavigateProps>(() => ({ goBack, goToView, goToViewAndClearStack }), [goBack, goToView, goToViewAndClearStack]);\n\n  const [prevIsOpen, setPrevIsOpen] = useState(isOpen);\n  if (prevIsOpen !== isOpen) {\n    setPrevIsOpen(isOpen);\n    if (!isOpen) {\n      setViewStack([homeView?.id]);\n    } else if (initialView && views.some(v => v.id === initialView)) {\n      setViewStack(initialView === homeView?.id ? [homeView.id] : [homeView?.id, initialView]);\n    }\n  }\n\n  return (\n    <DrawerNavigationContext.Provider value={navigate}>\n      <Drawer\n        isOpen={isOpen}\n        title={currentView?.title ?? 'Filter'}\n        withBackButton={viewStack.length > 1}\n        onRequestBack={goBack}\n        onRequestClose={currentView?.onCloseButton ?? onCloseButton}\n        footerContent={currentView?.footer ?? footer}\n        contentClassName={currentView?.drawerContentClassname}\n      >\n        {currentView?.children}\n      </Drawer>\n      {other}\n    </DrawerNavigationContext.Provider>\n  );\n}\n\nDrawerNavigation.View = DrawerView;\n\nexport default DrawerNavigation;\n"],"mappings":";;;;AAQA,IAAa,0BAA0B,cAAoC,IAAI;AAE/E,SAAgB,sBAA6E;CAC3F,MAAM,UAAU,WAAW,uBAAuB;CAClD,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,wEAAwE;CAE1F,OAAO;AACT;;;ACQA,SAAS,WAAkC,QAAkD;CAE3F,OAAO;AACT;AAeA,SAAS,cAAc,UAAmF;CACxG,MAAM,QAA2B,CAAC;CAClC,MAAM,QAA2B,CAAC;CAClC,SAAS,QAAQ,WAAU,UAAS;EAClC,IAAI,eAAgC,KAAK,KAAK,MAAM,SAAS,YAC3D,MAAM,KAAK;GACT,IAAI,MAAM,MAAM;GAChB,OAAO,MAAM,MAAM;GACnB,MAAM,MAAM,MAAM;GAClB,UAAU,MAAM,MAAM;GACtB,eAAe,MAAM,MAAM;GAC3B,QAAQ,MAAM,MAAM;GACpB,wBAAwB,MAAM,MAAM;EACtC,CAAC;;;EAGD,MAAM,KAAK,KAAK;CAEpB,CAAC;CACD,OAAO;EAAE;EAAO;CAAM;AACxB;AAEA,SAAS,iBAAiB,EAAE,UAAU,QAAQ,aAAa,eAAe,UAAkD;CAC1H,MAAM,EAAE,OAAO,UAAU,cAAc,cAAc,QAAQ,GAAG,CAAC,QAAQ,CAAC;CAE1E,MAAM,WAAW,MAAM,MAAK,MAAK,EAAE,IAAI,KAAK,MAAM;CAClD,MAAM,CAAC,WAAW,gBAAgB,SAAmB,CAAC,UAAU,EAAE,CAAC;CAEnE,MAAM,WAAW,aACd,OAAqB;EACpB,IAAI,MAAM,MAAK,MAAK,EAAE,OAAO,EAAE,GAC7B,cAAa,UAAS,CAAC,GAAG,OAAO,EAAE,CAAC;CAExC,GACA,CAAC,KAAK,CACR;CAEA,MAAM,SAAS,kBAAwB;EACrC,cAAa,UAAU,MAAM,SAAS,IAAI,MAAM,MAAM,GAAG,EAAE,IAAI,KAAM;CACvE,GAAG,CAAC,CAAC;CAEL,MAAM,wBAAwB,aAC3B,OAAqB;EACpB,IAAI,MAAM,MAAK,MAAK,EAAE,OAAO,EAAE,GAC7B,aAAa,OAAO,UAAU,KAAK,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,IAAI,EAAE,CAAC;CAEzE,GACA,CAAC,OAAO,QAAQ,CAClB;CAEA,MAAM,gBAAgB,UAAU,UAAU,SAAS;CACnD,MAAM,cAAc,MAAM,MAAK,MAAK,EAAE,OAAO,aAAa;CAE1D,MAAM,WAAW,eAA8B;EAAE;EAAQ;EAAU;CAAsB,IAAI;EAAC;EAAQ;EAAU;CAAqB,CAAC;CAEtI,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,IAAI,eAAe,QAAQ;EACzB,cAAc,MAAM;EACpB,IAAI,CAAC,QACH,aAAa,CAAC,UAAU,EAAE,CAAC;OACtB,IAAI,eAAe,MAAM,MAAK,MAAK,EAAE,OAAO,WAAW,GAC5D,aAAa,gBAAgB,UAAU,KAAK,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,IAAI,WAAW,CAAC;CAE3F;CAEA,OACE,qBAAC,wBAAwB,UAAzB;EAAkC,OAAO;YAAzC,CACE,oBAAC,gBAAD;GACU;GACR,OAAO,aAAa,SAAS;GAC7B,gBAAgB,UAAU,SAAS;GACnC,eAAe;GACf,gBAAgB,aAAa,iBAAiB;GAC9C,eAAe,aAAa,UAAU;GACtC,kBAAkB,aAAa;aAE9B,aAAa;EACR,CAAA,GACP,KAC+B;;AAEtC;AAEA,iBAAiB,OAAO"}

package/lib/Duolist.js.map

@@ -1 +1 @@
-{"version":3,"file":"Duolist.js","names":[],"sources":["../src/components/Duolist/Duolist.tsx","../src/components/Duolist/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { TitleProps } from '../Title';\n\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport Spacer from '../Spacer';\n\nimport duolistStyles from './styles.module.scss';\n\nexport type DuolistVariants = 'normal' | 'line';\nexport type BoldColumn = 'first' | 'second' | 'none';\nexport type Border = 'no-border' | 'border';\nexport type Formats = 'formatted' | 'non-formatted';\n\nexport interface DuolistProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Label of the Duolist */\n  border?: Border;\n  /** Label of the Duolist */\n  label?: React.ReactElement<TitleProps>;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets the visual variant of the Duolist. */\n  variant?: DuolistVariants;\n  /** Sets the content of the Duolist. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Width of the description column in percentage */\n  descriptionWidth?: number;\n  /** Use collapsed mode on columns from chosen breakpoint and below. */\n  useCollapsedFromAndBelowBreakpoint?: keyof typeof Breakpoint;\n}\n\nexport interface DuolistGroupProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Sets content of the <dd> tag. */\n  description: React.ReactNode;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets content of the <dt> tag. */\n  term: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const DuolistGroup: React.FC<DuolistGroupProps> = props => {\n  const { format = 'formatted', boldColumn = format === 'non-formatted' ? 'none' : 'first', description, separator = ': ', term } = props;\n\n  const firstBold = boldColumn === 'first';\n  const secondBold = boldColumn === 'second';\n  const nonFormatted = format === 'non-formatted';\n\n  const dtClassNames = classNames(duolistStyles['duolist__dt'], {\n    [duolistStyles['duolist__dt--bold']]: firstBold,\n    [duolistStyles['duolist__dt--non-formatted']]: nonFormatted,\n  });\n  const ddClassNames = classNames(duolistStyles['duolist__dd'], {\n    [duolistStyles['duolist__dd--bold']]: secondBold,\n    [duolistStyles['duolist__dd--non-formatted']]: nonFormatted,\n  });\n\n  const renderContent = () => {\n    return (\n      <>\n        <dt\n          data-separator={nonFormatted ? separator : undefined}\n          className={dtClassNames}\n          data-testid={props.testId && `${props.testId}-term`}\n        >\n          {term}\n        </dt>\n        <dd className={ddClassNames} data-testid={props.testId && `${props.testId}-description`}>\n          {description}\n        </dd>\n      </>\n    );\n  };\n\n  return nonFormatted ? <div>{renderContent()}</div> : <>{renderContent()}</>;\n};\n\nexport const Duolist: React.FC<DuolistProps> = props => {\n  const {\n    boldColumn,\n    border = 'no-border',\n    descriptionWidth,\n    label,\n    format = 'formatted',\n    separator,\n    variant = 'normal',\n    children,\n    className,\n    testId,\n    useCollapsedFromAndBelowBreakpoint,\n  } = props;\n\n  const hasBorder = border === 'border';\n  const hasLines = variant === 'line';\n  const extraPaddingTop = hasBorder && (label || hasLines);\n  const nonFormatted = format === 'non-formatted';\n  const breakpoint = useBreakpoint();\n  const useCollapsedMode = useCollapsedFromAndBelowBreakpoint && breakpoint <= Breakpoint[useCollapsedFromAndBelowBreakpoint];\n\n  const duolistWrapperClasses = classNames(\n    {\n      [duolistStyles['duolist-wrapper--border']]: hasBorder,\n      [duolistStyles['duolist-wrapper--extra-padding-top']]: extraPaddingTop,\n    },\n    className\n  );\n\n  const duolistClasses = classNames(duolistStyles.duolist, {\n    [duolistStyles['duolist--line']]: hasLines,\n    [duolistStyles['duolist--non-formatted']]: nonFormatted,\n    [duolistStyles['duolist--collapsed']]: useCollapsedMode,\n    [duolistStyles['duolist--not-collapsed']]: !useCollapsedMode,\n  });\n\n  const duolistColumnStyle = descriptionWidth ? descriptionWidth + '%' : 'minmax(60%, 1fr)';\n\n  return (\n    <div className={duolistWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.Duolist}>\n      {label && (\n        <>\n          {label}\n          <Spacer />\n        </>\n      )}\n      <dl\n        style={!nonFormatted ? { gridTemplateColumns: useCollapsedMode ? `1fr` : `auto ${duolistColumnStyle}` } : undefined}\n        className={duolistClasses}\n      >\n        {React.Children.map(children, (child: React.ReactNode | React.ReactElement<DuolistGroupProps>) => {\n          if (child === null || typeof child === 'undefined') return;\n          const duolistGroup = child as React.ReactElement<DuolistGroupProps>;\n          if (duolistGroup.type === DuolistGroup) {\n            return React.cloneElement(child as React.ReactElement<DuolistGroupProps>, {\n              ...duolistGroup.props,\n              boldColumn: duolistGroup.props.boldColumn ?? boldColumn,\n              format: duolistGroup.props.format ?? format,\n              separator: duolistGroup.props.separator ?? separator,\n            });\n          }\n        })}\n      </dl>\n    </div>\n  );\n};\n\nexport default Duolist;\n","import Duolist from './Duolist';\nexport * from './Duolist';\nexport default Duolist;\n"],"mappings":";;;;;;;;AAyDA,IAAa,gBAA4C,UAAS;CAChE,MAAM,EAAE,SAAS,aAAa,aAAa,WAAW,kBAAkB,SAAS,SAAS,aAAa,YAAY,MAAM,SAAS;CAElI,MAAM,YAAY,eAAe;CACjC,MAAM,aAAa,eAAe;CAClC,MAAM,eAAe,WAAW;CAEhC,MAAM,eAAe,WAAW,cAAc,gBAAgB;GAC3D,cAAc,uBAAuB;GACrC,cAAc,gCAAgC;EAChD,CAAC;CACF,MAAM,eAAe,WAAW,cAAc,gBAAgB;GAC3D,cAAc,uBAAuB;GACrC,cAAc,gCAAgC;EAChD,CAAC;CAEF,MAAM,sBAAsB;EAC1B,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;GACE,kBAAgB,eAAe,YAAY,KAAA;GAC3C,WAAW;GACX,eAAa,MAAM,UAAU,GAAG,MAAM,OAAO;aAE5C;GACE,CAAA,EACL,oBAAC,MAAD;GAAI,WAAW;GAAc,eAAa,MAAM,UAAU,GAAG,MAAM,OAAO;aACvE;GACE,CAAA,CACJ,EAAA,CAAA;;CAIP,OAAO,eAAe,oBAAC,OAAD,EAAA,UAAM,eAAe,EAAO,CAAA,GAAG,oBAAA,UAAA,EAAA,UAAG,eAAe,EAAI,CAAA;;AAG7E,IAAa,WAAkC,UAAS;CACtD,MAAM,EACJ,YACA,SAAS,aACT,kBACA,OACA,SAAS,aACT,WACA,UAAU,UACV,UACA,WACA,QACA,uCACE;CAEJ,MAAM,YAAY,WAAW;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,kBAAkB,cAAc,SAAS;CAC/C,MAAM,eAAe,WAAW;CAChC,MAAM,aAAa,eAAe;CAClC,MAAM,mBAAmB,sCAAsC,cAAc,WAAW;CAExF,MAAM,wBAAwB,WAC5B;GACG,cAAc,6BAA6B;GAC3C,cAAc,wCAAwC;EACxD,EACD,UACD;CAED,MAAM,iBAAiB,WAAW,cAAc,SAAS;GACtD,cAAc,mBAAmB;GACjC,cAAc,4BAA4B;GAC1C,cAAc,wBAAwB;GACtC,cAAc,4BAA4B,CAAC;EAC7C,CAAC;CAEF,MAAM,qBAAqB,mBAAmB,mBAAmB,MAAM;CAEvE,OACE,qBAAC,OAAD;EAAK,WAAW;EAAuB,eAAa;EAAQ,oBAAkB,YAAY;YAA1F,CACG,SACC,qBAAA,UAAA,EAAA,UAAA,CACG,OACD,oBAAC,gBAAD,EAAU,CAAA,CACT,EAAA,CAAA,EAEL,oBAAC,MAAD;GACE,OAAO,CAAC,eAAe,EAAE,qBAAqB,mBAAmB,QAAQ,QAAQ,sBAAsB,GAAG,KAAA;GAC1G,WAAW;aAEV,MAAM,SAAS,IAAI,WAAW,UAAmE;IAChG,IAAI,UAAU,QAAQ,OAAO,UAAU,aAAa;IACpD,MAAM,eAAe;IACrB,IAAI,aAAa,SAAS,cACxB,OAAO,MAAM,aAAa,OAAgD;KACxE,GAAG,aAAa;KAChB,YAAY,aAAa,MAAM,cAAc;KAC7C,QAAQ,aAAa,MAAM,UAAU;KACrC,WAAW,aAAa,MAAM,aAAa;KAC5C,CAAC;KAEJ;GACC,CAAA,CACD;;;;;AC3JV,IAAA,kBAAe"}
+{"version":3,"file":"Duolist.js","names":[],"sources":["../src/components/Duolist/Duolist.tsx","../src/components/Duolist/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { TitleProps } from '../Title';\n\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport Spacer from '../Spacer';\n\nimport duolistStyles from './styles.module.scss';\n\nexport type DuolistVariants = 'normal' | 'line';\nexport type BoldColumn = 'first' | 'second' | 'none';\nexport type Border = 'no-border' | 'border';\nexport type Formats = 'formatted' | 'non-formatted';\n\nexport interface DuolistProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Label of the Duolist */\n  border?: Border;\n  /** Label of the Duolist */\n  label?: React.ReactElement<TitleProps>;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets the visual variant of the Duolist. */\n  variant?: DuolistVariants;\n  /** Sets the content of the Duolist. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Width of the description column in percentage */\n  descriptionWidth?: number;\n  /** Use collapsed mode on columns from chosen breakpoint and below. */\n  useCollapsedFromAndBelowBreakpoint?: keyof typeof Breakpoint;\n}\n\nexport interface DuolistGroupProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Sets content of the <dd> tag. */\n  description: React.ReactNode;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets content of the <dt> tag. */\n  term: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const DuolistGroup: React.FC<DuolistGroupProps> = props => {\n  const { format = 'formatted', boldColumn = format === 'non-formatted' ? 'none' : 'first', description, separator = ': ', term } = props;\n\n  const firstBold = boldColumn === 'first';\n  const secondBold = boldColumn === 'second';\n  const nonFormatted = format === 'non-formatted';\n\n  const dtClassNames = classNames(duolistStyles['duolist__dt'], {\n    [duolistStyles['duolist__dt--bold']]: firstBold,\n    [duolistStyles['duolist__dt--non-formatted']]: nonFormatted,\n  });\n  const ddClassNames = classNames(duolistStyles['duolist__dd'], {\n    [duolistStyles['duolist__dd--bold']]: secondBold,\n    [duolistStyles['duolist__dd--non-formatted']]: nonFormatted,\n  });\n\n  const renderContent = () => {\n    return (\n      <>\n        <dt\n          data-separator={nonFormatted ? separator : undefined}\n          className={dtClassNames}\n          data-testid={props.testId && `${props.testId}-term`}\n        >\n          {term}\n        </dt>\n        <dd className={ddClassNames} data-testid={props.testId && `${props.testId}-description`}>\n          {description}\n        </dd>\n      </>\n    );\n  };\n\n  return nonFormatted ? <div>{renderContent()}</div> : <>{renderContent()}</>;\n};\n\nexport const Duolist: React.FC<DuolistProps> = props => {\n  const {\n    boldColumn,\n    border = 'no-border',\n    descriptionWidth,\n    label,\n    format = 'formatted',\n    separator,\n    variant = 'normal',\n    children,\n    className,\n    testId,\n    useCollapsedFromAndBelowBreakpoint,\n  } = props;\n\n  const hasBorder = border === 'border';\n  const hasLines = variant === 'line';\n  const extraPaddingTop = hasBorder && (label || hasLines);\n  const nonFormatted = format === 'non-formatted';\n  const breakpoint = useBreakpoint();\n  const useCollapsedMode = useCollapsedFromAndBelowBreakpoint && breakpoint <= Breakpoint[useCollapsedFromAndBelowBreakpoint];\n\n  const duolistWrapperClasses = classNames(\n    {\n      [duolistStyles['duolist-wrapper--border']]: hasBorder,\n      [duolistStyles['duolist-wrapper--extra-padding-top']]: extraPaddingTop,\n    },\n    className\n  );\n\n  const duolistClasses = classNames(duolistStyles.duolist, {\n    [duolistStyles['duolist--line']]: hasLines,\n    [duolistStyles['duolist--non-formatted']]: nonFormatted,\n    [duolistStyles['duolist--collapsed']]: useCollapsedMode,\n    [duolistStyles['duolist--not-collapsed']]: !useCollapsedMode,\n  });\n\n  const duolistColumnStyle = descriptionWidth ? descriptionWidth + '%' : 'minmax(60%, 1fr)';\n\n  return (\n    <div className={duolistWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.Duolist}>\n      {label && (\n        <>\n          {label}\n          <Spacer />\n        </>\n      )}\n      <dl\n        style={!nonFormatted ? { gridTemplateColumns: useCollapsedMode ? `1fr` : `auto ${duolistColumnStyle}` } : undefined}\n        className={duolistClasses}\n      >\n        {React.Children.map(children, (child: React.ReactNode | React.ReactElement<DuolistGroupProps>) => {\n          if (child === null || typeof child === 'undefined') return;\n          const duolistGroup = child as React.ReactElement<DuolistGroupProps>;\n          if (duolistGroup.type === DuolistGroup) {\n            return React.cloneElement(child as React.ReactElement<DuolistGroupProps>, {\n              ...duolistGroup.props,\n              boldColumn: duolistGroup.props.boldColumn ?? boldColumn,\n              format: duolistGroup.props.format ?? format,\n              separator: duolistGroup.props.separator ?? separator,\n            });\n          }\n        })}\n      </dl>\n    </div>\n  );\n};\n\nexport default Duolist;\n","import Duolist from './Duolist';\nexport * from './Duolist';\nexport default Duolist;\n"],"mappings":";;;;;;;;AAyDA,IAAa,gBAA4C,UAAS;CAChE,MAAM,EAAE,SAAS,aAAa,aAAa,WAAW,kBAAkB,SAAS,SAAS,aAAa,YAAY,MAAM,SAAS;CAElI,MAAM,YAAY,eAAe;CACjC,MAAM,aAAa,eAAe;CAClC,MAAM,eAAe,WAAW;CAEhC,MAAM,eAAe,WAAW,cAAc,gBAAgB;GAC3D,cAAc,uBAAuB;GACrC,cAAc,gCAAgC;CACjD,CAAC;CACD,MAAM,eAAe,WAAW,cAAc,gBAAgB;GAC3D,cAAc,uBAAuB;GACrC,cAAc,gCAAgC;CACjD,CAAC;CAED,MAAM,sBAAsB;EAC1B,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;GACE,kBAAgB,eAAe,YAAY,KAAA;GAC3C,WAAW;GACX,eAAa,MAAM,UAAU,GAAG,MAAM,OAAO;aAE5C;EACC,CAAA,GACJ,oBAAC,MAAD;GAAI,WAAW;GAAc,eAAa,MAAM,UAAU,GAAG,MAAM,OAAO;aACvE;EACC,CAAA,CACJ,EAAA,CAAA;CAEN;CAEA,OAAO,eAAe,oBAAC,OAAD,EAAA,UAAM,cAAc,EAAO,CAAA,IAAI,oBAAA,UAAA,EAAA,UAAG,cAAc,EAAI,CAAA;AAC5E;AAEA,IAAa,WAAkC,UAAS;CACtD,MAAM,EACJ,YACA,SAAS,aACT,kBACA,OACA,SAAS,aACT,WACA,UAAU,UACV,UACA,WACA,QACA,uCACE;CAEJ,MAAM,YAAY,WAAW;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,kBAAkB,cAAc,SAAS;CAC/C,MAAM,eAAe,WAAW;CAChC,MAAM,aAAa,cAAc;CACjC,MAAM,mBAAmB,sCAAsC,cAAc,WAAW;CAExF,MAAM,wBAAwB,WAC5B;GACG,cAAc,6BAA6B;GAC3C,cAAc,wCAAwC;CACzD,GACA,SACF;CAEA,MAAM,iBAAiB,WAAW,cAAc,SAAS;GACtD,cAAc,mBAAmB;GACjC,cAAc,4BAA4B;GAC1C,cAAc,wBAAwB;GACtC,cAAc,4BAA4B,CAAC;CAC9C,CAAC;CAED,MAAM,qBAAqB,mBAAmB,mBAAmB,MAAM;CAEvE,OACE,qBAAC,OAAD;EAAK,WAAW;EAAuB,eAAa;EAAQ,oBAAkB,YAAY;YAA1F,CACG,SACC,qBAAA,UAAA,EAAA,UAAA,CACG,OACD,oBAAC,gBAAD,CAAS,CAAA,CACT,EAAA,CAAA,GAEJ,oBAAC,MAAD;GACE,OAAO,CAAC,eAAe,EAAE,qBAAqB,mBAAmB,QAAQ,QAAQ,qBAAqB,IAAI,KAAA;GAC1G,WAAW;aAEV,MAAM,SAAS,IAAI,WAAW,UAAmE;IAChG,IAAI,UAAU,QAAQ,OAAO,UAAU,aAAa;IACpD,MAAM,eAAe;IACrB,IAAI,aAAa,SAAS,cACxB,OAAO,MAAM,aAAa,OAAgD;KACxE,GAAG,aAAa;KAChB,YAAY,aAAa,MAAM,cAAc;KAC7C,QAAQ,aAAa,MAAM,UAAU;KACrC,WAAW,aAAa,MAAM,aAAa;IAC7C,CAAC;GAEL,CAAC;EACC,CAAA,CACD;;AAET;;;AC7JA,IAAA,kBAAe"}

package/lib/ElementHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElementHeader.js","names":[],"sources":["../src/components/ElementHeader/utils.tsx","../src/components/ElementHeader/ElementHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { AvatarProps } from '../Avatar';\nimport type { BadgeProps } from '../Badge';\nimport type { StatusDotProps } from '../StatusDot';\n\nimport ElementHeader, { type ElementHeaderChildren, type ElementHeaderProps } from './ElementHeader';\nimport { ElementHeaderText, type ElementHeaderTextProps } from './ElementHeaderText';\nimport { StatusDotList, type StatusDotListProps } from './StatusDotList';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport Avatar from '../Avatar';\nimport Badge from '../Badge';\nimport StatusDot from '../StatusDot';\n\ntype ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ElementHeaderChildren | undefined;\n\nexport const mapChildren: ChildrenMapper = (children, isJsxChild = false) => {\n  let avatarChild: React.ReactElement<AvatarProps> | undefined;\n  const badgeChildren: React.ReactElement<BadgeProps>[] = [];\n  const statusDotChildren: React.ReactElement<StatusDotProps>[] = [];\n  let statusDotMCChild: React.ReactElement<StatusDotListProps> | undefined;\n  const elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[] = [];\n  const stringChildren: string[] = [];\n  const remainingChildren: React.ReactNode[] = [];\n\n  React.Children.forEach(children, child => {\n    if (child === null || typeof child === 'undefined') return;\n    if (isComponent<AvatarProps>(child, Avatar)) {\n      avatarChild = child;\n    } else if (isComponent<ElementHeaderTextProps>(child, ElementHeaderText)) {\n      elementHeaderTextChildren.push(child);\n    } else if (isComponent<BadgeProps>(child, Badge)) {\n      badgeChildren.push(child);\n    } else if (isComponent<StatusDotListProps>(child, StatusDotList)) {\n      statusDotMCChild = child;\n    } else if (isComponent<StatusDotProps>(child, StatusDot)) {\n      statusDotChildren.push(child);\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined ||\n    elementHeaderTextChildren.length > 0 ||\n    statusDotChildren.length > 0 ||\n    statusDotMCChild !== undefined ||\n    (badgeChildren !== undefined && stringChildren.length > 0);\n  const noRemainingRecursiveChildren =\n    remainingChildren.length === 0 ||\n    (isComponentWithChildren(remainingChildren[0]) && typeof remainingChildren[0]?.props?.children === 'undefined');\n\n  if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {\n    return {\n      avatarChild,\n      elementHeaderTextChildren: elementHeaderTextChildren,\n      badgeChildren,\n      statusDotChildren,\n      statusDotMCChild,\n      stringChildren,\n      remainingChildren,\n    };\n  }\n\n  if (isComponentWithChildren(remainingChildren[0])) {\n    return mapChildren(remainingChildren[0]?.props?.children, true);\n  }\n};\n\nexport const renderElementHeader = (\n  element: React.ReactNode,\n  options: Pick<\n    ElementHeaderProps,\n    'titleHtmlMarkup' | 'isHovered' | 'size' | 'parentType' | 'chevronIcon' | 'icon' | 'highlightText' | 'closeButton'\n  >\n): React.ReactElement | undefined => {\n  const { titleHtmlMarkup, isHovered, size, parentType, chevronIcon, icon, highlightText, closeButton } = options;\n\n  if (isComponent<ElementHeaderProps>(element, ElementHeader)) {\n    return React.cloneElement(element, {\n      chevronIcon,\n      icon,\n      isHovered,\n      size,\n      parentType,\n      highlightText,\n      closeButton,\n    });\n  }\n  if (element) {\n    return (\n      <ElementHeader\n        highlightText={highlightText}\n        titleHtmlMarkup={titleHtmlMarkup}\n        parentType={parentType}\n        chevronIcon={chevronIcon}\n        icon={icon}\n        isHovered={isHovered}\n        size={size}\n        closeButton={closeButton}\n      >\n        {element}\n      </ElementHeader>\n    );\n  }\n};\n","import React from 'react';\n\nimport cn from 'classnames';\n\nimport type { AvatarProps, AvatarType } from '../Avatar';\nimport type { BadgeProps, BadgeType } from '../Badge';\nimport type { IconProps, SvgIcon } from '../Icon';\nimport type { LazyIconProps } from '../LazyIcon';\nimport type { StatusDotProps, StatusDotType } from '../StatusDot';\nimport type { TitleTags } from '../Title';\nimport type { ElementHeaderTextProps, ElementHeaderTextType } from './ElementHeaderText/ElementHeaderText';\nimport type { StatusDotListProps, StatusDotListType } from './StatusDotList/StatusDotList';\n\nimport ElementHeaderText from './ElementHeaderText/ElementHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent } from '../../utils/component';\nimport { AvatarSize } from '../Avatar';\nimport Icon, { IconSize } from '../Icon';\nimport StatusDotList from './StatusDotList';\nimport Highlighter from '../Highlighter';\nimport LazyIcon from '../LazyIcon';\nimport { mapChildren } from './utils';\n\nimport styles from './styles.module.scss';\n\nexport type ElementHeaderSize = 'compact' | 'small' | 'medium' | 'large';\nexport type ParentType = 'linklist' | 'expanderlist';\n\nexport interface ElementHeaderType extends React.FC<ElementHeaderProps> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ElementHeaderText?: ElementHeaderTextType;\n  StatusDot?: StatusDotType;\n  StatusDotList?: StatusDotListType;\n}\n\nexport interface ElementHeaderProps {\n  /** Adds custom classes to the ElementHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ElementHeader */\n  chevronIcon?: SvgIcon;\n  /** Close button to be rendered inside of ElementHeader. This renders in place of chevronIcon */\n  closeButton?: React.ReactElement;\n  /** Children to be rendered inside of ElementHeader */\n  children: React.ReactNode;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** icon to be rendered inside of ElementHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Adjusts styling based on parent */\n  parentType?: ParentType;\n  /** Changes size of the ElementHeader. */\n  size?: ElementHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Highlights text in title. Used for search results */\n  highlightText?: string;\n}\n\nexport interface ElementHeaderChildren {\n  avatarChild?: React.ReactElement<AvatarProps>;\n  elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[];\n  badgeChildren?: React.ReactElement<BadgeProps>[];\n  statusDotChildren?: React.ReactElement<StatusDotProps>[];\n  statusDotMCChild?: React.ReactElement<StatusDotListProps>;\n  elementChild?: React.ReactElement;\n  stringChildren: string[];\n  remainingChildren: React.ReactNode[];\n}\n\nexport const ElementHeaderRoot: ElementHeaderType = props => {\n  const {\n    className = '',\n    titleHtmlMarkup = 'h2',\n    parentType = 'linklist',\n    chevronIcon,\n    closeButton,\n    children,\n    icon,\n    isHovered,\n    size,\n    testId,\n    highlightText,\n  } = props;\n  const breakpoint = useBreakpoint();\n  const showIcon = size !== 'small' && !!icon;\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n  const hasStatusDots = !!mappedChildren?.statusDotChildren?.length || !!mappedChildren?.statusDotMCChild;\n\n  const listLabelClasses = cn(styles['element-header'], { [styles['element-header--compact']]: size === 'compact' }, className);\n  const badgeContainerClasses = cn(styles['element-header__badge-container']);\n  const badgeClasses = cn(styles['element-header__badge']);\n  const statusdotContainerClasses = cn(styles['element-header__statusdot-container']);\n  const chevronClasses = cn(styles['element-header__chevron']);\n  const contentClasses = cn(styles['element-header__content'], {\n    [styles['element-header__content--element']]: !contentIsString,\n    [styles['element-header__content--compact']]: size === 'compact',\n  });\n  const iconClasses = cn(styles['element-header__icon'], { [styles['element-header__icon--with-statusdot']]: hasStatusDots });\n  const avatarClasses = cn(styles['element-header__avatar'], {});\n  const CustomTag = titleHtmlMarkup;\n  const iconPropIsIconComponent = isComponent<IconProps>(icon, Icon);\n  const iconPropIsLazyIconComponent = !iconPropIsIconComponent && isComponent<LazyIconProps>(icon, LazyIcon);\n\n  let iconComponent;\n  if (iconPropIsIconComponent) {\n    iconComponent = React.cloneElement(icon as React.ReactElement<IconProps>, {\n      size: breakpoint < Breakpoint.md ? IconSize.XSmall : IconSize.Small,\n      isHovered,\n    });\n  } else if (iconPropIsLazyIconComponent) {\n    iconComponent = React.cloneElement(icon as React.ReactElement<LazyIconProps>, {\n      size: breakpoint < Breakpoint.md ? IconSize.XSmall : IconSize.Small,\n      isHovered,\n    });\n  } else {\n    iconComponent = icon;\n  }\n\n  return (\n    <span data-testid={testId} className={listLabelClasses}>\n      {showIcon && icon && <span className={iconClasses}>{iconComponent}</span>}\n      {size !== 'small' && mappedChildren?.avatarChild && (\n        <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n      )}\n\n      <span className={contentClasses} data-hasstatusdots={hasStatusDots}>\n        {mappedChildren?.elementHeaderTextChildren}\n        {!!mappedChildren?.stringChildren.length && (\n          <CustomTag className={styles['element-header__title']}>\n            <Highlighter searchText={highlightText}>{mappedChildren.stringChildren}</Highlighter>\n          </CustomTag>\n        )}\n        <Highlighter searchText={highlightText}>{mappedChildren?.remainingChildren}</Highlighter>\n      </span>\n\n      {hasStatusDots && (\n        <span className={statusdotContainerClasses}>\n          {!!mappedChildren?.statusDotChildren && <StatusDotList>{mappedChildren.statusDotChildren}</StatusDotList>}\n          {!!mappedChildren?.statusDotMCChild && mappedChildren?.statusDotMCChild}\n        </span>\n      )}\n\n      <span className={badgeContainerClasses}>\n        {mappedChildren?.badgeChildren &&\n          mappedChildren.badgeChildren.map((badgeChild, index) => {\n            return (\n              <span key={index} className={badgeClasses} data-parenttype={parentType}>\n                {badgeChild}\n              </span>\n            );\n          })}\n      </span>\n      {chevronIcon && typeof closeButton === 'undefined' && (\n        <span className={chevronClasses} data-parenttype={parentType}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n      {closeButton && (\n        <span className={chevronClasses} data-parenttype={parentType}>\n          {closeButton}\n        </span>\n      )}\n    </span>\n  );\n};\n\ntype ElementHeaderComponent = typeof ElementHeaderRoot & {\n  Text: React.FC<ElementHeaderTextProps>;\n  StatusDotList: React.FC<StatusDotListProps>;\n};\nElementHeaderRoot.displayName = 'ElementHeader';\nconst ElementHeader = ElementHeaderRoot as ElementHeaderComponent;\nElementHeader.Text = ElementHeaderText;\nElementHeader.Text.displayName = 'ElementHeader.Text';\nElementHeader.StatusDotList = StatusDotList;\nElementHeader.StatusDotList.displayName = 'ElementHeader.StatusDotList';\n\nexport default ElementHeader;\n"],"mappings":"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"}
+{"version":3,"file":"ElementHeader.js","names":[],"sources":["../src/components/ElementHeader/utils.tsx","../src/components/ElementHeader/ElementHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { AvatarProps } from '../Avatar';\nimport type { BadgeProps } from '../Badge';\nimport type { StatusDotProps } from '../StatusDot';\n\nimport ElementHeader, { type ElementHeaderChildren, type ElementHeaderProps } from './ElementHeader';\nimport { ElementHeaderText, type ElementHeaderTextProps } from './ElementHeaderText';\nimport { StatusDotList, type StatusDotListProps } from './StatusDotList';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport Avatar from '../Avatar';\nimport Badge from '../Badge';\nimport StatusDot from '../StatusDot';\n\ntype ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ElementHeaderChildren | undefined;\n\nexport const mapChildren: ChildrenMapper = (children, isJsxChild = false) => {\n  let avatarChild: React.ReactElement<AvatarProps> | undefined;\n  const badgeChildren: React.ReactElement<BadgeProps>[] = [];\n  const statusDotChildren: React.ReactElement<StatusDotProps>[] = [];\n  let statusDotMCChild: React.ReactElement<StatusDotListProps> | undefined;\n  const elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[] = [];\n  const stringChildren: string[] = [];\n  const remainingChildren: React.ReactNode[] = [];\n\n  React.Children.forEach(children, child => {\n    if (child === null || typeof child === 'undefined') return;\n    if (isComponent<AvatarProps>(child, Avatar)) {\n      avatarChild = child;\n    } else if (isComponent<ElementHeaderTextProps>(child, ElementHeaderText)) {\n      elementHeaderTextChildren.push(child);\n    } else if (isComponent<BadgeProps>(child, Badge)) {\n      badgeChildren.push(child);\n    } else if (isComponent<StatusDotListProps>(child, StatusDotList)) {\n      statusDotMCChild = child;\n    } else if (isComponent<StatusDotProps>(child, StatusDot)) {\n      statusDotChildren.push(child);\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined ||\n    elementHeaderTextChildren.length > 0 ||\n    statusDotChildren.length > 0 ||\n    statusDotMCChild !== undefined ||\n    (badgeChildren !== undefined && stringChildren.length > 0);\n  const noRemainingRecursiveChildren =\n    remainingChildren.length === 0 ||\n    (isComponentWithChildren(remainingChildren[0]) && typeof remainingChildren[0]?.props?.children === 'undefined');\n\n  if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {\n    return {\n      avatarChild,\n      elementHeaderTextChildren: elementHeaderTextChildren,\n      badgeChildren,\n      statusDotChildren,\n      statusDotMCChild,\n      stringChildren,\n      remainingChildren,\n    };\n  }\n\n  if (isComponentWithChildren(remainingChildren[0])) {\n    return mapChildren(remainingChildren[0]?.props?.children, true);\n  }\n};\n\nexport const renderElementHeader = (\n  element: React.ReactNode,\n  options: Pick<\n    ElementHeaderProps,\n    'titleHtmlMarkup' | 'isHovered' | 'size' | 'parentType' | 'chevronIcon' | 'icon' | 'highlightText' | 'closeButton'\n  >\n): React.ReactElement | undefined => {\n  const { titleHtmlMarkup, isHovered, size, parentType, chevronIcon, icon, highlightText, closeButton } = options;\n\n  if (isComponent<ElementHeaderProps>(element, ElementHeader)) {\n    return React.cloneElement(element, {\n      chevronIcon,\n      icon,\n      isHovered,\n      size,\n      parentType,\n      highlightText,\n      closeButton,\n    });\n  }\n  if (element) {\n    return (\n      <ElementHeader\n        highlightText={highlightText}\n        titleHtmlMarkup={titleHtmlMarkup}\n        parentType={parentType}\n        chevronIcon={chevronIcon}\n        icon={icon}\n        isHovered={isHovered}\n        size={size}\n        closeButton={closeButton}\n      >\n        {element}\n      </ElementHeader>\n    );\n  }\n};\n","import React from 'react';\n\nimport cn from 'classnames';\n\nimport type { AvatarProps, AvatarType } from '../Avatar';\nimport type { BadgeProps, BadgeType } from '../Badge';\nimport type { IconProps, SvgIcon } from '../Icon';\nimport type { LazyIconProps } from '../LazyIcon';\nimport type { StatusDotProps, StatusDotType } from '../StatusDot';\nimport type { TitleTags } from '../Title';\nimport type { ElementHeaderTextProps, ElementHeaderTextType } from './ElementHeaderText/ElementHeaderText';\nimport type { StatusDotListProps, StatusDotListType } from './StatusDotList/StatusDotList';\n\nimport ElementHeaderText from './ElementHeaderText/ElementHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent } from '../../utils/component';\nimport { AvatarSize } from '../Avatar';\nimport Icon, { IconSize } from '../Icon';\nimport StatusDotList from './StatusDotList';\nimport Highlighter from '../Highlighter';\nimport LazyIcon from '../LazyIcon';\nimport { mapChildren } from './utils';\n\nimport styles from './styles.module.scss';\n\nexport type ElementHeaderSize = 'compact' | 'small' | 'medium' | 'large';\nexport type ParentType = 'linklist' | 'expanderlist';\n\nexport interface ElementHeaderType extends React.FC<ElementHeaderProps> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ElementHeaderText?: ElementHeaderTextType;\n  StatusDot?: StatusDotType;\n  StatusDotList?: StatusDotListType;\n}\n\nexport interface ElementHeaderProps {\n  /** Adds custom classes to the ElementHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ElementHeader */\n  chevronIcon?: SvgIcon;\n  /** Close button to be rendered inside of ElementHeader. This renders in place of chevronIcon */\n  closeButton?: React.ReactElement;\n  /** Children to be rendered inside of ElementHeader */\n  children: React.ReactNode;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** icon to be rendered inside of ElementHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Adjusts styling based on parent */\n  parentType?: ParentType;\n  /** Changes size of the ElementHeader. */\n  size?: ElementHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Highlights text in title. Used for search results */\n  highlightText?: string;\n}\n\nexport interface ElementHeaderChildren {\n  avatarChild?: React.ReactElement<AvatarProps>;\n  elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[];\n  badgeChildren?: React.ReactElement<BadgeProps>[];\n  statusDotChildren?: React.ReactElement<StatusDotProps>[];\n  statusDotMCChild?: React.ReactElement<StatusDotListProps>;\n  elementChild?: React.ReactElement;\n  stringChildren: string[];\n  remainingChildren: React.ReactNode[];\n}\n\nexport const ElementHeaderRoot: ElementHeaderType = props => {\n  const {\n    className = '',\n    titleHtmlMarkup = 'h2',\n    parentType = 'linklist',\n    chevronIcon,\n    closeButton,\n    children,\n    icon,\n    isHovered,\n    size,\n    testId,\n    highlightText,\n  } = props;\n  const breakpoint = useBreakpoint();\n  const showIcon = size !== 'small' && !!icon;\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n  const hasStatusDots = !!mappedChildren?.statusDotChildren?.length || !!mappedChildren?.statusDotMCChild;\n\n  const listLabelClasses = cn(styles['element-header'], { [styles['element-header--compact']]: size === 'compact' }, className);\n  const badgeContainerClasses = cn(styles['element-header__badge-container']);\n  const badgeClasses = cn(styles['element-header__badge']);\n  const statusdotContainerClasses = cn(styles['element-header__statusdot-container']);\n  const chevronClasses = cn(styles['element-header__chevron']);\n  const contentClasses = cn(styles['element-header__content'], {\n    [styles['element-header__content--element']]: !contentIsString,\n    [styles['element-header__content--compact']]: size === 'compact',\n  });\n  const iconClasses = cn(styles['element-header__icon'], { [styles['element-header__icon--with-statusdot']]: hasStatusDots });\n  const avatarClasses = cn(styles['element-header__avatar'], {});\n  const CustomTag = titleHtmlMarkup;\n  const iconPropIsIconComponent = isComponent<IconProps>(icon, Icon);\n  const iconPropIsLazyIconComponent = !iconPropIsIconComponent && isComponent<LazyIconProps>(icon, LazyIcon);\n\n  let iconComponent;\n  if (iconPropIsIconComponent) {\n    iconComponent = React.cloneElement(icon as React.ReactElement<IconProps>, {\n      size: breakpoint < Breakpoint.md ? IconSize.XSmall : IconSize.Small,\n      isHovered,\n    });\n  } else if (iconPropIsLazyIconComponent) {\n    iconComponent = React.cloneElement(icon as React.ReactElement<LazyIconProps>, {\n      size: breakpoint < Breakpoint.md ? IconSize.XSmall : IconSize.Small,\n      isHovered,\n    });\n  } else {\n    iconComponent = icon;\n  }\n\n  return (\n    <span data-testid={testId} className={listLabelClasses}>\n      {showIcon && icon && <span className={iconClasses}>{iconComponent}</span>}\n      {size !== 'small' && mappedChildren?.avatarChild && (\n        <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n      )}\n\n      <span className={contentClasses} data-hasstatusdots={hasStatusDots}>\n        {mappedChildren?.elementHeaderTextChildren}\n        {!!mappedChildren?.stringChildren.length && (\n          <CustomTag className={styles['element-header__title']}>\n            <Highlighter searchText={highlightText}>{mappedChildren.stringChildren}</Highlighter>\n          </CustomTag>\n        )}\n        <Highlighter searchText={highlightText}>{mappedChildren?.remainingChildren}</Highlighter>\n      </span>\n\n      {hasStatusDots && (\n        <span className={statusdotContainerClasses}>\n          {!!mappedChildren?.statusDotChildren && <StatusDotList>{mappedChildren.statusDotChildren}</StatusDotList>}\n          {!!mappedChildren?.statusDotMCChild && mappedChildren?.statusDotMCChild}\n        </span>\n      )}\n\n      <span className={badgeContainerClasses}>\n        {mappedChildren?.badgeChildren &&\n          mappedChildren.badgeChildren.map((badgeChild, index) => {\n            return (\n              <span key={index} className={badgeClasses} data-parenttype={parentType}>\n                {badgeChild}\n              </span>\n            );\n          })}\n      </span>\n      {chevronIcon && typeof closeButton === 'undefined' && (\n        <span className={chevronClasses} data-parenttype={parentType}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n      {closeButton && (\n        <span className={chevronClasses} data-parenttype={parentType}>\n          {closeButton}\n        </span>\n      )}\n    </span>\n  );\n};\n\ntype ElementHeaderComponent = typeof ElementHeaderRoot & {\n  Text: React.FC<ElementHeaderTextProps>;\n  StatusDotList: React.FC<StatusDotListProps>;\n};\nElementHeaderRoot.displayName = 'ElementHeader';\nconst ElementHeader = ElementHeaderRoot as ElementHeaderComponent;\nElementHeader.Text = ElementHeaderText;\nElementHeader.Text.displayName = 'ElementHeader.Text';\nElementHeader.StatusDotList = StatusDotList;\nElementHeader.StatusDotList.displayName = 'ElementHeader.StatusDotList';\n\nexport default ElementHeader;\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,IAAa,eAA+B,UAAU,aAAa,UAAU;CAC3E,IAAI;CACJ,MAAM,gBAAkD,CAAC;CACzD,MAAM,oBAA0D,CAAC;CACjE,IAAI;CACJ,MAAM,4BAA0E,CAAC;CACjF,MAAM,iBAA2B,CAAC;CAClC,MAAM,oBAAuC,CAAC;CAE9C,MAAM,SAAS,QAAQ,WAAU,UAAS;EACxC,IAAI,UAAU,QAAQ,OAAO,UAAU,aAAa;EACpD,IAAI,YAAyB,OAAO,cAAM,GACxC,cAAc;OACT,IAAI,YAAoC,OAAO,iBAAiB,GACrE,0BAA0B,KAAK,KAAK;OAC/B,IAAI,YAAwB,OAAO,aAAK,GAC7C,cAAc,KAAK,KAAK;OACnB,IAAI,YAAgC,OAAO,aAAa,GAC7D,mBAAmB;OACd,IAAI,YAA4B,OAAO,iBAAS,GACrD,kBAAkB,KAAK,KAAK;OACvB,IAAI,OAAO,UAAU,UAC1B,eAAe,KAAK,KAAK;OAEzB,kBAAkB,KAAK,KAAK;CAEhC,CAAC;CAID,MAAM,qBACJ,gBAAgB,KAAA,KAChB,0BAA0B,SAAS,KACnC,kBAAkB,SAAS,KAC3B,qBAAqB,KAAA,KACpB,kBAAkB,KAAA,KAAa,eAAe,SAAS;CAC1D,MAAM,+BACJ,kBAAkB,WAAW,KAC5B,wBAAwB,kBAAkB,EAAE,KAAK,OAAO,kBAAkB,IAAI,OAAO,aAAa;CAErG,IAAI,cAAc,sBAAsB,8BACtC,OAAO;EACL;EAC2B;EAC3B;EACA;EACA;EACA;EACA;CACF;CAGF,IAAI,wBAAwB,kBAAkB,EAAE,GAC9C,OAAO,YAAY,kBAAkB,IAAI,OAAO,UAAU,IAAI;AAElE;AAEA,IAAa,uBACX,SACA,YAImC;CACnC,MAAM,EAAE,iBAAiB,WAAW,MAAM,YAAY,aAAa,MAAM,eAAe,gBAAgB;CAExG,IAAI,YAAgC,SAAS,aAAa,GACxD,OAAO,MAAM,aAAa,SAAS;EACjC;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAEH,IAAI,SACF,OACE,oBAAC,eAAD;EACiB;EACE;EACL;EACC;EACP;EACK;EACL;EACO;YAEZ;CACY,CAAA;AAGrB;;;ACrCA,IAAa,qBAAuC,UAAS;CAC3D,MAAM,EACJ,YAAY,IACZ,kBAAkB,MAClB,aAAa,YACb,aACA,aACA,UACA,MACA,WACA,MACA,QACA,kBACE;CACJ,MAAM,aAAa,cAAc;CACjC,MAAM,WAAW,SAAS,WAAW,CAAC,CAAC;CACvC,MAAM,kBAAkB,OAAO,aAAa;CAC5C,MAAM,iBAAiB,YAAY,QAAQ;CAC3C,MAAM,gBAAgB,CAAC,CAAC,gBAAgB,mBAAmB,UAAU,CAAC,CAAC,gBAAgB;CAEvF,MAAM,mBAAmB,WAAG,OAAO,mBAAmB,GAAG,OAAO,6BAA6B,SAAS,UAAU,GAAG,SAAS;CAC5H,MAAM,wBAAwB,WAAG,OAAO,kCAAkC;CAC1E,MAAM,eAAe,WAAG,OAAO,wBAAwB;CACvD,MAAM,4BAA4B,WAAG,OAAO,sCAAsC;CAClF,MAAM,iBAAiB,WAAG,OAAO,0BAA0B;CAC3D,MAAM,iBAAiB,WAAG,OAAO,4BAA4B;GAC1D,OAAO,sCAAsC,CAAC;GAC9C,OAAO,sCAAsC,SAAS;CACzD,CAAC;CACD,MAAM,cAAc,WAAG,OAAO,yBAAyB,GAAG,OAAO,0CAA0C,cAAc,CAAC;CAC1H,MAAM,gBAAgB,WAAG,OAAO,2BAA2B,CAAC,CAAC;CAC7D,MAAM,YAAY;CAClB,MAAM,0BAA0B,YAAuB,MAAM,YAAI;CACjE,MAAM,8BAA8B,CAAC,2BAA2B,YAA2B,MAAM,gBAAQ;CAEzG,IAAI;CACJ,IAAI,yBACF,gBAAgB,MAAM,aAAa,MAAuC;EACxE,MAAM,aAAa,WAAW,KAAK,SAAS,SAAS,SAAS;EAC9D;CACF,CAAC;MACI,IAAI,6BACT,gBAAgB,MAAM,aAAa,MAA2C;EAC5E,MAAM,aAAa,WAAW,KAAK,SAAS,SAAS,SAAS;EAC9D;CACF,CAAC;MAED,gBAAgB;CAGlB,OACE,qBAAC,QAAD;EAAM,eAAa;EAAQ,WAAW;YAAtC;GACG,YAAY,QAAQ,oBAAC,QAAD;IAAM,WAAW;cAAc;GAAoB,CAAA;GACvE,SAAS,WAAW,gBAAgB,eACnC,oBAAC,QAAD;IAAM,WAAW;cAAgB,MAAM,aAAa,eAAe,aAAa,EAAE,MAAM,WAAW,OAAO,CAAC;GAAQ,CAAA;GAGrH,qBAAC,QAAD;IAAM,WAAW;IAAgB,sBAAoB;cAArD;KACG,gBAAgB;KAChB,CAAC,CAAC,gBAAgB,eAAe,UAChC,oBAAC,WAAD;MAAW,WAAW,OAAO;gBAC3B,oBAAC,qBAAD;OAAa,YAAY;iBAAgB,eAAe;MAA4B,CAAA;KAC3E,CAAA;KAEb,oBAAC,qBAAD;MAAa,YAAY;gBAAgB,gBAAgB;KAA+B,CAAA;IACpF;;GAEL,iBACC,qBAAC,QAAD;IAAM,WAAW;cAAjB,CACG,CAAC,CAAC,gBAAgB,qBAAqB,oBAAC,uBAAD,EAAA,UAAgB,eAAe,kBAAiC,CAAA,GACvG,CAAC,CAAC,gBAAgB,oBAAoB,gBAAgB,gBACnD;;GAGR,oBAAC,QAAD;IAAM,WAAW;cACd,gBAAgB,iBACf,eAAe,cAAc,KAAK,YAAY,UAAU;KACtD,OACE,oBAAC,QAAD;MAAkB,WAAW;MAAc,mBAAiB;gBACzD;KACG,GAFK,KAEL;IAEV,CAAC;GACC,CAAA;GACL,eAAe,OAAO,gBAAgB,eACrC,oBAAC,QAAD;IAAM,WAAW;IAAgB,mBAAiB;cAChD,oBAAC,cAAD;KAAM,SAAS;KAAwB;KAAW,MAAM,SAAS;IAAS,CAAA;GACtE,CAAA;GAEP,eACC,oBAAC,QAAD;IAAM,WAAW;IAAgB,mBAAiB;cAC/C;GACG,CAAA;EAEJ;;AAEV;AAMA,kBAAkB,cAAc;AAChC,IAAM,gBAAgB;AACtB,cAAc,OAAO;AACrB,cAAc,KAAK,cAAc;AACjC,cAAc,gBAAgB;AAC9B,cAAc,cAAc,cAAc"}

package/lib/ElementHeaderText.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElementHeaderText.js","names":[],"sources":["../src/components/ElementHeader/ElementHeaderText/ElementHeaderText.tsx","../src/components/ElementHeader/ElementHeaderText/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport type { TitleTags } from '../../Title';\n\nimport Highlighter from '../../Highlighter';\nimport styles from '../styles.module.scss';\n\nexport type ElementHeaderTextType = typeof ElementHeaderText;\n\nexport interface ElementHeaderTextProps {\n  /** The first text in the ElementHeaderText Component */\n  firstText: string;\n  /** Will style the first text as bold */\n  firstTextEmphasised?: boolean;\n  /** The second text in the ElementHeaderText Component */\n  secondText?: string;\n  /** Will style the second text as bold */\n  secondTextEmphasised?: boolean;\n  /** Whether or not this ElementHeaderText is a sub text */\n  subText?: boolean;\n  /** Adds custom classes to the ElementHeaderText component. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Changes the underlying element of the text. Default: span*/\n  titleHtmlMarkup?: TitleTags;\n  /** Highlights text. Used for search results */\n  highlightText?: string;\n}\n\nexport const ElementHeaderText: React.FC<ElementHeaderTextProps> = props => {\n  const {\n    firstText,\n    firstTextEmphasised = false,\n    secondText = undefined,\n    secondTextEmphasised = false,\n    subText = false,\n    className = '',\n    testId,\n    titleHtmlMarkup = 'span',\n    highlightText,\n  } = props;\n\n  const headerTextWrapperClasses = cn(className, styles['text-wrapper'], {\n    [styles['text-wrapper--sub-level']]: subText,\n  });\n  const firstHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: firstTextEmphasised,\n  });\n  const secondHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: secondTextEmphasised,\n  });\n  const CustomTag = titleHtmlMarkup;\n\n  return (\n    <span data-testid={testId} className={headerTextWrapperClasses}>\n      <CustomTag className={styles['element-header__title']}>\n        <Highlighter searchText={highlightText}>\n          <span className={firstHeaderTextSegmentClasses}>{firstText}</span>\n          {secondText && <span className={secondHeaderTextSegmentClasses}>{secondText}</span>}\n        </Highlighter>\n      </CustomTag>\n    </span>\n  );\n};\n\nexport default ElementHeaderText;\n","import ElementHeaderText from './ElementHeaderText';\nexport * from './ElementHeaderText';\nexport default ElementHeaderText;\n"],"mappings":";;;;;AA8BA,IAAa,qBAAsD,UAAS;CAC1E,MAAM,EACJ,WACA,sBAAsB,OACtB,aAAa,KAAA,GACb,uBAAuB,OACvB,UAAU,OACV,YAAY,IACZ,QACA,kBAAkB,QAClB,kBACE;CAEJ,MAAM,2BAA2B,WAAG,WAAW,OAAO,iBAAiB,GACpE,OAAO,6BAA6B,SACtC,CAAC;CACF,MAAM,gCAAgC,WAAG,GACtC,OAAO,oCAAoC,qBAC7C,CAAC;CACF,MAAM,iCAAiC,WAAG,GACvC,OAAO,oCAAoC,sBAC7C,CAAC;CAGF,OACE,oBAAC,QAAD;EAAM,eAAa;EAAQ,WAAW;YACpC,oBAAC,iBAAD;GAAW,WAAW,OAAO;aAC3B,qBAAC,qBAAD;IAAa,YAAY;cAAzB,CACE,oBAAC,QAAD;KAAM,WAAW;eAAgC;KAAiB,CAAA,EACjE,cAAc,oBAAC,QAAD;KAAM,WAAW;eAAiC;KAAkB,CAAA,CACvE;;GACJ,CAAA;EACP,CAAA;;;;AC5DX,IAAA,4BAAe"}
+{"version":3,"file":"ElementHeaderText.js","names":[],"sources":["../src/components/ElementHeader/ElementHeaderText/ElementHeaderText.tsx","../src/components/ElementHeader/ElementHeaderText/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport type { TitleTags } from '../../Title';\n\nimport Highlighter from '../../Highlighter';\nimport styles from '../styles.module.scss';\n\nexport type ElementHeaderTextType = typeof ElementHeaderText;\n\nexport interface ElementHeaderTextProps {\n  /** The first text in the ElementHeaderText Component */\n  firstText: string;\n  /** Will style the first text as bold */\n  firstTextEmphasised?: boolean;\n  /** The second text in the ElementHeaderText Component */\n  secondText?: string;\n  /** Will style the second text as bold */\n  secondTextEmphasised?: boolean;\n  /** Whether or not this ElementHeaderText is a sub text */\n  subText?: boolean;\n  /** Adds custom classes to the ElementHeaderText component. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Changes the underlying element of the text. Default: span*/\n  titleHtmlMarkup?: TitleTags;\n  /** Highlights text. Used for search results */\n  highlightText?: string;\n}\n\nexport const ElementHeaderText: React.FC<ElementHeaderTextProps> = props => {\n  const {\n    firstText,\n    firstTextEmphasised = false,\n    secondText = undefined,\n    secondTextEmphasised = false,\n    subText = false,\n    className = '',\n    testId,\n    titleHtmlMarkup = 'span',\n    highlightText,\n  } = props;\n\n  const headerTextWrapperClasses = cn(className, styles['text-wrapper'], {\n    [styles['text-wrapper--sub-level']]: subText,\n  });\n  const firstHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: firstTextEmphasised,\n  });\n  const secondHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: secondTextEmphasised,\n  });\n  const CustomTag = titleHtmlMarkup;\n\n  return (\n    <span data-testid={testId} className={headerTextWrapperClasses}>\n      <CustomTag className={styles['element-header__title']}>\n        <Highlighter searchText={highlightText}>\n          <span className={firstHeaderTextSegmentClasses}>{firstText}</span>\n          {secondText && <span className={secondHeaderTextSegmentClasses}>{secondText}</span>}\n        </Highlighter>\n      </CustomTag>\n    </span>\n  );\n};\n\nexport default ElementHeaderText;\n","import ElementHeaderText from './ElementHeaderText';\nexport * from './ElementHeaderText';\nexport default ElementHeaderText;\n"],"mappings":";;;;;AA8BA,IAAa,qBAAsD,UAAS;CAC1E,MAAM,EACJ,WACA,sBAAsB,OACtB,aAAa,KAAA,GACb,uBAAuB,OACvB,UAAU,OACV,YAAY,IACZ,QACA,kBAAkB,QAClB,kBACE;CAEJ,MAAM,2BAA2B,WAAG,WAAW,OAAO,iBAAiB,GACpE,OAAO,6BAA6B,QACvC,CAAC;CACD,MAAM,gCAAgC,WAAG,GACtC,OAAO,oCAAoC,oBAC9C,CAAC;CACD,MAAM,iCAAiC,WAAG,GACvC,OAAO,oCAAoC,qBAC9C,CAAC;CAGD,OACE,oBAAC,QAAD;EAAM,eAAa;EAAQ,WAAW;YACpC,oBAAC,iBAAD;GAAW,WAAW,OAAO;aAC3B,qBAAC,qBAAD;IAAa,YAAY;cAAzB,CACE,oBAAC,QAAD;KAAM,WAAW;eAAgC;IAAgB,CAAA,GAChE,cAAc,oBAAC,QAAD;KAAM,WAAW;eAAiC;IAAiB,CAAA,CACvE;;EACJ,CAAA;CACP,CAAA;AAEV;;;AC9DA,IAAA,4BAAe"}

package/lib/ErrorBoundary.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorBoundary.js","names":[],"sources":["../src/components/LazyIcon/ErrorBoundary.tsx"],"sourcesContent":["import React from 'react';\n\ninterface ErrorBoundaryProps<T> {\n  fallback: React.ReactNode;\n  children: React.ReactNode;\n  reset: T;\n}\n\ninterface ErrorBoundaryState {\n  error: boolean;\n}\n\nclass ErrorBoundary<T> extends React.Component<ErrorBoundaryProps<T>, ErrorBoundaryState> {\n  constructor(props: ErrorBoundaryProps<T>) {\n    super(props);\n    this.state = {\n      error: false,\n    };\n  }\n\n  componentDidCatch(): void {\n    this.setState({ error: true });\n  }\n\n  componentDidUpdate(prevProps: Readonly<ErrorBoundaryProps<T>>): void {\n    if (prevProps.reset !== this.props.reset) {\n      this.setState({ error: false });\n    }\n  }\n\n  render(): React.ReactNode {\n    return this.state.error ? this.props.fallback : this.props.children;\n  }\n}\n\nexport default ErrorBoundary;\n"],"mappings":";;;;;;;;;;;;AAYA,IAAM,gBAAN,cAA+B,MAAM,UAAqD;CACxF,YAAY,OAA8B;EACxC,MAAM,MAAM;EACZ,KAAK,QAAQ,EACX,OAAO,OACR;;CAGH,oBAA0B;EACxB,KAAK,SAAS,EAAE,OAAO,MAAM,CAAC;;CAGhC,mBAAmB,WAAkD;EACnE,IAAI,UAAU,UAAU,KAAK,MAAM,OACjC,KAAK,SAAS,EAAE,OAAO,OAAO,CAAC;;CAInC,SAA0B;EACxB,OAAO,KAAK,MAAM,QAAQ,KAAK,MAAM,WAAW,KAAK,MAAM"}
+{"version":3,"file":"ErrorBoundary.js","names":[],"sources":["../src/components/LazyIcon/ErrorBoundary.tsx"],"sourcesContent":["import React from 'react';\n\ninterface ErrorBoundaryProps<T> {\n  fallback: React.ReactNode;\n  children: React.ReactNode;\n  reset: T;\n}\n\ninterface ErrorBoundaryState {\n  error: boolean;\n}\n\nclass ErrorBoundary<T> extends React.Component<ErrorBoundaryProps<T>, ErrorBoundaryState> {\n  constructor(props: ErrorBoundaryProps<T>) {\n    super(props);\n    this.state = {\n      error: false,\n    };\n  }\n\n  componentDidCatch(): void {\n    this.setState({ error: true });\n  }\n\n  componentDidUpdate(prevProps: Readonly<ErrorBoundaryProps<T>>): void {\n    if (prevProps.reset !== this.props.reset) {\n      this.setState({ error: false });\n    }\n  }\n\n  render(): React.ReactNode {\n    return this.state.error ? this.props.fallback : this.props.children;\n  }\n}\n\nexport default ErrorBoundary;\n"],"mappings":";;;;;;;;;;;;AAYA,IAAM,gBAAN,cAA+B,MAAM,UAAqD;CACxF,YAAY,OAA8B;EACxC,MAAM,KAAK;EACX,KAAK,QAAQ,EACX,OAAO,MACT;CACF;CAEA,oBAA0B;EACxB,KAAK,SAAS,EAAE,OAAO,KAAK,CAAC;CAC/B;CAEA,mBAAmB,WAAkD;EACnE,IAAI,UAAU,UAAU,KAAK,MAAM,OACjC,KAAK,SAAS,EAAE,OAAO,MAAM,CAAC;CAElC;CAEA,SAA0B;EACxB,OAAO,KAAK,MAAM,QAAQ,KAAK,MAAM,WAAW,KAAK,MAAM;CAC7D;AACF"}

package/lib/ErrorWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorWrapper.js","names":[],"sources":["../src/components/ErrorWrapper/ErrorWrapper.tsx","../src/components/ErrorWrapper/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport interface ErrorWrapperClassNameProps {\n  errorWrapperClassName?: string;\n}\n\nexport interface ErrorWrapperProps {\n  /** Form component */\n  children?: React.ReactNode;\n  /** Error message */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds a ref to the error message p tag */\n  errorMessageRef?: React.Ref<HTMLDivElement>;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const ErrorWrapper: React.FC<ErrorWrapperProps> = props => {\n  const { renderError = true } = props;\n\n  const errorWrapperClasses = cn(props.errorText && renderError && styles[`error-wrapper--with-error`], props.className);\n\n  return (\n    <div className={errorWrapperClasses} data-testid={props.testId}>\n      <span ref={props.errorMessageRef} tabIndex={-1}>\n        {props.errorText && (\n          <p className={styles['error-wrapper__errors']} id={props.errorTextId}>\n            {props.errorText}\n          </p>\n        )}\n      </span>\n      {props.children}\n    </div>\n  );\n};\n\nexport default ErrorWrapper;\n","import ErrorWrapper from './ErrorWrapper';\nexport * from './ErrorWrapper';\nexport default ErrorWrapper;\n"],"mappings":";;;;AAyBA,IAAa,gBAA4C,UAAS;CAChE,MAAM,EAAE,cAAc,SAAS;CAI/B,OACE,qBAAC,OAAD;EAAK,WAHqB,WAAG,MAAM,aAAa,eAAe,OAAO,8BAA8B,MAAM,UAG1F;EAAqB,eAAa,MAAM;YAAxD,CACE,oBAAC,QAAD;GAAM,KAAK,MAAM;GAAiB,UAAU;aACzC,MAAM,aACL,oBAAC,KAAD;IAAG,WAAW,OAAO;IAA0B,IAAI,MAAM;cACtD,MAAM;IACL,CAAA;GAED,CAAA,EACN,MAAM,SACH;;;;;ACtCV,IAAA,uBAAe"}
+{"version":3,"file":"ErrorWrapper.js","names":[],"sources":["../src/components/ErrorWrapper/ErrorWrapper.tsx","../src/components/ErrorWrapper/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport interface ErrorWrapperClassNameProps {\n  errorWrapperClassName?: string;\n}\n\nexport interface ErrorWrapperProps {\n  /** Form component */\n  children?: React.ReactNode;\n  /** Error message */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds a ref to the error message p tag */\n  errorMessageRef?: React.Ref<HTMLDivElement>;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const ErrorWrapper: React.FC<ErrorWrapperProps> = props => {\n  const { renderError = true } = props;\n\n  const errorWrapperClasses = cn(props.errorText && renderError && styles[`error-wrapper--with-error`], props.className);\n\n  return (\n    <div className={errorWrapperClasses} data-testid={props.testId}>\n      <span ref={props.errorMessageRef} tabIndex={-1}>\n        {props.errorText && (\n          <p className={styles['error-wrapper__errors']} id={props.errorTextId}>\n            {props.errorText}\n          </p>\n        )}\n      </span>\n      {props.children}\n    </div>\n  );\n};\n\nexport default ErrorWrapper;\n","import ErrorWrapper from './ErrorWrapper';\nexport * from './ErrorWrapper';\nexport default ErrorWrapper;\n"],"mappings":";;;;AAyBA,IAAa,gBAA4C,UAAS;CAChE,MAAM,EAAE,cAAc,SAAS;CAI/B,OACE,qBAAC,OAAD;EAAK,WAHqB,WAAG,MAAM,aAAa,eAAe,OAAO,8BAA8B,MAAM,SAG1F;EAAqB,eAAa,MAAM;YAAxD,CACE,oBAAC,QAAD;GAAM,KAAK,MAAM;GAAiB,UAAU;aACzC,MAAM,aACL,oBAAC,KAAD;IAAG,WAAW,OAAO;IAA0B,IAAI,MAAM;cACtD,MAAM;GACN,CAAA;EAED,CAAA,GACL,MAAM,QACJ;;AAET;;;ACxCA,IAAA,uBAAe"}

package/lib/Expander.js.map

@@ -1 +1 @@
-{"version":3,"file":"Expander.js","names":[],"sources":["../src/components/Expander/constants.ts","../src/components/Expander/Expander.tsx","../src/components/Expander/index.ts"],"sourcesContent":["export enum ExpanderSize {\n  small = 'small',\n  large = 'large',\n}\n","import { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nimport { ExpanderSize } from './constants';\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport Button from '../Button';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport type ExpanderColors = Extract<PaletteNames, 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'white'>;\n\nexport interface ExpanderProps {\n  buttonId?: string;\n  /** Sets the trigger title */\n  title: string;\n  /** Sets the expanded content */\n  children?: React.ReactNode;\n  /** Sets classnames on the content area */\n  contentClassNames?: string;\n  /** Sets the size of the expander. Default: ExpanderSize.small */\n  size?: ExpanderSize;\n  /** Sets the background of the expander. Requires size=ExpanderSize.large. */\n  color?: ExpanderColors;\n  /** Adds an icon to the expander trigger. Requires size=ExpanderSize.large. */\n  svgIcon?: SvgIcon | IconName;\n  /** Opens or closes the expander */\n  expanded?: boolean;\n  /** Removes border to the left of the content. Requires size=ExpanderSize.small. */\n  noNestedLine?: boolean;\n  /** Stick expander trigger to top of screen while scrolling down */\n  sticky?: boolean;\n  /** Called when expander is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n  /** Overrides the default z-index of the expander header */\n  zIndex?: number;\n}\n\nconst Expander: React.FC<ExpanderProps> = props => {\n  const {\n    buttonId,\n    title,\n    children,\n    size = ExpanderSize.small,\n    color,\n    contentClassNames,\n    svgIcon: icon,\n    expanded = false,\n    noNestedLine = false,\n    sticky = false,\n    testId,\n    onExpand,\n    renderChildrenWhenClosed = false,\n    zIndex,\n  } = props;\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const expanderRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = usePseudoClasses(triggerRef);\n  const contentSize = useSize(expanderRef);\n  const triggerSize = useSize(triggerRef);\n\n  const isSticky = sticky && isExpanded;\n\n  const renderChevron = (align: 'left' | 'right'): React.ReactNode => (\n    <span className={classNames(styles['expander__icon'], styles[`expander__icon--${align}`])}>\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} isHovered={isHovered} />\n    </span>\n  );\n\n  const triggerClassName = classNames(\n    styles['expander__trigger'],\n    size === ExpanderSize.large && styles[`expander__trigger--${size}`],\n    size === ExpanderSize.large && styles[`expander__trigger--${color || 'neutral'}`],\n    size === ExpanderSize.large && icon && styles['expander__trigger--icon'],\n    isExpanded && styles['expander__trigger--expanded'],\n    isSticky && styles['expander__trigger--sticky']\n  );\n\n  const renderTrigger = (): React.ReactNode => (\n    <button\n      id={buttonId}\n      type=\"button\"\n      className={triggerClassName}\n      style={{\n        zIndex: isHovered || isSticky ? zIndex : undefined,\n        width: isSticky && contentSize?.width ? `${contentSize.width}px` : undefined,\n      }}\n      aria-expanded={isExpanded}\n      ref={triggerRef}\n      onClick={(): void => setIsExpanded(!isExpanded)}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Expander}\n    >\n      {size === ExpanderSize.small && renderChevron('left')}\n      {icon && (\n        <span className={classNames(styles['expander__icon'], styles['expander__icon--left'])}>\n          {typeof icon === 'string' ? (\n            <LazyIcon iconName={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          ) : (\n            <Icon svgIcon={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          )}\n        </span>\n      )}\n      {title}\n      {size === ExpanderSize.large && renderChevron('right')}\n    </button>\n  );\n\n  const buttonClassName = classNames(styles['expander__button'], isExpanded && styles['expander__button--expanded']);\n\n  const renderButton = (): React.ReactNode => (\n    <div\n      style={{\n        width: isSticky && triggerSize?.width ? `${triggerSize?.width}px` : undefined,\n        height: isSticky && triggerSize?.height ? `${triggerSize?.height}px` : undefined,\n      }}\n      className={classNames({\n        [styles['expander__button-container--sticky']]: isSticky,\n      })}\n    >\n      <Button\n        id={buttonId}\n        variant=\"borderless\"\n        textClassName={styles['expander__button__text']}\n        className={buttonClassName}\n        aria-expanded={isExpanded}\n        ref={triggerRef}\n        onClick={(): void => setIsExpanded(!isExpanded)}\n        testId={testId}\n        data-analyticsid={AnalyticsId.Expander}\n      >\n        <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n        {title}\n      </Button>\n    </div>\n  );\n\n  const renderContent = (): React.ReactNode => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const contentClassName = classNames(\n      styles['expander__content'],\n      styles[`expander__content--${size}`],\n      size === ExpanderSize.large && styles[`expander__content--${color || 'neutral'}`],\n      size === ExpanderSize.large && icon && styles['expander__content--icon'],\n      isExpanded && styles['expander__content--expanded'],\n      size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line--inner'],\n      { [styles['expander__content--sticky']]: isSticky },\n      contentClassNames\n    );\n    const leftBorderClassName = classNames(size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line--outer']);\n\n    return (\n      <div className={leftBorderClassName}>\n        <div className={contentClassName}>{children}</div>\n      </div>\n    );\n  };\n\n  return (\n    <div className={styles['expander']} ref={expanderRef}>\n      {size === ExpanderSize.large ? renderTrigger() : renderButton()}\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default Expander;\n","import Expander from './Expander';\nexport { ExpanderSize } from './constants';\nexport * from './Expander';\nexport default Expander;\n"],"mappings":"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"}
+{"version":3,"file":"Expander.js","names":[],"sources":["../src/components/Expander/constants.ts","../src/components/Expander/Expander.tsx","../src/components/Expander/index.ts"],"sourcesContent":["export enum ExpanderSize {\n  small = 'small',\n  large = 'large',\n}\n","import { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nimport { ExpanderSize } from './constants';\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport Button from '../Button';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport type ExpanderColors = Extract<PaletteNames, 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'white'>;\n\nexport interface ExpanderProps {\n  buttonId?: string;\n  /** Sets the trigger title */\n  title: string;\n  /** Sets the expanded content */\n  children?: React.ReactNode;\n  /** Sets classnames on the content area */\n  contentClassNames?: string;\n  /** Sets the size of the expander. Default: ExpanderSize.small */\n  size?: ExpanderSize;\n  /** Sets the background of the expander. Requires size=ExpanderSize.large. */\n  color?: ExpanderColors;\n  /** Adds an icon to the expander trigger. Requires size=ExpanderSize.large. */\n  svgIcon?: SvgIcon | IconName;\n  /** Opens or closes the expander */\n  expanded?: boolean;\n  /** Removes border to the left of the content. Requires size=ExpanderSize.small. */\n  noNestedLine?: boolean;\n  /** Stick expander trigger to top of screen while scrolling down */\n  sticky?: boolean;\n  /** Called when expander is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n  /** Overrides the default z-index of the expander header */\n  zIndex?: number;\n}\n\nconst Expander: React.FC<ExpanderProps> = props => {\n  const {\n    buttonId,\n    title,\n    children,\n    size = ExpanderSize.small,\n    color,\n    contentClassNames,\n    svgIcon: icon,\n    expanded = false,\n    noNestedLine = false,\n    sticky = false,\n    testId,\n    onExpand,\n    renderChildrenWhenClosed = false,\n    zIndex,\n  } = props;\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const expanderRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = usePseudoClasses(triggerRef);\n  const contentSize = useSize(expanderRef);\n  const triggerSize = useSize(triggerRef);\n\n  const isSticky = sticky && isExpanded;\n\n  const renderChevron = (align: 'left' | 'right'): React.ReactNode => (\n    <span className={classNames(styles['expander__icon'], styles[`expander__icon--${align}`])}>\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} isHovered={isHovered} />\n    </span>\n  );\n\n  const triggerClassName = classNames(\n    styles['expander__trigger'],\n    size === ExpanderSize.large && styles[`expander__trigger--${size}`],\n    size === ExpanderSize.large && styles[`expander__trigger--${color || 'neutral'}`],\n    size === ExpanderSize.large && icon && styles['expander__trigger--icon'],\n    isExpanded && styles['expander__trigger--expanded'],\n    isSticky && styles['expander__trigger--sticky']\n  );\n\n  const renderTrigger = (): React.ReactNode => (\n    <button\n      id={buttonId}\n      type=\"button\"\n      className={triggerClassName}\n      style={{\n        zIndex: isHovered || isSticky ? zIndex : undefined,\n        width: isSticky && contentSize?.width ? `${contentSize.width}px` : undefined,\n      }}\n      aria-expanded={isExpanded}\n      ref={triggerRef}\n      onClick={(): void => setIsExpanded(!isExpanded)}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Expander}\n    >\n      {size === ExpanderSize.small && renderChevron('left')}\n      {icon && (\n        <span className={classNames(styles['expander__icon'], styles['expander__icon--left'])}>\n          {typeof icon === 'string' ? (\n            <LazyIcon iconName={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          ) : (\n            <Icon svgIcon={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          )}\n        </span>\n      )}\n      {title}\n      {size === ExpanderSize.large && renderChevron('right')}\n    </button>\n  );\n\n  const buttonClassName = classNames(styles['expander__button'], isExpanded && styles['expander__button--expanded']);\n\n  const renderButton = (): React.ReactNode => (\n    <div\n      style={{\n        width: isSticky && triggerSize?.width ? `${triggerSize?.width}px` : undefined,\n        height: isSticky && triggerSize?.height ? `${triggerSize?.height}px` : undefined,\n      }}\n      className={classNames({\n        [styles['expander__button-container--sticky']]: isSticky,\n      })}\n    >\n      <Button\n        id={buttonId}\n        variant=\"borderless\"\n        textClassName={styles['expander__button__text']}\n        className={buttonClassName}\n        aria-expanded={isExpanded}\n        ref={triggerRef}\n        onClick={(): void => setIsExpanded(!isExpanded)}\n        testId={testId}\n        data-analyticsid={AnalyticsId.Expander}\n      >\n        <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n        {title}\n      </Button>\n    </div>\n  );\n\n  const renderContent = (): React.ReactNode => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const contentClassName = classNames(\n      styles['expander__content'],\n      styles[`expander__content--${size}`],\n      size === ExpanderSize.large && styles[`expander__content--${color || 'neutral'}`],\n      size === ExpanderSize.large && icon && styles['expander__content--icon'],\n      isExpanded && styles['expander__content--expanded'],\n      size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line--inner'],\n      { [styles['expander__content--sticky']]: isSticky },\n      contentClassNames\n    );\n    const leftBorderClassName = classNames(size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line--outer']);\n\n    return (\n      <div className={leftBorderClassName}>\n        <div className={contentClassName}>{children}</div>\n      </div>\n    );\n  };\n\n  return (\n    <div className={styles['expander']} ref={expanderRef}>\n      {size === ExpanderSize.large ? renderTrigger() : renderButton()}\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default Expander;\n","import Expander from './Expander';\nexport { ExpanderSize } from './constants';\nexport * from './Expander';\nexport default Expander;\n"],"mappings":"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"}

package/lib/FilterButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterButton.js","names":[],"sources":["../src/components/Filter/FilterButton/FilterButton.tsx","../src/components/Filter/FilterButton/index.ts"],"sourcesContent":["import { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemFilter } from '../../../resources/Resources';\n\nimport { IconSize, LanguageLocales } from '../../../constants';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport Icon from '../../Icon';\nimport Filter from '../../Icons/Filter';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Texts if overriding SOT */\n  resources?: Partial<HNDesignsystemFilter>;\n}\n\nconst FilterButton: React.FC<FilterButtonProps> = props => {\n  const { resources } = props;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = usePseudoClasses(buttonRef);\n\n  return (\n    <button {...props} className={styles['filter-button']} ref={buttonRef}>\n      <span\n        className={classNames(styles['filter-button__inner'], {\n          [styles['filter-button__inner--hovered']]: isHovered,\n        })}\n      >\n        <Icon svgIcon={Filter} isHovered={isHovered} size={IconSize.XSmall} />\n        <span className={styles['filter-button__text']}>{mergedResources.filterButtonText}</span>\n      </span>\n    </button>\n  );\n};\n\nexport default FilterButton;\n","import FilterButton from './FilterButton';\nexport * from './FilterButton';\nexport default FilterButton;\n"],"mappings":";;;;;;;;;;;AAoBA,IAAM,gBAA4C,UAAS;CACzD,MAAM,EAAE,cAAc;CAEtB,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAG5E,MAAM,kBAAkB;EACtB,GAHuB,aAAa,SAGjC;EACH,GAAG;EACJ;CAED,MAAM,YAAY,OAA0B,KAAK;CACjD,MAAM,EAAE,cAAc,iBAAiB,UAAU;CAEjD,OACE,oBAAC,UAAD;EAAQ,GAAI;EAAO,WAAW,OAAO;EAAkB,KAAK;YAC1D,qBAAC,QAAD;GACE,WAAW,WAAW,OAAO,yBAAyB,GACnD,OAAO,mCAAmC,WAC5C,CAAC;aAHJ,CAKE,oBAAC,cAAD;IAAM,SAAS;IAAmB;IAAW,MAAM,SAAS;IAAU,CAAA,EACtE,oBAAC,QAAD;IAAM,WAAW,OAAO;cAAyB,gBAAgB;IAAwB,CAAA,CACpF;;EACA,CAAA;;;;AC1Cb,IAAA,uBAAe"}
+{"version":3,"file":"FilterButton.js","names":[],"sources":["../src/components/Filter/FilterButton/FilterButton.tsx","../src/components/Filter/FilterButton/index.ts"],"sourcesContent":["import { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemFilter } from '../../../resources/Resources';\n\nimport { IconSize, LanguageLocales } from '../../../constants';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport Icon from '../../Icon';\nimport Filter from '../../Icons/Filter';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Texts if overriding SOT */\n  resources?: Partial<HNDesignsystemFilter>;\n}\n\nconst FilterButton: React.FC<FilterButtonProps> = props => {\n  const { resources } = props;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = usePseudoClasses(buttonRef);\n\n  return (\n    <button {...props} className={styles['filter-button']} ref={buttonRef}>\n      <span\n        className={classNames(styles['filter-button__inner'], {\n          [styles['filter-button__inner--hovered']]: isHovered,\n        })}\n      >\n        <Icon svgIcon={Filter} isHovered={isHovered} size={IconSize.XSmall} />\n        <span className={styles['filter-button__text']}>{mergedResources.filterButtonText}</span>\n      </span>\n    </button>\n  );\n};\n\nexport default FilterButton;\n","import FilterButton from './FilterButton';\nexport * from './FilterButton';\nexport default FilterButton;\n"],"mappings":";;;;;;;;;;;AAoBA,IAAM,gBAA4C,UAAS;CACzD,MAAM,EAAE,cAAc;CAEtB,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAG3E,MAAM,kBAAkB;EACtB,GAHuB,aAAa,QAGjC;EACH,GAAG;CACL;CAEA,MAAM,YAAY,OAA0B,IAAI;CAChD,MAAM,EAAE,cAAc,iBAAiB,SAAS;CAEhD,OACE,oBAAC,UAAD;EAAQ,GAAI;EAAO,WAAW,OAAO;EAAkB,KAAK;YAC1D,qBAAC,QAAD;GACE,WAAW,WAAW,OAAO,yBAAyB,GACnD,OAAO,mCAAmC,UAC7C,CAAC;aAHH,CAKE,oBAAC,cAAD;IAAM,SAAS;IAAmB;IAAW,MAAM,SAAS;GAAS,CAAA,GACrE,oBAAC,QAAD;IAAM,WAAW,OAAO;cAAyB,gBAAgB;GAAuB,CAAA,CACpF;;CACA,CAAA;AAEZ;;;AC5CA,IAAA,uBAAe"}

package/lib/FilterButtonAndChipsWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterButtonAndChipsWrapper.js","names":[],"sources":["../src/components/Filter/FilterButtonAndChipsWrapper/FilterButtonAndChipsWrapper.tsx","../src/components/Filter/FilterButtonAndChipsWrapper/index.ts"],"sourcesContent":["import type React from 'react';\n\nimport classNames from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterButtonAndChipsWrapperProps {\n  /** FilterButton content area */\n  filterButtonComponent: React.ReactNode;\n  /** Content area for rendering filter chips */\n  filterChips: React.ReactNode[];\n  /** test id that is placed on the wrapper */\n  testId?: string;\n}\n\nconst FilterButtonAndChipsWrapper: React.FC<FilterButtonAndChipsWrapperProps> = ({ filterButtonComponent, filterChips, testId }) => {\n  return (\n    <div className={classNames(styles['filter-chip-bar'])} data-testid={testId}>\n      {filterButtonComponent}\n      {filterChips}\n    </div>\n  );\n};\n\nexport default FilterButtonAndChipsWrapper;\n","import FilterButtonAndChipsWrapper from './FilterButtonAndChipsWrapper';\nexport * from './FilterButtonAndChipsWrapper';\nexport default FilterButtonAndChipsWrapper;\n"],"mappings":";;;;AAeA,IAAM,+BAA2E,EAAE,uBAAuB,aAAa,aAAa;CAClI,OACE,qBAAC,OAAD;EAAK,WAAW,WAAW,OAAO,mBAAmB;EAAE,eAAa;YAApE,CACG,uBACA,YACG;;;;;AClBV,IAAA,sCAAe"}
+{"version":3,"file":"FilterButtonAndChipsWrapper.js","names":[],"sources":["../src/components/Filter/FilterButtonAndChipsWrapper/FilterButtonAndChipsWrapper.tsx","../src/components/Filter/FilterButtonAndChipsWrapper/index.ts"],"sourcesContent":["import type React from 'react';\n\nimport classNames from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterButtonAndChipsWrapperProps {\n  /** FilterButton content area */\n  filterButtonComponent: React.ReactNode;\n  /** Content area for rendering filter chips */\n  filterChips: React.ReactNode[];\n  /** test id that is placed on the wrapper */\n  testId?: string;\n}\n\nconst FilterButtonAndChipsWrapper: React.FC<FilterButtonAndChipsWrapperProps> = ({ filterButtonComponent, filterChips, testId }) => {\n  return (\n    <div className={classNames(styles['filter-chip-bar'])} data-testid={testId}>\n      {filterButtonComponent}\n      {filterChips}\n    </div>\n  );\n};\n\nexport default FilterButtonAndChipsWrapper;\n","import FilterButtonAndChipsWrapper from './FilterButtonAndChipsWrapper';\nexport * from './FilterButtonAndChipsWrapper';\nexport default FilterButtonAndChipsWrapper;\n"],"mappings":";;;;AAeA,IAAM,+BAA2E,EAAE,uBAAuB,aAAa,aAAa;CAClI,OACE,qBAAC,OAAD;EAAK,WAAW,WAAW,OAAO,kBAAkB;EAAG,eAAa;YAApE,CACG,uBACA,WACE;;AAET;;;ACpBA,IAAA,sCAAe"}

package/lib/FilterDrawer.js

@@ -4,6 +4,7 @@ import { t as Button_default } from "./Button.js";
 import { formatResource } from "./utils/resource.js";
 import { t as DrawerNavigation } from "./DrawerNavigation.js";
 import { t as getResources } from "./resourceHelper.js";
+import { t as LoaderSpinner } from "./LoaderSpinner.js";
 import { Children, isValidElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Filter/FilterDrawer/styles.module.scss";
@@ -21,7 +22,7 @@ function FilterDrawerOverview(_props) {
 function FilterDrawerView(_props) {
 	return null;
 }
-function FilterDrawer({ drawer, onClose, footer, onReset, resultCount, resources, children }) {
+function FilterDrawer({ drawer, onClose, footer, isLoading, onReset, resultCount, resources, children }) {
 	const { language } = useLanguage(LanguageLocales.NORWEGIAN);
 	const mergedResources = {
 		...getResources(language),
@@ -31,33 +32,42 @@ function FilterDrawer({ drawer, onClose, footer, onReset, resultCount, resources
 		if (onClose) onClose();
 		else drawer.close();
 	};
-	const showResultButtonText = resultCount !== void 0 ? formatResource(mergedResources.showButtonText, resultCount) : mergedResources.showButtonText;
 	const defaultResetButton = onReset && /* @__PURE__ */ jsx(Button_default, {
 		onClick: onReset,
 		variant: "borderless",
 		children: mergedResources.resetButtonText
 	});
-	const defaultShowResultsButton = showResultButtonText && /* @__PURE__ */ jsx(Button_default, {
+	const defaultShowResultsButton = /* @__PURE__ */ jsx(Button_default, {
 		onClick: handleClose,
-		children: showResultButtonText
+		children: mergedResources.showButtonText
 	});
-	const defaultFooter = onReset || showResultButtonText ? /* @__PURE__ */ jsxs("div", {
+	const resultText = resultCount !== void 0 ? /* @__PURE__ */ jsx("span", { children: formatResource(mergedResources.resultsText, resultCount) }) : void 0;
+	const resultContent = isLoading ? /* @__PURE__ */ jsx(LoaderSpinner, { resources: mergedResources }) : resultText;
+	const defaultFooterRight = (resultContent || defaultShowResultsButton) && /* @__PURE__ */ jsxs("div", {
+		className: styles["filter-drawer__footer__right"],
+		children: [resultContent, defaultShowResultsButton]
+	});
+	const defaultFooter = onReset || resultContent ? /* @__PURE__ */ jsxs("div", {
 		className: styles["filter-drawer__footer"],
-		children: [defaultResetButton, defaultShowResultsButton]
+		children: [defaultResetButton, defaultFooterRight]
 	}) : void 0;
 	const fallbackFooter = footer ?? defaultFooter;
 	const generateViewFooter = (viewOnReset, viewOnClose, noResetButton) => {
 		if (!viewOnReset && !viewOnClose && !noResetButton) return;
+		const viewShowButton = viewOnClose ? /* @__PURE__ */ jsx(Button_default, {
+			onClick: viewOnClose,
+			children: mergedResources.showButtonText
+		}) : defaultShowResultsButton;
 		return /* @__PURE__ */ jsxs("div", {
 			className: styles["filter-drawer__footer"],
 			children: [!noResetButton && (viewOnReset ? /* @__PURE__ */ jsx(Button_default, {
 				onClick: viewOnReset,
 				variant: "borderless",
 				children: mergedResources.resetButtonText
-			}) : defaultResetButton), viewOnClose ? /* @__PURE__ */ jsx(Button_default, {
-				onClick: viewOnClose,
-				children: showResultButtonText ?? mergedResources.showButtonText
-			}) : defaultShowResultsButton]
+			}) : defaultResetButton), (resultContent || viewShowButton) && /* @__PURE__ */ jsxs("div", {
+				className: styles["filter-drawer__footer__right"],
+				children: [resultContent, viewShowButton]
+			})]
 		});
 	};
 	const processedChildren = Children.map(children, (child) => {

package/lib/FilterDrawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterDrawer.js","names":[],"sources":["../src/components/Filter/FilterDrawer/FilterDrawer.tsx","../src/components/Filter/FilterDrawer/index.ts"],"sourcesContent":["import { Children, isValidElement } from 'react';\n\nimport type { HNDesignsystemFilter } from '../../../resources/Resources';\nimport type { UseFilterDrawerReturn } from '../useFilterDrawer';\n\nimport { LanguageLocales } from '../../../constants';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport { formatResource } from '../../../utils/resource';\nimport Button from '../../Button';\nimport DrawerNavigation, { type DrawerViewProps } from '../DrawerNavigation/DrawerNavigation';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterDrawerProps<ViewId extends string = string> {\n  /** The drawer state from useFilterDrawer */\n  drawer: UseFilterDrawerReturn<ViewId>;\n  /** Additional callback when the drawer closes (drawer.close() is always called automatically) */\n  onClose?: () => void;\n  /** Fully custom footer — overrides the default footer built from onReset/resultText */\n  footer?: React.ReactNode;\n  /** If provided, shows a \"Nullstill filter\" button in the default footer */\n  onReset?: () => void;\n  /** If provided, shows a result count button (e.g. \"Vis 5 treff\") that closes the drawer */\n  resultCount?: number;\n  /** Resources for the component */\n  resources?: Partial<HNDesignsystemFilter>;\n  /** DrawerNavigation.View children defining the overview and filter views */\n  children: React.ReactNode;\n}\n\nexport interface FilterDrawerViewProps extends DrawerViewProps {\n  /** Hide reset button for view */\n  noResetButton?: boolean;\n  /** View specific close handler */\n  onClose?: () => void;\n  /** View specific reset handler */\n  onReset?: () => void;\n}\n\n/**\n * Never rendered directly — FilterDrawer reads its props and creates a DrawerNavigation.View\n * with id=\"overview\" and home=true.\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction FilterDrawerOverview(_props: Omit<DrawerViewProps, 'id' | 'home'>): React.ReactNode {\n  return null;\n}\n\n/**\n * Never rendered directly — FilterDrawer reads its props and creates a FilterDrawerView\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction FilterDrawerView(_props: FilterDrawerViewProps): React.ReactNode {\n  // DrawerView is never rendered directly — DrawerNavigation reads its props\n  return null;\n}\n\nfunction FilterDrawer<ViewId extends string>({\n  drawer,\n  onClose,\n  footer,\n  onReset,\n  resultCount,\n  resources,\n  children,\n}: FilterDrawerProps<ViewId>): React.ReactNode {\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const mergedResources = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const handleClose = (): void => {\n    if (onClose) {\n      onClose();\n    } else {\n      drawer.close();\n    }\n  };\n\n  const showResultButtonText =\n    resultCount !== undefined ? formatResource(mergedResources.showButtonText, resultCount) : mergedResources.showButtonText;\n\n  const defaultResetButton = onReset && (\n    <Button onClick={onReset} variant=\"borderless\">\n      {mergedResources.resetButtonText}\n    </Button>\n  );\n  const defaultShowResultsButton = showResultButtonText && <Button onClick={handleClose}>{showResultButtonText}</Button>;\n\n  const defaultFooter =\n    onReset || showResultButtonText ? (\n      <div className={styles['filter-drawer__footer']}>\n        {defaultResetButton}\n        {defaultShowResultsButton}\n      </div>\n    ) : undefined;\n\n  const fallbackFooter = footer ?? defaultFooter;\n\n  const generateViewFooter = (viewOnReset?: () => void, viewOnClose?: () => void, noResetButton?: boolean): React.ReactNode => {\n    if (!viewOnReset && !viewOnClose && !noResetButton) {\n      return undefined;\n    }\n\n    return (\n      <div className={styles['filter-drawer__footer']}>\n        {!noResetButton &&\n          (viewOnReset ? (\n            <Button onClick={viewOnReset} variant=\"borderless\">\n              {mergedResources.resetButtonText}\n            </Button>\n          ) : (\n            defaultResetButton\n          ))}\n        {viewOnClose ? (\n          <Button onClick={viewOnClose}>{showResultButtonText ?? mergedResources.showButtonText}</Button>\n        ) : (\n          defaultShowResultsButton\n        )}\n      </div>\n    );\n  };\n\n  const processedChildren = Children.map(children, child => {\n    if (isValidElement<Omit<FilterDrawerViewProps, 'id' | 'home'>>(child) && child.type === FilterDrawerOverview) {\n      const viewDefaultFooter = generateViewFooter(child.props.onReset, child.props.onClose, child.props.noResetButton);\n      const viewFooter = viewDefaultFooter ?? child.props.footer ?? fallbackFooter;\n      return (\n        <DrawerNavigation.View\n          id=\"overview\"\n          home\n          title={child.props.title}\n          children={child.props.children}\n          drawerContentClassname={styles['filter-drawer__view']}\n          footer={viewFooter}\n        />\n      );\n    }\n    if (isValidElement<FilterDrawerViewProps>(child)) {\n      const viewDefaultFooter = generateViewFooter(child.props.onReset, child.props.onClose, child.props.noResetButton);\n      const viewFooter = viewDefaultFooter ?? child.props.footer ?? fallbackFooter;\n      return (\n        <DrawerNavigation.View\n          id={child.props.id}\n          title={child.props.title}\n          children={child.props.children}\n          drawerContentClassname={styles['filter-drawer__view']}\n          footer={viewFooter}\n        />\n      );\n    } else {\n      return child;\n    }\n  });\n\n  return (\n    <DrawerNavigation isOpen={drawer.isOpen} initialView={drawer.initialView} onCloseButton={handleClose} footer={footer ?? defaultFooter}>\n      {processedChildren}\n    </DrawerNavigation>\n  );\n}\n\nFilterDrawer.Overview = FilterDrawerOverview;\nFilterDrawer.View = FilterDrawerView;\n\nexport default FilterDrawer;\n","import FilterDrawer from './FilterDrawer';\nexport * from './FilterDrawer';\nexport default FilterDrawer;\n"],"mappings":";;;;;;;;;;;;;;AA6CA,SAAS,qBAAqB,QAA+D;CAC3F,OAAO;;;;;AAOT,SAAS,iBAAiB,QAAgD;CAExE,OAAO;;AAGT,SAAS,aAAoC,EAC3C,QACA,SACA,QACA,SACA,aACA,WACA,YAC6C;CAC7C,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAE5E,MAAM,kBAAkB;EACtB,GAFuB,aAAa,SAEjC;EACH,GAAG;EACJ;CAED,MAAM,oBAA0B;EAC9B,IAAI,SACF,SAAS;OAET,OAAO,OAAO;;CAIlB,MAAM,uBACJ,gBAAgB,KAAA,IAAY,eAAe,gBAAgB,gBAAgB,YAAY,GAAG,gBAAgB;CAE5G,MAAM,qBAAqB,WACzB,oBAAC,gBAAD;EAAQ,SAAS;EAAS,SAAQ;YAC/B,gBAAgB;EACV,CAAA;CAEX,MAAM,2BAA2B,wBAAwB,oBAAC,gBAAD;EAAQ,SAAS;YAAc;EAA8B,CAAA;CAEtH,MAAM,gBACJ,WAAW,uBACT,qBAAC,OAAD;EAAK,WAAW,OAAO;YAAvB,CACG,oBACA,yBACG;MACJ,KAAA;CAEN,MAAM,iBAAiB,UAAU;CAEjC,MAAM,sBAAsB,aAA0B,aAA0B,kBAA6C;EAC3H,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,eACnC;EAGF,OACE,qBAAC,OAAD;GAAK,WAAW,OAAO;aAAvB,CACG,CAAC,kBACC,cACC,oBAAC,gBAAD;IAAQ,SAAS;IAAa,SAAQ;cACnC,gBAAgB;IACV,CAAA,GAET,qBAEH,cACC,oBAAC,gBAAD;IAAQ,SAAS;cAAc,wBAAwB,gBAAgB;IAAwB,CAAA,GAE/F,yBAEE;;;CAIV,MAAM,oBAAoB,SAAS,IAAI,WAAU,UAAS;EACxD,IAAI,eAA2D,MAAM,IAAI,MAAM,SAAS,sBAAsB;GAE5G,MAAM,aADoB,mBAAmB,MAAM,MAAM,SAAS,MAAM,MAAM,SAAS,MAAM,MAAM,cAChF,IAAqB,MAAM,MAAM,UAAU;GAC9D,OACE,oBAAC,iBAAiB,MAAlB;IACE,IAAG;IACH,MAAA;IACA,OAAO,MAAM,MAAM;IACnB,UAAU,MAAM,MAAM;IACtB,wBAAwB,OAAO;IAC/B,QAAQ;IACR,CAAA;;EAGN,IAAI,eAAsC,MAAM,EAAE;GAEhD,MAAM,aADoB,mBAAmB,MAAM,MAAM,SAAS,MAAM,MAAM,SAAS,MAAM,MAAM,cAChF,IAAqB,MAAM,MAAM,UAAU;GAC9D,OACE,oBAAC,iBAAiB,MAAlB;IACE,IAAI,MAAM,MAAM;IAChB,OAAO,MAAM,MAAM;IACnB,UAAU,MAAM,MAAM;IACtB,wBAAwB,OAAO;IAC/B,QAAQ;IACR,CAAA;SAGJ,OAAO;GAET;CAEF,OACE,oBAAC,kBAAD;EAAkB,QAAQ,OAAO;EAAQ,aAAa,OAAO;EAAa,eAAe;EAAa,QAAQ,UAAU;YACrH;EACgB,CAAA;;AAIvB,aAAa,WAAW;AACxB,aAAa,OAAO;;;ACpKpB,IAAA,uBAAe"}
+{"version":3,"file":"FilterDrawer.js","names":[],"sources":["../src/components/Filter/FilterDrawer/FilterDrawer.tsx","../src/components/Filter/FilterDrawer/index.ts"],"sourcesContent":["import { Children, isValidElement } from 'react';\n\nimport type { HNDesignsystemFilter } from '../../../resources/Resources';\nimport type { UseFilterDrawerReturn } from '../useFilterDrawer';\n\nimport { LanguageLocales } from '../../../constants';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport { formatResource } from '../../../utils/resource';\nimport Button from '../../Button';\nimport DrawerNavigation, { type DrawerViewProps } from '../DrawerNavigation/DrawerNavigation';\nimport LoaderSpinner from '../LoaderSpinner/LoaderSpinner';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterDrawerProps<ViewId extends string = string> {\n  /** The drawer state from useFilterDrawer */\n  drawer: UseFilterDrawerReturn<ViewId>;\n  /** Additional callback when the drawer closes (drawer.close() is always called automatically) */\n  onClose?: () => void;\n  /** Fully custom footer — overrides the default footer built from onReset/resultText */\n  footer?: React.ReactNode;\n  /** Shows LoaderSpinner in the footer when turned on */\n  isLoading?: boolean;\n  /** If provided, shows a \"Nullstill filter\" button in the default footer */\n  onReset?: () => void;\n  /** If provided, shows a result count in the footer */\n  resultCount?: number;\n  /** Resources for the component */\n  resources?: Partial<HNDesignsystemFilter>;\n  /** DrawerNavigation.View children defining the overview and filter views */\n  children: React.ReactNode;\n}\n\nexport interface FilterDrawerViewProps extends DrawerViewProps {\n  /** Hide reset button for view */\n  noResetButton?: boolean;\n  /** View specific close handler */\n  onClose?: () => void;\n  /** View specific reset handler */\n  onReset?: () => void;\n}\n\n/**\n * Never rendered directly — FilterDrawer reads its props and creates a DrawerNavigation.View\n * with id=\"overview\" and home=true.\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction FilterDrawerOverview(_props: Omit<DrawerViewProps, 'id' | 'home'>): React.ReactNode {\n  return null;\n}\n\n/**\n * Never rendered directly — FilterDrawer reads its props and creates a FilterDrawerView\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction FilterDrawerView(_props: FilterDrawerViewProps): React.ReactNode {\n  // DrawerView is never rendered directly — DrawerNavigation reads its props\n  return null;\n}\n\nfunction FilterDrawer<ViewId extends string>({\n  drawer,\n  onClose,\n  footer,\n  isLoading,\n  onReset,\n  resultCount,\n  resources,\n  children,\n}: FilterDrawerProps<ViewId>): React.ReactNode {\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const mergedResources = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const handleClose = (): void => {\n    if (onClose) {\n      onClose();\n    } else {\n      drawer.close();\n    }\n  };\n\n  const defaultResetButton = onReset && (\n    <Button onClick={onReset} variant=\"borderless\">\n      {mergedResources.resetButtonText}\n    </Button>\n  );\n  const defaultShowResultsButton = <Button onClick={handleClose}>{mergedResources.showButtonText}</Button>;\n\n  const resultText = resultCount !== undefined ? <span>{formatResource(mergedResources.resultsText, resultCount)}</span> : undefined;\n  const resultContent = isLoading ? <LoaderSpinner resources={mergedResources} /> : resultText;\n\n  const defaultFooterRight = (resultContent || defaultShowResultsButton) && (\n    <div className={styles['filter-drawer__footer__right']}>\n      {resultContent}\n      {defaultShowResultsButton}\n    </div>\n  );\n\n  const defaultFooter =\n    onReset || resultContent ? (\n      <div className={styles['filter-drawer__footer']}>\n        {defaultResetButton}\n        {defaultFooterRight}\n      </div>\n    ) : undefined;\n\n  const fallbackFooter = footer ?? defaultFooter;\n\n  const generateViewFooter = (viewOnReset?: () => void, viewOnClose?: () => void, noResetButton?: boolean): React.ReactNode => {\n    if (!viewOnReset && !viewOnClose && !noResetButton) {\n      return undefined;\n    }\n\n    const viewShowButton = viewOnClose ? <Button onClick={viewOnClose}>{mergedResources.showButtonText}</Button> : defaultShowResultsButton;\n\n    return (\n      <div className={styles['filter-drawer__footer']}>\n        {!noResetButton &&\n          (viewOnReset ? (\n            <Button onClick={viewOnReset} variant=\"borderless\">\n              {mergedResources.resetButtonText}\n            </Button>\n          ) : (\n            defaultResetButton\n          ))}\n        {(resultContent || viewShowButton) && (\n          <div className={styles['filter-drawer__footer__right']}>\n            {resultContent}\n            {viewShowButton}\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  const processedChildren = Children.map(children, child => {\n    if (isValidElement<Omit<FilterDrawerViewProps, 'id' | 'home'>>(child) && child.type === FilterDrawerOverview) {\n      const viewDefaultFooter = generateViewFooter(child.props.onReset, child.props.onClose, child.props.noResetButton);\n      const viewFooter = viewDefaultFooter ?? child.props.footer ?? fallbackFooter;\n      return (\n        <DrawerNavigation.View\n          id=\"overview\"\n          home\n          title={child.props.title}\n          children={child.props.children}\n          drawerContentClassname={styles['filter-drawer__view']}\n          footer={viewFooter}\n        />\n      );\n    }\n    if (isValidElement<FilterDrawerViewProps>(child)) {\n      const viewDefaultFooter = generateViewFooter(child.props.onReset, child.props.onClose, child.props.noResetButton);\n      const viewFooter = viewDefaultFooter ?? child.props.footer ?? fallbackFooter;\n      return (\n        <DrawerNavigation.View\n          id={child.props.id}\n          title={child.props.title}\n          children={child.props.children}\n          drawerContentClassname={styles['filter-drawer__view']}\n          footer={viewFooter}\n        />\n      );\n    } else {\n      return child;\n    }\n  });\n\n  return (\n    <DrawerNavigation isOpen={drawer.isOpen} initialView={drawer.initialView} onCloseButton={handleClose} footer={footer ?? defaultFooter}>\n      {processedChildren}\n    </DrawerNavigation>\n  );\n}\n\nFilterDrawer.Overview = FilterDrawerOverview;\nFilterDrawer.View = FilterDrawerView;\n\nexport default FilterDrawer;\n","import FilterDrawer from './FilterDrawer';\nexport * from './FilterDrawer';\nexport default FilterDrawer;\n"],"mappings":";;;;;;;;;;;;;;;AAgDA,SAAS,qBAAqB,QAA+D;CAC3F,OAAO;AACT;;;;AAMA,SAAS,iBAAiB,QAAgD;CAExE,OAAO;AACT;AAEA,SAAS,aAAoC,EAC3C,QACA,SACA,QACA,WACA,SACA,aACA,WACA,YAC6C;CAC7C,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAE3E,MAAM,kBAAkB;EACtB,GAFuB,aAAa,QAEjC;EACH,GAAG;CACL;CAEA,MAAM,oBAA0B;EAC9B,IAAI,SACF,QAAQ;OAER,OAAO,MAAM;CAEjB;CAEA,MAAM,qBAAqB,WACzB,oBAAC,gBAAD;EAAQ,SAAS;EAAS,SAAQ;YAC/B,gBAAgB;CACX,CAAA;CAEV,MAAM,2BAA2B,oBAAC,gBAAD;EAAQ,SAAS;YAAc,gBAAgB;CAAuB,CAAA;CAEvG,MAAM,aAAa,gBAAgB,KAAA,IAAY,oBAAC,QAAD,EAAA,UAAO,eAAe,gBAAgB,aAAa,WAAW,EAAQ,CAAA,IAAI,KAAA;CACzH,MAAM,gBAAgB,YAAY,oBAAC,eAAD,EAAe,WAAW,gBAAkB,CAAA,IAAI;CAElF,MAAM,sBAAsB,iBAAiB,6BAC3C,qBAAC,OAAD;EAAK,WAAW,OAAO;YAAvB,CACG,eACA,wBACE;;CAGP,MAAM,gBACJ,WAAW,gBACT,qBAAC,OAAD;EAAK,WAAW,OAAO;YAAvB,CACG,oBACA,kBACE;MACH,KAAA;CAEN,MAAM,iBAAiB,UAAU;CAEjC,MAAM,sBAAsB,aAA0B,aAA0B,kBAA6C;EAC3H,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,eACnC;EAGF,MAAM,iBAAiB,cAAc,oBAAC,gBAAD;GAAQ,SAAS;aAAc,gBAAgB;EAAuB,CAAA,IAAI;EAE/G,OACE,qBAAC,OAAD;GAAK,WAAW,OAAO;aAAvB,CACG,CAAC,kBACC,cACC,oBAAC,gBAAD;IAAQ,SAAS;IAAa,SAAQ;cACnC,gBAAgB;GACX,CAAA,IAER,sBAEF,iBAAiB,mBACjB,qBAAC,OAAD;IAAK,WAAW,OAAO;cAAvB,CACG,eACA,cACE;KAEJ;;CAET;CAEA,MAAM,oBAAoB,SAAS,IAAI,WAAU,UAAS;EACxD,IAAI,eAA2D,KAAK,KAAK,MAAM,SAAS,sBAAsB;GAE5G,MAAM,aADoB,mBAAmB,MAAM,MAAM,SAAS,MAAM,MAAM,SAAS,MAAM,MAAM,aAChF,KAAqB,MAAM,MAAM,UAAU;GAC9D,OACE,oBAAC,iBAAiB,MAAlB;IACE,IAAG;IACH,MAAA;IACA,OAAO,MAAM,MAAM;IACnB,UAAU,MAAM,MAAM;IACtB,wBAAwB,OAAO;IAC/B,QAAQ;GACT,CAAA;EAEL;EACA,IAAI,eAAsC,KAAK,GAAG;GAEhD,MAAM,aADoB,mBAAmB,MAAM,MAAM,SAAS,MAAM,MAAM,SAAS,MAAM,MAAM,aAChF,KAAqB,MAAM,MAAM,UAAU;GAC9D,OACE,oBAAC,iBAAiB,MAAlB;IACE,IAAI,MAAM,MAAM;IAChB,OAAO,MAAM,MAAM;IACnB,UAAU,MAAM,MAAM;IACtB,wBAAwB,OAAO;IAC/B,QAAQ;GACT,CAAA;EAEL,OACE,OAAO;CAEX,CAAC;CAED,OACE,oBAAC,kBAAD;EAAkB,QAAQ,OAAO;EAAQ,aAAa,OAAO;EAAa,eAAe;EAAa,QAAQ,UAAU;YACrH;CACe,CAAA;AAEtB;AAEA,aAAa,WAAW;AACxB,aAAa,OAAO;;;AClLpB,IAAA,uBAAe"}

package/lib/FilterLinkList.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterLinkList.js","names":[],"sources":["../src/components/Filter/FilterLinkList/FilterLinkList.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../../constants';\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport Icon from '../../Icon';\nimport ChevronRight from '../../Icons/ChevronRight';\n\nimport styles from './FilterLinkList.module.scss';\n\nexport type LinkType = React.FC<LinkProps>;\n\nexport interface CompoundComponent extends React.FC<LinkListProps> {\n  Link: LinkType;\n}\n\nexport interface LinkListProps {\n  /** Items in the LinkList */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the ul element */\n  ref?: React.Ref<HTMLUListElement | null>;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\nexport type LinkProps = Modify<\n  React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,\n  {\n    /** If needed children will be content instead of title and chips. Use only in edge cases */\n    children?: React.ReactNode;\n    /** Title text on link element */\n    title?: string;\n    /** Texts rendered inside non-interactive chips on link element */\n    chips?: string[];\n    /** Custom classname for link element */\n    className?: string;\n    /** Ref for button */\n    linkRef?: React.RefObject<HTMLButtonElement | null>;\n    /** Sets the data-testid attribute. */\n    testId?: string;\n    /** Ref passed to the list item element */\n    ref?: React.Ref<HTMLLIElement | null>;\n  }\n>;\n\nexport const Link: LinkType = (props: LinkProps) => {\n  const { children, title, chips, className = '', linkRef, testId, ref, ...restProps } = props;\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement | null>(linkRef);\n\n  const liClasses = cn(styles['link-list__item']);\n  const linkClasses = cn(styles['link-list__button'], className);\n\n  return (\n    <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      <button className={linkClasses} ref={refObject as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n        <div className={styles['link-list__button__content']}>\n          {title ? (\n            <>\n              <span>{title}</span>\n              {chips && chips.length > 0 && (\n                <div className={styles['link-list__chip-list']}>\n                  {chips.map(chip => (\n                    <span className={styles['link-list__chip']} key={chip}>\n                      {chip}\n                    </span>\n                  ))}\n                </div>\n              )}\n            </>\n          ) : (\n            <>{children}</>\n          )}\n        </div>\n        <Icon svgIcon={ChevronRight} isHovered={isHovered} size={IconSize.XSmall} color={'var(--color-action-graphics-onlight)'} />\n      </button>\n    </li>\n  );\n};\n\nconst LinkListComponent: React.FC<LinkListProps> = (props: LinkListProps) => {\n  const { children, className = '', testId, ref } = props;\n\n  const listClassNames = cn(styles['link-list'], className);\n\n  return (\n    <ul ref={ref} className={listClassNames} data-testid={testId} data-analyticsid={AnalyticsId.LinkList}>\n      {React.Children.map(children, (child: React.ReactNode) => {\n        if (React.isValidElement<LinkProps>(child) && child.type === Link) {\n          return React.cloneElement(child);\n        }\n      })}\n    </ul>\n  );\n};\n\nexport const FilterLinkList = LinkListComponent as CompoundComponent;\n\nFilterLinkList.displayName = 'FilterLinkList';\nFilterLinkList.Link = Link;\nLink.displayName = 'FilterLinkList.Link';\n\nexport default FilterLinkList;\n"],"mappings":";;;;;;;;;AAkDA,IAAa,QAAkB,UAAqB;CAClD,MAAM,EAAE,UAAU,OAAO,OAAO,YAAY,IAAI,SAAS,QAAQ,KAAK,GAAG,cAAc;CACvF,MAAM,EAAE,WAAW,cAAc,iBAA2C,QAAQ;CAEpF,MAAM,YAAY,WAAG,OAAO,mBAAmB;CAC/C,MAAM,cAAc,WAAG,OAAO,sBAAsB,UAAU;CAE9D,OACE,oBAAC,MAAD;EAAI,WAAW;EAAgB;EAAK,eAAa;EAAQ,oBAAkB,YAAY;YACrF,qBAAC,UAAD;GAAQ,WAAW;GAAa,KAAK;GAAiD,MAAK;GAAS,GAAI;aAAxG,CACE,oBAAC,OAAD;IAAK,WAAW,OAAO;cACpB,QACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,OAAa,CAAA,EACnB,SAAS,MAAM,SAAS,KACvB,oBAAC,OAAD;KAAK,WAAW,OAAO;eACpB,MAAM,KAAI,SACT,oBAAC,QAAD;MAAM,WAAW,OAAO;gBACrB;MACI,EAF0C,KAE1C,CACP;KACE,CAAA,CAEP,EAAA,CAAA,GAEH,oBAAA,UAAA,EAAG,UAAY,CAAA;IAEb,CAAA,EACN,oBAAC,cAAD;IAAM,SAAS;IAAyB;IAAW,MAAM,SAAS;IAAQ,OAAO;IAA0C,CAAA,CACpH;;EACN,CAAA;;AAIT,IAAM,qBAA8C,UAAyB;CAC3E,MAAM,EAAE,UAAU,YAAY,IAAI,QAAQ,QAAQ;CAIlD,OACE,oBAAC,MAAD;EAAS;EAAK,WAHO,WAAG,OAAO,cAAc,UAGpB;EAAgB,eAAa;EAAQ,oBAAkB,YAAY;YACzF,MAAM,SAAS,IAAI,WAAW,UAA2B;GACxD,IAAI,MAAM,eAA0B,MAAM,IAAI,MAAM,SAAS,MAC3D,OAAO,MAAM,aAAa,MAAM;IAElC;EACC,CAAA;;AAIT,IAAa,iBAAiB;AAE9B,eAAe,cAAc;AAC7B,eAAe,OAAO;AACtB,KAAK,cAAc"}
+{"version":3,"file":"FilterLinkList.js","names":[],"sources":["../src/components/Filter/FilterLinkList/FilterLinkList.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../../constants';\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport Icon from '../../Icon';\nimport ChevronRight from '../../Icons/ChevronRight';\n\nimport styles from './FilterLinkList.module.scss';\n\nexport type LinkType = React.FC<LinkProps>;\n\nexport interface CompoundComponent extends React.FC<LinkListProps> {\n  Link: LinkType;\n}\n\nexport interface LinkListProps {\n  /** Items in the LinkList */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the ul element */\n  ref?: React.Ref<HTMLUListElement | null>;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\nexport type LinkProps = Modify<\n  React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,\n  {\n    /** If needed children will be content instead of title and chips. Use only in edge cases */\n    children?: React.ReactNode;\n    /** Title text on link element */\n    title?: string;\n    /** Texts rendered inside non-interactive chips on link element */\n    chips?: string[];\n    /** Custom classname for link element */\n    className?: string;\n    /** Ref for button */\n    linkRef?: React.RefObject<HTMLButtonElement | null>;\n    /** Sets the data-testid attribute. */\n    testId?: string;\n    /** Ref passed to the list item element */\n    ref?: React.Ref<HTMLLIElement | null>;\n  }\n>;\n\nexport const Link: LinkType = (props: LinkProps) => {\n  const { children, title, chips, className = '', linkRef, testId, ref, ...restProps } = props;\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement | null>(linkRef);\n\n  const liClasses = cn(styles['link-list__item']);\n  const linkClasses = cn(styles['link-list__button'], className);\n\n  return (\n    <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      <button className={linkClasses} ref={refObject as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n        <div className={styles['link-list__button__content']}>\n          {title ? (\n            <>\n              <span>{title}</span>\n              {chips && chips.length > 0 && (\n                <div className={styles['link-list__chip-list']}>\n                  {chips.map(chip => (\n                    <span className={styles['link-list__chip']} key={chip}>\n                      {chip}\n                    </span>\n                  ))}\n                </div>\n              )}\n            </>\n          ) : (\n            <>{children}</>\n          )}\n        </div>\n        <Icon svgIcon={ChevronRight} isHovered={isHovered} size={IconSize.XSmall} color={'var(--color-action-graphics-onlight)'} />\n      </button>\n    </li>\n  );\n};\n\nconst LinkListComponent: React.FC<LinkListProps> = (props: LinkListProps) => {\n  const { children, className = '', testId, ref } = props;\n\n  const listClassNames = cn(styles['link-list'], className);\n\n  return (\n    <ul ref={ref} className={listClassNames} data-testid={testId} data-analyticsid={AnalyticsId.LinkList}>\n      {React.Children.map(children, (child: React.ReactNode) => {\n        if (React.isValidElement<LinkProps>(child) && child.type === Link) {\n          return React.cloneElement(child);\n        }\n      })}\n    </ul>\n  );\n};\n\nexport const FilterLinkList = LinkListComponent as CompoundComponent;\n\nFilterLinkList.displayName = 'FilterLinkList';\nFilterLinkList.Link = Link;\nLink.displayName = 'FilterLinkList.Link';\n\nexport default FilterLinkList;\n"],"mappings":";;;;;;;;;AAkDA,IAAa,QAAkB,UAAqB;CAClD,MAAM,EAAE,UAAU,OAAO,OAAO,YAAY,IAAI,SAAS,QAAQ,KAAK,GAAG,cAAc;CACvF,MAAM,EAAE,WAAW,cAAc,iBAA2C,OAAO;CAEnF,MAAM,YAAY,WAAG,OAAO,kBAAkB;CAC9C,MAAM,cAAc,WAAG,OAAO,sBAAsB,SAAS;CAE7D,OACE,oBAAC,MAAD;EAAI,WAAW;EAAgB;EAAK,eAAa;EAAQ,oBAAkB,YAAY;YACrF,qBAAC,UAAD;GAAQ,WAAW;GAAa,KAAK;GAAiD,MAAK;GAAS,GAAI;aAAxG,CACE,oBAAC,OAAD;IAAK,WAAW,OAAO;cACpB,QACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,GAClB,SAAS,MAAM,SAAS,KACvB,oBAAC,OAAD;KAAK,WAAW,OAAO;eACpB,MAAM,KAAI,SACT,oBAAC,QAAD;MAAM,WAAW,OAAO;gBACrB;KACG,GAF2C,IAE3C,CACP;IACE,CAAA,CAEP,EAAA,CAAA,IAEF,oBAAA,UAAA,EAAG,SAAW,CAAA;GAEb,CAAA,GACL,oBAAC,cAAD;IAAM,SAAS;IAAyB;IAAW,MAAM,SAAS;IAAQ,OAAO;GAAyC,CAAA,CACpH;;CACN,CAAA;AAER;AAEA,IAAM,qBAA8C,UAAyB;CAC3E,MAAM,EAAE,UAAU,YAAY,IAAI,QAAQ,QAAQ;CAIlD,OACE,oBAAC,MAAD;EAAS;EAAK,WAHO,WAAG,OAAO,cAAc,SAGpB;EAAgB,eAAa;EAAQ,oBAAkB,YAAY;YACzF,MAAM,SAAS,IAAI,WAAW,UAA2B;GACxD,IAAI,MAAM,eAA0B,KAAK,KAAK,MAAM,SAAS,MAC3D,OAAO,MAAM,aAAa,KAAK;EAEnC,CAAC;CACC,CAAA;AAER;AAEA,IAAa,iBAAiB;AAE9B,eAAe,cAAc;AAC7B,eAAe,OAAO;AACtB,KAAK,cAAc"}

package/lib/FilterOverviewLinkList.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterOverviewLinkList.js","names":[],"sources":["../src/components/Filter/FilterOverviewLinkList/FilterOverviewLinkList.tsx","../src/components/Filter/FilterOverviewLinkList/index.ts"],"sourcesContent":["import type { FilterValues, UseFilterReturn } from '../useFilter';\n\nimport { useDrawerNavigation } from '../DrawerNavigation';\nimport FilterLinkList from '../FilterLinkList/FilterLinkList';\n\nexport interface FilterOverviewLink {\n  /** The filter key to read values from */\n  filterKey: string;\n  /** Display title for the link */\n  title: string;\n  /** View ID to navigate to when clicked. Defaults to filterKey */\n  viewId?: string;\n}\n\nexport interface FilterOverviewLinkListProps<T extends FilterValues> {\n  /** The filter instance from useFilter */\n  filter: UseFilterReturn<T>;\n  /** Look up the display label for a filter key + value */\n  getLabel: (key: keyof T, value: unknown) => string;\n  /** Configuration for which filter keys to show as links */\n  links: FilterOverviewLink[];\n}\n\nfunction FilterOverviewLinkList<T extends FilterValues>({ filter, getLabel, links }: FilterOverviewLinkListProps<T>): React.ReactNode {\n  const { goToView } = useDrawerNavigation();\n\n  return (\n    <FilterLinkList>\n      {links.map(({ filterKey, title, viewId }) => {\n        const raw = filter.filters[filterKey as keyof T];\n\n        let chips: string[];\n        if (Array.isArray(raw)) {\n          chips = raw.map(v => getLabel(filterKey as keyof T, v));\n        } else if (raw !== undefined && raw !== null) {\n          chips = [getLabel(filterKey as keyof T, raw)];\n        } else {\n          chips = [];\n        }\n\n        return <FilterLinkList.Link key={filterKey} title={title} chips={chips} onClick={() => goToView(viewId ?? filterKey)} />;\n      })}\n    </FilterLinkList>\n  );\n}\n\nexport default FilterOverviewLinkList;\n","import FilterOverviewLinkList from './FilterOverviewLinkList';\nexport * from './FilterOverviewLinkList';\nexport default FilterOverviewLinkList;\n"],"mappings":";;;;AAuBA,SAAS,uBAA+C,EAAE,QAAQ,UAAU,SAA0D;CACpI,MAAM,EAAE,aAAa,qBAAqB;CAE1C,OACE,oBAAC,gBAAD,EAAA,UACG,MAAM,KAAK,EAAE,WAAW,OAAO,aAAa;EAC3C,MAAM,MAAM,OAAO,QAAQ;EAE3B,IAAI;EACJ,IAAI,MAAM,QAAQ,IAAI,EACpB,QAAQ,IAAI,KAAI,MAAK,SAAS,WAAsB,EAAE,CAAC;OAClD,IAAI,QAAQ,KAAA,KAAa,QAAQ,MACtC,QAAQ,CAAC,SAAS,WAAsB,IAAI,CAAC;OAE7C,QAAQ,EAAE;EAGZ,OAAO,oBAAC,eAAe,MAAhB;GAA4C;GAAc;GAAO,eAAe,SAAS,UAAU,UAAU;GAAI,EAAvF,UAAuF;GACxH,EACa,CAAA;;;;ACxCrB,IAAA,iCAAe"}
+{"version":3,"file":"FilterOverviewLinkList.js","names":[],"sources":["../src/components/Filter/FilterOverviewLinkList/FilterOverviewLinkList.tsx","../src/components/Filter/FilterOverviewLinkList/index.ts"],"sourcesContent":["import type { FilterValues, UseFilterReturn } from '../useFilter';\n\nimport { useDrawerNavigation } from '../DrawerNavigation';\nimport FilterLinkList from '../FilterLinkList/FilterLinkList';\n\nexport interface FilterOverviewLink {\n  /** The filter key to read values from */\n  filterKey: string;\n  /** Display title for the link */\n  title: string;\n  /** View ID to navigate to when clicked. Defaults to filterKey */\n  viewId?: string;\n}\n\nexport interface FilterOverviewLinkListProps<T extends FilterValues> {\n  /** The filter instance from useFilter */\n  filter: UseFilterReturn<T>;\n  /** Look up the display label for a filter key + value */\n  getLabel: (key: keyof T, value: unknown) => string;\n  /** Configuration for which filter keys to show as links */\n  links: FilterOverviewLink[];\n}\n\nfunction FilterOverviewLinkList<T extends FilterValues>({ filter, getLabel, links }: FilterOverviewLinkListProps<T>): React.ReactNode {\n  const { goToView } = useDrawerNavigation();\n\n  return (\n    <FilterLinkList>\n      {links.map(({ filterKey, title, viewId }) => {\n        const raw = filter.filters[filterKey as keyof T];\n\n        let chips: string[];\n        if (Array.isArray(raw)) {\n          chips = raw.map(v => getLabel(filterKey as keyof T, v));\n        } else if (raw !== undefined && raw !== null) {\n          chips = [getLabel(filterKey as keyof T, raw)];\n        } else {\n          chips = [];\n        }\n\n        return <FilterLinkList.Link key={filterKey} title={title} chips={chips} onClick={() => goToView(viewId ?? filterKey)} />;\n      })}\n    </FilterLinkList>\n  );\n}\n\nexport default FilterOverviewLinkList;\n","import FilterOverviewLinkList from './FilterOverviewLinkList';\nexport * from './FilterOverviewLinkList';\nexport default FilterOverviewLinkList;\n"],"mappings":";;;;AAuBA,SAAS,uBAA+C,EAAE,QAAQ,UAAU,SAA0D;CACpI,MAAM,EAAE,aAAa,oBAAoB;CAEzC,OACE,oBAAC,gBAAD,EAAA,UACG,MAAM,KAAK,EAAE,WAAW,OAAO,aAAa;EAC3C,MAAM,MAAM,OAAO,QAAQ;EAE3B,IAAI;EACJ,IAAI,MAAM,QAAQ,GAAG,GACnB,QAAQ,IAAI,KAAI,MAAK,SAAS,WAAsB,CAAC,CAAC;OACjD,IAAI,QAAQ,KAAA,KAAa,QAAQ,MACtC,QAAQ,CAAC,SAAS,WAAsB,GAAG,CAAC;OAE5C,QAAQ,CAAC;EAGX,OAAO,oBAAC,eAAe,MAAhB;GAA4C;GAAc;GAAO,eAAe,SAAS,UAAU,SAAS;EAAI,GAAtF,SAAsF;CACzH,CAAC,EACa,CAAA;AAEpB;;;AC1CA,IAAA,iCAAe"}

package/lib/FilterOverviewSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterOverviewSearch.js","names":[],"sources":["../src/components/Filter/FilterOverviewSearch/FilterOverviewSearch.tsx","../src/components/Filter/FilterOverviewSearch/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport type { FilterSearchProps } from '../FilterSearch/FilterSearch';\n\nimport FilterSearch from '../FilterSearch/FilterSearch';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterOverviewSearchProps extends FilterSearchProps {\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst FilterOverviewSearch: React.FC<FilterOverviewSearchProps> = props => {\n  const { wrapperClassName, testId, ...filterSearchProps } = props;\n\n  return (\n    <div className={cn(styles['filter-overview-search'], wrapperClassName)} data-testid={testId}>\n      <FilterSearch {...filterSearchProps} />\n    </div>\n  );\n};\n\nexport default FilterOverviewSearch;\n","import FilterOverviewSearch from './FilterOverviewSearch';\nexport * from './FilterOverviewSearch';\nexport default FilterOverviewSearch;\n"],"mappings":";;;;;AAeA,IAAM,wBAA4D,UAAS;CACzE,MAAM,EAAE,kBAAkB,QAAQ,GAAG,sBAAsB;CAE3D,OACE,oBAAC,OAAD;EAAK,WAAW,WAAG,OAAO,2BAA2B,iBAAiB;EAAE,eAAa;YACnF,oBAAC,cAAD,EAAc,GAAI,mBAAqB,CAAA;EACnC,CAAA;;;;ACnBV,IAAA,+BAAe"}
+{"version":3,"file":"FilterOverviewSearch.js","names":[],"sources":["../src/components/Filter/FilterOverviewSearch/FilterOverviewSearch.tsx","../src/components/Filter/FilterOverviewSearch/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport type { FilterSearchProps } from '../FilterSearch/FilterSearch';\n\nimport FilterSearch from '../FilterSearch/FilterSearch';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterOverviewSearchProps extends FilterSearchProps {\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst FilterOverviewSearch: React.FC<FilterOverviewSearchProps> = props => {\n  const { wrapperClassName, testId, ...filterSearchProps } = props;\n\n  return (\n    <div className={cn(styles['filter-overview-search'], wrapperClassName)} data-testid={testId}>\n      <FilterSearch {...filterSearchProps} />\n    </div>\n  );\n};\n\nexport default FilterOverviewSearch;\n","import FilterOverviewSearch from './FilterOverviewSearch';\nexport * from './FilterOverviewSearch';\nexport default FilterOverviewSearch;\n"],"mappings":";;;;;AAeA,IAAM,wBAA4D,UAAS;CACzE,MAAM,EAAE,kBAAkB,QAAQ,GAAG,sBAAsB;CAE3D,OACE,oBAAC,OAAD;EAAK,WAAW,WAAG,OAAO,2BAA2B,gBAAgB;EAAG,eAAa;YACnF,oBAAC,cAAD,EAAc,GAAI,kBAAoB,CAAA;CACnC,CAAA;AAET;;;ACrBA,IAAA,+BAAe"}

package/lib/FilterResultCountAndSortWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterResultCountAndSortWrapper.js","names":[],"sources":["../src/components/Filter/FilterResultCountAndSortWrapper/FilterResultCountAndSortWrapper.tsx","../src/components/Filter/FilterResultCountAndSortWrapper/index.ts"],"sourcesContent":["import styles from './styles.module.scss';\n\nexport interface FilterResultCountAndSortWrapper {\n  /** Result count content area */\n  resultCount?: React.ReactNode;\n  /** FilterSort content area */\n  sortComponent?: React.ReactNode;\n}\n\nconst FilterResultCountAndSortWrapper: React.FC<FilterResultCountAndSortWrapper> = props => {\n  const { resultCount, sortComponent } = props;\n\n  return (\n    <div className={styles['filter-result-count-and-sort-wrapper']}>\n      <span className={styles['filter-result-count-and-sort-wrapper__count']}>{resultCount}</span>\n      <span className={styles['filter-result-count-and-sort-wrapper__sort']}>{sortComponent}</span>\n    </div>\n  );\n};\n\nexport default FilterResultCountAndSortWrapper;\n","import FilterResultCountAndSortWrapper from './FilterResultCountAndSortWrapper';\nexport * from './FilterResultCountAndSortWrapper';\nexport default FilterResultCountAndSortWrapper;\n"],"mappings":";;;AASA,IAAM,mCAA6E,UAAS;CAC1F,MAAM,EAAE,aAAa,kBAAkB;CAEvC,OACE,qBAAC,OAAD;EAAK,WAAW,OAAO;YAAvB,CACE,oBAAC,QAAD;GAAM,WAAW,OAAO;aAAiD;GAAmB,CAAA,EAC5F,oBAAC,QAAD;GAAM,WAAW,OAAO;aAAgD;GAAqB,CAAA,CACzF;;;;;ACdV,IAAA,0CAAe"}
+{"version":3,"file":"FilterResultCountAndSortWrapper.js","names":[],"sources":["../src/components/Filter/FilterResultCountAndSortWrapper/FilterResultCountAndSortWrapper.tsx","../src/components/Filter/FilterResultCountAndSortWrapper/index.ts"],"sourcesContent":["import styles from './styles.module.scss';\n\nexport interface FilterResultCountAndSortWrapper {\n  /** Result count content area */\n  resultCount?: React.ReactNode;\n  /** FilterSort content area */\n  sortComponent?: React.ReactNode;\n}\n\nconst FilterResultCountAndSortWrapper: React.FC<FilterResultCountAndSortWrapper> = props => {\n  const { resultCount, sortComponent } = props;\n\n  return (\n    <div className={styles['filter-result-count-and-sort-wrapper']}>\n      <span className={styles['filter-result-count-and-sort-wrapper__count']}>{resultCount}</span>\n      <span className={styles['filter-result-count-and-sort-wrapper__sort']}>{sortComponent}</span>\n    </div>\n  );\n};\n\nexport default FilterResultCountAndSortWrapper;\n","import FilterResultCountAndSortWrapper from './FilterResultCountAndSortWrapper';\nexport * from './FilterResultCountAndSortWrapper';\nexport default FilterResultCountAndSortWrapper;\n"],"mappings":";;;AASA,IAAM,mCAA6E,UAAS;CAC1F,MAAM,EAAE,aAAa,kBAAkB;CAEvC,OACE,qBAAC,OAAD;EAAK,WAAW,OAAO;YAAvB,CACE,oBAAC,QAAD;GAAM,WAAW,OAAO;aAAiD;EAAkB,CAAA,GAC3F,oBAAC,QAAD;GAAM,WAAW,OAAO;aAAgD;EAAoB,CAAA,CACzF;;AAET;;;AChBA,IAAA,0CAAe"}