@helsenorge/designsystem-react 15.0.0 → 15.2.0

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/Button/styles.module.scss

@@ -8,24 +8,29 @@
 
 $dark-mode-disabled-transparrent: #ffffffb3;
 $with-icons: // icon-class, size-class, padding-left, padding-right, padding-left desktop, padding-right desktop, svg-margin-left, svg-margin-right, svg-margin-left desktop, svg-margin-right desktop
-  'left-icon' 'normal' spacers.getSpacer(xs) spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) 0 spacers.getSpacer(3xs) 0
+  'left-icon' 'medium' spacers.getSpacer(xs) spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) 0 spacers.getSpacer(3xs) 0
     spacers.getSpacer(2xs),
-  'right-icon' 'normal' spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(3xs) 0
+  'right-icon' 'medium' spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(3xs) 0
     spacers.getSpacer(2xs) 0,
-  'left-icon' 'large' spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(l) 0 spacers.getSpacer(2xs) 0
-    spacers.getSpacer(xs),
-  'right-icon' 'large' spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(l) spacers.getSpacer(s) spacers.getSpacer(2xs) 0
-    spacers.getSpacer(xs) 0,
-  'arrow' 'normal' spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(m) 0
+  'left-icon' 'large-non-borderless' spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(l) 0
+    spacers.getSpacer(2xs) 0 spacers.getSpacer(xs),
+  'right-icon' 'large-non-borderless' spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(l) spacers.getSpacer(s)
+    spacers.getSpacer(2xs) 0 spacers.getSpacer(xs) 0,
+  'arrow' 'medium' spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(m) 0
     spacers.getSpacer(l) 0,
-  'arrow' 'large' spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(l) spacers.getSpacer(xs) spacers.getSpacer(l) 0
-    spacers.getSpacer(xl) 0,
-  'arrow--both-icons' 'normal' 0 0 0 0 spacers.getSpacer(s) 0 spacers.getSpacer(m) 0,
-  'arrow--both-icons' 'large' 0 0 0 0 spacers.getSpacer(m) 0 spacers.getSpacer(l) 0,
-  'only-icon' 'normal' 0.062rem 0.062rem 0.375rem 0.375rem 0 0 0 0,
-  'only-icon' 'large' 0.312rem 0.312rem spacers.getSpacer(3xs) spacers.getSpacer(3xs) 0 0 0 0,
-  'both-icons' 'normal' spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) 0 0 0 0,
-  'both-icons' 'large' spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) 0 0 0 0;
+  'arrow' 'large-non-borderless' spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(l) spacers.getSpacer(xs) spacers.getSpacer(l)
+    0 spacers.getSpacer(xl) 0,
+  'arrow--both-icons' 'medium' 0 0 0 0 spacers.getSpacer(s) 0 spacers.getSpacer(m) 0,
+  'arrow--both-icons' 'large-non-borderless' 0 0 0 0 spacers.getSpacer(m) 0 spacers.getSpacer(l) 0,
+  'only-icon' 'medium' 0.0625rem 0.0625rem 0.375rem 0.375rem 0 0 0 0,
+  'only-icon' 'large-non-borderless' 0.312rem 0.312rem spacers.getSpacer(3xs) spacers.getSpacer(3xs) 0 0 0 0,
+  'both-icons' 'medium' spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) 0 0 0 0,
+  'both-icons' 'large-non-borderless' spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) 0 0 0 0,
+  'left-icon' 'large-borderless' spacers.getSpacer(xs) spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) 0
+    spacers.getSpacer(3xs) 0 spacers.getSpacer(3xs),
+  'right-icon' 'large-borderless' spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(xs)
+    spacers.getSpacer(3xs) 0 spacers.getSpacer(3xs) 0,
+  'only-icon' 'large-borderless' 0 0 0.0625rem 0.0625rem 0 0 0 0;
 
 // Brukes til å aktivere hover styling uten at button hovres
 @mixin outline-borderless-hover {
@@ -44,6 +49,8 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 
   @if $with-uu-border {
     border: 1px solid var(--color-action-border-ondark-focus);
+  } @else {
+    border: none;
   }
 }
 
