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

package/lib/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","names":["Tab: React.FC<TabProps>","TabChevron: React.FC<TabChevronProps>","TabItem: React.FC<TabItemProps>","TabList: React.FC<TabListProps>"],"sources":["../src/components/Tabs/Tab.tsx","../src/components/Tabs/TabList/TabChevron.tsx","../src/components/Tabs/TabList/TabItem.tsx","../src/components/Tabs/TabList/TabList.tsx","../src/components/Tabs/TabList/index.ts"],"sourcesContent":["import type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nexport interface TabProps {\n  /** Sets the tab panel content */\n  children?: React.ReactNode;\n  /** Optional icon on the tab */\n  icon?: SvgIcon | IconName;\n  /** Called when tab is selected */\n  onTabClick?: (index: number) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Title on the tab */\n  title?: string;\n}\n\nconst Tab: React.FC<TabProps> = props => {\n  return <>{props.children ?? null}</>;\n};\n\nexport default Tab;\n","import React from 'react';\n\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport Icon, { IconSize } from '../../Icon';\nimport ChevronLeft from '../../Icons/ChevronLeft';\nimport ChevronRight from '../../Icons/ChevronRight';\n\nimport styles from './styles.module.scss';\n\ninterface TabChevronProps {\n  direction: 'left' | 'right';\n  onClick: () => void;\n  backgroundColor?: string;\n  ariaLabel?: string;\n}\n\nconst TabChevron: React.FC<TabChevronProps> = ({ direction, onClick, backgroundColor, ariaLabel }) => {\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const { isHovered } = usePseudoClasses<HTMLButtonElement | null>(buttonRef);\n\n  return (\n    <button\n      type=\"button\"\n      ref={buttonRef}\n      className={styles['tab-list__button']}\n      onClick={onClick}\n      aria-label={ariaLabel}\n      style={{ backgroundColor: backgroundColor }}\n    >\n      {direction === 'left' ? (\n        <Icon color={'var(--color-action-graphics-onlight)'} isHovered={isHovered} svgIcon={ChevronLeft} size={IconSize.XSmall} />\n      ) : (\n        <Icon color={'var(--color-action-graphics-onlight)'} isHovered={isHovered} svgIcon={ChevronRight} size={IconSize.XSmall} />\n      )}\n    </button>\n  );\n};\n\nexport default TabChevron;\n","import { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { IconName } from '../../Icons/IconNames';\nimport type { TabProps } from '../Tab';\nimport type { TabsColors } from '../Tabs';\n\nimport { palette } from '../../../theme/palette';\nimport Icon, { IconSize } from '../../Icon';\nimport LazyIcon from '../../LazyIcon';\n\nimport styles from './styles.module.scss';\n\ninterface TabItemProps {\n  tabProps: TabProps;\n  index: number;\n  color: TabsColors;\n  selectedTab: number;\n  tabRefs: React.RefObject<React.RefObject<HTMLButtonElement | null>[] | null | undefined>;\n  tabListVisible: boolean;\n  onTabListClick: (index: number) => void;\n}\n\nconst TabItem: React.FC<TabItemProps> = props => {\n  const isSelected = props.index === props.selectedTab;\n  const { title, onTabClick, icon, testId } = props.tabProps;\n  const handleClick = (): void => {\n    if (onTabClick) onTabClick(props.index);\n    props.onTabListClick(props.index);\n    scrollToTab(props.index);\n  };\n  const tabButtonClasses = classNames(styles['tab-list__tab'], styles[`tab-list__tab--${props.color}`], {\n    [styles['tab-list__tab--selected']]: isSelected,\n    [styles['tab-list__tab--not-selected']]: !isSelected,\n  });\n\n  const currentRef = props.tabRefs.current && props.tabRefs.current[props.index];\n\n  const scrollToTab = (index: number): void => {\n    const currentRef = props.tabRefs.current && props.tabRefs.current[index];\n\n    if (currentRef?.current?.scrollIntoView) {\n      currentRef?.current?.scrollIntoView({ behavior: 'smooth', inline: 'nearest', block: 'nearest' });\n    }\n  };\n\n  const itemRef = useRef<HTMLLIElement>(null);\n\n  useEffect(() => {\n    if (isSelected && props.tabListVisible) {\n      scrollToTab(props.index);\n    }\n  }, [isSelected]);\n\n  return (\n    <li role=\"presentation\" ref={itemRef}>\n      <button\n        role=\"tab\"\n        aria-selected={isSelected}\n        onClick={handleClick}\n        className={tabButtonClasses}\n        data-testid={testId}\n        ref={currentRef as React.RefObject<HTMLButtonElement>}\n      >\n        <span className={styles['tab-list__tab__title-and-icon']}>\n          {icon &&\n            (typeof icon === 'string' ? (\n              <LazyIcon\n                iconName={icon as IconName}\n                size={IconSize.XSmall}\n                color={isSelected ? palette[`black`] : palette['blueberry500']}\n              />\n            ) : (\n              <Icon svgIcon={icon} size={IconSize.XSmall} color={isSelected ? palette[`black`] : palette['blueberry500']} />\n            ))}\n          {title}\n        </span>\n      </button>\n    </li>\n  );\n};\n\nexport default TabItem;\n","import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { TabProps } from '../Tab';\nimport type { TabsColors, TabsOnColor } from '../Tabs';\n\nimport TabChevron from './TabChevron';\nimport TabItem from './TabItem';\nimport { useIsVisible } from '../../../hooks/useIsVisible';\nimport { useRovingFocus } from '../../../hooks/useRovingFocus';\nimport { isComponent } from '../../../utils/component';\nimport Tab from '../Tab';\n\nimport styles from './styles.module.scss';\ninterface TabListProps {\n  children: React.ReactNode;\n  onTabListClick: (index: number) => void;\n  selectedTab: number;\n  color: TabsColors;\n  onColor: TabsOnColor;\n  ariaLabelRightButton?: string;\n  ariaLabelLeftButton?: string;\n}\n\nconst TabList: React.FC<TabListProps> = props => {\n  const { selectedTab, onTabListClick, children, color, onColor, ariaLabelLeftButton, ariaLabelRightButton } = props;\n\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const tabRefs = useRef(React.Children.map(children, () => React.createRef<HTMLButtonElement>()) || []);\n  useRovingFocus(onTabListClick, tabRefs, listRef, true);\n\n  const tablistClasses = classNames(styles['tab-list'], styles[`tab-list--${onColor}`]);\n\n  const getBackgroundColor = (onColor: TabsOnColor): string => {\n    switch (onColor) {\n      case 'onwhite':\n        return 'var(--color-base-background-white)';\n      case 'onblueberry':\n        return 'var(--color-base-background-blueberry)';\n      case 'onneutral':\n        return 'var(--color-base-background-neutral)';\n    }\n  };\n  const firstTab = tabRefs.current && tabRefs.current[0];\n  const lastTab = tabRefs.current && tabRefs.current[tabRefs.current.length - 1];\n\n  const firstTabVisible = useIsVisible(firstTab);\n  const lastTabVisible = useIsVisible(lastTab);\n  const tabListVisible = useIsVisible(listRef);\n\n  const shouldShowFadeStart = (): boolean => {\n    return !firstTabVisible;\n  };\n\n  const shouldShowFadeEnd = (): boolean => {\n    return !lastTabVisible;\n  };\n\n  const scrollInList = (direction: string): void => {\n    if (listRef.current) {\n      const listWidth = listRef.current.clientWidth;\n      const listScrollLeft = listRef.current.scrollLeft;\n      const maxScrollLeft = listRef.current.scrollWidth - listWidth;\n\n      if (direction === 'right' && !lastTabVisible) {\n        const scrollAmount = Math.min(listWidth / 2, maxScrollLeft - listScrollLeft);\n        listRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n      } else if (direction === 'left' && !firstTabVisible) {\n        const scrollAmount = -Math.min(listWidth / 2, listScrollLeft);\n        listRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n      }\n    }\n  };\n\n  return (\n    <div className={styles['tab-list-wrapper']}>\n      {shouldShowFadeStart() && (\n        <div className={classNames(styles['tab-list__start-wrapper'])}>\n          <TabChevron\n            onClick={() => scrollInList('left')}\n            direction=\"left\"\n            backgroundColor={`${getBackgroundColor(onColor)}`}\n            ariaLabel={ariaLabelLeftButton}\n          />\n          <div\n            className={classNames(styles['tab-list__fade-start'])}\n            style={{\n              backgroundColor: `${getBackgroundColor(onColor)}`,\n            }}\n          ></div>\n        </div>\n      )}\n      <ul className={tablistClasses} ref={listRef} role=\"tablist\" aria-orientation=\"horizontal\">\n        {React.Children.map(children, (child, index) => {\n          if (isComponent<TabProps>(child, Tab)) {\n            return (\n              <TabItem\n                tabRefs={tabRefs}\n                tabListVisible={tabListVisible}\n                key={child.props.title}\n                index={index}\n                selectedTab={selectedTab}\n                onTabListClick={onTabListClick}\n                tabProps={child.props}\n                color={color}\n              />\n            );\n          }\n          return null;\n        })}\n      </ul>\n      {shouldShowFadeEnd() && (\n        <div className={classNames(styles['tab-list__end-wrapper'])}>\n          <div\n            className={classNames(styles['tab-list__fade-end'])}\n            style={{\n              backgroundColor: `${getBackgroundColor(onColor)}`,\n            }}\n          ></div>\n          <TabChevron\n            onClick={() => scrollInList('right')}\n            direction=\"right\"\n            backgroundColor={`${getBackgroundColor(onColor)}`}\n            ariaLabel={ariaLabelRightButton}\n          />\n        </div>\n      )}\n      <div className={classNames(styles['tab-list__border'])}></div>\n    </div>\n  );\n};\n\nexport default TabList;\n","import TabList from './TabList';\nexport * from './TabList';\nexport default TabList;\n"],"mappings":"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"}
+{"version":3,"file":"TabList.js","names":[],"sources":["../src/components/Tabs/Tab.tsx","../src/components/Tabs/TabList/TabChevron.tsx","../src/components/Tabs/TabList/TabItem.tsx","../src/components/Tabs/TabList/TabList.tsx","../src/components/Tabs/TabList/index.ts"],"sourcesContent":["import type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nexport interface TabProps {\n  /** Sets the tab panel content */\n  children?: React.ReactNode;\n  /** Optional icon on the tab */\n  icon?: SvgIcon | IconName;\n  /** Called when tab is selected */\n  onTabClick?: (index: number) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Title on the tab */\n  title?: string;\n}\n\nconst Tab: React.FC<TabProps> = props => {\n  return <>{props.children ?? null}</>;\n};\n\nexport default Tab;\n","import React from 'react';\n\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport Icon, { IconSize } from '../../Icon';\nimport ChevronLeft from '../../Icons/ChevronLeft';\nimport ChevronRight from '../../Icons/ChevronRight';\n\nimport styles from './styles.module.scss';\n\ninterface TabChevronProps {\n  direction: 'left' | 'right';\n  onClick: () => void;\n  backgroundColor?: string;\n  ariaLabel?: string;\n}\n\nconst TabChevron: React.FC<TabChevronProps> = ({ direction, onClick, backgroundColor, ariaLabel }) => {\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const { isHovered } = usePseudoClasses<HTMLButtonElement | null>(buttonRef);\n\n  return (\n    <button\n      type=\"button\"\n      ref={buttonRef}\n      className={styles['tab-list__button']}\n      onClick={onClick}\n      aria-label={ariaLabel}\n      style={{ backgroundColor: backgroundColor }}\n    >\n      {direction === 'left' ? (\n        <Icon color={'var(--color-action-graphics-onlight)'} isHovered={isHovered} svgIcon={ChevronLeft} size={IconSize.XSmall} />\n      ) : (\n        <Icon color={'var(--color-action-graphics-onlight)'} isHovered={isHovered} svgIcon={ChevronRight} size={IconSize.XSmall} />\n      )}\n    </button>\n  );\n};\n\nexport default TabChevron;\n","import { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { IconName } from '../../Icons/IconNames';\nimport type { TabProps } from '../Tab';\nimport type { TabsColors } from '../Tabs';\n\nimport { palette } from '../../../theme/palette';\nimport Icon, { IconSize } from '../../Icon';\nimport LazyIcon from '../../LazyIcon';\n\nimport styles from './styles.module.scss';\n\ninterface TabItemProps {\n  tabProps: TabProps;\n  index: number;\n  color: TabsColors;\n  selectedTab: number;\n  tabRefs: React.RefObject<React.RefObject<HTMLButtonElement | null>[] | null | undefined>;\n  tabListVisible: boolean;\n  onTabListClick: (index: number) => void;\n}\n\nconst TabItem: React.FC<TabItemProps> = props => {\n  const isSelected = props.index === props.selectedTab;\n  const { title, onTabClick, icon, testId } = props.tabProps;\n  const handleClick = (): void => {\n    if (onTabClick) onTabClick(props.index);\n    props.onTabListClick(props.index);\n    scrollToTab(props.index);\n  };\n  const tabButtonClasses = classNames(styles['tab-list__tab'], styles[`tab-list__tab--${props.color}`], {\n    [styles['tab-list__tab--selected']]: isSelected,\n    [styles['tab-list__tab--not-selected']]: !isSelected,\n  });\n\n  const currentRef = props.tabRefs.current && props.tabRefs.current[props.index];\n\n  const scrollToTab = (index: number): void => {\n    const currentRef = props.tabRefs.current && props.tabRefs.current[index];\n\n    if (currentRef?.current?.scrollIntoView) {\n      currentRef?.current?.scrollIntoView({ behavior: 'smooth', inline: 'nearest', block: 'nearest' });\n    }\n  };\n\n  const itemRef = useRef<HTMLLIElement>(null);\n\n  useEffect(() => {\n    if (isSelected && props.tabListVisible) {\n      scrollToTab(props.index);\n    }\n  }, [isSelected]);\n\n  return (\n    <li role=\"presentation\" ref={itemRef}>\n      <button\n        role=\"tab\"\n        aria-selected={isSelected}\n        onClick={handleClick}\n        className={tabButtonClasses}\n        data-testid={testId}\n        ref={currentRef as React.RefObject<HTMLButtonElement>}\n      >\n        <span className={styles['tab-list__tab__title-and-icon']}>\n          {icon &&\n            (typeof icon === 'string' ? (\n              <LazyIcon\n                iconName={icon as IconName}\n                size={IconSize.XSmall}\n                color={isSelected ? palette[`black`] : palette['blueberry500']}\n              />\n            ) : (\n              <Icon svgIcon={icon} size={IconSize.XSmall} color={isSelected ? palette[`black`] : palette['blueberry500']} />\n            ))}\n          {title}\n        </span>\n      </button>\n    </li>\n  );\n};\n\nexport default TabItem;\n","import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { TabProps } from '../Tab';\nimport type { TabsColors, TabsOnColor } from '../Tabs';\n\nimport TabChevron from './TabChevron';\nimport TabItem from './TabItem';\nimport { useIsVisible } from '../../../hooks/useIsVisible';\nimport { useRovingFocus } from '../../../hooks/useRovingFocus';\nimport { isComponent } from '../../../utils/component';\nimport Tab from '../Tab';\n\nimport styles from './styles.module.scss';\ninterface TabListProps {\n  children: React.ReactNode;\n  onTabListClick: (index: number) => void;\n  selectedTab: number;\n  color: TabsColors;\n  onColor: TabsOnColor;\n  ariaLabelRightButton?: string;\n  ariaLabelLeftButton?: string;\n}\n\nconst TabList: React.FC<TabListProps> = props => {\n  const { selectedTab, onTabListClick, children, color, onColor, ariaLabelLeftButton, ariaLabelRightButton } = props;\n\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const tabRefs = useRef(React.Children.map(children, () => React.createRef<HTMLButtonElement>()) || []);\n  useRovingFocus(onTabListClick, tabRefs, listRef, true);\n\n  const tablistClasses = classNames(styles['tab-list'], styles[`tab-list--${onColor}`]);\n\n  const getBackgroundColor = (onColor: TabsOnColor): string => {\n    switch (onColor) {\n      case 'onwhite':\n        return 'var(--color-base-background-white)';\n      case 'onblueberry':\n        return 'var(--color-base-background-blueberry)';\n      case 'onneutral':\n        return 'var(--color-base-background-neutral)';\n    }\n  };\n  const firstTab = tabRefs.current && tabRefs.current[0];\n  const lastTab = tabRefs.current && tabRefs.current[tabRefs.current.length - 1];\n\n  const firstTabVisible = useIsVisible(firstTab);\n  const lastTabVisible = useIsVisible(lastTab);\n  const tabListVisible = useIsVisible(listRef);\n\n  const shouldShowFadeStart = (): boolean => {\n    return !firstTabVisible;\n  };\n\n  const shouldShowFadeEnd = (): boolean => {\n    return !lastTabVisible;\n  };\n\n  const scrollInList = (direction: string): void => {\n    if (listRef.current) {\n      const listWidth = listRef.current.clientWidth;\n      const listScrollLeft = listRef.current.scrollLeft;\n      const maxScrollLeft = listRef.current.scrollWidth - listWidth;\n\n      if (direction === 'right' && !lastTabVisible) {\n        const scrollAmount = Math.min(listWidth / 2, maxScrollLeft - listScrollLeft);\n        listRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n      } else if (direction === 'left' && !firstTabVisible) {\n        const scrollAmount = -Math.min(listWidth / 2, listScrollLeft);\n        listRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n      }\n    }\n  };\n\n  return (\n    <div className={styles['tab-list-wrapper']}>\n      {shouldShowFadeStart() && (\n        <div className={classNames(styles['tab-list__start-wrapper'])}>\n          <TabChevron\n            onClick={() => scrollInList('left')}\n            direction=\"left\"\n            backgroundColor={`${getBackgroundColor(onColor)}`}\n            ariaLabel={ariaLabelLeftButton}\n          />\n          <div\n            className={classNames(styles['tab-list__fade-start'])}\n            style={{\n              backgroundColor: `${getBackgroundColor(onColor)}`,\n            }}\n          ></div>\n        </div>\n      )}\n      <ul className={tablistClasses} ref={listRef} role=\"tablist\" aria-orientation=\"horizontal\">\n        {React.Children.map(children, (child, index) => {\n          if (isComponent<TabProps>(child, Tab)) {\n            return (\n              <TabItem\n                tabRefs={tabRefs}\n                tabListVisible={tabListVisible}\n                key={child.props.title}\n                index={index}\n                selectedTab={selectedTab}\n                onTabListClick={onTabListClick}\n                tabProps={child.props}\n                color={color}\n              />\n            );\n          }\n          return null;\n        })}\n      </ul>\n      {shouldShowFadeEnd() && (\n        <div className={classNames(styles['tab-list__end-wrapper'])}>\n          <div\n            className={classNames(styles['tab-list__fade-end'])}\n            style={{\n              backgroundColor: `${getBackgroundColor(onColor)}`,\n            }}\n          ></div>\n          <TabChevron\n            onClick={() => scrollInList('right')}\n            direction=\"right\"\n            backgroundColor={`${getBackgroundColor(onColor)}`}\n            ariaLabel={ariaLabelRightButton}\n          />\n        </div>\n      )}\n      <div className={classNames(styles['tab-list__border'])}></div>\n    </div>\n  );\n};\n\nexport default TabList;\n","import TabList from './TabList';\nexport * from './TabList';\nexport default TabList;\n"],"mappings":"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"}

