@helsenorge/designsystem-react 15.3.0 → 15.5.0

package/lib/Duolist.js.map

@@ -1 +1 @@
-{"version":3,"file":"Duolist.js","names":[],"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,IAAa,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;CACjD,CAAC;CACD,MAAM,eAAe,GAAW,cAAc,gBAAgB;GAC3D,cAAc,uBAAuB;GACrC,cAAc,gCAAgC;CACjD,CAAC;CAED,MAAM,sBAAsB;EAC1B,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;GACE,kBAAgB,eAAe,YAAY,KAAA;GAC3C,WAAW;GACX,eAAa,MAAM,UAAU,GAAG,MAAM,OAAO;aAE5C;EACC,CAAA,GACJ,oBAAC,MAAD;GAAI,WAAW;GAAc,eAAa,MAAM,UAAU,GAAG,MAAM,OAAO;aACvE;EACC,CAAA,CACJ,EAAA,CAAA;CAEN;CAEA,OAAO,eAAe,oBAAC,OAAD,EAAA,UAAM,cAAc,EAAO,CAAA,IAAI,oBAAA,UAAA,EAAA,UAAG,cAAc,EAAI,CAAA;AAC5E;AAEA,IAAa,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,cAAc;CACjC,MAAM,mBAAmB,sCAAsC,cAAc,WAAW;CAExF,MAAM,wBAAwB,GAC5B;GACG,cAAc,6BAA6B;GAC3C,cAAc,wCAAwC;CACzD,GACA,SACF;CAEA,MAAM,iBAAiB,GAAW,cAAc,SAAS;GACtD,cAAc,mBAAmB;GACjC,cAAc,4BAA4B;GAC1C,cAAc,wBAAwB;GACtC,cAAc,4BAA4B,CAAC;CAC9C,CAAC;CAED,MAAM,qBAAqB,mBAAmB,mBAAmB,MAAM;CAEvE,OACE,qBAAC,OAAD;EAAK,WAAW;EAAuB,eAAa;EAAQ,oBAAkB,YAAY;YAA1F,CACG,SACC,qBAAA,UAAA,EAAA,UAAA,CACG,OACD,oBAAC,gBAAD,CAAS,CAAA,CACT,EAAA,CAAA,GAEJ,oBAAC,MAAD;GACE,OAAO,CAAC,eAAe,EAAE,qBAAqB,mBAAmB,QAAQ,QAAQ,qBAAqB,IAAI,KAAA;GAC1G,WAAW;aAEV,MAAM,SAAS,IAAI,WAAW,UAAmE;IAChG,IAAI,UAAU,QAAQ,OAAO,UAAU,aAAa;IACpD,MAAM,eAAe;IACrB,IAAI,aAAa,SAAS,cACxB,OAAO,MAAM,aAAa,OAAgD;KACxE,GAAG,aAAa;KAChB,YAAY,aAAa,MAAM,cAAc;KAC7C,QAAQ,aAAa,MAAM,UAAU;KACrC,WAAW,aAAa,MAAM,aAAa;IAC7C,CAAC;GAEL,CAAC;EACC,CAAA,CACD;;AAET;;;AC7JA,IAAA,kBAAe"}
+{"version":3,"file":"Duolist.js","names":[],"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,IAAa,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;CACjD,CAAC;CACD,MAAM,eAAe,WAAW,cAAc,gBAAgB;GAC3D,cAAc,uBAAuB;GACrC,cAAc,gCAAgC;CACjD,CAAC;CAED,MAAM,sBAAsB;EAC1B,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;GACE,kBAAgB,eAAe,YAAY,KAAA;GAC3C,WAAW;GACX,eAAa,MAAM,UAAU,GAAG,MAAM,OAAO;aAE5C;EACC,CAAA,GACJ,oBAAC,MAAD;GAAI,WAAW;GAAc,eAAa,MAAM,UAAU,GAAG,MAAM,OAAO;aACvE;EACC,CAAA,CACJ,EAAA,CAAA;CAEN;CAEA,OAAO,eAAe,oBAAC,OAAD,EAAA,UAAM,cAAc,EAAO,CAAA,IAAI,oBAAA,UAAA,EAAA,UAAG,cAAc,EAAI,CAAA;AAC5E;AAEA,IAAa,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,cAAc;CACjC,MAAM,mBAAmB,sCAAsC,cAAc,WAAW;CAExF,MAAM,wBAAwB,WAC5B;GACG,cAAc,6BAA6B;GAC3C,cAAc,wCAAwC;CACzD,GACA,SACF;CAEA,MAAM,iBAAiB,WAAW,cAAc,SAAS;GACtD,cAAc,mBAAmB;GACjC,cAAc,4BAA4B;GAC1C,cAAc,wBAAwB;GACtC,cAAc,4BAA4B,CAAC;CAC9C,CAAC;CAED,MAAM,qBAAqB,mBAAmB,mBAAmB,MAAM;CAEvE,OACE,qBAAC,OAAD;EAAK,WAAW;EAAuB,eAAa;EAAQ,oBAAkB,YAAY;YAA1F,CACG,SACC,qBAAA,UAAA,EAAA,UAAA,CACG,OACD,oBAAC,gBAAD,CAAS,CAAA,CACT,EAAA,CAAA,GAEJ,oBAAC,MAAD;GACE,OAAO,CAAC,eAAe,EAAE,qBAAqB,mBAAmB,QAAQ,QAAQ,qBAAqB,IAAI,KAAA;GAC1G,WAAW;aAEV,MAAM,SAAS,IAAI,WAAW,UAAmE;IAChG,IAAI,UAAU,QAAQ,OAAO,UAAU,aAAa;IACpD,MAAM,eAAe;IACrB,IAAI,aAAa,SAAS,cACxB,OAAO,MAAM,aAAa,OAAgD;KACxE,GAAG,aAAa;KAChB,YAAY,aAAa,MAAM,cAAc;KAC7C,QAAQ,aAAa,MAAM,UAAU;KACrC,WAAW,aAAa,MAAM,aAAa;IAC7C,CAAC;GAEL,CAAC;EACC,CAAA,CACD;;AAET;;;AC7JA,IAAA,kBAAe"}

package/lib/ElementHeader.js

@@ -9,7 +9,7 @@ import { t as StatusDot_default } from "./StatusDot.js";
 import { t as Highlighter_default } from "./Highlighter.js";
 import { n as ElementHeaderText } from "./ElementHeaderText.js";
 import { n as StatusDotList, t as StatusDotList_default } from "./StatusDotList.js";
