@helsenorge/designsystem-react 15.7.1 → 16.0.0

package/lib/Close.js

@@ -15,7 +15,7 @@ var Close = (props) => {
 	let iconColor;
 	if (color === "black") iconColor = "black";
 	else if (color === "plum") iconColor = "var(--core-color-plum-700)";
-	else iconColor = "var(--color-action-graphics-onlight)";
+	else iconColor = "var(--color-action-graphics-dark-normal)";
 	const closeClasses = classNames(styles.close, { [styles["close--small"]]: small }, className);
 	return /* @__PURE__ */ jsx("button", {
 		ref: mergeRefs([ref, refObject]),

package/lib/Close.js.map

@@ -1 +1 @@
-{"version":3,"file":"Close.js","names":[],"sources":["../src/components/Close/Close.tsx","../src/components/Close/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface CloseProps {\n  /** Keeps the icon small for all screen sizes */\n  small?: boolean;\n  /** Function is called when user clicks the button */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Gives color to the svg */\n  color?: 'blueberry' | 'black' | 'plum';\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLButtonElement | null>;\n}\n\nconst Close: React.FC<CloseProps> = props => {\n  const { small, testId, ariaLabel = 'Lukk', onClick, className, color = 'blueberry', ref } = props;\n  const { refObject, isHovered } = usePseudoClasses();\n\n  const iconSize = useIsMobileBreakpoint() || small ? 38 : 48;\n\n  let iconColor;\n  if (color === 'black') {\n    iconColor = 'black';\n  } else if (color === 'plum') {\n    iconColor = 'var(--core-color-plum-700)';\n  } else {\n    iconColor = 'var(--color-action-graphics-onlight)';\n  }\n\n  const closeClasses = classNames(styles.close, { [styles['close--small']]: small }, className);\n\n  return (\n    <button\n      ref={mergeRefs([ref, refObject])}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Close}\n      className={closeClasses}\n      aria-label={ariaLabel}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <span\n        className={classNames(styles['close__inner-container'], {\n          [styles['close__inner-container--small']]: small,\n          [styles['close__inner-container--plum']]: color == 'plum',\n        })}\n      >\n        <Icon svgIcon={X} color={iconColor} size={iconSize} isHovered={isHovered} />\n      </span>\n    </button>\n  );\n};\n\nexport default Close;\n","import Close from './Close';\nexport * from './Close';\nexport default Close;\n"],"mappings":";;;;;;;;;;AA4BA,IAAM,SAA8B,UAAS;CAC3C,MAAM,EAAE,OAAO,QAAQ,YAAY,QAAQ,SAAS,WAAW,QAAQ,aAAa,QAAQ;CAC5F,MAAM,EAAE,WAAW,cAAc,iBAAiB;CAElD,MAAM,WAAW,sBAAsB,KAAK,QAAQ,KAAK;CAEzD,IAAI;CACJ,IAAI,UAAU,SACZ,YAAY;MACP,IAAI,UAAU,QACnB,YAAY;MAEZ,YAAY;CAGd,MAAM,eAAe,WAAW,OAAO,OAAO,GAAG,OAAO,kBAAkB,MAAM,GAAG,SAAS;CAE5F,OACE,oBAAC,UAAD;EACE,KAAK,UAAU,CAAC,KAAK,SAAS,CAAC;EAC/B,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,cAAY;EACH;EACT,MAAK;EAEL,UAAA,oBAAC,QAAD;GACE,WAAW,WAAW,OAAO,2BAA2B;KACrD,OAAO,mCAAmC;KAC1C,OAAO,kCAAkC,SAAS;GACrD,CAAC;GAED,UAAA,oBAAC,cAAD;IAAM,SAAS;IAAG,OAAO;IAAW,MAAM;IAAqB;GAAY,CAAA;EACvE,CAAA;CACA,CAAA;AAEZ;;;AC/DA,IAAA,gBAAe"}
+{"version":3,"file":"Close.js","names":[],"sources":["../src/components/Close/Close.tsx","../src/components/Close/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface CloseProps {\n  /** Keeps the icon small for all screen sizes */\n  small?: boolean;\n  /** Function is called when user clicks the button */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Gives color to the svg */\n  color?: 'blueberry' | 'black' | 'plum';\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLButtonElement | null>;\n}\n\nconst Close: React.FC<CloseProps> = props => {\n  const { small, testId, ariaLabel = 'Lukk', onClick, className, color = 'blueberry', ref } = props;\n  const { refObject, isHovered } = usePseudoClasses();\n\n  const iconSize = useIsMobileBreakpoint() || small ? 38 : 48;\n\n  let iconColor;\n  if (color === 'black') {\n    iconColor = 'black';\n  } else if (color === 'plum') {\n    iconColor = 'var(--core-color-plum-700)';\n  } else {\n    iconColor = 'var(--color-action-graphics-dark-normal)';\n  }\n\n  const closeClasses = classNames(styles.close, { [styles['close--small']]: small }, className);\n\n  return (\n    <button\n      ref={mergeRefs([ref, refObject])}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Close}\n      className={closeClasses}\n      aria-label={ariaLabel}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <span\n        className={classNames(styles['close__inner-container'], {\n          [styles['close__inner-container--small']]: small,\n          [styles['close__inner-container--plum']]: color == 'plum',\n        })}\n      >\n        <Icon svgIcon={X} color={iconColor} size={iconSize} isHovered={isHovered} />\n      </span>\n    </button>\n  );\n};\n\nexport default Close;\n","import Close from './Close';\nexport * from './Close';\nexport default Close;\n"],"mappings":";;;;;;;;;;AA4BA,IAAM,SAA8B,UAAS;CAC3C,MAAM,EAAE,OAAO,QAAQ,YAAY,QAAQ,SAAS,WAAW,QAAQ,aAAa,QAAQ;CAC5F,MAAM,EAAE,WAAW,cAAc,iBAAiB;CAElD,MAAM,WAAW,sBAAsB,KAAK,QAAQ,KAAK;CAEzD,IAAI;CACJ,IAAI,UAAU,SACZ,YAAY;MACP,IAAI,UAAU,QACnB,YAAY;MAEZ,YAAY;CAGd,MAAM,eAAe,WAAW,OAAO,OAAO,GAAG,OAAO,kBAAkB,MAAM,GAAG,SAAS;CAE5F,OACE,oBAAC,UAAD;EACE,KAAK,UAAU,CAAC,KAAK,SAAS,CAAC;EAC/B,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,cAAY;EACH;EACT,MAAK;EAEL,UAAA,oBAAC,QAAD;GACE,WAAW,WAAW,OAAO,2BAA2B;KACrD,OAAO,mCAAmC;KAC1C,OAAO,kCAAkC,SAAS;GACrD,CAAC;GAED,UAAA,oBAAC,cAAD;IAAM,SAAS;IAAG,OAAO;IAAW,MAAM;IAAqB;GAAY,CAAA;EACvE,CAAA;CACA,CAAA;AAEZ;;;AC/DA,IAAA,gBAAe"}

package/lib/Drawer.js

@@ -65,7 +65,7 @@ var DrawerBackButton = (props) => {
 			className: classNames(styles["back-button__inner-container"]),
 			children: /* @__PURE__ */ jsx(Icon_default, {
 				svgIcon: ChevronLeft,
-				color: "var(--color-action-graphics-onlight",
+				color: "var(--color-action-graphics-dark-normal",
 				size: iconSize,
 				isHovered
 			})
@@ -106,7 +106,7 @@ var Drawer = (props) => {
 	}) });
 };
 var InnerDrawer = (props) => {
-	const { ariaLabel, ariaLabelledBy, children, closeColor = "blueberry", desktopDirection = "left", footerContent, headerClasses, headerContent, noCloseButton = false, onPrimaryAction, onRequestClose, onSecondaryAction, primaryActionText, secondaryActionText, title, titleHtmlMarkup = "h3", titleId = uuid(), zIndex = ZIndex.OverlayScreen, resources, isMobile, withBackButton, onRequestBack, contentClassName, paddingSize = "normal" } = props;
+	const { ariaLabel, ariaLabelledBy, children, closeColor = "blueberry", desktopDirection = "left", footerContent, headerClasses, headerContent, noCloseButton = false, onPrimaryAction, onRequestClose, onSecondaryAction, primaryActionText, secondaryActionText, title, titleHtmlMarkup = "h3", titleId = uuid(), zIndex = ZIndex.OverlayScreen, resources, isMobile, contentClassName, paddingSize = "normal" } = props;
 	const ariaLabelAttributes = getAriaLabelAttributes({
 		label: ariaLabel,
 		id: ariaLabelledBy,
@@ -217,8 +217,6 @@ var InnerDrawer = (props) => {
 		titleId: ariaLabelAttributes?.["aria-labelledby"],
 		titleRef,
 		titleHtmlMarkup,
-		withBackButton: withBackButton && onRequestBack !== void 0,
-		onRequestBack,
 		backButtonAriaLabel: mergedResources.ariaLabelBackButton
 	});
 	return /* @__PURE__ */ jsxs("div", {

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/resources/HN.Designsystem.Drawer.se-NO.json","../src/components/Drawer/resourceHelper.ts","../src/components/Drawer/DrawerBackButton.tsx","../src/components/Drawer/DrawerHeaderContent.tsx","../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","{\n  \"ariaLabelCloseBtn\": \"Gidde\",\n  \"ariaLabelBackButton\": \"Mana ruovttoluotta\"\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';\nimport seNO from '../../resources/HN.Designsystem.Drawer.se-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.SAMI_NORTHERN:\n      return seNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import classNames from 'classnames';\n\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport Icon from '../Icon';\nimport ChevronLeft from '../Icons/ChevronLeft';\n\nimport styles from './DrawerBackButton.module.scss';\n\nexport interface DrawerBackButtonProps {\n  /** Function is called when user clicks the button */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n}\n\nconst DrawerBackButton: React.FC<DrawerBackButtonProps> = props => {\n  const { ariaLabel = 'Tilbake', onClick, className } = props;\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n\n  const iconSize = useIsMobileBreakpoint() ? 38 : 48;\n\n  return (\n    <button ref={refObject} className={classNames(styles['back-button'], className)} aria-label={ariaLabel} onClick={onClick} type=\"button\">\n      <span className={classNames(styles['back-button__inner-container'])}>\n        <Icon svgIcon={ChevronLeft} color={'var(--color-action-graphics-onlight'} size={iconSize} isHovered={isHovered} />\n      </span>\n    </button>\n  );\n};\n\nexport default DrawerBackButton;\n","import type React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { TitleTags } from '../Title';\n\nimport DrawerBackButton from './DrawerBackButton';\nimport Title from '../Title';\n\nimport styles from './DrawerHeaderContent.module.scss';\n\nexport interface DrawerHeaderContentProps {\n  /** Title shown in the header */\n  title?: React.ReactNode;\n  /** id of the title element */\n  titleId?: string;\n  /** Ref passed to the title heading element */\n  titleRef?: React.Ref<HTMLHeadingElement | null>;\n  /** Changes the underlying element of the title. Default: h3 */\n  titleHtmlMarkup?: TitleTags;\n  /** Shows a back button before the title. When present the title is centered. */\n  withBackButton?: boolean;\n  /** Callback for the back button */\n  onRequestBack?: () => void;\n  /** Sets the aria-label of the back button */\n  backButtonAriaLabel?: string;\n  /** Adds custom classes to the root element. */\n  className?: string;\n}\n\nconst DrawerHeaderContent: React.FC<DrawerHeaderContentProps> = props => {\n  const { title, titleId, titleRef, titleHtmlMarkup = 'h3', withBackButton, onRequestBack, backButtonAriaLabel, className } = props;\n\n  return (\n    <div className={classNames(styles['header-content'], className)}>\n      <span\n        className={classNames(styles['header-content__title'], {\n          [styles['header-content__title--centered']]: withBackButton,\n        })}\n      >\n        <Title id={titleId} ref={titleRef} tabIndex={-1} htmlMarkup={titleHtmlMarkup} appearance=\"title3\">\n          {title}\n        </Title>\n      </span>\n      {withBackButton && (\n        <DrawerBackButton ariaLabel={backButtonAriaLabel} onClick={onRequestBack} className={styles['header-content__back-button']} />\n      )}\n    </div>\n  );\n};\n\nexport default DrawerHeaderContent;\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 DrawerHeaderContent from './DrawerHeaderContent';\n\nimport styles from './styles.module.scss';\n\ntype DesktopDirections = 'left' | 'right';\ntype PaddingSizes = 'normal' | 'extra';\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  /** Optional content that replaces the default title (and back button) in the header. The close button is still rendered. */\n  headerContent?: React.ReactNode;\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  /** Sets the content padding of the Drawer */\n  paddingSize?: PaddingSizes;\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    headerContent,\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    paddingSize = 'normal',\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(\n    styles.drawer__header,\n    { [styles['drawer__header--padding-extra']]: paddingSize === 'extra' },\n    headerClasses\n  );\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  const headerMain = (\n    <DrawerHeaderContent\n      title={title}\n      titleId={ariaLabelAttributes?.['aria-labelledby']}\n      titleRef={titleRef}\n      titleHtmlMarkup={titleHtmlMarkup}\n      withBackButton={withBackButton && onRequestBack !== undefined}\n      onRequestBack={onRequestBack}\n      backButtonAriaLabel={mergedResources.ariaLabelBackButton}\n    />\n  );\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            {headerContent ?? headerMain}\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\n              className={classNames(styles['drawer__content__children'], {\n                [styles['drawer__content__children--padding-extra']]: paddingSize === 'extra',\n              })}\n            >\n              {children}\n            </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\n            className={classNames(styles.drawer__footer, { [styles['drawer__footer--padding-extra']]: paddingSize === 'extra' })}\n            ref={footerRef}\n          >\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/resources/HN.Designsystem.Drawer.se-NO.json","../src/components/Drawer/resourceHelper.ts","../src/components/Drawer/DrawerBackButton.tsx","../src/components/Drawer/DrawerHeaderContent.tsx","../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","{\n  \"ariaLabelCloseBtn\": \"Gidde\",\n  \"ariaLabelBackButton\": \"Mana ruovttoluotta\"\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';\nimport seNO from '../../resources/HN.Designsystem.Drawer.se-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.SAMI_NORTHERN:\n      return seNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import classNames from 'classnames';\n\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport Icon from '../Icon';\nimport ChevronLeft from '../Icons/ChevronLeft';\n\nimport styles from './DrawerBackButton.module.scss';\n\nexport interface DrawerBackButtonProps {\n  /** Function is called when user clicks the button */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n}\n\nconst DrawerBackButton: React.FC<DrawerBackButtonProps> = props => {\n  const { ariaLabel = 'Tilbake', onClick, className } = props;\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n\n  const iconSize = useIsMobileBreakpoint() ? 38 : 48;\n\n  return (\n    <button ref={refObject} className={classNames(styles['back-button'], className)} aria-label={ariaLabel} onClick={onClick} type=\"button\">\n      <span className={classNames(styles['back-button__inner-container'])}>\n        <Icon svgIcon={ChevronLeft} color={'var(--color-action-graphics-dark-normal'} size={iconSize} isHovered={isHovered} />\n      </span>\n    </button>\n  );\n};\n\nexport default DrawerBackButton;\n","import type React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { TitleTags } from '../Title';\n\nimport DrawerBackButton from './DrawerBackButton';\nimport Title from '../Title';\n\nimport styles from './DrawerHeaderContent.module.scss';\n\nexport interface DrawerHeaderContentProps {\n  /** Title shown in the header */\n  title?: React.ReactNode;\n  /** id of the title element */\n  titleId?: string;\n  /** Ref passed to the title heading element */\n  titleRef?: React.Ref<HTMLHeadingElement | null>;\n  /** Changes the underlying element of the title. Default: h3 */\n  titleHtmlMarkup?: TitleTags;\n  /** Shows a back button before the title. When present the title is centered. */\n  withBackButton?: boolean;\n  /** Callback for the back button */\n  onRequestBack?: () => void;\n  /** Sets the aria-label of the back button */\n  backButtonAriaLabel?: string;\n  /** Adds custom classes to the root element. */\n  className?: string;\n}\n\nconst DrawerHeaderContent: React.FC<DrawerHeaderContentProps> = props => {\n  const { title, titleId, titleRef, titleHtmlMarkup = 'h3', withBackButton, onRequestBack, backButtonAriaLabel, className } = props;\n\n  return (\n    <div className={classNames(styles['header-content'], className)}>\n      <span\n        className={classNames(styles['header-content__title'], {\n          [styles['header-content__title--centered']]: withBackButton,\n        })}\n      >\n        <Title id={titleId} ref={titleRef} tabIndex={-1} htmlMarkup={titleHtmlMarkup} appearance=\"title3\">\n          {title}\n        </Title>\n      </span>\n      {withBackButton && (\n        <DrawerBackButton ariaLabel={backButtonAriaLabel} onClick={onRequestBack} className={styles['header-content__back-button']} />\n      )}\n    </div>\n  );\n};\n\nexport default DrawerHeaderContent;\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 DrawerHeaderContent from './DrawerHeaderContent';\n\nimport styles from './styles.module.scss';\n\ntype DesktopDirections = 'left' | 'right';\ntype PaddingSizes = 'normal' | 'extra';\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  /** Optional content that replaces the default title (and back button) in the header. The close button is still rendered. */\n  headerContent?: React.ReactNode;\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  /** Sets classname for content part in Drawer */\n  contentClassName?: string;\n  /** Sets the content padding of the Drawer */\n  paddingSize?: PaddingSizes;\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    headerContent,\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    contentClassName,\n    paddingSize = 'normal',\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(\n    styles.drawer__header,\n    { [styles['drawer__header--padding-extra']]: paddingSize === 'extra' },\n    headerClasses\n  );\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  const headerMain = (\n    <DrawerHeaderContent\n      title={title}\n      titleId={ariaLabelAttributes?.['aria-labelledby']}\n      titleRef={titleRef}\n      titleHtmlMarkup={titleHtmlMarkup}\n      backButtonAriaLabel={mergedResources.ariaLabelBackButton}\n    />\n  );\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            {headerContent ?? headerMain}\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\n              className={classNames(styles['drawer__content__children'], {\n                [styles['drawer__content__children--padding-extra']]: paddingSize === 'extra',\n              })}\n            >\n              {children}\n            </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\n            className={classNames(styles.drawer__footer, { [styles['drawer__footer--padding-extra']]: paddingSize === 'extra' })}\n            ref={footerRef}\n          >\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

@@ -153,6 +153,7 @@ function DrawerNavigation({ children, isOpen, initialView, onCloseButton, footer
 		value: navigate,
 		children: [/* @__PURE__ */ jsx(Drawer_default, {
 			isOpen,
+			ariaLabelledBy: titleId,
 			onRequestClose: currentView?.onCloseButton ?? onCloseButton,
 			footerContent: currentView?.footer ?? footer,
 			contentClassName: currentView?.drawerContentClassname,

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, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport { animate, useReducedMotion } from 'motion/react';\n\nimport { type NavigateProps, DrawerNavigationContext } from './useDrawerNavigation';\nimport uuid from '../../../utils/uuid';\nimport Drawer from '../../Drawer';\nimport DrawerHeaderContent from '../../Drawer/DrawerHeaderContent';\n\nimport styles from './styles.module.scss';\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 incomingContentRef = useRef<HTMLDivElement>(null);\n  const outgoingContentRef = useRef<HTMLDivElement>(null);\n  const incomingHeaderRef = useRef<HTMLDivElement>(null);\n  const outgoingHeaderRef = useRef<HTMLDivElement>(null);\n  const titleRef = useRef<HTMLHeadingElement>(null);\n  const titleId = useMemo(() => uuid(), []);\n  const homeView = views.find(v => v.home) ?? views[0];\n  const [viewStack, setViewStack] = useState<string[]>([homeView?.id]);\n  const prevStackLength = useRef<number>(viewStack.length);\n  const prevView = useRef<DrawerViewProps | undefined>(undefined);\n  const reducedMotion = useReducedMotion();\n\n  const currentViewId = viewStack[viewStack.length - 1];\n  const currentView = views.find(v => v.id === currentViewId);\n\n  // The previous view, kept mounted as an overlay while it slides out during a navigation transition\n  const [outgoing, setOutgoing] = useState<{ view: DrawerViewProps; dir: 'left' | 'right'; withBackButton: boolean } | null>(null);\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  // Detect a navigation and capture the outgoing view + direction\n  useEffect(() => {\n    if (!isOpen) {\n      prevView.current = undefined;\n      return;\n    }\n\n    const previous = prevView.current;\n    prevView.current = currentView;\n\n    const previousStackLength = prevStackLength.current;\n    const dir: 'left' | 'right' = viewStack.length >= previousStackLength ? 'left' : 'right';\n    prevStackLength.current = viewStack.length;\n\n    if (isOpen && !reducedMotion && previous && currentView && previous.id !== currentView.id) {\n      setOutgoing({ view: previous, dir, withBackButton: previousStackLength > 1 });\n    }\n  }, [viewStack, currentView, isOpen]);\n\n  // Animates the incoming and outgoing views\n  useLayoutEffect(() => {\n    if (!outgoing || !incomingContentRef.current || !outgoingContentRef.current) {\n      return;\n    }\n\n    const incomingFrom = outgoing.dir === 'left' ? '100%' : '-100%';\n    const outgoingTo = outgoing.dir === 'left' ? '-100%' : '100%';\n    const options = { duration: 0.3, ease: 'easeInOut' } as const;\n\n    animate(incomingContentRef.current, { x: [incomingFrom, '0%'] }, options);\n    if (incomingHeaderRef.current) {\n      animate(incomingHeaderRef.current, { x: [incomingFrom, '0%'] }, options);\n    }\n    if (outgoingHeaderRef.current) {\n      animate(outgoingHeaderRef.current, { x: ['0%', outgoingTo] }, options);\n    }\n    const leaving = animate(outgoingContentRef.current, { x: ['0%', outgoingTo] }, { ...options, onComplete: () => setOutgoing(null) });\n\n    return (): void => {\n      leaving.stop();\n    };\n  }, [outgoing]);\n\n  // Moves focus between incoming and outgoing view\n  useEffect(() => {\n    if (isOpen) {\n      titleRef.current?.focus();\n    }\n  }, [currentViewId, isOpen]);\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  const headerContent = (\n    <div className={styles.header} style={{ overflow: outgoing ? 'hidden' : 'visible' }}>\n      {outgoing && (\n        <div ref={outgoingHeaderRef} aria-hidden inert className={styles['header__layer']} style={{ position: 'absolute', inset: 0 }}>\n          <DrawerHeaderContent title={outgoing.view.title} withBackButton={outgoing.withBackButton} onRequestBack={() => undefined} />\n        </div>\n      )}\n      <div ref={incomingHeaderRef} className={styles['header__layer']}>\n        <DrawerHeaderContent\n          title={currentView?.title}\n          titleId={titleId}\n          titleRef={titleRef}\n          withBackButton={viewStack.length > 1}\n          onRequestBack={goBack}\n        />\n      </div>\n    </div>\n  );\n\n  return (\n    <DrawerNavigationContext.Provider value={navigate}>\n      <Drawer\n        isOpen={isOpen}\n        onRequestClose={currentView?.onCloseButton ?? onCloseButton}\n        footerContent={currentView?.footer ?? footer}\n        contentClassName={currentView?.drawerContentClassname}\n        paddingSize={'extra'}\n        headerContent={headerContent}\n      >\n        <div className={styles['content']} style={{ overflow: outgoing ? 'hidden' : 'visible' }}>\n          {outgoing && (\n            <div ref={outgoingContentRef} aria-hidden inert style={{ position: 'absolute', width: '100%' }}>\n              {outgoing.view.children}\n            </div>\n          )}\n          <div ref={incomingContentRef}>{currentView?.children}</div>\n        </div>\n      </Drawer>\n      {other}\n    </DrawerNavigationContext.Provider>\n  );\n}\n\nDrawerNavigation.View = DrawerView;\n\nexport default DrawerNavigation;\n"],"mappings":"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"}
+{"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, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport { animate, useReducedMotion } from 'motion/react';\n\nimport { type NavigateProps, DrawerNavigationContext } from './useDrawerNavigation';\nimport uuid from '../../../utils/uuid';\nimport Drawer from '../../Drawer';\nimport DrawerHeaderContent from '../../Drawer/DrawerHeaderContent';\n\nimport styles from './styles.module.scss';\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 incomingContentRef = useRef<HTMLDivElement>(null);\n  const outgoingContentRef = useRef<HTMLDivElement>(null);\n  const incomingHeaderRef = useRef<HTMLDivElement>(null);\n  const outgoingHeaderRef = useRef<HTMLDivElement>(null);\n  const titleRef = useRef<HTMLHeadingElement>(null);\n  const titleId = useMemo(() => uuid(), []);\n  const homeView = views.find(v => v.home) ?? views[0];\n  const [viewStack, setViewStack] = useState<string[]>([homeView?.id]);\n  const prevStackLength = useRef<number>(viewStack.length);\n  const prevView = useRef<DrawerViewProps | undefined>(undefined);\n  const reducedMotion = useReducedMotion();\n\n  const currentViewId = viewStack[viewStack.length - 1];\n  const currentView = views.find(v => v.id === currentViewId);\n\n  // The previous view, kept mounted as an overlay while it slides out during a navigation transition\n  const [outgoing, setOutgoing] = useState<{ view: DrawerViewProps; dir: 'left' | 'right'; withBackButton: boolean } | null>(null);\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  // Detect a navigation and capture the outgoing view + direction\n  useEffect(() => {\n    if (!isOpen) {\n      prevView.current = undefined;\n      return;\n    }\n\n    const previous = prevView.current;\n    prevView.current = currentView;\n\n    const previousStackLength = prevStackLength.current;\n    const dir: 'left' | 'right' = viewStack.length >= previousStackLength ? 'left' : 'right';\n    prevStackLength.current = viewStack.length;\n\n    if (isOpen && !reducedMotion && previous && currentView && previous.id !== currentView.id) {\n      setOutgoing({ view: previous, dir, withBackButton: previousStackLength > 1 });\n    }\n  }, [viewStack, currentView, isOpen]);\n\n  // Animates the incoming and outgoing views\n  useLayoutEffect(() => {\n    if (!outgoing || !incomingContentRef.current || !outgoingContentRef.current) {\n      return;\n    }\n\n    const incomingFrom = outgoing.dir === 'left' ? '100%' : '-100%';\n    const outgoingTo = outgoing.dir === 'left' ? '-100%' : '100%';\n    const options = { duration: 0.3, ease: 'easeInOut' } as const;\n\n    animate(incomingContentRef.current, { x: [incomingFrom, '0%'] }, options);\n    if (incomingHeaderRef.current) {\n      animate(incomingHeaderRef.current, { x: [incomingFrom, '0%'] }, options);\n    }\n    if (outgoingHeaderRef.current) {\n      animate(outgoingHeaderRef.current, { x: ['0%', outgoingTo] }, options);\n    }\n    const leaving = animate(outgoingContentRef.current, { x: ['0%', outgoingTo] }, { ...options, onComplete: () => setOutgoing(null) });\n\n    return (): void => {\n      leaving.stop();\n    };\n  }, [outgoing]);\n\n  // Moves focus between incoming and outgoing view\n  useEffect(() => {\n    if (isOpen) {\n      titleRef.current?.focus();\n    }\n  }, [currentViewId, isOpen]);\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  const headerContent = (\n    <div className={styles.header} style={{ overflow: outgoing ? 'hidden' : 'visible' }}>\n      {outgoing && (\n        <div ref={outgoingHeaderRef} aria-hidden inert className={styles['header__layer']} style={{ position: 'absolute', inset: 0 }}>\n          <DrawerHeaderContent title={outgoing.view.title} withBackButton={outgoing.withBackButton} onRequestBack={() => undefined} />\n        </div>\n      )}\n      <div ref={incomingHeaderRef} className={styles['header__layer']}>\n        <DrawerHeaderContent\n          title={currentView?.title}\n          titleId={titleId}\n          titleRef={titleRef}\n          withBackButton={viewStack.length > 1}\n          onRequestBack={goBack}\n        />\n      </div>\n    </div>\n  );\n\n  return (\n    <DrawerNavigationContext.Provider value={navigate}>\n      <Drawer\n        isOpen={isOpen}\n        ariaLabelledBy={titleId}\n        onRequestClose={currentView?.onCloseButton ?? onCloseButton}\n        footerContent={currentView?.footer ?? footer}\n        contentClassName={currentView?.drawerContentClassname}\n        paddingSize={'extra'}\n        headerContent={headerContent}\n      >\n        <div className={styles['content']} style={{ overflow: outgoing ? 'hidden' : 'visible' }}>\n          {outgoing && (\n            <div ref={outgoingContentRef} aria-hidden inert style={{ position: 'absolute', width: '100%' }}>\n              {outgoing.view.children}\n            </div>\n          )}\n          <div ref={incomingContentRef}>{currentView?.children}</div>\n        </div>\n      </Drawer>\n      {other}\n    </DrawerNavigationContext.Provider>\n  );\n}\n\nDrawerNavigation.View = DrawerView;\n\nexport default DrawerNavigation;\n"],"mappings":"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"}

package/lib/Duolist.js

@@ -34,19 +34,23 @@ var DuolistGroup = (props) => {
 	return nonFormatted ? /* @__PURE__ */ jsx("div", { children: renderContent() }) : /* @__PURE__ */ jsx(Fragment, { children: renderContent() });
 };
 var Duolist = (props) => {
-	const { boldColumn, border = "no-border", descriptionWidth, label, format = "formatted", separator, variant = "normal", children, className, testId, useCollapsedFromAndBelowBreakpoint } = props;
+	const { boldColumn, border = "no-border", descriptionWidth, label, format = "formatted", separator, padding = true, variant = "normal", hideLines, children, className, testId, useCollapsedFromAndBelowBreakpoint } = props;
 	const hasBorder = border === "border";
 	const hasLines = variant === "line";
 	const extraPaddingTop = hasBorder && (label || hasLines);
 	const nonFormatted = format === "non-formatted";
 	const breakpoint = useBreakpoint();
 	const useCollapsedMode = useCollapsedFromAndBelowBreakpoint && breakpoint <= Breakpoint[useCollapsedFromAndBelowBreakpoint];
+	const activeHideLines = typeof hideLines === "object" ? useCollapsedMode ? hideLines.mobile : hideLines.desktop : hideLines;
 	const duolistWrapperClasses = classNames({
 		[duolistStyles["duolist-wrapper--border"]]: hasBorder,
 		[duolistStyles["duolist-wrapper--extra-padding-top"]]: extraPaddingTop
 	}, className);
 	const duolistClasses = classNames(duolistStyles.duolist, {
 		[duolistStyles["duolist--line"]]: hasLines,
+		[duolistStyles["duolist--hide-top-line"]]: hasLines && (activeHideLines === "top" || activeHideLines === "both"),
+		[duolistStyles["duolist--hide-bottom-line"]]: hasLines && (activeHideLines === "bottom" || activeHideLines === "both"),
+		[duolistStyles["duolist--no-padding"]]: !padding,
 		[duolistStyles["duolist--non-formatted"]]: nonFormatted,
 		[duolistStyles["duolist--collapsed"]]: useCollapsedMode,
 		[duolistStyles["duolist--not-collapsed"]]: !useCollapsedMode

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;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;GAE5C,UAAA;EACC,CAAA,GACJ,oBAAC,MAAD;GAAI,WAAW;GAAc,eAAa,MAAM,UAAU,GAAG,MAAM,OAAO;GACvE,UAAA;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;EAA1F,UAAA,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;GAEV,UAAA,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"}
+{"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 Border = 'no-border' | 'border';\nexport type HideLines = 'top' | 'bottom' | 'both';\n\nexport interface ResponsiveHideLines {\n  /** Hides lines on desktop (when the list is not collapsed) */\n  desktop?: HideLines;\n  /** Hides lines on mobile (when the list is collapsed, see useCollapsedFromAndBelowBreakpoint) */\n  mobile?: HideLines;\n}\nexport type BoldColumn = 'first' | 'second' | 'none';\nexport type Formats = 'formatted' | 'non-formatted';\n\nexport interface DuolistProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /**@deprecated Border around 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  /** Turns the built-in padding of the list on/off. Default: true */\n  padding?: boolean;\n  /** Sets the visual variant of the Duolist. */\n  variant?: DuolistVariants;\n  /** Hides the top line, bottom line or both. Only applies to the 'line' variant.\n   * Accepts a single value for all screen sizes, or an object to configure desktop and mobile (collapsed) separately. */\n  hideLines?: HideLines | ResponsiveHideLines;\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    padding = true,\n    variant = 'normal',\n    hideLines,\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  const activeHideLines = typeof hideLines === 'object' ? (useCollapsedMode ? hideLines.mobile : hideLines.desktop) : hideLines;\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--hide-top-line']]: hasLines && (activeHideLines === 'top' || activeHideLines === 'both'),\n    [duolistStyles['duolist--hide-bottom-line']]: hasLines && (activeHideLines === 'bottom' || activeHideLines === 'both'),\n    [duolistStyles['duolist--no-padding']]: !padding,\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":";;;;;;;;AAsEA,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;GAE5C,UAAA;EACC,CAAA,GACJ,oBAAC,MAAD;GAAI,WAAW;GAAc,eAAa,MAAM,UAAU,GAAG,MAAM,OAAO;GACvE,UAAA;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,MACV,UAAU,UACV,WACA,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;CACxF,MAAM,kBAAkB,OAAO,cAAc,WAAY,mBAAmB,UAAU,SAAS,UAAU,UAAW;CAEpH,MAAM,wBAAwB,WAC5B;GACG,cAAc,6BAA6B;GAC3C,cAAc,wCAAwC;CACzD,GACA,SACF;CAEA,MAAM,iBAAiB,WAAW,cAAc,SAAS;GACtD,cAAc,mBAAmB;GACjC,cAAc,4BAA4B,aAAa,oBAAoB,SAAS,oBAAoB;GACxG,cAAc,+BAA+B,aAAa,oBAAoB,YAAY,oBAAoB;GAC9G,cAAc,yBAAyB,CAAC;GACxC,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;EAA1F,UAAA,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;GAEV,UAAA,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;;;AChLA,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":";;;;;;;;;;;;;;;;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,EAAE,EAAE,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,EAAE,EAAE,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;EAEZ,UAAA;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;EAAtC,UAAA;GACG,YAAY,QAAQ,oBAAC,QAAD;IAAM,WAAW;IAAc,UAAA;GAAoB,CAAA;GACvE,SAAS,WAAW,gBAAgB,eACnC,oBAAC,QAAD;IAAM,WAAW;IAAgB,UAAA,MAAM,aAAa,eAAe,aAAa,EAAE,MAAM,WAAW,OAAO,CAAC;GAAQ,CAAA;GAGrH,qBAAC,QAAD;IAAM,WAAW;IAAgB,sBAAoB;IAArD,UAAA;KACG,gBAAgB;KAChB,CAAC,CAAC,gBAAgB,eAAe,UAChC,oBAAC,WAAD;MAAW,WAAW,OAAO;MAC3B,UAAA,oBAAC,qBAAD;OAAa,YAAY;OAAgB,UAAA,eAAe;MAA4B,CAAA;KAC3E,CAAA;KAEb,oBAAC,qBAAD;MAAa,YAAY;MAAgB,UAAA,gBAAgB;KAA+B,CAAA;IACpF;;GAEL,iBACC,qBAAC,QAAD;IAAM,WAAW;IAAjB,UAAA,CACG,CAAC,CAAC,gBAAgB,qBAAqB,oBAAC,uBAAD,EAAA,UAAgB,eAAe,kBAAiC,CAAA,GACvG,CAAC,CAAC,gBAAgB,oBAAoB,gBAAgB,gBACnD;;GAGR,oBAAC,QAAD;IAAM,WAAW;IACd,UAAA,gBAAgB,iBACf,eAAe,cAAc,KAAK,YAAY,UAAU;KACtD,OACE,oBAAC,QAAD;MAAkB,WAAW;MAAc,mBAAiB;MACzD,UAAA;KACG,GAFK,KAEL;IAEV,CAAC;GACC,CAAA;GACL,eAAe,OAAO,gBAAgB,eACrC,oBAAC,QAAD;IAAM,WAAW;IAAgB,mBAAiB;IAChD,UAAA,oBAAC,cAAD;KAAM,SAAS;KAAwB;KAAW,MAAM,SAAS;IAAS,CAAA;GACtE,CAAA;GAEP,eACC,oBAAC,QAAD;IAAM,WAAW;IAAgB,mBAAiB;IAC/C,UAAA;GACG,CAAA;EAEJ;;AAEV;AAMA,kBAAkB,cAAc;AAChC,IAAM,gBAAgB;AACtB,cAAc,OAAO;AACrB,cAAc,KAAK,cAAc;AACjC,cAAc,gBAAgB;AAC9B,cAAc,cAAc,cAAc"}
+{"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' | 'normal' | '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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"}

package/lib/FilterLinkList.js

@@ -36,7 +36,7 @@ var Link = (props) => {
 				svgIcon: ChevronRight,
 				isHovered,
 				size: IconSize.XSmall,
-				color: "var(--color-action-graphics-onlight)"
+				color: "var(--color-action-graphics-dark-normal)"
 			})]
 		})
 	});

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    /** Aria label for the list of chips */\n    chipsGroupAriaLabel?: 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                <ul className={styles['link-list__chip-list']} aria-label={props.chipsGroupAriaLabel}>\n                  {chips.map(chip => (\n                    <li className={styles['link-list__chip']} key={chip}>\n                      {chip}\n                    </li>\n                  ))}\n                </ul>\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":";;;;;;;;;AAoDA,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;EACrF,UAAA,qBAAC,UAAD;GAAQ,WAAW;GAAa,KAAK;GAAiD,MAAK;GAAS,GAAI;GAAxG,UAAA,CACE,oBAAC,OAAD;IAAK,WAAW,OAAO;IACpB,UAAA,QACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,GAClB,SAAS,MAAM,SAAS,KACvB,oBAAC,MAAD;KAAI,WAAW,OAAO;KAAyB,cAAY,MAAM;KAC9D,UAAA,MAAM,KAAI,SACT,oBAAC,MAAD;MAAI,WAAW,OAAO;MACnB,UAAA;KACC,GAF2C,IAE3C,CACL;IACC,CAAA,CAEN,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;CAElD,MAAM,iBAAiB,WAAG,OAAO,cAAc,SAAS;CAExD,OACE,oBAAC,MAAD;EAAS;EAAK,WAAW;EAAgB,eAAa;EAAQ,oBAAkB,YAAY;EACzF,UAAA,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"}
+{"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    /** Aria label for the list of chips */\n    chipsGroupAriaLabel?: 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                <ul className={styles['link-list__chip-list']} aria-label={props.chipsGroupAriaLabel}>\n                  {chips.map(chip => (\n                    <li className={styles['link-list__chip']} key={chip}>\n                      {chip}\n                    </li>\n                  ))}\n                </ul>\n              )}\n            </>\n          ) : (\n            <>{children}</>\n          )}\n        </div>\n        <Icon svgIcon={ChevronRight} isHovered={isHovered} size={IconSize.XSmall} color={'var(--color-action-graphics-dark-normal)'} />\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":";;;;;;;;;AAoDA,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;EACrF,UAAA,qBAAC,UAAD;GAAQ,WAAW;GAAa,KAAK;GAAiD,MAAK;GAAS,GAAI;GAAxG,UAAA,CACE,oBAAC,OAAD;IAAK,WAAW,OAAO;IACpB,UAAA,QACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,GAClB,SAAS,MAAM,SAAS,KACvB,oBAAC,MAAD;KAAI,WAAW,OAAO;KAAyB,cAAY,MAAM;KAC9D,UAAA,MAAM,KAAI,SACT,oBAAC,MAAD;MAAI,WAAW,OAAO;MACnB,UAAA;KACC,GAF2C,IAE3C,CACL;IACC,CAAA,CAEN,EAAA,CAAA,IAEF,oBAAA,UAAA,EAAG,SAAW,CAAA;GAEb,CAAA,GACL,oBAAC,cAAD;IAAM,SAAS;IAAyB;IAAW,MAAM,SAAS;IAAQ,OAAO;GAA6C,CAAA,CACxH;;CACN,CAAA;AAER;AAEA,IAAM,qBAA8C,UAAyB;CAC3E,MAAM,EAAE,UAAU,YAAY,IAAI,QAAQ,QAAQ;CAElD,MAAM,iBAAiB,WAAG,OAAO,cAAc,SAAS;CAExD,OACE,oBAAC,MAAD;EAAS;EAAK,WAAW;EAAgB,eAAa;EAAQ,oBAAkB,YAAY;EACzF,UAAA,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/FormGroup.js

@@ -6,7 +6,7 @@ import { t as FormFieldTag_default } from "./FormFieldTag.js";
 import { t as Checkbox } from "./Checkbox.js";
 import Title_default from "./components/Title/index.js";
 import { t as Select_default } from "./Select.js";
-import { t as RadioButton } from "./RadioButton.js";
+import { t as Radio } from "./Radio.js";
 import { hasSublabel, isCompactComponent } from "./utils/formSpacing.js";
 import { t as FormLayout_default } from "./FormLayout.js";
 import { t as Input } from "./Input.js";
@@ -18,7 +18,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import formGroupStyles from "./components/FormGroup/styles.module.scss";
 //#region src/components/FormGroup/FormGroup.tsx
 var FormGroup = (props) => {
-	const { ariaLabelledBy, className, errorTextId: errorTextIdProp, fieldsetClassName, formFieldTag, legendClassName, legendId, onColor = FormOnColor.onwhite, size = FormSize.medium, error, name, htmlMarkup = "fieldset", renderError = true, errorWrapperClassName, errorWrapperTestId, errorMessageRef, legendHtmlMarkup = "h5", titleHtmlMarkup = "h4" } = props;
+	const { ariaLabelledBy, className, errorTextId: errorTextIdProp, fieldsetClassName, formFieldTag, legendClassName, legendId, onColor = FormOnColor.onwhite, size = FormSize.normal, error, name, htmlMarkup = "fieldset", renderError = true, errorWrapperClassName, errorWrapperTestId, errorMessageRef, legendHtmlMarkup = "h5", titleHtmlMarkup = "h4" } = props;
 	const radioGroupId = useId();
 	const [checkedRadioId, setCheckedRadioId] = useState();
 	const errorTextId = useIdWithFallback(errorTextIdProp);
@@ -53,7 +53,7 @@ var FormGroup = (props) => {
 			error: !!error,
 			errorTextId
 		});
-		else if (isComponent(child, RadioButton)) {
+		else if (isComponent(child, Radio)) {
 			const radioId = typeof child.props.inputId === "undefined" ? radioGroupId + index : child.props.inputId;
 			const groupChecked = child.props.checked !== void 0 ? child.props.checked : checkedRadioId !== void 0 ? checkedRadioId === radioId : void 0;
 			return React.cloneElement(child, {

package/lib/FormGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormGroup.js","names":[],"sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React, { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { CheckboxProps } from '../Checkbox/Checkbox';\nimport type { FormFieldTagProps } from '../FormFieldTag';\nimport type { FormLayoutProps } from '../FormLayout';\nimport type { InputProps } from '../Input/Input';\nimport type { RadioButtonProps } from '../RadioButton/RadioButton';\nimport type { SelectProps } from '../Select';\nimport type { SliderProps } from '../Slider';\nimport type { TextareaProps } from '../Textarea';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { isComponent } from '../../utils/component';\nimport { hasSublabel, isCompactComponent } from '../../utils/formSpacing';\nimport Checkbox from '../Checkbox/Checkbox';\nimport ErrorWrapper from '../ErrorWrapper';\nimport FormFieldTag from '../FormFieldTag';\nimport FormLayout from '../FormLayout';\nimport Input from '../Input/Input';\nimport RadioButton from '../RadioButton/RadioButton';\nimport Select from '../Select';\nimport Slider from '../Slider';\nimport Textarea from '../Textarea';\nimport Title, { type TitleTags } from '../Title';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n  /** Can be used as a replacement text for legend in cases where the group title already exists externally */\n  ariaLabelledBy?: string;\n  /** title for the the fieldset */\n  title?: string;\n  /** text placed in the legend tag of the fieldset */\n  legend?: string;\n  /** id for the legend tag */\n  legendId?: string;\n  /** Items in the FormGroup component */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper. */\n  errorWrapperClassName?: string;\n  /** Adds custom classes to the fieldset element. */\n  fieldsetClassName?: string;\n  /** Sets a tag that describes whether the form group is required or optional */\n  formFieldTag?: React.ReactNode;\n  /** Adds custom classes to the legend element. */\n  legendClassName?: string;\n  /** Changes the visuals of the formgroup */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Error message */\n  error?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error-wrapper. */\n  errorWrapperTestId?: string;\n  /** Unique name for the child input element */\n  name?: string;\n  /** Unique name for the fieldset */\n  fieldsetName?: string;\n  /** Sets div instead of fieldset tag */\n  htmlMarkup?: FormGroupTags;\n  /** Markup for legend if formgroup htmlMarkup is div*/\n  legendHtmlMarkup?: TitleTags;\n  /** Markup for title */\n  titleHtmlMarkup?: TitleTags;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n  /** Ref passed to the error message element */\n  errorMessageRef?: React.Ref<HTMLDivElement | null>;\n}\n\nexport const FormGroup: React.FC<FormGroupProps> = (props: FormGroupProps) => {\n  const {\n    ariaLabelledBy,\n    className,\n    errorTextId: errorTextIdProp,\n    fieldsetClassName,\n    formFieldTag,\n    legendClassName,\n    legendId,\n    onColor = FormOnColor.onwhite,\n    size = FormSize.medium,\n    error,\n    name,\n    htmlMarkup = 'fieldset',\n    renderError = true,\n    errorWrapperClassName,\n    errorWrapperTestId,\n    errorMessageRef,\n    legendHtmlMarkup = 'h5',\n    titleHtmlMarkup = 'h4',\n  } = props;\n  const radioGroupId = useId();\n  const [checkedRadioId, setCheckedRadioId] = useState<string>();\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const onDark = onColor === FormOnColor.ondark;\n  const formGroupWrapperClasses = classNames(formGroupStyles['form-group-wrapper'], className);\n  const titleClasses = classNames({\n    [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n  });\n\n  const CustomTagForLegend = legendHtmlMarkup;\n\n  const legendClasses = classNames(\n    formGroupStyles['field-set__legend'],\n    {\n      [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n    },\n    legendClassName\n  );\n\n  const childArray = React.Children.toArray(props.children);\n  const hasOnlyCompactComponents = childArray.length > 0 && childArray.every(isCompactComponent);\n  const hasCompactSublabel = hasOnlyCompactComponents && childArray.some(hasSublabel);\n  const fieldsetClasses = classNames(\n    formGroupStyles['field-set'],\n    {\n      [formGroupStyles['field-set--compact-gap']]: hasOnlyCompactComponents && !hasCompactSublabel,\n      [formGroupStyles['field-set--compact-sublabel-gap']]: hasCompactSublabel,\n    },\n    fieldsetClassName\n  );\n\n  const mapFormComponent = (child: React.ReactNode, index: number): React.ReactNode => {\n    if (isComponent<FormLayoutProps>(child, FormLayout)) {\n      return React.cloneElement(child, {\n        size,\n        mapHelper: mapFormComponent,\n      });\n    } else if (isComponent<FormGroupProps>(child, FormGroup)) {\n      return React.cloneElement(child, {\n        onColor,\n        size,\n        error,\n        renderError: false,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<CheckboxProps>(child, Checkbox)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<RadioButtonProps>(child, RadioButton)) {\n      const radioId = typeof child.props.inputId === 'undefined' ? radioGroupId + index : child.props.inputId;\n      const groupChecked =\n        child.props.checked !== undefined ? child.props.checked : checkedRadioId !== undefined ? checkedRadioId === radioId : undefined;\n      return React.cloneElement(child, {\n        inputId: radioId,\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        checked: groupChecked,\n        onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n          setCheckedRadioId(event.target.id);\n          if (child.props.onChange) child.props.onChange(event);\n        },\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<InputProps>(child, Input)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<TextareaProps>(child, Textarea)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<SelectProps>(child, Select)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<SliderProps>(child, Slider)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    }\n    return child;\n  };\n\n  const formGroupContent = (): React.ReactNode => {\n    return (\n      <div>\n        {htmlMarkup === 'div' && (\n          <div className={fieldsetClasses}>\n            {props.legend && (\n              <>\n                <CustomTagForLegend id={legendId} className={legendClasses}>\n                  {props.legend}\n                  {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n                </CustomTagForLegend>\n              </>\n            )}\n            {React.Children.map(props.children, mapFormComponent)}\n          </div>\n        )}\n        {htmlMarkup === 'fieldset' && (\n          <fieldset aria-labelledby={ariaLabelledBy} name={props.fieldsetName} className={fieldsetClasses}>\n            {props.legend && (\n              <>\n                <legend id={legendId} className={legendClasses}>\n                  {props.legend}\n                  {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n                </legend>\n              </>\n            )}\n            {React.Children.map(props.children, mapFormComponent)}\n          </fieldset>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses}>\n      {props.title && (\n        <Title\n          className={titleClasses}\n          htmlMarkup={titleHtmlMarkup}\n          appearance={'title4'}\n          margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}\n        >\n          {props.title}\n        </Title>\n      )}\n      <ErrorWrapper\n        className={errorWrapperClassName}\n        errorText={error}\n        testId={errorWrapperTestId}\n        errorTextId={errorTextId}\n        errorMessageRef={errorMessageRef}\n        renderError={renderError}\n      >\n        {formGroupContent()}\n      </ErrorWrapper>\n    </div>\n  );\n};\n\nFormGroup.displayName = 'FormGroup';\n\nexport default FormGroup;\n"],"mappings":"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"}
+{"version":3,"file":"FormGroup.js","names":[],"sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React, { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { CheckboxProps } from '../Checkbox/Checkbox';\nimport type { FormFieldTagProps } from '../FormFieldTag';\nimport type { FormLayoutProps } from '../FormLayout';\nimport type { InputProps } from '../Input/Input';\nimport type { RadioProps } from '../Radio/Radio';\nimport type { SelectProps } from '../Select';\nimport type { SliderProps } from '../Slider';\nimport type { TextareaProps } from '../Textarea';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { isComponent } from '../../utils/component';\nimport { hasSublabel, isCompactComponent } from '../../utils/formSpacing';\nimport Checkbox from '../Checkbox/Checkbox';\nimport ErrorWrapper from '../ErrorWrapper';\nimport FormFieldTag from '../FormFieldTag';\nimport FormLayout from '../FormLayout';\nimport Input from '../Input/Input';\nimport Radio from '../Radio/Radio';\nimport Select from '../Select';\nimport Slider from '../Slider';\nimport Textarea from '../Textarea';\nimport Title, { type TitleTags } from '../Title';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n  /** Can be used as a replacement text for legend in cases where the group title already exists externally */\n  ariaLabelledBy?: string;\n  /** title for the the fieldset */\n  title?: string;\n  /** text placed in the legend tag of the fieldset */\n  legend?: string;\n  /** id for the legend tag */\n  legendId?: string;\n  /** Items in the FormGroup component */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper. */\n  errorWrapperClassName?: string;\n  /** Adds custom classes to the fieldset element. */\n  fieldsetClassName?: string;\n  /** Sets a tag that describes whether the form group is required or optional */\n  formFieldTag?: React.ReactNode;\n  /** Adds custom classes to the legend element. */\n  legendClassName?: string;\n  /** Changes the visuals of the formgroup */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Error message */\n  error?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error-wrapper. */\n  errorWrapperTestId?: string;\n  /** Unique name for the child input element */\n  name?: string;\n  /** Unique name for the fieldset */\n  fieldsetName?: string;\n  /** Sets div instead of fieldset tag */\n  htmlMarkup?: FormGroupTags;\n  /** Markup for legend if formgroup htmlMarkup is div*/\n  legendHtmlMarkup?: TitleTags;\n  /** Markup for title */\n  titleHtmlMarkup?: TitleTags;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n  /** Ref passed to the error message element */\n  errorMessageRef?: React.Ref<HTMLDivElement | null>;\n}\n\nexport const FormGroup: React.FC<FormGroupProps> = (props: FormGroupProps) => {\n  const {\n    ariaLabelledBy,\n    className,\n    errorTextId: errorTextIdProp,\n    fieldsetClassName,\n    formFieldTag,\n    legendClassName,\n    legendId,\n    onColor = FormOnColor.onwhite,\n    size = FormSize.normal,\n    error,\n    name,\n    htmlMarkup = 'fieldset',\n    renderError = true,\n    errorWrapperClassName,\n    errorWrapperTestId,\n    errorMessageRef,\n    legendHtmlMarkup = 'h5',\n    titleHtmlMarkup = 'h4',\n  } = props;\n  const radioGroupId = useId();\n  const [checkedRadioId, setCheckedRadioId] = useState<string>();\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const onDark = onColor === FormOnColor.ondark;\n  const formGroupWrapperClasses = classNames(formGroupStyles['form-group-wrapper'], className);\n  const titleClasses = classNames({\n    [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n  });\n\n  const CustomTagForLegend = legendHtmlMarkup;\n\n  const legendClasses = classNames(\n    formGroupStyles['field-set__legend'],\n    {\n      [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n    },\n    legendClassName\n  );\n\n  const childArray = React.Children.toArray(props.children);\n  const hasOnlyCompactComponents = childArray.length > 0 && childArray.every(isCompactComponent);\n  const hasCompactSublabel = hasOnlyCompactComponents && childArray.some(hasSublabel);\n  const fieldsetClasses = classNames(\n    formGroupStyles['field-set'],\n    {\n      [formGroupStyles['field-set--compact-gap']]: hasOnlyCompactComponents && !hasCompactSublabel,\n      [formGroupStyles['field-set--compact-sublabel-gap']]: hasCompactSublabel,\n    },\n    fieldsetClassName\n  );\n\n  const mapFormComponent = (child: React.ReactNode, index: number): React.ReactNode => {\n    if (isComponent<FormLayoutProps>(child, FormLayout)) {\n      return React.cloneElement(child, {\n        size,\n        mapHelper: mapFormComponent,\n      });\n    } else if (isComponent<FormGroupProps>(child, FormGroup)) {\n      return React.cloneElement(child, {\n        onColor,\n        size,\n        error,\n        renderError: false,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<CheckboxProps>(child, Checkbox)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<RadioProps>(child, Radio)) {\n      const radioId = typeof child.props.inputId === 'undefined' ? radioGroupId + index : child.props.inputId;\n      const groupChecked =\n        child.props.checked !== undefined ? child.props.checked : checkedRadioId !== undefined ? checkedRadioId === radioId : undefined;\n      return React.cloneElement(child, {\n        inputId: radioId,\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        checked: groupChecked,\n        onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n          setCheckedRadioId(event.target.id);\n          if (child.props.onChange) child.props.onChange(event);\n        },\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<InputProps>(child, Input)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<TextareaProps>(child, Textarea)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<SelectProps>(child, Select)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<SliderProps>(child, Slider)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    }\n    return child;\n  };\n\n  const formGroupContent = (): React.ReactNode => {\n    return (\n      <div>\n        {htmlMarkup === 'div' && (\n          <div className={fieldsetClasses}>\n            {props.legend && (\n              <>\n                <CustomTagForLegend id={legendId} className={legendClasses}>\n                  {props.legend}\n                  {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n                </CustomTagForLegend>\n              </>\n            )}\n            {React.Children.map(props.children, mapFormComponent)}\n          </div>\n        )}\n        {htmlMarkup === 'fieldset' && (\n          <fieldset aria-labelledby={ariaLabelledBy} name={props.fieldsetName} className={fieldsetClasses}>\n            {props.legend && (\n              <>\n                <legend id={legendId} className={legendClasses}>\n                  {props.legend}\n                  {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n                </legend>\n              </>\n            )}\n            {React.Children.map(props.children, mapFormComponent)}\n          </fieldset>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses}>\n      {props.title && (\n        <Title\n          className={titleClasses}\n          htmlMarkup={titleHtmlMarkup}\n          appearance={'title4'}\n          margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}\n        >\n          {props.title}\n        </Title>\n      )}\n      <ErrorWrapper\n        className={errorWrapperClassName}\n        errorText={error}\n        testId={errorWrapperTestId}\n        errorTextId={errorTextId}\n        errorMessageRef={errorMessageRef}\n        renderError={renderError}\n      >\n        {formGroupContent()}\n      </ErrorWrapper>\n    </div>\n  );\n};\n\nFormGroup.displayName = 'FormGroup';\n\nexport default FormGroup;\n"],"mappings":"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"}

package/lib/HelpDetails.js

@@ -1,4 +1,4 @@
-import { _ as autoUpdate, d as arrow, g as size, m as offset, o as useFloating, t as FloatingArrow } from "./floating-ui.react.js";
+import { a as useFloating, c as arrow, d as offset, m as autoUpdate, p as size, t as FloatingArrow } from "./floating-ui.react.js";
 import classNames from "classnames";
 import React, { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/lib/HelpTriggerIcon.js

@@ -136,13 +136,13 @@ var HelpSign = ({ color, weight, size }) => {
 //#endregion
 //#region src/components/HelpTriggerIcon/HelpTriggerIcon.tsx
 var getIconColor = (hover, weight) => {
-	if (weight === "normal") return hover ? "var(--color-help-graphics-verydark)" : "var(--color-help-graphics-normal)";
+	if (weight === "normal") return hover ? "var(--color-help-graphics-plus2)" : "var(--color-help-graphics)";
 };
 var HelpTriggerIcon = (props) => {
 	return /* @__PURE__ */ jsx(HelpTriggerIconInternal, { ...props });
 };
 var HelpTriggerIconInternal = (props) => {
-	const { ariaLabel, ariaLabelledById, className, htmlMarkup = "button", isHovered = false, size = "medium", testId, weight = "normal", ref, ...buttonRest } = props;
+	const { ariaLabel, ariaLabelledById, className, htmlMarkup = "button", isHovered = false, size = "normal", testId, weight = "normal", ref, ...buttonRest } = props;
 	const ariaLabelAttributes = getAriaLabelAttributes({
 		label: ariaLabel,
 		id: ariaLabelledById