package/lib/TabPanel.js

@@ -1,6 +1,7 @@
 import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/Tabs/TabPanel/styles.module.scss";
+//#region src/components/Tabs/TabPanel/TabPanel.tsx
 var TabPanel = (props) => {
 	const { children, color = "white", isFirst = false, style, ref } = props;
 	return /* @__PURE__ */ jsx("div", {
@@ -11,7 +12,10 @@ var TabPanel = (props) => {
 	});
 };
 TabPanel.displayName = "TabPanel";
-var TabPanel_default$1 = TabPanel;
-export { TabPanel_default$1 as t };
+//#endregion
+//#region src/components/Tabs/TabPanel/index.ts
+var TabPanel_default = TabPanel;
+//#endregion
+export { TabPanel_default as t };
 
 //# sourceMappingURL=TabPanel.js.map

package/lib/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","names":["TabPanel: React.FC<TabPanelProps>"],"sources":["../src/components/Tabs/TabPanel/TabPanel.tsx","../src/components/Tabs/TabPanel/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { TabsColors } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabPanelProps {\n  children?: React.ReactNode;\n  color?: TabsColors;\n  isFirst?: boolean;\n  style?: React.CSSProperties;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\n\nconst TabPanel: React.FC<TabPanelProps> = props => {\n  const { children, color = 'white', isFirst = false, style, ref } = props;\n\n  const tabPanelClasses = classNames(styles['tab-panel'], styles[`tab-panel--${color}`], {\n    [styles['tab-panel--first']]: isFirst,\n  });\n\n  return (\n    <div ref={ref} className={tabPanelClasses} style={style}>\n      <div>{children}</div>\n    </div>\n  );\n};\n\nTabPanel.displayName = 'TabPanel';\nexport default TabPanel;\n","import TabPanel from './TabPanel';\nexport * from './TabPanel';\nexport default TabPanel;\n"],"mappings":";;;AAeA,IAAMA,YAAoC,UAAS;CACjD,MAAM,EAAE,UAAU,QAAQ,SAAS,UAAU,OAAO,OAAO,QAAQ;AAMnE,QACE,oBAAC,OAAA;EAAS;EAAK,WALO,WAAW,OAAO,cAAc,OAAO,cAAc,UAAU,GACpF,OAAO,sBAAsB,SAC/B,CAAC;EAGkD;YAChD,oBAAC,OAAA,EAAK,UAAA,CAAe;GACjB;;AAIV,SAAS,cAAc;AC3BvB,IAAA,qBD4Be"}
+{"version":3,"file":"TabPanel.js","names":[],"sources":["../src/components/Tabs/TabPanel/TabPanel.tsx","../src/components/Tabs/TabPanel/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { TabsColors } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabPanelProps {\n  children?: React.ReactNode;\n  color?: TabsColors;\n  isFirst?: boolean;\n  style?: React.CSSProperties;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\n\nconst TabPanel: React.FC<TabPanelProps> = props => {\n  const { children, color = 'white', isFirst = false, style, ref } = props;\n\n  const tabPanelClasses = classNames(styles['tab-panel'], styles[`tab-panel--${color}`], {\n    [styles['tab-panel--first']]: isFirst,\n  });\n\n  return (\n    <div ref={ref} className={tabPanelClasses} style={style}>\n      <div>{children}</div>\n    </div>\n  );\n};\n\nTabPanel.displayName = 'TabPanel';\nexport default TabPanel;\n","import TabPanel from './TabPanel';\nexport * from './TabPanel';\nexport default TabPanel;\n"],"mappings":";;;;AAeA,IAAM,YAAoC,UAAS;CACjD,MAAM,EAAE,UAAU,QAAQ,SAAS,UAAU,OAAO,OAAO,QAAQ;CAMnE,OACE,oBAAC,OAAD;EAAU;EAAK,WALO,WAAW,OAAO,cAAc,OAAO,cAAc,UAAU,GACpF,OAAO,sBAAsB,SAC/B,CAG2B;EAAwB;YAChD,oBAAC,OAAD,EAAM,UAAe,CAAA;EACjB,CAAA;;AAIV,SAAS,cAAc;;;AC3BvB,IAAA,mBAAe"}

package/lib/TableBody.js

@@ -1,16 +1,20 @@
-import { n as ModeType } from "./constants3.js";
+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 styles from "./components/Table/styles.module.scss";
-const TableBody = ({ className, children, mode = ModeType.normal, ...rest }) => {
+import tableStyles 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(styles["table-body"], className),
+		className: classNames(tableStyles["table-body"], className),
 		...rest,
 		children: mapChildrenWithMode(children, mode)
 	});
 };
