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

package/lib/CHANGELOG.md

@@ -1,4 +1,6 @@
 
+## 15.0.0-beta.1 (2026-05-13)
+
 ## 15.0.0-beta.0 (2026-05-08)
 
 ### Features
@@ -7,6 +9,32 @@
 * **tag:**  legg til accent2 variant med banana farge ([bb0c49b](https://github.com/helsenorge/designsystem/commit/bb0c49b340c8305fdc98e25adf955777f0d80be0)), closes [#376269](https://github.com/helsenorge/designsystem/issues/376269)
 * **tag:**  nytt design på tag ([d0871d8](https://github.com/helsenorge/designsystem/commit/d0871d877a6b7ea52908114c533ea2cb924ad8ed)), closes [#374718](https://github.com/helsenorge/designsystem/issues/374718)
 
+## [14.9.2](https://github.com/helsenorge/designsystem/compare/v14.9.1...v14.9.2) (2026-05-13)
+
+### Bug Fixes
+
+* **dateandtime:**  softerror skal spre seg uten å påvirke naboer ([27db71b](https://github.com/helsenorge/designsystem/commit/27db71b8e65f4d062da6b87f66147451d78be64f)), closes [#377339](https://github.com/helsenorge/designsystem/issues/377339)
+* **filtersort:**  første child skal være høyrestilt ([a9acf73](https://github.com/helsenorge/designsystem/commit/a9acf73ff4e65c267025535ec1d9f0ef78545b55)), closes [#376682](https://github.com/helsenorge/designsystem/issues/376682)
+
+## [14.9.1](https://github.com/helsenorge/designsystem/compare/v14.9.0...v14.9.1) (2026-05-12)
+
+### Bug Fixes
+
+* **datepicker:**  onblur skal trigges når popup lukkes ([dfc3193](https://github.com/helsenorge/designsystem/commit/dfc31937fae8d1dfa63c221792e340355db59101)), closes [#377127](https://github.com/helsenorge/designsystem/issues/377127)
+
+## [14.9.0](https://github.com/helsenorge/designsystem/compare/v14.8.0...v14.9.0) (2026-05-11)
+
+### Features
+
+* **daterangepicker:**  from og to value kan være undefined og null ([b1e2b07](https://github.com/helsenorge/designsystem/commit/b1e2b07037b932b1ceb35a5f2998fb0d8a224f3a)), closes [#377492](https://github.com/helsenorge/designsystem/issues/377492)
+* **formgroup:**  ny prop legendid ([5d73bdc](https://github.com/helsenorge/designsystem/commit/5d73bdcd1940f268b7aef79e602f8bf1d30044cf)), closes [#377978](https://github.com/helsenorge/designsystem/issues/377978)
+
+## [14.8.0](https://github.com/helsenorge/designsystem/compare/v14.7.3...v14.8.0) (2026-05-11)
+
+### Features
+
+* **datepicker:**  value kan være null ([67c98bd](https://github.com/helsenorge/designsystem/commit/67c98bdcf046674f9c3f04d8cbe922c506f9b298)), closes [#377492](https://github.com/helsenorge/designsystem/issues/377492)
+
 ## [14.7.3](https://github.com/helsenorge/designsystem/compare/v14.7.2...v14.7.3) (2026-05-08)
 
 ### Bug Fixes

package/lib/Drawer.js

@@ -20,8 +20,8 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { AnimatePresence, useAnimate, usePresence } from "motion/react";
 import styles from "./components/Drawer/styles.module.scss";
 var HN_Designsystem_Drawer_en_GB_default = {
-	ariaLabelBackButton: "Go back",
-	ariaLabelCloseBtn: "Close"
+	ariaLabelCloseBtn: "Close",
+	ariaLabelBackButton: "Go back"
 };
 var HN_Designsystem_Drawer_nb_NO_default = {
 	ariaLabelBackButton: "Gå tilbake",

package/lib/Drawer.js.map

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

package/lib/FormGroup.js

@@ -17,7 +17,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, 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.medium, error, name, htmlMarkup = "fieldset", renderError = true, errorWrapperClassName, errorWrapperTestId, errorMessageRef, legendHtmlMarkup = "h5", titleHtmlMarkup = "h4" } = props;
 	const [checkedRadioId, setCheckedRadioId] = useState();
 	const radioGroupId = useId();
 	const errorTextId = useIdWithFallback(errorTextIdProp);
@@ -92,6 +92,7 @@ var FormGroup = (props) => {
 		return /* @__PURE__ */ jsxs("div", { children: [htmlMarkup === "div" && /* @__PURE__ */ jsxs("div", {
 			className: fieldsetClasses,
 			children: [props.legend && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(CustomTagForLegend, {
+				id: legendId,
 				className: legendClasses,
 				children: [props.legend, formFieldTag && isComponent(formFieldTag, FormFieldTag_default) && React.cloneElement(formFieldTag)]
 			}) }), React.Children.map(props.children, mapFormComponent)]
@@ -100,6 +101,7 @@ var FormGroup = (props) => {
 			name: props.fieldsetName,
 			className: fieldsetClasses,
 			children: [props.legend && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("legend", {
+				id: legendId,
 				className: legendClasses,
 				children: [props.legend, formFieldTag && isComponent(formFieldTag, FormFieldTag_default) && React.cloneElement(formFieldTag)]
 			}) }), React.Children.map(props.children, mapFormComponent)]

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 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 { getRadioLabelClasses } from '../RadioButton/utils';\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  /** 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    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 [checkedRadioId, setCheckedRadioId] = useState<string>();\n  const radioGroupId = useId();\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const onDark = onColor === FormOnColor.ondark;\n  const isLarge = size === FormSize.large;\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 fieldsetClasses = classNames(formGroupStyles['field-set'], fieldsetClassName);\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      return React.cloneElement(child, {\n        inputId: radioId,\n        name: name ?? child.props.name,\n        onColor,\n        size,\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        labelClassNames: getRadioLabelClasses(radioId, onColor as FormOnColor, isLarge, checkedRadioId),\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 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 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 { 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 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 { getRadioLabelClasses } from '../RadioButton/utils';\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 [checkedRadioId, setCheckedRadioId] = useState<string>();\n  const radioGroupId = useId();\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const onDark = onColor === FormOnColor.ondark;\n  const isLarge = size === FormSize.large;\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 fieldsetClasses = classNames(formGroupStyles['field-set'], fieldsetClassName);\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      return React.cloneElement(child, {\n        inputId: radioId,\n        name: name ?? child.props.name,\n        onColor,\n        size,\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        labelClassNames: getRadioLabelClasses(radioId, onColor as FormOnColor, isLarge, checkedRadioId),\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/TableBody.js

@@ -2,11 +2,11 @@ import { n as ModeType } from "./constants2.js";
 import { i as mapChildrenWithMode } from "./utils6.js";
 import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
-import tableStyles from "./components/Table/styles.module.scss";
+import styles from "./components/Table/styles.module.scss";
 //#region src/components/Table/TableBody/TableBody.tsx
 var TableBody = ({ className, children, mode = ModeType.normal, ...rest }) => {
 	return /* @__PURE__ */ jsx("tbody", {
-		className: classNames(tableStyles["table-body"], className),
+		className: classNames(styles["table-body"], className),
 		...rest,
 		children: mapChildrenWithMode(children, mode)
 	});

package/lib/TableBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.js","names":[],"sources":["../src/components/Table/TableBody/TableBody.tsx","../src/components/Table/TableBody/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\nimport { mapChildrenWithMode } from '../utils';\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  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableBody: React.FC<Props> = ({ className, children, mode = ModeType.normal, ...rest }) => {\n  const tableBodyClasses = classNames(tableStyles['table-body'], className);\n  return (\n    <tbody className={tableBodyClasses} {...rest}>\n      {mapChildrenWithMode(children, mode)}\n    </tbody>\n  );\n};\n\nexport default TableBody;\n","import TableBody from './TableBody';\nexport * from './TableBody';\nexport default TableBody;\n"],"mappings":";;;;;;AAeA,IAAa,aAA8B,EAAE,WAAW,UAAU,OAAO,SAAS,QAAQ,GAAG,WAAW;CAEtG,OACE,oBAAC,SAAD;EAAO,WAFgB,WAAW,YAAY,eAAe,UAE3C;EAAkB,GAAI;YACrC,oBAAoB,UAAU,KAAK;EAC9B,CAAA;;;;AClBZ,IAAA,oBAAe"}
+{"version":3,"file":"TableBody.js","names":[],"sources":["../src/components/Table/TableBody/TableBody.tsx","../src/components/Table/TableBody/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\nimport { mapChildrenWithMode } from '../utils';\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  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableBody: React.FC<Props> = ({ className, children, mode = ModeType.normal, ...rest }) => {\n  const tableBodyClasses = classNames(tableStyles['table-body'], className);\n  return (\n    <tbody className={tableBodyClasses} {...rest}>\n      {mapChildrenWithMode(children, mode)}\n    </tbody>\n  );\n};\n\nexport default TableBody;\n","import TableBody from './TableBody';\nexport * from './TableBody';\nexport default TableBody;\n"],"mappings":";;;;;;AAeA,IAAa,aAA8B,EAAE,WAAW,UAAU,OAAO,SAAS,QAAQ,GAAG,WAAW;CAEtG,OACE,oBAAC,SAAD;EAAO,WAFgB,WAAW,OAAY,eAAe,UAE3C;EAAkB,GAAI;YACrC,oBAAoB,UAAU,KAAK;EAC9B,CAAA;;;;AClBZ,IAAA,oBAAe"}

package/lib/TableCell.js

@@ -1,11 +1,11 @@
 import { a as TextAlign, n as ModeType } from "./constants2.js";
 import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
-import tableStyles from "./components/Table/styles.module.scss";
+import styles from "./components/Table/styles.module.scss";
 //#region src/components/Table/TableCell/TableCell.tsx
 var TableCell = ({ nowrap = false, textAlign = TextAlign.left, dataLabel, children, className, testId, mode = ModeType.normal, ...rest }) => {
 	return /* @__PURE__ */ jsx("td", {
-		className: classNames(tableStyles["table__cell"], { [tableStyles["table__cell--compact"]]: mode === ModeType.compact }, { [tableStyles["table__cell--nowrap"]]: nowrap }, { [tableStyles["table__cell--center"]]: textAlign === "center" }, { [tableStyles["table__cell--right"]]: textAlign === "right" }, className),
+		className: classNames(styles["table__cell"], { [styles["table__cell--compact"]]: mode === ModeType.compact }, { [styles["table__cell--nowrap"]]: nowrap }, { [styles["table__cell--center"]]: textAlign === "center" }, { [styles["table__cell--right"]]: textAlign === "right" }, className),
 		"data-label": dataLabel,
 		"data-testid": testId,
 		...rest,

package/lib/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.js","names":[],"sources":["../src/components/Table/TableCell/TableCell.tsx","../src/components/Table/TableCell/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { ModeType, TextAlign } from '../constants';\nimport tableStyles from '../styles.module.scss';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'td'>, 'style'> {\n  /** Label used for small viewport block */\n  dataLabel?: string;\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 display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n  /** For test purposes */\n  testId?: string;\n}\n\nexport const TableCell: React.FC<Props> = ({\n  nowrap = false,\n  textAlign = TextAlign.left,\n  dataLabel,\n  children,\n  className,\n  testId,\n  mode = ModeType.normal,\n  ...rest\n}) => {\n  const tableCellClass = classNames(\n    tableStyles['table__cell'],\n    { [tableStyles['table__cell--compact']]: mode === ModeType.compact },\n    { [tableStyles['table__cell--nowrap']]: nowrap },\n    { [tableStyles['table__cell--center']]: textAlign === 'center' },\n    { [tableStyles['table__cell--right']]: textAlign === 'right' },\n    className\n  );\n\n  return (\n    <td className={tableCellClass} data-label={dataLabel} data-testid={testId} {...rest}>\n      {children}\n    </td>\n  );\n};\n\nexport default TableCell;\n","import TableCell from './TableCell';\nexport * from './TableCell';\nexport default TableCell;\n"],"mappings":";;;;;AAsBA,IAAa,aAA8B,EACzC,SAAS,OACT,YAAY,UAAU,MACtB,WACA,UACA,WACA,QACA,OAAO,SAAS,QAChB,GAAG,WACC;CAUJ,OACE,oBAAC,MAAD;EAAI,WAViB,WACrB,YAAY,gBACZ,GAAG,YAAY,0BAA0B,SAAS,SAAS,SAAS,EACpE,GAAG,YAAY,yBAAyB,QAAQ,EAChD,GAAG,YAAY,yBAAyB,cAAc,UAAU,EAChE,GAAG,YAAY,wBAAwB,cAAc,SAAS,EAC9D,UAIe;EAAgB,cAAY;EAAW,eAAa;EAAQ,GAAI;EAC5E;EACE,CAAA;;;;AC1CT,IAAA,oBAAe"}
+{"version":3,"file":"TableCell.js","names":[],"sources":["../src/components/Table/TableCell/TableCell.tsx","../src/components/Table/TableCell/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { ModeType, TextAlign } from '../constants';\nimport tableStyles from '../styles.module.scss';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'td'>, 'style'> {\n  /** Label used for small viewport block */\n  dataLabel?: string;\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 display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n  /** For test purposes */\n  testId?: string;\n}\n\nexport const TableCell: React.FC<Props> = ({\n  nowrap = false,\n  textAlign = TextAlign.left,\n  dataLabel,\n  children,\n  className,\n  testId,\n  mode = ModeType.normal,\n  ...rest\n}) => {\n  const tableCellClass = classNames(\n    tableStyles['table__cell'],\n    { [tableStyles['table__cell--compact']]: mode === ModeType.compact },\n    { [tableStyles['table__cell--nowrap']]: nowrap },\n    { [tableStyles['table__cell--center']]: textAlign === 'center' },\n    { [tableStyles['table__cell--right']]: textAlign === 'right' },\n    className\n  );\n\n  return (\n    <td className={tableCellClass} data-label={dataLabel} data-testid={testId} {...rest}>\n      {children}\n    </td>\n  );\n};\n\nexport default TableCell;\n","import TableCell from './TableCell';\nexport * from './TableCell';\nexport default TableCell;\n"],"mappings":";;;;;AAsBA,IAAa,aAA8B,EACzC,SAAS,OACT,YAAY,UAAU,MACtB,WACA,UACA,WACA,QACA,OAAO,SAAS,QAChB,GAAG,WACC;CAUJ,OACE,oBAAC,MAAD;EAAI,WAViB,WACrB,OAAY,gBACZ,GAAG,OAAY,0BAA0B,SAAS,SAAS,SAAS,EACpE,GAAG,OAAY,yBAAyB,QAAQ,EAChD,GAAG,OAAY,yBAAyB,cAAc,UAAU,EAChE,GAAG,OAAY,wBAAwB,cAAc,SAAS,EAC9D,UAIe;EAAgB,cAAY;EAAW,eAAa;EAAQ,GAAI;EAC5E;EACE,CAAA;;;;AC1CT,IAAA,oBAAe"}

package/lib/TableExpandedRow.js

@@ -5,17 +5,17 @@ import { n as ModeType } from "./constants2.js";
 import classNames from "classnames";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import tableStyles from "./components/Table/styles.module.scss";
+import styles from "./components/Table/styles.module.scss";
 //#region src/components/Table/TableExpandedRow/TableExpandedRow.tsx
 var TableExpandedRow = ({ numberOfColumns, expanded, hideDetailsText, toggleClick, children, className, mode = ModeType.normal, id }) => {
 	return /* @__PURE__ */ jsx("tr", {
-		className: classNames(tableStyles["table__expanded-row"], { [tableStyles["table__expanded-row--expanded"]]: expanded }, className),
+		className: classNames(styles["table__expanded-row"], { [styles["table__expanded-row--expanded"]]: expanded }, className),
 		id,
 		children: /* @__PURE__ */ jsx("td", {
 			colSpan: numberOfColumns,
-			className: classNames(tableStyles["table__cell"], className, { [tableStyles["table__cell--compact"]]: mode === ModeType.compact }),
+			className: classNames(styles["table__cell"], className, { [styles["table__cell--compact"]]: mode === ModeType.compact }),
 			children: /* @__PURE__ */ jsxs("div", {
-				className: classNames(tableStyles["table__expanded-row-container"]),
+				className: classNames(styles["table__expanded-row-container"]),
 				children: [React.Children.map(children, (child) => React.isValidElement(child) && React.cloneElement(child)), /* @__PURE__ */ jsxs(Button_default, {
 					variant: "borderless",
 					onClick: toggleClick,

package/lib/TableExpandedRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableExpandedRow.js","names":[],"sources":["../src/components/Table/TableExpandedRow/TableExpandedRow.tsx","../src/components/Table/TableExpandedRow/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\n\nexport interface Props {\n  /** Row is expanded. */\n  expanded: boolean;\n  /** Number of columns in table. */\n  numberOfColumns: number;\n  /** Text for hide button. */\n  hideDetailsText: string;\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  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n  /** Row id. For use with aria-controls. */\n  id?: string;\n}\n\nexport const TableExpandedRow = ({\n  numberOfColumns,\n  expanded,\n  hideDetailsText,\n  toggleClick,\n  children,\n  className,\n  mode = ModeType.normal,\n  id,\n}: Props): React.JSX.Element => {\n  const tableRowClass = classNames(\n    tableStyles['table__expanded-row'],\n    { [tableStyles['table__expanded-row--expanded']]: expanded },\n    className\n  );\n  const tableCellClass = classNames(tableStyles['table__cell'], className, {\n    [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n  });\n\n  const containerClass = classNames(tableStyles['table__expanded-row-container']);\n\n  return (\n    <tr className={tableRowClass} id={id}>\n      <td colSpan={numberOfColumns} className={tableCellClass}>\n        <div className={containerClass}>\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            {hideDetailsText}\n            <Icon svgIcon={ChevronUp} />\n          </Button>\n        </div>\n      </td>\n    </tr>\n  );\n};\n\nexport default TableExpandedRow;\n","import TableExpandedRow from './TableExpandedRow';\nexport * from './TableExpandedRow';\nexport default TableExpandedRow;\n"],"mappings":";;;;;;;;;AA6BA,IAAa,oBAAoB,EAC/B,iBACA,UACA,iBACA,aACA,UACA,WACA,OAAO,SAAS,QAChB,SAC8B;CAY9B,OACE,oBAAC,MAAD;EAAI,WAZgB,WACpB,YAAY,wBACZ,GAAG,YAAY,mCAAmC,UAAU,EAC5D,UASe;EAAmB;YAChC,oBAAC,MAAD;GAAI,SAAS;GAAiB,WARX,WAAW,YAAY,gBAAgB,WAAW,GACtE,YAAY,0BAA0B,SAAS,SAAS,SAC1D,CAM4C;aACvC,qBAAC,OAAD;IAAK,WALY,WAAW,YAAY,iCAKxB;cAAhB,CACG,MAAM,SAAS,IAAI,WAAU,UAAS,MAAM,eAAe,MAAM,IAAI,MAAM,aAAa,MAAM,CAAC,EAChG,qBAAC,gBAAD;KAAQ,SAAS;KAAc,SAAS;KAAa,iBAAe;KAAU,UAAU,WAAW,IAAI;eAAvG,CACG,iBACD,oBAAC,cAAD,EAAM,SAAS,WAAa,CAAA,CACrB;OACL;;GACH,CAAA;EACF,CAAA;;;;AC3DT,IAAA,2BAAe"}
+{"version":3,"file":"TableExpandedRow.js","names":[],"sources":["../src/components/Table/TableExpandedRow/TableExpandedRow.tsx","../src/components/Table/TableExpandedRow/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\n\nexport interface Props {\n  /** Row is expanded. */\n  expanded: boolean;\n  /** Number of columns in table. */\n  numberOfColumns: number;\n  /** Text for hide button. */\n  hideDetailsText: string;\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  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n  /** Row id. For use with aria-controls. */\n  id?: string;\n}\n\nexport const TableExpandedRow = ({\n  numberOfColumns,\n  expanded,\n  hideDetailsText,\n  toggleClick,\n  children,\n  className,\n  mode = ModeType.normal,\n  id,\n}: Props): React.JSX.Element => {\n  const tableRowClass = classNames(\n    tableStyles['table__expanded-row'],\n    { [tableStyles['table__expanded-row--expanded']]: expanded },\n    className\n  );\n  const tableCellClass = classNames(tableStyles['table__cell'], className, {\n    [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n  });\n\n  const containerClass = classNames(tableStyles['table__expanded-row-container']);\n\n  return (\n    <tr className={tableRowClass} id={id}>\n      <td colSpan={numberOfColumns} className={tableCellClass}>\n        <div className={containerClass}>\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            {hideDetailsText}\n            <Icon svgIcon={ChevronUp} />\n          </Button>\n        </div>\n      </td>\n    </tr>\n  );\n};\n\nexport default TableExpandedRow;\n","import TableExpandedRow from './TableExpandedRow';\nexport * from './TableExpandedRow';\nexport default TableExpandedRow;\n"],"mappings":";;;;;;;;;AA6BA,IAAa,oBAAoB,EAC/B,iBACA,UACA,iBACA,aACA,UACA,WACA,OAAO,SAAS,QAChB,SAC8B;CAY9B,OACE,oBAAC,MAAD;EAAI,WAZgB,WACpB,OAAY,wBACZ,GAAG,OAAY,mCAAmC,UAAU,EAC5D,UASe;EAAmB;YAChC,oBAAC,MAAD;GAAI,SAAS;GAAiB,WARX,WAAW,OAAY,gBAAgB,WAAW,GACtE,OAAY,0BAA0B,SAAS,SAAS,SAC1D,CAM4C;aACvC,qBAAC,OAAD;IAAK,WALY,WAAW,OAAY,iCAKxB;cAAhB,CACG,MAAM,SAAS,IAAI,WAAU,UAAS,MAAM,eAAe,MAAM,IAAI,MAAM,aAAa,MAAM,CAAC,EAChG,qBAAC,gBAAD;KAAQ,SAAS;KAAc,SAAS;KAAa,iBAAe;KAAU,UAAU,WAAW,IAAI;eAAvG,CACG,iBACD,oBAAC,cAAD,EAAM,SAAS,WAAa,CAAA,CACrB;OACL;;GACH,CAAA;EACF,CAAA;;;;AC3DT,IAAA,2BAAe"}

package/lib/TableExpanderCell.js

@@ -5,11 +5,11 @@ import ChevronUp from "./components/Icons/ChevronUp.js";
 import { n as ModeType } from "./constants2.js";
 import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
-import tableStyles from "./components/Table/styles.module.scss";
+import styles from "./components/Table/styles.module.scss";
 //#region src/components/Table/TableExpanderCell/TableExpanderCell.tsx
 var TableExpanderCell = ({ expandableRowId, hideDetailsText, showDetailsText, expanded, className, mode = ModeType.normal }) => {
 	return /* @__PURE__ */ jsx("td", {
-		className: classNames(tableStyles["table__cell"], tableStyles["table__cell-expander"], className, { [tableStyles["table__cell--compact"]]: mode === ModeType.compact }),
+		className: classNames(styles["table__cell"], styles["table__cell-expander"], className, { [styles["table__cell--compact"]]: mode === ModeType.compact }),
 		children: /* @__PURE__ */ jsx(Button_default, {
 			variant: "borderless",
 			"aria-expanded": expanded,

package/lib/TableExpanderCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableExpanderCell.js","names":[],"sources":["../src/components/Table/TableExpanderCell/TableExpanderCell.tsx","../src/components/Table/TableExpanderCell/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\n\nexport interface Props {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Row is expanded. */\n  expanded: boolean;\n  /** Id for expanded row. */\n  expandableRowId: string;\n  /** Text for hide button used for aria label. */\n  hideDetailsText: string;\n  /** Text for show button used for aria label. */\n  showDetailsText: string;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableExpanderCell = ({\n  expandableRowId,\n  hideDetailsText,\n  showDetailsText,\n  expanded,\n  className,\n  mode = ModeType.normal,\n}: Props): React.JSX.Element => {\n  const tableCellClass = classNames(tableStyles['table__cell'], tableStyles['table__cell-expander'], className, {\n    [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n  });\n  const icon = expanded ? ChevronUp : ChevronDown;\n\n  return (\n    <td className={tableCellClass}>\n      <Button\n        variant=\"borderless\"\n        aria-expanded={expanded}\n        aria-controls={expandableRowId}\n        ariaLabel={expanded ? hideDetailsText : showDetailsText}\n      >\n        <Icon svgIcon={icon} />\n      </Button>\n    </td>\n  );\n};\n\nexport default TableExpanderCell;\n","import TableExpanderCell from './TableExpanderCell';\nexport * from './TableExpanderCell';\nexport default TableExpanderCell;\n"],"mappings":";;;;;;;;;AAwBA,IAAa,qBAAqB,EAChC,iBACA,iBACA,iBACA,UACA,WACA,OAAO,SAAS,aACc;CAM9B,OACE,oBAAC,MAAD;EAAI,WANiB,WAAW,YAAY,gBAAgB,YAAY,yBAAyB,WAAW,GAC3G,YAAY,0BAA0B,SAAS,SAAS,SAC1D,CAIgB;YACb,oBAAC,gBAAD;GACE,SAAQ;GACR,iBAAe;GACf,iBAAe;GACf,WAAW,WAAW,kBAAkB;aAExC,oBAAC,cAAD,EAAM,SAVC,WAAW,YAAY,aAUP,CAAA;GAChB,CAAA;EACN,CAAA;;;;AC7CT,IAAA,4BAAe"}
+{"version":3,"file":"TableExpanderCell.js","names":[],"sources":["../src/components/Table/TableExpanderCell/TableExpanderCell.tsx","../src/components/Table/TableExpanderCell/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\n\nexport interface Props {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Row is expanded. */\n  expanded: boolean;\n  /** Id for expanded row. */\n  expandableRowId: string;\n  /** Text for hide button used for aria label. */\n  hideDetailsText: string;\n  /** Text for show button used for aria label. */\n  showDetailsText: string;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableExpanderCell = ({\n  expandableRowId,\n  hideDetailsText,\n  showDetailsText,\n  expanded,\n  className,\n  mode = ModeType.normal,\n}: Props): React.JSX.Element => {\n  const tableCellClass = classNames(tableStyles['table__cell'], tableStyles['table__cell-expander'], className, {\n    [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n  });\n  const icon = expanded ? ChevronUp : ChevronDown;\n\n  return (\n    <td className={tableCellClass}>\n      <Button\n        variant=\"borderless\"\n        aria-expanded={expanded}\n        aria-controls={expandableRowId}\n        ariaLabel={expanded ? hideDetailsText : showDetailsText}\n      >\n        <Icon svgIcon={icon} />\n      </Button>\n    </td>\n  );\n};\n\nexport default TableExpanderCell;\n","import TableExpanderCell from './TableExpanderCell';\nexport * from './TableExpanderCell';\nexport default TableExpanderCell;\n"],"mappings":";;;;;;;;;AAwBA,IAAa,qBAAqB,EAChC,iBACA,iBACA,iBACA,UACA,WACA,OAAO,SAAS,aACc;CAM9B,OACE,oBAAC,MAAD;EAAI,WANiB,WAAW,OAAY,gBAAgB,OAAY,yBAAyB,WAAW,GAC3G,OAAY,0BAA0B,SAAS,SAAS,SAC1D,CAIgB;YACb,oBAAC,gBAAD;GACE,SAAQ;GACR,iBAAe;GACf,iBAAe;GACf,WAAW,WAAW,kBAAkB;aAExC,oBAAC,cAAD,EAAM,SAVC,WAAW,YAAY,aAUP,CAAA;GAChB,CAAA;EACN,CAAA;;;;AC7CT,IAAA,4BAAe"}

package/lib/TableHead.js

@@ -2,15 +2,15 @@ import { n as ModeType, t as HeaderCategory } from "./constants2.js";
 import { i as mapChildrenWithMode } from "./utils6.js";
 import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
-import tableStyles from "./components/Table/styles.module.scss";
+import styles from "./components/Table/styles.module.scss";
 //#region src/components/Table/TableHead/TableHead.tsx
 var TableHead = ({ category = HeaderCategory.normal, className, children, mode, ...rest }) => {
 	return /* @__PURE__ */ jsx("thead", {
-		className: classNames(tableStyles["table__head"], {
-			[tableStyles["table__head--normal"]]: category === HeaderCategory.normal,
-			[tableStyles["table__head--transparent"]]: category === HeaderCategory.transparent,
-			[tableStyles["table__head--sortable"]]: category == HeaderCategory.sortable,
-			[tableStyles["table__head--compact"]]: mode == ModeType.compact
+		className: classNames(styles["table__head"], {
+			[styles["table__head--normal"]]: category === HeaderCategory.normal,
+			[styles["table__head--transparent"]]: category === HeaderCategory.transparent,
+			[styles["table__head--sortable"]]: category == HeaderCategory.sortable,
+			[styles["table__head--compact"]]: mode == ModeType.compact
 		}, className),
 		...rest,
 		children: mapChildrenWithMode(children, mode)

package/lib/TableHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHead.js","names":[],"sources":["../src/components/Table/TableHead/TableHead.tsx","../src/components/Table/TableHead/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { HeaderCategory, ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\nimport { mapChildrenWithMode } from '../utils';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'thead'>, 'style'> {\n  /** Header category for styling. Default: normal */\n  category?: HeaderCategory;\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  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableHead: React.FC<Props> = ({ category = HeaderCategory.normal, className, children, mode, ...rest }) => {\n  const tableHeadClass = classNames(\n    tableStyles['table__head'],\n    {\n      [tableStyles['table__head--normal']]: category === HeaderCategory.normal,\n      [tableStyles['table__head--transparent']]: category === HeaderCategory.transparent,\n      [tableStyles['table__head--sortable']]: category == HeaderCategory.sortable,\n      [tableStyles['table__head--compact']]: mode == ModeType.compact,\n    },\n    className\n  );\n\n  return (\n    <thead className={tableHeadClass} {...rest}>\n      {mapChildrenWithMode(children, mode)}\n    </thead>\n  );\n};\n\nexport default TableHead;\n","import TableHead from './TableHead';\nexport * from './TableHead';\nexport default TableHead;\n"],"mappings":";;;;;;AAiBA,IAAa,aAA8B,EAAE,WAAW,eAAe,QAAQ,WAAW,UAAU,MAAM,GAAG,WAAW;CAYtH,OACE,oBAAC,SAAD;EAAO,WAZc,WACrB,YAAY,gBACZ;IACG,YAAY,yBAAyB,aAAa,eAAe;IACjE,YAAY,8BAA8B,aAAa,eAAe;IACtE,YAAY,2BAA2B,YAAY,eAAe;IAClE,YAAY,0BAA0B,QAAQ,SAAS;GACzD,EACD,UAIkB;EAAgB,GAAI;YACnC,oBAAoB,UAAU,KAAK;EAC9B,CAAA;;;;AC9BZ,IAAA,oBAAe"}
+{"version":3,"file":"TableHead.js","names":[],"sources":["../src/components/Table/TableHead/TableHead.tsx","../src/components/Table/TableHead/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { HeaderCategory, ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\nimport { mapChildrenWithMode } from '../utils';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'thead'>, 'style'> {\n  /** Header category for styling. Default: normal */\n  category?: HeaderCategory;\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  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableHead: React.FC<Props> = ({ category = HeaderCategory.normal, className, children, mode, ...rest }) => {\n  const tableHeadClass = classNames(\n    tableStyles['table__head'],\n    {\n      [tableStyles['table__head--normal']]: category === HeaderCategory.normal,\n      [tableStyles['table__head--transparent']]: category === HeaderCategory.transparent,\n      [tableStyles['table__head--sortable']]: category == HeaderCategory.sortable,\n      [tableStyles['table__head--compact']]: mode == ModeType.compact,\n    },\n    className\n  );\n\n  return (\n    <thead className={tableHeadClass} {...rest}>\n      {mapChildrenWithMode(children, mode)}\n    </thead>\n  );\n};\n\nexport default TableHead;\n","import TableHead from './TableHead';\nexport * from './TableHead';\nexport default TableHead;\n"],"mappings":";;;;;;AAiBA,IAAa,aAA8B,EAAE,WAAW,eAAe,QAAQ,WAAW,UAAU,MAAM,GAAG,WAAW;CAYtH,OACE,oBAAC,SAAD;EAAO,WAZc,WACrB,OAAY,gBACZ;IACG,OAAY,yBAAyB,aAAa,eAAe;IACjE,OAAY,8BAA8B,aAAa,eAAe;IACtE,OAAY,2BAA2B,YAAY,eAAe;IAClE,OAAY,0BAA0B,QAAQ,SAAS;GACzD,EACD,UAIkB;EAAgB,GAAI;YACnC,oBAAoB,UAAU,KAAK;EAC9B,CAAA;;;;AC9BZ,IAAA,oBAAe"}

package/lib/TableHeadCell.js

@@ -5,10 +5,10 @@ import ArrowUp from "./components/Icons/ArrowUp.js";
 import { i as SortDirection, n as ModeType } from "./constants2.js";
 import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
-import tableStyles from "./components/Table/styles.module.scss";
+import styles from "./components/Table/styles.module.scss";
 //#region src/components/Table/TableHeadCell/TableHeadCell.tsx
 var TableHeadCell = ({ sortable, onClick, className, children, sortDir, mode = ModeType.normal, scope = "col", ...rest }) => {
-	const tableHeadCellDefaultClass = classNames(tableStyles["table__head-cell"], className, { [tableStyles["table__head-cell--compact"]]: mode === ModeType.compact });
+	const tableHeadCellDefaultClass = classNames(styles["table__head-cell"], className, { [styles["table__head-cell--compact"]]: mode === ModeType.compact });
 	if (!sortable && !children) return /* @__PURE__ */ jsx("td", { className: tableHeadCellDefaultClass });
 	if (!sortable) return /* @__PURE__ */ jsx("th", {
 		scope,
@@ -16,9 +16,9 @@ var TableHeadCell = ({ sortable, onClick, className, children, sortDir, mode = M
 		...rest,
 		children
 	});
-	const sortableClasses = classNames(tableHeadCellDefaultClass, tableStyles["table__head-cell--sortable"], className);
+	const sortableClasses = classNames(tableHeadCellDefaultClass, styles["table__head-cell--sortable"], className);
 	const renderSortIcon = () => sortDir && /* @__PURE__ */ jsx("div", {
-		className: tableStyles["table__head-cell-sort-icon-wrapper"],
+		className: styles["table__head-cell-sort-icon-wrapper"],
 		children: /* @__PURE__ */ jsx(Icon_default, {
 			svgIcon: sortDir == SortDirection.asc ? ArrowDown : ArrowUp,
 			size: IconSize.XXSmall
@@ -38,7 +38,7 @@ var TableHeadCell = ({ sortable, onClick, className, children, sortDir, mode = M
 		children: /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			onClick,
-			className: tableStyles["table__sort-button"],
+			className: styles["table__sort-button"],
 			"aria-pressed": sortDir ? !!sortDir : void 0,
 			children: [renderSortIcon(), children]
 		})

package/lib/TableHeadCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeadCell.js","names":[],"sources":["../src/components/Table/TableHeadCell/TableHeadCell.tsx","../src/components/Table/TableHeadCell/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport Icon, { IconSize } from '../../Icon';\nimport ArrowDown from '../../Icons/ArrowDown';\nimport ArrowUp from '../../Icons/ArrowUp';\nimport { ModeType, SortDirection } from '../constants';\nimport tableStyles from '../styles.module.scss';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'th'>, 'style'> {\n  /** Sets if column for head cell should be sortable*/\n  sortable?: boolean;\n  /** Sort direction  */\n  sortDir?: SortDirection;\n  /** Function that is called when clicked */\n  onClick?: () => void;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the td element.  */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableHeadCell: React.FC<Props> = ({\n  sortable,\n  onClick,\n  className,\n  children,\n  sortDir,\n  mode = ModeType.normal,\n  scope = 'col',\n  ...rest\n}) => {\n  const tableHeadCellDefaultClass = classNames(tableStyles['table__head-cell'], className, {\n    [tableStyles['table__head-cell--compact']]: mode === ModeType.compact,\n  });\n\n  if (!sortable && !children) {\n    return <td className={tableHeadCellDefaultClass}></td>;\n  }\n\n  if (!sortable) {\n    return (\n      <th scope={scope} className={tableHeadCellDefaultClass} {...rest}>\n        {children}\n      </th>\n    );\n  }\n\n  const sortableClasses = classNames(tableHeadCellDefaultClass, tableStyles['table__head-cell--sortable'], className);\n\n  const renderSortIcon = (): React.JSX.Element | undefined =>\n    sortDir && (\n      <div className={tableStyles['table__head-cell-sort-icon-wrapper']}>\n        <Icon svgIcon={sortDir == SortDirection.asc ? ArrowDown : ArrowUp} size={IconSize.XXSmall} />\n      </div>\n    );\n\n  const getSortDirection = (): React.AriaAttributes['aria-sort'] => {\n    switch (sortDir) {\n      case SortDirection.asc:\n        return 'ascending';\n      case SortDirection.desc:\n        return 'descending';\n    }\n  };\n\n  return (\n    <th scope={scope} className={sortableClasses} aria-sort={getSortDirection()} {...rest}>\n      <button type=\"button\" onClick={onClick} className={tableStyles['table__sort-button']} aria-pressed={sortDir ? !!sortDir : undefined}>\n        {renderSortIcon()}\n        {children}\n      </button>\n    </th>\n  );\n};\n\nexport default TableHeadCell;\n","import TableHeadCell from './TableHeadCell';\nexport * from './TableHeadCell';\nexport default TableHeadCell;\n"],"mappings":";;;;;;;;;AAuBA,IAAa,iBAAkC,EAC7C,UACA,SACA,WACA,UACA,SACA,OAAO,SAAS,QAChB,QAAQ,OACR,GAAG,WACC;CACJ,MAAM,4BAA4B,WAAW,YAAY,qBAAqB,WAAW,GACtF,YAAY,+BAA+B,SAAS,SAAS,SAC/D,CAAC;CAEF,IAAI,CAAC,YAAY,CAAC,UAChB,OAAO,oBAAC,MAAD,EAAI,WAAW,2BAAgC,CAAA;CAGxD,IAAI,CAAC,UACH,OACE,oBAAC,MAAD;EAAW;EAAO,WAAW;EAA2B,GAAI;EACzD;EACE,CAAA;CAIT,MAAM,kBAAkB,WAAW,2BAA2B,YAAY,+BAA+B,UAAU;CAEnH,MAAM,uBACJ,WACE,oBAAC,OAAD;EAAK,WAAW,YAAY;YAC1B,oBAAC,cAAD;GAAM,SAAS,WAAW,cAAc,MAAM,YAAY;GAAS,MAAM,SAAS;GAAW,CAAA;EACzF,CAAA;CAGV,MAAM,yBAA4D;EAChE,QAAQ,SAAR;GACE,KAAK,cAAc,KACjB,OAAO;GACT,KAAK,cAAc,MACjB,OAAO;;;CAIb,OACE,oBAAC,MAAD;EAAW;EAAO,WAAW;EAAiB,aAAW,kBAAkB;EAAE,GAAI;YAC/E,qBAAC,UAAD;GAAQ,MAAK;GAAkB;GAAS,WAAW,YAAY;GAAuB,gBAAc,UAAU,CAAC,CAAC,UAAU,KAAA;aAA1H,CACG,gBAAgB,EAChB,SACM;;EACN,CAAA;;;;ACvET,IAAA,wBAAe"}
+{"version":3,"file":"TableHeadCell.js","names":[],"sources":["../src/components/Table/TableHeadCell/TableHeadCell.tsx","../src/components/Table/TableHeadCell/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport Icon, { IconSize } from '../../Icon';\nimport ArrowDown from '../../Icons/ArrowDown';\nimport ArrowUp from '../../Icons/ArrowUp';\nimport { ModeType, SortDirection } from '../constants';\nimport tableStyles from '../styles.module.scss';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'th'>, 'style'> {\n  /** Sets if column for head cell should be sortable*/\n  sortable?: boolean;\n  /** Sort direction  */\n  sortDir?: SortDirection;\n  /** Function that is called when clicked */\n  onClick?: () => void;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the td element.  */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableHeadCell: React.FC<Props> = ({\n  sortable,\n  onClick,\n  className,\n  children,\n  sortDir,\n  mode = ModeType.normal,\n  scope = 'col',\n  ...rest\n}) => {\n  const tableHeadCellDefaultClass = classNames(tableStyles['table__head-cell'], className, {\n    [tableStyles['table__head-cell--compact']]: mode === ModeType.compact,\n  });\n\n  if (!sortable && !children) {\n    return <td className={tableHeadCellDefaultClass}></td>;\n  }\n\n  if (!sortable) {\n    return (\n      <th scope={scope} className={tableHeadCellDefaultClass} {...rest}>\n        {children}\n      </th>\n    );\n  }\n\n  const sortableClasses = classNames(tableHeadCellDefaultClass, tableStyles['table__head-cell--sortable'], className);\n\n  const renderSortIcon = (): React.JSX.Element | undefined =>\n    sortDir && (\n      <div className={tableStyles['table__head-cell-sort-icon-wrapper']}>\n        <Icon svgIcon={sortDir == SortDirection.asc ? ArrowDown : ArrowUp} size={IconSize.XXSmall} />\n      </div>\n    );\n\n  const getSortDirection = (): React.AriaAttributes['aria-sort'] => {\n    switch (sortDir) {\n      case SortDirection.asc:\n        return 'ascending';\n      case SortDirection.desc:\n        return 'descending';\n    }\n  };\n\n  return (\n    <th scope={scope} className={sortableClasses} aria-sort={getSortDirection()} {...rest}>\n      <button type=\"button\" onClick={onClick} className={tableStyles['table__sort-button']} aria-pressed={sortDir ? !!sortDir : undefined}>\n        {renderSortIcon()}\n        {children}\n      </button>\n    </th>\n  );\n};\n\nexport default TableHeadCell;\n","import TableHeadCell from './TableHeadCell';\nexport * from './TableHeadCell';\nexport default TableHeadCell;\n"],"mappings":";;;;;;;;;AAuBA,IAAa,iBAAkC,EAC7C,UACA,SACA,WACA,UACA,SACA,OAAO,SAAS,QAChB,QAAQ,OACR,GAAG,WACC;CACJ,MAAM,4BAA4B,WAAW,OAAY,qBAAqB,WAAW,GACtF,OAAY,+BAA+B,SAAS,SAAS,SAC/D,CAAC;CAEF,IAAI,CAAC,YAAY,CAAC,UAChB,OAAO,oBAAC,MAAD,EAAI,WAAW,2BAAgC,CAAA;CAGxD,IAAI,CAAC,UACH,OACE,oBAAC,MAAD;EAAW;EAAO,WAAW;EAA2B,GAAI;EACzD;EACE,CAAA;CAIT,MAAM,kBAAkB,WAAW,2BAA2B,OAAY,+BAA+B,UAAU;CAEnH,MAAM,uBACJ,WACE,oBAAC,OAAD;EAAK,WAAW,OAAY;YAC1B,oBAAC,cAAD;GAAM,SAAS,WAAW,cAAc,MAAM,YAAY;GAAS,MAAM,SAAS;GAAW,CAAA;EACzF,CAAA;CAGV,MAAM,yBAA4D;EAChE,QAAQ,SAAR;GACE,KAAK,cAAc,KACjB,OAAO;GACT,KAAK,cAAc,MACjB,OAAO;;;CAIb,OACE,oBAAC,MAAD;EAAW;EAAO,WAAW;EAAiB,aAAW,kBAAkB;EAAE,GAAI;YAC/E,qBAAC,UAAD;GAAQ,MAAK;GAAkB;GAAS,WAAW,OAAY;GAAuB,gBAAc,UAAU,CAAC,CAAC,UAAU,KAAA;aAA1H,CACG,gBAAgB,EAChB,SACM;;EACN,CAAA;;;;ACvET,IAAA,wBAAe"}

package/lib/TableRow.js

@@ -6,13 +6,13 @@ import { n as ModeType } from "./constants2.js";
 import { i as mapChildrenWithMode } from "./utils6.js";
 import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
-import tableStyles from "./components/Table/styles.module.scss";
+import styles from "./components/Table/styles.module.scss";
 //#region src/components/Table/TableExpanderCell/TableExpanderCellMobile.tsx
 var TableExpanderCellMobile = ({ expanded, onClick, hideDetailsText, showDetailsText, mode = ModeType.normal }) => {
 	return /* @__PURE__ */ jsx("td", {
-		className: classNames(tableStyles.table__cell, tableStyles["table__expander-cell-mobile"], {
-			[tableStyles["table__expander-cell-mobile--expanded"]]: expanded,
-			[tableStyles["table__cell--compact"]]: mode === ModeType.compact
+		className: classNames(styles.table__cell, styles["table__expander-cell-mobile"], {
+			[styles["table__expander-cell-mobile--expanded"]]: expanded,
+			[styles["table__cell--compact"]]: mode === ModeType.compact
 		}),
 		children: /* @__PURE__ */ jsxs(Button_default, {
 			"aria-expanded": expanded,
@@ -30,7 +30,7 @@ var TableExpanderCellMobile = ({ expanded, onClick, hideDetailsText, showDetails
 //#region src/components/Table/TableRow/TableRow.tsx
 var TableRow = ({ rowKey, hideDetailsText, showDetailsText, expandable, expanded, onClick, className, children, mode = ModeType.normal, ...rest }) => {
 	return /* @__PURE__ */ jsxs("tr", {
-		className: classNames(tableStyles["table-row"], { [tableStyles["table__row--expandable"]]: expandable }, className),
+		className: classNames(styles["table-row"], { [styles["table__row--expandable"]]: expandable }, className),
 		onClick,
 		...rest,
 		children: [mapChildrenWithMode(children, mode), expandable && /* @__PURE__ */ jsx(TableExpanderCellMobile, {

package/lib/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","names":[],"sources":["../src/components/Table/TableExpanderCell/TableExpanderCellMobile.tsx","../src/components/Table/TableRow/TableRow.tsx","../src/components/Table/TableRow/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { Props } from '../TableRow/TableRow';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\n\ntype TableExpanderCellMobileProps = Pick<Props, 'expanded' | 'onClick' | 'hideDetailsText' | 'showDetailsText' | 'mode'>;\n\nconst TableExpanderCellMobile: React.FC<TableExpanderCellMobileProps> = ({\n  expanded,\n  onClick,\n  hideDetailsText,\n  showDetailsText,\n  mode = ModeType.normal,\n}) => {\n  const cellClass = classNames(tableStyles.table__cell, tableStyles['table__expander-cell-mobile'], {\n    [tableStyles['table__expander-cell-mobile--expanded']]: expanded,\n    [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n  });\n\n  return (\n    <td className={cellClass}>\n      <Button aria-expanded={expanded} variant=\"borderless\" onClick={onClick}>\n        <Icon svgIcon={expanded ? ChevronUp : ChevronDown} /> {expanded ? hideDetailsText : showDetailsText}\n      </Button>\n    </td>\n  );\n};\n\nexport default TableExpanderCellMobile;\n","import classNames from 'classnames';\n\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\nimport TableExpanderCellMobile from '../TableExpanderCell/TableExpanderCellMobile';\nimport { mapChildrenWithMode } from '../utils';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'tr'>, 'style'> {\n  /** Sets if expanded row can be expanded */\n  expandable?: boolean;\n  /** Sets if expanded row is expanded */\n  expanded?: boolean;\n  /** When hide/show button for expanded row is clicked. */\n  onClick?: () => void;\n  /** Text for expanded row hide button. */\n  hideDetailsText?: string;\n  /** Text for expanded row show button. */\n  showDetailsText?: string;\n  /** Key attribute for row */\n  rowKey?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the cells of the table row element.  */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableRow: React.FC<Props> = ({\n  rowKey,\n  hideDetailsText,\n  showDetailsText,\n  expandable,\n  expanded,\n  onClick,\n  className,\n  children,\n  mode = ModeType.normal,\n  ...rest\n}) => {\n  const tableRowClass = classNames(\n    tableStyles['table-row'],\n    {\n      [tableStyles['table__row--expandable']]: expandable,\n    },\n    className\n  );\n\n  return (\n    <tr className={tableRowClass} onClick={onClick} key={rowKey} {...rest}>\n      {mapChildrenWithMode(children, mode)}\n      {expandable && (\n        <TableExpanderCellMobile\n          expanded={expanded}\n          onClick={onClick}\n          hideDetailsText={hideDetailsText}\n          showDetailsText={showDetailsText}\n          mode={mode}\n        />\n      )}\n    </tr>\n  );\n};\n\nexport default TableRow;\n","import TableRow from './TableRow';\nexport * from './TableRow';\nexport default TableRow;\n"],"mappings":";;;;;;;;;;AAaA,IAAM,2BAAmE,EACvE,UACA,SACA,iBACA,iBACA,OAAO,SAAS,aACZ;CAMJ,OACE,oBAAC,MAAD;EAAI,WANY,WAAW,YAAY,aAAa,YAAY,gCAAgC;IAC/F,YAAY,2CAA2C;IACvD,YAAY,0BAA0B,SAAS,SAAS;GAC1D,CAGgB;YACb,qBAAC,gBAAD;GAAQ,iBAAe;GAAU,SAAQ;GAAsB;aAA/D;IACE,oBAAC,cAAD,EAAM,SAAS,WAAW,YAAY,aAAe,CAAA;;IAAE,WAAW,kBAAkB;IAC7E;;EACN,CAAA;;;;ACFT,IAAa,YAA6B,EACxC,QACA,iBACA,iBACA,YACA,UACA,SACA,WACA,UACA,OAAO,SAAS,QAChB,GAAG,WACC;CASJ,OACE,qBAAC,MAAD;EAAI,WATgB,WACpB,YAAY,cACZ,GACG,YAAY,4BAA4B,YAC1C,EACD,UAIe;EAAwB;EAAsB,GAAI;YAAjE,CACG,oBAAoB,UAAU,KAAK,EACnC,cACC,oBAAC,yBAAD;GACY;GACD;GACQ;GACA;GACX;GACN,CAAA,CAED;IAXgD,OAWhD;;;;AC1DT,IAAA,mBAAe"}
+{"version":3,"file":"TableRow.js","names":[],"sources":["../src/components/Table/TableExpanderCell/TableExpanderCellMobile.tsx","../src/components/Table/TableRow/TableRow.tsx","../src/components/Table/TableRow/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { Props } from '../TableRow/TableRow';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\n\ntype TableExpanderCellMobileProps = Pick<Props, 'expanded' | 'onClick' | 'hideDetailsText' | 'showDetailsText' | 'mode'>;\n\nconst TableExpanderCellMobile: React.FC<TableExpanderCellMobileProps> = ({\n  expanded,\n  onClick,\n  hideDetailsText,\n  showDetailsText,\n  mode = ModeType.normal,\n}) => {\n  const cellClass = classNames(tableStyles.table__cell, tableStyles['table__expander-cell-mobile'], {\n    [tableStyles['table__expander-cell-mobile--expanded']]: expanded,\n    [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n  });\n\n  return (\n    <td className={cellClass}>\n      <Button aria-expanded={expanded} variant=\"borderless\" onClick={onClick}>\n        <Icon svgIcon={expanded ? ChevronUp : ChevronDown} /> {expanded ? hideDetailsText : showDetailsText}\n      </Button>\n    </td>\n  );\n};\n\nexport default TableExpanderCellMobile;\n","import classNames from 'classnames';\n\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\nimport TableExpanderCellMobile from '../TableExpanderCell/TableExpanderCellMobile';\nimport { mapChildrenWithMode } from '../utils';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'tr'>, 'style'> {\n  /** Sets if expanded row can be expanded */\n  expandable?: boolean;\n  /** Sets if expanded row is expanded */\n  expanded?: boolean;\n  /** When hide/show button for expanded row is clicked. */\n  onClick?: () => void;\n  /** Text for expanded row hide button. */\n  hideDetailsText?: string;\n  /** Text for expanded row show button. */\n  showDetailsText?: string;\n  /** Key attribute for row */\n  rowKey?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the cells of the table row element.  */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableRow: React.FC<Props> = ({\n  rowKey,\n  hideDetailsText,\n  showDetailsText,\n  expandable,\n  expanded,\n  onClick,\n  className,\n  children,\n  mode = ModeType.normal,\n  ...rest\n}) => {\n  const tableRowClass = classNames(\n    tableStyles['table-row'],\n    {\n      [tableStyles['table__row--expandable']]: expandable,\n    },\n    className\n  );\n\n  return (\n    <tr className={tableRowClass} onClick={onClick} key={rowKey} {...rest}>\n      {mapChildrenWithMode(children, mode)}\n      {expandable && (\n        <TableExpanderCellMobile\n          expanded={expanded}\n          onClick={onClick}\n          hideDetailsText={hideDetailsText}\n          showDetailsText={showDetailsText}\n          mode={mode}\n        />\n      )}\n    </tr>\n  );\n};\n\nexport default TableRow;\n","import TableRow from './TableRow';\nexport * from './TableRow';\nexport default TableRow;\n"],"mappings":";;;;;;;;;;AAaA,IAAM,2BAAmE,EACvE,UACA,SACA,iBACA,iBACA,OAAO,SAAS,aACZ;CAMJ,OACE,oBAAC,MAAD;EAAI,WANY,WAAW,OAAY,aAAa,OAAY,gCAAgC;IAC/F,OAAY,2CAA2C;IACvD,OAAY,0BAA0B,SAAS,SAAS;GAC1D,CAGgB;YACb,qBAAC,gBAAD;GAAQ,iBAAe;GAAU,SAAQ;GAAsB;aAA/D;IACE,oBAAC,cAAD,EAAM,SAAS,WAAW,YAAY,aAAe,CAAA;;IAAE,WAAW,kBAAkB;IAC7E;;EACN,CAAA;;;;ACFT,IAAa,YAA6B,EACxC,QACA,iBACA,iBACA,YACA,UACA,SACA,WACA,UACA,OAAO,SAAS,QAChB,GAAG,WACC;CASJ,OACE,qBAAC,MAAD;EAAI,WATgB,WACpB,OAAY,cACZ,GACG,OAAY,4BAA4B,YAC1C,EACD,UAIe;EAAwB;EAAsB,GAAI;YAAjE,CACG,oBAAoB,UAAU,KAAK,EACnC,cACC,oBAAC,yBAAD;GACY;GACD;GACQ;GACA;GACX;GACN,CAAA,CAED;IAXgD,OAWhD;;;;AC1DT,IAAA,mBAAe"}

package/lib/components/Filter/FilterSort/styles.module.scss

@@ -6,6 +6,7 @@
   select {
     outline: none;
     text-align: right;
+    text-align-last: right;
     color: var(--color-action-text-onlight);
     padding-right: 3rem;
     height: 2.75rem;
@@ -17,6 +18,7 @@
 
   select option {
     text-align: left;
+    direction: ltr;
   }
 
   &__wrapper {

package/lib/components/FormGroup/FormGroup.d.ts

@@ -9,6 +9,8 @@ export interface FormGroupProps {
     title?: string;
     /** text placed in the legend tag of the fieldset */
     legend?: string;
+    /** id for the legend tag */
+    legendId?: string;
     /** Items in the FormGroup component */
     children?: React.ReactNode;
     /** Adds custom classes to the element. */

package/lib/components/Table/index.js

@@ -16,7 +16,7 @@ import { n as TableRow } from "../../TableRow.js";
 import classNames from "classnames";
 import { useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import tableStyles from "./styles.module.scss";
+import styles from "./styles.module.scss";
 //#region src/components/Table/Table.tsx
 var Table = ({ id, testId, className, children, breakpointConfig = defaultConfig, mode = ModeType.normal, scrollAriaLabel, scrollAriaLabelledById, ...rest }) => {
 	const [currentConfig, setCurrentConfig] = useState();
@@ -44,7 +44,7 @@ var Table = ({ id, testId, className, children, breakpointConfig = defaultConfig
 	}, [tableWidth, tableIsVisible]);
 	const tableStyle = currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ? getCenteredOverflowTableStyle(parentWidth, tableWidth) : void 0;
 	const breakpointClass = getBreakpointClass(currentConfig);
-	const tableClass = classNames(tableStyles.table, breakpointClass, className);
+	const tableClass = classNames(styles.table, breakpointClass, className);
 	const domRest = omitProps(rest, [
 		"breakpoint",
 		"variant",