@helsenorge/designsystem-react 15.2.0 → 15.4.0

package/lib/components/Loader/index.js

@@ -1,6 +1,6 @@
 import { t as uuid } from "../../uuid.js";
 import { AnalyticsId, ZIndex } from "../../constants.js";
-import classNames from "classnames";
+import cn from "classnames";
 import { useCallback, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import loaderStyles from "./styles.module.scss";
@@ -24,19 +24,19 @@ var Loader = (props) => {
 	const isSmall = size === "small";
 	const isMedium = size === "medium";
 	const isLarge = size === "large";
-	const loaderWrapperClasses = classNames({
+	const loaderWrapperClasses = cn({
 		[loaderStyles["loader-wrapper--center"]]: center,
 		[loaderStyles["loader-wrapper--overlay"]]: overlay,
 		[loaderStyles["loader-wrapper--overlay-screen"]]: overlay === Overlay.screen,
 		[loaderStyles["loader-wrapper--overlay-parent"]]: overlay === Overlay.parent && display,
 		[loaderStyles["loader-wrapper--inline"]]: inline && display
 	});
-	const loaderClasses = classNames(loaderStyles.loader, {
+	const loaderClasses = cn(loaderStyles.loader, {
 		[loaderStyles["loader--small"]]: isSmall,
 		[loaderStyles["loader--medium"]]: isMedium,
 		[loaderStyles["loader--large"]]: isLarge
 	}, className);
-	const loaderDotClasses = classNames(loaderStyles.loader__dot, {
+	const loaderDotClasses = cn(loaderStyles.loader__dot, {
 		[loaderStyles["loader__dot--small"]]: isSmall,
 		[loaderStyles["loader__dot--medium"]]: isMedium,
 		[loaderStyles["loader__dot--large"]]: isLarge,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Loader/constants.ts","../../../src/components/Loader/Loader.tsx","../../../src/components/Loader/index.ts"],"sourcesContent":["export enum Overlay {\n  screen = 'screen',\n  parent = 'parent',\n}\n","import { useCallback, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\n\nimport { Overlay } from './constants';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { uuid } from '../../utils/uuid';\n\nimport loaderStyles from './styles.module.scss';\n\nexport type LoaderColors = PaletteNames;\nexport type LoaderSizes = 'tiny' | 'small' | 'medium' | 'large';\n\nexport interface LoaderProps {\n  /** Sets the color of the loader. If overlay is used, the color will always be white.  */\n  color?: LoaderColors;\n  /**\tAdds custom classes to the element. */\n  className?: string;\n  /** Changes the size of the loader. */\n  size?: LoaderSizes;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** id of the label */\n  labelId?: string;\n  /** Centers the loader in a container */\n  center?: boolean;\n  /** Inline the loader so it can be used in a span or paragraph */\n  inline?: boolean;\n  /** Loader is displayed with grey background covering the entire screen */\n  overlay?: keyof typeof Overlay;\n  /** Individual id for loading icon (aria-labelledby).  */\n  ariaLabelledById?: string;\n  /** String that labels the current loading element  */\n  ariaLabel?: string;\n}\n\nconst Loader: React.FC<LoaderProps> = props => {\n  const {\n    overlay,\n    size = 'small',\n    className = '',\n    labelId = uuid(),\n    testId,\n    center,\n    inline,\n    ariaLabelledById,\n    ariaLabel = 'Laster inn',\n  } = props;\n  const color = props.overlay ? 'white' : props.color || 'neutral';\n\n  const showLoader = (): boolean => {\n    if (overlay === Overlay.parent || inline) {\n      return false;\n    }\n\n    return true;\n  };\n\n  const [display, setDisplay] = useState(showLoader());\n  const hasInitializedRef = useRef(false);\n\n  const isSmall = size === 'small';\n  const isMedium = size === 'medium';\n  const isLarge = size === 'large';\n\n  const loaderWrapperClasses = classNames({\n    [loaderStyles['loader-wrapper--center']]: center,\n    [loaderStyles['loader-wrapper--overlay']]: overlay,\n    [loaderStyles['loader-wrapper--overlay-screen']]: overlay === Overlay.screen,\n    [loaderStyles['loader-wrapper--overlay-parent']]: overlay === Overlay.parent && display,\n    [loaderStyles['loader-wrapper--inline']]: inline && display,\n  });\n  const loaderClasses = classNames(\n    loaderStyles.loader,\n    {\n      [loaderStyles['loader--small']]: isSmall,\n      [loaderStyles['loader--medium']]: isMedium,\n      [loaderStyles['loader--large']]: isLarge,\n    },\n    className\n  );\n  const loaderDotClasses = classNames(loaderStyles.loader__dot, {\n    [loaderStyles['loader__dot--small']]: isSmall,\n    [loaderStyles['loader__dot--medium']]: isMedium,\n    [loaderStyles['loader__dot--large']]: isLarge,\n    [loaderStyles['loader__dot--banana']]: color === 'banana',\n    [loaderStyles['loader__dot--cherry']]: color === 'cherry',\n    [loaderStyles['loader__dot--kiwi']]: color === 'kiwi',\n    [loaderStyles['loader__dot--neutral']]: color === 'neutral',\n    [loaderStyles['loader__dot--plum']]: color === 'plum',\n    [loaderStyles['loader__dot--black']]: color === 'black',\n    [loaderStyles['loader__dot--white']]: color === 'white',\n  });\n\n  const wrapperRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      if (node && !hasInitializedRef.current) {\n        hasInitializedRef.current = true;\n        if (overlay === Overlay.parent && node.parentElement?.style) {\n          node.parentElement.style.position = 'relative';\n          setDisplay(true);\n        }\n        if (inline && node.parentElement?.style) {\n          node.parentElement.style.display = 'flex';\n          setDisplay(true);\n        }\n      }\n    },\n    [overlay, inline]\n  );\n\n  return (\n    <div className={loaderWrapperClasses} ref={wrapperRef} style={overlay === Overlay.screen ? { zIndex: ZIndex.OverlayScreen } : {}}>\n      {display && (\n        <div\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Loader}\n          role=\"progressbar\"\n          aria-labelledby={ariaLabelledById || labelId}\n          className={loaderClasses}\n        >\n          <div className={loaderDotClasses} />\n          <div className={loaderDotClasses} />\n          <div className={loaderDotClasses} />\n          <div className={loaderDotClasses} />\n          {!ariaLabelledById && (\n            <span id={labelId} className={loaderStyles['loader__hidden-text']}>\n              {ariaLabel}\n            </span>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Loader;\n","import Loader from './Loader';\nexport { Overlay } from './constants';\nexport * from './Loader';\nexport default Loader;\n"],"mappings":";;;;;;;AAAA,IAAY,UAAL,yBAAA,SAAA;CACL,QAAA,YAAA;CACA,QAAA,YAAA;;AACF,EAAA,CAAA,CAAA;;;ACmCA,IAAM,UAAgC,UAAS;CAC7C,MAAM,EACJ,SACA,OAAO,SACP,YAAY,IACZ,UAAU,KAAK,GACf,QACA,QACA,QACA,kBACA,YAAY,iBACV;CACJ,MAAM,QAAQ,MAAM,UAAU,UAAU,MAAM,SAAS;CAEvD,MAAM,mBAA4B;EAChC,IAAI,YAAY,QAAQ,UAAU,QAChC,OAAO;EAGT,OAAO;CACT;CAEA,MAAM,CAAC,SAAS,cAAc,SAAS,WAAW,CAAC;CACnD,MAAM,oBAAoB,OAAO,KAAK;CAEtC,MAAM,UAAU,SAAS;CACzB,MAAM,WAAW,SAAS;CAC1B,MAAM,UAAU,SAAS;CAEzB,MAAM,uBAAuB,WAAW;GACrC,aAAa,4BAA4B;GACzC,aAAa,6BAA6B;GAC1C,aAAa,oCAAoC,YAAY,QAAQ;GACrE,aAAa,oCAAoC,YAAY,QAAQ,UAAU;GAC/E,aAAa,4BAA4B,UAAU;CACtD,CAAC;CACD,MAAM,gBAAgB,WACpB,aAAa,QACb;GACG,aAAa,mBAAmB;GAChC,aAAa,oBAAoB;GACjC,aAAa,mBAAmB;CACnC,GACA,SACF;CACA,MAAM,mBAAmB,WAAW,aAAa,aAAa;GAC3D,aAAa,wBAAwB;GACrC,aAAa,yBAAyB;GACtC,aAAa,wBAAwB;GACrC,aAAa,yBAAyB,UAAU;GAChD,aAAa,yBAAyB,UAAU;GAChD,aAAa,uBAAuB,UAAU;GAC9C,aAAa,0BAA0B,UAAU;GACjD,aAAa,uBAAuB,UAAU;GAC9C,aAAa,wBAAwB,UAAU;GAC/C,aAAa,wBAAwB,UAAU;CAClD,CAAC;CAmBD,OACE,oBAAC,OAAD;EAAK,WAAW;EAAsB,KAlBrB,aAChB,SAAgC;GAC/B,IAAI,QAAQ,CAAC,kBAAkB,SAAS;IACtC,kBAAkB,UAAU;IAC5B,IAAI,YAAY,QAAQ,UAAU,KAAK,eAAe,OAAO;KAC3D,KAAK,cAAc,MAAM,WAAW;KACpC,WAAW,IAAI;IACjB;IACA,IAAI,UAAU,KAAK,eAAe,OAAO;KACvC,KAAK,cAAc,MAAM,UAAU;KACnC,WAAW,IAAI;IACjB;GACF;EACF,GACA,CAAC,SAAS,MAAM,CAI2B;EAAY,OAAO,YAAY,QAAQ,SAAS,EAAE,QAAQ,OAAO,cAAc,IAAI,CAAC;YAC5H,WACC,qBAAC,OAAD;GACE,eAAa;GACb,oBAAkB,YAAY;GAC9B,MAAK;GACL,mBAAiB,oBAAoB;GACrC,WAAW;aALb;IAOE,oBAAC,OAAD,EAAK,WAAW,iBAAmB,CAAA;IACnC,oBAAC,OAAD,EAAK,WAAW,iBAAmB,CAAA;IACnC,oBAAC,OAAD,EAAK,WAAW,iBAAmB,CAAA;IACnC,oBAAC,OAAD,EAAK,WAAW,iBAAmB,CAAA;IAClC,CAAC,oBACA,oBAAC,QAAD;KAAM,IAAI;KAAS,WAAW,aAAa;eACxC;IACG,CAAA;GAEL;;CAEJ,CAAA;AAET;;;ACrIA,IAAA,iBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Loader/constants.ts","../../../src/components/Loader/Loader.tsx","../../../src/components/Loader/index.ts"],"sourcesContent":["export enum Overlay {\n  screen = 'screen',\n  parent = 'parent',\n}\n","import { useCallback, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\n\nimport { Overlay } from './constants';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { uuid } from '../../utils/uuid';\n\nimport loaderStyles from './styles.module.scss';\n\nexport type LoaderColors = PaletteNames;\nexport type LoaderSizes = 'tiny' | 'small' | 'medium' | 'large';\n\nexport interface LoaderProps {\n  /** Sets the color of the loader. If overlay is used, the color will always be white.  */\n  color?: LoaderColors;\n  /**\tAdds custom classes to the element. */\n  className?: string;\n  /** Changes the size of the loader. */\n  size?: LoaderSizes;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** id of the label */\n  labelId?: string;\n  /** Centers the loader in a container */\n  center?: boolean;\n  /** Inline the loader so it can be used in a span or paragraph */\n  inline?: boolean;\n  /** Loader is displayed with grey background covering the entire screen */\n  overlay?: keyof typeof Overlay;\n  /** Individual id for loading icon (aria-labelledby).  */\n  ariaLabelledById?: string;\n  /** String that labels the current loading element  */\n  ariaLabel?: string;\n}\n\nconst Loader: React.FC<LoaderProps> = props => {\n  const {\n    overlay,\n    size = 'small',\n    className = '',\n    labelId = uuid(),\n    testId,\n    center,\n    inline,\n    ariaLabelledById,\n    ariaLabel = 'Laster inn',\n  } = props;\n  const color = props.overlay ? 'white' : props.color || 'neutral';\n\n  const showLoader = (): boolean => {\n    if (overlay === Overlay.parent || inline) {\n      return false;\n    }\n\n    return true;\n  };\n\n  const [display, setDisplay] = useState(showLoader());\n  const hasInitializedRef = useRef(false);\n\n  const isSmall = size === 'small';\n  const isMedium = size === 'medium';\n  const isLarge = size === 'large';\n\n  const loaderWrapperClasses = classNames({\n    [loaderStyles['loader-wrapper--center']]: center,\n    [loaderStyles['loader-wrapper--overlay']]: overlay,\n    [loaderStyles['loader-wrapper--overlay-screen']]: overlay === Overlay.screen,\n    [loaderStyles['loader-wrapper--overlay-parent']]: overlay === Overlay.parent && display,\n    [loaderStyles['loader-wrapper--inline']]: inline && display,\n  });\n  const loaderClasses = classNames(\n    loaderStyles.loader,\n    {\n      [loaderStyles['loader--small']]: isSmall,\n      [loaderStyles['loader--medium']]: isMedium,\n      [loaderStyles['loader--large']]: isLarge,\n    },\n    className\n  );\n  const loaderDotClasses = classNames(loaderStyles.loader__dot, {\n    [loaderStyles['loader__dot--small']]: isSmall,\n    [loaderStyles['loader__dot--medium']]: isMedium,\n    [loaderStyles['loader__dot--large']]: isLarge,\n    [loaderStyles['loader__dot--banana']]: color === 'banana',\n    [loaderStyles['loader__dot--cherry']]: color === 'cherry',\n    [loaderStyles['loader__dot--kiwi']]: color === 'kiwi',\n    [loaderStyles['loader__dot--neutral']]: color === 'neutral',\n    [loaderStyles['loader__dot--plum']]: color === 'plum',\n    [loaderStyles['loader__dot--black']]: color === 'black',\n    [loaderStyles['loader__dot--white']]: color === 'white',\n  });\n\n  const wrapperRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      if (node && !hasInitializedRef.current) {\n        hasInitializedRef.current = true;\n        if (overlay === Overlay.parent && node.parentElement?.style) {\n          node.parentElement.style.position = 'relative';\n          setDisplay(true);\n        }\n        if (inline && node.parentElement?.style) {\n          node.parentElement.style.display = 'flex';\n          setDisplay(true);\n        }\n      }\n    },\n    [overlay, inline]\n  );\n\n  return (\n    <div className={loaderWrapperClasses} ref={wrapperRef} style={overlay === Overlay.screen ? { zIndex: ZIndex.OverlayScreen } : {}}>\n      {display && (\n        <div\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Loader}\n          role=\"progressbar\"\n          aria-labelledby={ariaLabelledById || labelId}\n          className={loaderClasses}\n        >\n          <div className={loaderDotClasses} />\n          <div className={loaderDotClasses} />\n          <div className={loaderDotClasses} />\n          <div className={loaderDotClasses} />\n          {!ariaLabelledById && (\n            <span id={labelId} className={loaderStyles['loader__hidden-text']}>\n              {ariaLabel}\n            </span>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Loader;\n","import Loader from './Loader';\nexport { Overlay } from './constants';\nexport * from './Loader';\nexport default Loader;\n"],"mappings":";;;;;;;AAAA,IAAY,UAAL,yBAAA,SAAA;CACL,QAAA,YAAA;CACA,QAAA,YAAA;;AACF,EAAA,CAAA,CAAA;;;ACmCA,IAAM,UAAgC,UAAS;CAC7C,MAAM,EACJ,SACA,OAAO,SACP,YAAY,IACZ,UAAU,KAAK,GACf,QACA,QACA,QACA,kBACA,YAAY,iBACV;CACJ,MAAM,QAAQ,MAAM,UAAU,UAAU,MAAM,SAAS;CAEvD,MAAM,mBAA4B;EAChC,IAAI,YAAY,QAAQ,UAAU,QAChC,OAAO;EAGT,OAAO;CACT;CAEA,MAAM,CAAC,SAAS,cAAc,SAAS,WAAW,CAAC;CACnD,MAAM,oBAAoB,OAAO,KAAK;CAEtC,MAAM,UAAU,SAAS;CACzB,MAAM,WAAW,SAAS;CAC1B,MAAM,UAAU,SAAS;CAEzB,MAAM,uBAAuB,GAAW;GACrC,aAAa,4BAA4B;GACzC,aAAa,6BAA6B;GAC1C,aAAa,oCAAoC,YAAY,QAAQ;GACrE,aAAa,oCAAoC,YAAY,QAAQ,UAAU;GAC/E,aAAa,4BAA4B,UAAU;CACtD,CAAC;CACD,MAAM,gBAAgB,GACpB,aAAa,QACb;GACG,aAAa,mBAAmB;GAChC,aAAa,oBAAoB;GACjC,aAAa,mBAAmB;CACnC,GACA,SACF;CACA,MAAM,mBAAmB,GAAW,aAAa,aAAa;GAC3D,aAAa,wBAAwB;GACrC,aAAa,yBAAyB;GACtC,aAAa,wBAAwB;GACrC,aAAa,yBAAyB,UAAU;GAChD,aAAa,yBAAyB,UAAU;GAChD,aAAa,uBAAuB,UAAU;GAC9C,aAAa,0BAA0B,UAAU;GACjD,aAAa,uBAAuB,UAAU;GAC9C,aAAa,wBAAwB,UAAU;GAC/C,aAAa,wBAAwB,UAAU;CAClD,CAAC;CAmBD,OACE,oBAAC,OAAD;EAAK,WAAW;EAAsB,KAlBrB,aAChB,SAAgC;GAC/B,IAAI,QAAQ,CAAC,kBAAkB,SAAS;IACtC,kBAAkB,UAAU;IAC5B,IAAI,YAAY,QAAQ,UAAU,KAAK,eAAe,OAAO;KAC3D,KAAK,cAAc,MAAM,WAAW;KACpC,WAAW,IAAI;IACjB;IACA,IAAI,UAAU,KAAK,eAAe,OAAO;KACvC,KAAK,cAAc,MAAM,UAAU;KACnC,WAAW,IAAI;IACjB;GACF;EACF,GACA,CAAC,SAAS,MAAM,CAI2B;EAAY,OAAO,YAAY,QAAQ,SAAS,EAAE,QAAQ,OAAO,cAAc,IAAI,CAAC;YAC5H,WACC,qBAAC,OAAD;GACE,eAAa;GACb,oBAAkB,YAAY;GAC9B,MAAK;GACL,mBAAiB,oBAAoB;GACrC,WAAW;aALb;IAOE,oBAAC,OAAD,EAAK,WAAW,iBAAmB,CAAA;IACnC,oBAAC,OAAD,EAAK,WAAW,iBAAmB,CAAA;IACnC,oBAAC,OAAD,EAAK,WAAW,iBAAmB,CAAA;IACnC,oBAAC,OAAD,EAAK,WAAW,iBAAmB,CAAA;IAClC,CAAC,oBACA,oBAAC,QAAD;KAAM,IAAI;KAAS,WAAW,aAAa;eACxC;IACG,CAAA;GAEL;;CAEJ,CAAA;AAET;;;ACrIA,IAAA,iBAAe"}

package/lib/components/Modal/index.js

@@ -15,7 +15,7 @@ import AlertSignFill from "../Icons/AlertSignFill.js";
 import AlertSignStroke from "../Icons/AlertSignStroke.js";
 import CheckOutline from "../Icons/CheckOutline.js";
 import Portal from "../Portal/index.js";
-import classNames from "classnames";
+import cn from "classnames";
 import React, { useEffect } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
@@ -112,8 +112,8 @@ var Modal = (props) => {
 	useEffect(() => {
 		dialogRef.current?.focus();
 	}, []);
-	const dialogClasses = classNames(className, styles.modal, variant && styles[`modal--${variant}`], size && styles[`modal--${size}`], contentIsScrollable && !showActions && styles["modal--no-actions"]);
-	const titleClasses = classNames({
+	const dialogClasses = cn(className, styles.modal, variant && styles[`modal--${variant}`], size && styles[`modal--${size}`], contentIsScrollable && !showActions && styles["modal--no-actions"]);
+	const titleClasses = cn({
 		[styles["modal__title--error"]]: variant === ModalVariants.error,
 		[styles["modal__title--success"]]: variant === ModalVariants.success
 	});
@@ -135,9 +135,9 @@ var Modal = (props) => {
 					...ariaLabelAttributes,
 					ref: dialogRef,
 					children: [
-						/* @__PURE__ */ jsx("div", { className: classNames(styles["modal__shadow"], styles["modal__shadow--top"], { [styles["modal__shadow--show"]]: !topContentVisible && contentIsScrollable }) }),
+						/* @__PURE__ */ jsx("div", { className: cn(styles["modal__shadow"], styles["modal__shadow--top"], { [styles["modal__shadow--show"]]: !topContentVisible && contentIsScrollable }) }),
 						/* @__PURE__ */ jsxs("div", {
-							className: classNames(styles.modal__contentWrapper),
+							className: cn(styles.modal__contentWrapper),
 							tabIndex: contentIsScrollable ? 0 : void 0,
 							role: contentIsScrollable ? "region" : void 0,
 							...contentIsScrollable ? ariaLabelAttributes : {},
@@ -145,14 +145,14 @@ var Modal = (props) => {
 							children: [!props.noCloseButton && /* @__PURE__ */ jsx("div", {
 								className: styles.modal__closeWrapper,
 								children: /* @__PURE__ */ jsx("div", {
-									className: classNames(styles.modal__closeWrapper__close),
+									className: cn(styles.modal__closeWrapper__close),
 									children: /* @__PURE__ */ jsx(Close_default, {
 										onClick: props.onClose,
 										ariaLabel: props.ariaLabelCloseBtn
 									})
 								})
 							}), /* @__PURE__ */ jsxs("div", {
-								className: classNames(size && styles[`modal__contentWrapper__scroll--${size}`]),
+								className: cn(size && styles[`modal__contentWrapper__scroll--${size}`]),
 								children: [
 									/* @__PURE__ */ jsx("div", { ref: topContent }),
 									/* @__PURE__ */ jsxs("div", {
@@ -181,9 +181,9 @@ var Modal = (props) => {
 								]
 							})]
 						}),
-						/* @__PURE__ */ jsx("div", { className: classNames(styles["modal__shadow"], styles["modal__shadow--bottom"], { [styles["modal__shadow--show"]]: !bottomContentVisible && contentIsScrollable }) }),
+						/* @__PURE__ */ jsx("div", { className: cn(styles["modal__shadow"], styles["modal__shadow--bottom"], { [styles["modal__shadow--show"]]: !bottomContentVisible && contentIsScrollable }) }),
 						showActions && /* @__PURE__ */ jsxs("div", {
-							className: classNames(styles["modal__call-to-action"], size && styles[`modal__call-to-action--${size}`]),
+							className: cn(styles["modal__call-to-action"], size && styles[`modal__call-to-action--${size}`]),
 							children: [
 								props.onSuccess && primaryButtonText && /* @__PURE__ */ jsx(Button_default, {
 									onClick: props.onSuccess,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Modal/constants.ts","../../../src/components/Modal/Modal.tsx","../../../src/components/Modal/index.ts"],"sourcesContent":["export enum ModalVariants {\n  normal = 'normal',\n  warning = 'warning',\n  error = 'error',\n  success = 'success',\n}\n\nexport enum ModalSize {\n  large = 'large',\n  medium = 'medium',\n}\n","import React, { useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport type { IconProps } from '../Icon';\n\nimport { ModalSize, ModalVariants } from './constants';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isComponent } from '../../utils/component';\nimport { disableBodyScroll, enableBodyScroll } from '../../utils/scroll';\nimport { uuid } from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport AlertSignStroke from '../Icons/AlertSignStroke';\nimport CheckOutline from '../Icons/CheckOutline';\nimport Portal from '../Portal';\nimport Title from '../Title/Title';\n\nimport styles from './styles.module.scss';\n\nexport interface ModalProps {\n  /** Title of the modal */\n  title: string;\n  /** id of the modal title */\n  titleId?: string;\n  /** Description of the modal. Will not render if the modal has children. */\n  description?: string;\n  /** Optional footer content that can be rendered instead of default CTA(s) */\n  footerContent?: React.ReactNode;\n  /** Changes the visual representation of the modal */\n  variant?: keyof typeof ModalVariants;\n  /** Change width of the modal (default: large) */\n  size?: keyof typeof ModalSize;\n  /** Icon displayed in title */\n  icon?: React.ReactElement;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Primary button text */\n  primaryButtonText?: string;\n  /** Secondary button text */\n  secondaryButtonText?: string;\n  /** Sets the aria-label of the modal */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the modal */\n  ariaLabelledBy?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Alternative component to modal */\n  children?: React.ReactNode;\n  /** Component shown after title */\n  afterTitleChildren?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Customize the z-index of the modal */\n  zIndex?: number;\n  /** Function is called when user clicks primary button */\n  onSuccess?: () => void;\n  /** Function is called when user clicks secondary button, clicks escape or outside the modal */\n  onClose?: () => void;\n  /** When enabled the component will be rendered in the bottom of document.body */\n  printable?: boolean;\n  /** If disabled, clicking escape or outside the modal will not close it */\n  disableCloseEvents?: boolean;\n  /** Aria role used for the Modal. Default is dialog */\n  role?: 'dialog' | 'alertdialog';\n}\n\nconst getVariantIcon = (variant?: ModalProps['variant']): React.JSX.Element | null => {\n  if (variant === ModalVariants.error) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignFill} color={palette.cherry500} />;\n  } else if (variant === ModalVariants.warning) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignStroke} color={palette.black} />;\n  } else if (variant === ModalVariants.success) {\n    return <Icon size={IconSize.Small} svgIcon={CheckOutline} color={palette.kiwi900} />;\n  }\n  return null;\n};\n\nconst getIcon = (variant?: ModalProps['variant'], icon?: ModalProps['icon']): React.JSX.Element | null => {\n  const variantIcon = getVariantIcon(variant);\n  if (variantIcon) {\n    return <div className={styles.modal__iconWrapper}>{variantIcon}</div>;\n  }\n  if (icon) {\n    return (\n      <div className={styles.modal__iconWrapper}>\n        {isComponent<IconProps>(icon, Icon) &&\n          React.cloneElement(icon, {\n            size: IconSize.Small,\n          })}\n      </div>\n    );\n  }\n  return null;\n};\n\nconst Modal: React.FC<ModalProps> = props => {\n  const {\n    footerContent,\n    variant = ModalVariants.normal,\n    primaryButtonText = 'OK',\n    titleId = uuid(),\n    className = '',\n    size = ModalSize.large,\n    zIndex = ZIndex.OverlayScreen,\n    role = 'dialog',\n  } = props;\n\n  const topContent = React.useRef<HTMLDivElement>(null);\n  const modalContentRef = React.useRef<HTMLDivElement>(null);\n  const dialogRef = React.useRef<HTMLDivElement>(null);\n  useFocusTrap(dialogRef, true);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContent = React.useRef<HTMLDivElement>(null);\n  const bottomContentVisible = useIsVisible(bottomContent);\n  const contentIsScrollable = modalContentRef.current && modalContentRef.current.scrollHeight > modalContentRef.current.clientHeight;\n  useReturnFocusOnUnmount(dialogRef);\n\n  function handleKeyboardEvent(e: KeyboardEvent): void {\n    if (e.key === 'Escape' && props.onClose) {\n      e.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function handleClickEvent(event: MouseEvent): void {\n    if (event.target && overlayRef.current === event.target && props.onClose) {\n      event.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n\n  const showActions = (props.secondaryButtonText && props.secondaryButtonText?.length > 0) || props.onSuccess || footerContent;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: props.ariaLabel, id: props.ariaLabelledBy, fallbackId: titleId });\n\n  useEffect(() => {\n    const overlayElement = overlayRef.current;\n    disableBodyScroll();\n    if (!props.disableCloseEvents && overlayElement) {\n      overlayElement.addEventListener('keydown', handleKeyboardEvent);\n      overlayElement.addEventListener('click', handleClickEvent);\n    }\n    return (): void => {\n      enableBodyScroll();\n      if (!props.disableCloseEvents && overlayElement) {\n        overlayElement.removeEventListener('keydown', handleKeyboardEvent);\n        overlayElement.removeEventListener('click', handleClickEvent);\n      }\n    };\n  }, [props.disableCloseEvents]);\n\n  useEffect(() => {\n    dialogRef.current?.focus();\n  }, []);\n\n  const dialogClasses = cn(\n    className,\n    styles.modal,\n    variant && styles[`modal--${variant}`],\n    size && styles[`modal--${size}`],\n    contentIsScrollable && !showActions && styles['modal--no-actions']\n  );\n\n  const titleClasses = cn({\n    [styles['modal__title--error']]: variant === ModalVariants.error,\n    [styles['modal__title--success']]: variant === ModalVariants.success,\n  });\n\n  const Component = (\n    <div data-testid=\"dialog-container\">\n      <div\n        ref={overlayRef}\n        className={styles['modal-overlay']}\n        data-testid={props.testId}\n        data-analyticsid={AnalyticsId.Modal}\n        style={{ zIndex }}\n      >\n        <div className={styles.align}>\n          <div className={dialogClasses} role={role} aria-modal=\"true\" tabIndex={-1} {...ariaLabelAttributes} ref={dialogRef}>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--top'], {\n                [styles['modal__shadow--show']]: !topContentVisible && contentIsScrollable,\n              })}\n            />\n            <div\n              className={cn(styles.modal__contentWrapper)}\n              tabIndex={contentIsScrollable ? 0 : undefined}\n              role={contentIsScrollable ? 'region' : undefined}\n              {...(contentIsScrollable ? ariaLabelAttributes : {})}\n              ref={modalContentRef}\n            >\n              {!props.noCloseButton && (\n                <div className={styles.modal__closeWrapper}>\n                  <div className={cn(styles.modal__closeWrapper__close)}>\n                    <Close onClick={props.onClose} ariaLabel={props.ariaLabelCloseBtn} />\n                  </div>\n                </div>\n              )}\n              <div className={cn(size && styles[`modal__contentWrapper__scroll--${size}`])}>\n                <div ref={topContent} />\n                <div className={styles.modal__contentWrapper__title}>\n                  {getIcon(variant, props.icon)}\n                  <Title id={ariaLabelAttributes?.['aria-labelledby']} htmlMarkup=\"h3\" appearance=\"title3\" className={titleClasses}>\n                    {props.title}\n                  </Title>\n                  {props.afterTitleChildren && <div className={styles['modal__afterTitleChildren']}>{props.afterTitleChildren}</div>}\n                </div>\n                {props.children && <div>{props.children}</div>}\n                {!props.children && <p className={styles.modal__description}>{props.description}</p>}\n                <div ref={bottomContent} />\n              </div>\n            </div>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--bottom'], {\n                [styles['modal__shadow--show']]: !bottomContentVisible && contentIsScrollable,\n              })}\n            />\n            {showActions && (\n              <div className={cn(styles['modal__call-to-action'], size && styles[`modal__call-to-action--${size}`])}>\n                {props.onSuccess && primaryButtonText && <Button onClick={props.onSuccess}>{primaryButtonText}</Button>}\n                {props.secondaryButtonText && props.secondaryButtonText?.length > 0 && (\n                  <Button variant=\"borderless\" onClick={props.onClose}>\n                    {props.secondaryButtonText}\n                  </Button>\n                )}\n                {footerContent}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (props.printable) {\n    const printModal = 'print-modal';\n    return (\n      <Portal className={printModal} testId=\"print-modal\">\n        <style media=\"print\">{`body > *:not(.${printModal}) {display: none;}`}</style>\n        {Component}\n      </Portal>\n    );\n  }\n\n  return Component;\n};\n\nexport default Modal;\n","import Modal from './Modal';\nexport { ModalVariants, ModalSize } from './constants';\nexport * from './Modal';\nexport default Modal;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Modal/constants.ts","../../../src/components/Modal/Modal.tsx","../../../src/components/Modal/index.ts"],"sourcesContent":["export enum ModalVariants {\n  normal = 'normal',\n  warning = 'warning',\n  error = 'error',\n  success = 'success',\n}\n\nexport enum ModalSize {\n  large = 'large',\n  medium = 'medium',\n}\n","import React, { useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport type { IconProps } from '../Icon';\n\nimport { ModalSize, ModalVariants } from './constants';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isComponent } from '../../utils/component';\nimport { disableBodyScroll, enableBodyScroll } from '../../utils/scroll';\nimport { uuid } from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport AlertSignStroke from '../Icons/AlertSignStroke';\nimport CheckOutline from '../Icons/CheckOutline';\nimport Portal from '../Portal';\nimport Title from '../Title/Title';\n\nimport styles from './styles.module.scss';\n\nexport interface ModalProps {\n  /** Title of the modal */\n  title: string;\n  /** id of the modal title */\n  titleId?: string;\n  /** Description of the modal. Will not render if the modal has children. */\n  description?: string;\n  /** Optional footer content that can be rendered instead of default CTA(s) */\n  footerContent?: React.ReactNode;\n  /** Changes the visual representation of the modal */\n  variant?: keyof typeof ModalVariants;\n  /** Change width of the modal (default: large) */\n  size?: keyof typeof ModalSize;\n  /** Icon displayed in title */\n  icon?: React.ReactElement;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Primary button text */\n  primaryButtonText?: string;\n  /** Secondary button text */\n  secondaryButtonText?: string;\n  /** Sets the aria-label of the modal */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the modal */\n  ariaLabelledBy?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Alternative component to modal */\n  children?: React.ReactNode;\n  /** Component shown after title */\n  afterTitleChildren?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Customize the z-index of the modal */\n  zIndex?: number;\n  /** Function is called when user clicks primary button */\n  onSuccess?: () => void;\n  /** Function is called when user clicks secondary button, clicks escape or outside the modal */\n  onClose?: () => void;\n  /** When enabled the component will be rendered in the bottom of document.body */\n  printable?: boolean;\n  /** If disabled, clicking escape or outside the modal will not close it */\n  disableCloseEvents?: boolean;\n  /** Aria role used for the Modal. Default is dialog */\n  role?: 'dialog' | 'alertdialog';\n}\n\nconst getVariantIcon = (variant?: ModalProps['variant']): React.JSX.Element | null => {\n  if (variant === ModalVariants.error) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignFill} color={palette.cherry500} />;\n  } else if (variant === ModalVariants.warning) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignStroke} color={palette.black} />;\n  } else if (variant === ModalVariants.success) {\n    return <Icon size={IconSize.Small} svgIcon={CheckOutline} color={palette.kiwi900} />;\n  }\n  return null;\n};\n\nconst getIcon = (variant?: ModalProps['variant'], icon?: ModalProps['icon']): React.JSX.Element | null => {\n  const variantIcon = getVariantIcon(variant);\n  if (variantIcon) {\n    return <div className={styles.modal__iconWrapper}>{variantIcon}</div>;\n  }\n  if (icon) {\n    return (\n      <div className={styles.modal__iconWrapper}>\n        {isComponent<IconProps>(icon, Icon) &&\n          React.cloneElement(icon, {\n            size: IconSize.Small,\n          })}\n      </div>\n    );\n  }\n  return null;\n};\n\nconst Modal: React.FC<ModalProps> = props => {\n  const {\n    footerContent,\n    variant = ModalVariants.normal,\n    primaryButtonText = 'OK',\n    titleId = uuid(),\n    className = '',\n    size = ModalSize.large,\n    zIndex = ZIndex.OverlayScreen,\n    role = 'dialog',\n  } = props;\n\n  const topContent = React.useRef<HTMLDivElement>(null);\n  const modalContentRef = React.useRef<HTMLDivElement>(null);\n  const dialogRef = React.useRef<HTMLDivElement>(null);\n  useFocusTrap(dialogRef, true);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContent = React.useRef<HTMLDivElement>(null);\n  const bottomContentVisible = useIsVisible(bottomContent);\n  const contentIsScrollable = modalContentRef.current && modalContentRef.current.scrollHeight > modalContentRef.current.clientHeight;\n  useReturnFocusOnUnmount(dialogRef);\n\n  function handleKeyboardEvent(e: KeyboardEvent): void {\n    if (e.key === 'Escape' && props.onClose) {\n      e.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function handleClickEvent(event: MouseEvent): void {\n    if (event.target && overlayRef.current === event.target && props.onClose) {\n      event.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n\n  const showActions = (props.secondaryButtonText && props.secondaryButtonText?.length > 0) || props.onSuccess || footerContent;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: props.ariaLabel, id: props.ariaLabelledBy, fallbackId: titleId });\n\n  useEffect(() => {\n    const overlayElement = overlayRef.current;\n    disableBodyScroll();\n    if (!props.disableCloseEvents && overlayElement) {\n      overlayElement.addEventListener('keydown', handleKeyboardEvent);\n      overlayElement.addEventListener('click', handleClickEvent);\n    }\n    return (): void => {\n      enableBodyScroll();\n      if (!props.disableCloseEvents && overlayElement) {\n        overlayElement.removeEventListener('keydown', handleKeyboardEvent);\n        overlayElement.removeEventListener('click', handleClickEvent);\n      }\n    };\n  }, [props.disableCloseEvents]);\n\n  useEffect(() => {\n    dialogRef.current?.focus();\n  }, []);\n\n  const dialogClasses = cn(\n    className,\n    styles.modal,\n    variant && styles[`modal--${variant}`],\n    size && styles[`modal--${size}`],\n    contentIsScrollable && !showActions && styles['modal--no-actions']\n  );\n\n  const titleClasses = cn({\n    [styles['modal__title--error']]: variant === ModalVariants.error,\n    [styles['modal__title--success']]: variant === ModalVariants.success,\n  });\n\n  const Component = (\n    <div data-testid=\"dialog-container\">\n      <div\n        ref={overlayRef}\n        className={styles['modal-overlay']}\n        data-testid={props.testId}\n        data-analyticsid={AnalyticsId.Modal}\n        style={{ zIndex }}\n      >\n        <div className={styles.align}>\n          <div className={dialogClasses} role={role} aria-modal=\"true\" tabIndex={-1} {...ariaLabelAttributes} ref={dialogRef}>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--top'], {\n                [styles['modal__shadow--show']]: !topContentVisible && contentIsScrollable,\n              })}\n            />\n            <div\n              className={cn(styles.modal__contentWrapper)}\n              tabIndex={contentIsScrollable ? 0 : undefined}\n              role={contentIsScrollable ? 'region' : undefined}\n              {...(contentIsScrollable ? ariaLabelAttributes : {})}\n              ref={modalContentRef}\n            >\n              {!props.noCloseButton && (\n                <div className={styles.modal__closeWrapper}>\n                  <div className={cn(styles.modal__closeWrapper__close)}>\n                    <Close onClick={props.onClose} ariaLabel={props.ariaLabelCloseBtn} />\n                  </div>\n                </div>\n              )}\n              <div className={cn(size && styles[`modal__contentWrapper__scroll--${size}`])}>\n                <div ref={topContent} />\n                <div className={styles.modal__contentWrapper__title}>\n                  {getIcon(variant, props.icon)}\n                  <Title id={ariaLabelAttributes?.['aria-labelledby']} htmlMarkup=\"h3\" appearance=\"title3\" className={titleClasses}>\n                    {props.title}\n                  </Title>\n                  {props.afterTitleChildren && <div className={styles['modal__afterTitleChildren']}>{props.afterTitleChildren}</div>}\n                </div>\n                {props.children && <div>{props.children}</div>}\n                {!props.children && <p className={styles.modal__description}>{props.description}</p>}\n                <div ref={bottomContent} />\n              </div>\n            </div>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--bottom'], {\n                [styles['modal__shadow--show']]: !bottomContentVisible && contentIsScrollable,\n              })}\n            />\n            {showActions && (\n              <div className={cn(styles['modal__call-to-action'], size && styles[`modal__call-to-action--${size}`])}>\n                {props.onSuccess && primaryButtonText && <Button onClick={props.onSuccess}>{primaryButtonText}</Button>}\n                {props.secondaryButtonText && props.secondaryButtonText?.length > 0 && (\n                  <Button variant=\"borderless\" onClick={props.onClose}>\n                    {props.secondaryButtonText}\n                  </Button>\n                )}\n                {footerContent}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (props.printable) {\n    const printModal = 'print-modal';\n    return (\n      <Portal className={printModal} testId=\"print-modal\">\n        <style media=\"print\">{`body > *:not(.${printModal}) {display: none;}`}</style>\n        {Component}\n      </Portal>\n    );\n  }\n\n  return Component;\n};\n\nexport default Modal;\n","import Modal from './Modal';\nexport { ModalVariants, ModalSize } from './constants';\nexport * from './Modal';\nexport default Modal;\n"],"mappings":"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"}

package/lib/components/NotificationPanel/index.js

@@ -5,14 +5,14 @@ import { useIdWithFallback } from "../../hooks/useIdWithFallback.js";
 import { getAriaLabelAttributes } from "../../utils/accessibility.js";
 import { t as Close_default } from "../../Close.js";
 import { t as Expander_default } from "../../Expander.js";
-import classNames from "classnames";
+import cn from "classnames";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
 //#region src/components/NotificationPanel/NotificationPanel.tsx
 var FluidWrapper = ({ fluid, children }) => {
 	if (fluid) return /* @__PURE__ */ jsx("div", {
-		className: classNames(styles["fluid-wrapper"]),
+		className: cn(styles["fluid-wrapper"]),
 		children
 	});
 	return children;
@@ -24,13 +24,13 @@ var NotificationPanel = (props) => {
 	const isMobile = useIsMobileBreakpoint();
 	const renderContent = () => {
 		const outlineVariant = compactVariant === "outline";
-		const contentClasses = classNames(styles["notification-panel__content"]);
-		const labelClasses = classNames(styles["notification-panel__label"], {
+		const contentClasses = cn(styles["notification-panel__content"]);
+		const labelClasses = cn(styles["notification-panel__label"], {
 			[styles["notification-panel__label--no-content"]]: !children && !expanderChildren,
 			[styles["notification-panel__label--compact"]]: !!compactVariant,
 			[styles["notification-panel__label--outline"]]: outlineVariant
 		});
-		const childrenClasses = classNames(styles["notification-panel__children"], {
+		const childrenClasses = cn(styles["notification-panel__children"], {
 			[styles["notification-panel__children--with-label"]]: label,
 			[styles["notification-panel__children--expander-no-label"]]: expanderChildren && !label,
 			[styles["notification-panel__children--outline"]]: outlineVariant
@@ -58,7 +58,7 @@ var NotificationPanel = (props) => {
 			]
 		});
 	};
-	const notificationPanelClasses = classNames(styles["notification-panel"], styles[`notification-panel--${variant}`], size && styles[`notification-panel--${size}`], {
+	const notificationPanelClasses = cn(styles["notification-panel"], styles[`notification-panel--${variant}`], size && styles[`notification-panel--${size}`], {
 		[styles["notification-panel--compact"]]: !!compactVariant,
 		[styles["notification-panel--compact--basic"]]: compactVariant === "basic",
 		[styles["notification-panel--compact--outline"]]: compactVariant === "outline",

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx","../../../src/components/NotificationPanel/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport NotificationBadge from '../Badge/NotificationBadge';\nimport Close from '../Close';\nimport Expander from '../Expander';\n\nimport styles from './styles.module.scss';\n\nexport type NotificationPanelVariants = 'info' | 'warn' | 'error' | 'success';\nexport type NotificationCompactVariants = 'basic' | 'outline';\nexport type NotificationPanelSizes = 'small' | 'medium' | 'large';\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span';\n\nexport interface NotificationPanelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds inner child elements. */\n  children?: React.ReactNode;\n  /** Adds inner expander elements. */\n  expanderChildren?: React.ReactNode;\n  /** Text for expanderButton. */\n  expanderButtonText?: string;\n  /** Text for expanderButton when closed. */\n  expanderButtonClosedText?: string;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Changes the visual representation of the notification panel. */\n  variant?: NotificationPanelVariants;\n  /** Makes the panel more compact. Available in basic and outline. */\n  compactVariant?: NotificationCompactVariants;\n  /** Sets a fixed size for the content container. */\n  size?: NotificationPanelSizes;\n  /** Used in combination with dismissiable property to close the notification panel. */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Toggles the close button in the top right corner. */\n  dismissable?: boolean;\n  /** Enables a fluid outer container that spans the entire width of parent. */\n  fluid?: boolean;\n  /** Sets a label for the notification panel. */\n  label?: string;\n  /** Changes the underlying element of the label. */\n  labelHtmlMarkup?: LabelTags;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Custom id for the label */\n  labelId?: string;\n  /** Custom role for the panel. Default is no role. If variant is alert or crisis, the aria role will be set to \"alert\" unless the role-prop is also set. */\n  role?: 'region' | 'alert' | 'status' | 'none';\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\n\ntype WrapFluidProps = Pick<NotificationPanelProps, 'fluid'> & {\n  children: React.ReactElement;\n};\n\nconst FluidWrapper: React.FC<WrapFluidProps> = ({ fluid, children }) => {\n  if (fluid) {\n    const fluidClasses = classNames(styles['fluid-wrapper']);\n\n    return <div className={fluidClasses}>{children}</div>;\n  }\n  return children;\n};\n\nconst NotificationPanel: React.FC<NotificationPanelProps> = props => {\n  const {\n    children,\n    variant = 'info',\n    dismissable = false,\n    onClick,\n    expanderChildren,\n    expanderButtonText,\n    expanderButtonClosedText,\n    expanderOpenFromStart = false,\n    compactVariant,\n    label,\n    labelId: labelIdProp,\n    labelHtmlMarkup = 'h1',\n    fluid = false,\n    size,\n    className,\n    role,\n    testId,\n    ref,\n  } = props;\n  const labelId = useIdWithFallback(labelIdProp);\n  const [expanderOpen, setExpanderOpen] = React.useState(expanderOpenFromStart);\n  const isMobile = useIsMobileBreakpoint();\n\n  const renderContent = (): React.ReactNode => {\n    const outlineVariant = compactVariant === 'outline';\n    const contentClasses = classNames(styles['notification-panel__content']);\n    const labelClasses = classNames(styles['notification-panel__label'], {\n      [styles['notification-panel__label--no-content']]: !children && !expanderChildren,\n      [styles['notification-panel__label--compact']]: !!compactVariant,\n      [styles['notification-panel__label--outline']]: outlineVariant,\n    });\n    const childrenClasses = classNames(styles['notification-panel__children'], {\n      [styles['notification-panel__children--with-label']]: label,\n      [styles['notification-panel__children--expander-no-label']]: expanderChildren && !label,\n      [styles['notification-panel__children--outline']]: outlineVariant,\n    });\n    const CustomTag = labelHtmlMarkup;\n\n    return (\n      <div className={contentClasses} id={!label ? labelId : undefined}>\n        {label && (\n          <CustomTag className={labelClasses} id={labelId}>\n            {label}\n          </CustomTag>\n        )}\n        {children && <div className={childrenClasses}>{children}</div>}\n        {expanderChildren && expanderButtonText && expanderButtonClosedText && !compactVariant && (\n          <Expander\n            title={expanderOpen ? expanderButtonText : expanderButtonClosedText}\n            onExpand={setExpanderOpen}\n            expanded={expanderOpen}\n            testId=\"expand\"\n          >\n            {expanderChildren}\n          </Expander>\n        )}\n      </div>\n    );\n  };\n\n  const notificationPanelClasses = classNames(\n    styles['notification-panel'],\n    styles[`notification-panel--${variant}`],\n    size && styles[`notification-panel--${size}`],\n    {\n      [styles['notification-panel--compact']]: !!compactVariant,\n      [styles['notification-panel--compact--basic']]: compactVariant === 'basic',\n      [styles['notification-panel--compact--outline']]: compactVariant === 'outline',\n      [styles['notification-panel--with-content']]: expanderChildren || (label && children),\n      [styles['notification-panel--dismissable']]: dismissable,\n    },\n    className\n  );\n\n  const ariaRole = role || (variant === 'error' && 'alert') || undefined;\n  const ariaLabelAttributes = ariaRole && ariaRole !== 'none' ? getAriaLabelAttributes({ label, id: labelId }) : undefined;\n\n  return (\n    <FluidWrapper fluid={fluid}>\n      <div\n        ref={ref}\n        role={ariaRole}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.NotificationPanel}\n        className={notificationPanelClasses}\n        {...ariaLabelAttributes}\n      >\n        <NotificationBadge\n          variant={variant}\n          size={compactVariant || isMobile ? IconSize.XSmall : IconSize.Small}\n          className={styles['notification-panel__icon']}\n        />\n        {dismissable && (\n          <span className={styles['notification-panel__close']}>\n            <Close ariaLabel={props.ariaLabelCloseBtn} onClick={onClick} color=\"black\" />\n          </span>\n        )}\n        {renderContent()}\n      </div>\n    </FluidWrapper>\n  );\n};\n\nexport default NotificationPanel;\n","import NotificationPanel from './NotificationPanel';\nexport * from './NotificationPanel';\nexport default NotificationPanel;\n"],"mappings":";;;;;;;;;;;;AAgEA,IAAM,gBAA0C,EAAE,OAAO,eAAe;CACtE,IAAI,OAGF,OAAO,oBAAC,OAAD;EAAK,WAFS,WAAW,OAAO,gBAEhB;EAAe;CAAc,CAAA;CAEtD,OAAO;AACT;AAEA,IAAM,qBAAsD,UAAS;CACnE,MAAM,EACJ,UACA,UAAU,QACV,cAAc,OACd,SACA,kBACA,oBACA,0BACA,wBAAwB,OACxB,gBACA,OACA,SAAS,aACT,kBAAkB,MAClB,QAAQ,OACR,MACA,WACA,MACA,QACA,QACE;CACJ,MAAM,UAAU,kBAAkB,WAAW;CAC7C,MAAM,CAAC,cAAc,mBAAmB,MAAM,SAAS,qBAAqB;CAC5E,MAAM,WAAW,sBAAsB;CAEvC,MAAM,sBAAuC;EAC3C,MAAM,iBAAiB,mBAAmB;EAC1C,MAAM,iBAAiB,WAAW,OAAO,8BAA8B;EACvE,MAAM,eAAe,WAAW,OAAO,8BAA8B;IAClE,OAAO,2CAA2C,CAAC,YAAY,CAAC;IAChE,OAAO,wCAAwC,CAAC,CAAC;IACjD,OAAO,wCAAwC;EAClD,CAAC;EACD,MAAM,kBAAkB,WAAW,OAAO,iCAAiC;IACxE,OAAO,8CAA8C;IACrD,OAAO,qDAAqD,oBAAoB,CAAC;IACjF,OAAO,2CAA2C;EACrD,CAAC;EAGD,OACE,qBAAC,OAAD;GAAK,WAAW;GAAgB,IAAI,CAAC,QAAQ,UAAU,KAAA;aAAvD;IACG,SACC,oBAAC,iBAAD;KAAW,WAAW;KAAc,IAAI;eACrC;IACQ,CAAA;IAEZ,YAAY,oBAAC,OAAD;KAAK,WAAW;KAAkB;IAAc,CAAA;IAC5D,oBAAoB,sBAAsB,4BAA4B,CAAC,kBACtE,oBAAC,kBAAD;KACE,OAAO,eAAe,qBAAqB;KAC3C,UAAU;KACV,UAAU;KACV,QAAO;eAEN;IACO,CAAA;GAET;;CAET;CAEA,MAAM,2BAA2B,WAC/B,OAAO,uBACP,OAAO,uBAAuB,YAC9B,QAAQ,OAAO,uBAAuB,SACtC;GACG,OAAO,iCAAiC,CAAC,CAAC;GAC1C,OAAO,wCAAwC,mBAAmB;GAClE,OAAO,0CAA0C,mBAAmB;GACpE,OAAO,sCAAsC,oBAAqB,SAAS;GAC3E,OAAO,qCAAqC;CAC/C,GACA,SACF;CAEA,MAAM,WAAW,QAAS,YAAY,WAAW,WAAY,KAAA;CAC7D,MAAM,sBAAsB,YAAY,aAAa,SAAS,uBAAuB;EAAE;EAAO,IAAI;CAAQ,CAAC,IAAI,KAAA;CAE/G,OACE,oBAAC,cAAD;EAAqB;YACnB,qBAAC,OAAD;GACO;GACL,MAAM;GACN,eAAa;GACb,oBAAkB,YAAY;GAC9B,WAAW;GACX,GAAI;aANN;IAQE,oBAAC,mBAAD;KACW;KACT,MAAM,kBAAkB,WAAW,SAAS,SAAS,SAAS;KAC9D,WAAW,OAAO;IACnB,CAAA;IACA,eACC,oBAAC,QAAD;KAAM,WAAW,OAAO;eACtB,oBAAC,eAAD;MAAO,WAAW,MAAM;MAA4B;MAAS,OAAM;KAAS,CAAA;IACxE,CAAA;IAEP,cAAc;GACZ;;CACO,CAAA;AAElB;;;AC9KA,IAAA,4BAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx","../../../src/components/NotificationPanel/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport NotificationBadge from '../Badge/NotificationBadge';\nimport Close from '../Close';\nimport Expander from '../Expander';\n\nimport styles from './styles.module.scss';\n\nexport type NotificationPanelVariants = 'info' | 'warn' | 'error' | 'success';\nexport type NotificationCompactVariants = 'basic' | 'outline';\nexport type NotificationPanelSizes = 'small' | 'medium' | 'large';\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span';\n\nexport interface NotificationPanelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds inner child elements. */\n  children?: React.ReactNode;\n  /** Adds inner expander elements. */\n  expanderChildren?: React.ReactNode;\n  /** Text for expanderButton. */\n  expanderButtonText?: string;\n  /** Text for expanderButton when closed. */\n  expanderButtonClosedText?: string;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Changes the visual representation of the notification panel. */\n  variant?: NotificationPanelVariants;\n  /** Makes the panel more compact. Available in basic and outline. */\n  compactVariant?: NotificationCompactVariants;\n  /** Sets a fixed size for the content container. */\n  size?: NotificationPanelSizes;\n  /** Used in combination with dismissiable property to close the notification panel. */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Toggles the close button in the top right corner. */\n  dismissable?: boolean;\n  /** Enables a fluid outer container that spans the entire width of parent. */\n  fluid?: boolean;\n  /** Sets a label for the notification panel. */\n  label?: string;\n  /** Changes the underlying element of the label. */\n  labelHtmlMarkup?: LabelTags;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Custom id for the label */\n  labelId?: string;\n  /** Custom role for the panel. Default is no role. If variant is alert or crisis, the aria role will be set to \"alert\" unless the role-prop is also set. */\n  role?: 'region' | 'alert' | 'status' | 'none';\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\n\ntype WrapFluidProps = Pick<NotificationPanelProps, 'fluid'> & {\n  children: React.ReactElement;\n};\n\nconst FluidWrapper: React.FC<WrapFluidProps> = ({ fluid, children }) => {\n  if (fluid) {\n    const fluidClasses = classNames(styles['fluid-wrapper']);\n\n    return <div className={fluidClasses}>{children}</div>;\n  }\n  return children;\n};\n\nconst NotificationPanel: React.FC<NotificationPanelProps> = props => {\n  const {\n    children,\n    variant = 'info',\n    dismissable = false,\n    onClick,\n    expanderChildren,\n    expanderButtonText,\n    expanderButtonClosedText,\n    expanderOpenFromStart = false,\n    compactVariant,\n    label,\n    labelId: labelIdProp,\n    labelHtmlMarkup = 'h1',\n    fluid = false,\n    size,\n    className,\n    role,\n    testId,\n    ref,\n  } = props;\n  const labelId = useIdWithFallback(labelIdProp);\n  const [expanderOpen, setExpanderOpen] = React.useState(expanderOpenFromStart);\n  const isMobile = useIsMobileBreakpoint();\n\n  const renderContent = (): React.ReactNode => {\n    const outlineVariant = compactVariant === 'outline';\n    const contentClasses = classNames(styles['notification-panel__content']);\n    const labelClasses = classNames(styles['notification-panel__label'], {\n      [styles['notification-panel__label--no-content']]: !children && !expanderChildren,\n      [styles['notification-panel__label--compact']]: !!compactVariant,\n      [styles['notification-panel__label--outline']]: outlineVariant,\n    });\n    const childrenClasses = classNames(styles['notification-panel__children'], {\n      [styles['notification-panel__children--with-label']]: label,\n      [styles['notification-panel__children--expander-no-label']]: expanderChildren && !label,\n      [styles['notification-panel__children--outline']]: outlineVariant,\n    });\n    const CustomTag = labelHtmlMarkup;\n\n    return (\n      <div className={contentClasses} id={!label ? labelId : undefined}>\n        {label && (\n          <CustomTag className={labelClasses} id={labelId}>\n            {label}\n          </CustomTag>\n        )}\n        {children && <div className={childrenClasses}>{children}</div>}\n        {expanderChildren && expanderButtonText && expanderButtonClosedText && !compactVariant && (\n          <Expander\n            title={expanderOpen ? expanderButtonText : expanderButtonClosedText}\n            onExpand={setExpanderOpen}\n            expanded={expanderOpen}\n            testId=\"expand\"\n          >\n            {expanderChildren}\n          </Expander>\n        )}\n      </div>\n    );\n  };\n\n  const notificationPanelClasses = classNames(\n    styles['notification-panel'],\n    styles[`notification-panel--${variant}`],\n    size && styles[`notification-panel--${size}`],\n    {\n      [styles['notification-panel--compact']]: !!compactVariant,\n      [styles['notification-panel--compact--basic']]: compactVariant === 'basic',\n      [styles['notification-panel--compact--outline']]: compactVariant === 'outline',\n      [styles['notification-panel--with-content']]: expanderChildren || (label && children),\n      [styles['notification-panel--dismissable']]: dismissable,\n    },\n    className\n  );\n\n  const ariaRole = role || (variant === 'error' && 'alert') || undefined;\n  const ariaLabelAttributes = ariaRole && ariaRole !== 'none' ? getAriaLabelAttributes({ label, id: labelId }) : undefined;\n\n  return (\n    <FluidWrapper fluid={fluid}>\n      <div\n        ref={ref}\n        role={ariaRole}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.NotificationPanel}\n        className={notificationPanelClasses}\n        {...ariaLabelAttributes}\n      >\n        <NotificationBadge\n          variant={variant}\n          size={compactVariant || isMobile ? IconSize.XSmall : IconSize.Small}\n          className={styles['notification-panel__icon']}\n        />\n        {dismissable && (\n          <span className={styles['notification-panel__close']}>\n            <Close ariaLabel={props.ariaLabelCloseBtn} onClick={onClick} color=\"black\" />\n          </span>\n        )}\n        {renderContent()}\n      </div>\n    </FluidWrapper>\n  );\n};\n\nexport default NotificationPanel;\n","import NotificationPanel from './NotificationPanel';\nexport * from './NotificationPanel';\nexport default NotificationPanel;\n"],"mappings":";;;;;;;;;;;;AAgEA,IAAM,gBAA0C,EAAE,OAAO,eAAe;CACtE,IAAI,OAGF,OAAO,oBAAC,OAAD;EAAK,WAFS,GAAW,OAAO,gBAEhB;EAAe;CAAc,CAAA;CAEtD,OAAO;AACT;AAEA,IAAM,qBAAsD,UAAS;CACnE,MAAM,EACJ,UACA,UAAU,QACV,cAAc,OACd,SACA,kBACA,oBACA,0BACA,wBAAwB,OACxB,gBACA,OACA,SAAS,aACT,kBAAkB,MAClB,QAAQ,OACR,MACA,WACA,MACA,QACA,QACE;CACJ,MAAM,UAAU,kBAAkB,WAAW;CAC7C,MAAM,CAAC,cAAc,mBAAmB,MAAM,SAAS,qBAAqB;CAC5E,MAAM,WAAW,sBAAsB;CAEvC,MAAM,sBAAuC;EAC3C,MAAM,iBAAiB,mBAAmB;EAC1C,MAAM,iBAAiB,GAAW,OAAO,8BAA8B;EACvE,MAAM,eAAe,GAAW,OAAO,8BAA8B;IAClE,OAAO,2CAA2C,CAAC,YAAY,CAAC;IAChE,OAAO,wCAAwC,CAAC,CAAC;IACjD,OAAO,wCAAwC;EAClD,CAAC;EACD,MAAM,kBAAkB,GAAW,OAAO,iCAAiC;IACxE,OAAO,8CAA8C;IACrD,OAAO,qDAAqD,oBAAoB,CAAC;IACjF,OAAO,2CAA2C;EACrD,CAAC;EAGD,OACE,qBAAC,OAAD;GAAK,WAAW;GAAgB,IAAI,CAAC,QAAQ,UAAU,KAAA;aAAvD;IACG,SACC,oBAAC,iBAAD;KAAW,WAAW;KAAc,IAAI;eACrC;IACQ,CAAA;IAEZ,YAAY,oBAAC,OAAD;KAAK,WAAW;KAAkB;IAAc,CAAA;IAC5D,oBAAoB,sBAAsB,4BAA4B,CAAC,kBACtE,oBAAC,kBAAD;KACE,OAAO,eAAe,qBAAqB;KAC3C,UAAU;KACV,UAAU;KACV,QAAO;eAEN;IACO,CAAA;GAET;;CAET;CAEA,MAAM,2BAA2B,GAC/B,OAAO,uBACP,OAAO,uBAAuB,YAC9B,QAAQ,OAAO,uBAAuB,SACtC;GACG,OAAO,iCAAiC,CAAC,CAAC;GAC1C,OAAO,wCAAwC,mBAAmB;GAClE,OAAO,0CAA0C,mBAAmB;GACpE,OAAO,sCAAsC,oBAAqB,SAAS;GAC3E,OAAO,qCAAqC;CAC/C,GACA,SACF;CAEA,MAAM,WAAW,QAAS,YAAY,WAAW,WAAY,KAAA;CAC7D,MAAM,sBAAsB,YAAY,aAAa,SAAS,uBAAuB;EAAE;EAAO,IAAI;CAAQ,CAAC,IAAI,KAAA;CAE/G,OACE,oBAAC,cAAD;EAAqB;YACnB,qBAAC,OAAD;GACO;GACL,MAAM;GACN,eAAa;GACb,oBAAkB,YAAY;GAC9B,WAAW;GACX,GAAI;aANN;IAQE,oBAAC,mBAAD;KACW;KACT,MAAM,kBAAkB,WAAW,SAAS,SAAS,SAAS;KAC9D,WAAW,OAAO;IACnB,CAAA;IACA,eACC,oBAAC,QAAD;KAAM,WAAW,OAAO;eACtB,oBAAC,eAAD;MAAO,WAAW,MAAM;MAA4B;MAAS,OAAM;KAAS,CAAA;IACxE,CAAA;IAEP,cAAc;GACZ;;CACO,CAAA;AAElB;;;AC9KA,IAAA,4BAAe"}

package/lib/components/Panel/index.js

@@ -10,7 +10,7 @@ import { useExpand } from "../../hooks/useExpand.js";
 import ChevronRight from "../Icons/ChevronRight.js";
 import { a as PanelVariant, i as PanelStatus, n as PanelLayout, r as PanelStacking, t as PanelListContext } from "../../utils4.js";
 import { t as PanelTitle_default } from "../../PanelTitle.js";
-import classNames from "classnames";
+import cn from "classnames";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
@@ -34,7 +34,7 @@ var getResources = (language) => {
 //#endregion
 //#region src/components/Panel/Panel.tsx
 var ExpandButton = ({ onClick, isExpanded, resources }) => {
-	const buttonClassName = classNames(styles["expander__button"], isExpanded && styles["expander__button--expanded"]);
+	const buttonClassName = cn(styles["expander__button"], isExpanded && styles["expander__button--expanded"]);
 	return /* @__PURE__ */ jsxs(Button_default, {
 		variant: "borderless",
 		textClassName: styles["expander__button__text"],
@@ -112,22 +112,22 @@ var PanelRoot = ({ layout = PanelLayout.vertical, variant = PanelVariant.fill, c
 		}
 	}, [isExpanded]);
 	const colorScheme = effectiveVariant === PanelVariant.fill ? color : "white";
-	const outerClassnames = classNames(effectiveClassName, {
+	const outerClassnames = cn(effectiveClassName, {
 		[styles["panel__border--outline--outer"]]: effectiveVariant === PanelVariant.outline,
 		[styles["panel__border--line"]]: effectiveVariant === PanelVariant.line,
 		[styles["panel__border--fill--neutral"]]: effectiveVariant === PanelVariant.fill && colorScheme === "neutral",
 		[styles["panel__border--fill--new"]]: effectiveVariant === PanelVariant.fill && status === PanelStatus.new,
 		[styles["panel__border--fill--status"]]: effectiveVariant === PanelVariant.fill && status !== PanelStatus.none
 	});
-	const panelClassnames = classNames(styles["panel"], styles[`panel--${colorScheme}`], styles["panel--status"], {
+	const panelClassnames = cn(styles["panel"], styles[`panel--${colorScheme}`], styles["panel--status"], {
 		[styles["panel--line"]]: effectiveVariant === PanelVariant.line,
 		[styles["panel--new"]]: status === PanelStatus.new,
 		[styles["panel--draft"]]: status === PanelStatus.draft,
 		[styles["panel--error"]]: status === PanelStatus.error,
 		[styles["panel--icon"]]: hasIcon
 	});
-	const contentContainerLayout = classNames(styles["panel__content"], styles[`panel__content--${layout}`], { [styles[`panel__content--b-first`]]: stacking === PanelStacking.bFirst });
-	const expanderBorderLayout = classNames({
+	const contentContainerLayout = cn(styles["panel__content"], styles[`panel__content--${layout}`], { [styles[`panel__content--b-first`]]: stacking === PanelStacking.bFirst });
+	const expanderBorderLayout = cn({
 		[styles["panel__expander__border--expanded"]]: isExpanded && status === PanelStatus.none,
 		[styles[`panel__expander__border--not-expanded--${colorScheme}`]]: !isExpanded && status === PanelStatus.none,
 		[styles[`panel__expander__border--not-expanded--line`]]: !isExpanded && status === PanelStatus.none && effectiveVariant === PanelVariant.line
@@ -138,7 +138,7 @@ var PanelRoot = ({ layout = PanelLayout.vertical, variant = PanelVariant.fill, c
 	return expandableContent.length > 0 ? /* @__PURE__ */ jsx("div", {
 		className: outerClassnames,
 		children: /* @__PURE__ */ jsx("div", {
-			className: classNames({ [styles["panel__border--outline--inner"]]: effectiveVariant === PanelVariant.outline }),
+			className: cn({ [styles["panel__border--outline--inner"]]: effectiveVariant === PanelVariant.outline }),
 			children: /* @__PURE__ */ jsx("div", {
 				className: expanderBorderLayout,
 				children: /* @__PURE__ */ jsxs("div", {
@@ -178,7 +178,7 @@ var PanelRoot = ({ layout = PanelLayout.vertical, variant = PanelVariant.fill, c
 	}) : /* @__PURE__ */ jsx("div", {
 		className: outerClassnames,
 		children: /* @__PURE__ */ jsx("div", {
-			className: classNames({ [styles["panel__border--outline--inner"]]: effectiveVariant === PanelVariant.outline }),
+			className: cn({ [styles["panel__border--outline--inner"]]: effectiveVariant === PanelVariant.outline }),
 			children: /* @__PURE__ */ jsxs("div", {
 				className: panelClassnames,
 				"data-testid": testId,
@@ -223,25 +223,25 @@ var PreContainer = ({ children }) => {
 };
 var A = ({ children }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames(styles["panel__content__item"], styles["panel__content__item--a"]),
+		className: cn(styles["panel__content__item"], styles["panel__content__item--a"]),
 		children
 	});
 };
 var B = ({ children }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames(styles["panel__content__item"], styles["panel__content__item--b"]),
+		className: cn(styles["panel__content__item"], styles["panel__content__item--b"]),
 		children
 	});
 };
 var C = ({ children }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames(styles["panel__content__item"], styles["panel__content__item--c"]),
+		className: cn(styles["panel__content__item"], styles["panel__content__item--c"]),
 		children
 	});
 };
 var ExpandedContent = ({ children }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames(styles["panel__expander__content"]),
+		className: cn(styles["panel__expander__content"]),
 		children
 	});
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/resources/HN.Designsystem.Panel.en-GB.json","../../../src/resources/HN.Designsystem.Panel.nb-NO.json","../../../src/components/Panel/resourceHelper.ts","../../../src/components/Panel/Panel.tsx","../../../src/components/Panel/index.ts"],"sourcesContent":["{\n  \"expandButtonOpen\": \"See details\",\n  \"expandButtonClose\": \"Hide details\"\n}\n","{\n  \"expandButtonOpen\": \"Se detaljer\",\n  \"expandButtonClose\": \"Skjul detaljer\"\n}\n","import type { HNDesignsystemPanel } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Panel.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Panel.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemPanel => {\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 classNames from 'classnames';\n\nimport type { PanelTitleProps } from './PanelTitle';\nimport type { HNDesignsystemPanel } from '../../resources/Resources';\nimport type { PaletteNames } from '../../theme/palette';\n\nimport { LanguageLocales } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport Button from '../Button';\nimport Icon, { IconSize } from '../Icon';\nimport { PanelLayout, PanelStacking, PanelStatus, PanelVariant } from './constants';\nimport PanelTitle from './PanelTitle';\nimport { getResources } from './resourceHelper';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { isComponent } from '../../utils/component';\nimport Highlighter from '../Highlighter';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronRight from '../Icons/ChevronRight';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { PanelListContext } from '../PanelList/utils';\n\nimport styles from './styles.module.scss';\n\nexport type PanelColors = Extract<PaletteNames, 'white' | 'neutral'>;\n\nexport interface PanelProps {\n  /** Aria label on call to action button */\n  buttonBottomAriaLabel?: string;\n  /** Sets the text on the bottom call to action button */\n  buttonBottomText?: string;\n  /** Sets the action on the bottom call to action button */\n  buttonBottomOnClick?: () => void;\n  /** Expands or collapses the panel. Only applicable when ExpandedContent is used */\n  expanded?: boolean;\n  /** Whether the panel can be focused */\n  focusable?: boolean;\n  /** Sets the layout and order of the content boxes */\n  layout?: PanelLayout;\n  /** Sets the visual variant of panel */\n  variant?: PanelVariant;\n  /** Sets the color for panel if it has variant fill */\n  color?: PanelColors;\n  /** Sets classes on the outermost container of the panel */\n  className?: string;\n  /** Action called when toggling expansion of ExpandedContent */\n  onExpand?: (isExpanded?: boolean) => void;\n  /** Sets the stacking order of the content boxes */\n  stacking?: PanelStacking;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Children elements to be rendered inside the panel */\n  children?: React.ReactNode;\n  /** Displays a status on the left side: default normal */\n  status?: PanelStatus;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemPanel>;\n  /** Highlights text in title and content. Used for search results */\n  highlightText?: string;\n  /** Ref passed to the panel container */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\n\nconst ExpandButton = ({\n  onClick,\n  isExpanded,\n  resources,\n}: {\n  onClick: () => void;\n  isExpanded: boolean | undefined;\n  resources: Partial<HNDesignsystemPanel>;\n}): React.JSX.Element => {\n  const buttonClassName = classNames(styles['expander__button'], isExpanded && styles['expander__button--expanded']);\n\n  return (\n    <Button\n      variant=\"borderless\"\n      textClassName={styles['expander__button__text']}\n      wrapperClassName={buttonClassName}\n      aria-expanded={isExpanded}\n      onClick={onClick}\n    >\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n      <span>{isExpanded ? resources.expandButtonClose : resources.expandButtonOpen}</span>\n    </Button>\n  );\n};\nconst PanelRoot: React.FC<PanelProps> = ({\n  layout = PanelLayout.vertical,\n  variant = PanelVariant.fill,\n  color = 'neutral',\n  stacking = PanelStacking.default,\n  testId,\n  children,\n  expanded = false,\n  focusable,\n  status = PanelStatus.none,\n  buttonBottomAriaLabel,\n  buttonBottomOnClick,\n  buttonBottomText,\n  className,\n  resources,\n  onExpand,\n  highlightText,\n  ref,\n}: PanelProps) => {\n  const panelListContext = React.useContext(PanelListContext);\n  const [preContainer, setPreContainer] = React.useState<React.ReactNode[]>([]);\n  const [title, setTitle] = React.useState<React.ReactNode[]>([]);\n  const [content, setContent] = React.useState<React.ReactNode[]>([]);\n  const [expandableContent, setExpandableContent] = React.useState<React.ReactNode[]>([]);\n  const [hasIcon, setHasIcon] = React.useState(false);\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const localRef = React.useRef<HTMLDivElement>(null);\n  const panelRef = ref ?? localRef;\n  const expandedContentRef = React.useRef<HTMLDivElement>(null);\n  const defaultScroll = 100;\n\n  // Use context values if available, otherwise use props\n  const effectiveVariant = panelListContext?.variant ?? variant;\n  const effectiveHighlightText = panelListContext?.highlightText ?? highlightText;\n  const effectiveClassName = panelListContext?.applyPanelClassName(className) ?? className;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemPanel = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  React.useEffect(() => {\n    let index = 0;\n    let localHasIcon = false;\n    const newPreContainer: React.ReactNode[] = [];\n    const newTitle: React.ReactNode[] = [];\n    const newContent: React.ReactNode[] = [];\n    const newExpandableContent: React.ReactNode[] = [];\n\n    React.Children.forEach(children, child => {\n      if (React.isValidElement(child)) {\n        const key = child.key ?? `panel-child-${index++}`;\n\n        if (child.type === PreContainer) {\n          newPreContainer.push(React.cloneElement(child, { key }));\n        } else if (isComponent<PanelTitleProps>(child, PanelTitle)) {\n          newTitle.push(\n            React.cloneElement(child as React.ReactElement<PanelTitleProps>, {\n              key,\n              highlightText: child.props.highlightText || effectiveHighlightText,\n            })\n          );\n          if (child.props.icon) {\n            localHasIcon = true;\n          }\n        } else if (child.type === A || child.type === B || child.type === C) {\n          newContent.push(React.cloneElement(child, { key }));\n        } else if (child.type === ExpandedContent) {\n          newExpandableContent.push(React.cloneElement(child, { key }));\n        }\n      }\n    });\n\n    setPreContainer(newPreContainer);\n    setTitle(newTitle);\n    setContent(newContent);\n    setExpandableContent(newExpandableContent);\n    setHasIcon(localHasIcon);\n  }, [children]);\n\n  React.useEffect(() => {\n    if (expanded) {\n      // Hvis panel åpnes controlled skal ikke scroll skje\n      return;\n    }\n    // Scroller oppover når expanded content åpnes uncontrolled\n    if (isExpanded) {\n      if ('current' in panelRef && panelRef.current && expandedContentRef.current) {\n        const panelRect = panelRef.current.getBoundingClientRect();\n        const expandedContentRect = expandedContentRef.current.getBoundingClientRect();\n\n        const scrollAmount = Math.min(defaultScroll, panelRect.top - 20);\n\n        // Scroller kun oppover, og kun dersom expandedContent havner utenfor skjermen når åpnet\n        if (scrollAmount > 0 && expandedContentRect.bottom > window.innerHeight) {\n          const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n          if (prefersReducedMotion) {\n            return;\n          }\n          window.scrollBy({\n            top: scrollAmount,\n            behavior: 'smooth',\n          });\n        }\n      }\n    }\n  }, [isExpanded]);\n\n  const colorScheme = effectiveVariant === PanelVariant.fill ? color : 'white';\n\n  const outerClassnames = classNames(effectiveClassName, {\n    [styles['panel__border--outline--outer']]: effectiveVariant === PanelVariant.outline,\n    [styles['panel__border--line']]: effectiveVariant === PanelVariant.line,\n    [styles['panel__border--fill--neutral']]: effectiveVariant === PanelVariant.fill && colorScheme === 'neutral',\n    [styles['panel__border--fill--new']]: effectiveVariant === PanelVariant.fill && status === PanelStatus.new,\n    [styles['panel__border--fill--status']]: effectiveVariant === PanelVariant.fill && status !== PanelStatus.none,\n  });\n  const panelClassnames = classNames(styles['panel'], styles[`panel--${colorScheme}`], styles['panel--status'], {\n    [styles['panel--line']]: effectiveVariant === PanelVariant.line,\n    [styles['panel--new']]: status === PanelStatus.new,\n    [styles['panel--draft']]: status === PanelStatus.draft,\n    [styles['panel--error']]: status === PanelStatus.error,\n    [styles['panel--icon']]: hasIcon,\n  });\n  const contentContainerLayout = classNames(styles['panel__content'], styles[`panel__content--${layout}`], {\n    [styles[`panel__content--b-first`]]: stacking === PanelStacking.bFirst,\n  });\n  const expanderBorderLayout = classNames({\n    [styles['panel__expander__border--expanded']]: isExpanded && status === PanelStatus.none,\n    [styles[`panel__expander__border--not-expanded--${colorScheme}`]]: !isExpanded && status === PanelStatus.none,\n    [styles[`panel__expander__border--not-expanded--line`]]:\n      !isExpanded && status === PanelStatus.none && effectiveVariant === PanelVariant.line,\n  });\n\n  const handleExpandClick = (): void => {\n    setIsExpanded(!isExpanded);\n  };\n\n  return expandableContent.length > 0 ? (\n    <div className={outerClassnames}>\n      <div className={classNames({ [styles['panel__border--outline--inner']]: effectiveVariant === PanelVariant.outline })}>\n        <div className={expanderBorderLayout}>\n          <div className={panelClassnames} data-testid={testId} ref={panelRef} tabIndex={focusable ? -1 : undefined}>\n            <Highlighter searchText={effectiveHighlightText}>\n              {preContainer}\n              {title}\n            </Highlighter>\n            <div className={contentContainerLayout}>\n              <Highlighter searchText={effectiveHighlightText}>{content}</Highlighter>\n            </div>\n            <ExpandButton onClick={handleExpandClick} isExpanded={isExpanded} resources={mergedResources} />\n            {isExpanded && (\n              <div ref={expandedContentRef} data-testid={testId + '-details'}>\n                <div className={styles['panel__expander__separator']} />\n                <Highlighter searchText={effectiveHighlightText}>{expandableContent}</Highlighter>\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  ) : (\n    <div className={outerClassnames}>\n      <div className={classNames({ [styles['panel__border--outline--inner']]: effectiveVariant === PanelVariant.outline })}>\n        <div className={panelClassnames} data-testid={testId} ref={panelRef} tabIndex={focusable ? -1 : undefined}>\n          <Highlighter searchText={effectiveHighlightText}>\n            {preContainer}\n            {title}\n          </Highlighter>\n          <div className={contentContainerLayout}>\n            <Highlighter searchText={effectiveHighlightText}>{content}</Highlighter>\n          </div>\n          {buttonBottomText && buttonBottomOnClick && (\n            <div className={styles['panel__button-bottom']}>\n              <Button variant=\"borderless\" type=\"button\" size=\"medium\" onClick={buttonBottomOnClick} aria-label={buttonBottomAriaLabel}>\n                {buttonBottomText}\n                <Icon svgIcon={ChevronRight} size={IconSize.XSmall} />\n              </Button>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport interface ContentProps {\n  /** Children elements to be rendered inside the content box */\n  children?: React.ReactNode;\n}\n\nexport const PreContainer: React.FC<ContentProps> = ({ children }) => {\n  return <div className={styles['panel__pre-container']}>{children}</div>;\n};\n\nexport const A: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__content__item'], styles['panel__content__item--a']);\n  return <div className={styling}>{children}</div>;\n};\n\nexport const B: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__content__item'], styles['panel__content__item--b']);\n  return <div className={styling}>{children}</div>;\n};\n\nexport const C: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__content__item'], styles['panel__content__item--c']);\n  return <div className={styling}>{children}</div>;\n};\n\nexport const ExpandedContent: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__expander__content']);\n  return <div className={styling}>{children}</div>;\n};\n\ntype PanelComponent = typeof PanelRoot & {\n  PreContainer: React.FC<ContentProps>;\n  Title: React.FC<PanelTitleProps>;\n  A: React.FC<ContentProps>;\n  B: React.FC<ContentProps>;\n  C: React.FC<ContentProps>;\n  ExpandedContent: React.FC<ContentProps>;\n};\nPanelRoot.displayName = 'Panel';\nconst Panel = PanelRoot as PanelComponent;\nPanel.PreContainer = PreContainer;\nPanel.Title = PanelTitle;\nPanel.A = A;\nPanel.B = B;\nPanel.C = C;\nPanel.ExpandedContent = ExpandedContent;\n\nexport default Panel;\n","import Panel from './Panel';\nexport { PanelLayout, PanelStacking, PanelStatus, PanelVariant } from './constants';\nexport * from './Panel';\nexport default Panel;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/resources/HN.Designsystem.Panel.en-GB.json","../../../src/resources/HN.Designsystem.Panel.nb-NO.json","../../../src/components/Panel/resourceHelper.ts","../../../src/components/Panel/Panel.tsx","../../../src/components/Panel/index.ts"],"sourcesContent":["{\n  \"expandButtonOpen\": \"See details\",\n  \"expandButtonClose\": \"Hide details\"\n}\n","{\n  \"expandButtonOpen\": \"Se detaljer\",\n  \"expandButtonClose\": \"Skjul detaljer\"\n}\n","import type { HNDesignsystemPanel } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Panel.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Panel.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemPanel => {\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 classNames from 'classnames';\n\nimport type { PanelTitleProps } from './PanelTitle';\nimport type { HNDesignsystemPanel } from '../../resources/Resources';\nimport type { PaletteNames } from '../../theme/palette';\n\nimport { LanguageLocales } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport Button from '../Button';\nimport Icon, { IconSize } from '../Icon';\nimport { PanelLayout, PanelStacking, PanelStatus, PanelVariant } from './constants';\nimport PanelTitle from './PanelTitle';\nimport { getResources } from './resourceHelper';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { isComponent } from '../../utils/component';\nimport Highlighter from '../Highlighter';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronRight from '../Icons/ChevronRight';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { PanelListContext } from '../PanelList/utils';\n\nimport styles from './styles.module.scss';\n\nexport type PanelColors = Extract<PaletteNames, 'white' | 'neutral'>;\n\nexport interface PanelProps {\n  /** Aria label on call to action button */\n  buttonBottomAriaLabel?: string;\n  /** Sets the text on the bottom call to action button */\n  buttonBottomText?: string;\n  /** Sets the action on the bottom call to action button */\n  buttonBottomOnClick?: () => void;\n  /** Expands or collapses the panel. Only applicable when ExpandedContent is used */\n  expanded?: boolean;\n  /** Whether the panel can be focused */\n  focusable?: boolean;\n  /** Sets the layout and order of the content boxes */\n  layout?: PanelLayout;\n  /** Sets the visual variant of panel */\n  variant?: PanelVariant;\n  /** Sets the color for panel if it has variant fill */\n  color?: PanelColors;\n  /** Sets classes on the outermost container of the panel */\n  className?: string;\n  /** Action called when toggling expansion of ExpandedContent */\n  onExpand?: (isExpanded?: boolean) => void;\n  /** Sets the stacking order of the content boxes */\n  stacking?: PanelStacking;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Children elements to be rendered inside the panel */\n  children?: React.ReactNode;\n  /** Displays a status on the left side: default normal */\n  status?: PanelStatus;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemPanel>;\n  /** Highlights text in title and content. Used for search results */\n  highlightText?: string;\n  /** Ref passed to the panel container */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\n\nconst ExpandButton = ({\n  onClick,\n  isExpanded,\n  resources,\n}: {\n  onClick: () => void;\n  isExpanded: boolean | undefined;\n  resources: Partial<HNDesignsystemPanel>;\n}): React.JSX.Element => {\n  const buttonClassName = classNames(styles['expander__button'], isExpanded && styles['expander__button--expanded']);\n\n  return (\n    <Button\n      variant=\"borderless\"\n      textClassName={styles['expander__button__text']}\n      wrapperClassName={buttonClassName}\n      aria-expanded={isExpanded}\n      onClick={onClick}\n    >\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n      <span>{isExpanded ? resources.expandButtonClose : resources.expandButtonOpen}</span>\n    </Button>\n  );\n};\nconst PanelRoot: React.FC<PanelProps> = ({\n  layout = PanelLayout.vertical,\n  variant = PanelVariant.fill,\n  color = 'neutral',\n  stacking = PanelStacking.default,\n  testId,\n  children,\n  expanded = false,\n  focusable,\n  status = PanelStatus.none,\n  buttonBottomAriaLabel,\n  buttonBottomOnClick,\n  buttonBottomText,\n  className,\n  resources,\n  onExpand,\n  highlightText,\n  ref,\n}: PanelProps) => {\n  const panelListContext = React.useContext(PanelListContext);\n  const [preContainer, setPreContainer] = React.useState<React.ReactNode[]>([]);\n  const [title, setTitle] = React.useState<React.ReactNode[]>([]);\n  const [content, setContent] = React.useState<React.ReactNode[]>([]);\n  const [expandableContent, setExpandableContent] = React.useState<React.ReactNode[]>([]);\n  const [hasIcon, setHasIcon] = React.useState(false);\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const localRef = React.useRef<HTMLDivElement>(null);\n  const panelRef = ref ?? localRef;\n  const expandedContentRef = React.useRef<HTMLDivElement>(null);\n  const defaultScroll = 100;\n\n  // Use context values if available, otherwise use props\n  const effectiveVariant = panelListContext?.variant ?? variant;\n  const effectiveHighlightText = panelListContext?.highlightText ?? highlightText;\n  const effectiveClassName = panelListContext?.applyPanelClassName(className) ?? className;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemPanel = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  React.useEffect(() => {\n    let index = 0;\n    let localHasIcon = false;\n    const newPreContainer: React.ReactNode[] = [];\n    const newTitle: React.ReactNode[] = [];\n    const newContent: React.ReactNode[] = [];\n    const newExpandableContent: React.ReactNode[] = [];\n\n    React.Children.forEach(children, child => {\n      if (React.isValidElement(child)) {\n        const key = child.key ?? `panel-child-${index++}`;\n\n        if (child.type === PreContainer) {\n          newPreContainer.push(React.cloneElement(child, { key }));\n        } else if (isComponent<PanelTitleProps>(child, PanelTitle)) {\n          newTitle.push(\n            React.cloneElement(child as React.ReactElement<PanelTitleProps>, {\n              key,\n              highlightText: child.props.highlightText || effectiveHighlightText,\n            })\n          );\n          if (child.props.icon) {\n            localHasIcon = true;\n          }\n        } else if (child.type === A || child.type === B || child.type === C) {\n          newContent.push(React.cloneElement(child, { key }));\n        } else if (child.type === ExpandedContent) {\n          newExpandableContent.push(React.cloneElement(child, { key }));\n        }\n      }\n    });\n\n    setPreContainer(newPreContainer);\n    setTitle(newTitle);\n    setContent(newContent);\n    setExpandableContent(newExpandableContent);\n    setHasIcon(localHasIcon);\n  }, [children]);\n\n  React.useEffect(() => {\n    if (expanded) {\n      // Hvis panel åpnes controlled skal ikke scroll skje\n      return;\n    }\n    // Scroller oppover når expanded content åpnes uncontrolled\n    if (isExpanded) {\n      if ('current' in panelRef && panelRef.current && expandedContentRef.current) {\n        const panelRect = panelRef.current.getBoundingClientRect();\n        const expandedContentRect = expandedContentRef.current.getBoundingClientRect();\n\n        const scrollAmount = Math.min(defaultScroll, panelRect.top - 20);\n\n        // Scroller kun oppover, og kun dersom expandedContent havner utenfor skjermen når åpnet\n        if (scrollAmount > 0 && expandedContentRect.bottom > window.innerHeight) {\n          const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n          if (prefersReducedMotion) {\n            return;\n          }\n          window.scrollBy({\n            top: scrollAmount,\n            behavior: 'smooth',\n          });\n        }\n      }\n    }\n  }, [isExpanded]);\n\n  const colorScheme = effectiveVariant === PanelVariant.fill ? color : 'white';\n\n  const outerClassnames = classNames(effectiveClassName, {\n    [styles['panel__border--outline--outer']]: effectiveVariant === PanelVariant.outline,\n    [styles['panel__border--line']]: effectiveVariant === PanelVariant.line,\n    [styles['panel__border--fill--neutral']]: effectiveVariant === PanelVariant.fill && colorScheme === 'neutral',\n    [styles['panel__border--fill--new']]: effectiveVariant === PanelVariant.fill && status === PanelStatus.new,\n    [styles['panel__border--fill--status']]: effectiveVariant === PanelVariant.fill && status !== PanelStatus.none,\n  });\n  const panelClassnames = classNames(styles['panel'], styles[`panel--${colorScheme}`], styles['panel--status'], {\n    [styles['panel--line']]: effectiveVariant === PanelVariant.line,\n    [styles['panel--new']]: status === PanelStatus.new,\n    [styles['panel--draft']]: status === PanelStatus.draft,\n    [styles['panel--error']]: status === PanelStatus.error,\n    [styles['panel--icon']]: hasIcon,\n  });\n  const contentContainerLayout = classNames(styles['panel__content'], styles[`panel__content--${layout}`], {\n    [styles[`panel__content--b-first`]]: stacking === PanelStacking.bFirst,\n  });\n  const expanderBorderLayout = classNames({\n    [styles['panel__expander__border--expanded']]: isExpanded && status === PanelStatus.none,\n    [styles[`panel__expander__border--not-expanded--${colorScheme}`]]: !isExpanded && status === PanelStatus.none,\n    [styles[`panel__expander__border--not-expanded--line`]]:\n      !isExpanded && status === PanelStatus.none && effectiveVariant === PanelVariant.line,\n  });\n\n  const handleExpandClick = (): void => {\n    setIsExpanded(!isExpanded);\n  };\n\n  return expandableContent.length > 0 ? (\n    <div className={outerClassnames}>\n      <div className={classNames({ [styles['panel__border--outline--inner']]: effectiveVariant === PanelVariant.outline })}>\n        <div className={expanderBorderLayout}>\n          <div className={panelClassnames} data-testid={testId} ref={panelRef} tabIndex={focusable ? -1 : undefined}>\n            <Highlighter searchText={effectiveHighlightText}>\n              {preContainer}\n              {title}\n            </Highlighter>\n            <div className={contentContainerLayout}>\n              <Highlighter searchText={effectiveHighlightText}>{content}</Highlighter>\n            </div>\n            <ExpandButton onClick={handleExpandClick} isExpanded={isExpanded} resources={mergedResources} />\n            {isExpanded && (\n              <div ref={expandedContentRef} data-testid={testId + '-details'}>\n                <div className={styles['panel__expander__separator']} />\n                <Highlighter searchText={effectiveHighlightText}>{expandableContent}</Highlighter>\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  ) : (\n    <div className={outerClassnames}>\n      <div className={classNames({ [styles['panel__border--outline--inner']]: effectiveVariant === PanelVariant.outline })}>\n        <div className={panelClassnames} data-testid={testId} ref={panelRef} tabIndex={focusable ? -1 : undefined}>\n          <Highlighter searchText={effectiveHighlightText}>\n            {preContainer}\n            {title}\n          </Highlighter>\n          <div className={contentContainerLayout}>\n            <Highlighter searchText={effectiveHighlightText}>{content}</Highlighter>\n          </div>\n          {buttonBottomText && buttonBottomOnClick && (\n            <div className={styles['panel__button-bottom']}>\n              <Button variant=\"borderless\" type=\"button\" size=\"medium\" onClick={buttonBottomOnClick} aria-label={buttonBottomAriaLabel}>\n                {buttonBottomText}\n                <Icon svgIcon={ChevronRight} size={IconSize.XSmall} />\n              </Button>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport interface ContentProps {\n  /** Children elements to be rendered inside the content box */\n  children?: React.ReactNode;\n}\n\nexport const PreContainer: React.FC<ContentProps> = ({ children }) => {\n  return <div className={styles['panel__pre-container']}>{children}</div>;\n};\n\nexport const A: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__content__item'], styles['panel__content__item--a']);\n  return <div className={styling}>{children}</div>;\n};\n\nexport const B: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__content__item'], styles['panel__content__item--b']);\n  return <div className={styling}>{children}</div>;\n};\n\nexport const C: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__content__item'], styles['panel__content__item--c']);\n  return <div className={styling}>{children}</div>;\n};\n\nexport const ExpandedContent: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__expander__content']);\n  return <div className={styling}>{children}</div>;\n};\n\ntype PanelComponent = typeof PanelRoot & {\n  PreContainer: React.FC<ContentProps>;\n  Title: React.FC<PanelTitleProps>;\n  A: React.FC<ContentProps>;\n  B: React.FC<ContentProps>;\n  C: React.FC<ContentProps>;\n  ExpandedContent: React.FC<ContentProps>;\n};\nPanelRoot.displayName = 'Panel';\nconst Panel = PanelRoot as PanelComponent;\nPanel.PreContainer = PreContainer;\nPanel.Title = PanelTitle;\nPanel.A = A;\nPanel.B = B;\nPanel.C = C;\nPanel.ExpandedContent = ExpandedContent;\n\nexport default Panel;\n","import Panel from './Panel';\nexport { PanelLayout, PanelStacking, PanelStatus, PanelVariant } from './constants';\nexport * from './Panel';\nexport default Panel;\n"],"mappings":"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"}

package/lib/components/PanelList/index.js

@@ -1,6 +1,6 @@
 import { AnalyticsId } from "../../constants.js";
 import { a as PanelVariant, t as PanelListContext } from "../../utils4.js";
-import classNames from "classnames";
+import cn from "classnames";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
@@ -10,7 +10,7 @@ var PanelList = (props) => {
 	const contextValue = React.useMemo(() => ({
 		variant,
 		highlightText,
-		applyPanelClassName: (existingClassName) => classNames(existingClassName, styles[`panel-list__panel--${variant}`])
+		applyPanelClassName: (existingClassName) => cn(existingClassName, styles[`panel-list__panel--${variant}`])
 	}), [variant, highlightText]);
 	return /* @__PURE__ */ jsx(PanelListContext.Provider, {
 		value: contextValue,
@@ -18,7 +18,7 @@ var PanelList = (props) => {
 			ref,
 			"data-testid": testId,
 			"data-analyticsid": AnalyticsId.PanelList,
-			className: classNames({ [styles["panel-list--outline"]]: variant === PanelVariant.outline }),
+			className: cn({ [styles["panel-list--outline"]]: variant === PanelVariant.outline }),
 			children
 		})
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/PanelList/PanelList.tsx","../../../src/components/PanelList/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { PanelListContext, type PanelListContextValue } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { PanelVariant } from '../Panel/constants';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelListProps {\n  /** Panels to render inside the PanelList */\n  children?: React.ReactNode;\n  /** Changes the visual representation of the panel. Default: fill */\n  variant?: PanelVariant;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Highlights text in title and content. Used for search results */\n  highlightText?: string;\n  /** Ref passed to the container element */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\n\nconst PanelList: React.FC<PanelListProps> = (props: PanelListProps) => {\n  const { testId, children, variant = PanelVariant.fill, highlightText, ref } = props;\n\n  const contextValue: PanelListContextValue = React.useMemo(\n    () => ({\n      variant,\n      highlightText,\n      applyPanelClassName: (existingClassName?: string) => classNames(existingClassName, styles[`panel-list__panel--${variant}`]),\n    }),\n    [variant, highlightText]\n  );\n\n  return (\n    <PanelListContext.Provider value={contextValue}>\n      <div\n        ref={ref}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.PanelList}\n        className={classNames({ [styles['panel-list--outline']]: variant === PanelVariant.outline })}\n      >\n        {children}\n      </div>\n    </PanelListContext.Provider>\n  );\n};\n\nexport default PanelList;\n","import PanelList from './PanelList';\nexport * from './PanelList';\nexport * from './utils';\nexport default PanelList;\n"],"mappings":";;;;;;;AAuBA,IAAM,aAAuC,UAA0B;CACrE,MAAM,EAAE,QAAQ,UAAU,UAAU,aAAa,MAAM,eAAe,QAAQ;CAE9E,MAAM,eAAsC,MAAM,eACzC;EACL;EACA;EACA,sBAAsB,sBAA+B,WAAW,mBAAmB,OAAO,sBAAsB,UAAU;CAC5H,IACA,CAAC,SAAS,aAAa,CACzB;CAEA,OACE,oBAAC,iBAAiB,UAAlB;EAA2B,OAAO;YAChC,oBAAC,OAAD;GACO;GACL,eAAa;GACb,oBAAkB,YAAY;GAC9B,WAAW,WAAW,GAAG,OAAO,yBAAyB,YAAY,aAAa,QAAQ,CAAC;GAE1F;EACE,CAAA;CACoB,CAAA;AAE/B;;;AC5CA,IAAA,oBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/PanelList/PanelList.tsx","../../../src/components/PanelList/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { PanelListContext, type PanelListContextValue } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { PanelVariant } from '../Panel/constants';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelListProps {\n  /** Panels to render inside the PanelList */\n  children?: React.ReactNode;\n  /** Changes the visual representation of the panel. Default: fill */\n  variant?: PanelVariant;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Highlights text in title and content. Used for search results */\n  highlightText?: string;\n  /** Ref passed to the container element */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\n\nconst PanelList: React.FC<PanelListProps> = (props: PanelListProps) => {\n  const { testId, children, variant = PanelVariant.fill, highlightText, ref } = props;\n\n  const contextValue: PanelListContextValue = React.useMemo(\n    () => ({\n      variant,\n      highlightText,\n      applyPanelClassName: (existingClassName?: string) => classNames(existingClassName, styles[`panel-list__panel--${variant}`]),\n    }),\n    [variant, highlightText]\n  );\n\n  return (\n    <PanelListContext.Provider value={contextValue}>\n      <div\n        ref={ref}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.PanelList}\n        className={classNames({ [styles['panel-list--outline']]: variant === PanelVariant.outline })}\n      >\n        {children}\n      </div>\n    </PanelListContext.Provider>\n  );\n};\n\nexport default PanelList;\n","import PanelList from './PanelList';\nexport * from './PanelList';\nexport * from './utils';\nexport default PanelList;\n"],"mappings":";;;;;;;AAuBA,IAAM,aAAuC,UAA0B;CACrE,MAAM,EAAE,QAAQ,UAAU,UAAU,aAAa,MAAM,eAAe,QAAQ;CAE9E,MAAM,eAAsC,MAAM,eACzC;EACL;EACA;EACA,sBAAsB,sBAA+B,GAAW,mBAAmB,OAAO,sBAAsB,UAAU;CAC5H,IACA,CAAC,SAAS,aAAa,CACzB;CAEA,OACE,oBAAC,iBAAiB,UAAlB;EAA2B,OAAO;YAChC,oBAAC,OAAD;GACO;GACL,eAAa;GACb,oBAAkB,YAAY;GAC9B,WAAW,GAAW,GAAG,OAAO,yBAAyB,YAAY,aAAa,QAAQ,CAAC;GAE1F;EACE,CAAA;CACoB,CAAA;AAE/B;;;AC5CA,IAAA,oBAAe"}

package/lib/components/PopMenu/index.js

@@ -10,7 +10,7 @@ import X from "../Icons/X.js";
 import { t as PopOver_default } from "../../PopOver.js";
 import VerticalDots from "../Icons/VerticalDots.js";
 import { t as LinkList_default } from "../../LinkList.js";
-import classNames from "classnames";
+import cn from "classnames";
 import React, { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
@@ -47,7 +47,7 @@ var PopMenu = (props) => {
 	const renderChildren = () => {
 		if (isComponent(children, LinkList_default)) return /* @__PURE__ */ jsx(PopOver_default, {
 			testId: popOverTestId,
-			className: classNames(styles["pop-menu__pop-over"], popOverClassName),
+			className: cn(styles["pop-menu__pop-over"], popOverClassName),
 			controllerRef: iconRef,
 			role: "dialog",
 			show: isOpen,
@@ -80,7 +80,7 @@ var PopMenu = (props) => {
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		ref: outerRef,
-		className: classNames(popMenuClassName),
+		className: cn(popMenuClassName),
 		"data-analyticsid": AnalyticsId.PopMenu,
 		children: [/* @__PURE__ */ jsxs(Button_default, {
 			variant: "borderless",