-var TableBody_default$1 = TableBody;
-export { TableBody as n, TableBody_default$1 as t };
+//#endregion
+//#region src/components/Table/TableBody/index.ts
+var TableBody_default = TableBody;
+//#endregion
+export { TableBody as n, TableBody_default as t };
 
 //# sourceMappingURL=TableBody.js.map

package/lib/TableBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.js","names":["TableBody: React.FC<Props>"],"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,MAAaA,aAA8B,EAAE,WAAW,UAAU,OAAO,SAAS,QAAQ,GAAG,WAAW;AAEtG,QACE,oBAAC,SAAA;EAAM,WAFgB,WAAW,OAAY,eAAe,UAAU;EAEnC,GAAI;YACrC,oBAAoB,UAAU,KAAK;GAC9B;;AClBZ,IAAA,sBDsBe"}
+{"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"}

package/lib/TableCell.js

@@ -1,17 +1,21 @@
-import { a as TextAlign, n as ModeType } from "./constants3.js";
+import { a as TextAlign, n as ModeType } from "./constants2.js";
 import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
-import styles from "./components/Table/styles.module.scss";
-const TableCell = ({ nowrap = false, textAlign = TextAlign.left, dataLabel, children, className, testId, mode = ModeType.normal, ...rest }) => {
+import tableStyles 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(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),
+		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),
 		"data-label": dataLabel,
 		"data-testid": testId,
 		...rest,
 		children
 	});
 };
