@helsenorge/designsystem-react 14.0.0-beta.7 → 14.0.0

package/lib/Title.js.map

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

package/lib/Toast.js

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

package/lib/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","names":["Toast: React.FC<ToastProps>"],"sources":["../src/components/Toast/Toast.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport CheckFill from '../Icons/CheckFill';\n\nimport styles from './styles.module.scss';\n\nexport interface ToastProps {\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** The title to display in the toast */\n  title: string;\n  /** The message to display in the toast */\n  message?: string;\n  /** Callback when toast is closed */\n  onClose?: () => void;\n}\n\nconst Toast: React.FC<ToastProps> = ({ testId, title, message, onClose }) => {\n  const isMobile = useIsMobileBreakpoint();\n\n  const handleClose = (): void => {\n    if (onClose) {\n      onClose();\n    }\n  };\n\n  return (\n    <output className={styles['toast']} data-testid={testId}>\n      <Icon\n        size={isMobile ? IconSize.XSmall : IconSize.Small}\n        svgIcon={CheckFill}\n        className={classNames(styles['toast__icon'], styles['toast__icon--check'])}\n      />\n      <div className={styles['toast__text-container']}>\n        <span className={styles['toast__title']}>{title}</span>\n        {message && <span className={styles['toast__description']}>{message}</span>}\n      </div>\n      <Close\n        onClick={handleClose}\n        color=\"black\"\n        className={classNames(styles['toast__icon'], styles['toast__icon--close'])}\n        testId={`${testId}-close`}\n      />\n    </output>\n  );\n};\n\nexport default Toast;\n"],"mappings":";;;;;;;;AAoBA,IAAMA,SAA+B,EAAE,QAAQ,OAAO,SAAS,cAAc;CAC3E,MAAM,WAAW,uBAAuB;CAExC,MAAM,oBAA0B;AAC9B,MAAI,QACF,UAAS;;AAIb,QACE,qBAAC,UAAA;EAAO,WAAW,OAAO;EAAU,eAAa;;GAC/C,oBAAC,cAAA;IACC,MAAM,WAAW,SAAS,SAAS,SAAS;IAC5C,SAAS;IACT,WAAW,GAAW,OAAO,gBAAgB,OAAO,sBAAsB;KAC1E;GACF,qBAAC,OAAA;IAAI,WAAW,OAAO;eACrB,oBAAC,QAAA;KAAK,WAAW,OAAO;eAAkB;MAAa,EACtD,WAAW,oBAAC,QAAA;KAAK,WAAW,OAAO;eAAwB;MAAe,CAAA;KACvE;GACN,oBAAC,eAAA;IACC,SAAS;IACT,OAAM;IACN,WAAW,GAAW,OAAO,gBAAgB,OAAO,sBAAsB;IAC1E,QAAQ,GAAG,OAAO;KAClB;;GACK;;AAIb,IAAA,gBAAe"}
+{"version":3,"file":"Toast.js","names":["Toast: React.FC<ToastProps>"],"sources":["../src/components/Toast/Toast.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport CheckFill from '../Icons/CheckFill';\n\nimport styles from './styles.module.scss';\n\nexport interface ToastProps {\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** The title to display in the toast */\n  title: string;\n  /** The message to display in the toast */\n  message?: string;\n  /** Callback when toast is closed */\n  onClose?: () => void;\n}\n\nconst Toast: React.FC<ToastProps> = ({ testId, title, message, onClose }) => {\n  const isMobile = useIsMobileBreakpoint();\n\n  const handleClose = (): void => {\n    if (onClose) {\n      onClose();\n    }\n  };\n\n  return (\n    <output className={styles['toast']} data-testid={testId}>\n      <Icon\n        size={isMobile ? IconSize.XSmall : IconSize.Small}\n        svgIcon={CheckFill}\n        className={classNames(styles['toast__icon'], styles['toast__icon--check'])}\n      />\n      <div className={styles['toast__text-container']}>\n        <span className={styles['toast__title']}>{title}</span>\n        {message && <span className={styles['toast__description']}>{message}</span>}\n      </div>\n      <Close\n        onClick={handleClose}\n        color=\"black\"\n        className={classNames(styles['toast__icon'], styles['toast__icon--close'])}\n        testId={`${testId}-close`}\n      />\n    </output>\n  );\n};\n\nexport default Toast;\n"],"mappings":";;;;;;;;AAoBA,IAAMA,SAA+B,EAAE,QAAQ,OAAO,SAAS,cAAc;CAC3E,MAAM,WAAW,uBAAuB;CAExC,MAAM,oBAA0B;AAC9B,MAAI,QACF,UAAS;;AAIb,QACE,qBAAC,UAAA;EAAO,WAAW,OAAO;EAAU,eAAa;;GAC/C,oBAAC,cAAA;IACC,MAAM,WAAW,SAAS,SAAS,SAAS;IAC5C,SAAS;IACT,WAAW,WAAW,OAAO,gBAAgB,OAAO,sBAAsB;KAC1E;GACF,qBAAC,OAAA;IAAI,WAAW,OAAO;eACrB,oBAAC,QAAA;KAAK,WAAW,OAAO;eAAkB;MAAa,EACtD,WAAW,oBAAC,QAAA;KAAK,WAAW,OAAO;eAAwB;MAAe,CAAA;KACvE;GACN,oBAAC,eAAA;IACC,SAAS;IACT,OAAM;IACN,WAAW,WAAW,OAAO,gBAAgB,OAAO,sBAAsB;IAC1E,QAAQ,GAAG,OAAO;KAClB;;GACK;;AAIb,IAAA,gBAAe"}

package/lib/components/ArticleTeaser/index.js

