@helsenorge/designsystem-react 13.0.0-workspaces-beta.0 → 13.0.0-workspaces-beta.1

package/lib/StepButtons.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepButtons.js","names":["StepButtons: React.FC<StepButtonsProps>"],"sources":["../src/components/StepButtons/StepButtons.tsx","../src/components/StepButtons/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { ButtonProps } from '../Button';\n\nimport styles from './styles.module.scss';\n\nexport interface StepButtonsProps {\n  /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n  backButton?: React.ReactElement<ButtonProps>;\n  /** Knapp for å gå videre. Vises med \"fill\" variant. */\n  forwardButton?: React.ReactElement<ButtonProps>;\n  /** Ekstra knapper. Valgfritt utseende. */\n  additionalButtons?: React.ReactElement<ButtonProps>[];\n  /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n  cancelButton?: React.ReactElement<ButtonProps>;\n  /** Knappene vil vises sticky nederst på skjermen. Default: false  */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const StepButtons: React.FC<StepButtonsProps> = props => {\n  const { backButton, forwardButton, additionalButtons, cancelButton, sticky = false, testId } = props;\n\n  const navigationClasses = classNames(styles.stepbuttons, sticky && styles['stepbuttons--has-sticky-buttons']);\n\n  if (backButton || forwardButton || additionalButtons || cancelButton) {\n    return (\n      <div className={navigationClasses} data-testid={testId} data-analyticsid={AnalyticsId.StepButtons}>\n        {(backButton || forwardButton) && (\n          <div className={styles.stepbuttons__buttons}>\n            {backButton &&\n              React.cloneElement(backButton, {\n                variant: 'outline',\n                wrapperClassName: classNames(styles['stepbuttons__button--back']),\n              })}\n            {forwardButton &&\n              React.cloneElement(forwardButton, {\n                variant: 'fill',\n                wrapperClassName: classNames(styles['stepbuttons__button--forward']),\n              })}\n          </div>\n        )}\n        {additionalButtons && (\n          <div className={classNames(styles.stepbuttons__buttons, styles['stepbuttons__buttons--additional'])}>{additionalButtons}</div>\n        )}\n        {cancelButton && (\n          <div className={styles.stepbuttons__buttons}>\n            {React.cloneElement(cancelButton, {\n              variant: 'borderless',\n            })}\n          </div>\n        )}\n      </div>\n    );\n  }\n  return null;\n};\n\nexport default StepButtons;\n","import StepButtons from './StepButtons';\nexport * from './StepButtons';\nexport default StepButtons;\n"],"mappings":";;;;;AAwBA,MAAaA,eAA0C,UAAS;CAC9D,MAAM,EAAE,YAAY,eAAe,mBAAmB,cAAc,SAAS,OAAO,WAAW;CAE/F,MAAM,oBAAoB,GAAW,OAAO,aAAa,UAAU,OAAO,mCAAmC;AAE7G,KAAI,cAAc,iBAAiB,qBAAqB,aACtD,QACE,qBAAC,OAAA;EAAI,WAAW;EAAmB,eAAa;EAAQ,oBAAkB,YAAY;;IAClF,cAAc,kBACd,qBAAC,OAAA;IAAI,WAAW,OAAO;eACpB,cACC,MAAM,aAAa,YAAY;KAC7B,SAAS;KACT,kBAAkB,GAAW,OAAO,6BAA6B;KAClE,CAAC,EACH,iBACC,MAAM,aAAa,eAAe;KAChC,SAAS;KACT,kBAAkB,GAAW,OAAO,gCAAgC;KACrE,CAAC,CAAA;KACA;GAEP,qBACC,oBAAC,OAAA;IAAI,WAAW,GAAW,OAAO,sBAAsB,OAAO,oCAAoC;cAAG;KAAwB;GAE/H,gBACC,oBAAC,OAAA;IAAI,WAAW,OAAO;cACpB,MAAM,aAAa,cAAc,EAChC,SAAS,cACV,CAAC;KACE;;GAEJ;AAGV,QAAO;;ACzDT,IAAA,wBD4De"}
+{"version":3,"file":"StepButtons.js","names":["StepButtons: React.FC<StepButtonsProps>"],"sources":["../src/components/StepButtons/StepButtons.tsx","../src/components/StepButtons/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { ButtonProps } from '../Button';\n\nimport styles from './styles.module.scss';\n\nexport interface StepButtonsProps {\n  /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n  backButton?: React.ReactElement<ButtonProps>;\n  /** Knapp for å gå videre. Vises med \"fill\" variant. */\n  forwardButton?: React.ReactElement<ButtonProps>;\n  /** Ekstra knapper. Valgfritt utseende. */\n  additionalButtons?: React.ReactElement<ButtonProps>[];\n  /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n  cancelButton?: React.ReactElement<ButtonProps>;\n  /** Knappene vil vises sticky nederst på skjermen. Default: false  */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const StepButtons: React.FC<StepButtonsProps> = props => {\n  const { backButton, forwardButton, additionalButtons, cancelButton, sticky = false, testId } = props;\n\n  const navigationClasses = classNames(styles.stepbuttons, sticky && styles['stepbuttons--has-sticky-buttons']);\n\n  if (backButton || forwardButton || additionalButtons || cancelButton) {\n    return (\n      <div className={navigationClasses} data-testid={testId} data-analyticsid={AnalyticsId.StepButtons}>\n        {(backButton || forwardButton) && (\n          <div className={styles.stepbuttons__buttons}>\n            {backButton &&\n              React.cloneElement(backButton, {\n                variant: 'outline',\n                wrapperClassName: classNames(styles['stepbuttons__button--back']),\n              })}\n            {forwardButton &&\n              React.cloneElement(forwardButton, {\n                variant: 'fill',\n                wrapperClassName: classNames(styles['stepbuttons__button--forward']),\n              })}\n          </div>\n        )}\n        {additionalButtons && (\n          <div className={classNames(styles.stepbuttons__buttons, styles['stepbuttons__buttons--additional'])}>{additionalButtons}</div>\n        )}\n        {cancelButton && (\n          <div className={styles.stepbuttons__buttons}>\n            {React.cloneElement(cancelButton, {\n              variant: 'borderless',\n            })}\n          </div>\n        )}\n      </div>\n    );\n  }\n  return null;\n};\n\nexport default StepButtons;\n","import StepButtons from './StepButtons';\nexport * from './StepButtons';\nexport default StepButtons;\n"],"mappings":";;;;;AAwBA,MAAaA,eAA0C,UAAS;CAC9D,MAAM,EAAE,YAAY,eAAe,mBAAmB,cAAc,SAAS,OAAO,WAAW;CAE/F,MAAM,oBAAoB,WAAW,OAAO,aAAa,UAAU,OAAO,mCAAmC;AAE7G,KAAI,cAAc,iBAAiB,qBAAqB,aACtD,QACE,qBAAC,OAAA;EAAI,WAAW;EAAmB,eAAa;EAAQ,oBAAkB,YAAY;;IAClF,cAAc,kBACd,qBAAC,OAAA;IAAI,WAAW,OAAO;eACpB,cACC,MAAM,aAAa,YAAY;KAC7B,SAAS;KACT,kBAAkB,WAAW,OAAO,6BAA6B;KAClE,CAAC,EACH,iBACC,MAAM,aAAa,eAAe;KAChC,SAAS;KACT,kBAAkB,WAAW,OAAO,gCAAgC;KACrE,CAAC,CAAA;KACA;GAEP,qBACC,oBAAC,OAAA;IAAI,WAAW,WAAW,OAAO,sBAAsB,OAAO,oCAAoC;cAAG;KAAwB;GAE/H,gBACC,oBAAC,OAAA;IAAI,WAAW,OAAO;cACpB,MAAM,aAAa,cAAc,EAChC,SAAS,cACV,CAAC;KACE;;GAEJ;AAGV,QAAO;;ACzDT,IAAA,wBD4De"}

package/lib/TabList.js

@@ -9,7 +9,7 @@ import { t as ChevronLeft_default } from "./ChevronLeft.js";
 import { t as ChevronRight_default } from "./ChevronRight.js";
 import { t as useRovingFocus } from "./useRovingFocus.js";
 import React, { useEffect, useRef } from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Tabs/TabList/styles.module.scss";
 var Tab = (props) => {
@@ -24,7 +24,7 @@ var TabItem = (props) => {
 		props.onTabListClick(props.index);
 		scrollToTab(props.index);
 	};
-	const tabButtonClasses = cn(styles["tab-list__tab"], styles[`tab-list__tab--${props.color}`], {
+	const tabButtonClasses = classNames(styles["tab-list__tab"], styles[`tab-list__tab--${props.color}`], {
 		[styles["tab-list__tab--selected"]]: isSelected,
 		[styles["tab-list__tab--not-selected"]]: !isSelected
 	});
@@ -96,7 +96,7 @@ var TabList = (props) => {
 	const listRef = useRef(null);
 	const tabRefs = useRef(React.Children.map(children, () => React.createRef()) || []);
 	useRovingFocus(onTabListClick, tabRefs, listRef, true);
-	const tablistClasses = cn(styles["tab-list"], styles[`tab-list--${onColor}`]);
+	const tablistClasses = classNames(styles["tab-list"], styles[`tab-list--${onColor}`]);
 	const getBackgroundColor = (onColor$1) => {
 		switch (onColor$1) {
 			case "onwhite": return "var(--color-base-background-white)";
@@ -139,14 +139,14 @@ var TabList = (props) => {
 		className: styles["tab-list-wrapper"],
 		children: [
 			shouldShowFadeStart() && /* @__PURE__ */ jsxs("div", {
-				className: cn(styles["tab-list__start-wrapper"]),
+				className: classNames(styles["tab-list__start-wrapper"]),
 				children: [/* @__PURE__ */ jsx(TabChevron_default, {
 					onClick: () => scrollInList("left"),
 					direction: "left",
 					backgroundColor: `${getBackgroundColor(onColor)}`,
 					ariaLabel: ariaLabelLeftButton
 				}), /* @__PURE__ */ jsx("div", {
-					className: cn(styles["tab-list__fade-start"]),
+					className: classNames(styles["tab-list__fade-start"]),
 					style: { backgroundColor: `${getBackgroundColor(onColor)}` }
 				})]
 			}),
@@ -169,9 +169,9 @@ var TabList = (props) => {
 				})
 			}),
 			shouldShowFadeEnd() && /* @__PURE__ */ jsxs("div", {
-				className: cn(styles["tab-list__end-wrapper"]),
+				className: classNames(styles["tab-list__end-wrapper"]),
 				children: [/* @__PURE__ */ jsx("div", {
-					className: cn(styles["tab-list__fade-end"]),
+					className: classNames(styles["tab-list__fade-end"]),
 					style: { backgroundColor: `${getBackgroundColor(onColor)}` }
 				}), /* @__PURE__ */ jsx(TabChevron_default, {
 					onClick: () => scrollInList("right"),
@@ -180,7 +180,7 @@ var TabList = (props) => {
 					ariaLabel: ariaLabelRightButton
 				})]
 			}),
-			/* @__PURE__ */ jsx("div", { className: cn(styles["tab-list__border"]) })
+			/* @__PURE__ */ jsx("div", { className: classNames(styles["tab-list__border"]) })
 		]
 	});
 };

package/lib/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","names":["Tab: React.FC<TabProps>","TabItem: React.FC<TabItemProps>","TabChevron: React.FC<TabChevronProps>","TabList: React.FC<TabListProps>"],"sources":["../src/components/Tabs/Tab.tsx","../src/components/Tabs/TabList/TabItem.tsx","../src/components/Tabs/TabList/TabChevron.tsx","../src/components/Tabs/TabList/TabList.tsx","../src/components/Tabs/TabList/index.ts"],"sourcesContent":["import React from 'react';\n\nimport { SvgIcon } from '../Icon';\nimport { 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, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { palette } from '../../../theme/palette';\nimport Icon, { IconSize } from '../../Icon';\nimport { IconName } from '../../Icons/IconNames';\nimport LazyIcon from '../../LazyIcon';\nimport { TabProps } from '../Tab';\nimport { TabsColors } from '../Tabs';\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.MutableRefObject<React.RefObject<HTMLButtonElement>[] | 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 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>(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 React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport TabItem from './TabItem';\nimport { useIsVisible } from '../../../hooks/useIsVisible';\nimport { useRovingFocus } from '../../../hooks/useRovingFocus';\nimport { isComponent } from '../../../utils/component';\nimport Tab, { TabProps } from '../Tab';\nimport { TabsColors, TabsOnColor } from '../Tabs';\nimport TabChevron from './TabChevron';\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":["Tab: React.FC<TabProps>","TabItem: React.FC<TabItemProps>","TabChevron: React.FC<TabChevronProps>","TabList: React.FC<TabListProps>"],"sources":["../src/components/Tabs/Tab.tsx","../src/components/Tabs/TabList/TabItem.tsx","../src/components/Tabs/TabList/TabChevron.tsx","../src/components/Tabs/TabList/TabList.tsx","../src/components/Tabs/TabList/index.ts"],"sourcesContent":["import React from 'react';\n\nimport { SvgIcon } from '../Icon';\nimport { 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, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { palette } from '../../../theme/palette';\nimport Icon, { IconSize } from '../../Icon';\nimport { IconName } from '../../Icons/IconNames';\nimport LazyIcon from '../../LazyIcon';\nimport { TabProps } from '../Tab';\nimport { TabsColors } from '../Tabs';\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.MutableRefObject<React.RefObject<HTMLButtonElement>[] | 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 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>(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 React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport TabItem from './TabItem';\nimport { useIsVisible } from '../../../hooks/useIsVisible';\nimport { useRovingFocus } from '../../../hooks/useRovingFocus';\nimport { isComponent } from '../../../utils/component';\nimport Tab, { TabProps } from '../Tab';\nimport { TabsColors, TabsOnColor } from '../Tabs';\nimport TabChevron from './TabChevron';\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,12 +1,12 @@
 import React, { forwardRef } from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/Tabs/TabPanel/styles.module.scss";
 var TabPanel = forwardRef((props, ref) => {
 	const { children, color = "white", isFirst = false, style } = props;
 	return /* @__PURE__ */ jsx("div", {
 		ref,
-		className: cn(styles["tab-panel"], styles[`tab-panel--${color}`], { [styles["tab-panel--first"]]: isFirst }),
+		className: classNames(styles["tab-panel"], styles[`tab-panel--${color}`], { [styles["tab-panel--first"]]: isFirst }),
 		style,
 		children: /* @__PURE__ */ jsx("div", { children })
 	});

package/lib/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","names":[],"sources":["../src/components/Tabs/TabPanel/TabPanel.tsx","../src/components/Tabs/TabPanel/index.ts"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { 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}\n\nconst TabPanel = forwardRef<HTMLDivElement, TabPanelProps>((props, ref) => {\n  const { children, color = 'white', isFirst = false, style } = 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,WAAW,YAA2C,OAAO,QAAQ;CACzE,MAAM,EAAE,UAAU,QAAQ,SAAS,UAAU,OAAO,UAAU;AAM9D,QACE,oBAAC,OAAA;EAAS;EAAK,WALO,GAAW,OAAO,cAAc,OAAO,cAAc,UAAU,GACpF,OAAO,sBAAsB,SAC/B,CAAC;EAGkD;YAChD,oBAAC,OAAA,EAAK,UAAA,CAAe;GACjB;EAER;AAEF,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 React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { 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}\n\nconst TabPanel = forwardRef<HTMLDivElement, TabPanelProps>((props, ref) => {\n  const { children, color = 'white', isFirst = false, style } = 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,WAAW,YAA2C,OAAO,QAAQ;CACzE,MAAM,EAAE,UAAU,QAAQ,SAAS,UAAU,OAAO,UAAU;AAM9D,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;EAER;AAEF,SAAS,cAAc;AC3BvB,IAAA,qBD4Be"}

package/lib/Table.js

@@ -6,11 +6,11 @@ import { t as useLayoutEvent } from "./useLayoutEvent.js";
 import { t as HorizontalScroll_default } from "./HorizontalScroll.js";
 import { t as isTouchDevice } from "./device.js";
 import React, { useEffect, useRef, useState } from "react";
-import cn from "classnames";
+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";
 var configUsesCss = (config) => config.variant === ResponsiveTableVariant.centeredoverflow || config.variant === ResponsiveTableVariant.block;
-var mapConfigToClass = (config) => config.variant === "centeredoverflow" || config.variant === "block" ? tableStyles[`table--${config.variant}-${config.breakpoint}`] : "";
+var mapConfigToClass = (config) => config.variant === "centeredoverflow" || config.variant === "block" ? styles[`table--${config.variant}-${config.breakpoint}`] : "";
 var sortByBreakpointsDescending = (a, b) => Breakpoint[a.breakpoint] - Breakpoint[b.breakpoint];
 var isValidForCurrentBreakpoint = (config, breakpoint) => Breakpoint[config.breakpoint] >= breakpoint;
 var getConfigForBreakpoint = (config, breakpoint) => {
@@ -100,7 +100,7 @@ const Table = ({ id, testId, className, children, breakpointConfig = defaultConf
 	const tableStyle = currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ? getCenteredOverflowTableStyle(parentWidth, tableWidth) : void 0;
 	const breakpointClass = getBreakpointClass(currentConfig);
 	const table = /* @__PURE__ */ jsx("table", {
-		className: cn(tableStyles.table, breakpointClass, className),
+		className: classNames(styles.table, breakpointClass, className),
 		id,
 		"data-testid": testId,
 		"data-analyticsid": AnalyticsId.Table,

package/lib/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","names":["defaultConfig: BreakpointConfig[]","simpleConfig: BreakpointConfig[]","Table: React.FC<Props>"],"sources":["../src/components/Table/utils.ts","../src/components/Table/Table.tsx"],"sourcesContent":["import React from 'react';\n\nimport { BreakpointConfig, ResponsiveTableVariant } from './Table';\nimport { Breakpoint } from '../../hooks/useBreakpoint';\nimport { isTouchDevice } from '../../utils/device';\n\nimport styles from './styles.module.scss';\n\n/**\n * Sjekk om det skal brukes CSS for å bestemme responsivt utseende på dette breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns true om breakpoint bruker CSS\n */\nconst configUsesCss = (config: BreakpointConfig): boolean =>\n  config.variant === ResponsiveTableVariant.centeredoverflow || config.variant === ResponsiveTableVariant.block;\n\n/**\n * Lag klassenavn for CSS-config\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns CSS-klassenavn\n */\nconst mapConfigToClass = (config: BreakpointConfig): string =>\n  config.variant === 'centeredoverflow' || config.variant === 'block' ? styles[`table--${config.variant}-${config.breakpoint}`] : '';\n\n/**\n * Sorter konfigurasjon etter breakpoints, fra største til minste\n * @param a Konfigurasjon for responsiv oppførsel\n * @param b Konfigurasjon for responsiv oppførsel\n * @returns Sortert liste\n */\nconst sortByBreakpointsDescending = (a: BreakpointConfig, b: BreakpointConfig): number =>\n  Breakpoint[a.breakpoint] - Breakpoint[b.breakpoint];\n\n/**\n * Sjekk om en konfigurasjon skal brukes for nåværende breakpoint\n * @param a Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns true dersom config skal brukes for breakpointet\n */\nconst isValidForCurrentBreakpoint = (config: BreakpointConfig, breakpoint: Breakpoint): boolean =>\n  Breakpoint[config.breakpoint] >= breakpoint;\n\n/**\n * Finn konfigurasjon for nåværende breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns Konfigurasjon for responsiv oppførsel\n */\nconst getConfigForBreakpoint = (config: BreakpointConfig | BreakpointConfig[], breakpoint: Breakpoint): BreakpointConfig | undefined => {\n  if (Array.isArray(config)) {\n    config.sort(sortByBreakpointsDescending);\n\n    return config.find(x => isValidForCurrentBreakpoint(x, breakpoint));\n  } else if (config && isValidForCurrentBreakpoint(config, breakpoint)) {\n    return config;\n  }\n};\n\n/**\n * Finn konfigurasjon for nåværende breakpoint og tabellbredde\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @param tableWidth Bredde på tabell i px\n * @returns Konfigurasjon for responsiv oppførsel uten fallbackVariant\n */\nexport const getCurrentConfig = (\n  config: BreakpointConfig | BreakpointConfig[],\n  breakpoint: Breakpoint,\n  tableWidth: number,\n  windowWidth: number\n): Omit<BreakpointConfig, 'fallbackVariant'> | undefined => {\n  const breakpointConfig = getConfigForBreakpoint(config, breakpoint);\n  const canUseHorizontalScroll = isTouchDevice();\n  const canUseCenteredOverflow = tableWidth <= windowWidth;\n\n  if (!breakpointConfig) {\n    return;\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: canUseHorizontalScroll ? ResponsiveTableVariant.horizontalscroll : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: canUseCenteredOverflow ? ResponsiveTableVariant.centeredoverflow : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  return breakpointConfig;\n};\n\n/**\n * Finn klassenavn for responsiv oppførsel\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns Klassenavn\n */\nexport const getBreakpointClass = (config?: BreakpointConfig): string | undefined =>\n  config && configUsesCss(config) ? mapConfigToClass(config) : undefined;\n\n/**\n * Finn riktig posisjon for horisontal sentrering av tabell som skal vises \"centeredoverflow\"\n * @param parentWidth Bredde på element som tabellen ligger i\n * @param tableWidth Bredde på tabellen\n * @returns Styling som posisjonerer tabellen riktig\n */\nexport const getCenteredOverflowTableStyle = (parentWidth: number, tableWidth: number): React.CSSProperties | undefined => {\n  if (parentWidth >= tableWidth) {\n    return;\n  }\n\n  const COLUMN_GUTTER_WIDTH_PX = 8;\n\n  return { left: `${(parentWidth - tableWidth) / 2 - COLUMN_GUTTER_WIDTH_PX}px` };\n};\n","import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getCurrentConfig, getBreakpointClass, getCenteredOverflowTableStyle } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport HorizontalScroll from '../HorizontalScroll';\n\nimport styles from './styles.module.scss';\n\nexport enum ResponsiveTableVariant {\n  /** No handling responsive behaviour. Default. */\n  none = 'none',\n  /** Overflow parent container to the left and right while remaining centered horizontally. */\n  centeredoverflow = 'centeredoverflow',\n  /** Show horizontal scrollbar when table is too big for the screen. */\n  horizontalscroll = 'horizontalscroll',\n  /** Collapse to two columns. */\n  block = 'block',\n}\nexport enum ModeType {\n  compact = 'compact',\n  normal = 'normal',\n}\nexport interface BreakpointConfig {\n  /** Breakpoint at which responsive behaviour will be applied. The table component uses a \"desktop first\" approach. */\n  breakpoint: keyof typeof Breakpoint;\n  /** Desired behaviour on this breakpoint and all smaller screens. */\n  variant: keyof typeof ResponsiveTableVariant;\n  /** If variant is horizontallscroll, use a fallback instead of device is not a touch device. */\n  fallbackVariant?: keyof typeof ResponsiveTableVariant;\n}\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'table'>, 'style'> {\n  /** Unique ID */\n  id?: string;\n  /** Id used for testing */\n  testId?: string;\n  /** Customize how the table behaves on various screen widths */\n  breakpointConfig?: BreakpointConfig | BreakpointConfig[];\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table. Use TableHead and TableBody */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n  /** Sets aria-label of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n  scrollAriaLabel?: string;\n  /** Sets aria-labelledby of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n  scrollAriaLabelledById?: string;\n}\n\nexport const defaultConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n];\n\nexport const simpleConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n  {\n    breakpoint: 'sm',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.block,\n  },\n];\n\nexport const Table: React.FC<Props> = ({\n  id,\n  testId,\n  className,\n  children,\n  breakpointConfig = defaultConfig,\n  mode = ModeType.normal,\n  scrollAriaLabel,\n  scrollAriaLabelledById,\n  ...rest\n}) => {\n  const [currentConfig, setCurrentConfig] = useState<BreakpointConfig>();\n  const [tableWidth, setTableWidth] = useState<number>(0);\n  const [parentWidth, setParentWidth] = useState<number>(0);\n  const [windowWidth, setWindowWidth] = useState(window.innerWidth);\n  const tableRef = useRef<HTMLTableElement>(null);\n  const tableIsVisible = useIsVisible(tableRef, 0);\n  const breakpoint = useBreakpoint();\n\n  useEffect(() => {\n    setCurrentConfig(getCurrentConfig(breakpointConfig, breakpoint, tableWidth, windowWidth));\n  }, [breakpointConfig, breakpoint, tableWidth, windowWidth]);\n\n  useEffect(() => {\n    if (\n      currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ||\n      currentConfig?.variant === ResponsiveTableVariant.horizontalscroll\n    ) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n    if (currentConfig?.variant === ResponsiveTableVariant.centeredoverflow) {\n      setParentWidth(tableRef.current?.parentElement?.getBoundingClientRect().width ?? 0);\n    }\n  }, [currentConfig, breakpoint]);\n\n  useLayoutEvent(() => setWindowWidth(window.innerWidth), ['resize'], 100);\n\n  useEffect(() => {\n    if (tableWidth === 0 && tableIsVisible) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n  }, [tableWidth, tableIsVisible]);\n\n  const tableStyle =\n    currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ? getCenteredOverflowTableStyle(parentWidth, tableWidth) : undefined;\n\n  const breakpointClass = getBreakpointClass(currentConfig);\n  const tableClass = classNames(styles.table, breakpointClass, className);\n\n  const table = (\n    <table\n      className={tableClass}\n      id={id}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Table}\n      ref={tableRef}\n      style={tableStyle}\n      {...rest}\n    >\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n    </table>\n  );\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: scrollAriaLabel, id: scrollAriaLabelledById });\n\n  if (currentConfig?.variant === ResponsiveTableVariant.horizontalscroll) {\n    return (\n      <HorizontalScroll childWidth={tableWidth} testId=\"horizontal-scroll\" {...ariaLabelAttributes}>\n        {table}\n      </HorizontalScroll>\n    );\n  }\n\n  return table;\n};\n\nexport default Table;\n"],"mappings":"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"}
+{"version":3,"file":"Table.js","names":["defaultConfig: BreakpointConfig[]","simpleConfig: BreakpointConfig[]","Table: React.FC<Props>"],"sources":["../src/components/Table/utils.ts","../src/components/Table/Table.tsx"],"sourcesContent":["import React from 'react';\n\nimport { BreakpointConfig, ResponsiveTableVariant } from './Table';\nimport { Breakpoint } from '../../hooks/useBreakpoint';\nimport { isTouchDevice } from '../../utils/device';\n\nimport styles from './styles.module.scss';\n\n/**\n * Sjekk om det skal brukes CSS for å bestemme responsivt utseende på dette breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns true om breakpoint bruker CSS\n */\nconst configUsesCss = (config: BreakpointConfig): boolean =>\n  config.variant === ResponsiveTableVariant.centeredoverflow || config.variant === ResponsiveTableVariant.block;\n\n/**\n * Lag klassenavn for CSS-config\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns CSS-klassenavn\n */\nconst mapConfigToClass = (config: BreakpointConfig): string =>\n  config.variant === 'centeredoverflow' || config.variant === 'block' ? styles[`table--${config.variant}-${config.breakpoint}`] : '';\n\n/**\n * Sorter konfigurasjon etter breakpoints, fra største til minste\n * @param a Konfigurasjon for responsiv oppførsel\n * @param b Konfigurasjon for responsiv oppførsel\n * @returns Sortert liste\n */\nconst sortByBreakpointsDescending = (a: BreakpointConfig, b: BreakpointConfig): number =>\n  Breakpoint[a.breakpoint] - Breakpoint[b.breakpoint];\n\n/**\n * Sjekk om en konfigurasjon skal brukes for nåværende breakpoint\n * @param a Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns true dersom config skal brukes for breakpointet\n */\nconst isValidForCurrentBreakpoint = (config: BreakpointConfig, breakpoint: Breakpoint): boolean =>\n  Breakpoint[config.breakpoint] >= breakpoint;\n\n/**\n * Finn konfigurasjon for nåværende breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns Konfigurasjon for responsiv oppførsel\n */\nconst getConfigForBreakpoint = (config: BreakpointConfig | BreakpointConfig[], breakpoint: Breakpoint): BreakpointConfig | undefined => {\n  if (Array.isArray(config)) {\n    config.sort(sortByBreakpointsDescending);\n\n    return config.find(x => isValidForCurrentBreakpoint(x, breakpoint));\n  } else if (config && isValidForCurrentBreakpoint(config, breakpoint)) {\n    return config;\n  }\n};\n\n/**\n * Finn konfigurasjon for nåværende breakpoint og tabellbredde\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @param tableWidth Bredde på tabell i px\n * @returns Konfigurasjon for responsiv oppførsel uten fallbackVariant\n */\nexport const getCurrentConfig = (\n  config: BreakpointConfig | BreakpointConfig[],\n  breakpoint: Breakpoint,\n  tableWidth: number,\n  windowWidth: number\n): Omit<BreakpointConfig, 'fallbackVariant'> | undefined => {\n  const breakpointConfig = getConfigForBreakpoint(config, breakpoint);\n  const canUseHorizontalScroll = isTouchDevice();\n  const canUseCenteredOverflow = tableWidth <= windowWidth;\n\n  if (!breakpointConfig) {\n    return;\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: canUseHorizontalScroll ? ResponsiveTableVariant.horizontalscroll : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: canUseCenteredOverflow ? ResponsiveTableVariant.centeredoverflow : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  return breakpointConfig;\n};\n\n/**\n * Finn klassenavn for responsiv oppførsel\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns Klassenavn\n */\nexport const getBreakpointClass = (config?: BreakpointConfig): string | undefined =>\n  config && configUsesCss(config) ? mapConfigToClass(config) : undefined;\n\n/**\n * Finn riktig posisjon for horisontal sentrering av tabell som skal vises \"centeredoverflow\"\n * @param parentWidth Bredde på element som tabellen ligger i\n * @param tableWidth Bredde på tabellen\n * @returns Styling som posisjonerer tabellen riktig\n */\nexport const getCenteredOverflowTableStyle = (parentWidth: number, tableWidth: number): React.CSSProperties | undefined => {\n  if (parentWidth >= tableWidth) {\n    return;\n  }\n\n  const COLUMN_GUTTER_WIDTH_PX = 8;\n\n  return { left: `${(parentWidth - tableWidth) / 2 - COLUMN_GUTTER_WIDTH_PX}px` };\n};\n","import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getCurrentConfig, getBreakpointClass, getCenteredOverflowTableStyle } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport HorizontalScroll from '../HorizontalScroll';\n\nimport styles from './styles.module.scss';\n\nexport enum ResponsiveTableVariant {\n  /** No handling responsive behaviour. Default. */\n  none = 'none',\n  /** Overflow parent container to the left and right while remaining centered horizontally. */\n  centeredoverflow = 'centeredoverflow',\n  /** Show horizontal scrollbar when table is too big for the screen. */\n  horizontalscroll = 'horizontalscroll',\n  /** Collapse to two columns. */\n  block = 'block',\n}\nexport enum ModeType {\n  compact = 'compact',\n  normal = 'normal',\n}\nexport interface BreakpointConfig {\n  /** Breakpoint at which responsive behaviour will be applied. The table component uses a \"desktop first\" approach. */\n  breakpoint: keyof typeof Breakpoint;\n  /** Desired behaviour on this breakpoint and all smaller screens. */\n  variant: keyof typeof ResponsiveTableVariant;\n  /** If variant is horizontallscroll, use a fallback instead of device is not a touch device. */\n  fallbackVariant?: keyof typeof ResponsiveTableVariant;\n}\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'table'>, 'style'> {\n  /** Unique ID */\n  id?: string;\n  /** Id used for testing */\n  testId?: string;\n  /** Customize how the table behaves on various screen widths */\n  breakpointConfig?: BreakpointConfig | BreakpointConfig[];\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table. Use TableHead and TableBody */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n  /** Sets aria-label of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n  scrollAriaLabel?: string;\n  /** Sets aria-labelledby of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n  scrollAriaLabelledById?: string;\n}\n\nexport const defaultConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n];\n\nexport const simpleConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n  {\n    breakpoint: 'sm',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.block,\n  },\n];\n\nexport const Table: React.FC<Props> = ({\n  id,\n  testId,\n  className,\n  children,\n  breakpointConfig = defaultConfig,\n  mode = ModeType.normal,\n  scrollAriaLabel,\n  scrollAriaLabelledById,\n  ...rest\n}) => {\n  const [currentConfig, setCurrentConfig] = useState<BreakpointConfig>();\n  const [tableWidth, setTableWidth] = useState<number>(0);\n  const [parentWidth, setParentWidth] = useState<number>(0);\n  const [windowWidth, setWindowWidth] = useState(window.innerWidth);\n  const tableRef = useRef<HTMLTableElement>(null);\n  const tableIsVisible = useIsVisible(tableRef, 0);\n  const breakpoint = useBreakpoint();\n\n  useEffect(() => {\n    setCurrentConfig(getCurrentConfig(breakpointConfig, breakpoint, tableWidth, windowWidth));\n  }, [breakpointConfig, breakpoint, tableWidth, windowWidth]);\n\n  useEffect(() => {\n    if (\n      currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ||\n      currentConfig?.variant === ResponsiveTableVariant.horizontalscroll\n    ) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n    if (currentConfig?.variant === ResponsiveTableVariant.centeredoverflow) {\n      setParentWidth(tableRef.current?.parentElement?.getBoundingClientRect().width ?? 0);\n    }\n  }, [currentConfig, breakpoint]);\n\n  useLayoutEvent(() => setWindowWidth(window.innerWidth), ['resize'], 100);\n\n  useEffect(() => {\n    if (tableWidth === 0 && tableIsVisible) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n  }, [tableWidth, tableIsVisible]);\n\n  const tableStyle =\n    currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ? getCenteredOverflowTableStyle(parentWidth, tableWidth) : undefined;\n\n  const breakpointClass = getBreakpointClass(currentConfig);\n  const tableClass = classNames(styles.table, breakpointClass, className);\n\n  const table = (\n    <table\n      className={tableClass}\n      id={id}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Table}\n      ref={tableRef}\n      style={tableStyle}\n      {...rest}\n    >\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n    </table>\n  );\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: scrollAriaLabel, id: scrollAriaLabelledById });\n\n  if (currentConfig?.variant === ResponsiveTableVariant.horizontalscroll) {\n    return (\n      <HorizontalScroll childWidth={tableWidth} testId=\"horizontal-scroll\" {...ariaLabelAttributes}>\n        {table}\n      </HorizontalScroll>\n    );\n  }\n\n  return table;\n};\n\nexport default Table;\n"],"mappings":"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"}

package/lib/TableBody.js

@@ -1,11 +1,11 @@
 import { t as ModeType } from "./Table.js";
 import React from "react";
-import cn from "classnames";
+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";
 const TableBody = ({ className, children, mode = ModeType.normal,...rest }) => {
 	return /* @__PURE__ */ jsx("tbody", {
-		className: cn(tableStyles["table-body"], className),
+		className: classNames(styles["table-body"], className),
 		...rest,
 		children: React.Children.map(children, (child) => React.isValidElement(child) && React.cloneElement(child, { mode }))
 	});

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 React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\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      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n    </tbody>\n  );\n};\n\nexport default TableBody;\n","import TableBody from './TableBody';\nexport * from './TableBody';\nexport default TableBody;\n"],"mappings":";;;;;AAgBA,MAAaA,aAA8B,EAAE,WAAW,UAAU,OAAO,SAAS,OAAQ,GAAG,WAAW;AAEtG,QACE,oBAAC,SAAA;EAAM,WAFgB,GAAW,YAAY,eAAe,UAAU;EAEnC,GAAI;YACrC,MAAM,SAAS,IAAI,WAAU,UAAS,MAAM,eAAoC,MAAM,IAAI,MAAM,aAAa,OAAO,EAAE,MAAM,CAAC,CAAC;GACzH;;ACnBZ,IAAA,sBDuBe"}
+{"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 React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\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      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n    </tbody>\n  );\n};\n\nexport default TableBody;\n","import TableBody from './TableBody';\nexport * from './TableBody';\nexport default TableBody;\n"],"mappings":";;;;;AAgBA,MAAaA,aAA8B,EAAE,WAAW,UAAU,OAAO,SAAS,OAAQ,GAAG,WAAW;AAEtG,QACE,oBAAC,SAAA;EAAM,WAFgB,WAAW,OAAY,eAAe,UAAU;EAEnC,GAAI;YACrC,MAAM,SAAS,IAAI,WAAU,UAAS,MAAM,eAAoC,MAAM,IAAI,MAAM,aAAa,OAAO,EAAE,MAAM,CAAC,CAAC;GACzH;;ACnBZ,IAAA,sBDuBe"}

package/lib/TableCell.js

@@ -1,8 +1,8 @@
 import { t as ModeType } from "./Table.js";
 import React from "react";
-import cn from "classnames";
+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";
 let TextAlign = /* @__PURE__ */ function(TextAlign$1) {
 	TextAlign$1["left"] = "left";
 	TextAlign$1["center"] = "center";
@@ -11,7 +11,7 @@ let TextAlign = /* @__PURE__ */ function(TextAlign$1) {
 }({});
 const TableCell = ({ nowrap = false, textAlign = TextAlign.left, dataLabel, children, className, testId, mode = ModeType.normal,...rest }) => {
 	return /* @__PURE__ */ jsx("td", {
-		className: cn(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":["TableCell: React.FC<Props>"],"sources":["../src/components/Table/TableCell/TableCell.tsx","../src/components/Table/TableCell/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport enum TextAlign {\n  left = 'left',\n  center = 'center',\n  right = 'right',\n}\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":";;;;;AAOA,IAAY,YAAA,yBAAA,aAAL;AACL,aAAA,UAAA;AACA,aAAA,YAAA;AACA,aAAA,WAAA;;;AAoBF,MAAaA,aAA8B,EACzC,SAAS,OACT,YAAY,UAAU,MACtB,WACA,UACA,WACA,QACA,OAAO,SAAS,OAChB,GAAG,WACC;AAUJ,QACE,oBAAC,MAAA;EAAG,WAViB,GACrB,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,UACD;EAGgC,cAAY;EAAW,eAAa;EAAQ,GAAI;EAC5E;GACE;;AClDT,IAAA,sBDsDe"}
+{"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 React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport enum TextAlign {\n  left = 'left',\n  center = 'center',\n  right = 'right',\n}\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":";;;;;AAOA,IAAY,YAAA,yBAAA,aAAL;AACL,aAAA,UAAA;AACA,aAAA,YAAA;AACA,aAAA,WAAA;;;AAoBF,MAAaA,aAA8B,EACzC,SAAS,OACT,YAAY,UAAU,MACtB,WACA,UACA,WACA,QACA,OAAO,SAAS,OAChB,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;;AClDT,IAAA,sBDsDe"}

package/lib/TableExpandedRow.js

@@ -3,18 +3,18 @@ import { t as Button_default } from "./Button.js";
 import { t as ChevronUp_default } from "./ChevronUp.js";
 import { t as ModeType } from "./Table.js";
 import React from "react";
-import cn from "classnames";
+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";
 const TableExpandedRow = ({ numberOfColumns, expanded, hideDetailsText, toggleClick, children, className, mode = ModeType.normal, id }) => {
 	return /* @__PURE__ */ jsx("tr", {
-		className: cn(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: cn(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: cn(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 tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\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,GACpB,YAAY,wBACZ,GAAG,YAAY,mCAAmC,UAAU,EAC5D,UACD;EAQmC;YAChC,oBAAC,MAAA;GAAG,SAAS;GAAiB,WARX,GAAW,YAAY,gBAAgB,WAAW,GACtE,YAAY,0BAA0B,SAAS,SAAS,SAC1D,CAAC;aAOI,qBAAC,OAAA;IAAI,WALY,GAAW,YAAY,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 tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\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"}

package/lib/TableExpanderCell.js

@@ -4,11 +4,11 @@ import { t as ChevronDown_default } from "./ChevronDown.js";
 import { t as ChevronUp_default } from "./ChevronUp.js";
 import { t as ModeType } from "./Table.js";
 import React from "react";
-import cn from "classnames";
+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";
 const TableExpanderCell = ({ expandableRowId, hideDetailsText, showDetailsText, expanded, className, mode = ModeType.normal }) => {
-	const tableCellClass = cn(tableStyles["table__cell"], tableStyles["table__cell-expander"], className, { [tableStyles["table__cell--compact"]]: mode === ModeType.compact });
+	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;
 	return /* @__PURE__ */ jsx("td", {
 		className: tableCellClass,

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 React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\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":";;;;;;;;;AA0BA,MAAa,qBAAqB,EAChC,iBACA,iBACA,iBACA,UACA,WACA,OAAO,SAAS,aACc;CAC9B,MAAM,iBAAiB,GAAW,YAAY,gBAAgB,YAAY,yBAAyB,WAAW,GAC3G,YAAY,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;;AC/CT,IAAA,8BDmDe"}
+{"version":3,"file":"TableExpanderCell.js","names":[],"sources":["../src/components/Table/TableExpanderCell/TableExpanderCell.tsx","../src/components/Table/TableExpanderCell/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\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":";;;;;;;;;AA0BA,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;;AC/CT,IAAA,8BDmDe"}

package/lib/TableHead.js

@@ -1,8 +1,8 @@
 import { t as ModeType } from "./Table.js";
 import React from "react";
-import cn from "classnames";
+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";
 let HeaderCategory = /* @__PURE__ */ function(HeaderCategory$1) {
 	HeaderCategory$1["normal"] = "normal";
 	HeaderCategory$1["transparent"] = "transparent";
@@ -11,11 +11,11 @@ let HeaderCategory = /* @__PURE__ */ function(HeaderCategory$1) {
 }({});
 const TableHead = ({ category = HeaderCategory.normal, className, children, mode,...rest }) => {
 	return /* @__PURE__ */ jsx("thead", {
-		className: cn(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: React.Children.map(children, (child) => React.isValidElement(child) && React.cloneElement(child, { mode }))

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 React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport enum HeaderCategory {\n  normal = 'normal',\n  transparent = 'transparent',\n  sortable = 'sortable',\n}\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      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n    </thead>\n  );\n};\n\nexport default TableHead;\n","import TableHead from './TableHead';\nexport * from './TableHead';\nexport default TableHead;\n"],"mappings":";;;;;AAOA,IAAY,iBAAA,yBAAA,kBAAL;AACL,kBAAA,YAAA;AACA,kBAAA,iBAAA;AACA,kBAAA,cAAA;;;AAcF,MAAaA,aAA8B,EAAE,WAAW,eAAe,QAAQ,WAAW,UAAU,KAAM,GAAG,WAAW;AAYtH,QACE,oBAAC,SAAA;EAAM,WAZc,GACrB,YAAY,gBACZ;IACG,YAAY,yBAAyB,aAAa,eAAe;IACjE,YAAY,8BAA8B,aAAa,eAAe;IACtE,YAAY,2BAA2B,YAAY,eAAe;IAClE,YAAY,0BAA0B,QAAQ,SAAS;GACzD,EACD,UACD;EAGmC,GAAI;YACnC,MAAM,SAAS,IAAI,WAAU,UAAS,MAAM,eAAoC,MAAM,IAAI,MAAM,aAAa,OAAO,EAAE,MAAM,CAAC,CAAC;GACzH;;ACrCZ,IAAA,sBDyCe"}
+{"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 React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport enum HeaderCategory {\n  normal = 'normal',\n  transparent = 'transparent',\n  sortable = 'sortable',\n}\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      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n    </thead>\n  );\n};\n\nexport default TableHead;\n","import TableHead from './TableHead';\nexport * from './TableHead';\nexport default TableHead;\n"],"mappings":";;;;;AAOA,IAAY,iBAAA,yBAAA,kBAAL;AACL,kBAAA,YAAA;AACA,kBAAA,iBAAA;AACA,kBAAA,cAAA;;;AAcF,MAAaA,aAA8B,EAAE,WAAW,eAAe,QAAQ,WAAW,UAAU,KAAM,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,MAAM,SAAS,IAAI,WAAU,UAAS,MAAM,eAAoC,MAAM,IAAI,MAAM,aAAa,OAAO,EAAE,MAAM,CAAC,CAAC;GACzH;;ACrCZ,IAAA,sBDyCe"}

package/lib/TableHeadCell.js

@@ -4,16 +4,16 @@ import { t as ArrowDown_default } from "./ArrowDown.js";
 import { t as ArrowUp_default } from "./ArrowUp.js";
 import { t as ModeType } from "./Table.js";
 import React from "react";
-import cn from "classnames";
+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";
 let SortDirection = /* @__PURE__ */ function(SortDirection$1) {
 	SortDirection$1["asc"] = "asc";
 	SortDirection$1["desc"] = "desc";
 	return SortDirection$1;
 }({});
 const TableHeadCell = ({ sortable, onClick, className, children, sortDir, mode = ModeType.normal, scope = "col",...rest }) => {
-	const tableHeadCellDefaultClass = cn(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,
@@ -21,9 +21,9 @@ const TableHeadCell = ({ sortable, onClick, className, children, sortDir, mode =
 		...rest,
 		children
 	});
-	const sortableClasses = cn(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_default : ArrowUp_default,
 			size: IconSize.XXSmall
@@ -43,7 +43,7 @@ const TableHeadCell = ({ sortable, onClick, className, children, sortDir, mode =
 		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":["TableHeadCell: React.FC<Props>"],"sources":["../src/components/Table/TableHeadCell/TableHeadCell.tsx","../src/components/Table/TableHeadCell/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from '../../Icon';\nimport ArrowDown from '../../Icons/ArrowDown';\nimport ArrowUp from '../../Icons/ArrowUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport enum SortDirection {\n  asc = 'asc',\n  desc = 'desc',\n}\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":";;;;;;;;;AAUA,IAAY,gBAAA,yBAAA,iBAAL;AACL,iBAAA,SAAA;AACA,iBAAA,UAAA;;;AAkBF,MAAaA,iBAAkC,EAC7C,UACA,SACA,WACA,UACA,SACA,OAAO,SAAS,QAChB,QAAQ,MACR,GAAG,WACC;CACJ,MAAM,4BAA4B,GAAW,YAAY,qBAAqB,WAAW,GACtF,YAAY,+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,GAAW,2BAA2B,YAAY,+BAA+B,UAAU;CAEnH,MAAM,uBACJ,WACE,oBAAC,OAAA;EAAI,WAAW,YAAY;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,YAAY;GAAuB,gBAAc,UAAU,CAAC,CAAC,UAAU,KAAA;cACvH,gBAAgB,EAChB,SAAA;IACM;GACN;;AC9ET,IAAA,0BDkFe"}
+{"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 React from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from '../../Icon';\nimport ArrowDown from '../../Icons/ArrowDown';\nimport ArrowUp from '../../Icons/ArrowUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport enum SortDirection {\n  asc = 'asc',\n  desc = 'desc',\n}\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":";;;;;;;;;AAUA,IAAY,gBAAA,yBAAA,iBAAL;AACL,iBAAA,SAAA;AACA,iBAAA,UAAA;;;AAkBF,MAAaA,iBAAkC,EAC7C,UACA,SACA,WACA,UACA,SACA,OAAO,SAAS,QAChB,QAAQ,MACR,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;;AC9ET,IAAA,0BDkFe"}

package/lib/TableRow.js

@@ -4,14 +4,14 @@ import { t as ChevronDown_default } from "./ChevronDown.js";
 import { t as ChevronUp_default } from "./ChevronUp.js";
 import { t as ModeType } from "./Table.js";
 import React from "react";
-import cn from "classnames";
+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";
 var TableExpanderCellMobile = ({ expanded, onClick, hideDetailsText, showDetailsText, mode = ModeType.normal }) => {
 	return /* @__PURE__ */ jsx("td", {
-		className: cn(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,
@@ -28,7 +28,7 @@ var TableExpanderCellMobile = ({ expanded, onClick, hideDetailsText, showDetails
 var TableExpanderCellMobile_default = TableExpanderCellMobile;
 const TableRow = ({ rowKey, hideDetailsText, showDetailsText, expandable, expanded, onClick, className, children, mode = ModeType.normal,...rest }) => {
 	return /* @__PURE__ */ jsxs("tr", {
-		className: cn(tableStyles["table-row"], { [tableStyles["table__row--expandable"]]: expandable }, className),
+		className: classNames(styles["table-row"], { [styles["table__row--expandable"]]: expandable }, className),
 		onClick,
 		...rest,
 		children: [React.Children.map(children, (child) => React.isValidElement(child) && React.cloneElement(child, { mode })), expandable && /* @__PURE__ */ jsx(TableExpanderCellMobile_default, {

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 React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\nimport { Props } from '../TableRow/TableRow';\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 React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\nimport TableExpanderCellMobile from '../TableExpanderCell/TableExpanderCellMobile';\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      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { 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":";;;;;;;;;AAcA,IAAMA,2BAAmE,EACvE,UACA,SACA,iBACA,iBACA,OAAO,SAAS,aACZ;AAMJ,QACE,oBAAC,MAAA;EAAG,WANY,GAAW,YAAY,aAAa,YAAY,gCAAgC;IAC/F,YAAY,2CAA2C;IACvD,YAAY,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,OAChB,GAAG,WACC;AASJ,QACE,qBAAC,MAAA;EAAG,WATgB,GACpB,YAAY,cACZ,GACG,YAAY,4BAA4B,YAC1C,EACD,UACD;EAGwC;EAAsB,GAAI;aAC9D,MAAM,SAAS,IAAI,WAAU,UAAS,MAAM,eAAoC,MAAM,IAAI,MAAM,aAAa,OAAO,EAAE,MAAM,CAAC,CAAC,EAC9H,cACC,oBAAC,iCAAA;GACW;GACD;GACQ;GACA;GACX;IACN,CAAA;IAT+C,OAWhD;;AC3DT,IAAA,qBD+De"}
+{"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 React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\nimport { Props } from '../TableRow/TableRow';\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 React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\nimport TableExpanderCellMobile from '../TableExpanderCell/TableExpanderCellMobile';\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      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { 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":";;;;;;;;;AAcA,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,OAChB,GAAG,WACC;AASJ,QACE,qBAAC,MAAA;EAAG,WATgB,WACpB,OAAY,cACZ,GACG,OAAY,4BAA4B,YAC1C,EACD,UACD;EAGwC;EAAsB,GAAI;aAC9D,MAAM,SAAS,IAAI,WAAU,UAAS,MAAM,eAAoC,MAAM,IAAI,MAAM,aAAa,OAAO,EAAE,MAAM,CAAC,CAAC,EAC9H,cACC,oBAAC,iCAAA;GACW;GACD;GACQ;GACA;GACX;IACN,CAAA;IAT+C,OAWhD;;AC3DT,IAAA,qBD+De"}