-var TableCell_default$1 = TableCell;
-export { TableCell as n, TableCell_default$1 as t };
+//#endregion
+//#region src/components/Table/TableCell/index.ts
+var TableCell_default = TableCell;
+//#endregion
+export { TableCell as n, TableCell_default as t };
 
 //# sourceMappingURL=TableCell.js.map

package/lib/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.js","names":["TableCell: React.FC<Props>"],"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,MAAaA,aAA8B,EACzC,SAAS,OACT,YAAY,UAAU,MACtB,WACA,UACA,WACA,QACA,OAAO,SAAS,QAChB,GAAG,WACC;AAUJ,QACE,oBAAC,MAAA;EAAG,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,UACD;EAGgC,cAAY;EAAW,eAAa;EAAQ,GAAI;EAC5E;GACE;;AC1CT,IAAA,sBD8Ce"}
+{"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"}

package/lib/TableExpandedRow.js

@@ -1,32 +1,36 @@
 import { t as Icon_default } from "./Icon.js";
 import { t as Button_default } from "./Button.js";
-import { t as ChevronUp_default } from "./ChevronUp.js";
-import { n as ModeType } from "./constants3.js";
+import ChevronUp from "./components/Icons/ChevronUp.js";
+import { n as ModeType } from "./constants2.js";
 import classNames from "classnames";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import styles from "./components/Table/styles.module.scss";
