@helsenorge/designsystem-react 13.5.0 → 13.6.0

package/lib/Duolist.js

@@ -2,7 +2,7 @@ import { n as AnalyticsId } from "./constants2.js";
 import { n as useBreakpoint, t as Breakpoint } from "./useBreakpoint.js";
 import { t as Spacer_default } from "./Spacer.js";
 import React from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import duolistStyles from "./components/Duolist/styles.module.scss";
 const DuolistGroup = (props) => {
@@ -10,11 +10,11 @@ const DuolistGroup = (props) => {
 	const firstBold = boldColumn === "first";
 	const secondBold = boldColumn === "second";
 	const nonFormatted = format === "non-formatted";
-	const dtClassNames = cn(duolistStyles["duolist__dt"], {
+	const dtClassNames = classNames(duolistStyles["duolist__dt"], {
 		[duolistStyles["duolist__dt--bold"]]: firstBold,
 		[duolistStyles["duolist__dt--non-formatted"]]: nonFormatted
 	});
-	const ddClassNames = cn(duolistStyles["duolist__dd"], {
+	const ddClassNames = classNames(duolistStyles["duolist__dd"], {
 		[duolistStyles["duolist__dd--bold"]]: secondBold,
 		[duolistStyles["duolist__dd--non-formatted"]]: nonFormatted
 	});
@@ -22,9 +22,11 @@ const DuolistGroup = (props) => {
 		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
 			"data-separator": nonFormatted ? separator : void 0,
 			className: dtClassNames,
+			"data-testid": props.testId && `${props.testId}-term`,
 			children: term
 		}), /* @__PURE__ */ jsx("dd", {
 			className: ddClassNames,
+			"data-testid": props.testId && `${props.testId}-description`,
 			children: description
 		})] });
 	};
@@ -38,11 +40,11 @@ const Duolist = (props) => {
 	const nonFormatted = format === "non-formatted";
 	const breakpoint = useBreakpoint();
 	const useCollapsedMode = useCollapsedFromAndBelowBreakpoint && breakpoint <= Breakpoint[useCollapsedFromAndBelowBreakpoint];
-	const duolistWrapperClasses = cn({
+	const duolistWrapperClasses = classNames({
 		[duolistStyles["duolist-wrapper--border"]]: hasBorder,
 		[duolistStyles["duolist-wrapper--extra-padding-top"]]: extraPaddingTop
 	}, className);
-	const duolistClasses = cn(duolistStyles.duolist, {
+	const duolistClasses = classNames(duolistStyles.duolist, {
 		[duolistStyles["duolist--line"]]: hasLines,
 		[duolistStyles["duolist--non-formatted"]]: nonFormatted,
 		[duolistStyles["duolist--collapsed"]]: useCollapsedMode,
@@ -60,6 +62,7 @@ const Duolist = (props) => {
 				if (child === null || typeof child === "undefined") return;
 				const duolistGroup = child;
 				if (duolistGroup.type === DuolistGroup) return React.cloneElement(child, {
+					...duolistGroup.props,
 					boldColumn: duolistGroup.props.boldColumn ?? boldColumn,
 					format: duolistGroup.props.format ?? format,
 					separator: duolistGroup.props.separator ?? separator

package/lib/Duolist.js.map

@@ -1 +1 @@
-{"version":3,"file":"Duolist.js","names":["DuolistGroup: React.FC<DuolistGroupProps>","Duolist: React.FC<DuolistProps>"],"sources":["../src/components/Duolist/Duolist.tsx","../src/components/Duolist/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport Spacer from '../Spacer';\nimport { TitleProps } from '../Title';\n\nimport duolistStyles from './styles.module.scss';\n\nexport type DuolistVariants = 'normal' | 'line';\nexport type BoldColumn = 'first' | 'second' | 'none';\nexport type Border = 'no-border' | 'border';\nexport type Formats = 'formatted' | 'non-formatted';\n\nexport interface DuolistProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Label of the Duolist */\n  border?: Border;\n  /** Label of the Duolist */\n  label?: React.ReactElement<TitleProps>;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets the visual variant of the Duolist. */\n  variant?: DuolistVariants;\n  /** Sets the content of the Duolist. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Width of the description column in percentage */\n  descriptionWidth?: number;\n  /** Use collapsed mode on columns from chosen breakpoint and below. */\n  useCollapsedFromAndBelowBreakpoint?: keyof typeof Breakpoint;\n}\n\nexport interface DuolistGroupProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Sets content of the <dd> tag. */\n  description: React.ReactNode;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets content of the <dt> tag. */\n  term: React.ReactNode;\n}\n\nexport const DuolistGroup: React.FC<DuolistGroupProps> = props => {\n  const { format = 'formatted', boldColumn = format === 'non-formatted' ? 'none' : 'first', description, separator = ': ', term } = props;\n\n  const firstBold = boldColumn === 'first';\n  const secondBold = boldColumn === 'second';\n  const nonFormatted = format === 'non-formatted';\n\n  const dtClassNames = classNames(duolistStyles['duolist__dt'], {\n    [duolistStyles['duolist__dt--bold']]: firstBold,\n    [duolistStyles['duolist__dt--non-formatted']]: nonFormatted,\n  });\n  const ddClassNames = classNames(duolistStyles['duolist__dd'], {\n    [duolistStyles['duolist__dd--bold']]: secondBold,\n    [duolistStyles['duolist__dd--non-formatted']]: nonFormatted,\n  });\n\n  const renderContent = () => {\n    return (\n      <>\n        <dt data-separator={nonFormatted ? separator : undefined} className={dtClassNames}>\n          {term}\n        </dt>\n        <dd className={ddClassNames}>{description}</dd>\n      </>\n    );\n  };\n\n  return nonFormatted ? <div>{renderContent()}</div> : <>{renderContent()}</>;\n};\n\nexport const Duolist: React.FC<DuolistProps> = props => {\n  const {\n    boldColumn,\n    border = 'no-border',\n    descriptionWidth,\n    label,\n    format = 'formatted',\n    separator,\n    variant = 'normal',\n    children,\n    className,\n    testId,\n    useCollapsedFromAndBelowBreakpoint,\n  } = props;\n\n  const hasBorder = border === 'border';\n  const hasLines = variant === 'line';\n  const extraPaddingTop = hasBorder && (label || hasLines);\n  const nonFormatted = format === 'non-formatted';\n  const breakpoint = useBreakpoint();\n  const useCollapsedMode = useCollapsedFromAndBelowBreakpoint && breakpoint <= Breakpoint[useCollapsedFromAndBelowBreakpoint];\n\n  const duolistWrapperClasses = classNames(\n    {\n      [duolistStyles['duolist-wrapper--border']]: hasBorder,\n      [duolistStyles['duolist-wrapper--extra-padding-top']]: extraPaddingTop,\n    },\n    className\n  );\n\n  const duolistClasses = classNames(duolistStyles.duolist, {\n    [duolistStyles['duolist--line']]: hasLines,\n    [duolistStyles['duolist--non-formatted']]: nonFormatted,\n    [duolistStyles['duolist--collapsed']]: useCollapsedMode,\n    [duolistStyles['duolist--not-collapsed']]: !useCollapsedMode,\n  });\n\n  const duolistColumnStyle = descriptionWidth ? descriptionWidth + '%' : 'minmax(60%, 1fr)';\n\n  return (\n    <div className={duolistWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.Duolist}>\n      {label && (\n        <>\n          {label}\n          <Spacer />\n        </>\n      )}\n      <dl\n        style={!nonFormatted ? { gridTemplateColumns: useCollapsedMode ? `1fr` : `auto ${duolistColumnStyle}` } : undefined}\n        className={duolistClasses}\n      >\n        {React.Children.map(children, (child: React.ReactNode | React.ReactElement<DuolistGroupProps>) => {\n          if (child === null || typeof child === 'undefined') return;\n          const duolistGroup = child as React.ReactElement<DuolistGroupProps>;\n          if (duolistGroup.type === DuolistGroup) {\n            return React.cloneElement(child as React.ReactElement<DuolistGroupProps>, {\n              boldColumn: duolistGroup.props.boldColumn ?? boldColumn,\n              format: duolistGroup.props.format ?? format,\n              separator: duolistGroup.props.separator ?? separator,\n            });\n          }\n        })}\n      </dl>\n    </div>\n  );\n};\n\nexport default Duolist;\n","import Duolist from './Duolist';\nexport * from './Duolist';\nexport default Duolist;\n"],"mappings":";;;;;;;AAsDA,MAAaA,gBAA4C,UAAS;CAChE,MAAM,EAAE,SAAS,aAAa,aAAa,WAAW,kBAAkB,SAAS,SAAS,aAAa,YAAY,MAAM,SAAS;CAElI,MAAM,YAAY,eAAe;CACjC,MAAM,aAAa,eAAe;CAClC,MAAM,eAAe,WAAW;CAEhC,MAAM,eAAe,GAAW,cAAc,gBAAgB;GAC3D,cAAc,uBAAuB;GACrC,cAAc,gCAAgC;EAChD,CAAC;CACF,MAAM,eAAe,GAAW,cAAc,gBAAgB;GAC3D,cAAc,uBAAuB;GACrC,cAAc,gCAAgC;EAChD,CAAC;CAEF,MAAM,sBAAsB;AAC1B,SACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAA;GAAG,kBAAgB,eAAe,YAAY,KAAA;GAAW,WAAW;aAClE;IACE,EACL,oBAAC,MAAA;GAAG,WAAW;aAAe;IAAiB,CAAA,EAAA,CAC9C;;AAIP,QAAO,eAAe,oBAAC,OAAA,EAAA,UAAK,eAAe,EAAA,CAAO,GAAG,oBAAA,UAAA,EAAA,UAAG,eAAe,EAAA,CAAI;;AAG7E,MAAaC,WAAkC,UAAS;CACtD,MAAM,EACJ,YACA,SAAS,aACT,kBACA,OACA,SAAS,aACT,WACA,UAAU,UACV,UACA,WACA,QACA,uCACE;CAEJ,MAAM,YAAY,WAAW;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,kBAAkB,cAAc,SAAS;CAC/C,MAAM,eAAe,WAAW;CAChC,MAAM,aAAa,eAAe;CAClC,MAAM,mBAAmB,sCAAsC,cAAc,WAAW;CAExF,MAAM,wBAAwB,GAC5B;GACG,cAAc,6BAA6B;GAC3C,cAAc,wCAAwC;EACxD,EACD,UACD;CAED,MAAM,iBAAiB,GAAW,cAAc,SAAS;GACtD,cAAc,mBAAmB;GACjC,cAAc,4BAA4B;GAC1C,cAAc,wBAAwB;GACtC,cAAc,4BAA4B,CAAC;EAC7C,CAAC;CAEF,MAAM,qBAAqB,mBAAmB,mBAAmB,MAAM;AAEvE,QACE,qBAAC,OAAA;EAAI,WAAW;EAAuB,eAAa;EAAQ,oBAAkB,YAAY;aACvF,SACC,qBAAA,UAAA,EAAA,UAAA,CACG,OACD,oBAAC,gBAAA,EAAA,CAAS,CAAA,EAAA,CACT,EAEL,oBAAC,MAAA;GACC,OAAO,CAAC,eAAe,EAAE,qBAAqB,mBAAmB,QAAQ,QAAQ,sBAAsB,GAAG,KAAA;GAC1G,WAAW;aAEV,MAAM,SAAS,IAAI,WAAW,UAAmE;AAChG,QAAI,UAAU,QAAQ,OAAO,UAAU,YAAa;IACpD,MAAM,eAAe;AACrB,QAAI,aAAa,SAAS,aACxB,QAAO,MAAM,aAAa,OAAgD;KACxE,YAAY,aAAa,MAAM,cAAc;KAC7C,QAAQ,aAAa,MAAM,UAAU;KACrC,WAAW,aAAa,MAAM,aAAa;KAC5C,CAAC;KAEJ;IACC,CAAA;GACD;;ACjJV,IAAA,oBDqJe"}
+{"version":3,"file":"Duolist.js","names":["DuolistGroup: React.FC<DuolistGroupProps>","Duolist: React.FC<DuolistProps>"],"sources":["../src/components/Duolist/Duolist.tsx","../src/components/Duolist/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { TitleProps } from '../Title';\n\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport Spacer from '../Spacer';\n\nimport duolistStyles from './styles.module.scss';\n\nexport type DuolistVariants = 'normal' | 'line';\nexport type BoldColumn = 'first' | 'second' | 'none';\nexport type Border = 'no-border' | 'border';\nexport type Formats = 'formatted' | 'non-formatted';\n\nexport interface DuolistProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Label of the Duolist */\n  border?: Border;\n  /** Label of the Duolist */\n  label?: React.ReactElement<TitleProps>;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets the visual variant of the Duolist. */\n  variant?: DuolistVariants;\n  /** Sets the content of the Duolist. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Width of the description column in percentage */\n  descriptionWidth?: number;\n  /** Use collapsed mode on columns from chosen breakpoint and below. */\n  useCollapsedFromAndBelowBreakpoint?: keyof typeof Breakpoint;\n}\n\nexport interface DuolistGroupProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Sets content of the <dd> tag. */\n  description: React.ReactNode;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets content of the <dt> tag. */\n  term: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const DuolistGroup: React.FC<DuolistGroupProps> = props => {\n  const { format = 'formatted', boldColumn = format === 'non-formatted' ? 'none' : 'first', description, separator = ': ', term } = props;\n\n  const firstBold = boldColumn === 'first';\n  const secondBold = boldColumn === 'second';\n  const nonFormatted = format === 'non-formatted';\n\n  const dtClassNames = classNames(duolistStyles['duolist__dt'], {\n    [duolistStyles['duolist__dt--bold']]: firstBold,\n    [duolistStyles['duolist__dt--non-formatted']]: nonFormatted,\n  });\n  const ddClassNames = classNames(duolistStyles['duolist__dd'], {\n    [duolistStyles['duolist__dd--bold']]: secondBold,\n    [duolistStyles['duolist__dd--non-formatted']]: nonFormatted,\n  });\n\n  const renderContent = () => {\n    return (\n      <>\n        <dt\n          data-separator={nonFormatted ? separator : undefined}\n          className={dtClassNames}\n          data-testid={props.testId && `${props.testId}-term`}\n        >\n          {term}\n        </dt>\n        <dd className={ddClassNames} data-testid={props.testId && `${props.testId}-description`}>\n          {description}\n        </dd>\n      </>\n    );\n  };\n\n  return nonFormatted ? <div>{renderContent()}</div> : <>{renderContent()}</>;\n};\n\nexport const Duolist: React.FC<DuolistProps> = props => {\n  const {\n    boldColumn,\n    border = 'no-border',\n    descriptionWidth,\n    label,\n    format = 'formatted',\n    separator,\n    variant = 'normal',\n    children,\n    className,\n    testId,\n    useCollapsedFromAndBelowBreakpoint,\n  } = props;\n\n  const hasBorder = border === 'border';\n  const hasLines = variant === 'line';\n  const extraPaddingTop = hasBorder && (label || hasLines);\n  const nonFormatted = format === 'non-formatted';\n  const breakpoint = useBreakpoint();\n  const useCollapsedMode = useCollapsedFromAndBelowBreakpoint && breakpoint <= Breakpoint[useCollapsedFromAndBelowBreakpoint];\n\n  const duolistWrapperClasses = classNames(\n    {\n      [duolistStyles['duolist-wrapper--border']]: hasBorder,\n      [duolistStyles['duolist-wrapper--extra-padding-top']]: extraPaddingTop,\n    },\n    className\n  );\n\n  const duolistClasses = classNames(duolistStyles.duolist, {\n    [duolistStyles['duolist--line']]: hasLines,\n    [duolistStyles['duolist--non-formatted']]: nonFormatted,\n    [duolistStyles['duolist--collapsed']]: useCollapsedMode,\n    [duolistStyles['duolist--not-collapsed']]: !useCollapsedMode,\n  });\n\n  const duolistColumnStyle = descriptionWidth ? descriptionWidth + '%' : 'minmax(60%, 1fr)';\n\n  return (\n    <div className={duolistWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.Duolist}>\n      {label && (\n        <>\n          {label}\n          <Spacer />\n        </>\n      )}\n      <dl\n        style={!nonFormatted ? { gridTemplateColumns: useCollapsedMode ? `1fr` : `auto ${duolistColumnStyle}` } : undefined}\n        className={duolistClasses}\n      >\n        {React.Children.map(children, (child: React.ReactNode | React.ReactElement<DuolistGroupProps>) => {\n          if (child === null || typeof child === 'undefined') return;\n          const duolistGroup = child as React.ReactElement<DuolistGroupProps>;\n          if (duolistGroup.type === DuolistGroup) {\n            return React.cloneElement(child as React.ReactElement<DuolistGroupProps>, {\n              ...duolistGroup.props,\n              boldColumn: duolistGroup.props.boldColumn ?? boldColumn,\n              format: duolistGroup.props.format ?? format,\n              separator: duolistGroup.props.separator ?? separator,\n            });\n          }\n        })}\n      </dl>\n    </div>\n  );\n};\n\nexport default Duolist;\n","import Duolist from './Duolist';\nexport * from './Duolist';\nexport default Duolist;\n"],"mappings":";;;;;;;AAyDA,MAAaA,gBAA4C,UAAS;CAChE,MAAM,EAAE,SAAS,aAAa,aAAa,WAAW,kBAAkB,SAAS,SAAS,aAAa,YAAY,MAAM,SAAS;CAElI,MAAM,YAAY,eAAe;CACjC,MAAM,aAAa,eAAe;CAClC,MAAM,eAAe,WAAW;CAEhC,MAAM,eAAe,WAAW,cAAc,gBAAgB;GAC3D,cAAc,uBAAuB;GACrC,cAAc,gCAAgC;EAChD,CAAC;CACF,MAAM,eAAe,WAAW,cAAc,gBAAgB;GAC3D,cAAc,uBAAuB;GACrC,cAAc,gCAAgC;EAChD,CAAC;CAEF,MAAM,sBAAsB;AAC1B,SACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAA;GACC,kBAAgB,eAAe,YAAY,KAAA;GAC3C,WAAW;GACX,eAAa,MAAM,UAAU,GAAG,MAAM,OAAO;aAE5C;IACE,EACL,oBAAC,MAAA;GAAG,WAAW;GAAc,eAAa,MAAM,UAAU,GAAG,MAAM,OAAO;aACvE;IACE,CAAA,EAAA,CACJ;;AAIP,QAAO,eAAe,oBAAC,OAAA,EAAA,UAAK,eAAe,EAAA,CAAO,GAAG,oBAAA,UAAA,EAAA,UAAG,eAAe,EAAA,CAAI;;AAG7E,MAAaC,WAAkC,UAAS;CACtD,MAAM,EACJ,YACA,SAAS,aACT,kBACA,OACA,SAAS,aACT,WACA,UAAU,UACV,UACA,WACA,QACA,uCACE;CAEJ,MAAM,YAAY,WAAW;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,kBAAkB,cAAc,SAAS;CAC/C,MAAM,eAAe,WAAW;CAChC,MAAM,aAAa,eAAe;CAClC,MAAM,mBAAmB,sCAAsC,cAAc,WAAW;CAExF,MAAM,wBAAwB,WAC5B;GACG,cAAc,6BAA6B;GAC3C,cAAc,wCAAwC;EACxD,EACD,UACD;CAED,MAAM,iBAAiB,WAAW,cAAc,SAAS;GACtD,cAAc,mBAAmB;GACjC,cAAc,4BAA4B;GAC1C,cAAc,wBAAwB;GACtC,cAAc,4BAA4B,CAAC;EAC7C,CAAC;CAEF,MAAM,qBAAqB,mBAAmB,mBAAmB,MAAM;AAEvE,QACE,qBAAC,OAAA;EAAI,WAAW;EAAuB,eAAa;EAAQ,oBAAkB,YAAY;aACvF,SACC,qBAAA,UAAA,EAAA,UAAA,CACG,OACD,oBAAC,gBAAA,EAAA,CAAS,CAAA,EAAA,CACT,EAEL,oBAAC,MAAA;GACC,OAAO,CAAC,eAAe,EAAE,qBAAqB,mBAAmB,QAAQ,QAAQ,sBAAsB,GAAG,KAAA;GAC1G,WAAW;aAEV,MAAM,SAAS,IAAI,WAAW,UAAmE;AAChG,QAAI,UAAU,QAAQ,OAAO,UAAU,YAAa;IACpD,MAAM,eAAe;AACrB,QAAI,aAAa,SAAS,aACxB,QAAO,MAAM,aAAa,OAAgD;KACxE,GAAG,aAAa;KAChB,YAAY,aAAa,MAAM,cAAc;KAC7C,QAAQ,aAAa,MAAM,UAAU;KACrC,WAAW,aAAa,MAAM,aAAa;KAC5C,CAAC;KAEJ;IACC,CAAA;GACD;;AC3JV,IAAA,oBD+Je"}

package/lib/ElementHeader.js

@@ -10,7 +10,7 @@ import { t as Highlighter_default } from "./Highlighter.js";
 import { n as ElementHeaderText_default } from "./ElementHeaderText.js";
 import { t as StatusDotList_default } from "./StatusDotList.js";
 import React from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/ElementHeader/styles.module.scss";
 const renderElementHeader = (element, options) => {
@@ -74,17 +74,17 @@ const ElementHeaderRoot = (props) => {
 	const contentIsString = typeof children === "string";
 	const mappedChildren = mapChildren(children);
 	const hasStatusDots = !!mappedChildren?.statusDotChildren?.length || !!mappedChildren?.statusDotMCChild;
-	const listLabelClasses = cn(styles["element-header"], { [styles["element-header--compact"]]: size === "compact" }, className);
-	const badgeContainerClasses = cn(styles["element-header__badge-container"]);
-	const badgeClasses = cn(styles["element-header__badge"]);
-	const statusdotContainerClasses = cn(styles["element-header__statusdot-container"]);
-	const chevronClasses = cn(styles["element-header__chevron"]);
-	const contentClasses = cn(styles["element-header__content"], {
+	const listLabelClasses = classNames(styles["element-header"], { [styles["element-header--compact"]]: size === "compact" }, className);
+	const badgeContainerClasses = classNames(styles["element-header__badge-container"]);
+	const badgeClasses = classNames(styles["element-header__badge"]);
+	const statusdotContainerClasses = classNames(styles["element-header__statusdot-container"]);
+	const chevronClasses = classNames(styles["element-header__chevron"]);
+	const contentClasses = classNames(styles["element-header__content"], {
 		[styles["element-header__content--element"]]: !contentIsString,
 		[styles["element-header__content--compact"]]: size === "compact"
 	});
-	const iconClasses = cn(styles["element-header__icon"], { [styles["element-header__icon--with-statusdot"]]: hasStatusDots });
-	const avatarClasses = cn(styles["element-header__avatar"], {});
+	const iconClasses = classNames(styles["element-header__icon"], { [styles["element-header__icon--with-statusdot"]]: hasStatusDots });
+	const avatarClasses = classNames(styles["element-header__avatar"], {});
 	const CustomTag = titleHtmlMarkup;
 	const iconPropIsIconComponent = isComponent(icon, Icon_default);
 	const iconPropIsLazyIconComponent = !iconPropIsIconComponent && isComponent(icon, LazyIcon_default);

package/lib/ElementHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElementHeader.js","names":["mapChildren: ChildrenMapper","avatarChild: React.ReactElement<AvatarProps> | undefined","badgeChildren: React.ReactElement<BadgeProps>[]","statusDotChildren: React.ReactElement<StatusDotProps>[]","statusDotMCChild: React.ReactElement<StatusDotListProps> | undefined","elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[]","stringChildren: string[]","remainingChildren: React.ReactNode[]","ElementHeaderRoot: ElementHeaderType"],"sources":["../src/components/ElementHeader/ElementHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport ElementHeaderText, { ElementHeaderTextProps, ElementHeaderTextType } from './ElementHeaderText/ElementHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport Avatar, { AvatarProps, AvatarSize, AvatarType } from '../Avatar';\nimport Badge, { BadgeProps, BadgeType } from '../Badge';\nimport Icon, { IconProps, IconSize, SvgIcon } from '../Icon';\nimport StatusDot, { StatusDotProps, StatusDotType } from '../StatusDot';\nimport { TitleTags } from '../Title';\nimport StatusDotList from './StatusDotList';\nimport Highlighter from '../Highlighter';\nimport LazyIcon, { LazyIconProps } from '../LazyIcon';\nimport { StatusDotListProps, StatusDotListType } from './StatusDotList/StatusDotList';\n\nimport styles from './styles.module.scss';\n\nexport type ElementHeaderSize = 'compact' | 'small' | 'medium' | 'large';\nexport type ParentType = 'linklist' | 'expanderlist';\n\nexport interface ElementHeaderType extends React.FC<ElementHeaderProps> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ElementHeaderText?: ElementHeaderTextType;\n  StatusDot?: StatusDotType;\n  StatusDotList?: StatusDotListType;\n}\n\nexport const renderElementHeader = (\n  element: React.ReactNode,\n  options: Pick<\n    ElementHeaderProps,\n    'titleHtmlMarkup' | 'isHovered' | 'size' | 'parentType' | 'chevronIcon' | 'icon' | 'highlightText' | 'closeButton'\n  >\n): React.ReactElement | undefined => {\n  const { titleHtmlMarkup, isHovered, size, parentType, chevronIcon, icon, highlightText, closeButton } = options;\n\n  if (isComponent<ElementHeaderProps>(element, ElementHeader)) {\n    return React.cloneElement(element, {\n      chevronIcon,\n      icon,\n      isHovered,\n      size,\n      parentType,\n      highlightText,\n      closeButton,\n    });\n  }\n  if (element) {\n    return (\n      <ElementHeader\n        highlightText={highlightText}\n        titleHtmlMarkup={titleHtmlMarkup}\n        parentType={parentType}\n        chevronIcon={chevronIcon}\n        icon={icon}\n        isHovered={isHovered}\n        size={size}\n        closeButton={closeButton}\n      >\n        {element}\n      </ElementHeader>\n    );\n  }\n};\n\nexport interface ElementHeaderProps {\n  /** Adds custom classes to the ElementHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ElementHeader */\n  chevronIcon?: SvgIcon;\n  /** Close button to be rendered inside of ElementHeader. This renders in place of chevronIcon */\n  closeButton?: React.ReactElement;\n  /** Children to be rendered inside of ElementHeader */\n  children: React.ReactNode;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** icon to be rendered inside of ElementHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Adjusts styling based on parent */\n  parentType?: ParentType;\n  /** Changes size of the ElementHeader. */\n  size?: ElementHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Highlights text in title. Used for search results */\n  highlightText?: string;\n}\n\ninterface ElementHeaderChildren {\n  avatarChild?: React.ReactElement<AvatarProps>;\n  elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[];\n  badgeChildren?: React.ReactElement<BadgeProps>[];\n  statusDotChildren?: React.ReactElement<StatusDotProps>[];\n  statusDotMCChild?: React.ReactElement<StatusDotListProps>;\n  elementChild?: React.ReactElement;\n  stringChildren: string[];\n  remainingChildren: React.ReactNode[];\n}\n\ntype ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ElementHeaderChildren | undefined;\n\nexport const mapChildren: ChildrenMapper = (children, isJsxChild = false) => {\n  let avatarChild: React.ReactElement<AvatarProps> | undefined;\n  const badgeChildren: React.ReactElement<BadgeProps>[] = [];\n  const statusDotChildren: React.ReactElement<StatusDotProps>[] = [];\n  let statusDotMCChild: React.ReactElement<StatusDotListProps> | undefined;\n  const elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[] = [];\n  const stringChildren: string[] = [];\n  const remainingChildren: React.ReactNode[] = [];\n\n  React.Children.forEach(children, child => {\n    if (child === null || typeof child === 'undefined') return;\n    if (isComponent<AvatarProps>(child, Avatar)) {\n      avatarChild = child;\n    } else if (isComponent<ElementHeaderTextProps>(child, ElementHeaderText)) {\n      elementHeaderTextChildren.push(child);\n    } else if (isComponent<BadgeProps>(child, Badge)) {\n      badgeChildren.push(child);\n    } else if (isComponent<StatusDotListProps>(child, StatusDotList)) {\n      statusDotMCChild = child;\n    } else if (isComponent<StatusDotProps>(child, StatusDot)) {\n      statusDotChildren.push(child);\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined ||\n    elementHeaderTextChildren.length > 0 ||\n    statusDotChildren.length > 0 ||\n    statusDotMCChild !== undefined ||\n    (badgeChildren !== undefined && stringChildren.length > 0);\n  const noRemainingRecursiveChildren =\n    remainingChildren.length === 0 ||\n    (isComponentWithChildren(remainingChildren[0]) && typeof remainingChildren[0]?.props?.children === 'undefined');\n\n  if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {\n    return {\n      avatarChild,\n      elementHeaderTextChildren: elementHeaderTextChildren,\n      badgeChildren,\n      statusDotChildren,\n      statusDotMCChild,\n      stringChildren,\n      remainingChildren,\n    };\n  }\n\n  if (isComponentWithChildren(remainingChildren[0])) {\n    return mapChildren(remainingChildren[0]?.props?.children, true);\n  }\n};\n\nexport const ElementHeaderRoot: ElementHeaderType = props => {\n  const {\n    className = '',\n    titleHtmlMarkup = 'h2',\n    parentType = 'linklist',\n    chevronIcon,\n    closeButton,\n    children,\n    icon,\n    isHovered,\n    size,\n    testId,\n    highlightText,\n  } = props;\n  const breakpoint = useBreakpoint();\n  const showIcon = size !== 'small' && !!icon;\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n  const hasStatusDots = !!mappedChildren?.statusDotChildren?.length || !!mappedChildren?.statusDotMCChild;\n\n  const listLabelClasses = cn(styles['element-header'], { [styles['element-header--compact']]: size === 'compact' }, className);\n  const badgeContainerClasses = cn(styles['element-header__badge-container']);\n  const badgeClasses = cn(styles['element-header__badge']);\n  const statusdotContainerClasses = cn(styles['element-header__statusdot-container']);\n  const chevronClasses = cn(styles['element-header__chevron']);\n  const contentClasses = cn(styles['element-header__content'], {\n    [styles['element-header__content--element']]: !contentIsString,\n    [styles['element-header__content--compact']]: size === 'compact',\n  });\n  const iconClasses = cn(styles['element-header__icon'], { [styles['element-header__icon--with-statusdot']]: hasStatusDots });\n  const avatarClasses = cn(styles['element-header__avatar'], {});\n  const CustomTag = titleHtmlMarkup;\n  const iconPropIsIconComponent = isComponent<IconProps>(icon, Icon);\n  const iconPropIsLazyIconComponent = !iconPropIsIconComponent && isComponent<LazyIconProps>(icon, LazyIcon);\n\n  let iconComponent;\n  if (iconPropIsIconComponent) {\n    iconComponent = React.cloneElement(icon as React.ReactElement<IconProps>, {\n      size: breakpoint < Breakpoint.md ? IconSize.XSmall : IconSize.Small,\n      isHovered,\n    });\n  } else if (iconPropIsLazyIconComponent) {\n    iconComponent = React.cloneElement(icon as React.ReactElement<LazyIconProps>, {\n      size: breakpoint < Breakpoint.md ? IconSize.XSmall : IconSize.Small,\n      isHovered,\n    });\n  } else {\n    iconComponent = icon;\n  }\n\n  return (\n    <span data-testid={testId} className={listLabelClasses}>\n      {showIcon && icon && <span className={iconClasses}>{iconComponent}</span>}\n      {size !== 'small' && mappedChildren?.avatarChild && (\n        <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n      )}\n\n      <span className={contentClasses} data-hasstatusdots={hasStatusDots}>\n        {mappedChildren?.elementHeaderTextChildren}\n        {!!mappedChildren?.stringChildren.length && (\n          <CustomTag className={styles['element-header__title']}>\n            <Highlighter searchText={highlightText}>{mappedChildren.stringChildren}</Highlighter>\n          </CustomTag>\n        )}\n        <Highlighter searchText={highlightText}>{mappedChildren?.remainingChildren}</Highlighter>\n      </span>\n\n      {hasStatusDots && (\n        <span className={statusdotContainerClasses}>\n          {!!mappedChildren?.statusDotChildren && <StatusDotList>{mappedChildren.statusDotChildren}</StatusDotList>}\n          {!!mappedChildren?.statusDotMCChild && mappedChildren?.statusDotMCChild}\n        </span>\n      )}\n\n      <span className={badgeContainerClasses}>\n        {mappedChildren?.badgeChildren &&\n          mappedChildren.badgeChildren.map((badgeChild, index) => {\n            return (\n              <span key={index} className={badgeClasses} data-parenttype={parentType}>\n                {badgeChild}\n              </span>\n            );\n          })}\n      </span>\n      {chevronIcon && typeof closeButton === 'undefined' && (\n        <span className={chevronClasses} data-parenttype={parentType}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n      {closeButton && (\n        <span className={chevronClasses} data-parenttype={parentType}>\n          {closeButton}\n        </span>\n      )}\n    </span>\n  );\n};\n\ntype ElementHeaderComponent = typeof ElementHeaderRoot & {\n  Text: React.FC<ElementHeaderTextProps>;\n  StatusDotList: React.FC<StatusDotListProps>;\n};\nElementHeaderRoot.displayName = 'ElementHeader';\nconst ElementHeader = ElementHeaderRoot as ElementHeaderComponent;\nElementHeader.Text = ElementHeaderText;\nElementHeader.Text.displayName = 'ElementHeader.Text';\nElementHeader.StatusDotList = StatusDotList;\nElementHeader.StatusDotList.displayName = 'ElementHeader.StatusDotList';\n\nexport default ElementHeader;\n"],"mappings":"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"}
+{"version":3,"file":"ElementHeader.js","names":["mapChildren: ChildrenMapper","avatarChild: React.ReactElement<AvatarProps> | undefined","badgeChildren: React.ReactElement<BadgeProps>[]","statusDotChildren: React.ReactElement<StatusDotProps>[]","statusDotMCChild: React.ReactElement<StatusDotListProps> | undefined","elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[]","stringChildren: string[]","remainingChildren: React.ReactNode[]","ElementHeaderRoot: ElementHeaderType"],"sources":["../src/components/ElementHeader/ElementHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport ElementHeaderText, { ElementHeaderTextProps, ElementHeaderTextType } from './ElementHeaderText/ElementHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport Avatar, { AvatarProps, AvatarSize, AvatarType } from '../Avatar';\nimport Badge, { BadgeProps, BadgeType } from '../Badge';\nimport Icon, { IconProps, IconSize, SvgIcon } from '../Icon';\nimport StatusDot, { StatusDotProps, StatusDotType } from '../StatusDot';\nimport { TitleTags } from '../Title';\nimport StatusDotList from './StatusDotList';\nimport Highlighter from '../Highlighter';\nimport LazyIcon, { LazyIconProps } from '../LazyIcon';\nimport { StatusDotListProps, StatusDotListType } from './StatusDotList/StatusDotList';\n\nimport styles from './styles.module.scss';\n\nexport type ElementHeaderSize = 'compact' | 'small' | 'medium' | 'large';\nexport type ParentType = 'linklist' | 'expanderlist';\n\nexport interface ElementHeaderType extends React.FC<ElementHeaderProps> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ElementHeaderText?: ElementHeaderTextType;\n  StatusDot?: StatusDotType;\n  StatusDotList?: StatusDotListType;\n}\n\nexport const renderElementHeader = (\n  element: React.ReactNode,\n  options: Pick<\n    ElementHeaderProps,\n    'titleHtmlMarkup' | 'isHovered' | 'size' | 'parentType' | 'chevronIcon' | 'icon' | 'highlightText' | 'closeButton'\n  >\n): React.ReactElement | undefined => {\n  const { titleHtmlMarkup, isHovered, size, parentType, chevronIcon, icon, highlightText, closeButton } = options;\n\n  if (isComponent<ElementHeaderProps>(element, ElementHeader)) {\n    return React.cloneElement(element, {\n      chevronIcon,\n      icon,\n      isHovered,\n      size,\n      parentType,\n      highlightText,\n      closeButton,\n    });\n  }\n  if (element) {\n    return (\n      <ElementHeader\n        highlightText={highlightText}\n        titleHtmlMarkup={titleHtmlMarkup}\n        parentType={parentType}\n        chevronIcon={chevronIcon}\n        icon={icon}\n        isHovered={isHovered}\n        size={size}\n        closeButton={closeButton}\n      >\n        {element}\n      </ElementHeader>\n    );\n  }\n};\n\nexport interface ElementHeaderProps {\n  /** Adds custom classes to the ElementHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ElementHeader */\n  chevronIcon?: SvgIcon;\n  /** Close button to be rendered inside of ElementHeader. This renders in place of chevronIcon */\n  closeButton?: React.ReactElement;\n  /** Children to be rendered inside of ElementHeader */\n  children: React.ReactNode;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** icon to be rendered inside of ElementHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Adjusts styling based on parent */\n  parentType?: ParentType;\n  /** Changes size of the ElementHeader. */\n  size?: ElementHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Highlights text in title. Used for search results */\n  highlightText?: string;\n}\n\ninterface ElementHeaderChildren {\n  avatarChild?: React.ReactElement<AvatarProps>;\n  elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[];\n  badgeChildren?: React.ReactElement<BadgeProps>[];\n  statusDotChildren?: React.ReactElement<StatusDotProps>[];\n  statusDotMCChild?: React.ReactElement<StatusDotListProps>;\n  elementChild?: React.ReactElement;\n  stringChildren: string[];\n  remainingChildren: React.ReactNode[];\n}\n\ntype ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ElementHeaderChildren | undefined;\n\nexport const mapChildren: ChildrenMapper = (children, isJsxChild = false) => {\n  let avatarChild: React.ReactElement<AvatarProps> | undefined;\n  const badgeChildren: React.ReactElement<BadgeProps>[] = [];\n  const statusDotChildren: React.ReactElement<StatusDotProps>[] = [];\n  let statusDotMCChild: React.ReactElement<StatusDotListProps> | undefined;\n  const elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[] = [];\n  const stringChildren: string[] = [];\n  const remainingChildren: React.ReactNode[] = [];\n\n  React.Children.forEach(children, child => {\n    if (child === null || typeof child === 'undefined') return;\n    if (isComponent<AvatarProps>(child, Avatar)) {\n      avatarChild = child;\n    } else if (isComponent<ElementHeaderTextProps>(child, ElementHeaderText)) {\n      elementHeaderTextChildren.push(child);\n    } else if (isComponent<BadgeProps>(child, Badge)) {\n      badgeChildren.push(child);\n    } else if (isComponent<StatusDotListProps>(child, StatusDotList)) {\n      statusDotMCChild = child;\n    } else if (isComponent<StatusDotProps>(child, StatusDot)) {\n      statusDotChildren.push(child);\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined ||\n    elementHeaderTextChildren.length > 0 ||\n    statusDotChildren.length > 0 ||\n    statusDotMCChild !== undefined ||\n    (badgeChildren !== undefined && stringChildren.length > 0);\n  const noRemainingRecursiveChildren =\n    remainingChildren.length === 0 ||\n    (isComponentWithChildren(remainingChildren[0]) && typeof remainingChildren[0]?.props?.children === 'undefined');\n\n  if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {\n    return {\n      avatarChild,\n      elementHeaderTextChildren: elementHeaderTextChildren,\n      badgeChildren,\n      statusDotChildren,\n      statusDotMCChild,\n      stringChildren,\n      remainingChildren,\n    };\n  }\n\n  if (isComponentWithChildren(remainingChildren[0])) {\n    return mapChildren(remainingChildren[0]?.props?.children, true);\n  }\n};\n\nexport const ElementHeaderRoot: ElementHeaderType = props => {\n  const {\n    className = '',\n    titleHtmlMarkup = 'h2',\n    parentType = 'linklist',\n    chevronIcon,\n    closeButton,\n    children,\n    icon,\n    isHovered,\n    size,\n    testId,\n    highlightText,\n  } = props;\n  const breakpoint = useBreakpoint();\n  const showIcon = size !== 'small' && !!icon;\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n  const hasStatusDots = !!mappedChildren?.statusDotChildren?.length || !!mappedChildren?.statusDotMCChild;\n\n  const listLabelClasses = cn(styles['element-header'], { [styles['element-header--compact']]: size === 'compact' }, className);\n  const badgeContainerClasses = cn(styles['element-header__badge-container']);\n  const badgeClasses = cn(styles['element-header__badge']);\n  const statusdotContainerClasses = cn(styles['element-header__statusdot-container']);\n  const chevronClasses = cn(styles['element-header__chevron']);\n  const contentClasses = cn(styles['element-header__content'], {\n    [styles['element-header__content--element']]: !contentIsString,\n    [styles['element-header__content--compact']]: size === 'compact',\n  });\n  const iconClasses = cn(styles['element-header__icon'], { [styles['element-header__icon--with-statusdot']]: hasStatusDots });\n  const avatarClasses = cn(styles['element-header__avatar'], {});\n  const CustomTag = titleHtmlMarkup;\n  const iconPropIsIconComponent = isComponent<IconProps>(icon, Icon);\n  const iconPropIsLazyIconComponent = !iconPropIsIconComponent && isComponent<LazyIconProps>(icon, LazyIcon);\n\n  let iconComponent;\n  if (iconPropIsIconComponent) {\n    iconComponent = React.cloneElement(icon as React.ReactElement<IconProps>, {\n      size: breakpoint < Breakpoint.md ? IconSize.XSmall : IconSize.Small,\n      isHovered,\n    });\n  } else if (iconPropIsLazyIconComponent) {\n    iconComponent = React.cloneElement(icon as React.ReactElement<LazyIconProps>, {\n      size: breakpoint < Breakpoint.md ? IconSize.XSmall : IconSize.Small,\n      isHovered,\n    });\n  } else {\n    iconComponent = icon;\n  }\n\n  return (\n    <span data-testid={testId} className={listLabelClasses}>\n      {showIcon && icon && <span className={iconClasses}>{iconComponent}</span>}\n      {size !== 'small' && mappedChildren?.avatarChild && (\n        <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n      )}\n\n      <span className={contentClasses} data-hasstatusdots={hasStatusDots}>\n        {mappedChildren?.elementHeaderTextChildren}\n        {!!mappedChildren?.stringChildren.length && (\n          <CustomTag className={styles['element-header__title']}>\n            <Highlighter searchText={highlightText}>{mappedChildren.stringChildren}</Highlighter>\n          </CustomTag>\n        )}\n        <Highlighter searchText={highlightText}>{mappedChildren?.remainingChildren}</Highlighter>\n      </span>\n\n      {hasStatusDots && (\n        <span className={statusdotContainerClasses}>\n          {!!mappedChildren?.statusDotChildren && <StatusDotList>{mappedChildren.statusDotChildren}</StatusDotList>}\n          {!!mappedChildren?.statusDotMCChild && mappedChildren?.statusDotMCChild}\n        </span>\n      )}\n\n      <span className={badgeContainerClasses}>\n        {mappedChildren?.badgeChildren &&\n          mappedChildren.badgeChildren.map((badgeChild, index) => {\n            return (\n              <span key={index} className={badgeClasses} data-parenttype={parentType}>\n                {badgeChild}\n              </span>\n            );\n          })}\n      </span>\n      {chevronIcon && typeof closeButton === 'undefined' && (\n        <span className={chevronClasses} data-parenttype={parentType}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n      {closeButton && (\n        <span className={chevronClasses} data-parenttype={parentType}>\n          {closeButton}\n        </span>\n      )}\n    </span>\n  );\n};\n\ntype ElementHeaderComponent = typeof ElementHeaderRoot & {\n  Text: React.FC<ElementHeaderTextProps>;\n  StatusDotList: React.FC<StatusDotListProps>;\n};\nElementHeaderRoot.displayName = 'ElementHeader';\nconst ElementHeader = ElementHeaderRoot as ElementHeaderComponent;\nElementHeader.Text = ElementHeaderText;\nElementHeader.Text.displayName = 'ElementHeader.Text';\nElementHeader.StatusDotList = StatusDotList;\nElementHeader.StatusDotList.displayName = 'ElementHeader.StatusDotList';\n\nexport default ElementHeader;\n"],"mappings":"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"}

package/lib/ElementHeaderText.js

@@ -1,13 +1,13 @@
 import { t as Highlighter_default } from "./Highlighter.js";
 import React from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/ElementHeader/styles.module.scss";
 const ElementHeaderText = (props) => {
 	const { firstText, firstTextEmphasised = false, secondText = void 0, secondTextEmphasised = false, subText = false, className = "", testId, titleHtmlMarkup = "span", highlightText } = props;
-	const headerTextWrapperClasses = cn(className, styles["text-wrapper"], { [styles["text-wrapper--sub-level"]]: subText });
-	const firstHeaderTextSegmentClasses = cn({ [styles["text-wrapper__text--emphasised"]]: firstTextEmphasised });
-	const secondHeaderTextSegmentClasses = cn({ [styles["text-wrapper__text--emphasised"]]: secondTextEmphasised });
+	const headerTextWrapperClasses = classNames(className, styles["text-wrapper"], { [styles["text-wrapper--sub-level"]]: subText });
+	const firstHeaderTextSegmentClasses = classNames({ [styles["text-wrapper__text--emphasised"]]: firstTextEmphasised });
+	const secondHeaderTextSegmentClasses = classNames({ [styles["text-wrapper__text--emphasised"]]: secondTextEmphasised });
 	const CustomTag = titleHtmlMarkup;
 	return /* @__PURE__ */ jsx("span", {
 		"data-testid": testId,

package/lib/ElementHeaderText.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElementHeaderText.js","names":["ElementHeaderText: ElementHeaderTextType"],"sources":["../src/components/ElementHeader/ElementHeaderText/ElementHeaderText.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport Highlighter from '../../Highlighter';\nimport { TitleTags } from '../../Title';\nimport styles from '../styles.module.scss';\n\nexport type ElementHeaderTextType = React.FC<ElementHeaderTextProps>;\n\nexport interface ElementHeaderTextProps {\n  /** The first text in the ElementHeaderText Component */\n  firstText: string;\n  /** Will style the first text as bold */\n  firstTextEmphasised?: boolean;\n  /** The second text in the ElementHeaderText Component */\n  secondText?: string;\n  /** Will style the second text as bold */\n  secondTextEmphasised?: boolean;\n  /** Whether or not this ElementHeaderText is a sub text */\n  subText?: boolean;\n  /** Adds custom classes to the ElementHeaderText component. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Changes the underlying element of the text. Default: span*/\n  titleHtmlMarkup?: TitleTags;\n  /** Highlights text. Used for search results */\n  highlightText?: string;\n}\n\nexport const ElementHeaderText: ElementHeaderTextType = props => {\n  const {\n    firstText,\n    firstTextEmphasised = false,\n    secondText = undefined,\n    secondTextEmphasised = false,\n    subText = false,\n    className = '',\n    testId,\n    titleHtmlMarkup = 'span',\n    highlightText,\n  } = props;\n\n  const headerTextWrapperClasses = cn(className, styles['text-wrapper'], {\n    [styles['text-wrapper--sub-level']]: subText,\n  });\n  const firstHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: firstTextEmphasised,\n  });\n  const secondHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: secondTextEmphasised,\n  });\n  const CustomTag = titleHtmlMarkup;\n\n  return (\n    <span data-testid={testId} className={headerTextWrapperClasses}>\n      <CustomTag className={styles['element-header__title']}>\n        <Highlighter searchText={highlightText}>\n          <span className={firstHeaderTextSegmentClasses}>{firstText}</span>\n          {secondText && <span className={secondHeaderTextSegmentClasses}>{secondText}</span>}\n        </Highlighter>\n      </CustomTag>\n    </span>\n  );\n};\n\nexport default ElementHeaderText;\n"],"mappings":";;;;;AA+BA,MAAaA,qBAA2C,UAAS;CAC/D,MAAM,EACJ,WACA,sBAAsB,OACtB,aAAa,KAAA,GACb,uBAAuB,OACvB,UAAU,OACV,YAAY,IACZ,QACA,kBAAkB,QAClB,kBACE;CAEJ,MAAM,2BAA2B,GAAG,WAAW,OAAO,iBAAiB,GACpE,OAAO,6BAA6B,SACtC,CAAC;CACF,MAAM,gCAAgC,GAAG,GACtC,OAAO,oCAAoC,qBAC7C,CAAC;CACF,MAAM,iCAAiC,GAAG,GACvC,OAAO,oCAAoC,sBAC7C,CAAC;CACF,MAAM,YAAY;AAElB,QACE,oBAAC,QAAA;EAAK,eAAa;EAAQ,WAAW;YACpC,oBAAC,WAAA;GAAU,WAAW,OAAO;aAC3B,qBAAC,qBAAA;IAAY,YAAY;eACvB,oBAAC,QAAA;KAAK,WAAW;eAAgC;MAAiB,EACjE,cAAc,oBAAC,QAAA;KAAK,WAAW;eAAiC;MAAkB,CAAA;KACvE;IACJ;GACP;;AAIX,IAAA,4BAAe"}
+{"version":3,"file":"ElementHeaderText.js","names":["ElementHeaderText: ElementHeaderTextType"],"sources":["../src/components/ElementHeader/ElementHeaderText/ElementHeaderText.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport Highlighter from '../../Highlighter';\nimport { TitleTags } from '../../Title';\nimport styles from '../styles.module.scss';\n\nexport type ElementHeaderTextType = React.FC<ElementHeaderTextProps>;\n\nexport interface ElementHeaderTextProps {\n  /** The first text in the ElementHeaderText Component */\n  firstText: string;\n  /** Will style the first text as bold */\n  firstTextEmphasised?: boolean;\n  /** The second text in the ElementHeaderText Component */\n  secondText?: string;\n  /** Will style the second text as bold */\n  secondTextEmphasised?: boolean;\n  /** Whether or not this ElementHeaderText is a sub text */\n  subText?: boolean;\n  /** Adds custom classes to the ElementHeaderText component. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Changes the underlying element of the text. Default: span*/\n  titleHtmlMarkup?: TitleTags;\n  /** Highlights text. Used for search results */\n  highlightText?: string;\n}\n\nexport const ElementHeaderText: ElementHeaderTextType = props => {\n  const {\n    firstText,\n    firstTextEmphasised = false,\n    secondText = undefined,\n    secondTextEmphasised = false,\n    subText = false,\n    className = '',\n    testId,\n    titleHtmlMarkup = 'span',\n    highlightText,\n  } = props;\n\n  const headerTextWrapperClasses = cn(className, styles['text-wrapper'], {\n    [styles['text-wrapper--sub-level']]: subText,\n  });\n  const firstHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: firstTextEmphasised,\n  });\n  const secondHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: secondTextEmphasised,\n  });\n  const CustomTag = titleHtmlMarkup;\n\n  return (\n    <span data-testid={testId} className={headerTextWrapperClasses}>\n      <CustomTag className={styles['element-header__title']}>\n        <Highlighter searchText={highlightText}>\n          <span className={firstHeaderTextSegmentClasses}>{firstText}</span>\n          {secondText && <span className={secondHeaderTextSegmentClasses}>{secondText}</span>}\n        </Highlighter>\n      </CustomTag>\n    </span>\n  );\n};\n\nexport default ElementHeaderText;\n"],"mappings":";;;;;AA+BA,MAAaA,qBAA2C,UAAS;CAC/D,MAAM,EACJ,WACA,sBAAsB,OACtB,aAAa,KAAA,GACb,uBAAuB,OACvB,UAAU,OACV,YAAY,IACZ,QACA,kBAAkB,QAClB,kBACE;CAEJ,MAAM,2BAA2B,WAAG,WAAW,OAAO,iBAAiB,GACpE,OAAO,6BAA6B,SACtC,CAAC;CACF,MAAM,gCAAgC,WAAG,GACtC,OAAO,oCAAoC,qBAC7C,CAAC;CACF,MAAM,iCAAiC,WAAG,GACvC,OAAO,oCAAoC,sBAC7C,CAAC;CACF,MAAM,YAAY;AAElB,QACE,oBAAC,QAAA;EAAK,eAAa;EAAQ,WAAW;YACpC,oBAAC,WAAA;GAAU,WAAW,OAAO;aAC3B,qBAAC,qBAAA;IAAY,YAAY;eACvB,oBAAC,QAAA;KAAK,WAAW;eAAgC;MAAiB,EACjE,cAAc,oBAAC,QAAA;KAAK,WAAW;eAAiC;MAAkB,CAAA;KACvE;IACJ;GACP;;AAIX,IAAA,4BAAe"}

package/lib/ErrorWrapper.js

@@ -1,11 +1,11 @@
 import React from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/ErrorWrapper/styles.module.scss";
 const ErrorWrapper = (props) => {
 	const { renderError = true } = props;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn(props.errorText && renderError && styles[`error-wrapper--with-error`], props.className),
+		className: classNames(props.errorText && renderError && styles[`error-wrapper--with-error`], props.className),
 		"data-testid": props.testId,
 		children: [/* @__PURE__ */ jsx("span", {
 			ref: props.errorMessageRef,

package/lib/ErrorWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorWrapper.js","names":["ErrorWrapper: React.FC<ErrorWrapperProps>"],"sources":["../src/components/ErrorWrapper/ErrorWrapper.tsx","../src/components/ErrorWrapper/index.ts"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport interface ErrorWrapperClassNameProps {\n  errorWrapperClassName?: string;\n}\n\nexport interface ErrorWrapperProps {\n  /** Form component */\n  children?: React.ReactNode;\n  /** Error message */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds a ref to the error message p tag */\n  errorMessageRef?: React.ForwardedRef<HTMLDivElement>;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const ErrorWrapper: React.FC<ErrorWrapperProps> = props => {\n  const { renderError = true } = props;\n\n  const errorWrapperClasses = cn(props.errorText && renderError && styles[`error-wrapper--with-error`], props.className);\n\n  return (\n    <div className={errorWrapperClasses} data-testid={props.testId}>\n      <span ref={props.errorMessageRef} tabIndex={-1}>\n        {props.errorText && (\n          <p className={styles['error-wrapper__errors']} id={props.errorTextId}>\n            {props.errorText}\n          </p>\n        )}\n      </span>\n      {props.children}\n    </div>\n  );\n};\n\nexport default ErrorWrapper;\n","import ErrorWrapper from './ErrorWrapper';\nexport * from './ErrorWrapper';\nexport default ErrorWrapper;\n"],"mappings":";;;;AA2BA,MAAaA,gBAA4C,UAAS;CAChE,MAAM,EAAE,cAAc,SAAS;AAI/B,QACE,qBAAC,OAAA;EAAI,WAHqB,GAAG,MAAM,aAAa,eAAe,OAAO,8BAA8B,MAAM,UAAU;EAG/E,eAAa,MAAM;aACtD,oBAAC,QAAA;GAAK,KAAK,MAAM;GAAiB,UAAU;aACzC,MAAM,aACL,oBAAC,KAAA;IAAE,WAAW,OAAO;IAA0B,IAAI,MAAM;cACtD,MAAM;KACL;IAED,EACN,MAAM,SAAA;GACH;;ACxCV,IAAA,yBD4Ce"}
+{"version":3,"file":"ErrorWrapper.js","names":["ErrorWrapper: React.FC<ErrorWrapperProps>"],"sources":["../src/components/ErrorWrapper/ErrorWrapper.tsx","../src/components/ErrorWrapper/index.ts"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport interface ErrorWrapperClassNameProps {\n  errorWrapperClassName?: string;\n}\n\nexport interface ErrorWrapperProps {\n  /** Form component */\n  children?: React.ReactNode;\n  /** Error message */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds a ref to the error message p tag */\n  errorMessageRef?: React.ForwardedRef<HTMLDivElement>;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const ErrorWrapper: React.FC<ErrorWrapperProps> = props => {\n  const { renderError = true } = props;\n\n  const errorWrapperClasses = cn(props.errorText && renderError && styles[`error-wrapper--with-error`], props.className);\n\n  return (\n    <div className={errorWrapperClasses} data-testid={props.testId}>\n      <span ref={props.errorMessageRef} tabIndex={-1}>\n        {props.errorText && (\n          <p className={styles['error-wrapper__errors']} id={props.errorTextId}>\n            {props.errorText}\n          </p>\n        )}\n      </span>\n      {props.children}\n    </div>\n  );\n};\n\nexport default ErrorWrapper;\n","import ErrorWrapper from './ErrorWrapper';\nexport * from './ErrorWrapper';\nexport default ErrorWrapper;\n"],"mappings":";;;;AA2BA,MAAaA,gBAA4C,UAAS;CAChE,MAAM,EAAE,cAAc,SAAS;AAI/B,QACE,qBAAC,OAAA;EAAI,WAHqB,WAAG,MAAM,aAAa,eAAe,OAAO,8BAA8B,MAAM,UAAU;EAG/E,eAAa,MAAM;aACtD,oBAAC,QAAA;GAAK,KAAK,MAAM;GAAiB,UAAU;aACzC,MAAM,aACL,oBAAC,KAAA;IAAE,WAAW,OAAO;IAA0B,IAAI,MAAM;cACtD,MAAM;KACL;IAED,EACN,MAAM,SAAA;GACH;;ACxCV,IAAA,yBD4Ce"}

package/lib/Expander.js

@@ -8,7 +8,7 @@ import { t as ChevronDown_default } from "./ChevronDown.js";
 import { t as ChevronUp_default } from "./ChevronUp.js";
 import { t as useExpand } from "./useExpand.js";
 import React, { useRef } from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Expander/styles.module.scss";
 let ExpanderSize = /* @__PURE__ */ function(ExpanderSize$1) {
@@ -26,14 +26,14 @@ var Expander = (props) => {
 	const triggerSize = useSize(triggerRef);
 	const isSticky = sticky && isExpanded;
 	const renderChevron = (align) => /* @__PURE__ */ jsx("span", {
-		className: cn(styles["expander__icon"], styles[`expander__icon--${align}`]),
+		className: classNames(styles["expander__icon"], styles[`expander__icon--${align}`]),
 		children: /* @__PURE__ */ jsx(Icon_default, {
 			svgIcon: isExpanded ? ChevronUp_default : ChevronDown_default,
 			size: IconSize.XSmall,
 			isHovered
 		})
 	});
-	const triggerClassName = cn(styles["expander__trigger"], size === ExpanderSize.large && styles[`expander__trigger--${size}`], size === ExpanderSize.large && styles[`expander__trigger--${color || "neutral"}`], size === ExpanderSize.large && icon && styles["expander__trigger--icon"], isExpanded && styles["expander__trigger--expanded"], isSticky && styles["expander__trigger--sticky"]);
+	const triggerClassName = classNames(styles["expander__trigger"], size === ExpanderSize.large && styles[`expander__trigger--${size}`], size === ExpanderSize.large && styles[`expander__trigger--${color || "neutral"}`], size === ExpanderSize.large && icon && styles["expander__trigger--icon"], isExpanded && styles["expander__trigger--expanded"], isSticky && styles["expander__trigger--sticky"]);
 	const renderTrigger = () => /* @__PURE__ */ jsxs("button", {
 		id: buttonId,
 		type: "button",
@@ -50,7 +50,7 @@ var Expander = (props) => {
 		children: [
 			size === ExpanderSize.small && renderChevron("left"),
 			icon && /* @__PURE__ */ jsx("span", {
-				className: cn(styles["expander__icon"], styles["expander__icon--left"]),
+				className: classNames(styles["expander__icon"], styles["expander__icon--left"]),
 				children: typeof icon === "string" ? /* @__PURE__ */ jsx(LazyIcon_default, {
 					iconName: icon,
 					size: IconSize.XSmall,
@@ -65,13 +65,13 @@ var Expander = (props) => {
 			size === ExpanderSize.large && renderChevron("right")
 		]
 	});
-	const buttonClassName = cn(styles["expander__button"], isExpanded && styles["expander__button--expanded"]);
+	const buttonClassName = classNames(styles["expander__button"], isExpanded && styles["expander__button--expanded"]);
 	const renderButton = () => /* @__PURE__ */ jsx("div", {
 		style: {
 			width: isSticky && triggerSize?.width ? `${triggerSize?.width}px` : void 0,
 			height: isSticky && triggerSize?.height ? `${triggerSize?.height}px` : void 0
 		},
-		className: cn({ [styles["expander__button-container--sticky"]]: isSticky }),
+		className: classNames({ [styles["expander__button-container--sticky"]]: isSticky }),
 		children: /* @__PURE__ */ jsxs(Button_default, {
 			id: buttonId,
 			variant: "borderless",
@@ -90,9 +90,13 @@ var Expander = (props) => {
 	});
 	const renderContent = () => {
 		if (!renderChildrenWhenClosed && !isExpanded) return null;
+		const contentClassName = classNames(styles["expander__content"], styles[`expander__content--${size}`], size === ExpanderSize.large && styles[`expander__content--${color || "neutral"}`], size === ExpanderSize.large && icon && styles["expander__content--icon"], isExpanded && styles["expander__content--expanded"], size === ExpanderSize.small && !noNestedLine && styles["expander__content--nested-line--inner"], { [styles["expander__content--sticky"]]: isSticky }, contentClassNames);
 		return /* @__PURE__ */ jsx("div", {
-			className: cn(styles["expander__content"], styles[`expander__content--${size}`], size === ExpanderSize.large && styles[`expander__content--${color || "neutral"}`], size === ExpanderSize.large && icon && styles["expander__content--icon"], isExpanded && styles["expander__content--expanded"], size === ExpanderSize.small && !noNestedLine && styles["expander__content--nested-line"], { [styles["expander__content--sticky"]]: isSticky }, contentClassNames),
-			children
+			className: classNames(size === ExpanderSize.small && !noNestedLine && styles["expander__content--nested-line--outer"]),
+			children: /* @__PURE__ */ jsx("div", {
+				className: contentClassName,
+				children
+			})
 		});
 	};
 	return /* @__PURE__ */ jsxs("div", {

package/lib/Expander.js.map

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

package/lib/FormFieldTag.js

@@ -1,7 +1,7 @@
 import { n as AnalyticsId, s as LanguageLocales } from "./constants2.js";
 import { r as useLanguage } from "./language.js";
 import React from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/FormFieldTag/styles.module.scss";
 var HN_Designsystem_FormFieldTag_en_GB_default = {
@@ -70,7 +70,7 @@ var FormFieldTag = (props) => {
 		id,
 		"data-testid": testId,
 		"data-analyticsid": AnalyticsId.FormFieldTag,
-		className: cn(styles["form-field-tag"], { [styles["form-field-tag--optional"]]: isOptional }),
+		className: classNames(styles["form-field-tag"], { [styles["form-field-tag--optional"]]: isOptional }),
 		children: textMap[level]
 	});
 };

package/lib/FormFieldTag.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldTag.js","names":["FormFieldTag: React.FC<FormFieldTagProps>","mergedResources: HNDesignsystemFormFieldTag"],"sources":["../src/resources/HN.Designsystem.FormFieldTag.en-GB.json","../src/resources/HN.Designsystem.FormFieldTag.nb-NO.json","../src/resources/HN.Designsystem.FormFieldTag.nn-NO.json","../src/resources/HN.Designsystem.FormFieldTag.se-NO.json","../src/components/FormFieldTag/resourceHelper.ts","../src/components/FormFieldTag/FormFieldTag.tsx","../src/components/FormFieldTag/index.ts"],"sourcesContent":["{\n  \"allRequired\": \"All fields must be filled out\",\n  \"requiredField\": \"Required\",\n  \"optional\": \"Optional\",\n  \"allOptional\": \"All fields are optional\",\n  \"requiredRadiobuttonList\": \"Select one\",\n  \"requiredCheckboxList\": \"Select one or more\",\n  \"requiredSingleCheckbox\": \"Must be selected\"\n}\n","{\n  \"allRequired\": \"Alle felt må fylles ut\",\n  \"requiredField\": \"Må fylles ut\",\n  \"optional\": \"Valgfritt\",\n  \"allOptional\": \"Alle felt er valgfrie\",\n  \"requiredRadiobuttonList\": \"Velg én\",\n  \"requiredCheckboxList\": \"Velg én eller flere\",\n  \"requiredSingleCheckbox\": \"Må velges\"\n}\n","{\n  \"allRequired\": \"Alle felt må fyllast ut\",\n  \"requiredField\": \"Må fyllast ut\",\n  \"optional\": \"Valfritt\",\n  \"allOptional\": \"Alle felt er valfrie\",\n  \"requiredRadiobuttonList\": \"Vel éin\",\n  \"requiredCheckboxList\": \"Vel éin eller fleire\",\n  \"requiredSingleCheckbox\": \"Må veljast\"\n}\n","{\n  \"allRequired\": \"Buot sajiid ferte deavdit\",\n  \"requiredField\": \"Ferte devdojuvvot\",\n  \"optional\": \"Válljenláhkái\",\n  \"allOptional\": \"Buot sajit eat válljenláhkái\",\n  \"requiredRadiobuttonList\": \"Vállje ovtta\",\n  \"requiredCheckboxList\": \"Vállje ovtta dahje máŋga\",\n  \"requiredSingleCheckbox\": \"Ferte válljejuvvot\"\n}\n","import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.FormFieldTag.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.FormFieldTag.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.FormFieldTag.nn-NO.json';\nimport seNO from '../../resources/HN.Designsystem.FormFieldTag.se-NO.json';\nimport { HNDesignsystemFormFieldTag } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemFormFieldTag => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN_NYNORSK:\n      return nnNO;\n    case LanguageLocales.SAMI_NORTHERN:\n      return seNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { HNDesignsystemFormFieldTag } from '../../resources/Resources';\nimport { useLanguage } from '../../utils/language';\n\nimport styles from './styles.module.scss';\n\nexport type FormFieldTagLevel =\n  | 'all-required'\n  | 'required-field'\n  | 'optional'\n  | 'all-optional'\n  | 'required-radiobutton-list'\n  | 'required-checkbox-list'\n  | 'required-single-checkbox';\n\nexport interface FormFieldTagProps {\n  /** Id that is placed on the component */\n  id?: string;\n  /** What level is the required tag, sets the styling and the text. */\n  level: FormFieldTagLevel;\n  /** Texts if overriding SOT */\n  resources?: Partial<HNDesignsystemFormFieldTag>;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst FormFieldTag: React.FC<FormFieldTagProps> = props => {\n  const { id, level, resources, testId } = props;\n  const isOptional = level === 'optional' || level === 'all-optional';\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemFormFieldTag = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const textMap = {\n    'all-required': mergedResources.allRequired,\n    'required-field': mergedResources.requiredField,\n    optional: mergedResources.optional,\n    'all-optional': mergedResources.allOptional,\n    'required-radiobutton-list': mergedResources.requiredRadiobuttonList,\n    'required-checkbox-list': mergedResources.requiredCheckboxList,\n    'required-single-checkbox': mergedResources.requiredSingleCheckbox,\n  };\n\n  return (\n    <span\n      id={id}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.FormFieldTag}\n      className={classNames(styles['form-field-tag'], { [styles['form-field-tag--optional']]: isOptional })}\n    >\n      {textMap[level]}\n    </span>\n  );\n};\n\nexport default FormFieldTag;\n","import FormFieldTag from './FormFieldTag';\nexport * from './FormFieldTag';\nexport default FormFieldTag;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AIOA,MAAa,gBAAgB,aAA0D;AACrF,SAAQ,UAAR;EACE,KAAK,gBAAgB,QACnB,QAAO;EACT,KAAK,gBAAgB,kBACnB,QAAO;EACT,KAAK,gBAAgB,cACnB,QAAO;EACT,KAAK,gBAAgB;EACrB,QACE,QAAO;;;ACcb,IAAMA,gBAA4C,UAAS;CACzD,MAAM,EAAE,IAAI,OAAO,WAAW,WAAW;CACzC,MAAM,aAAa,UAAU,cAAc,UAAU;CAErD,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAG5E,MAAMC,kBAA8C;EAClD,GAHuB,aAAa,SAAS;EAI7C,GAAG;EACJ;CAED,MAAM,UAAU;EACd,gBAAgB,gBAAgB;EAChC,kBAAkB,gBAAgB;EAClC,UAAU,gBAAgB;EAC1B,gBAAgB,gBAAgB;EAChC,6BAA6B,gBAAgB;EAC7C,0BAA0B,gBAAgB;EAC1C,4BAA4B,gBAAgB;EAC7C;AAED,QACE,oBAAC,QAAA;EACK;EACJ,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW,GAAW,OAAO,mBAAmB,GAAG,OAAO,8BAA8B,YAAY,CAAC;YAEpG,QAAQ;GACJ;;AC3DX,IAAA,yBD+De"}
+{"version":3,"file":"FormFieldTag.js","names":["FormFieldTag: React.FC<FormFieldTagProps>","mergedResources: HNDesignsystemFormFieldTag"],"sources":["../src/resources/HN.Designsystem.FormFieldTag.en-GB.json","../src/resources/HN.Designsystem.FormFieldTag.nb-NO.json","../src/resources/HN.Designsystem.FormFieldTag.nn-NO.json","../src/resources/HN.Designsystem.FormFieldTag.se-NO.json","../src/components/FormFieldTag/resourceHelper.ts","../src/components/FormFieldTag/FormFieldTag.tsx","../src/components/FormFieldTag/index.ts"],"sourcesContent":["{\n  \"allRequired\": \"All fields must be filled out\",\n  \"requiredField\": \"Required\",\n  \"optional\": \"Optional\",\n  \"allOptional\": \"All fields are optional\",\n  \"requiredRadiobuttonList\": \"Select one\",\n  \"requiredCheckboxList\": \"Select one or more\",\n  \"requiredSingleCheckbox\": \"Must be selected\"\n}\n","{\n  \"allRequired\": \"Alle felt må fylles ut\",\n  \"requiredField\": \"Må fylles ut\",\n  \"optional\": \"Valgfritt\",\n  \"allOptional\": \"Alle felt er valgfrie\",\n  \"requiredRadiobuttonList\": \"Velg én\",\n  \"requiredCheckboxList\": \"Velg én eller flere\",\n  \"requiredSingleCheckbox\": \"Må velges\"\n}\n","{\n  \"allRequired\": \"Alle felt må fyllast ut\",\n  \"requiredField\": \"Må fyllast ut\",\n  \"optional\": \"Valfritt\",\n  \"allOptional\": \"Alle felt er valfrie\",\n  \"requiredRadiobuttonList\": \"Vel éin\",\n  \"requiredCheckboxList\": \"Vel éin eller fleire\",\n  \"requiredSingleCheckbox\": \"Må veljast\"\n}\n","{\n  \"allRequired\": \"Buot sajiid ferte deavdit\",\n  \"requiredField\": \"Ferte devdojuvvot\",\n  \"optional\": \"Válljenláhkái\",\n  \"allOptional\": \"Buot sajit eat válljenláhkái\",\n  \"requiredRadiobuttonList\": \"Vállje ovtta\",\n  \"requiredCheckboxList\": \"Vállje ovtta dahje máŋga\",\n  \"requiredSingleCheckbox\": \"Ferte válljejuvvot\"\n}\n","import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.FormFieldTag.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.FormFieldTag.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.FormFieldTag.nn-NO.json';\nimport seNO from '../../resources/HN.Designsystem.FormFieldTag.se-NO.json';\nimport { HNDesignsystemFormFieldTag } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemFormFieldTag => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN_NYNORSK:\n      return nnNO;\n    case LanguageLocales.SAMI_NORTHERN:\n      return seNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { HNDesignsystemFormFieldTag } from '../../resources/Resources';\nimport { useLanguage } from '../../utils/language';\n\nimport styles from './styles.module.scss';\n\nexport type FormFieldTagLevel =\n  | 'all-required'\n  | 'required-field'\n  | 'optional'\n  | 'all-optional'\n  | 'required-radiobutton-list'\n  | 'required-checkbox-list'\n  | 'required-single-checkbox';\n\nexport interface FormFieldTagProps {\n  /** Id that is placed on the component */\n  id?: string;\n  /** What level is the required tag, sets the styling and the text. */\n  level: FormFieldTagLevel;\n  /** Texts if overriding SOT */\n  resources?: Partial<HNDesignsystemFormFieldTag>;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst FormFieldTag: React.FC<FormFieldTagProps> = props => {\n  const { id, level, resources, testId } = props;\n  const isOptional = level === 'optional' || level === 'all-optional';\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemFormFieldTag = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const textMap = {\n    'all-required': mergedResources.allRequired,\n    'required-field': mergedResources.requiredField,\n    optional: mergedResources.optional,\n    'all-optional': mergedResources.allOptional,\n    'required-radiobutton-list': mergedResources.requiredRadiobuttonList,\n    'required-checkbox-list': mergedResources.requiredCheckboxList,\n    'required-single-checkbox': mergedResources.requiredSingleCheckbox,\n  };\n\n  return (\n    <span\n      id={id}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.FormFieldTag}\n      className={classNames(styles['form-field-tag'], { [styles['form-field-tag--optional']]: isOptional })}\n    >\n      {textMap[level]}\n    </span>\n  );\n};\n\nexport default FormFieldTag;\n","import FormFieldTag from './FormFieldTag';\nexport * from './FormFieldTag';\nexport default FormFieldTag;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AIOA,MAAa,gBAAgB,aAA0D;AACrF,SAAQ,UAAR;EACE,KAAK,gBAAgB,QACnB,QAAO;EACT,KAAK,gBAAgB,kBACnB,QAAO;EACT,KAAK,gBAAgB,cACnB,QAAO;EACT,KAAK,gBAAgB;EACrB,QACE,QAAO;;;ACcb,IAAMA,gBAA4C,UAAS;CACzD,MAAM,EAAE,IAAI,OAAO,WAAW,WAAW;CACzC,MAAM,aAAa,UAAU,cAAc,UAAU;CAErD,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAG5E,MAAMC,kBAA8C;EAClD,GAHuB,aAAa,SAAS;EAI7C,GAAG;EACJ;CAED,MAAM,UAAU;EACd,gBAAgB,gBAAgB;EAChC,kBAAkB,gBAAgB;EAClC,UAAU,gBAAgB;EAC1B,gBAAgB,gBAAgB;EAChC,6BAA6B,gBAAgB;EAC7C,0BAA0B,gBAAgB;EAC1C,4BAA4B,gBAAgB;EAC7C;AAED,QACE,oBAAC,QAAA;EACK;EACJ,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW,WAAW,OAAO,mBAAmB,GAAG,OAAO,8BAA8B,YAAY,CAAC;YAEpG,QAAQ;GACJ;;AC3DX,IAAA,yBD+De"}

package/lib/FormGroup.js

@@ -12,20 +12,21 @@ import { t as Select_default } from "./Select.js";
 import { t as Slider_default } from "./Slider.js";
 import { t as Textarea_default } from "./Textarea.js";
 import React, { useId, useState } from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import formGroupStyles from "./components/FormGroup/styles.module.scss";
 const FormGroup = React.forwardRef((props, ref) => {
-	const { ariaLabelledBy, className, errorTextId: errorTextIdProp, fieldsetClassName, formFieldTag, legendClassName, onColor = FormOnColor.onwhite, size = FormSize.medium, error, name, htmlMarkup = "fieldset", renderError = true, errorWrapperClassName, errorWrapperTestId } = props;
+	const { ariaLabelledBy, className, errorTextId: errorTextIdProp, fieldsetClassName, formFieldTag, legendClassName, onColor = FormOnColor.onwhite, size = FormSize.medium, error, name, htmlMarkup = "fieldset", renderError = true, errorWrapperClassName, errorWrapperTestId, legendHtmlMarkup = "h5", titleHtmlMarkup = "h4" } = props;
 	const [checkedRadioId, setCheckedRadioId] = useState();
 	const radioGroupId = useId();
 	const errorTextId = useIdWithFallback(errorTextIdProp);
 	const onDark = onColor === FormOnColor.ondark;
 	const isLarge = size === FormSize.large;
-	const formGroupWrapperClasses = cn(formGroupStyles["form-group-wrapper"], className);
-	const titleClasses = cn({ [formGroupStyles["form-group-wrapper__title--on-dark"]]: onDark && !error });
-	const legendClasses = cn(formGroupStyles["field-set__legend"], { [formGroupStyles["field-set__legend--on-dark"]]: onDark && !error }, legendClassName);
-	const fieldsetClasses = cn(formGroupStyles["field-set"], fieldsetClassName);
+	const formGroupWrapperClasses = classNames(formGroupStyles["form-group-wrapper"], className);
+	const titleClasses = classNames({ [formGroupStyles["form-group-wrapper__title--on-dark"]]: onDark && !error });
+	const CustomTagForLegend = legendHtmlMarkup;
+	const legendClasses = classNames(formGroupStyles["field-set__legend"], { [formGroupStyles["field-set__legend--on-dark"]]: onDark && !error }, legendClassName);
+	const fieldsetClasses = classNames(formGroupStyles["field-set"], fieldsetClassName);
 	const mapFormComponent = (child, index) => {
 		if (isComponent(child, FormLayout_default)) return React.cloneElement(child, {
 			size,
@@ -89,7 +90,7 @@ const FormGroup = React.forwardRef((props, ref) => {
 	const formGroupContent = () => {
 		return /* @__PURE__ */ jsxs("div", { children: [htmlMarkup === "div" && /* @__PURE__ */ jsxs("div", {
 			className: fieldsetClasses,
-			children: [props.legend && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("h5", {
+			children: [props.legend && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(CustomTagForLegend, {
 				className: legendClasses,
 				children: [props.legend, formFieldTag && isComponent(formFieldTag, FormFieldTag_default) && React.cloneElement(formFieldTag)]
 			}) }), React.Children.map(props.children, mapFormComponent)]
@@ -109,7 +110,7 @@ const FormGroup = React.forwardRef((props, ref) => {
 		className: formGroupWrapperClasses,
 		children: [props.title && /* @__PURE__ */ jsx(Title_default, {
 			className: titleClasses,
-			htmlMarkup: "h4",
+			htmlMarkup: titleHtmlMarkup,
 			appearance: "title4",
 			margin: {
 				marginTop: 0,

package/lib/FormGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormGroup.js","names":[],"sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React, { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { isComponent } from '../../utils/component';\nimport Checkbox, { CheckboxProps } from '../Checkbox/Checkbox';\nimport ErrorWrapper from '../ErrorWrapper';\nimport FormFieldTag, { FormFieldTagProps } from '../FormFieldTag';\nimport FormLayout, { FormLayoutProps } from '../FormLayout';\nimport Input, { InputProps } from '../Input/Input';\nimport RadioButton, { RadioButtonProps, getRadioLabelClasses } from '../RadioButton/RadioButton';\nimport Select, { SelectProps } from '../Select';\nimport Slider, { SliderProps } from '../Slider';\nimport Textarea, { TextareaProps } from '../Textarea';\nimport Title from '../Title';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n  /** Can be used as a replacement text for legend in cases where the group title already exists externally */\n  ariaLabelledBy?: string;\n  /** title for the the fieldset */\n  title?: string;\n  /** text placed in the legend tag of the fieldset */\n  legend?: string;\n  /** Items in the FormGroup component */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper. */\n  errorWrapperClassName?: string;\n  /** Adds custom classes to the fieldset element. */\n  fieldsetClassName?: string;\n  /** Sets a tag that describes whether the form group is required or optional */\n  formFieldTag?: React.ReactNode;\n  /** Adds custom classes to the legend element. */\n  legendClassName?: string;\n  /** Changes the visuals of the formgroup */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Error message */\n  error?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error-wrapper. */\n  errorWrapperTestId?: string;\n  /** Unique name for the child input element */\n  name?: string;\n  /** Unique name for the fieldset */\n  fieldsetName?: string;\n  /** Sets div instead of fieldset tag */\n  htmlMarkup?: FormGroupTags;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n}\n\nexport const FormGroup = React.forwardRef((props: FormGroupProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const {\n    ariaLabelledBy,\n    className,\n    errorTextId: errorTextIdProp,\n    fieldsetClassName,\n    formFieldTag,\n    legendClassName,\n    onColor = FormOnColor.onwhite,\n    size = FormSize.medium,\n    error,\n    name,\n    htmlMarkup = 'fieldset',\n    renderError = true,\n    errorWrapperClassName,\n    errorWrapperTestId,\n  } = props;\n  const [checkedRadioId, setCheckedRadioId] = useState<string>();\n  const radioGroupId = useId();\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const onDark = onColor === FormOnColor.ondark;\n  const isLarge = size === FormSize.large;\n  const formGroupWrapperClasses = classNames(formGroupStyles['form-group-wrapper'], className);\n  const titleClasses = classNames({\n    [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n  });\n\n  const legendClasses = classNames(\n    formGroupStyles['field-set__legend'],\n    {\n      [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n    },\n    legendClassName\n  );\n\n  const fieldsetClasses = classNames(formGroupStyles['field-set'], fieldsetClassName);\n\n  const mapFormComponent = (child: React.ReactNode, index: number): React.ReactNode => {\n    if (isComponent<FormLayoutProps>(child, FormLayout)) {\n      return React.cloneElement(child, {\n        size,\n        mapHelper: mapFormComponent,\n      });\n    } else if (isComponent<FormGroupProps>(child, FormGroup)) {\n      return React.cloneElement(child, {\n        onColor,\n        size,\n        error,\n        renderError: false,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<CheckboxProps>(child, Checkbox)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<RadioButtonProps>(child, RadioButton)) {\n      const radioId = typeof child.props.inputId === 'undefined' ? radioGroupId + index : child.props.inputId;\n      return React.cloneElement(child, {\n        inputId: radioId,\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n          setCheckedRadioId(event.target.id);\n          if (child.props.onChange) child.props.onChange(event);\n        },\n        error: !!error,\n        errorTextId: errorTextId,\n        labelClassNames: getRadioLabelClasses(radioId, onColor as FormOnColor, isLarge, checkedRadioId),\n      });\n    } else if (isComponent<InputProps>(child, Input)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<TextareaProps>(child, Textarea)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<SelectProps>(child, Select)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<SliderProps>(child, Slider)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    }\n    return child;\n  };\n\n  const formGroupContent = (): React.ReactNode => {\n    return (\n      <div>\n        {htmlMarkup === 'div' && (\n          <div className={fieldsetClasses}>\n            {props.legend && (\n              <>\n                <h5 className={legendClasses}>\n                  {props.legend}\n                  {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n                </h5>\n              </>\n            )}\n            {React.Children.map(props.children, mapFormComponent)}\n          </div>\n        )}\n        {htmlMarkup === 'fieldset' && (\n          <fieldset aria-labelledby={ariaLabelledBy} name={props.fieldsetName} className={fieldsetClasses}>\n            {props.legend && (\n              <>\n                <legend className={legendClasses}>\n                  {props.legend}\n                  {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n                </legend>\n              </>\n            )}\n            {React.Children.map(props.children, mapFormComponent)}\n          </fieldset>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses}>\n      {props.title && (\n        <Title className={titleClasses} htmlMarkup={'h4'} appearance={'title4'} margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}>\n          {props.title}\n        </Title>\n      )}\n      <ErrorWrapper\n        className={errorWrapperClassName}\n        errorText={error}\n        testId={errorWrapperTestId}\n        errorTextId={errorTextId}\n        errorMessageRef={ref}\n        renderError={renderError}\n      >\n        {formGroupContent()}\n      </ErrorWrapper>\n    </div>\n  );\n});\n\nFormGroup.displayName = 'FormGroup';\n\nexport default FormGroup;\n"],"mappings":";;;;;;;;;;;;;;;;;AA+DA,MAAa,YAAY,MAAM,YAAY,OAAuB,QAA4C;CAC5G,MAAM,EACJ,gBACA,WACA,aAAa,iBACb,mBACA,cACA,iBACA,UAAU,YAAY,SACtB,OAAO,SAAS,QAChB,OACA,MACA,aAAa,YACb,cAAc,MACd,uBACA,uBACE;CACJ,MAAM,CAAC,gBAAgB,qBAAqB,UAAkB;CAC9D,MAAM,eAAe,OAAO;CAC5B,MAAM,cAAc,kBAAkB,gBAAgB;CACtD,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,UAAU,SAAS,SAAS;CAClC,MAAM,0BAA0B,GAAW,gBAAgB,uBAAuB,UAAU;CAC5F,MAAM,eAAe,GAAW,GAC7B,gBAAgB,wCAAwC,UAAU,CAAC,OACrE,CAAC;CAEF,MAAM,gBAAgB,GACpB,gBAAgB,sBAChB,GACG,gBAAgB,gCAAgC,UAAU,CAAC,OAC7D,EACD,gBACD;CAED,MAAM,kBAAkB,GAAW,gBAAgB,cAAc,kBAAkB;CAEnF,MAAM,oBAAoB,OAAwB,UAAmC;AACnF,MAAI,YAA6B,OAAO,mBAAW,CACjD,QAAO,MAAM,aAAa,OAAO;GAC/B;GACA,WAAW;GACZ,CAAC;WACO,YAA4B,OAAO,UAAU,CACtD,QAAO,MAAM,aAAa,OAAO;GAC/B;GACA;GACA;GACA,aAAa;GACA;GACd,CAAC;WACO,YAA2B,OAAO,iBAAS,CACpD,QAAO,MAAM,aAAa,OAAO;GAC/B,MAAM,QAAQ,MAAM,MAAM;GAC1B;GACA;GACA,OAAO,CAAC,CAAC;GACI;GACd,CAAC;WACO,YAA8B,OAAO,oBAAY,EAAE;GAC5D,MAAM,UAAU,OAAO,MAAM,MAAM,YAAY,cAAc,eAAe,QAAQ,MAAM,MAAM;AAChG,UAAO,MAAM,aAAa,OAAO;IAC/B,SAAS;IACT,MAAM,QAAQ,MAAM,MAAM;IAC1B;IACA;IACA,WAAW,UAA+C;AACxD,uBAAkB,MAAM,OAAO,GAAG;AAClC,SAAI,MAAM,MAAM,SAAU,OAAM,MAAM,SAAS,MAAM;;IAEvD,OAAO,CAAC,CAAC;IACI;IACb,iBAAiB,qBAAqB,SAAS,SAAwB,SAAS,eAAe;IAChG,CAAC;aACO,YAAwB,OAAO,cAAM,CAC9C,QAAO,MAAM,aAAa,OAAO;GAC/B,MAAM,QAAQ,MAAM,MAAM;GAC1B;GACA;GACA,OAAO,CAAC,CAAC;GACI;GACd,CAAC;WACO,YAA2B,OAAO,iBAAS,CACpD,QAAO,MAAM,aAAa,OAAO;GAC/B,MAAM,QAAQ,MAAM,MAAM;GAC1B;GACA,OAAO,CAAC,CAAC;GACI;GACd,CAAC;WACO,YAAyB,OAAO,eAAO,CAChD,QAAO,MAAM,aAAa,OAAO;GAC/B,MAAM,QAAQ,MAAM,MAAM;GAC1B;GACA,OAAO,CAAC,CAAC;GACI;GACd,CAAC;WACO,YAAyB,OAAO,eAAO,CAChD,QAAO,MAAM,aAAa,OAAO;GAC/B,MAAM,QAAQ,MAAM,MAAM;GAC1B,OAAO,CAAC,CAAC;GACI;GACd,CAAC;AAEJ,SAAO;;CAGT,MAAM,yBAA0C;AAC9C,SACE,qBAAC,OAAA,EAAA,UAAA,CACE,eAAe,SACd,qBAAC,OAAA;GAAI,WAAW;cACb,MAAM,UACL,oBAAA,UAAA,EAAA,UACE,qBAAC,MAAA;IAAG,WAAW;eACZ,MAAM,QACN,gBAAgB,YAA+B,cAAc,qBAAa,IAAI,MAAM,aAAa,aAAa,CAAA;KAC5G,EAAA,CACJ,EAEJ,MAAM,SAAS,IAAI,MAAM,UAAU,iBAAiB,CAAA;IACjD,EAEP,eAAe,cACd,qBAAC,YAAA;GAAS,mBAAiB;GAAgB,MAAM,MAAM;GAAc,WAAW;cAC7E,MAAM,UACL,oBAAA,UAAA,EAAA,UACE,qBAAC,UAAA;IAAO,WAAW;eAChB,MAAM,QACN,gBAAgB,YAA+B,cAAc,qBAAa,IAAI,MAAM,aAAa,aAAa,CAAA;KACxG,EAAA,CACR,EAEJ,MAAM,SAAS,IAAI,MAAM,UAAU,iBAAiB,CAAA;IAC5C,CAAA,EAAA,CAET;;AAIV,QACE,qBAAC,OAAA;EAAI,eAAa,MAAM;EAAQ,oBAAkB,YAAY;EAAW,WAAW;aACjF,MAAM,SACL,oBAAC,eAAA;GAAM,WAAW;GAAc,YAAY;GAAM,YAAY;GAAU,QAAQ;IAAE,WAAW;IAAG,cAAc,QAAQ,IAAI;IAAG;aAC1H,MAAM;IACD,EAEV,oBAAC,sBAAA;GACC,WAAW;GACX,WAAW;GACX,QAAQ;GACK;GACb,iBAAiB;GACJ;aAEZ,kBAAkB;IACN,CAAA;GACX;EAER;AAEF,UAAU,cAAc;AAExB,IAAA,oBAAe"}
+{"version":3,"file":"FormGroup.js","names":[],"sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React, { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { isComponent } from '../../utils/component';\nimport Checkbox, { CheckboxProps } from '../Checkbox/Checkbox';\nimport ErrorWrapper from '../ErrorWrapper';\nimport FormFieldTag, { FormFieldTagProps } from '../FormFieldTag';\nimport FormLayout, { FormLayoutProps } from '../FormLayout';\nimport Input, { InputProps } from '../Input/Input';\nimport RadioButton, { RadioButtonProps, getRadioLabelClasses } from '../RadioButton/RadioButton';\nimport Select, { SelectProps } from '../Select';\nimport Slider, { SliderProps } from '../Slider';\nimport Textarea, { TextareaProps } from '../Textarea';\nimport Title, { TitleTags } from '../Title';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n  /** Can be used as a replacement text for legend in cases where the group title already exists externally */\n  ariaLabelledBy?: string;\n  /** title for the the fieldset */\n  title?: string;\n  /** text placed in the legend tag of the fieldset */\n  legend?: string;\n  /** Items in the FormGroup component */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper. */\n  errorWrapperClassName?: string;\n  /** Adds custom classes to the fieldset element. */\n  fieldsetClassName?: string;\n  /** Sets a tag that describes whether the form group is required or optional */\n  formFieldTag?: React.ReactNode;\n  /** Adds custom classes to the legend element. */\n  legendClassName?: string;\n  /** Changes the visuals of the formgroup */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Error message */\n  error?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error-wrapper. */\n  errorWrapperTestId?: string;\n  /** Unique name for the child input element */\n  name?: string;\n  /** Unique name for the fieldset */\n  fieldsetName?: string;\n  /** Sets div instead of fieldset tag */\n  htmlMarkup?: FormGroupTags;\n  /** Markup for legend if formgroup htmlMarkup is div*/\n  legendHtmlMarkup?: TitleTags;\n  /** Markup for title */\n  titleHtmlMarkup?: TitleTags;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n}\n\nexport const FormGroup = React.forwardRef((props: FormGroupProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const {\n    ariaLabelledBy,\n    className,\n    errorTextId: errorTextIdProp,\n    fieldsetClassName,\n    formFieldTag,\n    legendClassName,\n    onColor = FormOnColor.onwhite,\n    size = FormSize.medium,\n    error,\n    name,\n    htmlMarkup = 'fieldset',\n    renderError = true,\n    errorWrapperClassName,\n    errorWrapperTestId,\n    legendHtmlMarkup = 'h5',\n    titleHtmlMarkup = 'h4',\n  } = props;\n  const [checkedRadioId, setCheckedRadioId] = useState<string>();\n  const radioGroupId = useId();\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const onDark = onColor === FormOnColor.ondark;\n  const isLarge = size === FormSize.large;\n  const formGroupWrapperClasses = classNames(formGroupStyles['form-group-wrapper'], className);\n  const titleClasses = classNames({\n    [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n  });\n\n  const CustomTagForLegend = legendHtmlMarkup;\n\n  const legendClasses = classNames(\n    formGroupStyles['field-set__legend'],\n    {\n      [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n    },\n    legendClassName\n  );\n\n  const fieldsetClasses = classNames(formGroupStyles['field-set'], fieldsetClassName);\n\n  const mapFormComponent = (child: React.ReactNode, index: number): React.ReactNode => {\n    if (isComponent<FormLayoutProps>(child, FormLayout)) {\n      return React.cloneElement(child, {\n        size,\n        mapHelper: mapFormComponent,\n      });\n    } else if (isComponent<FormGroupProps>(child, FormGroup)) {\n      return React.cloneElement(child, {\n        onColor,\n        size,\n        error,\n        renderError: false,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<CheckboxProps>(child, Checkbox)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<RadioButtonProps>(child, RadioButton)) {\n      const radioId = typeof child.props.inputId === 'undefined' ? radioGroupId + index : child.props.inputId;\n      return React.cloneElement(child, {\n        inputId: radioId,\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n          setCheckedRadioId(event.target.id);\n          if (child.props.onChange) child.props.onChange(event);\n        },\n        error: !!error,\n        errorTextId: errorTextId,\n        labelClassNames: getRadioLabelClasses(radioId, onColor as FormOnColor, isLarge, checkedRadioId),\n      });\n    } else if (isComponent<InputProps>(child, Input)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        size,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<TextareaProps>(child, Textarea)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<SelectProps>(child, Select)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        onColor,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    } else if (isComponent<SliderProps>(child, Slider)) {\n      return React.cloneElement(child, {\n        name: name ?? child.props.name,\n        error: !!error,\n        errorTextId: errorTextId,\n      });\n    }\n    return child;\n  };\n\n  const formGroupContent = (): React.ReactNode => {\n    return (\n      <div>\n        {htmlMarkup === 'div' && (\n          <div className={fieldsetClasses}>\n            {props.legend && (\n              <>\n                <CustomTagForLegend className={legendClasses}>\n                  {props.legend}\n                  {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n                </CustomTagForLegend>\n              </>\n            )}\n            {React.Children.map(props.children, mapFormComponent)}\n          </div>\n        )}\n        {htmlMarkup === 'fieldset' && (\n          <fieldset aria-labelledby={ariaLabelledBy} name={props.fieldsetName} className={fieldsetClasses}>\n            {props.legend && (\n              <>\n                <legend className={legendClasses}>\n                  {props.legend}\n                  {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n                </legend>\n              </>\n            )}\n            {React.Children.map(props.children, mapFormComponent)}\n          </fieldset>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses}>\n      {props.title && (\n        <Title\n          className={titleClasses}\n          htmlMarkup={titleHtmlMarkup}\n          appearance={'title4'}\n          margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}\n        >\n          {props.title}\n        </Title>\n      )}\n      <ErrorWrapper\n        className={errorWrapperClassName}\n        errorText={error}\n        testId={errorWrapperTestId}\n        errorTextId={errorTextId}\n        errorMessageRef={ref}\n        renderError={renderError}\n      >\n        {formGroupContent()}\n      </ErrorWrapper>\n    </div>\n  );\n});\n\nFormGroup.displayName = 'FormGroup';\n\nexport default FormGroup;\n"],"mappings":"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"}

package/lib/FormLayout.js

@@ -1,6 +1,6 @@
 import { i as FormSize, n as AnalyticsId } from "./constants2.js";
 import React from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import formGroupStyles from "./components/FormLayout/styles.module.scss";
 let FormLayoutColumns = /* @__PURE__ */ function(FormLayoutColumns$1) {
@@ -14,8 +14,8 @@ let FormLayoutColumns = /* @__PURE__ */ function(FormLayoutColumns$1) {
 const FormLayout = React.forwardRef((props, ref) => {
 	const { maxColumns: columns = FormLayoutColumns.one, colMinWidth = 300, size, className, mapHelper } = props;
 	const cssVariable = { "--min-col-width": `${colMinWidth}px` };
-	const formLayoutContainerClasses = cn(formGroupStyles["form-layout-container"], { [formGroupStyles["form-layout-container--large"]]: size === FormSize.large }, className);
-	const formLayoutChildClasses = cn(formGroupStyles["form-layout-child"], {
+	const formLayoutContainerClasses = classNames(formGroupStyles["form-layout-container"], { [formGroupStyles["form-layout-container--large"]]: size === FormSize.large }, className);
+	const formLayoutChildClasses = classNames(formGroupStyles["form-layout-child"], {
 		[formGroupStyles["form-layout-child--two"]]: columns === FormLayoutColumns.two,
 		[formGroupStyles["form-layout-child--three"]]: columns === FormLayoutColumns.three,
 		[formGroupStyles["form-layout-child--four"]]: columns === FormLayoutColumns.four,