@@ -259,7 +266,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     line-height: 1.5rem;
   }
 
-  &--large {
+  &--large-non-borderless {
     min-height: 3.5rem;
     padding: 0 spacers.getSpacer(l);
     font-size: 1.3125rem;
@@ -272,6 +279,16 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     }
   }
 
+  // Medium box sizing with large font-size, used for borderless + large
+  &--large-borderless {
+    font-size: 1.3125rem;
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      font-size: font-settings.$font-size-lg;
+      line-height: 1.5rem;
+    }
+  }
+
   @each $icon-class, $size-class, $pl, $pr, $pld, $prd, $svgml, $svgmr, $svgmld, $svgmrd in $with-icons {
     &--#{$icon-class}#{&}--#{$size-class} {
       padding-left: $pl;
@@ -320,6 +337,8 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   &--borderless {
     @include outline-borderless-background(transparent, var(--color-action-background-transparent-onlight-hover));
 
+    border: none;
+
     :focus > & {
       @include focus-shadow(false);
 
@@ -408,6 +427,10 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     @include text-color(palette.$cherry600, palette.$cherry700);
   }
 
+  &--only-icon {
+    justify-content: center;
+  }
+
   /* stylelint-disable-next-line */
   &--only-icon &__text {
     @include sr-only;

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

@@ -15,9 +15,10 @@ export type Styles = {
   'button--borderless': string;
   'button--both-icons': string;
   'button--destructive': string;
-  'button--large': string;
+  'button--large-borderless': string;
+  'button--large-non-borderless': string;
   'button--left-icon': string;
-  'button--normal': string;
+  'button--medium': string;
   'button--on-dark': string;
   'button--only-icon': string;
   'button--outline': string;

package/lib/components/Drawer/DrawerBackButton.d.ts

@@ -0,0 +1,10 @@
+export interface DrawerBackButtonProps {
+    /** Function is called when user clicks the button */
+    onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /** Sets the aria-label of the button */
+    ariaLabel?: string;
+    /** Adds custom classes to the element. */
+    className?: string;
+}
+declare const DrawerBackButton: React.FC<DrawerBackButtonProps>;
+export default DrawerBackButton;

package/lib/components/Drawer/DrawerBackButton.module.scss

@@ -0,0 +1,52 @@
+@use 'sass:map';
+@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/colors.css';
+
+$desktop-size: 3rem;
+$mobile-inner-size: 2.375rem;
+$mobile-outer-size: 2.75rem;
+
+.back-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: $mobile-outer-size;
+  width: $mobile-outer-size;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    height: $desktop-size;
+    width: $desktop-size;
+  }
+
+  &__inner-container {
+    width: $mobile-inner-size;
+    height: $mobile-inner-size;
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      height: $desktop-size;
+      width: $desktop-size;
+    }
+
+    :hover > & {
+      background-color: var(--color-action-background-transparent-onlight-hover);
+    }
+
+    :active > & {
+      background-color: var(--color-action-background-transparent-onlight-active);
+    }
+
+    :focus-visible > & {
+      outline: 3px solid var(--color-action-border-onlight-focus);
+      border-radius: 0;
+      border: 0;
+    }
+  }
+}

package/lib/components/Drawer/DrawerBackButton.module.scss.d.ts

@@ -0,0 +1,10 @@
+export type Styles = {
+  'back-button': string;
+  'back-button__inner-container': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

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

@@ -98,15 +98,6 @@
     &__back-button {
       // Moves the button visually to the left but keeps it in the DOM order for screen readers and keyboard navigation
       order: -1;
-
-      // Temporary fix for the back button, until we decide if we want to implement this more properly
-      width: 48px;
-      height: 48px;
-
-      svg {
-        width: 48px;
-        height: 48px;
-      }
     }
   }
 

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

@@ -15,9 +15,10 @@ export type Styles = {
   'button--borderless': string;
   'button--both-icons': string;
   'button--destructive': string;
-  'button--large': string;
+  'button--large-borderless': string;
+  'button--large-non-borderless': string;
   'button--left-icon': string;
-  'button--normal': string;
+  'button--medium': string;
   'button--on-dark': string;
   'button--only-icon': string;
   'button--outline': string;
@@ -31,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;
 }