-const TableExpandedRow = ({ numberOfColumns, expanded, hideDetailsText, toggleClick, children, className, mode = ModeType.normal, id }) => {
+import tableStyles 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(styles["table__expanded-row"], { [styles["table__expanded-row--expanded"]]: expanded }, className),
+		className: classNames(tableStyles["table__expanded-row"], { [tableStyles["table__expanded-row--expanded"]]: expanded }, className),
 		id,
 		children: /* @__PURE__ */ jsx("td", {
 			colSpan: numberOfColumns,
-			className: classNames(styles["table__cell"], className, { [styles["table__cell--compact"]]: mode === ModeType.compact }),
+			className: classNames(tableStyles["table__cell"], className, { [tableStyles["table__cell--compact"]]: mode === ModeType.compact }),
 			children: /* @__PURE__ */ jsxs("div", {
-				className: classNames(styles["table__expanded-row-container"]),
+				className: classNames(tableStyles["table__expanded-row-container"]),
 				children: [React.Children.map(children, (child) => React.isValidElement(child) && React.cloneElement(child)), /* @__PURE__ */ jsxs(Button_default, {
 					variant: "borderless",
 					onClick: toggleClick,
 					"aria-expanded": expanded,
 					tabIndex: expanded ? 0 : -1,
-					children: [hideDetailsText, /* @__PURE__ */ jsx(Icon_default, { svgIcon: ChevronUp_default })]
+					children: [hideDetailsText, /* @__PURE__ */ jsx(Icon_default, { svgIcon: ChevronUp })]
 				})]
 			})
 		})
 	});
 };
