npm - @helsenorge/designsystem-react - Versions diffs - 14.0.0-beta.2 → 14.0.0-beta.4 - Mend

@helsenorge/designsystem-react 14.0.0-beta.2 → 14.0.0-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1133) hide show

package/lib/TabList.js CHANGED Viewed

@@ -8,7 +8,7 @@ import { t as useIsVisible } from "./useIsVisible.js";
 import { t as ChevronLeft_default } from "./ChevronLeft.js";
 import { t as ChevronRight_default } from "./ChevronRight.js";
 import { t as useRovingFocus } from "./useRovingFocus.js";
-import cn from "classnames";
+import classNames from "classnames";
 import React, { useEffect, useRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Tabs/TabList/styles.module.scss";
@@ -48,7 +48,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 CHANGED Viewed

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

package/lib/TabPanel.js CHANGED Viewed

@@ -1,11 +1,11 @@
-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 = (props) => {
 	const { children, color = "white", isFirst = false, style, ref } = 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 CHANGED Viewed

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

package/lib/TableBody.js CHANGED Viewed

@@ -1,11 +1,11 @@
-import { n as ModeType } from "./constants4.js";
-import { i as mapChildrenWithMode } from "./utils5.js";
-import cn from "classnames";
+import { n as ModeType } from "./constants3.js";
+import { i as mapChildrenWithMode } from "./utils6.js";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/Table/styles.module.scss";
 const TableBody = ({ className, children, mode = ModeType.normal, ...rest }) => {
 	return /* @__PURE__ */ jsx("tbody", {
-		className: cn(styles["table-body"], className),
+		className: classNames(styles["table-body"], className),
 		...rest,
 		children: mapChildrenWithMode(children, mode)
 	});

package/lib/TableBody.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableBody.js","names":["TableBody: React.FC<Props>"],"sources":["../src/components/Table/TableBody/TableBody.tsx","../src/components/Table/TableBody/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\nimport { mapChildrenWithMode } from '../utils';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'tbody'>, 'style'> {\n /** Adds custom classes to the element. /\n className?: string;\n /* Sets the content of the table body. Use TableRows /\n children?: React.ReactNode;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n}\n\nexport const TableBody: React.FC<Props> = ({ className, children, mode = ModeType.normal, ...rest }) => {\n const tableBodyClasses = classNames(tableStyles['table-body'], className);\n return (\n <tbody className={tableBodyClasses} {...rest}>\n {mapChildrenWithMode(children, mode)}\n </tbody>\n );\n};\n\nexport default TableBody;\n","import TableBody from './TableBody';\nexport from './TableBody';\nexport default TableBody;\n"],"mappings":";;;;;AAeA,MAAaA,aAA8B,EAAE,WAAW,UAAU,OAAO,SAAS,QAAQ,GAAG,WAAW;AAEtG,QACE,oBAAC,SAAA;EAAM,WAFgB,~~GAAW~~,OAAY,eAAe,UAAU;EAEnC,GAAI;YACrC,oBAAoB,UAAU,KAAK;GAC9B;;AClBZ,IAAA,sBDsBe"}
1	+ {"version":3,"file":"TableBody.js","names":["TableBody: React.FC<Props>"],"sources":["../src/components/Table/TableBody/TableBody.tsx","../src/components/Table/TableBody/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\nimport { mapChildrenWithMode } from '../utils';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'tbody'>, 'style'> {\n /** Adds custom classes to the element. /\n className?: string;\n /* Sets the content of the table body. Use TableRows /\n children?: React.ReactNode;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n}\n\nexport const TableBody: React.FC<Props> = ({ className, children, mode = ModeType.normal, ...rest }) => {\n const tableBodyClasses = classNames(tableStyles['table-body'], className);\n return (\n <tbody className={tableBodyClasses} {...rest}>\n {mapChildrenWithMode(children, mode)}\n </tbody>\n );\n};\n\nexport default TableBody;\n","import TableBody from './TableBody';\nexport from './TableBody';\nexport default TableBody;\n"],"mappings":";;;;;AAeA,MAAaA,aAA8B,EAAE,WAAW,UAAU,OAAO,SAAS,QAAQ,GAAG,WAAW;AAEtG,QACE,oBAAC,SAAA;EAAM,WAFgB,WAAW,OAAY,eAAe,UAAU;EAEnC,GAAI;YACrC,oBAAoB,UAAU,KAAK;GAC9B;;AClBZ,IAAA,sBDsBe"}

package/lib/TableCell.js CHANGED Viewed

@@ -1,10 +1,10 @@
-import { a as TextAlign, n as ModeType } from "./constants4.js";
-import cn from "classnames";
+import { a as TextAlign, n as ModeType } from "./constants3.js";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/Table/styles.module.scss";
 const TableCell = ({ nowrap = false, textAlign = TextAlign.left, dataLabel, children, className, testId, mode = ModeType.normal, ...rest }) => {
 	return /* @__PURE__ */ jsx("td", {
-		className: cn(styles["table__cell"], { [styles["table__cell--compact"]]: mode === ModeType.compact }, { [styles["table__cell--nowrap"]]: nowrap }, { [styles["table__cell--center"]]: textAlign === "center" }, { [styles["table__cell--right"]]: textAlign === "right" }, className),
+		className: classNames(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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableCell.js","names":["TableCell: React.FC<Props>"],"sources":["../src/components/Table/TableCell/TableCell.tsx","../src/components/Table/TableCell/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { ModeType, TextAlign } from '../constants';\nimport tableStyles from '../styles.module.scss';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'td'>, 'style'> {\n /** Label used for small viewport block /\n dataLabel?: string;\n /* text align in cell /\n textAlign?: TextAlign;\n /* nowrap for white space /\n nowrap?: boolean;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the content of the table cell /\n children?: React.ReactNode;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n /* For test purposes /\n testId?: string;\n}\n\nexport const TableCell: React.FC<Props> = ({\n nowrap = false,\n textAlign = TextAlign.left,\n dataLabel,\n children,\n className,\n testId,\n mode = ModeType.normal,\n ...rest\n}) => {\n const tableCellClass = classNames(\n tableStyles['table__cell'],\n { [tableStyles['table__cell--compact']]: mode === ModeType.compact },\n { [tableStyles['table__cell--nowrap']]: nowrap },\n { [tableStyles['table__cell--center']]: textAlign === 'center' },\n { [tableStyles['table__cell--right']]: textAlign === 'right' },\n className\n );\n\n return (\n <td className={tableCellClass} data-label={dataLabel} data-testid={testId} {...rest}>\n {children}\n </td>\n );\n};\n\nexport default TableCell;\n","import TableCell from './TableCell';\nexport from './TableCell';\nexport default TableCell;\n"],"mappings":";;;;AAsBA,MAAaA,aAA8B,EACzC,SAAS,OACT,YAAY,UAAU,MACtB,WACA,UACA,WACA,QACA,OAAO,SAAS,QAChB,GAAG,WACC;AAUJ,QACE,oBAAC,MAAA;EAAG,WAViB,~~GACrB~~,OAAY,gBACZ,GAAG,OAAY,0BAA0B,SAAS,SAAS,SAAS,EACpE,GAAG,OAAY,yBAAyB,QAAQ,EAChD,GAAG,OAAY,yBAAyB,cAAc,UAAU,EAChE,GAAG,OAAY,wBAAwB,cAAc,SAAS,EAC9D,UACD;EAGgC,cAAY;EAAW,eAAa;EAAQ,GAAI;EAC5E;GACE;;AC1CT,IAAA,sBD8Ce"}
1	+ {"version":3,"file":"TableCell.js","names":["TableCell: React.FC<Props>"],"sources":["../src/components/Table/TableCell/TableCell.tsx","../src/components/Table/TableCell/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { ModeType, TextAlign } from '../constants';\nimport tableStyles from '../styles.module.scss';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'td'>, 'style'> {\n /** Label used for small viewport block /\n dataLabel?: string;\n /* text align in cell /\n textAlign?: TextAlign;\n /* nowrap for white space /\n nowrap?: boolean;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the content of the table cell /\n children?: React.ReactNode;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n /* For test purposes /\n testId?: string;\n}\n\nexport const TableCell: React.FC<Props> = ({\n nowrap = false,\n textAlign = TextAlign.left,\n dataLabel,\n children,\n className,\n testId,\n mode = ModeType.normal,\n ...rest\n}) => {\n const tableCellClass = classNames(\n tableStyles['table__cell'],\n { [tableStyles['table__cell--compact']]: mode === ModeType.compact },\n { [tableStyles['table__cell--nowrap']]: nowrap },\n { [tableStyles['table__cell--center']]: textAlign === 'center' },\n { [tableStyles['table__cell--right']]: textAlign === 'right' },\n className\n );\n\n return (\n <td className={tableCellClass} data-label={dataLabel} data-testid={testId} {...rest}>\n {children}\n </td>\n );\n};\n\nexport default TableCell;\n","import TableCell from './TableCell';\nexport from './TableCell';\nexport default TableCell;\n"],"mappings":";;;;AAsBA,MAAaA,aAA8B,EACzC,SAAS,OACT,YAAY,UAAU,MACtB,WACA,UACA,WACA,QACA,OAAO,SAAS,QAChB,GAAG,WACC;AAUJ,QACE,oBAAC,MAAA;EAAG,WAViB,WACrB,OAAY,gBACZ,GAAG,OAAY,0BAA0B,SAAS,SAAS,SAAS,EACpE,GAAG,OAAY,yBAAyB,QAAQ,EAChD,GAAG,OAAY,yBAAyB,cAAc,UAAU,EAChE,GAAG,OAAY,wBAAwB,cAAc,SAAS,EAC9D,UACD;EAGgC,cAAY;EAAW,eAAa;EAAQ,GAAI;EAC5E;GACE;;AC1CT,IAAA,sBD8Ce"}

package/lib/TableExpandedRow.js CHANGED Viewed

@@ -1,20 +1,20 @@
 import { t as Icon_default } from "./Icon.js";
 import { t as Button_default } from "./Button.js";
 import { t as ChevronUp_default } from "./ChevronUp.js";
-import { n as ModeType } from "./constants4.js";
-import cn from "classnames";
+import { n as ModeType } from "./constants3.js";
+import classNames from "classnames";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Table/styles.module.scss";
 const TableExpandedRow = ({ numberOfColumns, expanded, hideDetailsText, toggleClick, children, className, mode = ModeType.normal, id }) => {
 	return /* @__PURE__ */ jsx("tr", {
-		className: cn(styles["table__expanded-row"], { [styles["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(styles["table__cell"], className, { [styles["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(styles["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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableExpandedRow.js","names":[],"sources":["../src/components/Table/TableExpandedRow/TableExpandedRow.tsx","../src/components/Table/TableExpandedRow/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\n\nexport interface Props {\n /** Row is expanded. /\n expanded: boolean;\n /* Number of columns in table. /\n numberOfColumns: number;\n /* Text for hide button. /\n hideDetailsText: string;\n /* When hide button inside expanded row is clicked. /\n toggleClick: () => void;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the content of the expanded row. /\n children: React.ReactNode;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n /* Row id. For use with aria-controls. /\n id?: string;\n}\n\nexport const TableExpandedRow = ({\n numberOfColumns,\n expanded,\n hideDetailsText,\n toggleClick,\n children,\n className,\n mode = ModeType.normal,\n id,\n}: Props): React.JSX.Element => {\n const tableRowClass = classNames(\n tableStyles['table__expanded-row'],\n { [tableStyles['table__expanded-row--expanded']]: expanded },\n className\n );\n const tableCellClass = classNames(tableStyles['table__cell'], className, {\n [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n });\n\n const containerClass = classNames(tableStyles['table__expanded-row-container']);\n\n return (\n <tr className={tableRowClass} id={id}>\n <td colSpan={numberOfColumns} className={tableCellClass}>\n <div className={containerClass}>\n {React.Children.map(children, child => React.isValidElement(child) && React.cloneElement(child))}\n <Button variant={'borderless'} onClick={toggleClick} aria-expanded={expanded} tabIndex={expanded ? 0 : -1}>\n {hideDetailsText}\n <Icon svgIcon={ChevronUp} />\n </Button>\n </div>\n </td>\n </tr>\n );\n};\n\nexport default TableExpandedRow;\n","import TableExpandedRow from './TableExpandedRow';\nexport from './TableExpandedRow';\nexport default TableExpandedRow;\n"],"mappings":";;;;;;;;AA6BA,MAAa,oBAAoB,EAC/B,iBACA,UACA,iBACA,aACA,UACA,WACA,OAAO,SAAS,QAChB,SAC8B;AAY9B,QACE,oBAAC,MAAA;EAAG,WAZgB,~~GACpB~~,OAAY,wBACZ,GAAG,OAAY,mCAAmC,UAAU,EAC5D,UACD;EAQmC;YAChC,oBAAC,MAAA;GAAG,SAAS;GAAiB,WARX,~~GAAW~~,OAAY,gBAAgB,WAAW,GACtE,OAAY,0BAA0B,SAAS,SAAS,SAC1D,CAAC;aAOI,qBAAC,OAAA;IAAI,WALY,~~GAAW~~,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"}
1	+ {"version":3,"file":"TableExpandedRow.js","names":[],"sources":["../src/components/Table/TableExpandedRow/TableExpandedRow.tsx","../src/components/Table/TableExpandedRow/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\n\nexport interface Props {\n /** Row is expanded. /\n expanded: boolean;\n /* Number of columns in table. /\n numberOfColumns: number;\n /* Text for hide button. /\n hideDetailsText: string;\n /* When hide button inside expanded row is clicked. /\n toggleClick: () => void;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the content of the expanded row. /\n children: React.ReactNode;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n /* Row id. For use with aria-controls. /\n id?: string;\n}\n\nexport const TableExpandedRow = ({\n numberOfColumns,\n expanded,\n hideDetailsText,\n toggleClick,\n children,\n className,\n mode = ModeType.normal,\n id,\n}: Props): React.JSX.Element => {\n const tableRowClass = classNames(\n tableStyles['table__expanded-row'],\n { [tableStyles['table__expanded-row--expanded']]: expanded },\n className\n );\n const tableCellClass = classNames(tableStyles['table__cell'], className, {\n [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n });\n\n const containerClass = classNames(tableStyles['table__expanded-row-container']);\n\n return (\n <tr className={tableRowClass} id={id}>\n <td colSpan={numberOfColumns} className={tableCellClass}>\n <div className={containerClass}>\n {React.Children.map(children, child => React.isValidElement(child) && React.cloneElement(child))}\n <Button variant={'borderless'} onClick={toggleClick} aria-expanded={expanded} tabIndex={expanded ? 0 : -1}>\n {hideDetailsText}\n <Icon svgIcon={ChevronUp} />\n </Button>\n </div>\n </td>\n </tr>\n );\n};\n\nexport default TableExpandedRow;\n","import TableExpandedRow from './TableExpandedRow';\nexport from './TableExpandedRow';\nexport default TableExpandedRow;\n"],"mappings":";;;;;;;;AA6BA,MAAa,oBAAoB,EAC/B,iBACA,UACA,iBACA,aACA,UACA,WACA,OAAO,SAAS,QAChB,SAC8B;AAY9B,QACE,oBAAC,MAAA;EAAG,WAZgB,WACpB,OAAY,wBACZ,GAAG,OAAY,mCAAmC,UAAU,EAC5D,UACD;EAQmC;YAChC,oBAAC,MAAA;GAAG,SAAS;GAAiB,WARX,WAAW,OAAY,gBAAgB,WAAW,GACtE,OAAY,0BAA0B,SAAS,SAAS,SAC1D,CAAC;aAOI,qBAAC,OAAA;IAAI,WALY,WAAW,OAAY,iCAAiC;eAMtE,MAAM,SAAS,IAAI,WAAU,UAAS,MAAM,eAAe,MAAM,IAAI,MAAM,aAAa,MAAM,CAAC,EAChG,qBAAC,gBAAA;KAAO,SAAS;KAAc,SAAS;KAAa,iBAAe;KAAU,UAAU,WAAW,IAAI;gBACpG,iBACD,oBAAC,cAAA,EAAK,SAAS,mBAAA,CAAa,CAAA;MACrB,CAAA;KACL;IACH;GACF;;AC3DT,IAAA,6BD+De"}

package/lib/TableExpanderCell.js CHANGED Viewed

@@ -2,12 +2,12 @@ import { t as Icon_default } from "./Icon.js";
 import { t as Button_default } from "./Button.js";
 import { t as ChevronDown_default } from "./ChevronDown.js";
 import { t as ChevronUp_default } from "./ChevronUp.js";
-import { n as ModeType } from "./constants4.js";
-import cn from "classnames";
+import { n as ModeType } from "./constants3.js";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/Table/styles.module.scss";
 const TableExpanderCell = ({ expandableRowId, hideDetailsText, showDetailsText, expanded, className, mode = ModeType.normal }) => {
-	const tableCellClass = cn(styles["table__cell"], styles["table__cell-expander"], className, { [styles["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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableExpanderCell.js","names":[],"sources":["../src/components/Table/TableExpanderCell/TableExpanderCell.tsx","../src/components/Table/TableExpanderCell/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\n\nexport interface Props {\n /** Adds custom classes to the element. /\n className?: string;\n /* Row is expanded. /\n expanded: boolean;\n /* Id for expanded row. /\n expandableRowId: string;\n /* Text for hide button used for aria label. /\n hideDetailsText: string;\n /* Text for show button used for aria label. /\n showDetailsText: string;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n}\n\nexport const TableExpanderCell = ({\n expandableRowId,\n hideDetailsText,\n showDetailsText,\n expanded,\n className,\n mode = ModeType.normal,\n}: Props): React.JSX.Element => {\n const tableCellClass = classNames(tableStyles['table__cell'], tableStyles['table__cell-expander'], className, {\n [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n });\n const icon = expanded ? ChevronUp : ChevronDown;\n\n return (\n <td className={tableCellClass}>\n <Button\n variant=\"borderless\"\n aria-expanded={expanded}\n aria-controls={expandableRowId}\n ariaLabel={expanded ? hideDetailsText : showDetailsText}\n >\n <Icon svgIcon={icon} />\n </Button>\n </td>\n );\n};\n\nexport default TableExpanderCell;\n","import TableExpanderCell from './TableExpanderCell';\nexport from './TableExpanderCell';\nexport default TableExpanderCell;\n"],"mappings":";;;;;;;;AAwBA,MAAa,qBAAqB,EAChC,iBACA,iBACA,iBACA,UACA,WACA,OAAO,SAAS,aACc;CAC9B,MAAM,iBAAiB,~~GAAW~~,OAAY,gBAAgB,OAAY,yBAAyB,WAAW,GAC3G,OAAY,0BAA0B,SAAS,SAAS,SAC1D,CAAC;CACF,MAAM,OAAO,WAAW,oBAAY;AAEpC,QACE,oBAAC,MAAA;EAAG,WAAW;YACb,oBAAC,gBAAA;GACC,SAAQ;GACR,iBAAe;GACf,iBAAe;GACf,WAAW,WAAW,kBAAkB;aAExC,oBAAC,cAAA,EAAK,SAAS,MAAA,CAAQ;IAChB;GACN;;AC7CT,IAAA,8BDiDe"}
1	+ {"version":3,"file":"TableExpanderCell.js","names":[],"sources":["../src/components/Table/TableExpanderCell/TableExpanderCell.tsx","../src/components/Table/TableExpanderCell/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\n\nexport interface Props {\n /** Adds custom classes to the element. /\n className?: string;\n /* Row is expanded. /\n expanded: boolean;\n /* Id for expanded row. /\n expandableRowId: string;\n /* Text for hide button used for aria label. /\n hideDetailsText: string;\n /* Text for show button used for aria label. /\n showDetailsText: string;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n}\n\nexport const TableExpanderCell = ({\n expandableRowId,\n hideDetailsText,\n showDetailsText,\n expanded,\n className,\n mode = ModeType.normal,\n}: Props): React.JSX.Element => {\n const tableCellClass = classNames(tableStyles['table__cell'], tableStyles['table__cell-expander'], className, {\n [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n });\n const icon = expanded ? ChevronUp : ChevronDown;\n\n return (\n <td className={tableCellClass}>\n <Button\n variant=\"borderless\"\n aria-expanded={expanded}\n aria-controls={expandableRowId}\n ariaLabel={expanded ? hideDetailsText : showDetailsText}\n >\n <Icon svgIcon={icon} />\n </Button>\n </td>\n );\n};\n\nexport default TableExpanderCell;\n","import TableExpanderCell from './TableExpanderCell';\nexport from './TableExpanderCell';\nexport default TableExpanderCell;\n"],"mappings":";;;;;;;;AAwBA,MAAa,qBAAqB,EAChC,iBACA,iBACA,iBACA,UACA,WACA,OAAO,SAAS,aACc;CAC9B,MAAM,iBAAiB,WAAW,OAAY,gBAAgB,OAAY,yBAAyB,WAAW,GAC3G,OAAY,0BAA0B,SAAS,SAAS,SAC1D,CAAC;CACF,MAAM,OAAO,WAAW,oBAAY;AAEpC,QACE,oBAAC,MAAA;EAAG,WAAW;YACb,oBAAC,gBAAA;GACC,SAAQ;GACR,iBAAe;GACf,iBAAe;GACf,WAAW,WAAW,kBAAkB;aAExC,oBAAC,cAAA,EAAK,SAAS,MAAA,CAAQ;IAChB;GACN;;AC7CT,IAAA,8BDiDe"}

package/lib/TableHead.js CHANGED Viewed

@@ -1,11 +1,11 @@
-import { n as ModeType, t as HeaderCategory } from "./constants4.js";
-import { i as mapChildrenWithMode } from "./utils5.js";
-import cn from "classnames";
+import { n as ModeType, t as HeaderCategory } from "./constants3.js";
+import { i as mapChildrenWithMode } from "./utils6.js";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/Table/styles.module.scss";
 const TableHead = ({ category = HeaderCategory.normal, className, children, mode, ...rest }) => {
 	return /* @__PURE__ */ jsx("thead", {
-		className: cn(styles["table__head"], {
+		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,

package/lib/TableHead.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableHead.js","names":["TableHead: React.FC<Props>"],"sources":["../src/components/Table/TableHead/TableHead.tsx","../src/components/Table/TableHead/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { HeaderCategory, ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\nimport { mapChildrenWithMode } from '../utils';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'thead'>, 'style'> {\n /** Header category for styling. Default: normal /\n category?: HeaderCategory;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the content of the thead. Add table rows /\n children: React.ReactNode;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n}\n\nexport const TableHead: React.FC<Props> = ({ category = HeaderCategory.normal, className, children, mode, ...rest }) => {\n const tableHeadClass = classNames(\n tableStyles['table__head'],\n {\n [tableStyles['table__head--normal']]: category === HeaderCategory.normal,\n [tableStyles['table__head--transparent']]: category === HeaderCategory.transparent,\n [tableStyles['table__head--sortable']]: category == HeaderCategory.sortable,\n [tableStyles['table__head--compact']]: mode == ModeType.compact,\n },\n className\n );\n\n return (\n <thead className={tableHeadClass} {...rest}>\n {mapChildrenWithMode(children, mode)}\n </thead>\n );\n};\n\nexport default TableHead;\n","import TableHead from './TableHead';\nexport from './TableHead';\nexport default TableHead;\n"],"mappings":";;;;;AAiBA,MAAaA,aAA8B,EAAE,WAAW,eAAe,QAAQ,WAAW,UAAU,MAAM,GAAG,WAAW;AAYtH,QACE,oBAAC,SAAA;EAAM,WAZc,~~GACrB~~,OAAY,gBACZ;IACG,OAAY,yBAAyB,aAAa,eAAe;IACjE,OAAY,8BAA8B,aAAa,eAAe;IACtE,OAAY,2BAA2B,YAAY,eAAe;IAClE,OAAY,0BAA0B,QAAQ,SAAS;GACzD,EACD,UACD;EAGmC,GAAI;YACnC,oBAAoB,UAAU,KAAK;GAC9B;;AC9BZ,IAAA,sBDkCe"}
1	+ {"version":3,"file":"TableHead.js","names":["TableHead: React.FC<Props>"],"sources":["../src/components/Table/TableHead/TableHead.tsx","../src/components/Table/TableHead/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { HeaderCategory, ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\nimport { mapChildrenWithMode } from '../utils';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'thead'>, 'style'> {\n /** Header category for styling. Default: normal /\n category?: HeaderCategory;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the content of the thead. Add table rows /\n children: React.ReactNode;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n}\n\nexport const TableHead: React.FC<Props> = ({ category = HeaderCategory.normal, className, children, mode, ...rest }) => {\n const tableHeadClass = classNames(\n tableStyles['table__head'],\n {\n [tableStyles['table__head--normal']]: category === HeaderCategory.normal,\n [tableStyles['table__head--transparent']]: category === HeaderCategory.transparent,\n [tableStyles['table__head--sortable']]: category == HeaderCategory.sortable,\n [tableStyles['table__head--compact']]: mode == ModeType.compact,\n },\n className\n );\n\n return (\n <thead className={tableHeadClass} {...rest}>\n {mapChildrenWithMode(children, mode)}\n </thead>\n );\n};\n\nexport default TableHead;\n","import TableHead from './TableHead';\nexport from './TableHead';\nexport default TableHead;\n"],"mappings":";;;;;AAiBA,MAAaA,aAA8B,EAAE,WAAW,eAAe,QAAQ,WAAW,UAAU,MAAM,GAAG,WAAW;AAYtH,QACE,oBAAC,SAAA;EAAM,WAZc,WACrB,OAAY,gBACZ;IACG,OAAY,yBAAyB,aAAa,eAAe;IACjE,OAAY,8BAA8B,aAAa,eAAe;IACtE,OAAY,2BAA2B,YAAY,eAAe;IAClE,OAAY,0BAA0B,QAAQ,SAAS;GACzD,EACD,UACD;EAGmC,GAAI;YACnC,oBAAoB,UAAU,KAAK;GAC9B;;AC9BZ,IAAA,sBDkCe"}

package/lib/TableHeadCell.js CHANGED Viewed

@@ -2,12 +2,12 @@ import { a as IconSize } from "./constants2.js";
 import { t as Icon_default } from "./Icon.js";
 import { t as ArrowDown_default } from "./ArrowDown.js";
 import { t as ArrowUp_default } from "./ArrowUp.js";
-import { i as SortDirection, n as ModeType } from "./constants4.js";
-import cn from "classnames";
+import { i as SortDirection, n as ModeType } from "./constants3.js";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Table/styles.module.scss";
 const TableHeadCell = ({ sortable, onClick, className, children, sortDir, mode = ModeType.normal, scope = "col", ...rest }) => {
-	const tableHeadCellDefaultClass = cn(styles["table__head-cell"], className, { [styles["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,
@@ -15,7 +15,7 @@ const TableHeadCell = ({ sortable, onClick, className, children, sortDir, mode =
 		...rest,
 		children
 	});
-	const sortableClasses = cn(tableHeadCellDefaultClass, styles["table__head-cell--sortable"], className);
+	const sortableClasses = classNames(tableHeadCellDefaultClass, styles["table__head-cell--sortable"], className);
 	const renderSortIcon = () => sortDir && /* @__PURE__ */ jsx("div", {
 		className: styles["table__head-cell-sort-icon-wrapper"],
 		children: /* @__PURE__ */ jsx(Icon_default, {

package/lib/TableHeadCell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableHeadCell.js","names":["TableHeadCell: React.FC<Props>"],"sources":["../src/components/Table/TableHeadCell/TableHeadCell.tsx","../src/components/Table/TableHeadCell/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport Icon, { IconSize } from '../../Icon';\nimport ArrowDown from '../../Icons/ArrowDown';\nimport ArrowUp from '../../Icons/ArrowUp';\nimport { ModeType, SortDirection } from '../constants';\nimport tableStyles from '../styles.module.scss';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'th'>, 'style'> {\n /** Sets if column for head cell should be sortable/\n sortable?: boolean;\n /* Sort direction /\n sortDir?: SortDirection;\n /* Function that is called when clicked /\n onClick?: () => void;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the content of the td element. /\n children?: React.ReactNode;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n}\n\nexport const TableHeadCell: React.FC<Props> = ({\n sortable,\n onClick,\n className,\n children,\n sortDir,\n mode = ModeType.normal,\n scope = 'col',\n ...rest\n}) => {\n const tableHeadCellDefaultClass = classNames(tableStyles['table__head-cell'], className, {\n [tableStyles['table__head-cell--compact']]: mode === ModeType.compact,\n });\n\n if (!sortable && !children) {\n return <td className={tableHeadCellDefaultClass}></td>;\n }\n\n if (!sortable) {\n return (\n <th scope={scope} className={tableHeadCellDefaultClass} {...rest}>\n {children}\n </th>\n );\n }\n\n const sortableClasses = classNames(tableHeadCellDefaultClass, tableStyles['table__head-cell--sortable'], className);\n\n const renderSortIcon = (): React.JSX.Element \| undefined =>\n sortDir && (\n <div className={tableStyles['table__head-cell-sort-icon-wrapper']}>\n <Icon svgIcon={sortDir == SortDirection.asc ? ArrowDown : ArrowUp} size={IconSize.XXSmall} />\n </div>\n );\n\n const getSortDirection = (): React.AriaAttributes['aria-sort'] => {\n switch (sortDir) {\n case SortDirection.asc:\n return 'ascending';\n case SortDirection.desc:\n return 'descending';\n }\n };\n\n return (\n <th scope={scope} className={sortableClasses} aria-sort={getSortDirection()} {...rest}>\n <button type=\"button\" onClick={onClick} className={tableStyles['table__sort-button']} aria-pressed={sortDir ? !!sortDir : undefined}>\n {renderSortIcon()}\n {children}\n </button>\n </th>\n );\n};\n\nexport default TableHeadCell;\n","import TableHeadCell from './TableHeadCell';\nexport from './TableHeadCell';\nexport default TableHeadCell;\n"],"mappings":";;;;;;;;AAuBA,MAAaA,iBAAkC,EAC7C,UACA,SACA,WACA,UACA,SACA,OAAO,SAAS,QAChB,QAAQ,OACR,GAAG,WACC;CACJ,MAAM,4BAA4B,~~GAAW~~,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,~~GAAW~~,2BAA2B,OAAY,+BAA+B,UAAU;CAEnH,MAAM,uBACJ,WACE,oBAAC,OAAA;EAAI,WAAW,OAAY;YAC1B,oBAAC,cAAA;GAAK,SAAS,WAAW,cAAc,MAAM,oBAAY;GAAS,MAAM,SAAS;IAAW;GACzF;CAGV,MAAM,yBAA4D;AAChE,UAAQ,SAAR;GACE,KAAK,cAAc,IACjB,QAAO;GACT,KAAK,cAAc,KACjB,QAAO;;;AAIb,QACE,oBAAC,MAAA;EAAU;EAAO,WAAW;EAAiB,aAAW,kBAAkB;EAAE,GAAI;YAC/E,qBAAC,UAAA;GAAO,MAAK;GAAkB;GAAS,WAAW,OAAY;GAAuB,gBAAc,UAAU,CAAC,CAAC,UAAU,KAAA;cACvH,gBAAgB,EAChB,SAAA;IACM;GACN;;ACvET,IAAA,0BD2Ee"}
1	+ {"version":3,"file":"TableHeadCell.js","names":["TableHeadCell: React.FC<Props>"],"sources":["../src/components/Table/TableHeadCell/TableHeadCell.tsx","../src/components/Table/TableHeadCell/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport Icon, { IconSize } from '../../Icon';\nimport ArrowDown from '../../Icons/ArrowDown';\nimport ArrowUp from '../../Icons/ArrowUp';\nimport { ModeType, SortDirection } from '../constants';\nimport tableStyles from '../styles.module.scss';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'th'>, 'style'> {\n /** Sets if column for head cell should be sortable/\n sortable?: boolean;\n /* Sort direction /\n sortDir?: SortDirection;\n /* Function that is called when clicked /\n onClick?: () => void;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the content of the td element. /\n children?: React.ReactNode;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n}\n\nexport const TableHeadCell: React.FC<Props> = ({\n sortable,\n onClick,\n className,\n children,\n sortDir,\n mode = ModeType.normal,\n scope = 'col',\n ...rest\n}) => {\n const tableHeadCellDefaultClass = classNames(tableStyles['table__head-cell'], className, {\n [tableStyles['table__head-cell--compact']]: mode === ModeType.compact,\n });\n\n if (!sortable && !children) {\n return <td className={tableHeadCellDefaultClass}></td>;\n }\n\n if (!sortable) {\n return (\n <th scope={scope} className={tableHeadCellDefaultClass} {...rest}>\n {children}\n </th>\n );\n }\n\n const sortableClasses = classNames(tableHeadCellDefaultClass, tableStyles['table__head-cell--sortable'], className);\n\n const renderSortIcon = (): React.JSX.Element \| undefined =>\n sortDir && (\n <div className={tableStyles['table__head-cell-sort-icon-wrapper']}>\n <Icon svgIcon={sortDir == SortDirection.asc ? ArrowDown : ArrowUp} size={IconSize.XXSmall} />\n </div>\n );\n\n const getSortDirection = (): React.AriaAttributes['aria-sort'] => {\n switch (sortDir) {\n case SortDirection.asc:\n return 'ascending';\n case SortDirection.desc:\n return 'descending';\n }\n };\n\n return (\n <th scope={scope} className={sortableClasses} aria-sort={getSortDirection()} {...rest}>\n <button type=\"button\" onClick={onClick} className={tableStyles['table__sort-button']} aria-pressed={sortDir ? !!sortDir : undefined}>\n {renderSortIcon()}\n {children}\n </button>\n </th>\n );\n};\n\nexport default TableHeadCell;\n","import TableHeadCell from './TableHeadCell';\nexport from './TableHeadCell';\nexport default TableHeadCell;\n"],"mappings":";;;;;;;;AAuBA,MAAaA,iBAAkC,EAC7C,UACA,SACA,WACA,UACA,SACA,OAAO,SAAS,QAChB,QAAQ,OACR,GAAG,WACC;CACJ,MAAM,4BAA4B,WAAW,OAAY,qBAAqB,WAAW,GACtF,OAAY,+BAA+B,SAAS,SAAS,SAC/D,CAAC;AAEF,KAAI,CAAC,YAAY,CAAC,SAChB,QAAO,oBAAC,MAAA,EAAG,WAAW,2BAAA,CAAgC;AAGxD,KAAI,CAAC,SACH,QACE,oBAAC,MAAA;EAAU;EAAO,WAAW;EAA2B,GAAI;EACzD;GACE;CAIT,MAAM,kBAAkB,WAAW,2BAA2B,OAAY,+BAA+B,UAAU;CAEnH,MAAM,uBACJ,WACE,oBAAC,OAAA;EAAI,WAAW,OAAY;YAC1B,oBAAC,cAAA;GAAK,SAAS,WAAW,cAAc,MAAM,oBAAY;GAAS,MAAM,SAAS;IAAW;GACzF;CAGV,MAAM,yBAA4D;AAChE,UAAQ,SAAR;GACE,KAAK,cAAc,IACjB,QAAO;GACT,KAAK,cAAc,KACjB,QAAO;;;AAIb,QACE,oBAAC,MAAA;EAAU;EAAO,WAAW;EAAiB,aAAW,kBAAkB;EAAE,GAAI;YAC/E,qBAAC,UAAA;GAAO,MAAK;GAAkB;GAAS,WAAW,OAAY;GAAuB,gBAAc,UAAU,CAAC,CAAC,UAAU,KAAA;cACvH,gBAAgB,EAChB,SAAA;IACM;GACN;;ACvET,IAAA,0BD2Ee"}

package/lib/TableRow.js CHANGED Viewed

@@ -2,14 +2,14 @@ import { t as Icon_default } from "./Icon.js";
 import { t as Button_default } from "./Button.js";
 import { t as ChevronDown_default } from "./ChevronDown.js";
 import { t as ChevronUp_default } from "./ChevronUp.js";
-import { n as ModeType } from "./constants4.js";
-import { i as mapChildrenWithMode } from "./utils5.js";
-import cn from "classnames";
+import { n as ModeType } from "./constants3.js";
+import { i as mapChildrenWithMode } from "./utils6.js";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Table/styles.module.scss";
 var TableExpanderCellMobile = ({ expanded, onClick, hideDetailsText, showDetailsText, mode = ModeType.normal }) => {
 	return /* @__PURE__ */ jsx("td", {
-		className: cn(styles.table__cell, styles["table__expander-cell-mobile"], {
+		className: classNames(styles.table__cell, styles["table__expander-cell-mobile"], {
 			[styles["table__expander-cell-mobile--expanded"]]: expanded,
 			[styles["table__cell--compact"]]: mode === ModeType.compact
 		}),
@@ -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(styles["table-row"], { [styles["table__row--expandable"]]: expandable }, className),
+		className: classNames(styles["table-row"], { [styles["table__row--expandable"]]: expandable }, className),
 		onClick,
 		...rest,
 		children: [mapChildrenWithMode(children, mode), expandable && /* @__PURE__ */ jsx(TableExpanderCellMobile_default, {

package/lib/TableRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableRow.js","names":["TableExpanderCellMobile: React.FC<TableExpanderCellMobileProps>","TableRow: React.FC<Props>"],"sources":["../src/components/Table/TableExpanderCell/TableExpanderCellMobile.tsx","../src/components/Table/TableRow/TableRow.tsx","../src/components/Table/TableRow/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { Props } from '../TableRow/TableRow';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\n\ntype TableExpanderCellMobileProps = Pick<Props, 'expanded' \| 'onClick' \| 'hideDetailsText' \| 'showDetailsText' \| 'mode'>;\n\nconst TableExpanderCellMobile: React.FC<TableExpanderCellMobileProps> = ({\n expanded,\n onClick,\n hideDetailsText,\n showDetailsText,\n mode = ModeType.normal,\n}) => {\n const cellClass = classNames(tableStyles.table__cell, tableStyles['table__expander-cell-mobile'], {\n [tableStyles['table__expander-cell-mobile--expanded']]: expanded,\n [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n });\n\n return (\n <td className={cellClass}>\n <Button aria-expanded={expanded} variant=\"borderless\" onClick={onClick}>\n <Icon svgIcon={expanded ? ChevronUp : ChevronDown} /> {expanded ? hideDetailsText : showDetailsText}\n </Button>\n </td>\n );\n};\n\nexport default TableExpanderCellMobile;\n","import classNames from 'classnames';\n\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\nimport TableExpanderCellMobile from '../TableExpanderCell/TableExpanderCellMobile';\nimport { mapChildrenWithMode } from '../utils';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'tr'>, 'style'> {\n /** Sets if expanded row can be expanded /\n expandable?: boolean;\n /* Sets if expanded row is expanded /\n expanded?: boolean;\n /* When hide/show button for expanded row is clicked. /\n onClick?: () => void;\n /* Text for expanded row hide button. /\n hideDetailsText?: string;\n /* Text for expanded row show button. /\n showDetailsText?: string;\n /* Key attribute for row /\n rowKey?: string;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the cells of the table row element. /\n children?: React.ReactNode;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n}\n\nexport const TableRow: React.FC<Props> = ({\n rowKey,\n hideDetailsText,\n showDetailsText,\n expandable,\n expanded,\n onClick,\n className,\n children,\n mode = ModeType.normal,\n ...rest\n}) => {\n const tableRowClass = classNames(\n tableStyles['table-row'],\n {\n [tableStyles['table__row--expandable']]: expandable,\n },\n className\n );\n\n return (\n <tr className={tableRowClass} onClick={onClick} key={rowKey} {...rest}>\n {mapChildrenWithMode(children, mode)}\n {expandable && (\n <TableExpanderCellMobile\n expanded={expanded}\n onClick={onClick}\n hideDetailsText={hideDetailsText}\n showDetailsText={showDetailsText}\n mode={mode}\n />\n )}\n </tr>\n );\n};\n\nexport default TableRow;\n","import TableRow from './TableRow';\nexport from './TableRow';\nexport default TableRow;\n"],"mappings":";;;;;;;;;AAaA,IAAMA,2BAAmE,EACvE,UACA,SACA,iBACA,iBACA,OAAO,SAAS,aACZ;AAMJ,QACE,oBAAC,MAAA;EAAG,WANY,~~GAAW~~,OAAY,aAAa,OAAY,gCAAgC;IAC/F,OAAY,2CAA2C;IACvD,OAAY,0BAA0B,SAAS,SAAS;GAC1D,CAAC;YAIE,qBAAC,gBAAA;GAAO,iBAAe;GAAU,SAAQ;GAAsB;;IAC7D,oBAAC,cAAA,EAAK,SAAS,WAAW,oBAAY,qBAAA,CAAe;;IAAE,WAAW,kBAAkB;;IAC7E;GACN;;AAIT,IAAA,kCAAe;ACNf,MAAaC,YAA6B,EACxC,QACA,iBACA,iBACA,YACA,UACA,SACA,WACA,UACA,OAAO,SAAS,QAChB,GAAG,WACC;AASJ,QACE,qBAAC,MAAA;EAAG,WATgB,~~GACpB~~,OAAY,cACZ,GACG,OAAY,4BAA4B,YAC1C,EACD,UACD;EAGwC;EAAsB,GAAI;aAC9D,oBAAoB,UAAU,KAAK,EACnC,cACC,oBAAC,iCAAA;GACW;GACD;GACQ;GACA;GACX;IACN,CAAA;IAT+C,OAWhD;;AC1DT,IAAA,qBD8De"}
1	+ {"version":3,"file":"TableRow.js","names":["TableExpanderCellMobile: React.FC<TableExpanderCellMobileProps>","TableRow: React.FC<Props>"],"sources":["../src/components/Table/TableExpanderCell/TableExpanderCellMobile.tsx","../src/components/Table/TableRow/TableRow.tsx","../src/components/Table/TableRow/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { Props } from '../TableRow/TableRow';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\n\ntype TableExpanderCellMobileProps = Pick<Props, 'expanded' \| 'onClick' \| 'hideDetailsText' \| 'showDetailsText' \| 'mode'>;\n\nconst TableExpanderCellMobile: React.FC<TableExpanderCellMobileProps> = ({\n expanded,\n onClick,\n hideDetailsText,\n showDetailsText,\n mode = ModeType.normal,\n}) => {\n const cellClass = classNames(tableStyles.table__cell, tableStyles['table__expander-cell-mobile'], {\n [tableStyles['table__expander-cell-mobile--expanded']]: expanded,\n [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n });\n\n return (\n <td className={cellClass}>\n <Button aria-expanded={expanded} variant=\"borderless\" onClick={onClick}>\n <Icon svgIcon={expanded ? ChevronUp : ChevronDown} /> {expanded ? hideDetailsText : showDetailsText}\n </Button>\n </td>\n );\n};\n\nexport default TableExpanderCellMobile;\n","import classNames from 'classnames';\n\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\nimport TableExpanderCellMobile from '../TableExpanderCell/TableExpanderCellMobile';\nimport { mapChildrenWithMode } from '../utils';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'tr'>, 'style'> {\n /** Sets if expanded row can be expanded /\n expandable?: boolean;\n /* Sets if expanded row is expanded /\n expanded?: boolean;\n /* When hide/show button for expanded row is clicked. /\n onClick?: () => void;\n /* Text for expanded row hide button. /\n hideDetailsText?: string;\n /* Text for expanded row show button. /\n showDetailsText?: string;\n /* Key attribute for row /\n rowKey?: string;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the cells of the table row element. /\n children?: React.ReactNode;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n}\n\nexport const TableRow: React.FC<Props> = ({\n rowKey,\n hideDetailsText,\n showDetailsText,\n expandable,\n expanded,\n onClick,\n className,\n children,\n mode = ModeType.normal,\n ...rest\n}) => {\n const tableRowClass = classNames(\n tableStyles['table-row'],\n {\n [tableStyles['table__row--expandable']]: expandable,\n },\n className\n );\n\n return (\n <tr className={tableRowClass} onClick={onClick} key={rowKey} {...rest}>\n {mapChildrenWithMode(children, mode)}\n {expandable && (\n <TableExpanderCellMobile\n expanded={expanded}\n onClick={onClick}\n hideDetailsText={hideDetailsText}\n showDetailsText={showDetailsText}\n mode={mode}\n />\n )}\n </tr>\n );\n};\n\nexport default TableRow;\n","import TableRow from './TableRow';\nexport from './TableRow';\nexport default TableRow;\n"],"mappings":";;;;;;;;;AAaA,IAAMA,2BAAmE,EACvE,UACA,SACA,iBACA,iBACA,OAAO,SAAS,aACZ;AAMJ,QACE,oBAAC,MAAA;EAAG,WANY,WAAW,OAAY,aAAa,OAAY,gCAAgC;IAC/F,OAAY,2CAA2C;IACvD,OAAY,0BAA0B,SAAS,SAAS;GAC1D,CAAC;YAIE,qBAAC,gBAAA;GAAO,iBAAe;GAAU,SAAQ;GAAsB;;IAC7D,oBAAC,cAAA,EAAK,SAAS,WAAW,oBAAY,qBAAA,CAAe;;IAAE,WAAW,kBAAkB;;IAC7E;GACN;;AAIT,IAAA,kCAAe;ACNf,MAAaC,YAA6B,EACxC,QACA,iBACA,iBACA,YACA,UACA,SACA,WACA,UACA,OAAO,SAAS,QAChB,GAAG,WACC;AASJ,QACE,qBAAC,MAAA;EAAG,WATgB,WACpB,OAAY,cACZ,GACG,OAAY,4BAA4B,YAC1C,EACD,UACD;EAGwC;EAAsB,GAAI;aAC9D,oBAAoB,UAAU,KAAK,EACnC,cACC,oBAAC,iCAAA;GACW;GACD;GACQ;GACA;GACX;IACN,CAAA;IAT+C,OAWhD;;AC1DT,IAAA,qBD8De"}

package/lib/Textarea.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { t as getAriaDescribedBy } from "./accessibility.js";
 import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
 import { n as renderLabel } from "./utils2.js";
 import { t as MaxCharacters_default } from "./MaxCharacters.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Textarea/styles.module.scss";
@@ -55,15 +55,15 @@ var Textarea = (props) => {
 	const onBlueberry = onColor === FormOnColor.onblueberry;
 	const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;
 	const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;
-	const textareaWrapperClass = cn(styles.textarea, { [styles["textarea--gutterBottom"]]: gutterBottom });
-	const contentWrapperClass = cn(styles["input-container"], {
+	const textareaWrapperClass = classNames(styles.textarea, { [styles["textarea--gutterBottom"]]: gutterBottom });
+	const contentWrapperClass = classNames(styles["input-container"], {
 		[styles["input-container--transparent"]]: transparent,
 		[styles["input-container--on-blueberry"]]: onBlueberry,
 		[styles["input-container--on-dark"]]: onDark,
 		[styles["input-container--invalid"]]: onError,
 		[styles["input-container--disabled"]]: props.disabled
 	});
-	const textareaClass = cn(styles["input-container__input"], { [styles[`input-container__input--disabled`]]: props.disabled });
+	const textareaClass = classNames(styles["input-container__input"], { [styles[`input-container__input--disabled`]]: props.disabled });
 	useEffect(() => {
 		if (value) setTextareaInput(value);
 		if (grow && referanse.current?.children && referanse.current?.children[0]) {

package/lib/Textarea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Textarea.js","names":["Textarea: React.FC<TextareaProps>","mergedResources: HNDesignsystemTextArea"],"sources":["../src/resources/HN.Designsystem.TextArea.en-GB.json","../src/resources/HN.Designsystem.TextArea.nb-NO.json","../src/resources/HN.Designsystem.TextArea.nn-NO.json","../src/components/Textarea/resourceHelper.ts","../src/components/Textarea/Textarea.tsx","../src/components/Textarea/index.ts"],"sourcesContent":["{\n \"characters\": \"characters\"\n}\n","{\n \"characters\": \"tegn\"\n}\n","{\n \"characters\": \"teikn\"\n}\n","import type { HNDesignsystemTextArea } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.TextArea.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.TextArea.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.TextArea.nn-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemTextArea => {\n switch (language) {\n case LanguageLocales.ENGLISH:\n return enGB;\n case LanguageLocales.NORWEGIAN_NYNORSK:\n return nnNO;\n case LanguageLocales.NORWEGIAN:\n default:\n return nbNO;\n }\n};\n","import { useState, useRef, useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport type { HNDesignsystemTextArea } from '../../resources/Resources';\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor, LanguageLocales } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { renderLabel } from '../Label/utils';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface TextareaProps\n extends\n ErrorWrapperClassNameProps,\n Pick<\n React.InputHTMLAttributes<HTMLTextAreaElement>,\n \| 'aria-describedby'\n \| 'autoFocus'\n \| 'disabled'\n \| 'name'\n \| 'autoComplete'\n \| 'placeholder'\n \| 'readOnly'\n \| 'required'\n \| 'defaultValue'\n \| 'onChange'\n \| 'value'\n > {\n /** max character limit in textarea /\n maxCharacters?: number;\n /* Width of textarea in characters (approximate) /\n width?: number;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* If true, the component will have a bottom margin. /\n marginBottom?: boolean;\n /* If true, the component will be transparent. /\n transparent?: boolean;\n /* Changes the visuals of the textarea /\n onColor?: keyof typeof FormOnColor;\n /* Label of the input /\n label?: React.ReactNode;\n /* id of the textarea /\n textareaId?: string;\n /* max rows /\n maxRows?: number;\n /* min rows /\n minRows?: number;\n /* auto-grows until maxRows /\n grow?: boolean;\n /* Activates Error style for the input /\n error?: boolean;\n /* Error text to show above the component /\n errorText?: string;\n /* Error text id /\n errorTextId?: string;\n /* Resources for component /\n resources?: Partial<HNDesignsystemTextArea>;\n /* Ref passed to the component /\n ref?: React.Ref<HTMLTextAreaElement \| null>;\n}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n const paddingWidth = '2rem';\n const scrollbarWidth = '16px';\n const borderWidth = '4px';\n\n return `calc(${characters AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea: React.FC<TextareaProps> = props => {\n const {\n maxCharacters,\n width,\n testId,\n defaultValue,\n marginBottom: gutterBottom,\n transparent,\n onColor = FormOnColor.onwhite,\n label,\n textareaId = uuid(),\n minRows = 3,\n maxRows = 10,\n grow,\n error,\n errorText,\n errorTextId: errorTextIdProp,\n errorWrapperClassName,\n autoFocus,\n disabled,\n name,\n autoComplete = 'off',\n placeholder,\n readOnly,\n required,\n onChange,\n value,\n resources,\n ref,\n ...rest\n } = props;\n\n const [rows, setRows] = useState(minRows);\n const [textareaInput, setTextareaInput] = useState(value \|\| defaultValue \|\| '');\n const referanse = useRef<HTMLDivElement>(null);\n const errorTextUuid = useIdWithFallback(errorTextIdProp);\n\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n\n const mergedResources: HNDesignsystemTextArea = {\n ...defaultResources,\n ...resources,\n };\n\n useEffect(() => {\n setTextareaInput(defaultValue \|\| '');\n }, [defaultValue]);\n\n const resizeHeight = (target: HTMLTextAreaElement): void => {\n const textareaLineHeight = 28;\n\n const previousRows = target.rows;\n target.rows = minRows; // reset number of rows in textarea\n\n const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n if (currentRows === previousRows) {\n target.rows = currentRows;\n }\n\n if (currentRows >= maxRows) {\n target.rows = maxRows;\n target.scrollTop = target.scrollHeight;\n }\n\n if (currentRows < maxRows) {\n setRows(currentRows);\n } else {\n setRows(maxRows);\n }\n };\n\n const onDark = onColor === FormOnColor.ondark;\n const onBlueberry = onColor === FormOnColor.onblueberry;\n const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n const onError = onColor === FormOnColor.oninvalid \|\| !!errorText \|\| !!error \|\| maxCharactersExceeded;\n\n const textareaWrapperClass = cn(styles.textarea, {\n [styles['textarea--gutterBottom']]: gutterBottom,\n });\n\n const contentWrapperClass = cn(styles['input-container'], {\n [styles['input-container--transparent']]: transparent,\n [styles['input-container--on-blueberry']]: onBlueberry,\n [styles['input-container--on-dark']]: onDark,\n [styles['input-container--invalid']]: onError,\n [styles['input-container--disabled']]: props.disabled,\n });\n\n const textareaClass = cn(styles['input-container__input'], {\n [styles[`input-container__input--disabled`]]: props.disabled,\n });\n\n useEffect(() => {\n if (value) setTextareaInput(value);\n\n if (grow && referanse.current?.children && referanse.current?.children[0]) {\n const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n resizeHeight(textarea);\n }\n }, [value]);\n\n const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n setTextareaInput(e.target.value);\n\n if (onChange) {\n onChange(e);\n }\n\n if (grow) {\n resizeHeight(e.target);\n }\n };\n\n const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n return (\n <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n {renderLabel(label, textareaId, onColor as FormOnColor)}\n <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n <textarea\n {...rest}\n rows={rows}\n defaultValue={defaultValue}\n id={textareaId}\n className={textareaClass}\n ref={ref}\n aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n aria-invalid={!!onError}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={autoFocus}\n disabled={disabled}\n name={name}\n autoComplete={autoComplete ? autoComplete : undefined}\n placeholder={placeholder}\n readOnly={readOnly}\n required={required}\n onChange={onChangeHandler}\n value={value}\n />\n </div>\n {maxCharacters && (\n <MaxCharacters\n maxCharacters={maxCharacters}\n length={textareaInput.toString().length}\n maxText={mergedResources.characters}\n onColor={onColor}\n maxWidth={maxWidth}\n />\n )}\n </div>\n </ErrorWrapper>\n );\n};\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n","import Textarea from './Textarea';\nexport * from './Textarea';\nexport default Textarea;\n"],"mappings":"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"}
1	+ {"version":3,"file":"Textarea.js","names":["Textarea: React.FC<TextareaProps>","mergedResources: HNDesignsystemTextArea"],"sources":["../src/resources/HN.Designsystem.TextArea.en-GB.json","../src/resources/HN.Designsystem.TextArea.nb-NO.json","../src/resources/HN.Designsystem.TextArea.nn-NO.json","../src/components/Textarea/resourceHelper.ts","../src/components/Textarea/Textarea.tsx","../src/components/Textarea/index.ts"],"sourcesContent":["{\n \"characters\": \"characters\"\n}\n","{\n \"characters\": \"tegn\"\n}\n","{\n \"characters\": \"teikn\"\n}\n","import type { HNDesignsystemTextArea } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.TextArea.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.TextArea.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.TextArea.nn-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemTextArea => {\n switch (language) {\n case LanguageLocales.ENGLISH:\n return enGB;\n case LanguageLocales.NORWEGIAN_NYNORSK:\n return nnNO;\n case LanguageLocales.NORWEGIAN:\n default:\n return nbNO;\n }\n};\n","import { useState, useRef, useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport type { HNDesignsystemTextArea } from '../../resources/Resources';\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor, LanguageLocales } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { renderLabel } from '../Label/utils';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface TextareaProps\n extends\n ErrorWrapperClassNameProps,\n Pick<\n React.InputHTMLAttributes<HTMLTextAreaElement>,\n \| 'aria-describedby'\n \| 'autoFocus'\n \| 'disabled'\n \| 'name'\n \| 'autoComplete'\n \| 'placeholder'\n \| 'readOnly'\n \| 'required'\n \| 'defaultValue'\n \| 'onChange'\n \| 'value'\n > {\n /** max character limit in textarea /\n maxCharacters?: number;\n /* Width of textarea in characters (approximate) /\n width?: number;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* If true, the component will have a bottom margin. /\n marginBottom?: boolean;\n /* If true, the component will be transparent. /\n transparent?: boolean;\n /* Changes the visuals of the textarea /\n onColor?: keyof typeof FormOnColor;\n /* Label of the input /\n label?: React.ReactNode;\n /* id of the textarea /\n textareaId?: string;\n /* max rows /\n maxRows?: number;\n /* min rows /\n minRows?: number;\n /* auto-grows until maxRows /\n grow?: boolean;\n /* Activates Error style for the input /\n error?: boolean;\n /* Error text to show above the component /\n errorText?: string;\n /* Error text id /\n errorTextId?: string;\n /* Resources for component /\n resources?: Partial<HNDesignsystemTextArea>;\n /* Ref passed to the component /\n ref?: React.Ref<HTMLTextAreaElement \| null>;\n}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n const paddingWidth = '2rem';\n const scrollbarWidth = '16px';\n const borderWidth = '4px';\n\n return `calc(${characters AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea: React.FC<TextareaProps> = props => {\n const {\n maxCharacters,\n width,\n testId,\n defaultValue,\n marginBottom: gutterBottom,\n transparent,\n onColor = FormOnColor.onwhite,\n label,\n textareaId = uuid(),\n minRows = 3,\n maxRows = 10,\n grow,\n error,\n errorText,\n errorTextId: errorTextIdProp,\n errorWrapperClassName,\n autoFocus,\n disabled,\n name,\n autoComplete = 'off',\n placeholder,\n readOnly,\n required,\n onChange,\n value,\n resources,\n ref,\n ...rest\n } = props;\n\n const [rows, setRows] = useState(minRows);\n const [textareaInput, setTextareaInput] = useState(value \|\| defaultValue \|\| '');\n const referanse = useRef<HTMLDivElement>(null);\n const errorTextUuid = useIdWithFallback(errorTextIdProp);\n\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n\n const mergedResources: HNDesignsystemTextArea = {\n ...defaultResources,\n ...resources,\n };\n\n useEffect(() => {\n setTextareaInput(defaultValue \|\| '');\n }, [defaultValue]);\n\n const resizeHeight = (target: HTMLTextAreaElement): void => {\n const textareaLineHeight = 28;\n\n const previousRows = target.rows;\n target.rows = minRows; // reset number of rows in textarea\n\n const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n if (currentRows === previousRows) {\n target.rows = currentRows;\n }\n\n if (currentRows >= maxRows) {\n target.rows = maxRows;\n target.scrollTop = target.scrollHeight;\n }\n\n if (currentRows < maxRows) {\n setRows(currentRows);\n } else {\n setRows(maxRows);\n }\n };\n\n const onDark = onColor === FormOnColor.ondark;\n const onBlueberry = onColor === FormOnColor.onblueberry;\n const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n const onError = onColor === FormOnColor.oninvalid \|\| !!errorText \|\| !!error \|\| maxCharactersExceeded;\n\n const textareaWrapperClass = cn(styles.textarea, {\n [styles['textarea--gutterBottom']]: gutterBottom,\n });\n\n const contentWrapperClass = cn(styles['input-container'], {\n [styles['input-container--transparent']]: transparent,\n [styles['input-container--on-blueberry']]: onBlueberry,\n [styles['input-container--on-dark']]: onDark,\n [styles['input-container--invalid']]: onError,\n [styles['input-container--disabled']]: props.disabled,\n });\n\n const textareaClass = cn(styles['input-container__input'], {\n [styles[`input-container__input--disabled`]]: props.disabled,\n });\n\n useEffect(() => {\n if (value) setTextareaInput(value);\n\n if (grow && referanse.current?.children && referanse.current?.children[0]) {\n const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n resizeHeight(textarea);\n }\n }, [value]);\n\n const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n setTextareaInput(e.target.value);\n\n if (onChange) {\n onChange(e);\n }\n\n if (grow) {\n resizeHeight(e.target);\n }\n };\n\n const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n return (\n <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n {renderLabel(label, textareaId, onColor as FormOnColor)}\n <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n <textarea\n {...rest}\n rows={rows}\n defaultValue={defaultValue}\n id={textareaId}\n className={textareaClass}\n ref={ref}\n aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n aria-invalid={!!onError}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={autoFocus}\n disabled={disabled}\n name={name}\n autoComplete={autoComplete ? autoComplete : undefined}\n placeholder={placeholder}\n readOnly={readOnly}\n required={required}\n onChange={onChangeHandler}\n value={value}\n />\n </div>\n {maxCharacters && (\n <MaxCharacters\n maxCharacters={maxCharacters}\n length={textareaInput.toString().length}\n maxText={mergedResources.characters}\n onColor={onColor}\n maxWidth={maxWidth}\n />\n )}\n </div>\n </ErrorWrapper>\n );\n};\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n","import Textarea from './Textarea';\nexport * from './Textarea';\nexport default Textarea;\n"],"mappings":"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"}

package/lib/Title.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { n as AnalyticsId } from "./constants2.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import titleStyles from "./components/Title/styles.module.scss";
 const instanceOfTitleMargin = (margin) => {
@@ -9,7 +9,7 @@ const Title = (props) => {
 	const { id, children, className, htmlMarkup = "h1", appearance = "title1", margin = 0, testId, ref } = props;
 	return /* @__PURE__ */ jsx(htmlMarkup, {
 		id,
-		className: cn(titleStyles.title, {
+		className: classNames(titleStyles.title, {
 			[titleStyles["title--feature"]]: appearance === "titleFeature",
 			[titleStyles["title--title1"]]: appearance === "title1",
 			[titleStyles["title--title2"]]: appearance === "title2",

package/lib/Title.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Title.js","names":["Title: React.FC<TitleProps>"],"sources":["../src/components/Title/utils.ts","../src/components/Title/Title.tsx"],"sourcesContent":["import type { TitleMargin } from './Title';\n\nexport const instanceOfTitleMargin = (margin: unknown): margin is TitleMargin => {\n return Object.prototype.hasOwnProperty.call(margin, 'marginTop') && Object.prototype.hasOwnProperty.call(margin, 'marginBottom');\n};\n","import classNames from 'classnames';\n\nimport { instanceOfTitleMargin } from './utils';\nimport { AnalyticsId } from '../../constants';\n\nimport titleStyles from './styles.module.scss';\n\nexport type TitleTags = 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'span';\nexport type TitleAppearances = 'titleFeature' \| 'title1' \| 'title2' \| 'title3' \| 'title4' \| 'title5' \| 'title6';\n\nexport interface TitleProps {\n children: React.ReactNode;\n /** Gives a unique id to the title /\n id?: string;\n /* Adds custom classes to the element. /\n className?: string;\n /* Adds top and bottom margin in rem. /\n margin?: number \| TitleMargin;\n /* Changes the underlying element of the title. /\n htmlMarkup?: TitleTags;\n /* Changes the appearance of the title. /\n appearance?: TitleAppearances;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* Ref passed to the heading element */\n ref?: React.Ref<HTMLHeadingElement \| null>;\n}\n\nexport const Title: React.FC<TitleProps> = (props: TitleProps) => {\n const { id, children, className, htmlMarkup = 'h1', appearance = 'title1', margin = 0, testId, ref } = props;\n const titleClasses = classNames(\n titleStyles.title,\n {\n [titleStyles['title--feature']]: appearance === 'titleFeature',\n [titleStyles['title--title1']]: appearance === 'title1',\n [titleStyles['title--title2']]: appearance === 'title2',\n [titleStyles['title--title3']]: appearance === 'title3',\n [titleStyles['title--title4']]: appearance === 'title4',\n [titleStyles['title--title5']]: appearance === 'title5',\n [titleStyles['title--title6']]: appearance === 'title6',\n },\n className\n );\n const CustomTag = htmlMarkup;\n\n const inlineStyle = instanceOfTitleMargin(margin)\n ? { marginTop: `${margin.marginTop}rem`, marginBottom: `${margin.marginBottom}rem` }\n : { marginTop: `${margin}rem`, marginBottom: `${margin}rem` };\n\n return (\n <CustomTag id={id} className={titleClasses} style={inlineStyle} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Title}>\n {children}\n </CustomTag>\n );\n};\n\nexport interface TitleMargin {\n marginTop: number;\n marginBottom: number;\n}\n\nexport default Title;\n"],"mappings":";;;;AAEA,MAAa,yBAAyB,WAA2C;AAC/E,QAAO,OAAO,UAAU,eAAe,KAAK,QAAQ,YAAY,IAAI,OAAO,UAAU,eAAe,KAAK,QAAQ,eAAe;;ACyBlI,MAAaA,SAA+B,UAAsB;CAChE,MAAM,EAAE,IAAI,UAAU,WAAW,aAAa,MAAM,aAAa,UAAU,SAAS,GAAG,QAAQ,QAAQ;AAoBvG,QACE,oBAPgB,YAOf;EAAc;EAAI,WApBA,~~GACnB~~,YAAY,OACZ;IACG,YAAY,oBAAoB,eAAe;IAC/C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;GAChD,EACD,UACD;EAQ6C,OAL1B,sBAAsB,OAAO,GAC7C;GAAE,WAAW,GAAG,OAAO,UAAU;GAAM,cAAc,GAAG,OAAO,aAAa;GAAM,GAClF;GAAE,WAAW,GAAG,OAAO;GAAM,cAAc,GAAG,OAAO;GAAM;EAGQ;EAAK,eAAa;EAAQ,oBAAkB,YAAY;EAC1H;GACS;;AAShB,IAAA,gBAAe"}
1	+ {"version":3,"file":"Title.js","names":["Title: React.FC<TitleProps>"],"sources":["../src/components/Title/utils.ts","../src/components/Title/Title.tsx"],"sourcesContent":["import type { TitleMargin } from './Title';\n\nexport const instanceOfTitleMargin = (margin: unknown): margin is TitleMargin => {\n return Object.prototype.hasOwnProperty.call(margin, 'marginTop') && Object.prototype.hasOwnProperty.call(margin, 'marginBottom');\n};\n","import classNames from 'classnames';\n\nimport { instanceOfTitleMargin } from './utils';\nimport { AnalyticsId } from '../../constants';\n\nimport titleStyles from './styles.module.scss';\n\nexport type TitleTags = 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'span';\nexport type TitleAppearances = 'titleFeature' \| 'title1' \| 'title2' \| 'title3' \| 'title4' \| 'title5' \| 'title6';\n\nexport interface TitleProps {\n children: React.ReactNode;\n /** Gives a unique id to the title /\n id?: string;\n /* Adds custom classes to the element. /\n className?: string;\n /* Adds top and bottom margin in rem. /\n margin?: number \| TitleMargin;\n /* Changes the underlying element of the title. /\n htmlMarkup?: TitleTags;\n /* Changes the appearance of the title. /\n appearance?: TitleAppearances;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* Ref passed to the heading element */\n ref?: React.Ref<HTMLHeadingElement \| null>;\n}\n\nexport const Title: React.FC<TitleProps> = (props: TitleProps) => {\n const { id, children, className, htmlMarkup = 'h1', appearance = 'title1', margin = 0, testId, ref } = props;\n const titleClasses = classNames(\n titleStyles.title,\n {\n [titleStyles['title--feature']]: appearance === 'titleFeature',\n [titleStyles['title--title1']]: appearance === 'title1',\n [titleStyles['title--title2']]: appearance === 'title2',\n [titleStyles['title--title3']]: appearance === 'title3',\n [titleStyles['title--title4']]: appearance === 'title4',\n [titleStyles['title--title5']]: appearance === 'title5',\n [titleStyles['title--title6']]: appearance === 'title6',\n },\n className\n );\n const CustomTag = htmlMarkup;\n\n const inlineStyle = instanceOfTitleMargin(margin)\n ? { marginTop: `${margin.marginTop}rem`, marginBottom: `${margin.marginBottom}rem` }\n : { marginTop: `${margin}rem`, marginBottom: `${margin}rem` };\n\n return (\n <CustomTag id={id} className={titleClasses} style={inlineStyle} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Title}>\n {children}\n </CustomTag>\n );\n};\n\nexport interface TitleMargin {\n marginTop: number;\n marginBottom: number;\n}\n\nexport default Title;\n"],"mappings":";;;;AAEA,MAAa,yBAAyB,WAA2C;AAC/E,QAAO,OAAO,UAAU,eAAe,KAAK,QAAQ,YAAY,IAAI,OAAO,UAAU,eAAe,KAAK,QAAQ,eAAe;;ACyBlI,MAAaA,SAA+B,UAAsB;CAChE,MAAM,EAAE,IAAI,UAAU,WAAW,aAAa,MAAM,aAAa,UAAU,SAAS,GAAG,QAAQ,QAAQ;AAoBvG,QACE,oBAPgB,YAOf;EAAc;EAAI,WApBA,WACnB,YAAY,OACZ;IACG,YAAY,oBAAoB,eAAe;IAC/C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;GAChD,EACD,UACD;EAQ6C,OAL1B,sBAAsB,OAAO,GAC7C;GAAE,WAAW,GAAG,OAAO,UAAU;GAAM,cAAc,GAAG,OAAO,aAAa;GAAM,GAClF;GAAE,WAAW,GAAG,OAAO;GAAM,cAAc,GAAG,OAAO;GAAM;EAGQ;EAAK,eAAa;EAAQ,oBAAkB,YAAY;EAC1H;GACS;;AAShB,IAAA,gBAAe"}

package/lib/Toast.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { t as Icon_default } from "./Icon.js";
 import { t as CheckFill_default } from "./CheckFill.js";
 import { t as useIsMobileBreakpoint } from "./useIsMobileBreakpoint.js";
 import { t as Close_default } from "./Close.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Toast/styles.module.scss";
 var Toast = ({ testId, title, message, onClose }) => {
@@ -18,7 +18,7 @@ var Toast = ({ testId, title, message, onClose }) => {
 			/* @__PURE__ */ jsx(Icon_default, {
 				size: isMobile ? IconSize.XSmall : IconSize.Small,
 				svgIcon: CheckFill_default,
-				className: cn(styles["toast__icon"], styles["toast__icon--check"])
+				className: classNames(styles["toast__icon"], styles["toast__icon--check"])
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: styles["toast__text-container"],
@@ -33,7 +33,7 @@ var Toast = ({ testId, title, message, onClose }) => {
 			/* @__PURE__ */ jsx(Close_default, {
 				onClick: handleClose,
 				color: "black",
-				className: cn(styles["toast__icon"], styles["toast__icon--close"]),
+				className: classNames(styles["toast__icon"], styles["toast__icon--close"]),
 				testId: `${testId}-close`
 			})
 		]