@@ -1,6 +1,6 @@
 import { n as AnalyticsId, s as LanguageLocales } from "../../constants2.js";
 import { n as useLanguage } from "../../useLanguage.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
 var HN_Designsystem_ArticleTeaser_en_GB_default = {
@@ -27,16 +27,16 @@ var ArticleTeaser = (props) => {
 		...resources
 	};
 	return /* @__PURE__ */ jsxs(WrapperTag, {
-		className: cn(styles.articleteaser),
+		className: classNames(styles.articleteaser),
 		"data-testid": testId,
 		"data-analyticsid": AnalyticsId.ArticleTeaser,
 		children: [/* @__PURE__ */ jsx("div", {
-			className: cn(styles["articleteaser__content"], { [styles["articleteaser__content--collapsed"]]: !expanded }),
+			className: classNames(styles["articleteaser__content"], { [styles["articleteaser__content--collapsed"]]: !expanded }),
 			style: { maxHeight: expanded ? "none" : props.heightCollapsed },
 			children
 		}), /* @__PURE__ */ jsx("button", {
 			type: "button",
-			className: cn(styles["articleteaser__button"], { [styles["articleteaser__button--expanded"]]: expanded }),
+			className: classNames(styles["articleteaser__button"], { [styles["articleteaser__button--expanded"]]: expanded }),
 			onClick: onExpand,
 			"aria-expanded": expanded,
 			"aria-controls": contentId,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ArticleTeaser: React.FC<ArticleTeaserProps>","mergedResources: HNDesignsystemArticleTeaser"],"sources":["../../../src/resources/HN.Designsystem.ArticleTeaser.en-GB.json","../../../src/resources/HN.Designsystem.ArticleTeaser.nb-NO.json","../../../src/components/ArticleTeaser/resourceHelper.ts","../../../src/components/ArticleTeaser/ArticleTeaser.tsx","../../../src/components/ArticleTeaser/index.ts"],"sourcesContent":["{\n  \"expandButtonClose\": \"Show more\",\n  \"expandButtonOpen\": \"Show less\"\n}\n","{\n  \"expandButtonClose\": \"Vis mer\",\n  \"expandButtonOpen\": \"Vis mindre\"\n}\n","import type { HNDesignsystemArticleTeaser } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.ArticleTeaser.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.ArticleTeaser.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemArticleTeaser => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import classNames from 'classnames';\n\nimport type { HNDesignsystemArticleTeaser } from '../../resources/Resources';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\n\nimport styles from './styles.module.scss';\n\nexport type ArticleTeaserTags = 'div' | 'section' | 'aside' | 'article';\n\nexport interface ArticleTeaserProps {\n  /** Callback for the button. Should be used for setting the expanded boolean */\n  onExpand: () => void;\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Id of the content, used to set aria-controls */\n  contentId: string;\n  /** If the component is expanded or not */\n  expanded: boolean;\n  /** For overriding the height of the collapsed teaser */\n  heightCollapsed?: string;\n  /** Changes the underlying element of the wrapper */\n  htmlMarkup?: ArticleTeaserTags;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemArticleTeaser>;\n  /** Sets the data-testid attribute */\n  testId?: string;\n}\n\nconst ArticleTeaser: React.FC<ArticleTeaserProps> = props => {\n  const { onExpand, children, contentId, expanded, htmlMarkup = 'div', resources, testId } = props;\n  const WrapperTag = htmlMarkup;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemArticleTeaser = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  return (\n    <WrapperTag className={classNames(styles.articleteaser)} data-testid={testId} data-analyticsid={AnalyticsId.ArticleTeaser}>\n      <div\n        className={classNames(styles['articleteaser__content'], {\n          [styles['articleteaser__content--collapsed']]: !expanded,\n        })}\n        style={{\n          maxHeight: expanded ? 'none' : props.heightCollapsed,\n        }}\n      >\n        {children}\n      </div>\n      <button\n        type=\"button\"\n        className={classNames(styles['articleteaser__button'], {\n          [styles['articleteaser__button--expanded']]: expanded,\n        })}\n        onClick={onExpand}\n        aria-expanded={expanded}\n        aria-controls={contentId}\n      >\n        {expanded ? mergedResources.expandButtonOpen : mergedResources.expandButtonClose}\n      </button>\n    </WrapperTag>\n  );\n};\n\nexport default ArticleTeaser;\n","import ArticleTeaser from './ArticleTeaser';\nexport * from './ArticleTeaser';\nexport default ArticleTeaser;\n"],"mappings":";;;;;;;;;;;;;AEMA,MAAa,gBAAgB,aAA2D;AACtF,SAAQ,UAAR;EACE,KAAK,gBAAgB,QACnB,QAAO;EACT,KAAK,gBAAgB;EACrB,QACE,QAAO;;;ACmBb,IAAMA,iBAA8C,UAAS;CAC3D,MAAM,EAAE,UAAU,UAAU,WAAW,UAAU,aAAa,OAAO,WAAW,WAAW;CAC3F,MAAM,aAAa;CAEnB,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAG5E,MAAMC,kBAA+C;EACnD,GAHuB,aAAa,SAAS;EAI7C,GAAG;EACJ;AAED,QACE,qBAAC,YAAA;EAAW,WAAW,GAAW,OAAO,cAAc;EAAE,eAAa;EAAQ,oBAAkB,YAAY;aAC1G,oBAAC,OAAA;GACC,WAAW,GAAW,OAAO,2BAA2B,GACrD,OAAO,uCAAuC,CAAC,UACjD,CAAC;GACF,OAAO,EACL,WAAW,WAAW,SAAS,MAAM,iBACtC;GAEA;IACG,EACN,oBAAC,UAAA;GACC,MAAK;GACL,WAAW,GAAW,OAAO,0BAA0B,GACpD,OAAO,qCAAqC,UAC9C,CAAC;GACF,SAAS;GACT,iBAAe;GACf,iBAAe;aAEd,WAAW,gBAAgB,mBAAmB,gBAAgB;IACxD,CAAA;GACE;;AChEjB,IAAA,wBDoEe"}
+{"version":3,"file":"index.js","names":["ArticleTeaser: React.FC<ArticleTeaserProps>","mergedResources: HNDesignsystemArticleTeaser"],"sources":["../../../src/resources/HN.Designsystem.ArticleTeaser.en-GB.json","../../../src/resources/HN.Designsystem.ArticleTeaser.nb-NO.json","../../../src/components/ArticleTeaser/resourceHelper.ts","../../../src/components/ArticleTeaser/ArticleTeaser.tsx","../../../src/components/ArticleTeaser/index.ts"],"sourcesContent":["{\n  \"expandButtonClose\": \"Show more\",\n  \"expandButtonOpen\": \"Show less\"\n}\n","{\n  \"expandButtonClose\": \"Vis mer\",\n  \"expandButtonOpen\": \"Vis mindre\"\n}\n","import type { HNDesignsystemArticleTeaser } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.ArticleTeaser.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.ArticleTeaser.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemArticleTeaser => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import classNames from 'classnames';\n\nimport type { HNDesignsystemArticleTeaser } from '../../resources/Resources';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\n\nimport styles from './styles.module.scss';\n\nexport type ArticleTeaserTags = 'div' | 'section' | 'aside' | 'article';\n\nexport interface ArticleTeaserProps {\n  /** Callback for the button. Should be used for setting the expanded boolean */\n  onExpand: () => void;\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Id of the content, used to set aria-controls */\n  contentId: string;\n  /** If the component is expanded or not */\n  expanded: boolean;\n  /** For overriding the height of the collapsed teaser */\n  heightCollapsed?: string;\n  /** Changes the underlying element of the wrapper */\n  htmlMarkup?: ArticleTeaserTags;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemArticleTeaser>;\n  /** Sets the data-testid attribute */\n  testId?: string;\n}\n\nconst ArticleTeaser: React.FC<ArticleTeaserProps> = props => {\n  const { onExpand, children, contentId, expanded, htmlMarkup = 'div', resources, testId } = props;\n  const WrapperTag = htmlMarkup;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemArticleTeaser = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  return (\n    <WrapperTag className={classNames(styles.articleteaser)} data-testid={testId} data-analyticsid={AnalyticsId.ArticleTeaser}>\n      <div\n        className={classNames(styles['articleteaser__content'], {\n          [styles['articleteaser__content--collapsed']]: !expanded,\n        })}\n        style={{\n          maxHeight: expanded ? 'none' : props.heightCollapsed,\n        }}\n      >\n        {children}\n      </div>\n      <button\n        type=\"button\"\n        className={classNames(styles['articleteaser__button'], {\n          [styles['articleteaser__button--expanded']]: expanded,\n        })}\n        onClick={onExpand}\n        aria-expanded={expanded}\n        aria-controls={contentId}\n      >\n        {expanded ? mergedResources.expandButtonOpen : mergedResources.expandButtonClose}\n      </button>\n    </WrapperTag>\n  );\n};\n\nexport default ArticleTeaser;\n","import ArticleTeaser from './ArticleTeaser';\nexport * from './ArticleTeaser';\nexport default ArticleTeaser;\n"],"mappings":";;;;;;;;;;;;;AEMA,MAAa,gBAAgB,aAA2D;AACtF,SAAQ,UAAR;EACE,KAAK,gBAAgB,QACnB,QAAO;EACT,KAAK,gBAAgB;EACrB,QACE,QAAO;;;ACmBb,IAAMA,iBAA8C,UAAS;CAC3D,MAAM,EAAE,UAAU,UAAU,WAAW,UAAU,aAAa,OAAO,WAAW,WAAW;CAC3F,MAAM,aAAa;CAEnB,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAG5E,MAAMC,kBAA+C;EACnD,GAHuB,aAAa,SAAS;EAI7C,GAAG;EACJ;AAED,QACE,qBAAC,YAAA;EAAW,WAAW,WAAW,OAAO,cAAc;EAAE,eAAa;EAAQ,oBAAkB,YAAY;aAC1G,oBAAC,OAAA;GACC,WAAW,WAAW,OAAO,2BAA2B,GACrD,OAAO,uCAAuC,CAAC,UACjD,CAAC;GACF,OAAO,EACL,WAAW,WAAW,SAAS,MAAM,iBACtC;GAEA;IACG,EACN,oBAAC,UAAA;GACC,MAAK;GACL,WAAW,WAAW,OAAO,0BAA0B,GACpD,OAAO,qCAAqC,UAC9C,CAAC;GACF,SAAS;GACT,iBAAe;GACf,iBAAe;aAEd,WAAW,gBAAgB,mBAAmB,gBAAgB;IACxD,CAAA;GACE;;AChEjB,IAAA,wBDoEe"}

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

@@ -94,9 +94,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   }
 
   :disabled > & {
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      color: palette.$neutral700;
-    }
+    color: palette.$neutral700;
   }
 }
 

package/lib/components/Chip/index.js

@@ -4,7 +4,7 @@ import { t as palette } from "../../palette.js";
 import { t as Icon_default } from "../../Icon.js";
 import { t as Undo_default } from "../../Undo.js";
 import { t as X_default } from "../../X.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
 let ChipSize = /* @__PURE__ */ function(ChipSize$1) {
@@ -26,7 +26,7 @@ let ChipVariant = /* @__PURE__ */ function(ChipVariant$1) {
 var Chip = (props) => {
 	const { children, size = ChipSize.medium, color = "blueberry", variant = "normal", action, onClick, testId } = props;
 	const { refObject, isHovered } = usePseudoClasses();
-	const chipClasses = cn(styles.chip, styles[`chip--${size}`], styles[`chip--${color}`], styles[`chip--${variant}`], { [styles[`chip--undo`]]: action === "undo" });
+	const chipClasses = classNames(styles.chip, styles[`chip--${size}`], styles[`chip--${color}`], styles[`chip--${variant}`], { [styles[`chip--undo`]]: action === "undo" });
 	const getActionIcon = () => {
 		switch (action) {
 			case "undo": return Undo_default;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Chip: React.FC<ChipProps>"],"sources":["../../../src/components/Chip/constants.ts","../../../src/components/Chip/Chip.tsx","../../../src/components/Chip/index.ts"],"sourcesContent":["export enum ChipSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum ChipAction {\n  remove = 'remove',\n  undo = 'undo',\n}\n\nexport enum ChipVariant {\n  normal = 'normal',\n  oncolor = 'oncolor',\n  emphasised = 'emphasised',\n}\n","import cn from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\nimport type { SvgIcon } from '../Icon';\n\nimport { ChipSize, type ChipAction, type ChipVariant } from './constants';\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { palette } from '../../theme/palette';\nimport Icon, { IconSize } from '../Icon';\nimport Undo from '../Icons/Undo';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport type ChipColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;\n\nexport interface ChipProps {\n  /** Sets the text of the chip */\n  children: string;\n  /** Sets the size of the chip. Default: medium */\n  size?: keyof typeof ChipSize;\n  /** Sets the background of the chip. Not used if action is \"undo\". Default: blueberry */\n  color?: ChipColors;\n  /* Changes the appearance of the chip. Not used if action is \"undo\". Default: normal */\n  variant?: keyof typeof ChipVariant;\n  /* Makes the chip a clickable button that performs an action. onClick must also be set. */\n  action: keyof typeof ChipAction;\n  /* Called when action is set and the chip is clicked on. action must also be set. */\n  onClick: () => void;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst Chip: React.FC<ChipProps> = props => {\n  const { children, size = ChipSize.medium, color = 'blueberry', variant = 'normal', action, onClick, testId } = props;\n\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n\n  const chipClasses = cn(styles.chip, styles[`chip--${size}`], styles[`chip--${color}`], styles[`chip--${variant}`], {\n    [styles[`chip--undo`]]: action === 'undo',\n  });\n\n  const getActionIcon = (): SvgIcon => {\n    switch (action) {\n      case 'undo':\n        return Undo;\n      case 'remove':\n        return X;\n    }\n  };\n\n  return (\n    <button className={chipClasses} onClick={onClick} ref={refObject} type=\"button\" data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {children}\n      <Icon svgIcon={getActionIcon()} size={IconSize.XXSmall} color={palette[`${color}800`]} isHovered={isHovered} />\n    </button>\n  );\n};\n\nexport default Chip;\n","import Chip from './Chip';\nexport { ChipSize, ChipAction, ChipVariant } from './constants';\nexport * from './Chip';\nexport default Chip;\n"],"mappings":";;;;;;;;;AAAA,IAAY,WAAA,yBAAA,YAAL;AACL,YAAA,YAAA;AACA,YAAA,WAAA;;;AAGF,IAAY,aAAA,yBAAA,cAAL;AACL,cAAA,YAAA;AACA,cAAA,UAAA;;;AAGF,IAAY,cAAA,yBAAA,eAAL;AACL,eAAA,YAAA;AACA,eAAA,aAAA;AACA,eAAA,gBAAA;;;ACqBF,IAAMA,QAA4B,UAAS;CACzC,MAAM,EAAE,UAAU,OAAO,SAAS,QAAQ,QAAQ,aAAa,UAAU,UAAU,QAAQ,SAAS,WAAW;CAE/G,MAAM,EAAE,WAAW,cAAc,kBAAqC;CAEtE,MAAM,cAAc,GAAG,OAAO,MAAM,OAAO,SAAS,SAAS,OAAO,SAAS,UAAU,OAAO,SAAS,YAAY,GAChH,OAAO,gBAAgB,WAAW,QACpC,CAAC;CAEF,MAAM,sBAA+B;AACnC,UAAQ,QAAR;GACE,KAAK,OACH,QAAO;GACT,KAAK,SACH,QAAO;;;AAIb,QACE,qBAAC,UAAA;EAAO,WAAW;EAAsB;EAAS,KAAK;EAAW,MAAK;EAAS,eAAa;EAAQ,oBAAkB,YAAY;aAChI,UACD,oBAAC,cAAA;GAAK,SAAS,eAAe;GAAE,MAAM,SAAS;GAAS,OAAO,QAAQ,GAAG,MAAM;GAAkB;IAAa,CAAA;GACxG;;ACrDb,IAAA,eDyDe"}
+{"version":3,"file":"index.js","names":["Chip: React.FC<ChipProps>"],"sources":["../../../src/components/Chip/constants.ts","../../../src/components/Chip/Chip.tsx","../../../src/components/Chip/index.ts"],"sourcesContent":["export enum ChipSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum ChipAction {\n  remove = 'remove',\n  undo = 'undo',\n}\n\nexport enum ChipVariant {\n  normal = 'normal',\n  oncolor = 'oncolor',\n  emphasised = 'emphasised',\n}\n","import cn from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\nimport type { SvgIcon } from '../Icon';\n\nimport { ChipSize, type ChipAction, type ChipVariant } from './constants';\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { palette } from '../../theme/palette';\nimport Icon, { IconSize } from '../Icon';\nimport Undo from '../Icons/Undo';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport type ChipColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;\n\nexport interface ChipProps {\n  /** Sets the text of the chip */\n  children: string;\n  /** Sets the size of the chip. Default: medium */\n  size?: keyof typeof ChipSize;\n  /** Sets the background of the chip. Not used if action is \"undo\". Default: blueberry */\n  color?: ChipColors;\n  /* Changes the appearance of the chip. Not used if action is \"undo\". Default: normal */\n  variant?: keyof typeof ChipVariant;\n  /* Makes the chip a clickable button that performs an action. onClick must also be set. */\n  action: keyof typeof ChipAction;\n  /* Called when action is set and the chip is clicked on. action must also be set. */\n  onClick: () => void;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst Chip: React.FC<ChipProps> = props => {\n  const { children, size = ChipSize.medium, color = 'blueberry', variant = 'normal', action, onClick, testId } = props;\n\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n\n  const chipClasses = cn(styles.chip, styles[`chip--${size}`], styles[`chip--${color}`], styles[`chip--${variant}`], {\n    [styles[`chip--undo`]]: action === 'undo',\n  });\n\n  const getActionIcon = (): SvgIcon => {\n    switch (action) {\n      case 'undo':\n        return Undo;\n      case 'remove':\n        return X;\n    }\n  };\n\n  return (\n    <button className={chipClasses} onClick={onClick} ref={refObject} type=\"button\" data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {children}\n      <Icon svgIcon={getActionIcon()} size={IconSize.XXSmall} color={palette[`${color}800`]} isHovered={isHovered} />\n    </button>\n  );\n};\n\nexport default Chip;\n","import Chip from './Chip';\nexport { ChipSize, ChipAction, ChipVariant } from './constants';\nexport * from './Chip';\nexport default Chip;\n"],"mappings":";;;;;;;;;AAAA,IAAY,WAAA,yBAAA,YAAL;AACL,YAAA,YAAA;AACA,YAAA,WAAA;;;AAGF,IAAY,aAAA,yBAAA,cAAL;AACL,cAAA,YAAA;AACA,cAAA,UAAA;;;AAGF,IAAY,cAAA,yBAAA,eAAL;AACL,eAAA,YAAA;AACA,eAAA,aAAA;AACA,eAAA,gBAAA;;;ACqBF,IAAMA,QAA4B,UAAS;CACzC,MAAM,EAAE,UAAU,OAAO,SAAS,QAAQ,QAAQ,aAAa,UAAU,UAAU,QAAQ,SAAS,WAAW;CAE/G,MAAM,EAAE,WAAW,cAAc,kBAAqC;CAEtE,MAAM,cAAc,WAAG,OAAO,MAAM,OAAO,SAAS,SAAS,OAAO,SAAS,UAAU,OAAO,SAAS,YAAY,GAChH,OAAO,gBAAgB,WAAW,QACpC,CAAC;CAEF,MAAM,sBAA+B;AACnC,UAAQ,QAAR;GACE,KAAK,OACH,QAAO;GACT,KAAK,SACH,QAAO;;;AAIb,QACE,qBAAC,UAAA;EAAO,WAAW;EAAsB;EAAS,KAAK;EAAW,MAAK;EAAS,eAAa;EAAQ,oBAAkB,YAAY;aAChI,UACD,oBAAC,cAAA;GAAK,SAAS,eAAe;GAAE,MAAM,SAAS;GAAS,OAAO,QAAQ,GAAG,MAAM;GAAkB;IAAa,CAAA;GACxG;;ACrDb,IAAA,eDyDe"}

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

@@ -73,15 +73,8 @@
 
   &__header {
     display: flex;
-    align-items: center;
     justify-content: space-between;
-
-    // legg til padding for å gi plass til close button
-    padding: var(--core-space-xs) 2.75rem var(--core-space-xs) var(--core-space-2xs);
-
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      padding: var(--core-space-xs) 2.75rem var(--core-space-xs) var(--core-space-xs);
-    }
+    padding: var(--core-space-xs);
 
     @include breakpoints.tiny-screens-media-query {
       padding: var(--core-space-4xs) 0;
@@ -89,22 +82,12 @@
       align-items: flex-start;
     }
 
-    &--no-close-button {
-      padding: var(--core-space-xs) var(--core-space-2xs);
-
-      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-        padding: var(--core-space-xs);
-      }
+    &__title {
+      margin-top: 0.5rem !important;
     }
 
     &__close-button {
-      position: absolute;
-      top: 0;
-      right: 0;
-
-      @include breakpoints.tiny-screens-media-query {
-        position: relative;
-      }
+      align-self: flex-start;
     }
   }
 

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

@@ -12,7 +12,7 @@ export type Styles = {
   drawer__footer: string;
   drawer__header: string;
   'drawer__header__close-button': string;
-  'drawer__header--no-close-button': string;
+  drawer__header__title: string;
   drawer__overlay: string;
 };
 

package/lib/components/Dropdown/index.js

@@ -18,7 +18,7 @@ import { t as ChevronDown_default } from "../../ChevronDown.js";
 import { t as ChevronUp_default } from "../../ChevronUp.js";
 import { t as PlusSmall_default } from "../../PlusSmall.js";
 import { t as Label_default } from "../../Label.js";
-import cn from "classnames";
+import classNames from "classnames";
 import React, { useEffect, useId, useRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clamp } from "motion/react";
@@ -81,14 +81,14 @@ const DropdownBase = (props) => {
 		...getResources(language),
 		...resources
 	};
-	const toggleClasses = cn(styles.dropdown__toggle, {
+	const toggleClasses = classNames(styles.dropdown__toggle, {
 		[styles["dropdown__toggle--open"]]: isOpen && !disabled,
 		[styles["dropdown__toggle--with-icon"]]: typeof svgIcon !== "undefined",
 		[styles["dropdown__toggle--transparent"]]: variant === "transparent",
 		[styles["dropdown__toggle--borderless"]]: variant === "borderless"
 	});
-	const contentClasses = cn(styles.dropdown__content, isOpen && styles["dropdown__content--open"]);
-	const listItemClasses = cn(styles["dropdown__list-item"], { [styles["dropdown__list-item--single-select"]]: isSingleSelect });
+	const contentClasses = classNames(styles.dropdown__content, isOpen && styles["dropdown__content--open"]);
+	const listItemClasses = classNames(styles["dropdown__list-item"], { [styles["dropdown__list-item--single-select"]]: isSingleSelect });
 	const { refs, floatingStyles } = useFloating({
 		strategy: "fixed",
 		placement: "bottom-start",
@@ -185,7 +185,7 @@ const DropdownBase = (props) => {
 					const label = element.props.label;
 					if (React.isValidElement(label) && isComponent(label, Label_default)) return React.cloneElement(element, {
 						ref: mergeRefs([element.props.ref, childrenRefList.current[index]]),
-						label: React.cloneElement(label, { labelClassName: cn(label.props?.labelClassName, styles["dropdown__multiselect-item"]) })
+						label: React.cloneElement(label, { labelClassName: classNames(label.props?.labelClassName, styles["dropdown__multiselect-item"]) })
 					});
 				}
 				return React.cloneElement(child, { ref: mergeRefs([element.props.ref, childrenRefList.current[index]]) });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["SingleSelect: React.FC<SingleSelectProps>","DropdownBase: React.FC<DropdownProps>","mergedResources: HNDesignsystemDropdown"],"sources":["../../../src/components/Dropdown/resourceHelper.ts","../../../src/components/Dropdown/SingleSelect/SingleSelect.tsx","../../../src/components/Dropdown/Dropdown.tsx","../../../src/components/Dropdown/index.ts"],"sourcesContent":["import type { HNDesignsystemDropdown } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Dropdown.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Dropdown.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDropdown => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React from 'react';\n\nimport { SingleSelectContext } from './utils';\n\nexport type SingleSelectContextType = {\n  name?: string;\n  disabled?: boolean;\n  required?: boolean;\n  value?: string;\n  onValueChange?: (newValue: string, e?: React.SyntheticEvent) => void;\n};\n\nexport interface SingleSelectProps {\n  name?: string;\n  disabled?: boolean;\n  defaultValue?: string;\n  onValueChange?: (newValue: string, e?: React.SyntheticEvent) => void;\n  children: React.ReactNode;\n}\n\nexport const SingleSelect: React.FC<SingleSelectProps> = ({ name, disabled, defaultValue, onValueChange, children }) => {\n  const [selected, setSelected] = React.useState<string | undefined>(defaultValue);\n\n  const context = React.useMemo<SingleSelectContextType>(\n    () => ({\n      name,\n      disabled,\n      value: selected,\n      onValueChange: (v, e): void => {\n        setSelected(v);\n        onValueChange?.(v, e);\n      },\n    }),\n    [name, disabled, selected, onValueChange]\n  );\n\n  return <SingleSelectContext.Provider value={context}>{children}</SingleSelectContext.Provider>;\n};\n","import type { ComponentType } from 'react';\nimport React, { useEffect, useRef, useId } from 'react';\n\nimport { autoUpdate, offset, shift, size, useFloating, flip } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { clamp } from 'motion/react';\n\nimport type { SingleSelectItemProps } from './SingleSelect/SingleSelectItem';\nimport type { HNDesignsystemDropdown } from '../../resources/Resources';\nimport type { CheckboxProps } from '../Checkbox';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\nimport type { LabelProps } from '../Label';\n\nimport {\n  AnalyticsId,\n  IconSize,\n  KeyboardEventKey,\n  LanguageLocales,\n  ZIndex,\n  usePseudoClasses,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useToggle,\n} from '../..';\nimport { getResources } from './resourceHelper';\nimport { SingleSelectItem } from './SingleSelect/SingleSelectItem';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { isComponent } from '../../utils/component';\nimport { mergeRefs } from '../../utils/refs';\nimport Button from '../Button';\nimport Checkbox from '../Checkbox';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport PlusSmall from '../Icons/PlusSmall';\nimport Label from '../Label';\nimport LazyIcon from '../LazyIcon';\nimport { SingleSelect } from './SingleSelect/SingleSelect';\n\nimport styles from './styles.module.scss';\n\ntype DropdownVariants = 'fill' | 'transparent' | 'borderless';\n\nexport interface DropdownProps {\n  /** Text on the trigger button that opens the dropdown */\n  triggerText: string;\n  /** Sets the dropdown content */\n  children: React.ReactNode;\n  /** Minimum width for the dropdown in pixels. Does not affect trigger button. */\n  dropdownMinWidth?: number;\n  /** Minimum width for the trigger in pixels. Does not apply for borderless variant */\n  triggerMinWidth?: number;\n  /** Disables rendring of the close button in the list */\n  noCloseButton?: boolean;\n  /** Called when dropdown is open/closed */\n  onToggle?: (isOpen: boolean) => void;\n  /** Whether the dropdown is open or not */\n  open?: boolean;\n  /** Makes the dropdown disabled */\n  disabled?: boolean;\n  /** Sets the data-testid attribute on the dropdown button */\n  testId?: string;\n  /** Overrides the default z-index of the DropDownContent */\n  zIndex?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemDropdown>;\n  /** Adds an icon to the trigger */\n  svgIcon?: SvgIcon | IconName;\n  /** Sets the visual variant of the Dropdown */\n  variant?: DropdownVariants;\n}\n\nexport const DropdownBase: React.FC<DropdownProps> = props => {\n  const {\n    triggerText,\n    noCloseButton = false,\n    onToggle,\n    dropdownMinWidth,\n    triggerMinWidth,\n    open = false,\n    children,\n    testId,\n    disabled,\n    zIndex = ZIndex.PopOver,\n    resources,\n    svgIcon,\n    variant = 'fill',\n  } = props;\n\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const optionsRef = useRef<HTMLUListElement>(null);\n  const childrenRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const { isHovered } = usePseudoClasses<HTMLButtonElement | null>(buttonRef);\n  const openedByKeyboard = useRef<boolean>(false);\n  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n  const isMobile = useIsMobileBreakpoint();\n  const triggerActualMinWidth = variant !== 'borderless' && typeof triggerMinWidth != 'undefined' ? `${triggerMinWidth}px` : 'auto';\n  const triggerMinWidthLimit = isMobile ? 96 : 112;\n  const dropdownFloatingPadding = 15;\n  const maxWidth = isMobile ? 384 : 400;\n  const maxHeight = isMobile ? 384 : 464;\n  const toggleTextId = useId();\n  const optionIdPrefix = useId();\n  const contentId = useId();\n  const leftIconProps = {\n    className: styles['dropdown__left-icon'],\n    size: IconSize.XSmall,\n    isHovered: !disabled && isHovered,\n  };\n\n  const isSingleSelect = React.Children.toArray(children).every(\n    child => React.isValidElement(child) && isComponent<SingleSelectItemProps>(child, SingleSelectItem)\n  );\n  const isMultiSelect = React.Children.toArray(children).every(\n    child => React.isValidElement(child) && isComponent<CheckboxProps>(child, Checkbox)\n  );\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const mergedResources: HNDesignsystemDropdown = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const toggleClasses = classNames(styles.dropdown__toggle, {\n    [styles['dropdown__toggle--open']]: isOpen && !disabled,\n    [styles['dropdown__toggle--with-icon']]: typeof svgIcon !== 'undefined',\n    [styles['dropdown__toggle--transparent']]: variant === 'transparent',\n    [styles['dropdown__toggle--borderless']]: variant === 'borderless',\n  });\n  const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n  const listItemClasses = classNames(styles['dropdown__list-item'], { [styles['dropdown__list-item--single-select']]: isSingleSelect });\n\n  const { refs, floatingStyles } = useFloating({\n    strategy: 'fixed',\n    placement: 'bottom-start',\n    middleware: [\n      offset(8),\n      // Hvis det ikke er plass på høyre side flipper vi dropdownlisten fra bottom-start til bottom-end\n      flip({ mainAxis: false, fallbackPlacements: ['bottom-end'], padding: dropdownFloatingPadding }),\n      // Shift fungerer som en fallback for flip og unngår at availableWidth ikke oppdaterer seg ved skjermbreddeendring\n      shift({ padding: dropdownFloatingPadding }),\n      // Hvis det ikke er plass på noen av sidene krymper vi bredden på listen med size\n      size({\n        padding: dropdownFloatingPadding,\n        apply({ availableWidth, availableHeight, elements, rects }) {\n          const triggerW = rects.reference.width;\n          const minProp = typeof dropdownMinWidth !== 'undefined' ? clamp(0, maxWidth, dropdownMinWidth) : 0;\n          const targetW = Math.max(triggerW, minProp);\n\n          Object.assign(elements.floating.style, {\n            maxWidth: `${Math.min(targetW, availableWidth)}px`,\n            maxHeight: `${Math.min(maxHeight, availableHeight)}px`,\n            overflowY: 'auto',\n            overflowX: 'hidden',\n          });\n        },\n      }),\n    ],\n    whileElementsMounted: isOpen ? autoUpdate : undefined,\n  });\n\n  const handleOpen = (isKeyboard: boolean): void => {\n    openedByKeyboard.current = isKeyboard;\n    toggleIsOpen();\n  };\n\n  const handleClose = (): void => {\n    if (!isOpen) return;\n\n    toggleIsOpen();\n    buttonRef.current?.focus();\n  };\n\n  useEffect(() => {\n    if (isOpen && openedByKeyboard.current) {\n      const firstEnabled = childrenRefList.current?.find(r => r.current && !r.current.hasAttribute('disabled'));\n      firstEnabled?.current?.focus();\n      openedByKeyboard.current = false;\n    }\n  }, [isOpen]);\n\n  const focusByIndex = (nextIndex: number): void => {\n    childrenRefList.current?.[nextIndex]?.current?.focus();\n  };\n\n  const isListNavKey = (key: string): boolean =>\n    key === KeyboardEventKey.ArrowDown || key === KeyboardEventKey.ArrowUp || key === KeyboardEventKey.Home || key === KeyboardEventKey.End;\n\n  const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n    if (!childrenRefList.current) return;\n\n    const key = event.key as KeyboardEventKey;\n\n    if (key === KeyboardEventKey.Escape) {\n      if (isOpen) {\n        event.preventDefault();\n        handleClose();\n      }\n      return;\n    }\n\n    if (!isOpen) {\n      if (isListNavKey(key)) {\n        event.preventDefault();\n        handleOpen(true);\n      }\n      return;\n    }\n\n    if (!isListNavKey(key)) {\n      return;\n    }\n\n    const index = childrenRefList.current.findIndex(x => x.current === (event.target as HTMLElement));\n    let nextIndex = index;\n\n    if (key === KeyboardEventKey.Home) {\n      nextIndex = 0;\n    } else if (key === KeyboardEventKey.End) {\n      nextIndex = childrenRefList.current.length - 1;\n    } else if (key === KeyboardEventKey.ArrowDown && index < childrenRefList.current.length - 1) {\n      nextIndex = index + 1;\n    } else if (key === KeyboardEventKey.ArrowUp && index > 0) {\n      nextIndex = index - 1;\n    }\n\n    if (nextIndex !== -1) {\n      event.preventDefault();\n      focusByIndex(nextIndex);\n    }\n  };\n\n  useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n    KeyboardEventKey.ArrowDown,\n    KeyboardEventKey.ArrowUp,\n    KeyboardEventKey.End,\n    KeyboardEventKey.Enter,\n    KeyboardEventKey.Escape,\n    KeyboardEventKey.Home,\n    KeyboardEventKey.Space,\n  ]);\n\n  useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n  const renderChildren = React.Children.map(children, (child, index) => {\n    const element = child as React.ReactElement<{ ref?: React.Ref<HTMLElement | null> }>;\n\n    return (\n      <li className={listItemClasses} id={`${optionIdPrefix}-${index}`}>\n        {React.isValidElement(element) && childrenRefList.current && childrenRefList.current[index]\n          ? ((): React.ReactElement => {\n              if (isMultiSelect && isComponent<CheckboxProps>(element, Checkbox)) {\n                const label = element.props.label;\n                if (React.isValidElement(label) && isComponent<LabelProps>(label, Label)) {\n                  return React.cloneElement(element, {\n                    ref: mergeRefs([element.props.ref, childrenRefList.current[index]]),\n                    label: React.cloneElement(label, {\n                      labelClassName: classNames((label.props as LabelProps)?.labelClassName, styles['dropdown__multiselect-item']),\n                    }),\n                  });\n                }\n              }\n\n              return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {\n                ref: mergeRefs([element.props.ref, childrenRefList.current[index]]),\n              });\n            })()\n          : child}\n      </li>\n    );\n  });\n\n  return (\n    <div className={styles.dropdown} ref={dropdownRef}>\n      <button\n        type=\"button\"\n        onClick={(): false | void => handleOpen(false)}\n        className={toggleClasses}\n        ref={mergeRefs([buttonRef, refs.setReference])}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Dropdown}\n        disabled={disabled}\n        aria-labelledby={toggleTextId}\n        aria-haspopup={true}\n        aria-controls={contentId}\n        aria-expanded={isOpen}\n        style={{\n          width: triggerActualMinWidth,\n          maxWidth: '100%',\n          minWidth: `${triggerMinWidthLimit}px`,\n        }}\n      >\n        {svgIcon && (\n          <>\n            {typeof svgIcon === 'string' ? (\n              <LazyIcon {...leftIconProps} iconName={svgIcon} />\n            ) : (\n              <Icon {...leftIconProps} svgIcon={svgIcon} />\n            )}\n          </>\n        )}\n        <span id={toggleTextId} className={styles.dropdown__toggle__text}>\n          {triggerText}\n        </span>\n        <Icon\n          svgIcon={!isSingleSelect ? PlusSmall : isOpen ? ChevronUp : ChevronDown}\n          className={styles['dropdown__right-icon']}\n          isHovered={!disabled && isHovered}\n          size={IconSize.XSmall}\n        />\n      </button>\n      <div\n        key={dropdownMinWidth ?? 'auto'}\n        id={contentId}\n        className={contentClasses}\n        ref={refs.setFloating}\n        style={{\n          ...floatingStyles,\n          zIndex: zIndex,\n        }}\n      >\n        <ul className={styles.dropdown__options} role=\"group\" aria-labelledby={toggleTextId} tabIndex={-1} ref={optionsRef}>\n          {isSingleSelect && <SingleSelect onValueChange={() => handleClose()}>{renderChildren}</SingleSelect>}\n          {isMultiSelect && renderChildren}\n        </ul>\n        {!isSingleSelect && !noCloseButton && (\n          <div className={styles.dropdown__close}>\n            <Button onClick={handleClose}>{mergedResources.closeText}</Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport interface DropdownCompound extends React.FC<DropdownProps> {\n  SingleSelectItem: ComponentType<SingleSelectItemProps>;\n}\nconst Dropdown = DropdownBase as DropdownCompound;\nDropdown.SingleSelectItem = SingleSelectItem;\nDropdownBase.displayName = 'Dropdown';\n\nexport default Dropdown;\n","import Dropdown from './Dropdown';\nexport * from './Dropdown';\nexport default Dropdown;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["SingleSelect: React.FC<SingleSelectProps>","DropdownBase: React.FC<DropdownProps>","mergedResources: HNDesignsystemDropdown"],"sources":["../../../src/components/Dropdown/resourceHelper.ts","../../../src/components/Dropdown/SingleSelect/SingleSelect.tsx","../../../src/components/Dropdown/Dropdown.tsx","../../../src/components/Dropdown/index.ts"],"sourcesContent":["import type { HNDesignsystemDropdown } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Dropdown.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Dropdown.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDropdown => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React from 'react';\n\nimport { SingleSelectContext } from './utils';\n\nexport type SingleSelectContextType = {\n  name?: string;\n  disabled?: boolean;\n  required?: boolean;\n  value?: string;\n  onValueChange?: (newValue: string, e?: React.SyntheticEvent) => void;\n};\n\nexport interface SingleSelectProps {\n  name?: string;\n  disabled?: boolean;\n  defaultValue?: string;\n  onValueChange?: (newValue: string, e?: React.SyntheticEvent) => void;\n  children: React.ReactNode;\n}\n\nexport const SingleSelect: React.FC<SingleSelectProps> = ({ name, disabled, defaultValue, onValueChange, children }) => {\n  const [selected, setSelected] = React.useState<string | undefined>(defaultValue);\n\n  const context = React.useMemo<SingleSelectContextType>(\n    () => ({\n      name,\n      disabled,\n      value: selected,\n      onValueChange: (v, e): void => {\n        setSelected(v);\n        onValueChange?.(v, e);\n      },\n    }),\n    [name, disabled, selected, onValueChange]\n  );\n\n  return <SingleSelectContext.Provider value={context}>{children}</SingleSelectContext.Provider>;\n};\n","import type { ComponentType } from 'react';\nimport React, { useEffect, useRef, useId } from 'react';\n\nimport { autoUpdate, offset, shift, size, useFloating, flip } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { clamp } from 'motion/react';\n\nimport type { SingleSelectItemProps } from './SingleSelect/SingleSelectItem';\nimport type { HNDesignsystemDropdown } from '../../resources/Resources';\nimport type { CheckboxProps } from '../Checkbox';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\nimport type { LabelProps } from '../Label';\n\nimport {\n  AnalyticsId,\n  IconSize,\n  KeyboardEventKey,\n  LanguageLocales,\n  ZIndex,\n  usePseudoClasses,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useToggle,\n} from '../..';\nimport { getResources } from './resourceHelper';\nimport { SingleSelectItem } from './SingleSelect/SingleSelectItem';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { isComponent } from '../../utils/component';\nimport { mergeRefs } from '../../utils/refs';\nimport Button from '../Button';\nimport Checkbox from '../Checkbox';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport PlusSmall from '../Icons/PlusSmall';\nimport Label from '../Label';\nimport LazyIcon from '../LazyIcon';\nimport { SingleSelect } from './SingleSelect/SingleSelect';\n\nimport styles from './styles.module.scss';\n\ntype DropdownVariants = 'fill' | 'transparent' | 'borderless';\n\nexport interface DropdownProps {\n  /** Text on the trigger button that opens the dropdown */\n  triggerText: string;\n  /** Sets the dropdown content */\n  children: React.ReactNode;\n  /** Minimum width for the dropdown in pixels. Does not affect trigger button. */\n  dropdownMinWidth?: number;\n  /** Minimum width for the trigger in pixels. Does not apply for borderless variant */\n  triggerMinWidth?: number;\n  /** Disables rendring of the close button in the list */\n  noCloseButton?: boolean;\n  /** Called when dropdown is open/closed */\n  onToggle?: (isOpen: boolean) => void;\n  /** Whether the dropdown is open or not */\n  open?: boolean;\n  /** Makes the dropdown disabled */\n  disabled?: boolean;\n  /** Sets the data-testid attribute on the dropdown button */\n  testId?: string;\n  /** Overrides the default z-index of the DropDownContent */\n  zIndex?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemDropdown>;\n  /** Adds an icon to the trigger */\n  svgIcon?: SvgIcon | IconName;\n  /** Sets the visual variant of the Dropdown */\n  variant?: DropdownVariants;\n}\n\nexport const DropdownBase: React.FC<DropdownProps> = props => {\n  const {\n    triggerText,\n    noCloseButton = false,\n    onToggle,\n    dropdownMinWidth,\n    triggerMinWidth,\n    open = false,\n    children,\n    testId,\n    disabled,\n    zIndex = ZIndex.PopOver,\n    resources,\n    svgIcon,\n    variant = 'fill',\n  } = props;\n\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const optionsRef = useRef<HTMLUListElement>(null);\n  const childrenRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const { isHovered } = usePseudoClasses<HTMLButtonElement | null>(buttonRef);\n  const openedByKeyboard = useRef<boolean>(false);\n  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n  const isMobile = useIsMobileBreakpoint();\n  const triggerActualMinWidth = variant !== 'borderless' && typeof triggerMinWidth != 'undefined' ? `${triggerMinWidth}px` : 'auto';\n  const triggerMinWidthLimit = isMobile ? 96 : 112;\n  const dropdownFloatingPadding = 15;\n  const maxWidth = isMobile ? 384 : 400;\n  const maxHeight = isMobile ? 384 : 464;\n  const toggleTextId = useId();\n  const optionIdPrefix = useId();\n  const contentId = useId();\n  const leftIconProps = {\n    className: styles['dropdown__left-icon'],\n    size: IconSize.XSmall,\n    isHovered: !disabled && isHovered,\n  };\n\n  const isSingleSelect = React.Children.toArray(children).every(\n    child => React.isValidElement(child) && isComponent<SingleSelectItemProps>(child, SingleSelectItem)\n  );\n  const isMultiSelect = React.Children.toArray(children).every(\n    child => React.isValidElement(child) && isComponent<CheckboxProps>(child, Checkbox)\n  );\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const mergedResources: HNDesignsystemDropdown = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const toggleClasses = classNames(styles.dropdown__toggle, {\n    [styles['dropdown__toggle--open']]: isOpen && !disabled,\n    [styles['dropdown__toggle--with-icon']]: typeof svgIcon !== 'undefined',\n    [styles['dropdown__toggle--transparent']]: variant === 'transparent',\n    [styles['dropdown__toggle--borderless']]: variant === 'borderless',\n  });\n  const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n  const listItemClasses = classNames(styles['dropdown__list-item'], { [styles['dropdown__list-item--single-select']]: isSingleSelect });\n\n  const { refs, floatingStyles } = useFloating({\n    strategy: 'fixed',\n    placement: 'bottom-start',\n    middleware: [\n      offset(8),\n      // Hvis det ikke er plass på høyre side flipper vi dropdownlisten fra bottom-start til bottom-end\n      flip({ mainAxis: false, fallbackPlacements: ['bottom-end'], padding: dropdownFloatingPadding }),\n      // Shift fungerer som en fallback for flip og unngår at availableWidth ikke oppdaterer seg ved skjermbreddeendring\n      shift({ padding: dropdownFloatingPadding }),\n      // Hvis det ikke er plass på noen av sidene krymper vi bredden på listen med size\n      size({\n        padding: dropdownFloatingPadding,\n        apply({ availableWidth, availableHeight, elements, rects }) {\n          const triggerW = rects.reference.width;\n          const minProp = typeof dropdownMinWidth !== 'undefined' ? clamp(0, maxWidth, dropdownMinWidth) : 0;\n          const targetW = Math.max(triggerW, minProp);\n\n          Object.assign(elements.floating.style, {\n            maxWidth: `${Math.min(targetW, availableWidth)}px`,\n            maxHeight: `${Math.min(maxHeight, availableHeight)}px`,\n            overflowY: 'auto',\n            overflowX: 'hidden',\n          });\n        },\n      }),\n    ],\n    whileElementsMounted: isOpen ? autoUpdate : undefined,\n  });\n\n  const handleOpen = (isKeyboard: boolean): void => {\n    openedByKeyboard.current = isKeyboard;\n    toggleIsOpen();\n  };\n\n  const handleClose = (): void => {\n    if (!isOpen) return;\n\n    toggleIsOpen();\n    buttonRef.current?.focus();\n  };\n\n  useEffect(() => {\n    if (isOpen && openedByKeyboard.current) {\n      const firstEnabled = childrenRefList.current?.find(r => r.current && !r.current.hasAttribute('disabled'));\n      firstEnabled?.current?.focus();\n      openedByKeyboard.current = false;\n    }\n  }, [isOpen]);\n\n  const focusByIndex = (nextIndex: number): void => {\n    childrenRefList.current?.[nextIndex]?.current?.focus();\n  };\n\n  const isListNavKey = (key: string): boolean =>\n    key === KeyboardEventKey.ArrowDown || key === KeyboardEventKey.ArrowUp || key === KeyboardEventKey.Home || key === KeyboardEventKey.End;\n\n  const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n    if (!childrenRefList.current) return;\n\n    const key = event.key as KeyboardEventKey;\n\n    if (key === KeyboardEventKey.Escape) {\n      if (isOpen) {\n        event.preventDefault();\n        handleClose();\n      }\n      return;\n    }\n\n    if (!isOpen) {\n      if (isListNavKey(key)) {\n        event.preventDefault();\n        handleOpen(true);\n      }\n      return;\n    }\n\n    if (!isListNavKey(key)) {\n      return;\n    }\n\n    const index = childrenRefList.current.findIndex(x => x.current === (event.target as HTMLElement));\n    let nextIndex = index;\n\n    if (key === KeyboardEventKey.Home) {\n      nextIndex = 0;\n    } else if (key === KeyboardEventKey.End) {\n      nextIndex = childrenRefList.current.length - 1;\n    } else if (key === KeyboardEventKey.ArrowDown && index < childrenRefList.current.length - 1) {\n      nextIndex = index + 1;\n    } else if (key === KeyboardEventKey.ArrowUp && index > 0) {\n      nextIndex = index - 1;\n    }\n\n    if (nextIndex !== -1) {\n      event.preventDefault();\n      focusByIndex(nextIndex);\n    }\n  };\n\n  useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n    KeyboardEventKey.ArrowDown,\n    KeyboardEventKey.ArrowUp,\n    KeyboardEventKey.End,\n    KeyboardEventKey.Enter,\n    KeyboardEventKey.Escape,\n    KeyboardEventKey.Home,\n    KeyboardEventKey.Space,\n  ]);\n\n  useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n  const renderChildren = React.Children.map(children, (child, index) => {\n    const element = child as React.ReactElement<{ ref?: React.Ref<HTMLElement | null> }>;\n\n    return (\n      <li className={listItemClasses} id={`${optionIdPrefix}-${index}`}>\n        {React.isValidElement(element) && childrenRefList.current && childrenRefList.current[index]\n          ? ((): React.ReactElement => {\n              if (isMultiSelect && isComponent<CheckboxProps>(element, Checkbox)) {\n                const label = element.props.label;\n                if (React.isValidElement(label) && isComponent<LabelProps>(label, Label)) {\n                  return React.cloneElement(element, {\n                    ref: mergeRefs([element.props.ref, childrenRefList.current[index]]),\n                    label: React.cloneElement(label, {\n                      labelClassName: classNames((label.props as LabelProps)?.labelClassName, styles['dropdown__multiselect-item']),\n                    }),\n                  });\n                }\n              }\n\n              return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {\n                ref: mergeRefs([element.props.ref, childrenRefList.current[index]]),\n              });\n            })()\n          : child}\n      </li>\n    );\n  });\n\n  return (\n    <div className={styles.dropdown} ref={dropdownRef}>\n      <button\n        type=\"button\"\n        onClick={(): false | void => handleOpen(false)}\n        className={toggleClasses}\n        ref={mergeRefs([buttonRef, refs.setReference])}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Dropdown}\n        disabled={disabled}\n        aria-labelledby={toggleTextId}\n        aria-haspopup={true}\n        aria-controls={contentId}\n        aria-expanded={isOpen}\n        style={{\n          width: triggerActualMinWidth,\n          maxWidth: '100%',\n          minWidth: `${triggerMinWidthLimit}px`,\n        }}\n      >\n        {svgIcon && (\n          <>\n            {typeof svgIcon === 'string' ? (\n              <LazyIcon {...leftIconProps} iconName={svgIcon} />\n            ) : (\n              <Icon {...leftIconProps} svgIcon={svgIcon} />\n            )}\n          </>\n        )}\n        <span id={toggleTextId} className={styles.dropdown__toggle__text}>\n          {triggerText}\n        </span>\n        <Icon\n          svgIcon={!isSingleSelect ? PlusSmall : isOpen ? ChevronUp : ChevronDown}\n          className={styles['dropdown__right-icon']}\n          isHovered={!disabled && isHovered}\n          size={IconSize.XSmall}\n        />\n      </button>\n      <div\n        key={dropdownMinWidth ?? 'auto'}\n        id={contentId}\n        className={contentClasses}\n        ref={refs.setFloating}\n        style={{\n          ...floatingStyles,\n          zIndex: zIndex,\n        }}\n      >\n        <ul className={styles.dropdown__options} role=\"group\" aria-labelledby={toggleTextId} tabIndex={-1} ref={optionsRef}>\n          {isSingleSelect && <SingleSelect onValueChange={() => handleClose()}>{renderChildren}</SingleSelect>}\n          {isMultiSelect && renderChildren}\n        </ul>\n        {!isSingleSelect && !noCloseButton && (\n          <div className={styles.dropdown__close}>\n            <Button onClick={handleClose}>{mergedResources.closeText}</Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport interface DropdownCompound extends React.FC<DropdownProps> {\n  SingleSelectItem: ComponentType<SingleSelectItemProps>;\n}\nconst Dropdown = DropdownBase as DropdownCompound;\nDropdown.SingleSelectItem = SingleSelectItem;\nDropdownBase.displayName = 'Dropdown';\n\nexport default Dropdown;\n","import Dropdown from './Dropdown';\nexport * from './Dropdown';\nexport default Dropdown;\n"],"mappings":"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"}

package/lib/components/DropdownOld/index.js

@@ -10,7 +10,7 @@ import { t as useKeyboardEvent } from "../../useKeyboardEvent.js";
 import { t as useOutsideEvent } from "../../useOutsideEvent.js";
 import { n as HN_Designsystem_Dropdown_en_GB_default, t as HN_Designsystem_Dropdown_nb_NO_default } from "../../HN.Designsystem.Dropdown.nb-NO.js";
 import { t as PlusSmall_default } from "../../PlusSmall.js";
-import cn from "classnames";
+import classNames from "classnames";
 import React, { useEffect, useId, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
@@ -94,7 +94,7 @@ var DropdownOld = (props) => {
 		KeyboardEventKey.Space
 	]);
 	useOutsideEvent(dropdownRef, () => isOpen && handleClose());
-	const toggleClasses = cn(styles.dropdown__toggle, !disabled && {
+	const toggleClasses = classNames(styles.dropdown__toggle, !disabled && {
 		[styles["dropdown__toggle--on-white"]]: onColor === DropdownOldOnColor.onwhite,
 		[styles["dropdown__toggle--on-grey"]]: onColor === DropdownOldOnColor.ongrey,
 		[styles["dropdown__toggle--on-blueberry"]]: onColor === DropdownOldOnColor.onblueberry,
@@ -103,7 +103,7 @@ var DropdownOld = (props) => {
 		[styles["dropdown__toggle--fluid"]]: fluid,
 		[styles["dropdown__toggle--open"]]: isOpen
 	});
-	const contentClasses = cn(styles.dropdown__content, isOpen && styles["dropdown__content--open"]);
+	const contentClasses = classNames(styles.dropdown__content, isOpen && styles["dropdown__content--open"]);
 	const renderChildren = React.Children.map(children, (child, index) => {
 		const element = child;
 		return /* @__PURE__ */ jsx("li", {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["DropdownOld: React.FC<DropdownOldProps>","mergedResources: HNDesignsystemDropdown"],"sources":["../../../src/components/DropdownOld/constants.ts","../../../src/components/DropdownOld/resourceHelper.ts","../../../src/components/DropdownOld/DropdownOld.tsx","../../../src/components/DropdownOld/index.ts"],"sourcesContent":["export enum DropdownOldOnColor {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  oncherry = 'oncherry',\n}\n","import type { HNDesignsystemDropdown } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Dropdown.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Dropdown.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDropdown => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useEffect, useRef, useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemDropdown } from '../../resources/Resources';\n\nimport { DropdownOldOnColor } from './constants';\nimport {\n  AnalyticsId,\n  IconSize,\n  KeyboardEventKey,\n  LanguageLocales,\n  ZIndex,\n  theme,\n  usePseudoClasses,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useToggle,\n} from '../..';\nimport { getResources } from './resourceHelper';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { mergeRefs } from '../../utils/refs';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport PlusSmall from '../Icons/PlusSmall';\n\nimport styles from './styles.module.scss';\n\nexport interface DropdownOldProps {\n  /** Label for dropdown. Visible for screen readers  */\n  label: string;\n  /** Text on the trigger button that opens the dropdown */\n  placeholder: string;\n  /** Sets the dropdown content */\n  children: React.ReactNode;\n  /** @deprecated Close button text */\n  closeText?: string;\n  /** Minimum width for the dropdown in pixels. Does not affect trigger button */\n  dropdownMinWidth?: number;\n  /** No close button */\n  noCloseButton?: boolean;\n  /** Called when dropdown is open/closed */\n  onToggle?: (isOpen: boolean) => void;\n  /** Whether the dropdown is open or not */\n  open?: boolean;\n  /** Changes the visuals of the dropdown */\n  onColor?: keyof typeof DropdownOldOnColor;\n  /** Makes the background of the trigger transparent */\n  transparent?: boolean;\n  /** Makes the width of the full component adjust to its parent */\n  fluid?: boolean;\n  /** Makes the dropdown disabled */\n  disabled?: boolean;\n  /** Sets the data-testid attribute on the dropdown button */\n  testId?: string;\n  /** Overrides the default z-index of the DropDownContent */\n  zIndex?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemDropdown>;\n}\n\nconst DropdownOld: React.FC<DropdownOldProps> = props => {\n  const {\n    label,\n    placeholder,\n    noCloseButton = false,\n    onToggle,\n    dropdownMinWidth,\n    open = false,\n    children,\n    onColor = DropdownOldOnColor.onwhite,\n    transparent = false,\n    fluid = false,\n    testId,\n    disabled,\n    zIndex = ZIndex.PopOver,\n    resources,\n  } = props;\n\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const optionsRef = useRef<HTMLUListElement>(null);\n  const { refObject: buttonRef, isHovered } = usePseudoClasses<HTMLButtonElement>();\n  const openedByKeyboard = useRef<boolean>(false);\n  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n  const inputRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n  const labelId = useId();\n  const toggleLabelId = useId();\n  const optionIdPrefix = useId();\n  const contentId = useId();\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemDropdown = {\n    ...defaultResources,\n    ...resources,\n    closeText: props.closeText ?? resources?.closeText ?? defaultResources.closeText,\n  };\n\n  const handleOpen = (isKeyboard: boolean): void => {\n    openedByKeyboard.current = isKeyboard;\n    toggleIsOpen();\n  };\n\n  const handleClose = (): void => {\n    toggleIsOpen();\n    buttonRef.current?.focus();\n  };\n\n  useEffect(() => {\n    if (isOpen && openedByKeyboard.current) {\n      const firstEnabled = inputRefList.current?.find(r => r.current && !r.current.hasAttribute('disabled'));\n      firstEnabled?.current?.focus();\n      openedByKeyboard.current = false;\n    }\n  }, [isOpen]);\n\n  const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n    if (!inputRefList.current) {\n      return;\n    }\n\n    if (event.key === KeyboardEventKey.Escape) {\n      if (isOpen) handleClose();\n      return;\n    }\n\n    if (!isOpen) {\n      handleOpen(true);\n      event.preventDefault();\n      return;\n    }\n\n    const index = inputRefList.current.findIndex(x => x.current === event.target);\n    let nextIndex = index;\n\n    if (event.key === KeyboardEventKey.Home) {\n      nextIndex = 0;\n    } else if (event.key === KeyboardEventKey.End) {\n      nextIndex = inputRefList.current.length - 1;\n    } else if (event.key === KeyboardEventKey.ArrowDown && index < inputRefList.current.length - 1) {\n      nextIndex = index + 1;\n    } else if (event.key === KeyboardEventKey.ArrowUp && index > 0) {\n      nextIndex = index - 1;\n    } else if (event.key === KeyboardEventKey.Enter && index !== -1) {\n      nextIndex = index;\n    }\n\n    if (nextIndex !== -1 && event.key !== KeyboardEventKey.Space) {\n      event.preventDefault();\n\n      inputRefList.current[nextIndex].current?.focus();\n    }\n  };\n\n  useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n    KeyboardEventKey.ArrowDown,\n    KeyboardEventKey.ArrowUp,\n    KeyboardEventKey.End,\n    KeyboardEventKey.Enter,\n    KeyboardEventKey.Escape,\n    KeyboardEventKey.Home,\n    KeyboardEventKey.Space,\n  ]);\n\n  useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n  const toggleClasses = classNames(\n    styles.dropdown__toggle,\n    !disabled && {\n      [styles['dropdown__toggle--on-white']]: onColor === DropdownOldOnColor.onwhite,\n      [styles['dropdown__toggle--on-grey']]: onColor === DropdownOldOnColor.ongrey,\n      [styles['dropdown__toggle--on-blueberry']]: onColor === DropdownOldOnColor.onblueberry,\n      [styles['dropdown__toggle--on-cherry']]: onColor === DropdownOldOnColor.oncherry,\n      [styles['dropdown__toggle--transparent']]: transparent,\n      [styles['dropdown__toggle--fluid']]: fluid,\n      [styles['dropdown__toggle--open']]: isOpen,\n    }\n  );\n\n  const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n\n  const renderChildren = React.Children.map(children, (child, index) => {\n    const element = child as React.ReactElement<{ children?: React.ReactNode; ref?: React.Ref<HTMLElement | null> }>;\n\n    return (\n      <li className={styles.dropdown__input} id={`${optionIdPrefix}-${index}`}>\n        {React.isValidElement(element) && inputRefList.current && inputRefList.current[index]\n          ? React.cloneElement(element, {\n              ref: mergeRefs([element.props.ref, inputRefList.current[index]]),\n            })\n          : child}\n      </li>\n    );\n  });\n\n  return (\n    <div className={styles.dropdown} ref={dropdownRef}>\n      <span id={labelId} className={styles.dropdown__label}>\n        {label}\n      </span>\n      <button\n        type=\"button\"\n        onClick={(): false | void => handleOpen(false)}\n        className={toggleClasses}\n        ref={buttonRef}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Dropdown}\n        disabled={disabled}\n        aria-labelledby={toggleLabelId}\n        aria-haspopup={true}\n        aria-controls={contentId}\n        aria-expanded={isOpen}\n      >\n        <span id={toggleLabelId} className={styles.dropdown__toggle__label}>\n          {placeholder}\n        </span>\n        <Icon\n          color={disabled ? theme.palette.neutral700 : theme.palette.blueberry600}\n          svgIcon={PlusSmall}\n          className={styles.dropdown__icon}\n          isHovered={!disabled && isHovered}\n          size={IconSize.XSmall}\n        />\n      </button>\n      <div\n        id={contentId}\n        className={contentClasses}\n        style={{ width: fluid ? '100%' : `auto`, minWidth: dropdownMinWidth ?? 'auto', zIndex: zIndex }}\n      >\n        <ul className={styles.dropdown__options} role=\"group\" aria-labelledby={labelId} tabIndex={-1} ref={optionsRef}>\n          {renderChildren}\n        </ul>\n        {!noCloseButton && (\n          <div className={styles.dropdown__close}>\n            <Button onClick={handleClose}>{mergedResources.closeText}</Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default DropdownOld;\n","import DropdownOld from './DropdownOld';\nexport { DropdownOldOnColor } from './constants';\nexport * from './DropdownOld';\nexport default DropdownOld;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["DropdownOld: React.FC<DropdownOldProps>","mergedResources: HNDesignsystemDropdown"],"sources":["../../../src/components/DropdownOld/constants.ts","../../../src/components/DropdownOld/resourceHelper.ts","../../../src/components/DropdownOld/DropdownOld.tsx","../../../src/components/DropdownOld/index.ts"],"sourcesContent":["export enum DropdownOldOnColor {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  oncherry = 'oncherry',\n}\n","import type { HNDesignsystemDropdown } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Dropdown.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Dropdown.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDropdown => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useEffect, useRef, useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemDropdown } from '../../resources/Resources';\n\nimport { DropdownOldOnColor } from './constants';\nimport {\n  AnalyticsId,\n  IconSize,\n  KeyboardEventKey,\n  LanguageLocales,\n  ZIndex,\n  theme,\n  usePseudoClasses,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useToggle,\n} from '../..';\nimport { getResources } from './resourceHelper';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { mergeRefs } from '../../utils/refs';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport PlusSmall from '../Icons/PlusSmall';\n\nimport styles from './styles.module.scss';\n\nexport interface DropdownOldProps {\n  /** Label for dropdown. Visible for screen readers  */\n  label: string;\n  /** Text on the trigger button that opens the dropdown */\n  placeholder: string;\n  /** Sets the dropdown content */\n  children: React.ReactNode;\n  /** @deprecated Close button text */\n  closeText?: string;\n  /** Minimum width for the dropdown in pixels. Does not affect trigger button */\n  dropdownMinWidth?: number;\n  /** No close button */\n  noCloseButton?: boolean;\n  /** Called when dropdown is open/closed */\n  onToggle?: (isOpen: boolean) => void;\n  /** Whether the dropdown is open or not */\n  open?: boolean;\n  /** Changes the visuals of the dropdown */\n  onColor?: keyof typeof DropdownOldOnColor;\n  /** Makes the background of the trigger transparent */\n  transparent?: boolean;\n  /** Makes the width of the full component adjust to its parent */\n  fluid?: boolean;\n  /** Makes the dropdown disabled */\n  disabled?: boolean;\n  /** Sets the data-testid attribute on the dropdown button */\n  testId?: string;\n  /** Overrides the default z-index of the DropDownContent */\n  zIndex?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemDropdown>;\n}\n\nconst DropdownOld: React.FC<DropdownOldProps> = props => {\n  const {\n    label,\n    placeholder,\n    noCloseButton = false,\n    onToggle,\n    dropdownMinWidth,\n    open = false,\n    children,\n    onColor = DropdownOldOnColor.onwhite,\n    transparent = false,\n    fluid = false,\n    testId,\n    disabled,\n    zIndex = ZIndex.PopOver,\n    resources,\n  } = props;\n\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const optionsRef = useRef<HTMLUListElement>(null);\n  const { refObject: buttonRef, isHovered } = usePseudoClasses<HTMLButtonElement>();\n  const openedByKeyboard = useRef<boolean>(false);\n  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n  const inputRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n  const labelId = useId();\n  const toggleLabelId = useId();\n  const optionIdPrefix = useId();\n  const contentId = useId();\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemDropdown = {\n    ...defaultResources,\n    ...resources,\n    closeText: props.closeText ?? resources?.closeText ?? defaultResources.closeText,\n  };\n\n  const handleOpen = (isKeyboard: boolean): void => {\n    openedByKeyboard.current = isKeyboard;\n    toggleIsOpen();\n  };\n\n  const handleClose = (): void => {\n    toggleIsOpen();\n    buttonRef.current?.focus();\n  };\n\n  useEffect(() => {\n    if (isOpen && openedByKeyboard.current) {\n      const firstEnabled = inputRefList.current?.find(r => r.current && !r.current.hasAttribute('disabled'));\n      firstEnabled?.current?.focus();\n      openedByKeyboard.current = false;\n    }\n  }, [isOpen]);\n\n  const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n    if (!inputRefList.current) {\n      return;\n    }\n\n    if (event.key === KeyboardEventKey.Escape) {\n      if (isOpen) handleClose();\n      return;\n    }\n\n    if (!isOpen) {\n      handleOpen(true);\n      event.preventDefault();\n      return;\n    }\n\n    const index = inputRefList.current.findIndex(x => x.current === event.target);\n    let nextIndex = index;\n\n    if (event.key === KeyboardEventKey.Home) {\n      nextIndex = 0;\n    } else if (event.key === KeyboardEventKey.End) {\n      nextIndex = inputRefList.current.length - 1;\n    } else if (event.key === KeyboardEventKey.ArrowDown && index < inputRefList.current.length - 1) {\n      nextIndex = index + 1;\n    } else if (event.key === KeyboardEventKey.ArrowUp && index > 0) {\n      nextIndex = index - 1;\n    } else if (event.key === KeyboardEventKey.Enter && index !== -1) {\n      nextIndex = index;\n    }\n\n    if (nextIndex !== -1 && event.key !== KeyboardEventKey.Space) {\n      event.preventDefault();\n\n      inputRefList.current[nextIndex].current?.focus();\n    }\n  };\n\n  useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n    KeyboardEventKey.ArrowDown,\n    KeyboardEventKey.ArrowUp,\n    KeyboardEventKey.End,\n    KeyboardEventKey.Enter,\n    KeyboardEventKey.Escape,\n    KeyboardEventKey.Home,\n    KeyboardEventKey.Space,\n  ]);\n\n  useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n  const toggleClasses = classNames(\n    styles.dropdown__toggle,\n    !disabled && {\n      [styles['dropdown__toggle--on-white']]: onColor === DropdownOldOnColor.onwhite,\n      [styles['dropdown__toggle--on-grey']]: onColor === DropdownOldOnColor.ongrey,\n      [styles['dropdown__toggle--on-blueberry']]: onColor === DropdownOldOnColor.onblueberry,\n      [styles['dropdown__toggle--on-cherry']]: onColor === DropdownOldOnColor.oncherry,\n      [styles['dropdown__toggle--transparent']]: transparent,\n      [styles['dropdown__toggle--fluid']]: fluid,\n      [styles['dropdown__toggle--open']]: isOpen,\n    }\n  );\n\n  const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n\n  const renderChildren = React.Children.map(children, (child, index) => {\n    const element = child as React.ReactElement<{ children?: React.ReactNode; ref?: React.Ref<HTMLElement | null> }>;\n\n    return (\n      <li className={styles.dropdown__input} id={`${optionIdPrefix}-${index}`}>\n        {React.isValidElement(element) && inputRefList.current && inputRefList.current[index]\n          ? React.cloneElement(element, {\n              ref: mergeRefs([element.props.ref, inputRefList.current[index]]),\n            })\n          : child}\n      </li>\n    );\n  });\n\n  return (\n    <div className={styles.dropdown} ref={dropdownRef}>\n      <span id={labelId} className={styles.dropdown__label}>\n        {label}\n      </span>\n      <button\n        type=\"button\"\n        onClick={(): false | void => handleOpen(false)}\n        className={toggleClasses}\n        ref={buttonRef}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Dropdown}\n        disabled={disabled}\n        aria-labelledby={toggleLabelId}\n        aria-haspopup={true}\n        aria-controls={contentId}\n        aria-expanded={isOpen}\n      >\n        <span id={toggleLabelId} className={styles.dropdown__toggle__label}>\n          {placeholder}\n        </span>\n        <Icon\n          color={disabled ? theme.palette.neutral700 : theme.palette.blueberry600}\n          svgIcon={PlusSmall}\n          className={styles.dropdown__icon}\n          isHovered={!disabled && isHovered}\n          size={IconSize.XSmall}\n        />\n      </button>\n      <div\n        id={contentId}\n        className={contentClasses}\n        style={{ width: fluid ? '100%' : `auto`, minWidth: dropdownMinWidth ?? 'auto', zIndex: zIndex }}\n      >\n        <ul className={styles.dropdown__options} role=\"group\" aria-labelledby={labelId} tabIndex={-1} ref={optionsRef}>\n          {renderChildren}\n        </ul>\n        {!noCloseButton && (\n          <div className={styles.dropdown__close}>\n            <Button onClick={handleClose}>{mergedResources.closeText}</Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default DropdownOld;\n","import DropdownOld from './DropdownOld';\nexport { DropdownOldOnColor } from './constants';\nexport * from './DropdownOld';\nexport default DropdownOld;\n"],"mappings":"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"}

package/lib/components/EmptyState/index.js

@@ -3,7 +3,7 @@ import { t as Icon_default } from "../../Icon.js";
 import { n as useBreakpoint, t as Breakpoint } from "../../useBreakpoint.js";
 import { t as Title_default } from "../../Title2.js";
 import { t as EmptyBox_default } from "../../EmptyBox.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
 var EmptyBoxBeeMedium = ({ color, svgProperties }) => {
@@ -206,7 +206,7 @@ var EmptyBoxBeeSmall = ({ color, svgProperties }) => {
 var EmptyBoxBeeSmall_default = EmptyBoxBeeSmall;
 var EmptyState = (props) => {
 	const { onColor = "neutral", titleHtmlMarkup, testId, type = "dashed", size = "normal", title, additionalText } = props;
-	const classes = cn(styles.emptystate, {
+	const classes = classNames(styles.emptystate, {
 		[styles["emptystate--dashed"]]: type === "dashed",
 		[styles["emptystate--blank"]]: type === "blank",
 		[styles["emptystate--compact"]]: size === "compact"