-var TableExpandedRow_default$1 = TableExpandedRow;
-export { TableExpandedRow as n, TableExpandedRow_default$1 as t };
+//#endregion
+//#region src/components/Table/TableExpandedRow/index.ts
+var TableExpandedRow_default = TableExpandedRow;
+//#endregion
+export { TableExpandedRow as n, TableExpandedRow_default as t };
 
 //# sourceMappingURL=TableExpandedRow.js.map

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,MAAa,oBAAoB,EAC/B,iBACA,UACA,iBACA,aACA,UACA,WACA,OAAO,SAAS,QAChB,SAC8B;AAY9B,QACE,oBAAC,MAAA;EAAG,WAZgB,WACpB,OAAY,wBACZ,GAAG,OAAY,mCAAmC,UAAU,EAC5D,UACD;EAQmC;YAChC,oBAAC,MAAA;GAAG,SAAS;GAAiB,WARX,WAAW,OAAY,gBAAgB,WAAW,GACtE,OAAY,0BAA0B,SAAS,SAAS,SAC1D,CAAC;aAOI,qBAAC,OAAA;IAAI,WALY,WAAW,OAAY,iCAAiC;eAMtE,MAAM,SAAS,IAAI,WAAU,UAAS,MAAM,eAAe,MAAM,IAAI,MAAM,aAAa,MAAM,CAAC,EAChG,qBAAC,gBAAA;KAAO,SAAS;KAAc,SAAS;KAAa,iBAAe;KAAU,UAAU,WAAW,IAAI;gBACpG,iBACD,oBAAC,cAAA,EAAK,SAAS,mBAAA,CAAa,CAAA;MACrB,CAAA;KACL;IACH;GACF;;AC3DT,IAAA,6BD+De"}
+{"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"}

package/lib/TableExpanderCell.js

@@ -1,26 +1,28 @@
 import { t as Icon_default } from "./Icon.js";
 import { t as Button_default } from "./Button.js";
-import { t as ChevronDown_default } from "./ChevronDown.js";
-import { t as ChevronUp_default } from "./ChevronUp.js";
-import { n as ModeType } from "./constants3.js";
+import ChevronDown from "./components/Icons/ChevronDown.js";
+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 styles from "./components/Table/styles.module.scss";
-const TableExpanderCell = ({ expandableRowId, hideDetailsText, showDetailsText, expanded, className, mode = ModeType.normal }) => {
-	const tableCellClass = classNames(styles["table__cell"], styles["table__cell-expander"], className, { [styles["table__cell--compact"]]: mode === ModeType.compact });
-	const icon = expanded ? ChevronUp_default : ChevronDown_default;
+import tableStyles 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: tableCellClass,
+		className: classNames(tableStyles["table__cell"], tableStyles["table__cell-expander"], className, { [tableStyles["table__cell--compact"]]: mode === ModeType.compact }),
 		children: /* @__PURE__ */ jsx(Button_default, {
 			variant: "borderless",
 			"aria-expanded": expanded,
 			"aria-controls": expandableRowId,
 			ariaLabel: expanded ? hideDetailsText : showDetailsText,
-			children: /* @__PURE__ */ jsx(Icon_default, { svgIcon: icon })
+			children: /* @__PURE__ */ jsx(Icon_default, { svgIcon: expanded ? ChevronUp : ChevronDown })
 		})
 	});
 };
-var TableExpanderCell_default$1 = TableExpanderCell;
-export { TableExpanderCell as n, TableExpanderCell_default$1 as t };
+//#endregion
+//#region src/components/Table/TableExpanderCell/index.ts
+var TableExpanderCell_default = TableExpanderCell;
+//#endregion
+export { TableExpanderCell as n, TableExpanderCell_default as t };
 
 //# sourceMappingURL=TableExpanderCell.js.map

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,MAAa,qBAAqB,EAChC,iBACA,iBACA,iBACA,UACA,WACA,OAAO,SAAS,aACc;CAC9B,MAAM,iBAAiB,WAAW,OAAY,gBAAgB,OAAY,yBAAyB,WAAW,GAC3G,OAAY,0BAA0B,SAAS,SAAS,SAC1D,CAAC;CACF,MAAM,OAAO,WAAW,oBAAY;AAEpC,QACE,oBAAC,MAAA;EAAG,WAAW;YACb,oBAAC,gBAAA;GACC,SAAQ;GACR,iBAAe;GACf,iBAAe;GACf,WAAW,WAAW,kBAAkB;aAExC,oBAAC,cAAA,EAAK,SAAS,MAAA,CAAQ;IAChB;GACN;;AC7CT,IAAA,8BDiDe"}
+{"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"}

package/lib/TableHead.js

@@ -1,21 +1,25 @@
-import { n as ModeType, t as HeaderCategory } from "./constants3.js";
+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 styles from "./components/Table/styles.module.scss";
-const TableHead = ({ category = HeaderCategory.normal, className, children, mode, ...rest }) => {
+import tableStyles 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(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: 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),
 		...rest,
 		children: mapChildrenWithMode(children, mode)
 	});
 };
-var TableHead_default$1 = TableHead;
-export { TableHead as n, TableHead_default$1 as t };
+//#endregion
+//#region src/components/Table/TableHead/index.ts
+var TableHead_default = TableHead;
+//#endregion
+export { TableHead as n, TableHead_default as t };
 
 //# sourceMappingURL=TableHead.js.map

package/lib/TableHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHead.js","names":["TableHead: React.FC<Props>"],"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,MAAaA,aAA8B,EAAE,WAAW,eAAe,QAAQ,WAAW,UAAU,MAAM,GAAG,WAAW;AAYtH,QACE,oBAAC,SAAA;EAAM,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,UACD;EAGmC,GAAI;YACnC,oBAAoB,UAAU,KAAK;GAC9B;;AC9BZ,IAAA,sBDkCe"}
+{"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"}

package/lib/TableHeadCell.js

@@ -1,13 +1,14 @@
-import { a as IconSize } from "./constants2.js";
+import { IconSize } from "./constants.js";
 import { t as Icon_default } from "./Icon.js";
