@helsenorge/designsystem-react 16.0.0 → 16.1.0

package/lib/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [16.1.0](https://github.com/helsenorge/designsystem/compare/v16.0.0...v16.1.0) (2026-10-13)
+
+### Features
+
+*  ny komponent unsafe table ([8135e02](https://github.com/helsenorge/designsystem/commit/8135e024e9f26c70d8062f36acec3e4cde730206)), closes [#377504](https://github.com/helsenorge/designsystem/issues/377504) [#383283](https://github.com/helsenorge/designsystem/issues/383283) [#387276](https://github.com/helsenorge/designsystem/issues/387276)
+* **unsafe_table:**  lagt til resources prop ([c933cad](https://github.com/helsenorge/designsystem/commit/c933cadc43e1ce35b437db23084319f67c961892)), closes [#387372](https://github.com/helsenorge/designsystem/issues/387372)
+
+### Bug Fixes
+
+* **dateRangeSelector:**  sluttdato leses opp som sluttdato ([6b730aa](https://github.com/helsenorge/designsystem/commit/6b730aa9318875c5901eb6c557d5f7b0194a6346)), closes [#386339](https://github.com/helsenorge/designsystem/issues/386339)
+* **duolist:**  margin fjernet på prop ([adc027f](https://github.com/helsenorge/designsystem/commit/adc027f3c141013d394ab8be7c98c94e86b6ddd1)), closes [#387188](https://github.com/helsenorge/designsystem/issues/387188)
+
 ## [16.0.0](https://github.com/helsenorge/designsystem/compare/v16.0.0-beta.2...v16.0.0) (2026-10-06)
 
 ### Reverts

package/lib/Drawer.js

@@ -265,6 +265,7 @@ var InnerDrawer = (props) => {
 							/* @__PURE__ */ jsx("div", { ref: topContent }),
 							/* @__PURE__ */ jsx("div", {
 								className: classNames(styles$2["drawer__content__children"], { [styles$2["drawer__content__children--padding-extra"]]: paddingSize === "extra" }),
+								"data-overflow-boundary": true,
 								children
 							}),
 							/* @__PURE__ */ jsx("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-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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"}
+{"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              data-overflow-boundary\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/Expander.js

@@ -99,6 +99,7 @@ var Expander = (props) => {
 			className: leftBorderClassName,
 			children: /* @__PURE__ */ jsx("div", {
 				className: contentClassName,
+				"data-overflow-boundary": true,
 				children
 			})
 		});

package/lib/Expander.js.map

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

package/lib/HorizontalScroll.js

@@ -1,5 +1,4 @@
 import { useIsVisible } from "./hooks/useIsVisible.js";
-import { useSize } from "./hooks/useSize.js";
 import { useStopPropagation } from "./hooks/usestopPropagation.js";
 import classNames from "classnames";
 import { useRef } from "react";
@@ -7,7 +6,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/HorizontalScroll/styles.module.scss";
 //#region src/components/HorizontalScroll/HorizontalScroll.tsx
 var ROOT_MARGIN_OFFSET = "3px";
-var HorizontalScroll = ({ children, childWidth, testId, ...rest }) => {
+var HorizontalScroll = ({ children, testId, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }) => {
 	const viewportRef = useRef(null);
 	const leftRef = useRef(null);
 	const rightRef = useRef(null);
@@ -19,20 +18,17 @@ var HorizontalScroll = ({ children, childWidth, testId, ...rest }) => {
 		root: viewportRef?.current,
 		rootMargin: ROOT_MARGIN_OFFSET
 	}, true);
-	const { width: viewPortWidth = 0 } = useSize(viewportRef) || {};
-	const isOverflowing = childWidth > viewPortWidth;
-	const viewportClasses = classNames(styles.horizontalscroll__viewport, isOverflowing && styles["horizontalscroll__viewport--overflow"]);
-	const hasAriaAttributes = rest["aria-label"] || rest["aria-labelledby"];
+	const hasAriaAttributes = ariaLabel || ariaLabelledBy;
 	useStopPropagation(viewportRef, ["touchstart", "touchmove"]);
 	return /* @__PURE__ */ jsx("div", {
 		className: styles.horizontalscroll,
 		"data-testid": testId,
-		children: /* @__PURE__ */ jsxs("div", {
-			className: viewportClasses,
+		children: /* @__PURE__ */ jsxs("section", {
+			className: styles.horizontalscroll__viewport,
 			ref: viewportRef,
 			tabIndex: hasAriaAttributes ? 0 : void 0,
-			role: hasAriaAttributes ? "region" : void 0,
-			...rest,
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledBy,
 			children: [
 				/* @__PURE__ */ jsx("div", { className: classNames(styles.horizontalscroll__indicator, styles["horizontalscroll__indicator--left"], !leftIsVisible && styles["horizontalscroll__indicator--visible"]) }),
 				/* @__PURE__ */ jsx("div", { className: classNames(styles.horizontalscroll__indicator, styles["horizontalscroll__indicator--right"], !rightIsVisible && styles["horizontalscroll__indicator--visible"]) }),

package/lib/HorizontalScroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScroll.js","names":[],"sources":["../src/components/HorizontalScroll/HorizontalScroll.tsx","../src/components/HorizontalScroll/index.ts"],"sourcesContent":["import { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { AriaLabelAttributes } from '../../utils/accessibility';\n\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useSize } from '../../hooks/useSize';\nimport { useStopPropagation } from '../../hooks/usestopPropagation';\n\nimport styles from './styles.module.scss';\n\n// Scrolle-indikator vises/skjules når det er x px igjen til venstre eller høyre side\nconst ROOT_MARGIN_OFFSET = '3px';\n\ninterface HorizontalScrollProps {\n  children?: React.ReactNode;\n  /**\n   * Bredden på elementet som potensielt vil scrolle horisontalt i px\n   */\n  childWidth: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const HorizontalScroll: React.FC<HorizontalScrollProps & AriaLabelAttributes> = ({ children, childWidth, testId, ...rest }) => {\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const leftRef = useRef<HTMLDivElement>(null);\n  const rightRef = useRef<HTMLDivElement>(null);\n  const leftIsVisible = useIsVisible(leftRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const rightIsVisible = useIsVisible(rightRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const { width: viewPortWidth = 0 } = useSize(viewportRef) || {};\n\n  const isOverflowing = childWidth > viewPortWidth;\n  const viewportClasses = classNames(styles.horizontalscroll__viewport, isOverflowing && styles['horizontalscroll__viewport--overflow']);\n  const hasAriaAttributes = rest['aria-label'] || rest['aria-labelledby'];\n\n  useStopPropagation(viewportRef, ['touchstart', 'touchmove']);\n\n  return (\n    <div className={styles.horizontalscroll} data-testid={testId}>\n      {/* viewport-diven må ta tabIndex for å løse et annet UU-problem, at div med overflow: scroll må kunne navigeres med keyboard. */}\n      {/* Enten aria-label eller aria-labelledbyid må settes */}\n      <div\n        className={viewportClasses}\n        ref={viewportRef}\n        tabIndex={hasAriaAttributes ? 0 : undefined}\n        role={hasAriaAttributes ? 'region' : undefined}\n        {...rest}\n      >\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--left'],\n            !leftIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--right'],\n            !rightIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div ref={leftRef} />\n        {children}\n        <div ref={rightRef} />\n      </div>\n    </div>\n  );\n};\n\nexport default HorizontalScroll;\n","import HorizontalScroll from './HorizontalScroll';\nexport * from './HorizontalScroll';\nexport default HorizontalScroll;\n"],"mappings":";;;;;;;;AAaA,IAAM,qBAAqB;AAY3B,IAAa,oBAA2E,EAAE,UAAU,YAAY,QAAQ,GAAG,WAAW;CACpI,MAAM,cAAc,OAAuB,IAAI;CAC/C,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,WAAW,OAAuB,IAAI;CAC5C,MAAM,gBAAgB,aAAa,SAAS,GAAG;EAAE,MAAM,aAAa;EAAS,YAAY;CAAmB,GAAG,IAAI;CACnH,MAAM,iBAAiB,aAAa,UAAU,GAAG;EAAE,MAAM,aAAa;EAAS,YAAY;CAAmB,GAAG,IAAI;CACrH,MAAM,EAAE,OAAO,gBAAgB,MAAM,QAAQ,WAAW,KAAK,CAAC;CAE9D,MAAM,gBAAgB,aAAa;CACnC,MAAM,kBAAkB,WAAW,OAAO,4BAA4B,iBAAiB,OAAO,uCAAuC;CACrI,MAAM,oBAAoB,KAAK,iBAAiB,KAAK;CAErD,mBAAmB,aAAa,CAAC,cAAc,WAAW,CAAC;CAE3D,OACE,oBAAC,OAAD;EAAK,WAAW,OAAO;EAAkB,eAAa;EAGpD,UAAA,qBAAC,OAAD;GACE,WAAW;GACX,KAAK;GACL,UAAU,oBAAoB,IAAI,KAAA;GAClC,MAAM,oBAAoB,WAAW,KAAA;GACrC,GAAI;GALN,UAAA;IAOE,oBAAC,OAAD,EACE,WAAW,WACT,OAAO,6BACP,OAAO,sCACP,CAAC,iBAAiB,OAAO,uCAC3B,EACD,CAAA;IACD,oBAAC,OAAD,EACE,WAAW,WACT,OAAO,6BACP,OAAO,uCACP,CAAC,kBAAkB,OAAO,uCAC5B,EACD,CAAA;IACD,oBAAC,OAAD,EAAK,KAAK,QAAU,CAAA;IACnB;IACD,oBAAC,OAAD,EAAK,KAAK,SAAW,CAAA;GAClB;;CACF,CAAA;AAET;;;ACpEA,IAAA,2BAAe"}
+{"version":3,"file":"HorizontalScroll.js","names":[],"sources":["../src/components/HorizontalScroll/HorizontalScroll.tsx","../src/components/HorizontalScroll/index.ts"],"sourcesContent":["import { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { AriaLabelAttributes } from '../../utils/accessibility';\n\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useStopPropagation } from '../../hooks/usestopPropagation';\n\nimport styles from './styles.module.scss';\n\n// Scrolle-indikator vises/skjules når det er x px igjen til venstre eller høyre side\nconst ROOT_MARGIN_OFFSET = '3px';\n\ninterface HorizontalScrollProps {\n  children?: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const HorizontalScroll: React.FC<HorizontalScrollProps & AriaLabelAttributes> = ({\n  children,\n  testId,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n}) => {\n  const viewportRef = useRef<HTMLElement>(null);\n  const leftRef = useRef<HTMLDivElement>(null);\n  const rightRef = useRef<HTMLDivElement>(null);\n  const leftIsVisible = useIsVisible(leftRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const rightIsVisible = useIsVisible(rightRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const hasAriaAttributes = ariaLabel || ariaLabelledBy;\n\n  useStopPropagation(viewportRef, ['touchstart', 'touchmove']);\n\n  return (\n    <div className={styles.horizontalscroll} data-testid={testId}>\n      {/* viewport-diven må ta tabIndex for å løse et annet UU-problem, at div med overflow: scroll må kunne navigeres med keyboard. */}\n      {/* Enten aria-label eller aria-labelledbyid må settes */}\n      <section\n        className={styles.horizontalscroll__viewport}\n        ref={viewportRef}\n        // Scrollbart område må kunne nås med tastatur. Seksjonen har navn (og dermed region-rolle) når tabIndex settes\n        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n        tabIndex={hasAriaAttributes ? 0 : undefined}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n      >\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--left'],\n            !leftIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--right'],\n            !rightIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div ref={leftRef} />\n        {children}\n        <div ref={rightRef} />\n      </section>\n    </div>\n  );\n};\n\nexport default HorizontalScroll;\n","import HorizontalScroll from './HorizontalScroll';\nexport * from './HorizontalScroll';\nexport default HorizontalScroll;\n"],"mappings":";;;;;;;AAYA,IAAM,qBAAqB;AAQ3B,IAAa,oBAA2E,EACtF,UACA,QACA,cAAc,WACd,mBAAmB,qBACf;CACJ,MAAM,cAAc,OAAoB,IAAI;CAC5C,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,WAAW,OAAuB,IAAI;CAC5C,MAAM,gBAAgB,aAAa,SAAS,GAAG;EAAE,MAAM,aAAa;EAAS,YAAY;CAAmB,GAAG,IAAI;CACnH,MAAM,iBAAiB,aAAa,UAAU,GAAG;EAAE,MAAM,aAAa;EAAS,YAAY;CAAmB,GAAG,IAAI;CACrH,MAAM,oBAAoB,aAAa;CAEvC,mBAAmB,aAAa,CAAC,cAAc,WAAW,CAAC;CAE3D,OACE,oBAAC,OAAD;EAAK,WAAW,OAAO;EAAkB,eAAa;EAGpD,UAAA,qBAAC,WAAD;GACE,WAAW,OAAO;GAClB,KAAK;GAGL,UAAU,oBAAoB,IAAI,KAAA;GAClC,cAAY;GACZ,mBAAiB;GAPnB,UAAA;IASE,oBAAC,OAAD,EACE,WAAW,WACT,OAAO,6BACP,OAAO,sCACP,CAAC,iBAAiB,OAAO,uCAC3B,EACD,CAAA;IACD,oBAAC,OAAD,EACE,WAAW,WACT,OAAO,6BACP,OAAO,uCACP,CAAC,kBAAkB,OAAO,uCAC5B,EACD,CAAA;IACD,oBAAC,OAAD,EAAK,KAAK,QAAU,CAAA;IACnB;IACD,oBAAC,OAAD,EAAK,KAAK,SAAW,CAAA;GACd;;CACN,CAAA;AAET;;;AClEA,IAAA,2BAAe"}

package/lib/StackedCellContent.js

@@ -0,0 +1,15 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import styles from "./components/UNSAFE_Table/styles.module.scss";
+//#region src/components/UNSAFE_Table/StackedCellContent.tsx
+/** Heading + content as rendered in a stacked cell. Shared by UNSAFE_TableCell and UNSAFE_TableDetail. */
+var StackedCellContent = ({ headingText, children }) => /* @__PURE__ */ jsxs(Fragment, { children: [headingText && /* @__PURE__ */ jsx("span", {
+	className: styles["table__cell-heading-text"],
+	children: headingText
+}), /* @__PURE__ */ jsx("span", {
+	className: styles["table__cell-content"],
+	children
+})] });
+//#endregion
+export { StackedCellContent as t };
+
+//# sourceMappingURL=StackedCellContent.js.map

package/lib/StackedCellContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedCellContent.js","names":[],"sources":["../src/components/UNSAFE_Table/StackedCellContent.tsx"],"sourcesContent":["import styles from './styles.module.scss';\n\ninterface StackedCellContentProps {\n  /** Heading shown before the content in the stack variant */\n  headingText?: string;\n  /** The content */\n  children?: React.ReactNode;\n}\n\n/** Heading + content as rendered in a stacked cell. Shared by UNSAFE_TableCell and UNSAFE_TableDetail. */\nexport const StackedCellContent: React.FC<StackedCellContentProps> = ({ headingText, children }) => (\n  <>\n    {headingText && <span className={styles['table__cell-heading-text']}>{headingText}</span>}\n    <span className={styles['table__cell-content']}>{children}</span>\n  </>\n);\n\nexport default StackedCellContent;\n"],"mappings":";;;;AAUA,IAAa,sBAAyD,EAAE,aAAa,eACnF,qBAAA,UAAA,EAAA,UAAA,CACG,eAAe,oBAAC,QAAD;CAAM,WAAW,OAAO;CAA8B,UAAA;AAAkB,CAAA,GACxF,oBAAC,QAAD;CAAM,WAAW,OAAO;CAAyB;AAAe,CAAA,CAChE,EAAA,CAAA"}

package/lib/TabPanel.js

@@ -9,6 +9,7 @@ var TabPanel = (props) => {
 		ref,
 		className: tabPanelClasses,
 		style,
+		"data-overflow-boundary": true,
 		children: /* @__PURE__ */ jsx("div", { children })
 	});
 };

package/lib/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","names":[],"sources":["../src/components/Tabs/TabPanel/TabPanel.tsx","../src/components/Tabs/TabPanel/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { TabsColors } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabPanelProps {\n  children?: React.ReactNode;\n  color?: TabsColors;\n  isFirst?: boolean;\n  style?: React.CSSProperties;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\n\nconst TabPanel: React.FC<TabPanelProps> = props => {\n  const { children, color = 'white', isFirst = false, style, ref } = props;\n\n  const tabPanelClasses = classNames(styles['tab-panel'], styles[`tab-panel--${color}`], {\n    [styles['tab-panel--first']]: isFirst,\n  });\n\n  return (\n    <div ref={ref} className={tabPanelClasses} style={style}>\n      <div>{children}</div>\n    </div>\n  );\n};\n\nTabPanel.displayName = 'TabPanel';\nexport default TabPanel;\n","import TabPanel from './TabPanel';\nexport * from './TabPanel';\nexport default TabPanel;\n"],"mappings":";;;;AAeA,IAAM,YAAoC,UAAS;CACjD,MAAM,EAAE,UAAU,QAAQ,SAAS,UAAU,OAAO,OAAO,QAAQ;CAEnE,MAAM,kBAAkB,WAAW,OAAO,cAAc,OAAO,cAAc,UAAU,GACpF,OAAO,sBAAsB,QAChC,CAAC;CAED,OACE,oBAAC,OAAD;EAAU;EAAK,WAAW;EAAwB;EAChD,UAAA,oBAAC,OAAD,EAAM,SAAc,CAAA;CACjB,CAAA;AAET;AAEA,SAAS,cAAc;;;AC3BvB,IAAA,mBAAe"}
+{"version":3,"file":"TabPanel.js","names":[],"sources":["../src/components/Tabs/TabPanel/TabPanel.tsx","../src/components/Tabs/TabPanel/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { TabsColors } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabPanelProps {\n  children?: React.ReactNode;\n  color?: TabsColors;\n  isFirst?: boolean;\n  style?: React.CSSProperties;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\n\nconst TabPanel: React.FC<TabPanelProps> = props => {\n  const { children, color = 'white', isFirst = false, style, ref } = props;\n\n  const tabPanelClasses = classNames(styles['tab-panel'], styles[`tab-panel--${color}`], {\n    [styles['tab-panel--first']]: isFirst,\n  });\n\n  return (\n    <div ref={ref} className={tabPanelClasses} style={style} data-overflow-boundary>\n      <div>{children}</div>\n    </div>\n  );\n};\n\nTabPanel.displayName = 'TabPanel';\nexport default TabPanel;\n","import TabPanel from './TabPanel';\nexport * from './TabPanel';\nexport default TabPanel;\n"],"mappings":";;;;AAeA,IAAM,YAAoC,UAAS;CACjD,MAAM,EAAE,UAAU,QAAQ,SAAS,UAAU,OAAO,OAAO,QAAQ;CAEnE,MAAM,kBAAkB,WAAW,OAAO,cAAc,OAAO,cAAc,UAAU,GACpF,OAAO,sBAAsB,QAChC,CAAC;CAED,OACE,oBAAC,OAAD;EAAU;EAAK,WAAW;EAAwB;EAAO,0BAAA;EACvD,UAAA,oBAAC,OAAD,EAAM,SAAc,CAAA;CACjB,CAAA;AAET;AAEA,SAAS,cAAc;;;AC3BvB,IAAA,mBAAe"}

package/lib/TableContext.js

@@ -0,0 +1,26 @@
+import { i as TableSizes, r as TableColors, t as ResponsiveTableVariant } from "./constants3.js";
+import { createContext } from "react";
+var HN_Designsystem_Table_nb_NO_default = {
+	showMoreButton: "Vis mer",
+	menuHeadCell: "Valg",
+	expandRowButton: "Vis detaljer",
+	collapseRowButton: "Skjul detaljer"
+};
+//#endregion
+//#region src/components/UNSAFE_Table/TableContext.ts
+/** Table-wide configuration provided by UNSAFE_Table. */
+var TableContext = createContext({
+	variant: ResponsiveTableVariant.normal,
+	color: TableColors.normal,
+	size: TableSizes.normal,
+	zebraStripes: false,
+	hiddenColumns: [],
+	headingTexts: [],
+	resources: HN_Designsystem_Table_nb_NO_default
+});
+/** Heading of the column a cell belongs to. Provided per cell by UNSAFE_TableRow. */
+var CellHeadingContext = createContext("");
+//#endregion
+export { TableContext as n, HN_Designsystem_Table_nb_NO_default as r, CellHeadingContext as t };
+
+//# sourceMappingURL=TableContext.js.map

package/lib/TableContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableContext.js","names":[],"sources":["../src/resources/HN.Designsystem.Table.nb-NO.json","../src/components/UNSAFE_Table/TableContext.ts"],"sourcesContent":["{\n  \"showMoreButton\": \"Vis mer\",\n  \"menuHeadCell\": \"Valg\",\n  \"expandRowButton\": \"Vis detaljer\",\n  \"collapseRowButton\": \"Skjul detaljer\"\n}\n","import { createContext } from 'react';\n\nimport type { HNDesignsystemTable } from '../../resources/Resources';\n\nimport { ResponsiveTableVariant, TableColors, TableSizes } from './constants';\nimport nbNO from '../../resources/HN.Designsystem.Table.nb-NO.json';\n\nexport interface TableContextValue {\n  /** Resolved responsive variant for the current breakpoint. */\n  variant: keyof typeof ResponsiveTableVariant;\n  /** Header category for styling. */\n  color: TableColors;\n  /** For display with less space. */\n  size: TableSizes;\n  /** Whether zebra stripes are enabled. Applied by UNSAFE_TableBody, which can also override it. */\n  zebraStripes: boolean;\n  /** Indexes of the columns marked with hideBehindExpander on their UNSAFE_TableHeadCell. */\n  hiddenColumns: number[];\n  /** Text of each column's UNSAFE_TableHeadCell, used as the default heading of cells in the stack variant. */\n  headingTexts: string[];\n  /** Resource texts of the Table. */\n  resources: HNDesignsystemTable;\n}\n\n/** Table-wide configuration provided by UNSAFE_Table. */\nexport const TableContext = createContext<TableContextValue>({\n  variant: ResponsiveTableVariant.normal,\n  color: TableColors.normal,\n  size: TableSizes.normal,\n  zebraStripes: false,\n  hiddenColumns: [],\n  headingTexts: [],\n  resources: nbNO,\n});\n\n/** Heading of the column a cell belongs to. Provided per cell by UNSAFE_TableRow. */\nexport const CellHeadingContext = createContext<string>('');\n"],"mappings":";;;;;;;;;;;ACyBA,IAAa,eAAe,cAAiC;CAC3D,SAAS,uBAAuB;CAChC,OAAO,YAAY;CACnB,MAAM,WAAW;CACjB,cAAc;CACd,eAAe,CAAC;CAChB,cAAc,CAAC;CACf,WAAW;AACb,CAAC;;AAGD,IAAa,qBAAqB,cAAsB,EAAE"}

package/lib/UNSAFE_TableBody.js

@@ -0,0 +1,22 @@
+import { n as TableContext } from "./TableContext.js";
+import classNames from "classnames";
+import { useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import styles from "./components/UNSAFE_Table/styles.module.scss";
+//#region src/components/UNSAFE_Table/UNSAFE_TableBody/UNSAFE_TableBody.tsx
+var UNSAFE_TableBody = ({ className, children, zebraStripes, ...rest }) => {
+	const { zebraStripes: inheritedZebraStripes } = useContext(TableContext);
+	const tableBodyClasses = classNames(styles["table-body"], { [styles["table-body--zebra"]]: zebraStripes ?? inheritedZebraStripes }, className);
+	return /* @__PURE__ */ jsx("tbody", {
+		className: tableBodyClasses,
+		...rest,
+		children
+	});
+};
+//#endregion
+//#region src/components/UNSAFE_Table/UNSAFE_TableBody/index.ts
+var UNSAFE_TableBody_default = UNSAFE_TableBody;
+//#endregion
+export { UNSAFE_TableBody as n, UNSAFE_TableBody_default as t };
+
+//# sourceMappingURL=UNSAFE_TableBody.js.map

package/lib/UNSAFE_TableBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UNSAFE_TableBody.js","names":[],"sources":["../src/components/UNSAFE_Table/UNSAFE_TableBody/UNSAFE_TableBody.tsx","../src/components/UNSAFE_Table/UNSAFE_TableBody/index.ts"],"sourcesContent":["import { useContext } from 'react';\n\nimport classNames from 'classnames';\n\nimport styles from '../styles.module.scss';\nimport { TableContext } from '../TableContext';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'tbody'>, 'style'> {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table body. Use TableRows */\n  children?: React.ReactNode;\n  /** Applies zebra stripes to every other row. Overrides the value from UNSAFE_Table. */\n  zebraStripes?: boolean;\n}\n\nexport const UNSAFE_TableBody: React.FC<Props> = ({ className, children, zebraStripes, ...rest }) => {\n  const { zebraStripes: inheritedZebraStripes } = useContext(TableContext);\n  const tableBodyClasses = classNames(\n    styles['table-body'],\n    { [styles['table-body--zebra']]: zebraStripes ?? inheritedZebraStripes },\n    className\n  );\n\n  return (\n    <tbody className={tableBodyClasses} {...rest}>\n      {children}\n    </tbody>\n  );\n};\n\nexport default UNSAFE_TableBody;\n","import UNSAFE_TableBody from './UNSAFE_TableBody';\nexport * from './UNSAFE_TableBody';\nexport default UNSAFE_TableBody;\n"],"mappings":";;;;;;AAgBA,IAAa,oBAAqC,EAAE,WAAW,UAAU,cAAc,GAAG,WAAW;CACnG,MAAM,EAAE,cAAc,0BAA0B,WAAW,YAAY;CACvE,MAAM,mBAAmB,WACvB,OAAO,eACP,GAAG,OAAO,uBAAuB,gBAAgB,sBAAsB,GACvE,SACF;CAEA,OACE,oBAAC,SAAD;EAAO,WAAW;EAAkB,GAAI;EACrC;CACI,CAAA;AAEX;;;AC3BA,IAAA,2BAAe"}

package/lib/UNSAFE_TableCell.js

@@ -0,0 +1,26 @@
+import { a as TextAlign, i as TableSizes, r as TableColors } from "./constants3.js";
+import { n as TableContext, t as CellHeadingContext } from "./TableContext.js";
+import { t as StackedCellContent } from "./StackedCellContent.js";
+import classNames from "classnames";
+import { useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import styles from "./components/UNSAFE_Table/styles.module.scss";
+//#region src/components/UNSAFE_Table/UNSAFE_TableCell/UNSAFE_TableCell.tsx
+var UNSAFE_TableCell = ({ nowrap = false, textAlign = TextAlign.left, children, className, testId, ...rest }) => {
+	const { color, size } = useContext(TableContext);
+	const heading = useContext(CellHeadingContext);
+	const tableCellClass = classNames(styles["table__cell"], { [styles["table__cell--stacked"]]: !!heading }, { [styles["table__cell--transparent"]]: color === TableColors.transparent }, { [styles["table__cell--compact"]]: size === TableSizes.compact }, { [styles["table__cell--nowrap"]]: nowrap }, { [styles["table__cell--center"]]: textAlign === "center" }, { [styles["table__cell--right"]]: textAlign === "right" }, className);
+	return /* @__PURE__ */ jsx("td", {
+		className: tableCellClass,
+		"data-testid": testId,
+		...rest,
+		children: /* @__PURE__ */ jsx(StackedCellContent, {
+			headingText: heading,
+			children
+		})
+	});
+};
+//#endregion
+export { UNSAFE_TableCell as t };
+
+//# sourceMappingURL=UNSAFE_TableCell.js.map

package/lib/UNSAFE_TableCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UNSAFE_TableCell.js","names":[],"sources":["../src/components/UNSAFE_Table/UNSAFE_TableCell/UNSAFE_TableCell.tsx"],"sourcesContent":["import { useContext } from 'react';\n\nimport classNames from 'classnames';\n\nimport { TableColors, TableSizes, TextAlign } from '../constants';\nimport StackedCellContent from '../StackedCellContent';\nimport styles from '../styles.module.scss';\nimport { CellHeadingContext, TableContext } from '../TableContext';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'td'>, 'style'> {\n  /**  text align in cell */\n  textAlign?: TextAlign;\n  /**  nowrap for white space */\n  nowrap?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table cell */\n  children?: React.ReactNode;\n  /** For test purposes */\n  testId?: string;\n}\n\nexport const UNSAFE_TableCell: React.FC<Props> = ({ nowrap = false, textAlign = TextAlign.left, children, className, testId, ...rest }) => {\n  const { color, size } = useContext(TableContext);\n  const heading = useContext(CellHeadingContext);\n  const tableCellClass = classNames(\n    styles['table__cell'],\n    { [styles['table__cell--stacked']]: !!heading },\n    { [styles['table__cell--transparent']]: color === TableColors.transparent },\n    { [styles['table__cell--compact']]: size === TableSizes.compact },\n    { [styles['table__cell--nowrap']]: nowrap },\n    { [styles['table__cell--center']]: textAlign === 'center' },\n    { [styles['table__cell--right']]: textAlign === 'right' },\n    className\n  );\n\n  return (\n    <td className={tableCellClass} data-testid={testId} {...rest}>\n      <StackedCellContent headingText={heading}>{children}</StackedCellContent>\n    </td>\n  );\n};\n\nexport default UNSAFE_TableCell;\n"],"mappings":";;;;;;;;AAsBA,IAAa,oBAAqC,EAAE,SAAS,OAAO,YAAY,UAAU,MAAM,UAAU,WAAW,QAAQ,GAAG,WAAW;CACzI,MAAM,EAAE,OAAO,SAAS,WAAW,YAAY;CAC/C,MAAM,UAAU,WAAW,kBAAkB;CAC7C,MAAM,iBAAiB,WACrB,OAAO,gBACP,GAAG,OAAO,0BAA0B,CAAC,CAAC,QAAQ,GAC9C,GAAG,OAAO,8BAA8B,UAAU,YAAY,YAAY,GAC1E,GAAG,OAAO,0BAA0B,SAAS,WAAW,QAAQ,GAChE,GAAG,OAAO,yBAAyB,OAAO,GAC1C,GAAG,OAAO,yBAAyB,cAAc,SAAS,GAC1D,GAAG,OAAO,wBAAwB,cAAc,QAAQ,GACxD,SACF;CAEA,OACE,oBAAC,MAAD;EAAI,WAAW;EAAgB,eAAa;EAAQ,GAAI;EACtD,UAAA,oBAAC,oBAAD;GAAoB,aAAa;GAAU;EAA6B,CAAA;CACtE,CAAA;AAER"}

package/lib/UNSAFE_TableDetail.js

@@ -0,0 +1,17 @@
+import { t as StackedCellContent } from "./StackedCellContent.js";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+import styles from "./components/UNSAFE_Table/styles.module.scss";
+//#region src/components/UNSAFE_Table/UNSAFE_TableDetail/UNSAFE_TableDetail.tsx
+var UNSAFE_TableDetail = ({ headingText, className, children, testId }) => /* @__PURE__ */ jsx("div", {
+	className: classNames(styles["table__cell"], styles["table__cell--stacked"], styles["table__detail"], className),
+	"data-testid": testId,
+	children: /* @__PURE__ */ jsx(StackedCellContent, {
+		headingText,
+		children
+	})
+});
+//#endregion
+export { UNSAFE_TableDetail as t };
+
+//# sourceMappingURL=UNSAFE_TableDetail.js.map

package/lib/UNSAFE_TableDetail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UNSAFE_TableDetail.js","names":[],"sources":["../src/components/UNSAFE_Table/UNSAFE_TableDetail/UNSAFE_TableDetail.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport StackedCellContent from '../StackedCellContent';\nimport styles from '../styles.module.scss';\n\nexport interface Props {\n  /** Heading shown before the content */\n  headingText: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The content, typically the value of a column hidden with hideBehindExpander */\n  children?: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const UNSAFE_TableDetail: React.FC<Props> = ({ headingText, className, children, testId }) => (\n  <div\n    className={classNames(styles['table__cell'], styles['table__cell--stacked'], styles['table__detail'], className)}\n    data-testid={testId}\n  >\n    <StackedCellContent headingText={headingText}>{children}</StackedCellContent>\n  </div>\n);\n\nexport default UNSAFE_TableDetail;\n"],"mappings":";;;;;AAgBA,IAAa,sBAAuC,EAAE,aAAa,WAAW,UAAU,aACtF,oBAAC,OAAD;CACE,WAAW,WAAW,OAAO,gBAAgB,OAAO,yBAAyB,OAAO,kBAAkB,SAAS;CAC/G,eAAa;CAEb,UAAA,oBAAC,oBAAD;EAAiC;EAAc;CAA6B,CAAA;AACzE,CAAA"}

package/lib/UNSAFE_TableExpandedRow.js

@@ -0,0 +1,46 @@
+import { t as Icon_default } from "./Icon.js";
+import { t as Button_default } from "./Button.js";
+import ChevronUp from "./components/Icons/ChevronUp.js";
+import { i as TableSizes } from "./constants3.js";
+import { n as TableContext } from "./TableContext.js";
+import classNames from "classnames";
+import React, { useContext, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import styles from "./components/UNSAFE_Table/styles.module.scss";
+//#region src/components/UNSAFE_Table/UNSAFE_TableExpandedRow/UNSAFE_TableExpandedRow.tsx
+var UNSAFE_TableExpandedRow = ({ expanded, toggleClick, children, className, stackOnly, id }) => {
+	const { size, resources } = useContext(TableContext);
+	const rowRef = useRef(null);
+	const [colSpan, setColSpan] = useState(1);
+	useLayoutEffect(() => {
+		const previousRow = rowRef.current?.previousElementSibling;
+		if (!previousRow) return;
+		const count = Array.from(previousRow.children).reduce((sum, cell) => sum + (cell.colSpan || 1), 0);
+		setColSpan(count);
+	});
+	const tableRowClass = classNames(styles["table__expanded-row"], {
+		[styles["table__expanded-row--expanded"]]: expanded,
+		[styles["table__expanded-row--stack-only"]]: stackOnly
+	}, className);
+	const tableCellClass = classNames(styles["table__cell"], styles["table__expanded-row__cell"], className, { [styles["table__cell--compact"]]: size === TableSizes.compact });
+	return /* @__PURE__ */ jsx("tr", {
+		ref: rowRef,
+		className: tableRowClass,
+		id,
+		children: /* @__PURE__ */ jsxs("td", {
+			colSpan,
+			className: tableCellClass,
+			children: [React.Children.map(children, (child) => React.isValidElement(child) && React.cloneElement(child)), /* @__PURE__ */ jsxs(Button_default, {
+				variant: "borderless",
+				onClick: toggleClick,
+				"aria-expanded": expanded,
+				tabIndex: expanded ? 0 : -1,
+				children: [resources.collapseRowButton, /* @__PURE__ */ jsx(Icon_default, { svgIcon: ChevronUp })]
+			})]
+		})
+	});
+};
+//#endregion
+export { UNSAFE_TableExpandedRow as t };
+
+//# sourceMappingURL=UNSAFE_TableExpandedRow.js.map

package/lib/UNSAFE_TableExpandedRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UNSAFE_TableExpandedRow.js","names":[],"sources":["../src/components/UNSAFE_Table/UNSAFE_TableExpandedRow/UNSAFE_TableExpandedRow.tsx"],"sourcesContent":["import React, { useContext, useLayoutEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport { TableSizes } from '../constants';\nimport styles from '../styles.module.scss';\nimport { TableContext } from '../TableContext';\n\nexport interface Props {\n  /** Row is expanded. */\n  expanded: boolean;\n  /** When hide button inside expanded row is clicked. */\n  toggleClick: () => void;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the expanded row.  */\n  children: React.ReactNode;\n  /** Only display the expanded row in the stack variant. */\n  stackOnly?: boolean;\n  /** Row id. For use with aria-controls. */\n  id?: string;\n}\n\nexport const UNSAFE_TableExpandedRow = ({ expanded, toggleClick, children, className, stackOnly, id }: Props): React.JSX.Element => {\n  const { size, resources } = useContext(TableContext);\n  const rowRef = useRef<HTMLTableRowElement>(null);\n  const [colSpan, setColSpan] = useState(1);\n\n  // Spenner over alle kolonnene i raden over\n  useLayoutEffect(() => {\n    const previousRow = rowRef.current?.previousElementSibling;\n    if (!previousRow) {\n      return;\n    }\n\n    const count = Array.from(previousRow.children).reduce((sum, cell) => sum + ((cell as HTMLTableCellElement).colSpan || 1), 0);\n    setColSpan(count);\n  });\n  const tableRowClass = classNames(\n    styles['table__expanded-row'],\n    {\n      [styles['table__expanded-row--expanded']]: expanded,\n      [styles['table__expanded-row--stack-only']]: stackOnly,\n    },\n    className\n  );\n  const tableCellClass = classNames(styles['table__cell'], styles['table__expanded-row__cell'], className, {\n    [styles['table__cell--compact']]: size === TableSizes.compact,\n  });\n\n  return (\n    <tr ref={rowRef} className={tableRowClass} id={id}>\n      <td colSpan={colSpan} className={tableCellClass}>\n        {React.Children.map(children, child => React.isValidElement(child) && React.cloneElement(child))}\n        <Button variant={'borderless'} onClick={toggleClick} aria-expanded={expanded} tabIndex={expanded ? 0 : -1}>\n          {resources.collapseRowButton}\n          <Icon svgIcon={ChevronUp} />\n        </Button>\n      </td>\n    </tr>\n  );\n};\n\nexport default UNSAFE_TableExpandedRow;\n"],"mappings":";;;;;;;;;;AA0BA,IAAa,2BAA2B,EAAE,UAAU,aAAa,UAAU,WAAW,WAAW,SAAmC;CAClI,MAAM,EAAE,MAAM,cAAc,WAAW,YAAY;CACnD,MAAM,SAAS,OAA4B,IAAI;CAC/C,MAAM,CAAC,SAAS,cAAc,SAAS,CAAC;CAGxC,sBAAsB;EACpB,MAAM,cAAc,OAAO,SAAS;EACpC,IAAI,CAAC,aACH;EAGF,MAAM,QAAQ,MAAM,KAAK,YAAY,QAAQ,CAAC,CAAC,QAAQ,KAAK,SAAS,OAAQ,KAA8B,WAAW,IAAI,CAAC;EAC3H,WAAW,KAAK;CAClB,CAAC;CACD,MAAM,gBAAgB,WACpB,OAAO,wBACP;GACG,OAAO,mCAAmC;GAC1C,OAAO,qCAAqC;CAC/C,GACA,SACF;CACA,MAAM,iBAAiB,WAAW,OAAO,gBAAgB,OAAO,8BAA8B,WAAW,GACtG,OAAO,0BAA0B,SAAS,WAAW,QACxD,CAAC;CAED,OACE,oBAAC,MAAD;EAAI,KAAK;EAAQ,WAAW;EAAmB;EAC7C,UAAA,qBAAC,MAAD;GAAa;GAAS,WAAW;GAAjC,UAAA,CACG,MAAM,SAAS,IAAI,WAAU,UAAS,MAAM,eAAe,KAAK,KAAK,MAAM,aAAa,KAAK,CAAC,GAC/F,qBAAC,gBAAD;IAAQ,SAAS;IAAc,SAAS;IAAa,iBAAe;IAAU,UAAU,WAAW,IAAI;IAAvG,UAAA,CACG,UAAU,mBACX,oBAAC,cAAD,EAAM,SAAS,UAAY,CAAA,CACrB;GACN,CAAA,CAAA;;CACF,CAAA;AAER"}

package/lib/UNSAFE_TableHead.js

@@ -0,0 +1,25 @@
+import { n as TableContext } from "./TableContext.js";
+import classNames from "classnames";
+import { useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import styles from "./components/UNSAFE_Table/styles.module.scss";
+//#region src/components/UNSAFE_Table/UNSAFE_TableHead/UNSAFE_TableHead.tsx
+var UNSAFE_TableHead = ({ children, className, ...rest }) => {
+	const tableContext = useContext(TableContext);
+	const headContext = useMemo(() => ({
+		...tableContext,
+		hiddenColumns: []
+	}), [tableContext]);
+	return /* @__PURE__ */ jsx(TableContext.Provider, {
+		value: headContext,
+		children: /* @__PURE__ */ jsx("thead", {
+			className: classNames(styles.table__head, className),
+			...rest,
+			children
+		})
+	});
+};
+//#endregion
+export { UNSAFE_TableHead as t };
+
+//# sourceMappingURL=UNSAFE_TableHead.js.map

package/lib/UNSAFE_TableHead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UNSAFE_TableHead.js","names":[],"sources":["../src/components/UNSAFE_Table/UNSAFE_TableHead/UNSAFE_TableHead.tsx"],"sourcesContent":["import { useContext, useMemo } from 'react';\n\nimport classNames from 'classnames';\n\nimport styles from '../styles.module.scss';\nimport { TableContext } from '../TableContext';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'thead'>, 'style'> {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the thead. Add table rows  */\n  children: React.ReactNode;\n}\n\nexport const UNSAFE_TableHead: React.FC<Props> = ({ children, className, ...rest }) => {\n  const tableContext = useContext(TableContext);\n  // Radene i hodet skal ikke skjule kolonner eller få expander\n  const headContext = useMemo(() => ({ ...tableContext, hiddenColumns: [] }), [tableContext]);\n\n  return (\n    <TableContext.Provider value={headContext}>\n      <thead className={classNames(styles.table__head, className)} {...rest}>\n        {children}\n      </thead>\n    </TableContext.Provider>\n  );\n};\n\nexport default UNSAFE_TableHead;\n"],"mappings":";;;;;;AAcA,IAAa,oBAAqC,EAAE,UAAU,WAAW,GAAG,WAAW;CACrF,MAAM,eAAe,WAAW,YAAY;CAE5C,MAAM,cAAc,eAAe;EAAE,GAAG;EAAc,eAAe,CAAC;CAAE,IAAI,CAAC,YAAY,CAAC;CAE1F,OACE,oBAAC,aAAa,UAAd;EAAuB,OAAO;EAC5B,UAAA,oBAAC,SAAD;GAAO,WAAW,WAAW,OAAO,aAAa,SAAS;GAAG,GAAI;GAC9D;EACI,CAAA;CACc,CAAA;AAE3B"}