@helsenorge/designsystem-react 15.1.0 → 15.2.0

package/lib/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [15.2.0](https://github.com/helsenorge/designsystem/compare/v15.1.0...v15.2.0) (2026-06-25)
+
+### Features
+
+*  nytt komponent visualcontentgroupwithimage ([deafe38](https://github.com/helsenorge/designsystem/commit/deafe3823a48dca3e2256cfd8d82bb701fdc5060)), closes [#376758](https://github.com/helsenorge/designsystem/issues/376758)
+* **expander:**  ny prop emphasised ([7ae7d9e](https://github.com/helsenorge/designsystem/commit/7ae7d9e4bea2253f555b6b6fb6c5a597e9e0c3eb)), closes [#380269](https://github.com/helsenorge/designsystem/issues/380269)
+* **filter:**  forbedre skjermleseroppførsel for aktive filter ([33de604](https://github.com/helsenorge/designsystem/commit/33de6047677cdc43018694e17e339e5202b0e53b)), closes [#375582](https://github.com/helsenorge/designsystem/issues/375582)
+* **infoteaser:**  title er optional ([b178185](https://github.com/helsenorge/designsystem/commit/b178185f6ad42ecb8bdadc532fe8fdff431c6486)), closes [#380754](https://github.com/helsenorge/designsystem/issues/380754)
+
+### Bug Fixes
+
+* **datepicker:**  soft error forsvinner ikke ved popup valg ([5380c60](https://github.com/helsenorge/designsystem/commit/5380c60e6f6f75dcf798e14c128ddb458d51c8f4)), closes [#380884](https://github.com/helsenorge/designsystem/issues/380884)
 
 ## [15.1.0](https://github.com/helsenorge/designsystem/compare/v15.0.0...v15.1.0) (2026-06-16)
 

package/lib/Expander.js

@@ -20,7 +20,7 @@ var ExpanderSize = /* @__PURE__ */ function(ExpanderSize) {
 //#endregion
 //#region src/components/Expander/Expander.tsx
 var Expander = (props) => {
-	const { buttonId, title, children, size = ExpanderSize.small, color, contentClassNames, svgIcon: icon, expanded = false, noNestedLine = false, sticky = false, testId, onExpand, renderChildrenWhenClosed = false, zIndex } = props;
+	const { buttonId, title, children, size = ExpanderSize.small, color, contentClassNames, svgIcon: icon, expanded = false, noNestedLine = false, emphasized = false, sticky = false, testId, onExpand, renderChildrenWhenClosed = false, zIndex } = props;
 	const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);
 	const expanderRef = useRef(null);
 	const triggerRef = useRef(null);
@@ -74,7 +74,7 @@ var Expander = (props) => {
 			width: isSticky && triggerSize?.width ? `${triggerSize?.width}px` : void 0,
 			height: isSticky && triggerSize?.height ? `${triggerSize?.height}px` : void 0
 		},
-		className: classNames({ [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 = classNames(styles["expander__content"], styles[`expander__content--${size}`], size === ExpanderSize.large && styles[`expander__content--${color || "neutral"}`], size === ExpanderSize.large && icon && styles["expander__content--icon"], isExpanded && styles["expander__content--expanded"], size === ExpanderSize.small && !noNestedLine && styles["expander__content--nested-line--inner"], { [styles["expander__content--sticky"]]: isSticky }, contentClassNames);
+		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: classNames(size === ExpanderSize.small && !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  /** Stick expander trigger to top of screen while scrolling down */\n  sticky?: boolean;\n  /** Called when expander is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n  /** Overrides the default z-index of the expander header */\n  zIndex?: number;\n}\n\nconst Expander: React.FC<ExpanderProps> = props => {\n  const {\n    buttonId,\n    title,\n    children,\n    size = ExpanderSize.small,\n    color,\n    contentClassNames,\n    svgIcon: icon,\n    expanded = false,\n    noNestedLine = false,\n    sticky = false,\n    testId,\n    onExpand,\n    renderChildrenWhenClosed = false,\n    zIndex,\n  } = props;\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const expanderRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = usePseudoClasses(triggerRef);\n  const contentSize = useSize(expanderRef);\n  const triggerSize = useSize(triggerRef);\n\n  const isSticky = sticky && isExpanded;\n\n  const renderChevron = (align: 'left' | 'right'): React.ReactNode => (\n    <span className={classNames(styles['expander__icon'], styles[`expander__icon--${align}`])}>\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} isHovered={isHovered} />\n    </span>\n  );\n\n  const triggerClassName = classNames(\n    styles['expander__trigger'],\n    size === ExpanderSize.large && styles[`expander__trigger--${size}`],\n    size === ExpanderSize.large && styles[`expander__trigger--${color || 'neutral'}`],\n    size === ExpanderSize.large && icon && styles['expander__trigger--icon'],\n    isExpanded && styles['expander__trigger--expanded'],\n    isSticky && styles['expander__trigger--sticky']\n  );\n\n  const renderTrigger = (): React.ReactNode => (\n    <button\n      id={buttonId}\n      type=\"button\"\n      className={triggerClassName}\n      style={{\n        zIndex: isHovered || isSticky ? zIndex : undefined,\n        width: isSticky && contentSize?.width ? `${contentSize.width}px` : undefined,\n      }}\n      aria-expanded={isExpanded}\n      ref={triggerRef}\n      onClick={(): void => setIsExpanded(!isExpanded)}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Expander}\n    >\n      {size === ExpanderSize.small && renderChevron('left')}\n      {icon && (\n        <span className={classNames(styles['expander__icon'], styles['expander__icon--left'])}>\n          {typeof icon === 'string' ? (\n            <LazyIcon iconName={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          ) : (\n            <Icon svgIcon={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          )}\n        </span>\n      )}\n      {title}\n      {size === ExpanderSize.large && renderChevron('right')}\n    </button>\n  );\n\n  const buttonClassName = classNames(styles['expander__button'], isExpanded && styles['expander__button--expanded']);\n\n  const renderButton = (): React.ReactNode => (\n    <div\n      style={{\n        width: isSticky && triggerSize?.width ? `${triggerSize?.width}px` : undefined,\n        height: isSticky && triggerSize?.height ? `${triggerSize?.height}px` : undefined,\n      }}\n      className={classNames({\n        [styles['expander__button-container--sticky']]: isSticky,\n      })}\n    >\n      <Button\n        id={buttonId}\n        variant=\"borderless\"\n        textClassName={styles['expander__button__text']}\n        className={buttonClassName}\n        aria-expanded={isExpanded}\n        ref={triggerRef}\n        onClick={(): void => setIsExpanded(!isExpanded)}\n        testId={testId}\n        data-analyticsid={AnalyticsId.Expander}\n      >\n        <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n        {title}\n      </Button>\n    </div>\n  );\n\n  const renderContent = (): React.ReactNode => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const contentClassName = classNames(\n      styles['expander__content'],\n      styles[`expander__content--${size}`],\n      size === ExpanderSize.large && styles[`expander__content--${color || 'neutral'}`],\n      size === ExpanderSize.large && icon && styles['expander__content--icon'],\n      isExpanded && styles['expander__content--expanded'],\n      size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line--inner'],\n      { [styles['expander__content--sticky']]: isSticky },\n      contentClassNames\n    );\n    const leftBorderClassName = classNames(size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line--outer']);\n\n    return (\n      <div className={leftBorderClassName}>\n        <div className={contentClassName}>{children}</div>\n      </div>\n    );\n  };\n\n  return (\n    <div className={styles['expander']} ref={expanderRef}>\n      {size === ExpanderSize.large ? renderTrigger() : renderButton()}\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default Expander;\n","import Expander from './Expander';\nexport { 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/FilterButtonAndChipsWrapper.js

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

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 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}\n\nconst FilterButtonAndChipsWrapper: React.FC<FilterButtonAndChipsWrapperProps> = ({ filterButtonComponent, filterChips, testId }) => {\n  return (\n    <div className={classNames(styles['filter-chip-bar'])} data-testid={testId}>\n      {filterButtonComponent}\n      {filterChips}\n    </div>\n  );\n};\n\nexport default FilterButtonAndChipsWrapper;\n","import FilterButtonAndChipsWrapper from './FilterButtonAndChipsWrapper';\nexport * from './FilterButtonAndChipsWrapper';\nexport default FilterButtonAndChipsWrapper;\n"],"mappings":";;;;AAeA,IAAM,+BAA2E,EAAE,uBAAuB,aAAa,aAAa;CAClI,OACE,qBAAC,OAAD;EAAK,WAAW,WAAW,OAAO,kBAAkB;EAAG,eAAa;YAApE,CACG,uBACA,WACE;;AAET;;;ACpBA,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

@@ -24,9 +24,10 @@ var Link = (props) => {
 			...restProps,
 			children: [/* @__PURE__ */ jsx("div", {
 				className: styles["link-list__button__content"],
-				children: title ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { children: title }), chips && chips.length > 0 && /* @__PURE__ */ jsx("div", {
+				children: title ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { children: title }), chips && chips.length > 0 && /* @__PURE__ */ jsx("ul", {
 					className: styles["link-list__chip-list"],
-					children: chips.map((chip) => /* @__PURE__ */ jsx("span", {
+					"aria-label": props.chipsGroupAriaLabel,
+					children: chips.map((chip) => /* @__PURE__ */ jsx("li", {
 						className: styles["link-list__chip"],
 						children: chip
 					}, chip))

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    /** 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                <div className={styles['link-list__chip-list']}>\n                  {chips.map(chip => (\n                    <span className={styles['link-list__chip']} key={chip}>\n                      {chip}\n                    </span>\n                  ))}\n                </div>\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":";;;;;;;;;AAkDA,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,OAAD;KAAK,WAAW,OAAO;eACpB,MAAM,KAAI,SACT,oBAAC,QAAD;MAAM,WAAW,OAAO;gBACrB;KACG,GAF2C,IAE3C,CACP;IACE,CAAA,CAEP,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"}
+{"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/FilterOverviewLinkList.js

@@ -1,9 +1,17 @@
+import { LanguageLocales } from "./constants.js";
+import { useLanguage } from "./hooks/useLanguage.js";
 import { r as useDrawerNavigation } from "./DrawerNavigation.js";
+import { t as getResources } from "./resourceHelper.js";
 import { t as FilterLinkList } from "./FilterLinkList.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Filter/FilterOverviewLinkList/FilterOverviewLinkList.tsx
-function FilterOverviewLinkList({ filter, getLabel, links }) {
+function FilterOverviewLinkList({ filter, getLabel, links, resources }) {
 	const { goToView } = useDrawerNavigation();
+	const { language } = useLanguage(LanguageLocales.NORWEGIAN);
+	const mergedResources = {
+		...getResources(language),
+		...resources
+	};
 	return /* @__PURE__ */ jsx(FilterLinkList, { children: links.map(({ filterKey, title, viewId }) => {
 		const raw = filter.filters[filterKey];
 		let chips;
@@ -13,6 +21,7 @@ function FilterOverviewLinkList({ filter, getLabel, links }) {
 		return /* @__PURE__ */ jsx(FilterLinkList.Link, {
 			title,
 			chips,
+			chipsGroupAriaLabel: mergedResources.activeFiltersListLabel,
 			onClick: () => goToView(viewId ?? filterKey)
 		}, filterKey);
 	}) });

package/lib/FilterOverviewLinkList.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterOverviewLinkList.js","names":[],"sources":["../src/components/Filter/FilterOverviewLinkList/FilterOverviewLinkList.tsx","../src/components/Filter/FilterOverviewLinkList/index.ts"],"sourcesContent":["import type { FilterValues, UseFilterReturn } from '../useFilter';\n\nimport { useDrawerNavigation } from '../DrawerNavigation';\nimport FilterLinkList from '../FilterLinkList/FilterLinkList';\n\nexport interface FilterOverviewLink {\n  /** The filter key to read values from */\n  filterKey: string;\n  /** Display title for the link */\n  title: string;\n  /** View ID to navigate to when clicked. Defaults to filterKey */\n  viewId?: string;\n}\n\nexport interface FilterOverviewLinkListProps<T extends FilterValues> {\n  /** The filter instance from useFilter */\n  filter: UseFilterReturn<T>;\n  /** Look up the display label for a filter key + value */\n  getLabel: (key: keyof T, value: unknown) => string;\n  /** Configuration for which filter keys to show as links */\n  links: FilterOverviewLink[];\n}\n\nfunction FilterOverviewLinkList<T extends FilterValues>({ filter, getLabel, links }: FilterOverviewLinkListProps<T>): React.ReactNode {\n  const { goToView } = useDrawerNavigation();\n\n  return (\n    <FilterLinkList>\n      {links.map(({ filterKey, title, viewId }) => {\n        const raw = filter.filters[filterKey as keyof T];\n\n        let chips: string[];\n        if (Array.isArray(raw)) {\n          chips = raw.map(v => getLabel(filterKey as keyof T, v));\n        } else if (raw !== undefined && raw !== null) {\n          chips = [getLabel(filterKey as keyof T, raw)];\n        } else {\n          chips = [];\n        }\n\n        return <FilterLinkList.Link key={filterKey} title={title} chips={chips} onClick={() => goToView(viewId ?? filterKey)} />;\n      })}\n    </FilterLinkList>\n  );\n}\n\nexport default FilterOverviewLinkList;\n","import FilterOverviewLinkList from './FilterOverviewLinkList';\nexport * from './FilterOverviewLinkList';\nexport default FilterOverviewLinkList;\n"],"mappings":";;;;AAuBA,SAAS,uBAA+C,EAAE,QAAQ,UAAU,SAA0D;CACpI,MAAM,EAAE,aAAa,oBAAoB;CAEzC,OACE,oBAAC,gBAAD,EAAA,UACG,MAAM,KAAK,EAAE,WAAW,OAAO,aAAa;EAC3C,MAAM,MAAM,OAAO,QAAQ;EAE3B,IAAI;EACJ,IAAI,MAAM,QAAQ,GAAG,GACnB,QAAQ,IAAI,KAAI,MAAK,SAAS,WAAsB,CAAC,CAAC;OACjD,IAAI,QAAQ,KAAA,KAAa,QAAQ,MACtC,QAAQ,CAAC,SAAS,WAAsB,GAAG,CAAC;OAE5C,QAAQ,CAAC;EAGX,OAAO,oBAAC,eAAe,MAAhB;GAA4C;GAAc;GAAO,eAAe,SAAS,UAAU,SAAS;EAAI,GAAtF,SAAsF;CACzH,CAAC,EACa,CAAA;AAEpB;;;AC1CA,IAAA,iCAAe"}
+{"version":3,"file":"FilterOverviewLinkList.js","names":[],"sources":["../src/components/Filter/FilterOverviewLinkList/FilterOverviewLinkList.tsx","../src/components/Filter/FilterOverviewLinkList/index.ts"],"sourcesContent":["import type { HNDesignsystemFilter } from '../../../resources/Resources';\nimport type { FilterValues, UseFilterReturn } from '../useFilter';\n\nimport { LanguageLocales } from '../../../constants';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport { useDrawerNavigation } from '../DrawerNavigation';\nimport FilterLinkList from '../FilterLinkList/FilterLinkList';\nimport { getResources } from '../resourceHelper';\n\nexport interface FilterOverviewLink {\n  /** The filter key to read values from */\n  filterKey: string;\n  /** Display title for the link */\n  title: string;\n  /** View ID to navigate to when clicked. Defaults to filterKey */\n  viewId?: string;\n}\n\nexport interface FilterOverviewLinkListProps<T extends FilterValues> {\n  /** The filter instance from useFilter */\n  filter: UseFilterReturn<T>;\n  /** Look up the display label for a filter key + value */\n  getLabel: (key: keyof T, value: unknown) => string;\n  /** Configuration for which filter keys to show as links */\n  links: FilterOverviewLink[];\n  /** Resources for the component */\n  resources?: Partial<HNDesignsystemFilter>;\n}\n\nfunction FilterOverviewLinkList<T extends FilterValues>({\n  filter,\n  getLabel,\n  links,\n  resources,\n}: FilterOverviewLinkListProps<T>): React.ReactNode {\n  const { goToView } = useDrawerNavigation();\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const mergedResources = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  return (\n    <FilterLinkList>\n      {links.map(({ filterKey, title, viewId }) => {\n        const raw = filter.filters[filterKey as keyof T];\n\n        let chips: string[];\n        if (Array.isArray(raw)) {\n          chips = raw.map(v => getLabel(filterKey as keyof T, v));\n        } else if (raw !== undefined && raw !== null) {\n          chips = [getLabel(filterKey as keyof T, raw)];\n        } else {\n          chips = [];\n        }\n\n        return (\n          <FilterLinkList.Link\n            key={filterKey}\n            title={title}\n            chips={chips}\n            chipsGroupAriaLabel={mergedResources.activeFiltersListLabel}\n            onClick={() => goToView(viewId ?? filterKey)}\n          />\n        );\n      })}\n    </FilterLinkList>\n  );\n}\n\nexport default FilterOverviewLinkList;\n","import FilterOverviewLinkList from './FilterOverviewLinkList';\nexport * from './FilterOverviewLinkList';\nexport default FilterOverviewLinkList;\n"],"mappings":";;;;;;;AA6BA,SAAS,uBAA+C,EACtD,QACA,UACA,OACA,aACkD;CAClD,MAAM,EAAE,aAAa,oBAAoB;CACzC,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAE3E,MAAM,kBAAkB;EACtB,GAFuB,aAAa,QAEjC;EACH,GAAG;CACL;CAEA,OACE,oBAAC,gBAAD,EAAA,UACG,MAAM,KAAK,EAAE,WAAW,OAAO,aAAa;EAC3C,MAAM,MAAM,OAAO,QAAQ;EAE3B,IAAI;EACJ,IAAI,MAAM,QAAQ,GAAG,GACnB,QAAQ,IAAI,KAAI,MAAK,SAAS,WAAsB,CAAC,CAAC;OACjD,IAAI,QAAQ,KAAA,KAAa,QAAQ,MACtC,QAAQ,CAAC,SAAS,WAAsB,GAAG,CAAC;OAE5C,QAAQ,CAAC;EAGX,OACE,oBAAC,eAAe,MAAhB;GAES;GACA;GACP,qBAAqB,gBAAgB;GACrC,eAAe,SAAS,UAAU,SAAS;EAC5C,GALM,SAKN;CAEL,CAAC,EACa,CAAA;AAEpB;;;ACnEA,IAAA,iCAAe"}

package/lib/InfoTeaser.js

@@ -53,7 +53,7 @@ var InfoTeaser = (props) => {
 					size: IconSize.Small,
 					className: styles.infoteaser__icon
 				})),
-				/* @__PURE__ */ jsx(Title_default, {
+				title && typeof title !== "undefined" && /* @__PURE__ */ jsx(Title_default, {
 					testId: "titleId",
 					htmlMarkup: titleHtmlMarkup,
 					appearance: "title4",

package/lib/InfoTeaser.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoTeaser.js","names":[],"sources":["../src/resources/HN.Designsystem.InfoTeaser.en-GB.json","../src/resources/HN.Designsystem.InfoTeaser.nb-NO.json","../src/components/InfoTeaser/resourceHelper.ts","../src/components/InfoTeaser/InfoTeaser.tsx","../src/components/InfoTeaser/index.ts"],"sourcesContent":["{\n  \"expandButtonOpen\": \"Show less\",\n  \"expandButtonClose\": \"Show more\"\n}\n","{\n  \"expandButtonOpen\": \"Vis mindre\",\n  \"expandButtonClose\": \"Vis mer\"\n}\n","import type { HNDesignsystemInfoTeaser } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.InfoTeaser.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.InfoTeaser.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemInfoTeaser => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemInfoTeaser } from '../../resources/Resources';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\nimport type { TitleTags } from '../Title';\n\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport Icon, { IconSize } from '../Icon';\nimport LazyIcon from '../LazyIcon';\nimport Title from '../Title';\nimport { getResources } from './resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport type InfoTeaserTags = 'div' | 'section' | 'aside' | 'article';\n\nexport interface InfoTeaserProps {\n  /** For overriding styling on the button */\n  buttonClassName?: string;\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Override the default max height for collapsed teaser. Default is 12.25rem */\n  collapsedMaxHeight?: string;\n  /** For overriding styling on infoteaser box */\n  className?: string;\n  /** Changes the underlying element of the wrapper */\n  htmlMarkup?: InfoTeaserTags;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemInfoTeaser>;\n  /** Adds an icon */\n  svgIcon?: SvgIcon | IconName;\n  /** Sets the data-testid attribute */\n  testId?: string;\n  /** Title on top of the component */\n  title: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n}\n\nconst InfoTeaser: React.FC<InfoTeaserProps> = props => {\n  const {\n    buttonClassName,\n    children,\n    className,\n    htmlMarkup = 'div',\n    resources,\n    svgIcon,\n    testId,\n    title,\n    titleHtmlMarkup = 'h2',\n    collapsedMaxHeight,\n  } = props;\n  const [expanded, setExpanded] = useState(false);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const infoteaserTextId = useId();\n\n  const mergedResources: HNDesignsystemInfoTeaser = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const WrapperTag = htmlMarkup;\n\n  return (\n    <WrapperTag className={styles.wrapper} data-testid={testId} data-analyticsid={AnalyticsId.InfoTeaser}>\n      <div\n        className={classNames(styles.infoteaser, className, {\n          [styles['infoteaser--collapsed']]: !expanded,\n        })}\n        style={{ maxHeight: !expanded ? (collapsedMaxHeight ? collapsedMaxHeight : '12.25rem') : undefined }}\n      >\n        {svgIcon &&\n          (typeof svgIcon === 'string' ? (\n            <LazyIcon iconName={svgIcon} size={IconSize.Small} className={styles.infoteaser__icon} />\n          ) : (\n            <Icon svgIcon={svgIcon} size={IconSize.Small} className={styles.infoteaser__icon} />\n          ))}\n        <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance=\"title4\" className={styles.infoteaser__title}>\n          {title}\n        </Title>\n        <div className={styles.infoteaser__text} aria-hidden={expanded ? false : true} id={infoteaserTextId}>\n          {children}\n        </div>\n      </div>\n      <button\n        type=\"button\"\n        className={classNames(styles.infoteaser__button, buttonClassName)}\n        onClick={() => {\n          setExpanded(!expanded);\n        }}\n        aria-expanded={expanded}\n        aria-controls={infoteaserTextId}\n      >\n        {expanded ? mergedResources.expandButtonOpen : mergedResources.expandButtonClose}\n      </button>\n    </WrapperTag>\n  );\n};\n\nexport default InfoTeaser;\n","import InfoTeaser from './InfoTeaser';\nexport * from './InfoTeaser';\nexport default InfoTeaser;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AEMA,IAAa,gBAAgB,aAAwD;CACnF,QAAQ,UAAR;EACE,KAAK,gBAAgB,SACnB,OAAO;EACT,KAAK,gBAAgB;EACrB,SACE,OAAO;CACX;AACF;;;AC6BA,IAAM,cAAwC,UAAS;CACrD,MAAM,EACJ,iBACA,UACA,WACA,aAAa,OACb,WACA,SACA,QACA,OACA,kBAAkB,MAClB,uBACE;CACJ,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAC3E,MAAM,mBAAmB,aAAa,QAAQ;CAC9C,MAAM,mBAAmB,MAAM;CAE/B,MAAM,kBAA4C;EAChD,GAAG;EACH,GAAG;CACL;CAIA,OACE,qBAAC,YAAD;EAAY,WAAW,OAAO;EAAS,eAAa;EAAQ,oBAAkB,YAAY;YAA1F,CACE,qBAAC,OAAD;GACE,WAAW,WAAW,OAAO,YAAY,WAAW,GACjD,OAAO,2BAA2B,CAAC,SACtC,CAAC;GACD,OAAO,EAAE,WAAW,CAAC,WAAY,qBAAqB,qBAAqB,aAAc,KAAA,EAAU;aAJrG;IAMG,YACE,OAAO,YAAY,WAClB,oBAAC,kBAAD;KAAU,UAAU;KAAS,MAAM,SAAS;KAAO,WAAW,OAAO;IAAmB,CAAA,IAExF,oBAAC,cAAD;KAAe;KAAS,MAAM,SAAS;KAAO,WAAW,OAAO;IAAmB,CAAA;IAEvF,oBAAC,eAAD;KAAO,QAAO;KAAU,YAAY;KAAiB,YAAW;KAAS,WAAW,OAAO;eACxF;IACI,CAAA;IACP,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAkB,eAAa,WAAW,QAAQ;KAAM,IAAI;KAChF;IACE,CAAA;GACF;MACL,oBAAC,UAAD;GACE,MAAK;GACL,WAAW,WAAW,OAAO,oBAAoB,eAAe;GAChE,eAAe;IACb,YAAY,CAAC,QAAQ;GACvB;GACA,iBAAe;GACf,iBAAe;aAEd,WAAW,gBAAgB,mBAAmB,gBAAgB;EACzD,CAAA,CACE;;AAEhB;;;ACpGA,IAAA,qBAAe"}
+{"version":3,"file":"InfoTeaser.js","names":[],"sources":["../src/resources/HN.Designsystem.InfoTeaser.en-GB.json","../src/resources/HN.Designsystem.InfoTeaser.nb-NO.json","../src/components/InfoTeaser/resourceHelper.ts","../src/components/InfoTeaser/InfoTeaser.tsx","../src/components/InfoTeaser/index.ts"],"sourcesContent":["{\n  \"expandButtonOpen\": \"Show less\",\n  \"expandButtonClose\": \"Show more\"\n}\n","{\n  \"expandButtonOpen\": \"Vis mindre\",\n  \"expandButtonClose\": \"Vis mer\"\n}\n","import type { HNDesignsystemInfoTeaser } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.InfoTeaser.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.InfoTeaser.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemInfoTeaser => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemInfoTeaser } from '../../resources/Resources';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\nimport type { TitleTags } from '../Title';\n\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport Icon, { IconSize } from '../Icon';\nimport LazyIcon from '../LazyIcon';\nimport Title from '../Title';\nimport { getResources } from './resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport type InfoTeaserTags = 'div' | 'section' | 'aside' | 'article';\n\nexport interface InfoTeaserProps {\n  /** For overriding styling on the button */\n  buttonClassName?: string;\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Override the default max height for collapsed teaser. Default is 12.25rem */\n  collapsedMaxHeight?: string;\n  /** For overriding styling on infoteaser box */\n  className?: string;\n  /** Changes the underlying element of the wrapper */\n  htmlMarkup?: InfoTeaserTags;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemInfoTeaser>;\n  /** Adds an icon */\n  svgIcon?: SvgIcon | IconName;\n  /** Sets the data-testid attribute */\n  testId?: string;\n  /** Title on top of the component */\n  title?: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n}\n\nconst InfoTeaser: React.FC<InfoTeaserProps> = props => {\n  const {\n    buttonClassName,\n    children,\n    className,\n    htmlMarkup = 'div',\n    resources,\n    svgIcon,\n    testId,\n    title,\n    titleHtmlMarkup = 'h2',\n    collapsedMaxHeight,\n  } = props;\n  const [expanded, setExpanded] = useState(false);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const infoteaserTextId = useId();\n\n  const mergedResources: HNDesignsystemInfoTeaser = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const WrapperTag = htmlMarkup;\n\n  return (\n    <WrapperTag className={styles.wrapper} data-testid={testId} data-analyticsid={AnalyticsId.InfoTeaser}>\n      <div\n        className={classNames(styles.infoteaser, className, {\n          [styles['infoteaser--collapsed']]: !expanded,\n        })}\n        style={{ maxHeight: !expanded ? (collapsedMaxHeight ? collapsedMaxHeight : '12.25rem') : undefined }}\n      >\n        {svgIcon &&\n          (typeof svgIcon === 'string' ? (\n            <LazyIcon iconName={svgIcon} size={IconSize.Small} className={styles.infoteaser__icon} />\n          ) : (\n            <Icon svgIcon={svgIcon} size={IconSize.Small} className={styles.infoteaser__icon} />\n          ))}\n        {title && typeof title !== 'undefined' && (\n          <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance=\"title4\" className={styles.infoteaser__title}>\n            {title}\n          </Title>\n        )}\n        <div className={styles.infoteaser__text} aria-hidden={expanded ? false : true} id={infoteaserTextId}>\n          {children}\n        </div>\n      </div>\n      <button\n        type=\"button\"\n        className={classNames(styles.infoteaser__button, buttonClassName)}\n        onClick={() => {\n          setExpanded(!expanded);\n        }}\n        aria-expanded={expanded}\n        aria-controls={infoteaserTextId}\n      >\n        {expanded ? mergedResources.expandButtonOpen : mergedResources.expandButtonClose}\n      </button>\n    </WrapperTag>\n  );\n};\n\nexport default InfoTeaser;\n","import InfoTeaser from './InfoTeaser';\nexport * from './InfoTeaser';\nexport default InfoTeaser;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AEMA,IAAa,gBAAgB,aAAwD;CACnF,QAAQ,UAAR;EACE,KAAK,gBAAgB,SACnB,OAAO;EACT,KAAK,gBAAgB;EACrB,SACE,OAAO;CACX;AACF;;;AC6BA,IAAM,cAAwC,UAAS;CACrD,MAAM,EACJ,iBACA,UACA,WACA,aAAa,OACb,WACA,SACA,QACA,OACA,kBAAkB,MAClB,uBACE;CACJ,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAC3E,MAAM,mBAAmB,aAAa,QAAQ;CAC9C,MAAM,mBAAmB,MAAM;CAE/B,MAAM,kBAA4C;EAChD,GAAG;EACH,GAAG;CACL;CAIA,OACE,qBAAC,YAAD;EAAY,WAAW,OAAO;EAAS,eAAa;EAAQ,oBAAkB,YAAY;YAA1F,CACE,qBAAC,OAAD;GACE,WAAW,WAAW,OAAO,YAAY,WAAW,GACjD,OAAO,2BAA2B,CAAC,SACtC,CAAC;GACD,OAAO,EAAE,WAAW,CAAC,WAAY,qBAAqB,qBAAqB,aAAc,KAAA,EAAU;aAJrG;IAMG,YACE,OAAO,YAAY,WAClB,oBAAC,kBAAD;KAAU,UAAU;KAAS,MAAM,SAAS;KAAO,WAAW,OAAO;IAAmB,CAAA,IAExF,oBAAC,cAAD;KAAe;KAAS,MAAM,SAAS;KAAO,WAAW,OAAO;IAAmB,CAAA;IAEtF,SAAS,OAAO,UAAU,eACzB,oBAAC,eAAD;KAAO,QAAO;KAAU,YAAY;KAAiB,YAAW;KAAS,WAAW,OAAO;eACxF;IACI,CAAA;IAET,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAkB,eAAa,WAAW,QAAQ;KAAM,IAAI;KAChF;IACE,CAAA;GACF;MACL,oBAAC,UAAD;GACE,MAAK;GACL,WAAW,WAAW,OAAO,oBAAoB,eAAe;GAChE,eAAe;IACb,YAAY,CAAC,QAAQ;GACvB;GACA,iBAAe;GACf,iBAAe;aAEd,WAAW,gBAAgB,mBAAmB,gBAAgB;EACzD,CAAA,CACE;;AAEhB;;;ACtGA,IAAA,qBAAe"}

package/lib/components/Expander/Expander.d.ts

@@ -21,6 +21,8 @@ export interface ExpanderProps {
     expanded?: boolean;
     /** Removes border to the left of the content. Requires size=ExpanderSize.small. */
     noNestedLine?: boolean;
+    /** Emphasizes the content section. Intended for size=ExpanderSize.small. */
+    emphasized?: boolean;
     /** Stick expander trigger to top of screen while scrolling down */
     sticky?: boolean;
     /** Called when expander is open/closed. */

package/lib/components/Expander/styles.module.scss

@@ -1,11 +1,11 @@
 /* stylelint-disable no-descending-specificity */
 @use 'sass:map';
-@use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
 @use '../Button/styles.module' as button;
 @use '../../scss/breakpoints' as breakpoints;
 @import '../../scss/supernova/styles/colors.css';
+@import '../../scss/supernova/styles/spacers.css';
 
 .expander {
   position: initial;
@@ -24,18 +24,18 @@
     align-items: center;
 
     &--left {
-      margin-right: spacers.getSpacer(2xs);
+      margin-right: var(--core-space-2xs);
     }
 
     &--right {
       margin-left: auto;
-      padding-left: spacers.getSpacer(2xs);
+      padding-left: var(--core-space-2xs);
     }
   }
 
   &__button {
     position: relative;
-    padding-right: spacers.getSpacer(s);
+    padding-right: var(--core-space-s);
     text-align: left;
 
     &--expanded {
@@ -67,19 +67,19 @@
 
     &--large {
       width: 100%;
-      padding: spacers.getSpacer(xs) spacers.getSpacer(2xs) spacers.getSpacer(xs) spacers.getSpacer(s);
+      padding: var(--core-space-xs) var(--core-space-2xs) var(--core-space-xs) var(--core-space-s);
       cursor: pointer;
 
       @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-        padding: spacers.getSpacer(xs) spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(l);
+        padding: var(--core-space-xs) var(--core-space-s) var(--core-space-xs) var(--core-space-l);
       }
     }
 
     &--icon {
-      padding-left: spacers.getSpacer(2xs);
+      padding-left: var(--core-space-2xs);
 
       @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-        padding-left: spacers.getSpacer(s);
+        padding-left: var(--core-space-s);
       }
     }
 
@@ -98,6 +98,7 @@
             0 0 0 1.5px palette.$neutral600,
             inset 0 0 0 1.5px palette.$neutral600;
         }
+
         &#{$trigger}--expanded {
           background-color: map.get(palette.$palette-map, #{$color}100);
 
@@ -121,6 +122,7 @@
           0 0 0 1.5px palette.$neutral600,
           inset 0 0 0 1.5px palette.$neutral600;
       }
+
       &#{$trigger}--expanded {
         box-shadow: inset 0 0 0 6px palette.$neutral100;
 
@@ -135,6 +137,8 @@
   }
 
   &__button-container {
+    display: flex;
+
     &--sticky {
       background-color: palette.$white;
     }
@@ -163,12 +167,19 @@
     }
 
     &--small {
-      margin-top: spacers.getSpacer(s);
+      margin-top: var(--core-space-s);
     }
+
     &--small#{&}--sticky {
       margin-top: 1.25rem;
     }
 
+    &--emphasized {
+      padding: var(--core-space-m) var(--core-space-s);
+      margin-top: var(--core-space-3xs);
+      background: var(--color-base-background-neutral, #f5f3f3);
+    }
+
     &--nested-line {
       &--outer {
         padding-left: 0;
@@ -179,7 +190,7 @@
       }
 
       &--inner {
-        padding-left: spacers.getSpacer(s);
+        padding-left: var(--core-space-s);
         border-left: solid 3px palette.$neutral200;
 
         @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
@@ -191,11 +202,12 @@
     }
 
     &--large {
-      padding: spacers.getSpacer(s) spacers.getSpacer(m) spacers.getSpacer(l) spacers.getSpacer(s);
+      padding: var(--core-space-s) var(--core-space-m) var(--core-space-l) var(--core-space-s);
 
       @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-        padding: spacers.getSpacer(m) spacers.getSpacer(l) spacers.getSpacer(xl);
+        padding: var(--core-space-m) var(--core-space-l) var(--core-space-xl);
       }
+
       &#{$content}--icon {
         @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
           padding-left: 70px;

package/lib/components/Expander/styles.module.scss.d.ts

@@ -32,11 +32,13 @@ export type Styles = {
   expander__button: string;
   expander__button__text: string;
   'expander__button--expanded': string;
+  'expander__button-container': string;
   'expander__button-container--sticky': string;
   expander__content: string;
   'expander__content--banana': string;
   'expander__content--blueberry': string;
   'expander__content--cherry': string;
+  'expander__content--emphasized': string;
   'expander__content--expanded': string;
   'expander__content--icon': string;
   'expander__content--kiwi': string;

package/lib/components/Filter/FilterButtonAndChipsWrapper/FilterButtonAndChipsWrapper.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { HNDesignsystemFilter } from '../../../resources/Resources';
 export interface FilterButtonAndChipsWrapperProps {
     /** FilterButton content area */
     filterButtonComponent: React.ReactNode;
@@ -6,6 +7,8 @@ export interface FilterButtonAndChipsWrapperProps {
     filterChips: React.ReactNode[];
     /** test id that is placed on the wrapper */
     testId?: string;
+    /** Resources for the component */
+    resources?: Partial<HNDesignsystemFilter>;
 }
 declare const FilterButtonAndChipsWrapper: React.FC<FilterButtonAndChipsWrapperProps>;
 export default FilterButtonAndChipsWrapper;

package/lib/components/Filter/FilterButtonAndChipsWrapper/styles.module.scss

@@ -1,8 +1,24 @@
+@use '../../../scss/screen-reader' as *;
 @import '../../../scss/supernova/styles/spacers.css';
 
 .filter-chip-bar {
   display: flex;
-  flex-flow: row wrap;
   column-gap: var(--core-space-xs);
-  align-items: center;
+
+  &__list {
+    display: inline-flex;
+    flex-flow: row wrap;
+    align-items: flex-start;
+    column-gap: var(--core-space-xs);
+
+    /* Override list styling */
+    list-style: none;
+    margin-block: 0;
+    padding-inline-start: 0;
+
+    li {
+      list-style: none;
+      display: inline;
+    }
+  }
 }

package/lib/components/Filter/FilterButtonAndChipsWrapper/styles.module.scss.d.ts

@@ -1,5 +1,6 @@
 export type Styles = {
   'filter-chip-bar': string;
+  'filter-chip-bar__list': string;
 };
 
 export type ClassNames = keyof Styles;

package/lib/components/Filter/FilterLinkList/FilterLinkList.d.ts

@@ -21,6 +21,8 @@ export type LinkProps = Modify<React.HTMLAttributes<HTMLAnchorElement | HTMLButt
     title?: string;
     /** Texts rendered inside non-interactive chips on link element */
     chips?: string[];
+    /** Aria label for the list of chips */
+    chipsGroupAriaLabel?: string;
     /** Custom classname for link element */
     className?: string;
     /** Ref for button */

package/lib/components/Filter/FilterLinkList/FilterLinkList.module.scss

@@ -59,6 +59,16 @@
     display: flex;
     flex-flow: row wrap;
     column-gap: 0.5rem;
+
+    /* Override list styling */
+    list-style: none;
+    margin-block: 0;
+    padding-inline-start: 0;
+
+    li {
+      list-style: none;
+      display: inline;
+    }
   }
 
   &__chip {

package/lib/components/Filter/FilterOverviewLinkList/FilterOverviewLinkList.d.ts

@@ -1,3 +1,4 @@
+import { HNDesignsystemFilter } from '../../../resources/Resources';
 import { FilterValues, UseFilterReturn } from '../useFilter';
 export interface FilterOverviewLink {
     /** The filter key to read values from */
@@ -14,6 +15,8 @@ export interface FilterOverviewLinkListProps<T extends FilterValues> {
     getLabel: (key: keyof T, value: unknown) => string;
     /** Configuration for which filter keys to show as links */
     links: FilterOverviewLink[];
+    /** Resources for the component */
+    resources?: Partial<HNDesignsystemFilter>;
 }
-declare function FilterOverviewLinkList<T extends FilterValues>({ filter, getLabel, links }: FilterOverviewLinkListProps<T>): React.ReactNode;
+declare function FilterOverviewLinkList<T extends FilterValues>({ filter, getLabel, links, resources, }: FilterOverviewLinkListProps<T>): React.ReactNode;
 export default FilterOverviewLinkList;

package/lib/components/InfoTeaser/InfoTeaser.d.ts

@@ -21,7 +21,7 @@ export interface InfoTeaserProps {
     /** Sets the data-testid attribute */
     testId?: string;
     /** Title on top of the component */
-    title: string;
+    title?: string;
     /** Markup props for title */
     titleHtmlMarkup?: TitleTags;
 }

package/lib/components/InfoTeaser/styles.module.scss

@@ -9,22 +9,13 @@
 
 .infoteaser {
   display: grid;
-  grid-template:
-    'icon title' auto
-    '. title' auto
-    'text text' min-content / auto 1fr;
+  grid-template-columns: [icon] auto [content] 1fr;
   width: 100%;
   overflow: hidden;
   background-color: var(--color-base-background-blueberry);
   border: 1px solid var(--color-base-border-blueberry);
   padding: var(--core-space-m) var(--core-space-s) var(--core-space-l) var(--core-space-s);
-
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-    grid-template:
-      'icon title' auto
-      '. title' auto
-      '. text' min-content / auto 1fr;
-  }
+  row-gap: var(--core-space-2xs);
 
   &--collapsed {
     &::after {
@@ -41,20 +32,26 @@
   }
 
   &__title {
-    grid-area: title;
+    grid-column: content;
+    grid-row: 1;
     align-self: center;
   }
 
   &__icon {
-    grid-area: icon;
+    grid-column: icon;
+    grid-row: 1;
+    align-self: center;
     margin-right: var(--core-space-xs);
   }
 
   &__text {
-    grid-area: text;
+    grid-column: 1 / -1;
     overflow: hidden;
     height: inherit;
-    margin-top: var(--core-space-2xs);
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      grid-column: content;
+    }
   }
 
   &__button {
@@ -76,7 +73,7 @@
     font-size: 1rem;
     font-style: normal;
     font-weight: 600;
-    line-height: 120%; /* 1.2rem */
+    line-height: 120%; // 1.2rem
 
     &:hover {
       background-color: var(--color-action-graphics-onlight-hover);

package/lib/components/VisualContentgroupWithImage/VisualContentgroupWithImage.d.ts

@@ -0,0 +1,13 @@
+export type ImageRatios = 'square' | 'landscape';
+export interface VisualContentgroupWithImageProps {
+    /** Set the ratio of the image. */
+    imageRatio?: ImageRatios;
+    /** Content rendered inside the visualcontent area. */
+    visualContent: React.ReactNode;
+    /** Content rendered inside the component */
+    children: React.ReactNode;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+declare const VisualContentgroupWithImage: React.FC<VisualContentgroupWithImageProps>;
+export default VisualContentgroupWithImage;

package/lib/components/VisualContentgroupWithImage/index.d.ts

@@ -0,0 +1,3 @@
+import { default as VisualContentgroupWithImage } from './VisualContentgroupWithImage';
+export * from './VisualContentgroupWithImage';
+export default VisualContentgroupWithImage;

package/lib/components/VisualContentgroupWithImage/index.js

@@ -0,0 +1,22 @@
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import styles from "./styles.module.scss";
+//#region src/components/VisualContentgroupWithImage/VisualContentgroupWithImage.tsx
+var VisualContentgroupWithImage = (props) => {
+	const { imageRatio = "square", visualContent, children, testId } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": testId,
+		className: styles["visual-contentgroup-with-image"],
+		children: [/* @__PURE__ */ jsx("div", {
+			className: classNames(styles["visual-contentgroup-with-image__frame"], { [styles[`visual-contentgroup-with-image__frame--${imageRatio}`]]: imageRatio }),
+			children: visualContent
+		}), children]
+	});
+};
+//#endregion
+//#region src/components/VisualContentgroupWithImage/index.ts
+var VisualContentgroupWithImage_default = VisualContentgroupWithImage;
+//#endregion
+export { VisualContentgroupWithImage_default as default };
+
+//# sourceMappingURL=index.js.map

package/lib/components/VisualContentgroupWithImage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/VisualContentgroupWithImage/VisualContentgroupWithImage.tsx","../../../src/components/VisualContentgroupWithImage/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport type ImageRatios = 'square' | 'landscape';\n\nexport interface VisualContentgroupWithImageProps {\n  /** Set the ratio of the image. */\n  imageRatio?: ImageRatios;\n  /** Content rendered inside the visualcontent area. */\n  visualContent: React.ReactNode;\n  /** Content rendered inside the component */\n  children: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst VisualContentgroupWithImage: React.FC<VisualContentgroupWithImageProps> = props => {\n  const { imageRatio = 'square', visualContent, children, testId } = props;\n\n  return (\n    <div data-testid={testId} className={styles['visual-contentgroup-with-image']}>\n      <div\n        className={classNames(styles['visual-contentgroup-with-image__frame'], {\n          [styles[`visual-contentgroup-with-image__frame--${imageRatio}`]]: imageRatio,\n        })}\n      >\n        {visualContent}\n      </div>\n      {children}\n    </div>\n  );\n};\n\nexport default VisualContentgroupWithImage;\n","import VisualContentgroupWithImage from './VisualContentgroupWithImage';\nexport * from './VisualContentgroupWithImage';\nexport default VisualContentgroupWithImage;\n"],"mappings":";;;;AAiBA,IAAM,+BAA0E,UAAS;CACvF,MAAM,EAAE,aAAa,UAAU,eAAe,UAAU,WAAW;CAEnE,OACE,qBAAC,OAAD;EAAK,eAAa;EAAQ,WAAW,OAAO;YAA5C,CACE,oBAAC,OAAD;GACE,WAAW,WAAW,OAAO,0CAA0C,GACpE,OAAO,0CAA0C,gBAAgB,WACpE,CAAC;aAEA;EACE,CAAA,GACJ,QACE;;AAET;;;AC9BA,IAAA,sCAAe"}

package/lib/components/VisualContentgroupWithImage/styles.module.scss

@@ -0,0 +1,50 @@
+@use 'sass:map';
+@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/spacers.css';
+
+.visual-contentgroup-with-image {
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: start;
+  gap: var(--core-space-l);
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
+    flex-direction: row-reverse;
+  }
+
+  &__frame {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    width: 100%;
+
+    > * {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    &--square {
+      aspect-ratio: 1/1;
+
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
+        flex: 0 0 50%;
+      }
+
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
+        max-width: 30rem;
+        max-height: 30rem;
+      }
+    }
+
+    &--landscape {
+      aspect-ratio: 3/2;
+
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
+        flex: 0 0 50%;
+      }
+    }
+  }
+}

package/lib/components/VisualContentgroupWithImage/styles.module.scss.d.ts

@@ -0,0 +1,12 @@
+export type Styles = {
+  'visual-contentgroup-with-image': string;
+  'visual-contentgroup-with-image__frame': string;
+  'visual-contentgroup-with-image__frame--landscape': string;
+  'visual-contentgroup-with-image__frame--square': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/lib/getFilterChips.js

@@ -11,7 +11,7 @@ function getFilterChips({ filter, getLabel, onChipClick, onChipRemove, onOverflo
 	});
 	const visibleChips = allChips.slice(0, maxVisible);
 	const overflowCount = allChips.length - maxVisible;
-	return [visibleChips.map(({ key, value: v }) => /* @__PURE__ */ jsx(Chip_default, {
+	return [...visibleChips.map(({ key, value: v }) => /* @__PURE__ */ jsx(Chip_default, {
 		onChipClick: () => onChipClick(key, v),
 		onCloseClick: () => {
 			if (onChipRemove) onChipRemove(key, v);
@@ -19,11 +19,11 @@ function getFilterChips({ filter, getLabel, onChipClick, onChipRemove, onOverflo
 		},
 		withCloseButton: willShowCloseButton?.(key, v),
 		children: getLabel(key, v)
-	}, `${key}-${v}`)), overflowCount > 0 && /* @__PURE__ */ jsx(Chip_default, {
+	}, `${key}-${v}`)), ...overflowCount > 0 ? [/* @__PURE__ */ jsx(Chip_default, {
 		onChipClick: onOverflowChipClick,
 		withCloseButton: false,
 		children: `+${overflowCount}`
-	}, "overflow")];
+	}, "overflow")] : []];
 }
 //#endregion
 //#region src/components/Filter/getFilterChips/index.ts

package/lib/getFilterChips.js.map

@@ -1 +1 @@
-{"version":3,"file":"getFilterChips.js","names":[],"sources":["../src/components/Filter/getFilterChips/getFilterChips.tsx","../src/components/Filter/getFilterChips/index.ts"],"sourcesContent":["import type { FilterValues, UseFilterReturn } from '../useFilter';\n\nimport Chip from '../../Chip';\n\nexport interface GetFilterChipsArgs<T extends FilterValues> {\n  /** The filter instance from useFilter */\n  filter: UseFilterReturn<T>;\n  /** Look up the display label for a filter key + value */\n  getLabel: (key: keyof T, value: unknown) => string;\n  /** Called when a chip is clicked (f.ex. to open the drawer at that filter category) */\n  onChipClick: (key: keyof T, value: unknown) => void;\n  /** Called when a chip's close button is clicked. If not provided, defaults to filter.removeFilter */\n  onChipRemove?: (key: keyof T, value: unknown) => void;\n  /** Called when the overflow chip is clicked */\n  onOverflowChipClick: () => void;\n  /** Function for mapping if close button is shown on chip or not */\n  willShowCloseButton?: (key: keyof T, value?: unknown) => boolean;\n}\n\nfunction getFilterChips<T extends FilterValues>({\n  filter,\n  getLabel,\n  onChipClick,\n  onChipRemove,\n  onOverflowChipClick,\n  willShowCloseButton,\n}: GetFilterChipsArgs<T>): React.ReactNode[] {\n  const maxVisible = 5;\n\n  const allChips = Object.entries(filter.filters).flatMap(([key, raw]) => {\n    const values = [raw ?? []].flat();\n    return values.map(v => ({ key, value: v }));\n  });\n\n  const visibleChips = allChips.slice(0, maxVisible);\n  const overflowCount = allChips.length - maxVisible;\n\n  return [\n    visibleChips.map(({ key, value: v }) => (\n      <Chip\n        key={`${key}-${v}`}\n        onChipClick={() => onChipClick(key as keyof T, v)}\n        onCloseClick={() => {\n          if (onChipRemove) {\n            onChipRemove(key as keyof T, v);\n          } else {\n            filter.removeFilter(key, v);\n          }\n        }}\n        withCloseButton={willShowCloseButton?.(key, v)}\n      >\n        {getLabel(key as keyof T, v)}\n      </Chip>\n    )),\n    overflowCount > 0 && <Chip key=\"overflow\" onChipClick={onOverflowChipClick} withCloseButton={false}>{`+${overflowCount}`}</Chip>,\n  ];\n}\n\nexport default getFilterChips;\n","import getFilterChips from './getFilterChips';\nexport * from './getFilterChips';\nexport default getFilterChips;\n"],"mappings":";;;AAmBA,SAAS,eAAuC,EAC9C,QACA,UACA,aACA,cACA,qBACA,uBAC2C;CAC3C,MAAM,aAAa;CAEnB,MAAM,WAAW,OAAO,QAAQ,OAAO,OAAO,EAAE,SAAS,CAAC,KAAK,SAAS;EAEtE,OADe,CAAC,OAAO,CAAC,CAAC,EAAE,KACpB,EAAO,KAAI,OAAM;GAAE;GAAK,OAAO;EAAE,EAAE;CAC5C,CAAC;CAED,MAAM,eAAe,SAAS,MAAM,GAAG,UAAU;CACjD,MAAM,gBAAgB,SAAS,SAAS;CAExC,OAAO,CACL,aAAa,KAAK,EAAE,KAAK,OAAO,QAC9B,oBAAC,cAAD;EAEE,mBAAmB,YAAY,KAAgB,CAAC;EAChD,oBAAoB;GAClB,IAAI,cACF,aAAa,KAAgB,CAAC;QAE9B,OAAO,aAAa,KAAK,CAAC;EAE9B;EACA,iBAAiB,sBAAsB,KAAK,CAAC;YAE5C,SAAS,KAAgB,CAAC;CACvB,GAZC,GAAG,IAAI,GAAG,GAYX,CACP,GACD,gBAAgB,KAAK,oBAAC,cAAD;EAAqB,aAAa;EAAqB,iBAAiB;YAAQ,IAAI;CAAsB,GAAhG,UAAgG,CACjI;AACF;;;ACtDA,IAAA,yBAAe"}
+{"version":3,"file":"getFilterChips.js","names":[],"sources":["../src/components/Filter/getFilterChips/getFilterChips.tsx","../src/components/Filter/getFilterChips/index.ts"],"sourcesContent":["import type { FilterValues, UseFilterReturn } from '../useFilter';\n\nimport Chip from '../../Chip';\n\nexport interface GetFilterChipsArgs<T extends FilterValues> {\n  /** The filter instance from useFilter */\n  filter: UseFilterReturn<T>;\n  /** Look up the display label for a filter key + value */\n  getLabel: (key: keyof T, value: unknown) => string;\n  /** Called when a chip is clicked (f.ex. to open the drawer at that filter category) */\n  onChipClick: (key: keyof T, value: unknown) => void;\n  /** Called when a chip's close button is clicked. If not provided, defaults to filter.removeFilter */\n  onChipRemove?: (key: keyof T, value: unknown) => void;\n  /** Called when the overflow chip is clicked */\n  onOverflowChipClick: () => void;\n  /** Function for mapping if close button is shown on chip or not */\n  willShowCloseButton?: (key: keyof T, value?: unknown) => boolean;\n}\n\nfunction getFilterChips<T extends FilterValues>({\n  filter,\n  getLabel,\n  onChipClick,\n  onChipRemove,\n  onOverflowChipClick,\n  willShowCloseButton,\n}: GetFilterChipsArgs<T>): React.ReactNode[] {\n  const maxVisible = 5;\n\n  const allChips = Object.entries(filter.filters).flatMap(([key, raw]) => {\n    const values = [raw ?? []].flat();\n    return values.map(v => ({ key, value: v }));\n  });\n\n  const visibleChips = allChips.slice(0, maxVisible);\n  const overflowCount = allChips.length - maxVisible;\n\n  return [\n    ...visibleChips.map(({ key, value: v }) => (\n      <Chip\n        key={`${key}-${v}`}\n        onChipClick={() => onChipClick(key as keyof T, v)}\n        onCloseClick={() => {\n          if (onChipRemove) {\n            onChipRemove(key as keyof T, v);\n          } else {\n            filter.removeFilter(key, v);\n          }\n        }}\n        withCloseButton={willShowCloseButton?.(key, v)}\n      >\n        {getLabel(key as keyof T, v)}\n      </Chip>\n    )),\n    ...(overflowCount > 0\n      ? [<Chip key=\"overflow\" onChipClick={onOverflowChipClick} withCloseButton={false}>{`+${overflowCount}`}</Chip>]\n      : []),\n  ];\n}\n\nexport default getFilterChips;\n","import getFilterChips from './getFilterChips';\nexport * from './getFilterChips';\nexport default getFilterChips;\n"],"mappings":";;;AAmBA,SAAS,eAAuC,EAC9C,QACA,UACA,aACA,cACA,qBACA,uBAC2C;CAC3C,MAAM,aAAa;CAEnB,MAAM,WAAW,OAAO,QAAQ,OAAO,OAAO,EAAE,SAAS,CAAC,KAAK,SAAS;EAEtE,OADe,CAAC,OAAO,CAAC,CAAC,EAAE,KACpB,EAAO,KAAI,OAAM;GAAE;GAAK,OAAO;EAAE,EAAE;CAC5C,CAAC;CAED,MAAM,eAAe,SAAS,MAAM,GAAG,UAAU;CACjD,MAAM,gBAAgB,SAAS,SAAS;CAExC,OAAO,CACL,GAAG,aAAa,KAAK,EAAE,KAAK,OAAO,QACjC,oBAAC,cAAD;EAEE,mBAAmB,YAAY,KAAgB,CAAC;EAChD,oBAAoB;GAClB,IAAI,cACF,aAAa,KAAgB,CAAC;QAE9B,OAAO,aAAa,KAAK,CAAC;EAE9B;EACA,iBAAiB,sBAAsB,KAAK,CAAC;YAE5C,SAAS,KAAgB,CAAC;CACvB,GAZC,GAAG,IAAI,GAAG,GAYX,CACP,GACD,GAAI,gBAAgB,IAChB,CAAC,oBAAC,cAAD;EAAqB,aAAa;EAAqB,iBAAiB;YAAQ,IAAI;CAAsB,GAAhG,UAAgG,CAAC,IAC5G,CAAC,CACP;AACF;;;ACxDA,IAAA,yBAAe"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@helsenorge/designsystem-react",
   "sideEffects": false,
   "private": false,
-  "version": "15.1.0",
+  "version": "15.2.0",
   "description": "The official design system for Helsenorge built with React.",
   "repository": {
     "type": "git",