-import { t as ArrowDown_default } from "./ArrowDown.js";
-import { t as ArrowUp_default } from "./ArrowUp.js";
-import { i as SortDirection, n as ModeType } from "./constants3.js";
+import ArrowDown from "./components/Icons/ArrowDown.js";
+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 styles from "./components/Table/styles.module.scss";
-const TableHeadCell = ({ sortable, onClick, className, children, sortDir, mode = ModeType.normal, scope = "col", ...rest }) => {
-	const tableHeadCellDefaultClass = classNames(styles["table__head-cell"], className, { [styles["table__head-cell--compact"]]: mode === ModeType.compact });
+import tableStyles 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 });
 	if (!sortable && !children) return /* @__PURE__ */ jsx("td", { className: tableHeadCellDefaultClass });
 	if (!sortable) return /* @__PURE__ */ jsx("th", {
 		scope,
@@ -15,11 +16,11 @@ const TableHeadCell = ({ sortable, onClick, className, children, sortDir, mode =
 		...rest,
 		children
 	});
-	const sortableClasses = classNames(tableHeadCellDefaultClass, styles["table__head-cell--sortable"], className);
+	const sortableClasses = classNames(tableHeadCellDefaultClass, tableStyles["table__head-cell--sortable"], className);
 	const renderSortIcon = () => sortDir && /* @__PURE__ */ jsx("div", {
-		className: styles["table__head-cell-sort-icon-wrapper"],
+		className: tableStyles["table__head-cell-sort-icon-wrapper"],
 		children: /* @__PURE__ */ jsx(Icon_default, {
-			svgIcon: sortDir == SortDirection.asc ? ArrowDown_default : ArrowUp_default,
+			svgIcon: sortDir == SortDirection.asc ? ArrowDown : ArrowUp,
 			size: IconSize.XXSmall
 		})
 	});
@@ -37,13 +38,16 @@ const TableHeadCell = ({ sortable, onClick, className, children, sortDir, mode =
 		children: /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			onClick,
-			className: styles["table__sort-button"],
+			className: tableStyles["table__sort-button"],
 			"aria-pressed": sortDir ? !!sortDir : void 0,
 			children: [renderSortIcon(), children]
 		})
 	});
 };
-var TableHeadCell_default$1 = TableHeadCell;
-export { TableHeadCell as n, TableHeadCell_default$1 as t };
+//#endregion
+//#region src/components/Table/TableHeadCell/index.ts
+var TableHeadCell_default = TableHeadCell;
+//#endregion
+export { TableHeadCell as n, TableHeadCell_default as t };
 
 //# sourceMappingURL=TableHeadCell.js.map

package/lib/TableHeadCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeadCell.js","names":["TableHeadCell: React.FC<Props>"],"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,MAAaA,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;AAEF,KAAI,CAAC,YAAY,CAAC,SAChB,QAAO,oBAAC,MAAA,EAAG,WAAW,2BAAA,CAAgC;AAGxD,KAAI,CAAC,SACH,QACE,oBAAC,MAAA;EAAU;EAAO,WAAW;EAA2B,GAAI;EACzD;GACE;CAIT,MAAM,kBAAkB,WAAW,2BAA2B,OAAY,+BAA+B,UAAU;CAEnH,MAAM,uBACJ,WACE,oBAAC,OAAA;EAAI,WAAW,OAAY;YAC1B,oBAAC,cAAA;GAAK,SAAS,WAAW,cAAc,MAAM,oBAAY;GAAS,MAAM,SAAS;IAAW;GACzF;CAGV,MAAM,yBAA4D;AAChE,UAAQ,SAAR;GACE,KAAK,cAAc,IACjB,QAAO;GACT,KAAK,cAAc,KACjB,QAAO;;;AAIb,QACE,oBAAC,MAAA;EAAU;EAAO,WAAW;EAAiB,aAAW,kBAAkB;EAAE,GAAI;YAC/E,qBAAC,UAAA;GAAO,MAAK;GAAkB;GAAS,WAAW,OAAY;GAAuB,gBAAc,UAAU,CAAC,CAAC,UAAU,KAAA;cACvH,gBAAgB,EAChB,SAAA;IACM;GACN;;ACvET,IAAA,0BD2Ee"}
+{"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"}

package/lib/TableRow.js

@@ -1,37 +1,39 @@
 import { t as Icon_default } from "./Icon.js";
 import { t as Button_default } from "./Button.js";
-import { t as ChevronDown_default } from "./ChevronDown.js";
-import { t as ChevronUp_default } from "./ChevronUp.js";
-import { n as ModeType } from "./constants3.js";
+import ChevronDown from "./components/Icons/ChevronDown.js";
+import ChevronUp from "./components/Icons/ChevronUp.js";
+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 styles from "./components/Table/styles.module.scss";
+import tableStyles 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(styles.table__cell, styles["table__expander-cell-mobile"], {
-			[styles["table__expander-cell-mobile--expanded"]]: expanded,
-			[styles["table__cell--compact"]]: mode === ModeType.compact
+		className: classNames(tableStyles.table__cell, tableStyles["table__expander-cell-mobile"], {
+			[tableStyles["table__expander-cell-mobile--expanded"]]: expanded,
+			[tableStyles["table__cell--compact"]]: mode === ModeType.compact
 		}),
 		children: /* @__PURE__ */ jsxs(Button_default, {
 			"aria-expanded": expanded,
 			variant: "borderless",
 			onClick,
 			children: [
-				/* @__PURE__ */ jsx(Icon_default, { svgIcon: expanded ? ChevronUp_default : ChevronDown_default }),
+				/* @__PURE__ */ jsx(Icon_default, { svgIcon: expanded ? ChevronUp : ChevronDown }),
 				" ",
 				expanded ? hideDetailsText : showDetailsText
 			]
 		})
 	});
 };