-import cn from "classnames";
+import classNames from "classnames";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/ElementHeader/styles.module.scss";
@@ -77,17 +77,17 @@ var 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":[],"sources":["../src/components/ElementHeader/utils.tsx","../src/components/ElementHeader/ElementHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { AvatarProps } from '../Avatar';\nimport type { BadgeProps } from '../Badge';\nimport type { StatusDotProps } from '../StatusDot';\n\nimport ElementHeader, { type ElementHeaderChildren, type ElementHeaderProps } from './ElementHeader';\nimport { ElementHeaderText, type ElementHeaderTextProps } from './ElementHeaderText';\nimport { StatusDotList, type StatusDotListProps } from './StatusDotList';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport Avatar from '../Avatar';\nimport Badge from '../Badge';\nimport StatusDot from '../StatusDot';\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 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","import React from 'react';\n\nimport cn from 'classnames';\n\nimport type { AvatarProps, AvatarType } from '../Avatar';\nimport type { BadgeProps, BadgeType } from '../Badge';\nimport type { IconProps, SvgIcon } from '../Icon';\nimport type { LazyIconProps } from '../LazyIcon';\nimport type { StatusDotProps, StatusDotType } from '../StatusDot';\nimport type { TitleTags } from '../Title';\nimport type { ElementHeaderTextProps, ElementHeaderTextType } from './ElementHeaderText/ElementHeaderText';\nimport type { StatusDotListProps, StatusDotListType } from './StatusDotList/StatusDotList';\n\nimport ElementHeaderText from './ElementHeaderText/ElementHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent } from '../../utils/component';\nimport { AvatarSize } from '../Avatar';\nimport Icon, { IconSize } from '../Icon';\nimport StatusDotList from './StatusDotList';\nimport Highlighter from '../Highlighter';\nimport LazyIcon from '../LazyIcon';\nimport { mapChildren } from './utils';\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 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\nexport interface 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\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":";;;;;;;;;;;;;;;;AAgBA,IAAa,eAA+B,UAAU,aAAa,UAAU;CAC3E,IAAI;CACJ,MAAM,gBAAkD,CAAC;CACzD,MAAM,oBAA0D,CAAC;CACjE,IAAI;CACJ,MAAM,4BAA0E,CAAC;CACjF,MAAM,iBAA2B,CAAC;CAClC,MAAM,oBAAuC,CAAC;CAE9C,MAAM,SAAS,QAAQ,WAAU,UAAS;EACxC,IAAI,UAAU,QAAQ,OAAO,UAAU,aAAa;EACpD,IAAI,YAAyB,OAAO,cAAM,GACxC,cAAc;OACT,IAAI,YAAoC,OAAO,iBAAiB,GACrE,0BAA0B,KAAK,KAAK;OAC/B,IAAI,YAAwB,OAAO,aAAK,GAC7C,cAAc,KAAK,KAAK;OACnB,IAAI,YAAgC,OAAO,aAAa,GAC7D,mBAAmB;OACd,IAAI,YAA4B,OAAO,iBAAS,GACrD,kBAAkB,KAAK,KAAK;OACvB,IAAI,OAAO,UAAU,UAC1B,eAAe,KAAK,KAAK;OAEzB,kBAAkB,KAAK,KAAK;CAEhC,CAAC;CAID,MAAM,qBACJ,gBAAgB,KAAA,KAChB,0BAA0B,SAAS,KACnC,kBAAkB,SAAS,KAC3B,qBAAqB,KAAA,KACpB,kBAAkB,KAAA,KAAa,eAAe,SAAS;CAC1D,MAAM,+BACJ,kBAAkB,WAAW,KAC5B,wBAAwB,kBAAkB,EAAE,KAAK,OAAO,kBAAkB,IAAI,OAAO,aAAa;CAErG,IAAI,cAAc,sBAAsB,8BACtC,OAAO;EACL;EAC2B;EAC3B;EACA;EACA;EACA;EACA;CACF;CAGF,IAAI,wBAAwB,kBAAkB,EAAE,GAC9C,OAAO,YAAY,kBAAkB,IAAI,OAAO,UAAU,IAAI;AAElE;AAEA,IAAa,uBACX,SACA,YAImC;CACnC,MAAM,EAAE,iBAAiB,WAAW,MAAM,YAAY,aAAa,MAAM,eAAe,gBAAgB;CAExG,IAAI,YAAgC,SAAS,aAAa,GACxD,OAAO,MAAM,aAAa,SAAS;EACjC;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAEH,IAAI,SACF,OACE,oBAAC,eAAD;EACiB;EACE;EACL;EACC;EACP;EACK;EACL;EACO;YAEZ;CACY,CAAA;AAGrB;;;ACrCA,IAAa,qBAAuC,UAAS;CAC3D,MAAM,EACJ,YAAY,IACZ,kBAAkB,MAClB,aAAa,YACb,aACA,aACA,UACA,MACA,WACA,MACA,QACA,kBACE;CACJ,MAAM,aAAa,cAAc;CACjC,MAAM,WAAW,SAAS,WAAW,CAAC,CAAC;CACvC,MAAM,kBAAkB,OAAO,aAAa;CAC5C,MAAM,iBAAiB,YAAY,QAAQ;CAC3C,MAAM,gBAAgB,CAAC,CAAC,gBAAgB,mBAAmB,UAAU,CAAC,CAAC,gBAAgB;CAEvF,MAAM,mBAAmB,GAAG,OAAO,mBAAmB,GAAG,OAAO,6BAA6B,SAAS,UAAU,GAAG,SAAS;CAC5H,MAAM,wBAAwB,GAAG,OAAO,kCAAkC;CAC1E,MAAM,eAAe,GAAG,OAAO,wBAAwB;CACvD,MAAM,4BAA4B,GAAG,OAAO,sCAAsC;CAClF,MAAM,iBAAiB,GAAG,OAAO,0BAA0B;CAC3D,MAAM,iBAAiB,GAAG,OAAO,4BAA4B;GAC1D,OAAO,sCAAsC,CAAC;GAC9C,OAAO,sCAAsC,SAAS;CACzD,CAAC;CACD,MAAM,cAAc,GAAG,OAAO,yBAAyB,GAAG,OAAO,0CAA0C,cAAc,CAAC;CAC1H,MAAM,gBAAgB,GAAG,OAAO,2BAA2B,CAAC,CAAC;CAC7D,MAAM,YAAY;CAClB,MAAM,0BAA0B,YAAuB,MAAM,YAAI;CACjE,MAAM,8BAA8B,CAAC,2BAA2B,YAA2B,MAAM,gBAAQ;CAEzG,IAAI;CACJ,IAAI,yBACF,gBAAgB,MAAM,aAAa,MAAuC;EACxE,MAAM,aAAa,WAAW,KAAK,SAAS,SAAS,SAAS;EAC9D;CACF,CAAC;MACI,IAAI,6BACT,gBAAgB,MAAM,aAAa,MAA2C;EAC5E,MAAM,aAAa,WAAW,KAAK,SAAS,SAAS,SAAS;EAC9D;CACF,CAAC;MAED,gBAAgB;CAGlB,OACE,qBAAC,QAAD;EAAM,eAAa;EAAQ,WAAW;YAAtC;GACG,YAAY,QAAQ,oBAAC,QAAD;IAAM,WAAW;cAAc;GAAoB,CAAA;GACvE,SAAS,WAAW,gBAAgB,eACnC,oBAAC,QAAD;IAAM,WAAW;cAAgB,MAAM,aAAa,eAAe,aAAa,EAAE,MAAM,WAAW,OAAO,CAAC;GAAQ,CAAA;GAGrH,qBAAC,QAAD;IAAM,WAAW;IAAgB,sBAAoB;cAArD;KACG,gBAAgB;KAChB,CAAC,CAAC,gBAAgB,eAAe,UAChC,oBAAC,WAAD;MAAW,WAAW,OAAO;gBAC3B,oBAAC,qBAAD;OAAa,YAAY;iBAAgB,eAAe;MAA4B,CAAA;KAC3E,CAAA;KAEb,oBAAC,qBAAD;MAAa,YAAY;gBAAgB,gBAAgB;KAA+B,CAAA;IACpF;;GAEL,iBACC,qBAAC,QAAD;IAAM,WAAW;cAAjB,CACG,CAAC,CAAC,gBAAgB,qBAAqB,oBAAC,uBAAD,EAAA,UAAgB,eAAe,kBAAiC,CAAA,GACvG,CAAC,CAAC,gBAAgB,oBAAoB,gBAAgB,gBACnD;;GAGR,oBAAC,QAAD;IAAM,WAAW;cACd,gBAAgB,iBACf,eAAe,cAAc,KAAK,YAAY,UAAU;KACtD,OACE,oBAAC,QAAD;MAAkB,WAAW;MAAc,mBAAiB;gBACzD;KACG,GAFK,KAEL;IAEV,CAAC;GACC,CAAA;GACL,eAAe,OAAO,gBAAgB,eACrC,oBAAC,QAAD;IAAM,WAAW;IAAgB,mBAAiB;cAChD,oBAAC,cAAD;KAAM,SAAS;KAAwB;KAAW,MAAM,SAAS;IAAS,CAAA;GACtE,CAAA;GAEP,eACC,oBAAC,QAAD;IAAM,WAAW;IAAgB,mBAAiB;cAC/C;GACG,CAAA;EAEJ;;AAEV;AAMA,kBAAkB,cAAc;AAChC,IAAM,gBAAgB;AACtB,cAAc,OAAO;AACrB,cAAc,KAAK,cAAc;AACjC,cAAc,gBAAgB;AAC9B,cAAc,cAAc,cAAc"}
+{"version":3,"file":"ElementHeader.js","names":[],"sources":["../src/components/ElementHeader/utils.tsx","../src/components/ElementHeader/ElementHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { AvatarProps } from '../Avatar';\nimport type { BadgeProps } from '../Badge';\nimport type { StatusDotProps } from '../StatusDot';\n\nimport ElementHeader, { type ElementHeaderChildren, type ElementHeaderProps } from './ElementHeader';\nimport { ElementHeaderText, type ElementHeaderTextProps } from './ElementHeaderText';\nimport { StatusDotList, type StatusDotListProps } from './StatusDotList';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport Avatar from '../Avatar';\nimport Badge from '../Badge';\nimport StatusDot from '../StatusDot';\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 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","import React from 'react';\n\nimport cn from 'classnames';\n\nimport type { AvatarProps, AvatarType } from '../Avatar';\nimport type { BadgeProps, BadgeType } from '../Badge';\nimport type { IconProps, SvgIcon } from '../Icon';\nimport type { LazyIconProps } from '../LazyIcon';\nimport type { StatusDotProps, StatusDotType } from '../StatusDot';\nimport type { TitleTags } from '../Title';\nimport type { ElementHeaderTextProps, ElementHeaderTextType } from './ElementHeaderText/ElementHeaderText';\nimport type { StatusDotListProps, StatusDotListType } from './StatusDotList/StatusDotList';\n\nimport ElementHeaderText from './ElementHeaderText/ElementHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent } from '../../utils/component';\nimport { AvatarSize } from '../Avatar';\nimport Icon, { IconSize } from '../Icon';\nimport StatusDotList from './StatusDotList';\nimport Highlighter from '../Highlighter';\nimport LazyIcon from '../LazyIcon';\nimport { mapChildren } from './utils';\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 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\nexport interface 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\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 cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/ElementHeader/styles.module.scss";
 //#region src/components/ElementHeader/ElementHeaderText/ElementHeaderText.tsx
 var 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 });
 	return /* @__PURE__ */ jsx("span", {
 		"data-testid": testId,
 		className: headerTextWrapperClasses,

package/lib/ElementHeaderText.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElementHeaderText.js","names":[],"sources":["../src/components/ElementHeader/ElementHeaderText/ElementHeaderText.tsx","../src/components/ElementHeader/ElementHeaderText/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport type { TitleTags } from '../../Title';\n\nimport Highlighter from '../../Highlighter';\nimport styles from '../styles.module.scss';\n\nexport type ElementHeaderTextType = typeof ElementHeaderText;\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: React.FC<ElementHeaderTextProps> = 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","import ElementHeaderText from './ElementHeaderText';\nexport * from './ElementHeaderText';\nexport default ElementHeaderText;\n"],"mappings":";;;;;AA8BA,IAAa,qBAAsD,UAAS;CAC1E,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,QACvC,CAAC;CACD,MAAM,gCAAgC,GAAG,GACtC,OAAO,oCAAoC,oBAC9C,CAAC;CACD,MAAM,iCAAiC,GAAG,GACvC,OAAO,oCAAoC,qBAC9C,CAAC;CAGD,OACE,oBAAC,QAAD;EAAM,eAAa;EAAQ,WAAW;YACpC,oBAAC,iBAAD;GAAW,WAAW,OAAO;aAC3B,qBAAC,qBAAD;IAAa,YAAY;cAAzB,CACE,oBAAC,QAAD;KAAM,WAAW;eAAgC;IAAgB,CAAA,GAChE,cAAc,oBAAC,QAAD;KAAM,WAAW;eAAiC;IAAiB,CAAA,CACvE;;EACJ,CAAA;CACP,CAAA;AAEV;;;AC9DA,IAAA,4BAAe"}
+{"version":3,"file":"ElementHeaderText.js","names":[],"sources":["../src/components/ElementHeader/ElementHeaderText/ElementHeaderText.tsx","../src/components/ElementHeader/ElementHeaderText/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport type { TitleTags } from '../../Title';\n\nimport Highlighter from '../../Highlighter';\nimport styles from '../styles.module.scss';\n\nexport type ElementHeaderTextType = typeof ElementHeaderText;\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: React.FC<ElementHeaderTextProps> = 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","import ElementHeaderText from './ElementHeaderText';\nexport * from './ElementHeaderText';\nexport default ElementHeaderText;\n"],"mappings":";;;;;AA8BA,IAAa,qBAAsD,UAAS;CAC1E,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,QACvC,CAAC;CACD,MAAM,gCAAgC,WAAG,GACtC,OAAO,oCAAoC,oBAC9C,CAAC;CACD,MAAM,iCAAiC,WAAG,GACvC,OAAO,oCAAoC,qBAC9C,CAAC;CAGD,OACE,oBAAC,QAAD;EAAM,eAAa;EAAQ,WAAW;YACpC,oBAAC,iBAAD;GAAW,WAAW,OAAO;aAC3B,qBAAC,qBAAD;IAAa,YAAY;cAAzB,CACE,oBAAC,QAAD;KAAM,WAAW;eAAgC;IAAgB,CAAA,GAChE,cAAc,oBAAC,QAAD;KAAM,WAAW;eAAiC;IAAiB,CAAA,CACvE;;EACJ,CAAA;CACP,CAAA;AAEV;;;AC9DA,IAAA,4BAAe"}

package/lib/ErrorWrapper.js

@@ -1,11 +1,11 @@
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/ErrorWrapper/styles.module.scss";
 //#region src/components/ErrorWrapper/ErrorWrapper.tsx
 var 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":[],"sources":["../src/components/ErrorWrapper/ErrorWrapper.tsx","../src/components/ErrorWrapper/index.ts"],"sourcesContent":["import 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.Ref<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":";;;;AAyBA,IAAa,gBAA4C,UAAS;CAChE,MAAM,EAAE,cAAc,SAAS;CAI/B,OACE,qBAAC,OAAD;EAAK,WAHqB,GAAG,MAAM,aAAa,eAAe,OAAO,8BAA8B,MAAM,SAG1F;EAAqB,eAAa,MAAM;YAAxD,CACE,oBAAC,QAAD;GAAM,KAAK,MAAM;GAAiB,UAAU;aACzC,MAAM,aACL,oBAAC,KAAD;IAAG,WAAW,OAAO;IAA0B,IAAI,MAAM;cACtD,MAAM;GACN,CAAA;EAED,CAAA,GACL,MAAM,QACJ;;AAET;;;ACxCA,IAAA,uBAAe"}
+{"version":3,"file":"ErrorWrapper.js","names":[],"sources":["../src/components/ErrorWrapper/ErrorWrapper.tsx","../src/components/ErrorWrapper/index.ts"],"sourcesContent":["import 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.Ref<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":";;;;AAyBA,IAAa,gBAA4C,UAAS;CAChE,MAAM,EAAE,cAAc,SAAS;CAI/B,OACE,qBAAC,OAAD;EAAK,WAHqB,WAAG,MAAM,aAAa,eAAe,OAAO,8BAA8B,MAAM,SAG1F;EAAqB,eAAa,MAAM;YAAxD,CACE,oBAAC,QAAD;GAAM,KAAK,MAAM;GAAiB,UAAU;aACzC,MAAM,aACL,oBAAC,KAAD;IAAG,WAAW,OAAO;IAA0B,IAAI,MAAM;cACtD,MAAM;GACN,CAAA;EAED,CAAA,GACL,MAAM,QACJ;;AAET;;;ACxCA,IAAA,uBAAe"}

package/lib/Expander.js

@@ -7,7 +7,7 @@ import { useSize } from "./hooks/useSize.js";
 import ChevronDown from "./components/Icons/ChevronDown.js";
 import ChevronUp from "./components/Icons/ChevronUp.js";
 import { useExpand } from "./hooks/useExpand.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Expander/styles.module.scss";
@@ -29,14 +29,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 : ChevronDown,
 			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",
@@ -53,7 +53,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,
@@ -68,13 +68,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"], { [styles["expander__button-container--sticky"]]: isSticky }),
+		className: classNames(styles["expander__button-container"], { [styles["expander__button-container--sticky"]]: isSticky }),
 		children: /* @__PURE__ */ jsxs(Button_default, {
 			id: buttonId,
 			variant: "borderless",
@@ -93,9 +93,9 @@ var Expander = (props) => {
 	});
 	const renderContent = () => {
 		if (!renderChildrenWhenClosed && !isExpanded) return null;
-		const contentClassName = 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--inner"], emphasized && styles["expander__content--emphasized"], { [styles["expander__content--sticky"]]: isSticky }, contentClassNames);
+		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"], emphasized && styles["expander__content--emphasized"], { [styles["expander__content--sticky"]]: isSticky }, contentClassNames);
 		return /* @__PURE__ */ jsx("div", {
-			className: cn(size === ExpanderSize.small && !emphasized && !noNestedLine && styles["expander__content--nested-line--outer"]),
+			className: classNames(size === ExpanderSize.small && !emphasized && !noNestedLine && styles["expander__content--nested-line--outer"]),
 			children: /* @__PURE__ */ jsx("div", {
 				className: contentClassName,
 				children

package/lib/Expander.js.map

@@ -1 +1 @@
-{"version":3,"file":"Expander.js","names":[],"sources":["../src/components/Expander/constants.ts","../src/components/Expander/Expander.tsx","../src/components/Expander/index.ts"],"sourcesContent":["export enum ExpanderSize {\n  small = 'small',\n  large = 'large',\n}\n","import { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nimport { ExpanderSize } from './constants';\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport Button from '../Button';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\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  /** Emphasizes the content section. Intended for size=ExpanderSize.small. */\n  emphasized?: 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    emphasized = 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(styles['expander__button-container'], {\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      emphasized && styles['expander__content--emphasized'],\n      { [styles['expander__content--sticky']]: isSticky },\n      contentClassNames\n    );\n    const leftBorderClassName = classNames(\n      size === ExpanderSize.small && !emphasized && !noNestedLine && styles['expander__content--nested-line--outer']\n    );\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 { ExpanderSize } from './constants';\nexport * from './Expander';\nexport default Expander;\n"],"mappings":"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"}
+{"version":3,"file":"Expander.js","names":[],"sources":["../src/components/Expander/constants.ts","../src/components/Expander/Expander.tsx","../src/components/Expander/index.ts"],"sourcesContent":["export enum ExpanderSize {\n  small = 'small',\n  large = 'large',\n}\n","import { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nimport { ExpanderSize } from './constants';\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport Button from '../Button';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\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  /** Emphasizes the content section. Intended for size=ExpanderSize.small. */\n  emphasized?: 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    emphasized = 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(styles['expander__button-container'], {\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      emphasized && styles['expander__content--emphasized'],\n      { [styles['expander__content--sticky']]: isSticky },\n      contentClassNames\n    );\n    const leftBorderClassName = classNames(\n      size === ExpanderSize.small && !emphasized && !noNestedLine && styles['expander__content--nested-line--outer']\n    );\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 { ExpanderSize } from './constants';\nexport * from './Expander';\nexport default Expander;\n"],"mappings":"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"}

package/lib/FilterButton.js

@@ -4,7 +4,7 @@ import { t as Icon_default } from "./Icon.js";
 import { useLanguage } from "./hooks/useLanguage.js";
 import Filter from "./components/Icons/Filter.js";
 import { t as getResources } from "./resourceHelper.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Filter/FilterButton/styles.module.scss";
@@ -23,7 +23,7 @@ var FilterButton = (props) => {
 		className: styles["filter-button"],
 		ref: buttonRef,
 		children: /* @__PURE__ */ jsxs("span", {
-			className: cn(styles["filter-button__inner"], { [styles["filter-button__inner--hovered"]]: isHovered }),
+			className: classNames(styles["filter-button__inner"], { [styles["filter-button__inner--hovered"]]: isHovered }),
 			children: [/* @__PURE__ */ jsx(Icon_default, {
 				svgIcon: Filter,
 				isHovered,

package/lib/FilterButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterButton.js","names":[],"sources":["../src/components/Filter/FilterButton/FilterButton.tsx","../src/components/Filter/FilterButton/index.ts"],"sourcesContent":["import { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemFilter } from '../../../resources/Resources';\n\nimport { IconSize, LanguageLocales } from '../../../constants';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport Icon from '../../Icon';\nimport Filter from '../../Icons/Filter';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Texts if overriding SOT */\n  resources?: Partial<HNDesignsystemFilter>;\n}\n\nconst FilterButton: React.FC<FilterButtonProps> = props => {\n  const { resources } = props;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = usePseudoClasses(buttonRef);\n\n  return (\n    <button {...props} className={styles['filter-button']} ref={buttonRef}>\n      <span\n        className={classNames(styles['filter-button__inner'], {\n          [styles['filter-button__inner--hovered']]: isHovered,\n        })}\n      >\n        <Icon svgIcon={Filter} isHovered={isHovered} size={IconSize.XSmall} />\n        <span className={styles['filter-button__text']}>{mergedResources.filterButtonText}</span>\n      </span>\n    </button>\n  );\n};\n\nexport default FilterButton;\n","import FilterButton from './FilterButton';\nexport * from './FilterButton';\nexport default FilterButton;\n"],"mappings":";;;;;;;;;;;AAoBA,IAAM,gBAA4C,UAAS;CACzD,MAAM,EAAE,cAAc;CAEtB,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAG3E,MAAM,kBAAkB;EACtB,GAHuB,aAAa,QAGjC;EACH,GAAG;CACL;CAEA,MAAM,YAAY,OAA0B,IAAI;CAChD,MAAM,EAAE,cAAc,iBAAiB,SAAS;CAEhD,OACE,oBAAC,UAAD;EAAQ,GAAI;EAAO,WAAW,OAAO;EAAkB,KAAK;YAC1D,qBAAC,QAAD;GACE,WAAW,GAAW,OAAO,yBAAyB,GACnD,OAAO,mCAAmC,UAC7C,CAAC;aAHH,CAKE,oBAAC,cAAD;IAAM,SAAS;IAAmB;IAAW,MAAM,SAAS;GAAS,CAAA,GACrE,oBAAC,QAAD;IAAM,WAAW,OAAO;cAAyB,gBAAgB;GAAuB,CAAA,CACpF;;CACA,CAAA;AAEZ;;;AC5CA,IAAA,uBAAe"}
+{"version":3,"file":"FilterButton.js","names":[],"sources":["../src/components/Filter/FilterButton/FilterButton.tsx","../src/components/Filter/FilterButton/index.ts"],"sourcesContent":["import { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemFilter } from '../../../resources/Resources';\n\nimport { IconSize, LanguageLocales } from '../../../constants';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport Icon from '../../Icon';\nimport Filter from '../../Icons/Filter';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Texts if overriding SOT */\n  resources?: Partial<HNDesignsystemFilter>;\n}\n\nconst FilterButton: React.FC<FilterButtonProps> = props => {\n  const { resources } = props;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = usePseudoClasses(buttonRef);\n\n  return (\n    <button {...props} className={styles['filter-button']} ref={buttonRef}>\n      <span\n        className={classNames(styles['filter-button__inner'], {\n          [styles['filter-button__inner--hovered']]: isHovered,\n        })}\n      >\n        <Icon svgIcon={Filter} isHovered={isHovered} size={IconSize.XSmall} />\n        <span className={styles['filter-button__text']}>{mergedResources.filterButtonText}</span>\n      </span>\n    </button>\n  );\n};\n\nexport default FilterButton;\n","import FilterButton from './FilterButton';\nexport * from './FilterButton';\nexport default FilterButton;\n"],"mappings":";;;;;;;;;;;AAoBA,IAAM,gBAA4C,UAAS;CACzD,MAAM,EAAE,cAAc;CAEtB,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAG3E,MAAM,kBAAkB;EACtB,GAHuB,aAAa,QAGjC;EACH,GAAG;CACL;CAEA,MAAM,YAAY,OAA0B,IAAI;CAChD,MAAM,EAAE,cAAc,iBAAiB,SAAS;CAEhD,OACE,oBAAC,UAAD;EAAQ,GAAI;EAAO,WAAW,OAAO;EAAkB,KAAK;YAC1D,qBAAC,QAAD;GACE,WAAW,WAAW,OAAO,yBAAyB,GACnD,OAAO,mCAAmC,UAC7C,CAAC;aAHH,CAKE,oBAAC,cAAD;IAAM,SAAS;IAAmB;IAAW,MAAM,SAAS;GAAS,CAAA,GACrE,oBAAC,QAAD;IAAM,WAAW,OAAO;cAAyB,gBAAgB;GAAuB,CAAA,CACpF;;CACA,CAAA;AAEZ;;;AC5CA,IAAA,uBAAe"}

package/lib/FilterButtonAndChipsWrapper.js

@@ -1,7 +1,7 @@
 import { LanguageLocales } from "./constants.js";
 import { useLanguage } from "./hooks/useLanguage.js";
 import { t as getResources } from "./resourceHelper.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Filter/FilterButtonAndChipsWrapper/styles.module.scss";
 //#region src/components/Filter/FilterButtonAndChipsWrapper/FilterButtonAndChipsWrapper.tsx
@@ -12,7 +12,7 @@ var FilterButtonAndChipsWrapper = ({ filterButtonComponent, filterChips, testId,
 		...resources
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn(styles["filter-chip-bar"]),
+		className: classNames(styles["filter-chip-bar"]),
 		"data-testid": testId,
 		children: [filterButtonComponent, /* @__PURE__ */ jsx("ul", {
 			"aria-label": mergedResources.activeFiltersListLabel,

package/lib/FilterButtonAndChipsWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterButtonAndChipsWrapper.js","names":[],"sources":["../src/components/Filter/FilterButtonAndChipsWrapper/FilterButtonAndChipsWrapper.tsx","../src/components/Filter/FilterButtonAndChipsWrapper/index.ts"],"sourcesContent":["import type React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemFilter } from '../../../resources/Resources';\n\nimport { LanguageLocales } from '../../../constants';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterButtonAndChipsWrapperProps {\n  /** FilterButton content area */\n  filterButtonComponent: React.ReactNode;\n  /** Content area for rendering filter chips */\n  filterChips: React.ReactNode[];\n  /** test id that is placed on the wrapper */\n  testId?: string;\n  /** Resources for the component */\n  resources?: Partial<HNDesignsystemFilter>;\n}\n\nconst FilterButtonAndChipsWrapper: React.FC<FilterButtonAndChipsWrapperProps> = ({\n  filterButtonComponent,\n  filterChips,\n  testId,\n  resources,\n}) => {\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources = {\n    ...defaultResources,\n    ...resources,\n  };\n  return (\n    <div className={classNames(styles['filter-chip-bar'])} data-testid={testId}>\n      {filterButtonComponent}\n      <ul aria-label={mergedResources.activeFiltersListLabel} className={styles['filter-chip-bar__list']}>\n        {filterChips.map((activefilter, index) => (\n          <li key={index}>{activefilter}</li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n\nexport default FilterButtonAndChipsWrapper;\n","import FilterButtonAndChipsWrapper from './FilterButtonAndChipsWrapper';\nexport * from './FilterButtonAndChipsWrapper';\nexport default FilterButtonAndChipsWrapper;\n"],"mappings":";;;;;;;AAuBA,IAAM,+BAA2E,EAC/E,uBACA,aACA,QACA,gBACI;CACJ,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAG3E,MAAM,kBAAkB;EACtB,GAHuB,aAAa,QAGjC;EACH,GAAG;CACL;CACA,OACE,qBAAC,OAAD;EAAK,WAAW,GAAW,OAAO,kBAAkB;EAAG,eAAa;YAApE,CACG,uBACD,oBAAC,MAAD;GAAI,cAAY,gBAAgB;GAAwB,WAAW,OAAO;aACvE,YAAY,KAAK,cAAc,UAC9B,oBAAC,MAAD,EAAA,UAAiB,aAAiB,GAAzB,KAAyB,CACnC;EACC,CAAA,CACD;;AAET;;;AC5CA,IAAA,sCAAe"}
+{"version":3,"file":"FilterButtonAndChipsWrapper.js","names":[],"sources":["../src/components/Filter/FilterButtonAndChipsWrapper/FilterButtonAndChipsWrapper.tsx","../src/components/Filter/FilterButtonAndChipsWrapper/index.ts"],"sourcesContent":["import type React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemFilter } from '../../../resources/Resources';\n\nimport { LanguageLocales } from '../../../constants';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterButtonAndChipsWrapperProps {\n  /** FilterButton content area */\n  filterButtonComponent: React.ReactNode;\n  /** Content area for rendering filter chips */\n  filterChips: React.ReactNode[];\n  /** test id that is placed on the wrapper */\n  testId?: string;\n  /** Resources for the component */\n  resources?: Partial<HNDesignsystemFilter>;\n}\n\nconst FilterButtonAndChipsWrapper: React.FC<FilterButtonAndChipsWrapperProps> = ({\n  filterButtonComponent,\n  filterChips,\n  testId,\n  resources,\n}) => {\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources = {\n    ...defaultResources,\n    ...resources,\n  };\n  return (\n    <div className={classNames(styles['filter-chip-bar'])} data-testid={testId}>\n      {filterButtonComponent}\n      <ul aria-label={mergedResources.activeFiltersListLabel} className={styles['filter-chip-bar__list']}>\n        {filterChips.map((activefilter, index) => (\n          <li key={index}>{activefilter}</li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n\nexport default FilterButtonAndChipsWrapper;\n","import FilterButtonAndChipsWrapper from './FilterButtonAndChipsWrapper';\nexport * from './FilterButtonAndChipsWrapper';\nexport default FilterButtonAndChipsWrapper;\n"],"mappings":";;;;;;;AAuBA,IAAM,+BAA2E,EAC/E,uBACA,aACA,QACA,gBACI;CACJ,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAG3E,MAAM,kBAAkB;EACtB,GAHuB,aAAa,QAGjC;EACH,GAAG;CACL;CACA,OACE,qBAAC,OAAD;EAAK,WAAW,WAAW,OAAO,kBAAkB;EAAG,eAAa;YAApE,CACG,uBACD,oBAAC,MAAD;GAAI,cAAY,gBAAgB;GAAwB,WAAW,OAAO;aACvE,YAAY,KAAK,cAAc,UAC9B,oBAAC,MAAD,EAAA,UAAiB,aAAiB,GAAzB,KAAyB,CACnC;EACC,CAAA,CACD;;AAET;;;AC5CA,IAAA,sCAAe"}

package/lib/FilterLinkList.js

@@ -2,7 +2,7 @@ import { AnalyticsId, IconSize } from "./constants.js";
 import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
 import { t as Icon_default } from "./Icon.js";
 import ChevronRight from "./components/Icons/ChevronRight.js";
-import cn from "classnames";
+import classNames from "classnames";
 import React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Filter/FilterLinkList/FilterLinkList.module.scss";
@@ -10,8 +10,8 @@ import styles from "./components/Filter/FilterLinkList/FilterLinkList.module.scs
 var Link = (props) => {
 	const { children, title, chips, className = "", linkRef, testId, ref, ...restProps } = props;
 	const { refObject, isHovered } = usePseudoClasses(linkRef);
-	const liClasses = cn(styles["link-list__item"]);
-	const linkClasses = cn(styles["link-list__button"], className);
+	const liClasses = classNames(styles["link-list__item"]);
+	const linkClasses = classNames(styles["link-list__button"], className);
 	return /* @__PURE__ */ jsx("li", {
 		className: liClasses,
 		ref,
@@ -45,7 +45,7 @@ var LinkListComponent = (props) => {
 	const { children, className = "", testId, ref } = props;
 	return /* @__PURE__ */ jsx("ul", {
 		ref,
-		className: cn(styles["link-list"], className),
+		className: classNames(styles["link-list"], className),
 		"data-testid": testId,
 		"data-analyticsid": AnalyticsId.LinkList,
 		children: React.Children.map(children, (child) => {

package/lib/FilterLinkList.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterLinkList.js","names":[],"sources":["../src/components/Filter/FilterLinkList/FilterLinkList.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../../constants';\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport Icon from '../../Icon';\nimport ChevronRight from '../../Icons/ChevronRight';\n\nimport styles from './FilterLinkList.module.scss';\n\nexport type LinkType = React.FC<LinkProps>;\n\nexport interface CompoundComponent extends React.FC<LinkListProps> {\n  Link: LinkType;\n}\n\nexport interface LinkListProps {\n  /** Items in the LinkList */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the ul element */\n  ref?: React.Ref<HTMLUListElement | null>;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\nexport type LinkProps = Modify<\n  React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,\n  {\n    /** If needed children will be content instead of title and chips. Use only in edge cases */\n    children?: React.ReactNode;\n    /** Title text on link element */\n    title?: string;\n    /** Texts rendered inside non-interactive chips on link element */\n    chips?: string[];\n    /** Aria label for the list of chips */\n    chipsGroupAriaLabel?: string;\n    /** Custom classname for link element */\n    className?: string;\n    /** Ref for button */\n    linkRef?: React.RefObject<HTMLButtonElement | null>;\n    /** Sets the data-testid attribute. */\n    testId?: string;\n    /** Ref passed to the list item element */\n    ref?: React.Ref<HTMLLIElement | null>;\n  }\n>;\n\nexport const Link: LinkType = (props: LinkProps) => {\n  const { children, title, chips, className = '', linkRef, testId, ref, ...restProps } = props;\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement | null>(linkRef);\n\n  const liClasses = cn(styles['link-list__item']);\n  const linkClasses = cn(styles['link-list__button'], className);\n\n  return (\n    <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      <button className={linkClasses} ref={refObject as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n        <div className={styles['link-list__button__content']}>\n          {title ? (\n            <>\n              <span>{title}</span>\n              {chips && chips.length > 0 && (\n                <ul className={styles['link-list__chip-list']} aria-label={props.chipsGroupAriaLabel}>\n                  {chips.map(chip => (\n                    <li className={styles['link-list__chip']} key={chip}>\n                      {chip}\n                    </li>\n                  ))}\n                </ul>\n              )}\n            </>\n          ) : (\n            <>{children}</>\n          )}\n        </div>\n        <Icon svgIcon={ChevronRight} isHovered={isHovered} size={IconSize.XSmall} color={'var(--color-action-graphics-onlight)'} />\n      </button>\n    </li>\n  );\n};\n\nconst LinkListComponent: React.FC<LinkListProps> = (props: LinkListProps) => {\n  const { children, className = '', testId, ref } = props;\n\n  const listClassNames = cn(styles['link-list'], className);\n\n  return (\n    <ul ref={ref} className={listClassNames} data-testid={testId} data-analyticsid={AnalyticsId.LinkList}>\n      {React.Children.map(children, (child: React.ReactNode) => {\n        if (React.isValidElement<LinkProps>(child) && child.type === Link) {\n          return React.cloneElement(child);\n        }\n      })}\n    </ul>\n  );\n};\n\nexport const FilterLinkList = LinkListComponent as CompoundComponent;\n\nFilterLinkList.displayName = 'FilterLinkList';\nFilterLinkList.Link = Link;\nLink.displayName = 'FilterLinkList.Link';\n\nexport default FilterLinkList;\n"],"mappings":";;;;;;;;;AAoDA,IAAa,QAAkB,UAAqB;CAClD,MAAM,EAAE,UAAU,OAAO,OAAO,YAAY,IAAI,SAAS,QAAQ,KAAK,GAAG,cAAc;CACvF,MAAM,EAAE,WAAW,cAAc,iBAA2C,OAAO;CAEnF,MAAM,YAAY,GAAG,OAAO,kBAAkB;CAC9C,MAAM,cAAc,GAAG,OAAO,sBAAsB,SAAS;CAE7D,OACE,oBAAC,MAAD;EAAI,WAAW;EAAgB;EAAK,eAAa;EAAQ,oBAAkB,YAAY;YACrF,qBAAC,UAAD;GAAQ,WAAW;GAAa,KAAK;GAAiD,MAAK;GAAS,GAAI;aAAxG,CACE,oBAAC,OAAD;IAAK,WAAW,OAAO;cACpB,QACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,GAClB,SAAS,MAAM,SAAS,KACvB,oBAAC,MAAD;KAAI,WAAW,OAAO;KAAyB,cAAY,MAAM;eAC9D,MAAM,KAAI,SACT,oBAAC,MAAD;MAAI,WAAW,OAAO;gBACnB;KACC,GAF2C,IAE3C,CACL;IACC,CAAA,CAEN,EAAA,CAAA,IAEF,oBAAA,UAAA,EAAG,SAAW,CAAA;GAEb,CAAA,GACL,oBAAC,cAAD;IAAM,SAAS;IAAyB;IAAW,MAAM,SAAS;IAAQ,OAAO;GAAyC,CAAA,CACpH;;CACN,CAAA;AAER;AAEA,IAAM,qBAA8C,UAAyB;CAC3E,MAAM,EAAE,UAAU,YAAY,IAAI,QAAQ,QAAQ;CAIlD,OACE,oBAAC,MAAD;EAAS;EAAK,WAHO,GAAG,OAAO,cAAc,SAGpB;EAAgB,eAAa;EAAQ,oBAAkB,YAAY;YACzF,MAAM,SAAS,IAAI,WAAW,UAA2B;GACxD,IAAI,MAAM,eAA0B,KAAK,KAAK,MAAM,SAAS,MAC3D,OAAO,MAAM,aAAa,KAAK;EAEnC,CAAC;CACC,CAAA;AAER;AAEA,IAAa,iBAAiB;AAE9B,eAAe,cAAc;AAC7B,eAAe,OAAO;AACtB,KAAK,cAAc"}
+{"version":3,"file":"FilterLinkList.js","names":[],"sources":["../src/components/Filter/FilterLinkList/FilterLinkList.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../../constants';\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport Icon from '../../Icon';\nimport ChevronRight from '../../Icons/ChevronRight';\n\nimport styles from './FilterLinkList.module.scss';\n\nexport type LinkType = React.FC<LinkProps>;\n\nexport interface CompoundComponent extends React.FC<LinkListProps> {\n  Link: LinkType;\n}\n\nexport interface LinkListProps {\n  /** Items in the LinkList */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the ul element */\n  ref?: React.Ref<HTMLUListElement | null>;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\nexport type LinkProps = Modify<\n  React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,\n  {\n    /** If needed children will be content instead of title and chips. Use only in edge cases */\n    children?: React.ReactNode;\n    /** Title text on link element */\n    title?: string;\n    /** Texts rendered inside non-interactive chips on link element */\n    chips?: string[];\n    /** Aria label for the list of chips */\n    chipsGroupAriaLabel?: string;\n    /** Custom classname for link element */\n    className?: string;\n    /** Ref for button */\n    linkRef?: React.RefObject<HTMLButtonElement | null>;\n    /** Sets the data-testid attribute. */\n    testId?: string;\n    /** Ref passed to the list item element */\n    ref?: React.Ref<HTMLLIElement | null>;\n  }\n>;\n\nexport const Link: LinkType = (props: LinkProps) => {\n  const { children, title, chips, className = '', linkRef, testId, ref, ...restProps } = props;\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement | null>(linkRef);\n\n  const liClasses = cn(styles['link-list__item']);\n  const linkClasses = cn(styles['link-list__button'], className);\n\n  return (\n    <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      <button className={linkClasses} ref={refObject as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n        <div className={styles['link-list__button__content']}>\n          {title ? (\n            <>\n              <span>{title}</span>\n              {chips && chips.length > 0 && (\n                <ul className={styles['link-list__chip-list']} aria-label={props.chipsGroupAriaLabel}>\n                  {chips.map(chip => (\n                    <li className={styles['link-list__chip']} key={chip}>\n                      {chip}\n                    </li>\n                  ))}\n                </ul>\n              )}\n            </>\n          ) : (\n            <>{children}</>\n          )}\n        </div>\n        <Icon svgIcon={ChevronRight} isHovered={isHovered} size={IconSize.XSmall} color={'var(--color-action-graphics-onlight)'} />\n      </button>\n    </li>\n  );\n};\n\nconst LinkListComponent: React.FC<LinkListProps> = (props: LinkListProps) => {\n  const { children, className = '', testId, ref } = props;\n\n  const listClassNames = cn(styles['link-list'], className);\n\n  return (\n    <ul ref={ref} className={listClassNames} data-testid={testId} data-analyticsid={AnalyticsId.LinkList}>\n      {React.Children.map(children, (child: React.ReactNode) => {\n        if (React.isValidElement<LinkProps>(child) && child.type === Link) {\n          return React.cloneElement(child);\n        }\n      })}\n    </ul>\n  );\n};\n\nexport const FilterLinkList = LinkListComponent as CompoundComponent;\n\nFilterLinkList.displayName = 'FilterLinkList';\nFilterLinkList.Link = Link;\nLink.displayName = 'FilterLinkList.Link';\n\nexport default FilterLinkList;\n"],"mappings":";;;;;;;;;AAoDA,IAAa,QAAkB,UAAqB;CAClD,MAAM,EAAE,UAAU,OAAO,OAAO,YAAY,IAAI,SAAS,QAAQ,KAAK,GAAG,cAAc;CACvF,MAAM,EAAE,WAAW,cAAc,iBAA2C,OAAO;CAEnF,MAAM,YAAY,WAAG,OAAO,kBAAkB;CAC9C,MAAM,cAAc,WAAG,OAAO,sBAAsB,SAAS;CAE7D,OACE,oBAAC,MAAD;EAAI,WAAW;EAAgB;EAAK,eAAa;EAAQ,oBAAkB,YAAY;YACrF,qBAAC,UAAD;GAAQ,WAAW;GAAa,KAAK;GAAiD,MAAK;GAAS,GAAI;aAAxG,CACE,oBAAC,OAAD;IAAK,WAAW,OAAO;cACpB,QACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,GAClB,SAAS,MAAM,SAAS,KACvB,oBAAC,MAAD;KAAI,WAAW,OAAO;KAAyB,cAAY,MAAM;eAC9D,MAAM,KAAI,SACT,oBAAC,MAAD;MAAI,WAAW,OAAO;gBACnB;KACC,GAF2C,IAE3C,CACL;IACC,CAAA,CAEN,EAAA,CAAA,IAEF,oBAAA,UAAA,EAAG,SAAW,CAAA;GAEb,CAAA,GACL,oBAAC,cAAD;IAAM,SAAS;IAAyB;IAAW,MAAM,SAAS;IAAQ,OAAO;GAAyC,CAAA,CACpH;;CACN,CAAA;AAER;AAEA,IAAM,qBAA8C,UAAyB;CAC3E,MAAM,EAAE,UAAU,YAAY,IAAI,QAAQ,QAAQ;CAIlD,OACE,oBAAC,MAAD;EAAS;EAAK,WAHO,WAAG,OAAO,cAAc,SAGpB;EAAgB,eAAa;EAAQ,oBAAkB,YAAY;YACzF,MAAM,SAAS,IAAI,WAAW,UAA2B;GACxD,IAAI,MAAM,eAA0B,KAAK,KAAK,MAAM,SAAS,MAC3D,OAAO,MAAM,aAAa,KAAK;EAEnC,CAAC;CACC,CAAA;AAER;AAEA,IAAa,iBAAiB;AAE9B,eAAe,cAAc;AAC7B,eAAe,OAAO;AACtB,KAAK,cAAc"}

package/lib/FilterOverviewSearch.js

@@ -1,12 +1,12 @@
 import { t as FilterSearch } from "./FilterSearch.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/Filter/FilterOverviewSearch/styles.module.scss";
 //#region src/components/Filter/FilterOverviewSearch/FilterOverviewSearch.tsx
 var FilterOverviewSearch = (props) => {
 	const { wrapperClassName, testId, ...filterSearchProps } = props;
 	return /* @__PURE__ */ jsx("div", {
-		className: cn(styles["filter-overview-search"], wrapperClassName),
+		className: classNames(styles["filter-overview-search"], wrapperClassName),
 		"data-testid": testId,
 		children: /* @__PURE__ */ jsx(FilterSearch, { ...filterSearchProps })
 	});

package/lib/FilterOverviewSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterOverviewSearch.js","names":[],"sources":["../src/components/Filter/FilterOverviewSearch/FilterOverviewSearch.tsx","../src/components/Filter/FilterOverviewSearch/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport type { FilterSearchProps } from '../FilterSearch/FilterSearch';\n\nimport FilterSearch from '../FilterSearch/FilterSearch';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterOverviewSearchProps extends FilterSearchProps {\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst FilterOverviewSearch: React.FC<FilterOverviewSearchProps> = props => {\n  const { wrapperClassName, testId, ...filterSearchProps } = props;\n\n  return (\n    <div className={cn(styles['filter-overview-search'], wrapperClassName)} data-testid={testId}>\n      <FilterSearch {...filterSearchProps} />\n    </div>\n  );\n};\n\nexport default FilterOverviewSearch;\n","import FilterOverviewSearch from './FilterOverviewSearch';\nexport * from './FilterOverviewSearch';\nexport default FilterOverviewSearch;\n"],"mappings":";;;;;AAeA,IAAM,wBAA4D,UAAS;CACzE,MAAM,EAAE,kBAAkB,QAAQ,GAAG,sBAAsB;CAE3D,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,2BAA2B,gBAAgB;EAAG,eAAa;YACnF,oBAAC,cAAD,EAAc,GAAI,kBAAoB,CAAA;CACnC,CAAA;AAET;;;ACrBA,IAAA,+BAAe"}
+{"version":3,"file":"FilterOverviewSearch.js","names":[],"sources":["../src/components/Filter/FilterOverviewSearch/FilterOverviewSearch.tsx","../src/components/Filter/FilterOverviewSearch/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport type { FilterSearchProps } from '../FilterSearch/FilterSearch';\n\nimport FilterSearch from '../FilterSearch/FilterSearch';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterOverviewSearchProps extends FilterSearchProps {\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst FilterOverviewSearch: React.FC<FilterOverviewSearchProps> = props => {\n  const { wrapperClassName, testId, ...filterSearchProps } = props;\n\n  return (\n    <div className={cn(styles['filter-overview-search'], wrapperClassName)} data-testid={testId}>\n      <FilterSearch {...filterSearchProps} />\n    </div>\n  );\n};\n\nexport default FilterOverviewSearch;\n","import FilterOverviewSearch from './FilterOverviewSearch';\nexport * from './FilterOverviewSearch';\nexport default FilterOverviewSearch;\n"],"mappings":";;;;;AAeA,IAAM,wBAA4D,UAAS;CACzE,MAAM,EAAE,kBAAkB,QAAQ,GAAG,sBAAsB;CAE3D,OACE,oBAAC,OAAD;EAAK,WAAW,WAAG,OAAO,2BAA2B,gBAAgB;EAAG,eAAa;YACnF,oBAAC,cAAD,EAAc,GAAI,kBAAoB,CAAA;CACnC,CAAA;AAET;;;ACrBA,IAAA,+BAAe"}

package/lib/FilterSearch.js

@@ -7,13 +7,13 @@ import { useIsMobileBreakpoint } from "./hooks/useIsMobileBreakpoint.js";
 import X from "./components/Icons/X.js";
 import { t as getResources } from "./resourceHelper.js";
 import Search from "./components/Icons/Search.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Filter/FilterSearch/styles.module.scss";
 //#region src/components/Filter/FilterSearch/FilterSearch.tsx
 var FilterSearch = (props) => {
-	const { className, value, onChange, resources, buttonProps, clearButtonProps, ref, ...inputProps } = props;
+	const { className, value, onChange, resources, buttonProps, clearButtonProps, ref, withSearchButton = false, ...inputProps } = props;
 	const inputRef = useRef(null);
 	const inputWrapperRef = useRef(null);
 	const { isHovered: isWrapperHovered } = usePseudoClasses(inputWrapperRef);
@@ -29,22 +29,35 @@ var FilterSearch = (props) => {
 	};
 	const inputHasValue = !!value;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn(styles["filter-search__wrapper"], className),
+		className: classNames(styles["filter-search__wrapper"], className),
 		children: [
 			/* @__PURE__ */ jsxs("label", {
 				className: styles["filter-search__input-wrapper"],
 				ref: inputWrapperRef,
-				children: [/* @__PURE__ */ jsx("span", {
-					className: styles["filter-search__input__label"],
-					children: inputProps["aria-label"] ?? mergedResources.searchPlaceholder
-				}), /* @__PURE__ */ jsx("input", {
-					...inputProps,
-					ref: mergeRefs([inputRef, ref]),
-					value,
-					onChange,
-					className: cn(styles["filter-search__input"], { [styles["filter-search__input--hovered"]]: isWrapperHovered }),
-					placeholder: mergedResources.searchPlaceholder
-				})]
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: styles["filter-search__input__label"],
+						children: inputProps["aria-label"] ?? mergedResources.searchPlaceholder
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: styles["filter-search__input__icon"],
+						children: !withSearchButton && /* @__PURE__ */ jsx(Icon_default, {
+							svgIcon: Search,
+							size: isMobile ? IconSize.XXSmall : IconSize.XSmall
+						})
+					}),
+					/* @__PURE__ */ jsx("input", {
+						...inputProps,
+						ref: mergeRefs([inputRef, ref]),
+						value,
+						onChange,
+						className: classNames(styles["filter-search__input"], {
+							[styles["filter-search__input--hovered"]]: isWrapperHovered,
+							[styles["filter-search__input--with-search-button"]]: withSearchButton
+						}),
+						placeholder: mergedResources.searchPlaceholder
+					})
+				]
 			}),
 			inputHasValue && /* @__PURE__ */ jsx("button", {
 				type: "button",
@@ -56,22 +69,22 @@ var FilterSearch = (props) => {
 					inputRef.current?.focus();
 				},
 				ref: clearButtonRef,
-				className: cn(styles["filter-search__clear-button"], clearButtonProps?.className),
+				className: classNames(styles["filter-search__clear-button"], clearButtonProps?.className),
 				children: /* @__PURE__ */ jsx(Icon_default, {
 					svgIcon: X,
 					size: IconSize.XXSmall,
 					isHovered: !isMobile && isClearButtonHovered
 				})
 			}),
-			/* @__PURE__ */ jsx("button", {
+			withSearchButton && /* @__PURE__ */ jsx("button", {
 				type: "button",
 				"aria-label": mergedResources.searchButtonAriaLabel,
 				disabled: inputProps.disabled,
 				...buttonProps,
 				ref: buttonRef,
-				className: cn(styles["filter-search__search-button"], buttonProps?.className),
+				className: classNames(styles["filter-search__search-button"], buttonProps?.className),
 				children: /* @__PURE__ */ jsx("div", {
-					className: cn(styles["filter-search__search-button--inner"]),
+					className: classNames(styles["filter-search__search-button--inner"]),
 					children: /* @__PURE__ */ jsx(Icon_default, {
 						svgIcon: Search,
 						size: isMobile ? IconSize.XXSmall : IconSize.XSmall,