-var TableExpanderCellMobile_default = TableExpanderCellMobile;
-const TableRow = ({ rowKey, hideDetailsText, showDetailsText, expandable, expanded, onClick, className, children, mode = ModeType.normal, ...rest }) => {
+//#endregion
+//#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(styles["table-row"], { [styles["table__row--expandable"]]: expandable }, className),
+		className: classNames(tableStyles["table-row"], { [tableStyles["table__row--expandable"]]: expandable }, className),
 		onClick,
 		...rest,
-		children: [mapChildrenWithMode(children, mode), expandable && /* @__PURE__ */ jsx(TableExpanderCellMobile_default, {
+		children: [mapChildrenWithMode(children, mode), expandable && /* @__PURE__ */ jsx(TableExpanderCellMobile, {
 			expanded,
 			onClick,
 			hideDetailsText,
@@ -40,7 +42,10 @@ const TableRow = ({ rowKey, hideDetailsText, showDetailsText, expandable, expand
 		})]
 	}, rowKey);
 };
-var TableRow_default$1 = TableRow;
-export { TableRow as n, TableRow_default$1 as t };
+//#endregion
+//#region src/components/Table/TableRow/index.ts
+var TableRow_default = TableRow;
+//#endregion
+export { TableRow as n, TableRow_default as t };
 
 //# sourceMappingURL=TableRow.js.map

package/lib/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","names":["TableExpanderCellMobile: React.FC<TableExpanderCellMobileProps>","TableRow: React.FC<Props>"],"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,IAAMA,2BAAmE,EACvE,UACA,SACA,iBACA,iBACA,OAAO,SAAS,aACZ;AAMJ,QACE,oBAAC,MAAA;EAAG,WANY,WAAW,OAAY,aAAa,OAAY,gCAAgC;IAC/F,OAAY,2CAA2C;IACvD,OAAY,0BAA0B,SAAS,SAAS;GAC1D,CAAC;YAIE,qBAAC,gBAAA;GAAO,iBAAe;GAAU,SAAQ;GAAsB;;IAC7D,oBAAC,cAAA,EAAK,SAAS,WAAW,oBAAY,qBAAA,CAAe;;IAAE,WAAW,kBAAkB;;IAC7E;GACN;;AAIT,IAAA,kCAAe;ACNf,MAAaC,YAA6B,EACxC,QACA,iBACA,iBACA,YACA,UACA,SACA,WACA,UACA,OAAO,SAAS,QAChB,GAAG,WACC;AASJ,QACE,qBAAC,MAAA;EAAG,WATgB,WACpB,OAAY,cACZ,GACG,OAAY,4BAA4B,YAC1C,EACD,UACD;EAGwC;EAAsB,GAAI;aAC9D,oBAAoB,UAAU,KAAK,EACnC,cACC,oBAAC,iCAAA;GACW;GACD;GACQ;GACA;GACX;IACN,CAAA;IAT+C,OAWhD;;AC1DT,IAAA,qBD8De"}
+{"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"}

package/lib/Textarea.js

@@ -1,11 +1,11 @@
 import { t as uuid } from "./uuid.js";
-import { n as AnalyticsId, r as FormOnColor, s as LanguageLocales, t as AVERAGE_CHARACTER_WIDTH_PX } from "./constants2.js";
-import { n as useLanguage } from "./useLanguage.js";
-import { t as useIdWithFallback } from "./useIdWithFallback.js";
-import { t as getAriaDescribedBy } from "./accessibility.js";
+import { AnalyticsId, FormOnColor, LanguageLocales } from "./constants.js";
+import { useLanguage } from "./hooks/useLanguage.js";
+import { useIdWithFallback } from "./hooks/useIdWithFallback.js";
+import { getAriaDescribedBy } from "./utils/accessibility.js";
 import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
 import { n as renderLabel } from "./utils2.js";
-import { t as MaxCharacters_default } from "./MaxCharacters.js";
+import { t as MaxCharacters } from "./MaxCharacters.js";
 import classNames from "classnames";
 import { useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -13,7 +13,9 @@ import styles from "./components/Textarea/styles.module.scss";
 var HN_Designsystem_TextArea_en_GB_default = { characters: "characters" };
 var HN_Designsystem_TextArea_nb_NO_default = { characters: "tegn" };
 var HN_Designsystem_TextArea_nn_NO_default = { characters: "teikn" };
-const getResources = (language) => {
+//#endregion
+//#region src/components/Textarea/resourceHelper.ts
+var getResources = (language) => {
 	switch (language) {
 		case LanguageLocales.ENGLISH: return HN_Designsystem_TextArea_en_GB_default;
 		case LanguageLocales.NORWEGIAN_NYNORSK: return HN_Designsystem_TextArea_nn_NO_default;
@@ -21,8 +23,10 @@ const getResources = (language) => {
 		default: return HN_Designsystem_TextArea_nb_NO_default;
 	}
 };
-var getTextareaMaxWidth = (characters$3) => {
-	return `calc(${characters$3 * 12}px + 2rem + 16px + 4px)`;
+//#endregion
+//#region src/components/Textarea/Textarea.tsx
+var getTextareaMaxWidth = (characters) => {
+	return `calc(${characters * 12}px + 2rem + 16px + 4px)`;
 };
 var Textarea = (props) => {
 	const { maxCharacters, width, testId, defaultValue, marginBottom: gutterBottom, transparent, onColor = FormOnColor.onwhite, label, textareaId = uuid(), minRows = 3, maxRows = 10, grow, error, errorText, errorTextId: errorTextIdProp, errorWrapperClassName, autoFocus, disabled, name, autoComplete = "off", placeholder, readOnly, required, onChange, value, resources, ref, ...rest } = props;
@@ -116,7 +120,7 @@ var Textarea = (props) => {
 						value
 					})
 				}),
-				maxCharacters && /* @__PURE__ */ jsx(MaxCharacters_default, {
+				maxCharacters && /* @__PURE__ */ jsx(MaxCharacters, {
 					maxCharacters,
 					length: textareaInput.toString().length,
 					maxText: mergedResources.characters,
@@ -128,7 +132,10 @@ var Textarea = (props) => {
 	});
 };
 Textarea.displayName = "Textarea";
-var Textarea_default$1 = Textarea;
-export { Textarea_default$1 as t };
+//#endregion
+//#region src/components/Textarea/index.ts
+var Textarea_default = Textarea;
+//#endregion
+export { Textarea_default as t };
 
 //# sourceMappingURL=Textarea.js.map