@helsenorge/designsystem-react 14.0.0 → 14.2.0

package/lib/Checkbox.js

@@ -9,7 +9,7 @@ import { t as useIdWithFallback } from "./useIdWithFallback.js";
 import { t as getAriaDescribedBy } from "./accessibility.js";
 import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
 import { r as renderLabelAsParent, t as getLabelText } from "./utils2.js";
-import classNames from "classnames";
+import cn from "classnames";
 import { useEffect, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import checkboxStyles from "./components/Checkbox/styles.module.scss";
@@ -25,8 +25,8 @@ const Checkbox = (props) => {
 	const large = size === FormSize.large;
 	const { refObject, isFocused } = usePseudoClasses(isMutableRefObject(ref) ? ref : null);
 	const mergedRefs = mergeRefs([ref, refObject]);
-	const checkboxWrapperClasses = classNames(checkboxStyles["checkbox-wrapper"], { [checkboxStyles["checkbox-wrapper--large"]]: large });
-	const checkboxLabelClasses = classNames(checkboxStyles["checkbox-label"], {
+	const checkboxWrapperClasses = cn(checkboxStyles["checkbox-wrapper"], { [checkboxStyles["checkbox-wrapper--large"]]: large });
+	const checkboxLabelClasses = cn(checkboxStyles["checkbox-label"], {
 		[checkboxStyles["checkbox-label--disabled"]]: disabled,
 		[checkboxStyles["checkbox-label--on-dark"]]: onDark,
 		[checkboxStyles["checkbox-label--large"]]: large,
@@ -38,8 +38,8 @@ const Checkbox = (props) => {
 		[checkboxStyles["checkbox-label__large--on-invalid"]]: large && onInvalid,
 		[checkboxStyles["checkbox-label__large--disabled"]]: large && disabled
 	});
-	const checkboxClasses = classNames(checkboxStyles.checkbox, className);
-	const checkboxIconWrapperClasses = classNames(checkboxStyles["checkbox__icon-wrapper"], {
+	const checkboxClasses = cn(checkboxStyles.checkbox, className);
+	const checkboxIconWrapperClasses = cn(checkboxStyles["checkbox__icon-wrapper"], {
 		[checkboxStyles["checkbox__icon-wrapper--on-white"]]: onWhite,
 		[checkboxStyles["checkbox__icon-wrapper--on-grey"]]: onGrey,
 		[checkboxStyles["checkbox__icon-wrapper--on-invalid"]]: onInvalid,
@@ -57,7 +57,7 @@ const Checkbox = (props) => {
 		[checkboxStyles["checkbox__icon-wrapper__large--checked--invalid"]]: large && isChecked && onInvalid,
 		[checkboxStyles["checkbox__icon-wrapper__large--checked--disabled"]]: disabled && large && isChecked
 	});
-	const labelTextClasses = classNames(checkboxStyles["checkbox-label__text"], {
+	const labelTextClasses = cn(checkboxStyles["checkbox-label__text"], {
 		[checkboxStyles["checkbox-label__text__large--checked"]]: large && isChecked,
 		[checkboxStyles["checkbox-label__text__large--invalid"]]: large && isChecked && onInvalid,
 		[checkboxStyles["checkbox-label__text--on-dark"]]: onDark,

package/lib/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["Checkbox: React.FC<CheckboxProps>"],"sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { AnalyticsId, FormOnColor, FormSize, IconSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys/color';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport Check from '../Icons/Check';\nimport { getLabelText, renderLabelAsParent } from '../Label/utils';\n\nimport checkboxStyles from './styles.module.scss';\n\nexport interface CheckboxProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the checkbox - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** input id of the checkbox */\n  inputId?: string;\n  /** Changes the visuals of the checkbox */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the checkbox */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nexport const Checkbox: React.FC<CheckboxProps> = props => {\n  const {\n    className,\n    checked = false,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId: errorTextIdProp,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    onChange,\n    ref,\n  } = props;\n  const [isChecked, setIsChecked] = useState(checked);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const onWhite = onColor === FormOnColor.onwhite;\n  const onGrey = onColor === FormOnColor.ongrey;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onInvalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const large = size === FormSize.large;\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const checkboxWrapperClasses = classNames(checkboxStyles['checkbox-wrapper'], {\n    [checkboxStyles['checkbox-wrapper--large']]: large,\n  });\n  const checkboxLabelClasses = classNames(checkboxStyles['checkbox-label'], {\n    [checkboxStyles['checkbox-label--disabled']]: disabled,\n    [checkboxStyles['checkbox-label--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label--large']]: large,\n    [checkboxStyles['checkbox-label__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__large--focus']]: large && isFocused,\n    [checkboxStyles['checkbox-label__large--on-white']]: large && onWhite,\n    [checkboxStyles['checkbox-label__large--on-grey']]: large && onGrey,\n    [checkboxStyles['checkbox-label__large--on-blueberry']]: large && onBlueberry,\n    [checkboxStyles['checkbox-label__large--on-invalid']]: large && onInvalid,\n    [checkboxStyles['checkbox-label__large--disabled']]: large && disabled,\n  });\n  const checkboxClasses = classNames(checkboxStyles.checkbox, className);\n  const checkboxIconWrapperClasses = classNames(checkboxStyles['checkbox__icon-wrapper'], {\n    [checkboxStyles['checkbox__icon-wrapper--on-white']]: onWhite,\n    [checkboxStyles['checkbox__icon-wrapper--on-grey']]: onGrey,\n    [checkboxStyles['checkbox__icon-wrapper--on-invalid']]: onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper--disabled']]: disabled,\n    [checkboxStyles['checkbox__icon-wrapper__regular--checked']]: !large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__regular--invalid']]: !large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__regular--on-dark']]: !large && isChecked && onDark,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__large--invalid']]: large && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper--on-dark']]: onDark,\n    [checkboxStyles['checkbox__icon-wrapper--on-blueberry']]: onBlueberry,\n    [checkboxStyles['checkbox__icon-wrapper--invalid']]: onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--disabled']]: disabled && large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked--disabled']]: disabled && large && isChecked,\n  });\n  const labelTextClasses = classNames(checkboxStyles['checkbox-label__text'], {\n    [checkboxStyles['checkbox-label__text__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__text__large--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox-label__text--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label__text--disabled']]: disabled,\n  });\n\n  let iconColor = getColor('white');\n  if (onDark || (large && isChecked)) iconColor = getColor('blueberry', 900);\n  if (onInvalid && large && isChecked) iconColor = getColor('white');\n  if (disabled) iconColor = getColor('neutral', 700);\n\n  useEffect(() => {\n    setIsChecked(checked);\n  }, [checked]);\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n\n    setIsChecked(!isChecked);\n  };\n\n  const getLabelContent = (): React.ReactNode => {\n    return (\n      <>\n        <input\n          id={inputId}\n          name={name}\n          className={checkboxClasses}\n          type=\"checkbox\"\n          checked={isChecked}\n          disabled={disabled}\n          value={value}\n          ref={mergedRefs}\n          aria-describedby={getAriaDescribedBy(props, errorTextId)}\n          aria-invalid={error}\n          required={required}\n          onChange={onChangeHandler}\n        />\n        <span className={checkboxIconWrapperClasses}>\n          {isChecked && <Icon color={iconColor} className={checkboxStyles['checkbox__icon']} svgIcon={Check} size={IconSize.XSmall} />}\n        </span>\n      </>\n    );\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n        {renderLabelAsParent({\n          label: label,\n          children: getLabelContent(),\n          inputId: inputId,\n          onColor: onColor as FormOnColor,\n          labelClassName: checkboxLabelClasses,\n          labelTextClassName: labelTextClasses,\n          sublabelWrapperClassName: checkboxStyles['checkbox-sublabel-wrapper'],\n          large: large,\n          afterLabelChildrenClassName: checkboxStyles['checkbox-afterlabelchildren-wrapper'],\n        })}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nexport default Checkbox;\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":["Checkbox: React.FC<CheckboxProps>"],"sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { AnalyticsId, FormOnColor, FormSize, IconSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys/color';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport Check from '../Icons/Check';\nimport { getLabelText, renderLabelAsParent } from '../Label/utils';\n\nimport checkboxStyles from './styles.module.scss';\n\nexport interface CheckboxProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the checkbox - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** input id of the checkbox */\n  inputId?: string;\n  /** Changes the visuals of the checkbox */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the checkbox */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nexport const Checkbox: React.FC<CheckboxProps> = props => {\n  const {\n    className,\n    checked = false,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId: errorTextIdProp,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    onChange,\n    ref,\n  } = props;\n  const [isChecked, setIsChecked] = useState(checked);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const onWhite = onColor === FormOnColor.onwhite;\n  const onGrey = onColor === FormOnColor.ongrey;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onInvalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const large = size === FormSize.large;\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const checkboxWrapperClasses = classNames(checkboxStyles['checkbox-wrapper'], {\n    [checkboxStyles['checkbox-wrapper--large']]: large,\n  });\n  const checkboxLabelClasses = classNames(checkboxStyles['checkbox-label'], {\n    [checkboxStyles['checkbox-label--disabled']]: disabled,\n    [checkboxStyles['checkbox-label--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label--large']]: large,\n    [checkboxStyles['checkbox-label__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__large--focus']]: large && isFocused,\n    [checkboxStyles['checkbox-label__large--on-white']]: large && onWhite,\n    [checkboxStyles['checkbox-label__large--on-grey']]: large && onGrey,\n    [checkboxStyles['checkbox-label__large--on-blueberry']]: large && onBlueberry,\n    [checkboxStyles['checkbox-label__large--on-invalid']]: large && onInvalid,\n    [checkboxStyles['checkbox-label__large--disabled']]: large && disabled,\n  });\n  const checkboxClasses = classNames(checkboxStyles.checkbox, className);\n  const checkboxIconWrapperClasses = classNames(checkboxStyles['checkbox__icon-wrapper'], {\n    [checkboxStyles['checkbox__icon-wrapper--on-white']]: onWhite,\n    [checkboxStyles['checkbox__icon-wrapper--on-grey']]: onGrey,\n    [checkboxStyles['checkbox__icon-wrapper--on-invalid']]: onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper--disabled']]: disabled,\n    [checkboxStyles['checkbox__icon-wrapper__regular--checked']]: !large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__regular--invalid']]: !large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__regular--on-dark']]: !large && isChecked && onDark,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__large--invalid']]: large && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper--on-dark']]: onDark,\n    [checkboxStyles['checkbox__icon-wrapper--on-blueberry']]: onBlueberry,\n    [checkboxStyles['checkbox__icon-wrapper--invalid']]: onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--disabled']]: disabled && large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked--disabled']]: disabled && large && isChecked,\n  });\n  const labelTextClasses = classNames(checkboxStyles['checkbox-label__text'], {\n    [checkboxStyles['checkbox-label__text__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__text__large--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox-label__text--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label__text--disabled']]: disabled,\n  });\n\n  let iconColor = getColor('white');\n  if (onDark || (large && isChecked)) iconColor = getColor('blueberry', 900);\n  if (onInvalid && large && isChecked) iconColor = getColor('white');\n  if (disabled) iconColor = getColor('neutral', 700);\n\n  useEffect(() => {\n    setIsChecked(checked);\n  }, [checked]);\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n\n    setIsChecked(!isChecked);\n  };\n\n  const getLabelContent = (): React.ReactNode => {\n    return (\n      <>\n        <input\n          id={inputId}\n          name={name}\n          className={checkboxClasses}\n          type=\"checkbox\"\n          checked={isChecked}\n          disabled={disabled}\n          value={value}\n          ref={mergedRefs}\n          aria-describedby={getAriaDescribedBy(props, errorTextId)}\n          aria-invalid={error}\n          required={required}\n          onChange={onChangeHandler}\n        />\n        <span className={checkboxIconWrapperClasses}>\n          {isChecked && <Icon color={iconColor} className={checkboxStyles['checkbox__icon']} svgIcon={Check} size={IconSize.XSmall} />}\n        </span>\n      </>\n    );\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n        {renderLabelAsParent({\n          label: label,\n          children: getLabelContent(),\n          inputId: inputId,\n          onColor: onColor as FormOnColor,\n          labelClassName: checkboxLabelClasses,\n          labelTextClassName: labelTextClasses,\n          sublabelWrapperClassName: checkboxStyles['checkbox-sublabel-wrapper'],\n          large: large,\n          afterLabelChildrenClassName: checkboxStyles['checkbox-afterlabelchildren-wrapper'],\n        })}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nexport default Checkbox;\n"],"mappings":"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"}

package/lib/Close.js

@@ -4,7 +4,7 @@ import { n as mergeRefs } from "./refs.js";
 import { t as Icon_default } from "./Icon.js";
 import { t as useIsMobileBreakpoint } from "./useIsMobileBreakpoint.js";
 import { t as X_default } from "./X.js";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/Close/styles.module.scss";
 var Close = (props) => {
@@ -15,7 +15,7 @@ var Close = (props) => {
 	if (color === "black") iconColor = "black";
 	else if (color === "plum") iconColor = "var(--core-color-plum-700)";
 	else iconColor = "var(--color-action-graphics-onlight)";
-	const closeClasses = classNames(styles.close, { [styles["close--small"]]: small }, className);
+	const closeClasses = cn(styles.close, { [styles["close--small"]]: small }, className);
 	return /* @__PURE__ */ jsx("button", {
 		ref: mergeRefs([ref, refObject]),
 		"data-testid": testId,
@@ -25,7 +25,7 @@ var Close = (props) => {
 		onClick,
 		type: "button",
 		children: /* @__PURE__ */ jsx("span", {
-			className: classNames(styles["close__inner-container"], {
+			className: cn(styles["close__inner-container"], {
 				[styles["close__inner-container--small"]]: small,
 				[styles["close__inner-container--plum"]]: color == "plum"
 			}),

package/lib/Close.js.map

@@ -1 +1 @@
-{"version":3,"file":"Close.js","names":["Close: React.FC<CloseProps>"],"sources":["../src/components/Close/Close.tsx","../src/components/Close/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface CloseProps {\n  /** Keeps the icon small for all screen sizes */\n  small?: boolean;\n  /** Function is called when user clicks the button */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Gives color to the svg */\n  color?: 'blueberry' | 'black' | 'plum';\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLButtonElement | null>;\n}\n\nconst Close: React.FC<CloseProps> = props => {\n  const { small, testId, ariaLabel = 'Lukk', onClick, className, color = 'blueberry', ref } = props;\n  const { refObject, isHovered } = usePseudoClasses();\n\n  const iconSize = useIsMobileBreakpoint() || small ? 38 : 48;\n\n  let iconColor;\n  if (color === 'black') {\n    iconColor = 'black';\n  } else if (color === 'plum') {\n    iconColor = 'var(--core-color-plum-700)';\n  } else {\n    iconColor = 'var(--color-action-graphics-onlight)';\n  }\n\n  const closeClasses = classNames(styles.close, { [styles['close--small']]: small }, className);\n\n  return (\n    <button\n      ref={mergeRefs([ref, refObject])}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Close}\n      className={closeClasses}\n      aria-label={ariaLabel}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <span\n        className={classNames(styles['close__inner-container'], {\n          [styles['close__inner-container--small']]: small,\n          [styles['close__inner-container--plum']]: color == 'plum',\n        })}\n      >\n        <Icon svgIcon={X} color={iconColor} size={iconSize} isHovered={isHovered} />\n      </span>\n    </button>\n  );\n};\n\nexport default Close;\n","import Close from './Close';\nexport * from './Close';\nexport default Close;\n"],"mappings":";;;;;;;;;AA4BA,IAAMA,SAA8B,UAAS;CAC3C,MAAM,EAAE,OAAO,QAAQ,YAAY,QAAQ,SAAS,WAAW,QAAQ,aAAa,QAAQ;CAC5F,MAAM,EAAE,WAAW,cAAc,kBAAkB;CAEnD,MAAM,WAAW,uBAAuB,IAAI,QAAQ,KAAK;CAEzD,IAAI;AACJ,KAAI,UAAU,QACZ,aAAY;UACH,UAAU,OACnB,aAAY;KAEZ,aAAY;CAGd,MAAM,eAAe,WAAW,OAAO,OAAO,GAAG,OAAO,kBAAkB,OAAO,EAAE,UAAU;AAE7F,QACE,oBAAC,UAAA;EACC,KAAK,UAAU,CAAC,KAAK,UAAU,CAAC;EAChC,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,cAAY;EACH;EACT,MAAK;YAEL,oBAAC,QAAA;GACC,WAAW,WAAW,OAAO,2BAA2B;KACrD,OAAO,mCAAmC;KAC1C,OAAO,kCAAkC,SAAS;IACpD,CAAC;aAEF,oBAAC,cAAA;IAAK,SAAS;IAAG,OAAO;IAAW,MAAM;IAAqB;KAAa;IACvE;GACA;;AC7Db,IAAA,kBDiEe"}
+{"version":3,"file":"Close.js","names":["Close: React.FC<CloseProps>"],"sources":["../src/components/Close/Close.tsx","../src/components/Close/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface CloseProps {\n  /** Keeps the icon small for all screen sizes */\n  small?: boolean;\n  /** Function is called when user clicks the button */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Gives color to the svg */\n  color?: 'blueberry' | 'black' | 'plum';\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLButtonElement | null>;\n}\n\nconst Close: React.FC<CloseProps> = props => {\n  const { small, testId, ariaLabel = 'Lukk', onClick, className, color = 'blueberry', ref } = props;\n  const { refObject, isHovered } = usePseudoClasses();\n\n  const iconSize = useIsMobileBreakpoint() || small ? 38 : 48;\n\n  let iconColor;\n  if (color === 'black') {\n    iconColor = 'black';\n  } else if (color === 'plum') {\n    iconColor = 'var(--core-color-plum-700)';\n  } else {\n    iconColor = 'var(--color-action-graphics-onlight)';\n  }\n\n  const closeClasses = classNames(styles.close, { [styles['close--small']]: small }, className);\n\n  return (\n    <button\n      ref={mergeRefs([ref, refObject])}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Close}\n      className={closeClasses}\n      aria-label={ariaLabel}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <span\n        className={classNames(styles['close__inner-container'], {\n          [styles['close__inner-container--small']]: small,\n          [styles['close__inner-container--plum']]: color == 'plum',\n        })}\n      >\n        <Icon svgIcon={X} color={iconColor} size={iconSize} isHovered={isHovered} />\n      </span>\n    </button>\n  );\n};\n\nexport default Close;\n","import Close from './Close';\nexport * from './Close';\nexport default Close;\n"],"mappings":";;;;;;;;;AA4BA,IAAMA,SAA8B,UAAS;CAC3C,MAAM,EAAE,OAAO,QAAQ,YAAY,QAAQ,SAAS,WAAW,QAAQ,aAAa,QAAQ;CAC5F,MAAM,EAAE,WAAW,cAAc,kBAAkB;CAEnD,MAAM,WAAW,uBAAuB,IAAI,QAAQ,KAAK;CAEzD,IAAI;AACJ,KAAI,UAAU,QACZ,aAAY;UACH,UAAU,OACnB,aAAY;KAEZ,aAAY;CAGd,MAAM,eAAe,GAAW,OAAO,OAAO,GAAG,OAAO,kBAAkB,OAAO,EAAE,UAAU;AAE7F,QACE,oBAAC,UAAA;EACC,KAAK,UAAU,CAAC,KAAK,UAAU,CAAC;EAChC,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,cAAY;EACH;EACT,MAAK;YAEL,oBAAC,QAAA;GACC,WAAW,GAAW,OAAO,2BAA2B;KACrD,OAAO,mCAAmC;KAC1C,OAAO,kCAAkC,SAAS;IACpD,CAAC;aAEF,oBAAC,cAAA;IAAK,SAAS;IAAG,OAAO;IAAW,MAAM;IAAqB;KAAa;IACvE;GACA;;AC7Db,IAAA,kBDiEe"}

package/lib/DictionaryTrigger.js

@@ -1,10 +1,10 @@
 import { n as AnalyticsId } from "./constants2.js";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/DictionaryTrigger/styles.module.scss";
 var DictionaryTrigger = (props) => {
 	const { children, selected = false, className, testId, ref, ...rest } = props;
-	const triggerClasses = classNames(styles.dictionarytrigger, className);
+	const triggerClasses = cn(styles.dictionarytrigger, className);
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
 		"data-testid": testId,

package/lib/DictionaryTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"DictionaryTrigger.js","names":["DictionaryTrigger: React.FC<DictionaryTriggerProps>"],"sources":["../src/components/DictionaryTrigger/DictionaryTrigger.tsx","../src/components/DictionaryTrigger/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface DictionaryTriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onFocus' | 'onBlur'> {\n  /**\n   * Sets the content of the trigger.\n   */\n  children: React.ReactNode;\n  /**\n   * Indicates that the trigger is in use.\n   */\n  selected?: boolean;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Sets the data-testid attribute.\n   */\n  testId?: string;\n  /**\n   * ref that is passed to the component\n   */\n  ref?: React.Ref<HTMLButtonElement | null>;\n}\n\nconst DictionaryTrigger: React.FC<DictionaryTriggerProps> = (props: DictionaryTriggerProps) => {\n  const { children, selected = false, className, testId, ref, ...rest } = props;\n  const triggerClasses = classNames(styles.dictionarytrigger, className);\n\n  return (\n    <button\n      type=\"button\"\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.DictionaryTrigger}\n      className={triggerClasses}\n      aria-expanded={selected}\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n};\n\nDictionaryTrigger.displayName = 'DictionaryTrigger';\n\nexport default DictionaryTrigger;\n","import DictionaryTrigger from './DictionaryTrigger';\nexport * from './DictionaryTrigger';\nexport default DictionaryTrigger;\n"],"mappings":";;;;AA6BA,IAAMA,qBAAuD,UAAkC;CAC7F,MAAM,EAAE,UAAU,WAAW,OAAO,WAAW,QAAQ,KAAK,GAAG,SAAS;CACxE,MAAM,iBAAiB,WAAW,OAAO,mBAAmB,UAAU;AAEtE,QACE,oBAAC,UAAA;EACC,MAAK;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,iBAAe;EACV;EACL,GAAI;EAEH;GACM;;AAIb,kBAAkB,cAAc;AC9ChC,IAAA,8BDgDe"}
+{"version":3,"file":"DictionaryTrigger.js","names":["DictionaryTrigger: React.FC<DictionaryTriggerProps>"],"sources":["../src/components/DictionaryTrigger/DictionaryTrigger.tsx","../src/components/DictionaryTrigger/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface DictionaryTriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onFocus' | 'onBlur'> {\n  /**\n   * Sets the content of the trigger.\n   */\n  children: React.ReactNode;\n  /**\n   * Indicates that the trigger is in use.\n   */\n  selected?: boolean;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Sets the data-testid attribute.\n   */\n  testId?: string;\n  /**\n   * ref that is passed to the component\n   */\n  ref?: React.Ref<HTMLButtonElement | null>;\n}\n\nconst DictionaryTrigger: React.FC<DictionaryTriggerProps> = (props: DictionaryTriggerProps) => {\n  const { children, selected = false, className, testId, ref, ...rest } = props;\n  const triggerClasses = classNames(styles.dictionarytrigger, className);\n\n  return (\n    <button\n      type=\"button\"\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.DictionaryTrigger}\n      className={triggerClasses}\n      aria-expanded={selected}\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n};\n\nDictionaryTrigger.displayName = 'DictionaryTrigger';\n\nexport default DictionaryTrigger;\n","import DictionaryTrigger from './DictionaryTrigger';\nexport * from './DictionaryTrigger';\nexport default DictionaryTrigger;\n"],"mappings":";;;;AA6BA,IAAMA,qBAAuD,UAAkC;CAC7F,MAAM,EAAE,UAAU,WAAW,OAAO,WAAW,QAAQ,KAAK,GAAG,SAAS;CACxE,MAAM,iBAAiB,GAAW,OAAO,mBAAmB,UAAU;AAEtE,QACE,oBAAC,UAAA;EACC,MAAK;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,iBAAe;EACV;EACL,GAAI;EAEH;GACM;;AAIb,kBAAkB,cAAc;AC9ChC,IAAA,8BDgDe"}

package/lib/Drawer.js

@@ -12,13 +12,19 @@ import { t as Close_default } from "./Close.js";
 import { t as useReturnFocusOnUnmount } from "./useReturnFocusOnUnmount.js";
 import { n as enableBodyScroll, t as disableBodyScroll } from "./scroll.js";
 import { t as Title_default } from "./Title2.js";
-import classNames from "classnames";
+import cn from "classnames";
 import React, { useEffect, useRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { AnimatePresence, useAnimate, usePresence } from "motion/react";
 import styles from "./components/Drawer/styles.module.scss";
-var HN_Designsystem_Drawer_en_GB_default = { ariaLabelCloseBtn: "Close" };
-var HN_Designsystem_Drawer_nb_NO_default = { ariaLabelCloseBtn: "Lukk" };
+var HN_Designsystem_Drawer_en_GB_default = {
+	ariaLabelCloseBtn: "Close",
+	ariaLabelBackButton: "Go back"
+};
+var HN_Designsystem_Drawer_nb_NO_default = {
+	ariaLabelCloseBtn: "Lukk",
+	ariaLabelBackButton: "Gå tilbake"
+};
 const getResources = (language) => {
 	switch (language) {
 		case LanguageLocales.ENGLISH: return HN_Designsystem_Drawer_en_GB_default;
@@ -60,7 +66,7 @@ var InnerDrawer = (props) => {
 		...resources
 	};
 	const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;
-	const headerStyling = classNames(styles.drawer__header, headerClasses);
+	const headerStyling = cn(styles.drawer__header, headerClasses);
 	const hasFooterContent = typeof footerContent !== "undefined" && footerContent || onPrimaryAction || onSecondaryAction;
 	useFocusTrap_default(containerRef, true);
 	useReturnFocusOnUnmount(containerRef);
@@ -147,7 +153,7 @@ var InnerDrawer = (props) => {
 			ref: overlayRef,
 			"aria-hidden": "true"
 		}), /* @__PURE__ */ jsxs("div", {
-			className: classNames(styles.drawer__container, { [styles["drawer__container--right"]]: desktopDirection === "right" }),
+			className: cn(styles.drawer__container, { [styles["drawer__container--right"]]: desktopDirection === "right" }),
 			ref: containerRef,
 			role: "dialog",
 			"aria-modal": "true",
@@ -173,7 +179,7 @@ var InnerDrawer = (props) => {
 						})]
 					}),
 					/* @__PURE__ */ jsx("div", {
-						className: classNames(styles["drawer__content__shadow"], styles["drawer__content__shadow--top"]),
+						className: cn(styles["drawer__content__shadow"], styles["drawer__content__shadow--top"]),
 						style: {
 							opacity: !topContentVisible && contentIsScrollable ? 1 : 0,
 							top: headerHeight
@@ -198,7 +204,7 @@ var InnerDrawer = (props) => {
 						]
 					}),
 					/* @__PURE__ */ jsx("div", {
-						className: classNames(styles["drawer__content__shadow"], styles["drawer__content__shadow--bottom"]),
+						className: cn(styles["drawer__content__shadow"], styles["drawer__content__shadow--bottom"]),
 						style: {
 							opacity: !bottomContentVisible && contentIsScrollable ? 1 : 0,
 							bottom: hasFooterContent ? footerHeight : 0

package/lib/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","names":["Drawer: React.FC<DrawerProps>","InnerDrawer: React.FC<InnerDrawerProps>","mergedResources: HNDesignsystemDrawer"],"sources":["../src/resources/HN.Designsystem.Drawer.en-GB.json","../src/resources/HN.Designsystem.Drawer.nb-NO.json","../src/components/Drawer/resourceHelper.ts","../src/components/Drawer/Drawer.tsx","../src/components/Drawer/index.ts"],"sourcesContent":["{\n  \"ariaLabelCloseBtn\": \"Close\"\n}\n","{\n  \"ariaLabelCloseBtn\": \"Lukk\"\n}\n","import type { HNDesignsystemDrawer } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Drawer.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Drawer.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDrawer => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { AnimatePresence, useAnimate, usePresence } from 'motion/react';\n\nimport type { HNDesignsystemDrawer } from '../../resources/Resources';\nimport type { TitleTags } from '../Title';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, KeyboardEventKey, LanguageLocales, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useKeyboardEvent } from '../../hooks/useKeyboardEvent';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { disableBodyScroll, enableBodyScroll } from '../../utils/scroll';\nimport uuid from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\ntype DesktopDirections = 'left' | 'right';\n\nexport interface DrawerProps extends InnerDrawerProps {\n  /** Opens and closes the drawer */\n  isOpen: boolean;\n}\n\nexport interface InnerDrawerProps {\n  /** Sets the aria-label of the drawer */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the drawer */\n  ariaLabelledBy?: string;\n  /** Sets the style of the Drawer Close button. Meant for use by HelpDrawer */\n  closeColor?: 'blueberry' | 'plum';\n  /** Direction of the drawer on desktop. Default: left */\n  desktopDirection?: DesktopDirections;\n  /** Sets the style of the Drawer header */\n  headerClasses?: string;\n  /** Title to display in the header of the drawer */\n  title: string;\n  /** id of the drawer title */\n  titleId?: string;\n  /** Changes the underlying element of the title. Default: h3 */\n  titleHtmlMarkup?: TitleTags;\n  /** Callback that triggers when clicking on close button or outside the drawer, update isOpen state when this triggers */\n  onRequestClose?: () => void;\n  /** Optional footer content that can be rendered instead of default CTA(s) */\n  footerContent?: React.ReactNode;\n  /** Main content of the drawer */\n  children?: React.ReactNode;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Primary CTA callback */\n  onPrimaryAction?: () => void;\n  /** Text for primary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n  primaryActionText?: string;\n  /** Text for secondary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n  secondaryActionText?: string;\n  /** Secondary CTA callback */\n  onSecondaryAction?: () => void;\n  /** Customize the z-index of the drawer */\n  zIndex?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemDrawer>;\n  /** Sets mobile styling and animation from outer level Drawer */\n  isMobile?: boolean;\n}\n\nconst Drawer: React.FC<DrawerProps> = props => {\n  const { isOpen, ...rest } = props;\n  const isMobile = useIsMobileBreakpoint();\n\n  return <AnimatePresence>{isOpen && <InnerDrawer {...rest} isMobile={isMobile} />}</AnimatePresence>;\n};\n\nconst InnerDrawer: React.FC<InnerDrawerProps> = props => {\n  const {\n    ariaLabel,\n    ariaLabelledBy,\n    children,\n    closeColor = 'blueberry',\n    desktopDirection = 'left',\n    footerContent,\n    headerClasses,\n    noCloseButton = false,\n    onPrimaryAction,\n    onRequestClose,\n    onSecondaryAction,\n    primaryActionText,\n    secondaryActionText,\n    title,\n    titleHtmlMarkup = 'h3',\n    titleId = uuid(),\n    zIndex = ZIndex.OverlayScreen,\n    resources,\n    isMobile,\n  } = props;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledBy, fallbackId: titleId });\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  // topContent and bottomContent are used to detect scroll position for shadow effects\n  const topContent = useRef<HTMLDivElement>(null);\n  const bottomContent = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null);\n  const footerRef = useRef<HTMLDivElement>(null);\n  const [scope, animate] = useAnimate();\n  const [isPresent, safeToRemove] = usePresence();\n  const [headerHeight, setHeaderHeight] = React.useState(0);\n  const [footerHeight, setFooterHeight] = React.useState(0);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContentVisible = useIsVisible(bottomContent, 0);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemDrawer = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;\n  const headerStyling = classNames(styles.drawer__header, headerClasses);\n  const hasFooterContent = (typeof footerContent !== 'undefined' && footerContent) || onPrimaryAction || onSecondaryAction;\n\n  useFocusTrap(containerRef, true);\n  useReturnFocusOnUnmount(containerRef);\n  useOutsideEvent(containerRef, () => {\n    if (onRequestClose) onRequestClose();\n  });\n  useKeyboardEvent(containerRef, () => onRequestClose && onRequestClose(), [KeyboardEventKey.Escape]);\n\n  // Close animasjon, vi kaller `onClose()` til slutt\n  const closeDrawer = (): void => {\n    if (!overlayRef.current || !containerRef.current) return;\n\n    animate(overlayRef.current, { opacity: 0, pointerEvents: 'none' }, { duration: 0.3, ease: 'easeInOut' });\n\n    if (isMobile) {\n      animate(\n        containerRef.current,\n        { y: '100%' },\n        {\n          duration: 0.3,\n          ease: 'easeInOut',\n          onComplete: () => {\n            if (safeToRemove) safeToRemove();\n          },\n        }\n      );\n    } else {\n      animate(\n        containerRef.current,\n        { x: desktopDirection === 'left' ? '-100%' : '100%' },\n        {\n          duration: 0.3,\n          ease: 'easeInOut',\n          onComplete: () => {\n            if (safeToRemove) safeToRemove();\n          },\n        }\n      );\n    }\n  };\n\n  useEffect(() => {\n    containerRef.current?.focus();\n    disableBodyScroll();\n\n    return (): void => {\n      enableBodyScroll();\n    };\n  }, []);\n\n  // Measure header and footer heights\n  useEffect(() => {\n    const updateHeights = (): void => {\n      if (headerRef.current) {\n        setHeaderHeight(headerRef.current.offsetHeight);\n      }\n      if (footerRef.current) {\n        setFooterHeight(footerRef.current.offsetHeight);\n      }\n    };\n\n    updateHeights();\n\n    // Update heights when content changes\n    const resizeObserver = new ResizeObserver(updateHeights);\n    if (headerRef.current) {\n      resizeObserver.observe(headerRef.current);\n    }\n    if (footerRef.current) {\n      resizeObserver.observe(footerRef.current);\n    }\n\n    return (): void => {\n      resizeObserver.disconnect();\n    };\n  }, [hasFooterContent]);\n\n  // Open animation.\n  useEffect(() => {\n    if (!overlayRef.current || !containerRef.current) return;\n\n    if (!isPresent) {\n      closeDrawer();\n      return;\n    }\n\n    if (isMobile) {\n      animate(containerRef.current, { y: '0' }, { duration: 0.3, ease: 'easeInOut' });\n    } else {\n      animate(containerRef.current, { x: '0' }, { duration: 0.3, ease: 'easeInOut' });\n    }\n\n    animate(overlayRef.current, { opacity: 1, pointerEvents: 'auto' }, { duration: 0.3, ease: 'easeInOut' });\n  }, [isPresent]);\n\n  const handleCTA = (callback?: () => void): void => {\n    if (callback) {\n      callback();\n    }\n  };\n\n  return (\n    <div className={styles.drawer} ref={scope} style={{ zIndex }} data-analyticsid={AnalyticsId.Drawer}>\n      <div className={styles.drawer__overlay} ref={overlayRef} aria-hidden=\"true\" />\n      <div\n        className={classNames(styles.drawer__container, {\n          [styles['drawer__container--right']]: desktopDirection === 'right',\n        })}\n        ref={containerRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabIndex={-1}\n        {...ariaLabelAttributes}\n      >\n        <div className={styles.drawer__container__inner}>\n          <div className={headerStyling} ref={headerRef}>\n            <Title\n              id={ariaLabelAttributes?.['aria-labelledby']}\n              className={styles['drawer__header__title']}\n              htmlMarkup={titleHtmlMarkup}\n              appearance=\"title3\"\n            >\n              {title}\n            </Title>\n            {!noCloseButton && onRequestClose != undefined && (\n              <Close\n                ariaLabel={mergedResources.ariaLabelCloseBtn}\n                color={closeColor}\n                onClick={onRequestClose}\n                className={styles['drawer__header__close-button']}\n              />\n            )}\n          </div>\n          <div\n            className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--top'])}\n            style={{\n              opacity: !topContentVisible && contentIsScrollable ? 1 : 0,\n              top: headerHeight,\n            }}\n          />\n          <div\n            className={styles.drawer__content}\n            tabIndex={contentIsScrollable ? 0 : undefined}\n            role={contentIsScrollable ? 'region' : undefined}\n            {...(contentIsScrollable ? ariaLabelAttributes : {})}\n            ref={contentRef}\n          >\n            <div ref={topContent} />\n            <div className={styles['drawer__content__children']}>{children}</div>\n            <div ref={bottomContent} style={{ height: '1px' }} />\n          </div>\n          <div\n            className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--bottom'])}\n            style={{\n              opacity: !bottomContentVisible && contentIsScrollable ? 1 : 0,\n              bottom: hasFooterContent ? footerHeight : 0,\n            }}\n          />\n        </div>\n        {hasFooterContent && (\n          <div className={styles.drawer__footer} ref={footerRef}>\n            {footerContent ? (\n              footerContent\n            ) : (\n              <>\n                {onPrimaryAction && <Button onClick={() => handleCTA(onPrimaryAction)}>{primaryActionText}</Button>}\n                {onSecondaryAction && (\n                  <Button variant=\"borderless\" onClick={() => handleCTA(onSecondaryAction)}>\n                    {secondaryActionText}\n                  </Button>\n                )}\n              </>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Drawer;\n","import Drawer from './Drawer';\nexport * from './Drawer';\nexport default Drawer;\n"],"mappings":"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"}
+{"version":3,"file":"Drawer.js","names":["Drawer: React.FC<DrawerProps>","InnerDrawer: React.FC<InnerDrawerProps>","mergedResources: HNDesignsystemDrawer"],"sources":["../src/resources/HN.Designsystem.Drawer.en-GB.json","../src/resources/HN.Designsystem.Drawer.nb-NO.json","../src/components/Drawer/resourceHelper.ts","../src/components/Drawer/Drawer.tsx","../src/components/Drawer/index.ts"],"sourcesContent":["{\n  \"ariaLabelCloseBtn\": \"Close\",\n  \"ariaLabelBackButton\": \"Go back\"\n}\n","{\n  \"ariaLabelCloseBtn\": \"Lukk\",\n  \"ariaLabelBackButton\": \"Gå tilbake\"\n}\n","import type { HNDesignsystemDrawer } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Drawer.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Drawer.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDrawer => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { AnimatePresence, useAnimate, usePresence } from 'motion/react';\n\nimport type { HNDesignsystemDrawer } from '../../resources/Resources';\nimport type { TitleTags } from '../Title';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, KeyboardEventKey, LanguageLocales, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useKeyboardEvent } from '../../hooks/useKeyboardEvent';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { disableBodyScroll, enableBodyScroll } from '../../utils/scroll';\nimport uuid from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\ntype DesktopDirections = 'left' | 'right';\n\nexport interface DrawerProps extends InnerDrawerProps {\n  /** Opens and closes the drawer */\n  isOpen: boolean;\n}\n\nexport interface InnerDrawerProps {\n  /** Sets the aria-label of the drawer */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the drawer */\n  ariaLabelledBy?: string;\n  /** Sets the style of the Drawer Close button. Meant for use by HelpDrawer */\n  closeColor?: 'blueberry' | 'plum';\n  /** Direction of the drawer on desktop. Default: left */\n  desktopDirection?: DesktopDirections;\n  /** Sets the style of the Drawer header */\n  headerClasses?: string;\n  /** Title to display in the header of the drawer */\n  title: string;\n  /** id of the drawer title */\n  titleId?: string;\n  /** Changes the underlying element of the title. Default: h3 */\n  titleHtmlMarkup?: TitleTags;\n  /** Callback that triggers when clicking on close button or outside the drawer, update isOpen state when this triggers */\n  onRequestClose?: () => void;\n  /** Optional footer content that can be rendered instead of default CTA(s) */\n  footerContent?: React.ReactNode;\n  /** Main content of the drawer */\n  children?: React.ReactNode;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Primary CTA callback */\n  onPrimaryAction?: () => void;\n  /** Text for primary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n  primaryActionText?: string;\n  /** Text for secondary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n  secondaryActionText?: string;\n  /** Secondary CTA callback */\n  onSecondaryAction?: () => void;\n  /** Customize the z-index of the drawer */\n  zIndex?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemDrawer>;\n  /** Sets mobile styling and animation from outer level Drawer */\n  isMobile?: boolean;\n}\n\nconst Drawer: React.FC<DrawerProps> = props => {\n  const { isOpen, ...rest } = props;\n  const isMobile = useIsMobileBreakpoint();\n\n  return <AnimatePresence>{isOpen && <InnerDrawer {...rest} isMobile={isMobile} />}</AnimatePresence>;\n};\n\nconst InnerDrawer: React.FC<InnerDrawerProps> = props => {\n  const {\n    ariaLabel,\n    ariaLabelledBy,\n    children,\n    closeColor = 'blueberry',\n    desktopDirection = 'left',\n    footerContent,\n    headerClasses,\n    noCloseButton = false,\n    onPrimaryAction,\n    onRequestClose,\n    onSecondaryAction,\n    primaryActionText,\n    secondaryActionText,\n    title,\n    titleHtmlMarkup = 'h3',\n    titleId = uuid(),\n    zIndex = ZIndex.OverlayScreen,\n    resources,\n    isMobile,\n  } = props;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledBy, fallbackId: titleId });\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  // topContent and bottomContent are used to detect scroll position for shadow effects\n  const topContent = useRef<HTMLDivElement>(null);\n  const bottomContent = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null);\n  const footerRef = useRef<HTMLDivElement>(null);\n  const [scope, animate] = useAnimate();\n  const [isPresent, safeToRemove] = usePresence();\n  const [headerHeight, setHeaderHeight] = React.useState(0);\n  const [footerHeight, setFooterHeight] = React.useState(0);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContentVisible = useIsVisible(bottomContent, 0);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemDrawer = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;\n  const headerStyling = classNames(styles.drawer__header, headerClasses);\n  const hasFooterContent = (typeof footerContent !== 'undefined' && footerContent) || onPrimaryAction || onSecondaryAction;\n\n  useFocusTrap(containerRef, true);\n  useReturnFocusOnUnmount(containerRef);\n  useOutsideEvent(containerRef, () => {\n    if (onRequestClose) onRequestClose();\n  });\n  useKeyboardEvent(containerRef, () => onRequestClose && onRequestClose(), [KeyboardEventKey.Escape]);\n\n  // Close animasjon, vi kaller `onClose()` til slutt\n  const closeDrawer = (): void => {\n    if (!overlayRef.current || !containerRef.current) return;\n\n    animate(overlayRef.current, { opacity: 0, pointerEvents: 'none' }, { duration: 0.3, ease: 'easeInOut' });\n\n    if (isMobile) {\n      animate(\n        containerRef.current,\n        { y: '100%' },\n        {\n          duration: 0.3,\n          ease: 'easeInOut',\n          onComplete: () => {\n            if (safeToRemove) safeToRemove();\n          },\n        }\n      );\n    } else {\n      animate(\n        containerRef.current,\n        { x: desktopDirection === 'left' ? '-100%' : '100%' },\n        {\n          duration: 0.3,\n          ease: 'easeInOut',\n          onComplete: () => {\n            if (safeToRemove) safeToRemove();\n          },\n        }\n      );\n    }\n  };\n\n  useEffect(() => {\n    containerRef.current?.focus();\n    disableBodyScroll();\n\n    return (): void => {\n      enableBodyScroll();\n    };\n  }, []);\n\n  // Measure header and footer heights\n  useEffect(() => {\n    const updateHeights = (): void => {\n      if (headerRef.current) {\n        setHeaderHeight(headerRef.current.offsetHeight);\n      }\n      if (footerRef.current) {\n        setFooterHeight(footerRef.current.offsetHeight);\n      }\n    };\n\n    updateHeights();\n\n    // Update heights when content changes\n    const resizeObserver = new ResizeObserver(updateHeights);\n    if (headerRef.current) {\n      resizeObserver.observe(headerRef.current);\n    }\n    if (footerRef.current) {\n      resizeObserver.observe(footerRef.current);\n    }\n\n    return (): void => {\n      resizeObserver.disconnect();\n    };\n  }, [hasFooterContent]);\n\n  // Open animation.\n  useEffect(() => {\n    if (!overlayRef.current || !containerRef.current) return;\n\n    if (!isPresent) {\n      closeDrawer();\n      return;\n    }\n\n    if (isMobile) {\n      animate(containerRef.current, { y: '0' }, { duration: 0.3, ease: 'easeInOut' });\n    } else {\n      animate(containerRef.current, { x: '0' }, { duration: 0.3, ease: 'easeInOut' });\n    }\n\n    animate(overlayRef.current, { opacity: 1, pointerEvents: 'auto' }, { duration: 0.3, ease: 'easeInOut' });\n  }, [isPresent]);\n\n  const handleCTA = (callback?: () => void): void => {\n    if (callback) {\n      callback();\n    }\n  };\n\n  return (\n    <div className={styles.drawer} ref={scope} style={{ zIndex }} data-analyticsid={AnalyticsId.Drawer}>\n      <div className={styles.drawer__overlay} ref={overlayRef} aria-hidden=\"true\" />\n      <div\n        className={classNames(styles.drawer__container, {\n          [styles['drawer__container--right']]: desktopDirection === 'right',\n        })}\n        ref={containerRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabIndex={-1}\n        {...ariaLabelAttributes}\n      >\n        <div className={styles.drawer__container__inner}>\n          <div className={headerStyling} ref={headerRef}>\n            <Title\n              id={ariaLabelAttributes?.['aria-labelledby']}\n              className={styles['drawer__header__title']}\n              htmlMarkup={titleHtmlMarkup}\n              appearance=\"title3\"\n            >\n              {title}\n            </Title>\n            {!noCloseButton && onRequestClose != undefined && (\n              <Close\n                ariaLabel={mergedResources.ariaLabelCloseBtn}\n                color={closeColor}\n                onClick={onRequestClose}\n                className={styles['drawer__header__close-button']}\n              />\n            )}\n          </div>\n          <div\n            className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--top'])}\n            style={{\n              opacity: !topContentVisible && contentIsScrollable ? 1 : 0,\n              top: headerHeight,\n            }}\n          />\n          <div\n            className={styles.drawer__content}\n            tabIndex={contentIsScrollable ? 0 : undefined}\n            role={contentIsScrollable ? 'region' : undefined}\n            {...(contentIsScrollable ? ariaLabelAttributes : {})}\n            ref={contentRef}\n          >\n            <div ref={topContent} />\n            <div className={styles['drawer__content__children']}>{children}</div>\n            <div ref={bottomContent} style={{ height: '1px' }} />\n          </div>\n          <div\n            className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--bottom'])}\n            style={{\n              opacity: !bottomContentVisible && contentIsScrollable ? 1 : 0,\n              bottom: hasFooterContent ? footerHeight : 0,\n            }}\n          />\n        </div>\n        {hasFooterContent && (\n          <div className={styles.drawer__footer} ref={footerRef}>\n            {footerContent ? (\n              footerContent\n            ) : (\n              <>\n                {onPrimaryAction && <Button onClick={() => handleCTA(onPrimaryAction)}>{primaryActionText}</Button>}\n                {onSecondaryAction && (\n                  <Button variant=\"borderless\" onClick={() => handleCTA(onSecondaryAction)}>\n                    {secondaryActionText}\n                  </Button>\n                )}\n              </>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Drawer;\n","import Drawer from './Drawer';\nexport * from './Drawer';\nexport default Drawer;\n"],"mappings":"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"}

package/lib/Duolist.js

@@ -1,7 +1,7 @@
 import { n as AnalyticsId } from "./constants2.js";
 import { n as useBreakpoint, t as Breakpoint } from "./useBreakpoint.js";
 import { t as Spacer_default } from "./Spacer.js";
-import classNames from "classnames";
+import cn from "classnames";
 import React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import duolistStyles from "./components/Duolist/styles.module.scss";
@@ -10,11 +10,11 @@ const DuolistGroup = (props) => {
 	const firstBold = boldColumn === "first";
 	const secondBold = boldColumn === "second";
 	const nonFormatted = format === "non-formatted";
-	const dtClassNames = classNames(duolistStyles["duolist__dt"], {
+	const dtClassNames = cn(duolistStyles["duolist__dt"], {
 		[duolistStyles["duolist__dt--bold"]]: firstBold,
 		[duolistStyles["duolist__dt--non-formatted"]]: nonFormatted
 	});
-	const ddClassNames = classNames(duolistStyles["duolist__dd"], {
+	const ddClassNames = cn(duolistStyles["duolist__dd"], {
 		[duolistStyles["duolist__dd--bold"]]: secondBold,
 		[duolistStyles["duolist__dd--non-formatted"]]: nonFormatted
 	});
@@ -40,11 +40,11 @@ const Duolist = (props) => {
 	const nonFormatted = format === "non-formatted";
 	const breakpoint = useBreakpoint();
 	const useCollapsedMode = useCollapsedFromAndBelowBreakpoint && breakpoint <= Breakpoint[useCollapsedFromAndBelowBreakpoint];
-	const duolistWrapperClasses = classNames({
+	const duolistWrapperClasses = cn({
 		[duolistStyles["duolist-wrapper--border"]]: hasBorder,
 		[duolistStyles["duolist-wrapper--extra-padding-top"]]: extraPaddingTop
 	}, className);
-	const duolistClasses = classNames(duolistStyles.duolist, {
+	const duolistClasses = cn(duolistStyles.duolist, {
 		[duolistStyles["duolist--line"]]: hasLines,
 		[duolistStyles["duolist--non-formatted"]]: nonFormatted,
 		[duolistStyles["duolist--collapsed"]]: useCollapsedMode,

package/lib/Duolist.js.map

@@ -1 +1 @@
-{"version":3,"file":"Duolist.js","names":["DuolistGroup: React.FC<DuolistGroupProps>","Duolist: React.FC<DuolistProps>"],"sources":["../src/components/Duolist/Duolist.tsx","../src/components/Duolist/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { TitleProps } from '../Title';\n\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport Spacer from '../Spacer';\n\nimport duolistStyles from './styles.module.scss';\n\nexport type DuolistVariants = 'normal' | 'line';\nexport type BoldColumn = 'first' | 'second' | 'none';\nexport type Border = 'no-border' | 'border';\nexport type Formats = 'formatted' | 'non-formatted';\n\nexport interface DuolistProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Label of the Duolist */\n  border?: Border;\n  /** Label of the Duolist */\n  label?: React.ReactElement<TitleProps>;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets the visual variant of the Duolist. */\n  variant?: DuolistVariants;\n  /** Sets the content of the Duolist. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Width of the description column in percentage */\n  descriptionWidth?: number;\n  /** Use collapsed mode on columns from chosen breakpoint and below. */\n  useCollapsedFromAndBelowBreakpoint?: keyof typeof Breakpoint;\n}\n\nexport interface DuolistGroupProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Sets content of the <dd> tag. */\n  description: React.ReactNode;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets content of the <dt> tag. */\n  term: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const DuolistGroup: React.FC<DuolistGroupProps> = props => {\n  const { format = 'formatted', boldColumn = format === 'non-formatted' ? 'none' : 'first', description, separator = ': ', term } = props;\n\n  const firstBold = boldColumn === 'first';\n  const secondBold = boldColumn === 'second';\n  const nonFormatted = format === 'non-formatted';\n\n  const dtClassNames = classNames(duolistStyles['duolist__dt'], {\n    [duolistStyles['duolist__dt--bold']]: firstBold,\n    [duolistStyles['duolist__dt--non-formatted']]: nonFormatted,\n  });\n  const ddClassNames = classNames(duolistStyles['duolist__dd'], {\n    [duolistStyles['duolist__dd--bold']]: secondBold,\n    [duolistStyles['duolist__dd--non-formatted']]: nonFormatted,\n  });\n\n  const renderContent = () => {\n    return (\n      <>\n        <dt\n          data-separator={nonFormatted ? separator : undefined}\n          className={dtClassNames}\n          data-testid={props.testId && `${props.testId}-term`}\n        >\n          {term}\n        </dt>\n        <dd className={ddClassNames} data-testid={props.testId && `${props.testId}-description`}>\n          {description}\n        </dd>\n      </>\n    );\n  };\n\n  return nonFormatted ? <div>{renderContent()}</div> : <>{renderContent()}</>;\n};\n\nexport const Duolist: React.FC<DuolistProps> = props => {\n  const {\n    boldColumn,\n    border = 'no-border',\n    descriptionWidth,\n    label,\n    format = 'formatted',\n    separator,\n    variant = 'normal',\n    children,\n    className,\n    testId,\n    useCollapsedFromAndBelowBreakpoint,\n  } = props;\n\n  const hasBorder = border === 'border';\n  const hasLines = variant === 'line';\n  const extraPaddingTop = hasBorder && (label || hasLines);\n  const nonFormatted = format === 'non-formatted';\n  const breakpoint = useBreakpoint();\n  const useCollapsedMode = useCollapsedFromAndBelowBreakpoint && breakpoint <= Breakpoint[useCollapsedFromAndBelowBreakpoint];\n\n  const duolistWrapperClasses = classNames(\n    {\n      [duolistStyles['duolist-wrapper--border']]: hasBorder,\n      [duolistStyles['duolist-wrapper--extra-padding-top']]: extraPaddingTop,\n    },\n    className\n  );\n\n  const duolistClasses = classNames(duolistStyles.duolist, {\n    [duolistStyles['duolist--line']]: hasLines,\n    [duolistStyles['duolist--non-formatted']]: nonFormatted,\n    [duolistStyles['duolist--collapsed']]: useCollapsedMode,\n    [duolistStyles['duolist--not-collapsed']]: !useCollapsedMode,\n  });\n\n  const duolistColumnStyle = descriptionWidth ? descriptionWidth + '%' : 'minmax(60%, 1fr)';\n\n  return (\n    <div className={duolistWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.Duolist}>\n      {label && (\n        <>\n          {label}\n          <Spacer />\n        </>\n      )}\n      <dl\n        style={!nonFormatted ? { gridTemplateColumns: useCollapsedMode ? `1fr` : `auto ${duolistColumnStyle}` } : undefined}\n        className={duolistClasses}\n      >\n        {React.Children.map(children, (child: React.ReactNode | React.ReactElement<DuolistGroupProps>) => {\n          if (child === null || typeof child === 'undefined') return;\n          const duolistGroup = child as React.ReactElement<DuolistGroupProps>;\n          if (duolistGroup.type === DuolistGroup) {\n            return React.cloneElement(child as React.ReactElement<DuolistGroupProps>, {\n              ...duolistGroup.props,\n              boldColumn: duolistGroup.props.boldColumn ?? boldColumn,\n              format: duolistGroup.props.format ?? format,\n              separator: duolistGroup.props.separator ?? separator,\n            });\n          }\n        })}\n      </dl>\n    </div>\n  );\n};\n\nexport default Duolist;\n","import Duolist from './Duolist';\nexport * from './Duolist';\nexport default Duolist;\n"],"mappings":";;;;;;;AAyDA,MAAaA,gBAA4C,UAAS;CAChE,MAAM,EAAE,SAAS,aAAa,aAAa,WAAW,kBAAkB,SAAS,SAAS,aAAa,YAAY,MAAM,SAAS;CAElI,MAAM,YAAY,eAAe;CACjC,MAAM,aAAa,eAAe;CAClC,MAAM,eAAe,WAAW;CAEhC,MAAM,eAAe,WAAW,cAAc,gBAAgB;GAC3D,cAAc,uBAAuB;GACrC,cAAc,gCAAgC;EAChD,CAAC;CACF,MAAM,eAAe,WAAW,cAAc,gBAAgB;GAC3D,cAAc,uBAAuB;GACrC,cAAc,gCAAgC;EAChD,CAAC;CAEF,MAAM,sBAAsB;AAC1B,SACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAA;GACC,kBAAgB,eAAe,YAAY,KAAA;GAC3C,WAAW;GACX,eAAa,MAAM,UAAU,GAAG,MAAM,OAAO;aAE5C;IACE,EACL,oBAAC,MAAA;GAAG,WAAW;GAAc,eAAa,MAAM,UAAU,GAAG,MAAM,OAAO;aACvE;IACE,CAAA,EAAA,CACJ;;AAIP,QAAO,eAAe,oBAAC,OAAA,EAAA,UAAK,eAAe,EAAA,CAAO,GAAG,oBAAA,UAAA,EAAA,UAAG,eAAe,EAAA,CAAI;;AAG7E,MAAaC,WAAkC,UAAS;CACtD,MAAM,EACJ,YACA,SAAS,aACT,kBACA,OACA,SAAS,aACT,WACA,UAAU,UACV,UACA,WACA,QACA,uCACE;CAEJ,MAAM,YAAY,WAAW;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,kBAAkB,cAAc,SAAS;CAC/C,MAAM,eAAe,WAAW;CAChC,MAAM,aAAa,eAAe;CAClC,MAAM,mBAAmB,sCAAsC,cAAc,WAAW;CAExF,MAAM,wBAAwB,WAC5B;GACG,cAAc,6BAA6B;GAC3C,cAAc,wCAAwC;EACxD,EACD,UACD;CAED,MAAM,iBAAiB,WAAW,cAAc,SAAS;GACtD,cAAc,mBAAmB;GACjC,cAAc,4BAA4B;GAC1C,cAAc,wBAAwB;GACtC,cAAc,4BAA4B,CAAC;EAC7C,CAAC;CAEF,MAAM,qBAAqB,mBAAmB,mBAAmB,MAAM;AAEvE,QACE,qBAAC,OAAA;EAAI,WAAW;EAAuB,eAAa;EAAQ,oBAAkB,YAAY;aACvF,SACC,qBAAA,UAAA,EAAA,UAAA,CACG,OACD,oBAAC,gBAAA,EAAA,CAAS,CAAA,EAAA,CACT,EAEL,oBAAC,MAAA;GACC,OAAO,CAAC,eAAe,EAAE,qBAAqB,mBAAmB,QAAQ,QAAQ,sBAAsB,GAAG,KAAA;GAC1G,WAAW;aAEV,MAAM,SAAS,IAAI,WAAW,UAAmE;AAChG,QAAI,UAAU,QAAQ,OAAO,UAAU,YAAa;IACpD,MAAM,eAAe;AACrB,QAAI,aAAa,SAAS,aACxB,QAAO,MAAM,aAAa,OAAgD;KACxE,GAAG,aAAa;KAChB,YAAY,aAAa,MAAM,cAAc;KAC7C,QAAQ,aAAa,MAAM,UAAU;KACrC,WAAW,aAAa,MAAM,aAAa;KAC5C,CAAC;KAEJ;IACC,CAAA;GACD;;AC3JV,IAAA,oBD+Je"}
+{"version":3,"file":"Duolist.js","names":["DuolistGroup: React.FC<DuolistGroupProps>","Duolist: React.FC<DuolistProps>"],"sources":["../src/components/Duolist/Duolist.tsx","../src/components/Duolist/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { TitleProps } from '../Title';\n\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport Spacer from '../Spacer';\n\nimport duolistStyles from './styles.module.scss';\n\nexport type DuolistVariants = 'normal' | 'line';\nexport type BoldColumn = 'first' | 'second' | 'none';\nexport type Border = 'no-border' | 'border';\nexport type Formats = 'formatted' | 'non-formatted';\n\nexport interface DuolistProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Label of the Duolist */\n  border?: Border;\n  /** Label of the Duolist */\n  label?: React.ReactElement<TitleProps>;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets the visual variant of the Duolist. */\n  variant?: DuolistVariants;\n  /** Sets the content of the Duolist. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Width of the description column in percentage */\n  descriptionWidth?: number;\n  /** Use collapsed mode on columns from chosen breakpoint and below. */\n  useCollapsedFromAndBelowBreakpoint?: keyof typeof Breakpoint;\n}\n\nexport interface DuolistGroupProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Sets content of the <dd> tag. */\n  description: React.ReactNode;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets content of the <dt> tag. */\n  term: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const DuolistGroup: React.FC<DuolistGroupProps> = props => {\n  const { format = 'formatted', boldColumn = format === 'non-formatted' ? 'none' : 'first', description, separator = ': ', term } = props;\n\n  const firstBold = boldColumn === 'first';\n  const secondBold = boldColumn === 'second';\n  const nonFormatted = format === 'non-formatted';\n\n  const dtClassNames = classNames(duolistStyles['duolist__dt'], {\n    [duolistStyles['duolist__dt--bold']]: firstBold,\n    [duolistStyles['duolist__dt--non-formatted']]: nonFormatted,\n  });\n  const ddClassNames = classNames(duolistStyles['duolist__dd'], {\n    [duolistStyles['duolist__dd--bold']]: secondBold,\n    [duolistStyles['duolist__dd--non-formatted']]: nonFormatted,\n  });\n\n  const renderContent = () => {\n    return (\n      <>\n        <dt\n          data-separator={nonFormatted ? separator : undefined}\n          className={dtClassNames}\n          data-testid={props.testId && `${props.testId}-term`}\n        >\n          {term}\n        </dt>\n        <dd className={ddClassNames} data-testid={props.testId && `${props.testId}-description`}>\n          {description}\n        </dd>\n      </>\n    );\n  };\n\n  return nonFormatted ? <div>{renderContent()}</div> : <>{renderContent()}</>;\n};\n\nexport const Duolist: React.FC<DuolistProps> = props => {\n  const {\n    boldColumn,\n    border = 'no-border',\n    descriptionWidth,\n    label,\n    format = 'formatted',\n    separator,\n    variant = 'normal',\n    children,\n    className,\n    testId,\n    useCollapsedFromAndBelowBreakpoint,\n  } = props;\n\n  const hasBorder = border === 'border';\n  const hasLines = variant === 'line';\n  const extraPaddingTop = hasBorder && (label || hasLines);\n  const nonFormatted = format === 'non-formatted';\n  const breakpoint = useBreakpoint();\n  const useCollapsedMode = useCollapsedFromAndBelowBreakpoint && breakpoint <= Breakpoint[useCollapsedFromAndBelowBreakpoint];\n\n  const duolistWrapperClasses = classNames(\n    {\n      [duolistStyles['duolist-wrapper--border']]: hasBorder,\n      [duolistStyles['duolist-wrapper--extra-padding-top']]: extraPaddingTop,\n    },\n    className\n  );\n\n  const duolistClasses = classNames(duolistStyles.duolist, {\n    [duolistStyles['duolist--line']]: hasLines,\n    [duolistStyles['duolist--non-formatted']]: nonFormatted,\n    [duolistStyles['duolist--collapsed']]: useCollapsedMode,\n    [duolistStyles['duolist--not-collapsed']]: !useCollapsedMode,\n  });\n\n  const duolistColumnStyle = descriptionWidth ? descriptionWidth + '%' : 'minmax(60%, 1fr)';\n\n  return (\n    <div className={duolistWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.Duolist}>\n      {label && (\n        <>\n          {label}\n          <Spacer />\n        </>\n      )}\n      <dl\n        style={!nonFormatted ? { gridTemplateColumns: useCollapsedMode ? `1fr` : `auto ${duolistColumnStyle}` } : undefined}\n        className={duolistClasses}\n      >\n        {React.Children.map(children, (child: React.ReactNode | React.ReactElement<DuolistGroupProps>) => {\n          if (child === null || typeof child === 'undefined') return;\n          const duolistGroup = child as React.ReactElement<DuolistGroupProps>;\n          if (duolistGroup.type === DuolistGroup) {\n            return React.cloneElement(child as React.ReactElement<DuolistGroupProps>, {\n              ...duolistGroup.props,\n              boldColumn: duolistGroup.props.boldColumn ?? boldColumn,\n              format: duolistGroup.props.format ?? format,\n              separator: duolistGroup.props.separator ?? separator,\n            });\n          }\n        })}\n      </dl>\n    </div>\n  );\n};\n\nexport default Duolist;\n","import Duolist from './Duolist';\nexport * from './Duolist';\nexport default Duolist;\n"],"mappings":";;;;;;;AAyDA,MAAaA,gBAA4C,UAAS;CAChE,MAAM,EAAE,SAAS,aAAa,aAAa,WAAW,kBAAkB,SAAS,SAAS,aAAa,YAAY,MAAM,SAAS;CAElI,MAAM,YAAY,eAAe;CACjC,MAAM,aAAa,eAAe;CAClC,MAAM,eAAe,WAAW;CAEhC,MAAM,eAAe,GAAW,cAAc,gBAAgB;GAC3D,cAAc,uBAAuB;GACrC,cAAc,gCAAgC;EAChD,CAAC;CACF,MAAM,eAAe,GAAW,cAAc,gBAAgB;GAC3D,cAAc,uBAAuB;GACrC,cAAc,gCAAgC;EAChD,CAAC;CAEF,MAAM,sBAAsB;AAC1B,SACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAA;GACC,kBAAgB,eAAe,YAAY,KAAA;GAC3C,WAAW;GACX,eAAa,MAAM,UAAU,GAAG,MAAM,OAAO;aAE5C;IACE,EACL,oBAAC,MAAA;GAAG,WAAW;GAAc,eAAa,MAAM,UAAU,GAAG,MAAM,OAAO;aACvE;IACE,CAAA,EAAA,CACJ;;AAIP,QAAO,eAAe,oBAAC,OAAA,EAAA,UAAK,eAAe,EAAA,CAAO,GAAG,oBAAA,UAAA,EAAA,UAAG,eAAe,EAAA,CAAI;;AAG7E,MAAaC,WAAkC,UAAS;CACtD,MAAM,EACJ,YACA,SAAS,aACT,kBACA,OACA,SAAS,aACT,WACA,UAAU,UACV,UACA,WACA,QACA,uCACE;CAEJ,MAAM,YAAY,WAAW;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,kBAAkB,cAAc,SAAS;CAC/C,MAAM,eAAe,WAAW;CAChC,MAAM,aAAa,eAAe;CAClC,MAAM,mBAAmB,sCAAsC,cAAc,WAAW;CAExF,MAAM,wBAAwB,GAC5B;GACG,cAAc,6BAA6B;GAC3C,cAAc,wCAAwC;EACxD,EACD,UACD;CAED,MAAM,iBAAiB,GAAW,cAAc,SAAS;GACtD,cAAc,mBAAmB;GACjC,cAAc,4BAA4B;GAC1C,cAAc,wBAAwB;GACtC,cAAc,4BAA4B,CAAC;EAC7C,CAAC;CAEF,MAAM,qBAAqB,mBAAmB,mBAAmB,MAAM;AAEvE,QACE,qBAAC,OAAA;EAAI,WAAW;EAAuB,eAAa;EAAQ,oBAAkB,YAAY;aACvF,SACC,qBAAA,UAAA,EAAA,UAAA,CACG,OACD,oBAAC,gBAAA,EAAA,CAAS,CAAA,EAAA,CACT,EAEL,oBAAC,MAAA;GACC,OAAO,CAAC,eAAe,EAAE,qBAAqB,mBAAmB,QAAQ,QAAQ,sBAAsB,GAAG,KAAA;GAC1G,WAAW;aAEV,MAAM,SAAS,IAAI,WAAW,UAAmE;AAChG,QAAI,UAAU,QAAQ,OAAO,UAAU,YAAa;IACpD,MAAM,eAAe;AACrB,QAAI,aAAa,SAAS,aACxB,QAAO,MAAM,aAAa,OAAgD;KACxE,GAAG,aAAa;KAChB,YAAY,aAAa,MAAM,cAAc;KAC7C,QAAQ,aAAa,MAAM,UAAU;KACrC,WAAW,aAAa,MAAM,aAAa;KAC5C,CAAC;KAEJ;IACC,CAAA;GACD;;AC3JV,IAAA,oBD+Je"}

package/lib/ElementHeader.js

@@ -9,7 +9,7 @@ import { t as StatusDot_default } from "./StatusDot.js";
 import { t as Highlighter_default } from "./Highlighter.js";
 import { n as ElementHeaderText, r as ElementHeaderText_default } from "./ElementHeaderText.js";
 import { n as StatusDotList, t as StatusDotList_default } from "./StatusDotList.js";
-import classNames from "classnames";
+import cn from "classnames";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/ElementHeader/styles.module.scss";
@@ -74,17 +74,17 @@ const ElementHeaderRoot = (props) => {
 	const contentIsString = typeof children === "string";
 	const mappedChildren = mapChildren(children);
 	const hasStatusDots = !!mappedChildren?.statusDotChildren?.length || !!mappedChildren?.statusDotMCChild;
-	const listLabelClasses = classNames(styles["element-header"], { [styles["element-header--compact"]]: size === "compact" }, className);
-	const badgeContainerClasses = classNames(styles["element-header__badge-container"]);
-	const badgeClasses = classNames(styles["element-header__badge"]);
-	const statusdotContainerClasses = classNames(styles["element-header__statusdot-container"]);
-	const chevronClasses = classNames(styles["element-header__chevron"]);
-	const contentClasses = classNames(styles["element-header__content"], {
+	const listLabelClasses = cn(styles["element-header"], { [styles["element-header--compact"]]: size === "compact" }, className);
+	const badgeContainerClasses = cn(styles["element-header__badge-container"]);
+	const badgeClasses = cn(styles["element-header__badge"]);
+	const statusdotContainerClasses = cn(styles["element-header__statusdot-container"]);
+	const chevronClasses = cn(styles["element-header__chevron"]);
+	const contentClasses = cn(styles["element-header__content"], {
 		[styles["element-header__content--element"]]: !contentIsString,
 		[styles["element-header__content--compact"]]: size === "compact"
 	});
-	const iconClasses = classNames(styles["element-header__icon"], { [styles["element-header__icon--with-statusdot"]]: hasStatusDots });
-	const avatarClasses = classNames(styles["element-header__avatar"], {});
+	const iconClasses = cn(styles["element-header__icon"], { [styles["element-header__icon--with-statusdot"]]: hasStatusDots });
+	const avatarClasses = cn(styles["element-header__avatar"], {});
 	const CustomTag = titleHtmlMarkup;
 	const iconPropIsIconComponent = isComponent(icon, Icon_default);
 	const iconPropIsLazyIconComponent = !iconPropIsIconComponent && isComponent(icon, LazyIcon_default);

package/lib/ElementHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElementHeader.js","names":["mapChildren: ChildrenMapper","avatarChild: React.ReactElement<AvatarProps> | undefined","badgeChildren: React.ReactElement<BadgeProps>[]","statusDotChildren: React.ReactElement<StatusDotProps>[]","statusDotMCChild: React.ReactElement<StatusDotListProps> | undefined","elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[]","stringChildren: string[]","remainingChildren: React.ReactNode[]","ElementHeaderRoot: ElementHeaderType"],"sources":["../src/components/ElementHeader/utils.tsx","../src/components/ElementHeader/ElementHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { AvatarProps } from '../Avatar';\nimport type { BadgeProps } from '../Badge';\nimport type { StatusDotProps } from '../StatusDot';\n\nimport ElementHeader, { type ElementHeaderChildren, type ElementHeaderProps } from './ElementHeader';\nimport { ElementHeaderText, type ElementHeaderTextProps } from './ElementHeaderText';\nimport { StatusDotList, type StatusDotListProps } from './StatusDotList';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport Avatar from '../Avatar';\nimport Badge from '../Badge';\nimport StatusDot from '../StatusDot';\n\ntype ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ElementHeaderChildren | undefined;\n\nexport const mapChildren: ChildrenMapper = (children, isJsxChild = false) => {\n  let avatarChild: React.ReactElement<AvatarProps> | undefined;\n  const badgeChildren: React.ReactElement<BadgeProps>[] = [];\n  const statusDotChildren: React.ReactElement<StatusDotProps>[] = [];\n  let statusDotMCChild: React.ReactElement<StatusDotListProps> | undefined;\n  const elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[] = [];\n  const stringChildren: string[] = [];\n  const remainingChildren: React.ReactNode[] = [];\n\n  React.Children.forEach(children, child => {\n    if (child === null || typeof child === 'undefined') return;\n    if (isComponent<AvatarProps>(child, Avatar)) {\n      avatarChild = child;\n    } else if (isComponent<ElementHeaderTextProps>(child, ElementHeaderText)) {\n      elementHeaderTextChildren.push(child);\n    } else if (isComponent<BadgeProps>(child, Badge)) {\n      badgeChildren.push(child);\n    } else if (isComponent<StatusDotListProps>(child, StatusDotList)) {\n      statusDotMCChild = child;\n    } else if (isComponent<StatusDotProps>(child, StatusDot)) {\n      statusDotChildren.push(child);\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined ||\n    elementHeaderTextChildren.length > 0 ||\n    statusDotChildren.length > 0 ||\n    statusDotMCChild !== undefined ||\n    (badgeChildren !== undefined && stringChildren.length > 0);\n  const noRemainingRecursiveChildren =\n    remainingChildren.length === 0 ||\n    (isComponentWithChildren(remainingChildren[0]) && typeof remainingChildren[0]?.props?.children === 'undefined');\n\n  if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {\n    return {\n      avatarChild,\n      elementHeaderTextChildren: elementHeaderTextChildren,\n      badgeChildren,\n      statusDotChildren,\n      statusDotMCChild,\n      stringChildren,\n      remainingChildren,\n    };\n  }\n\n  if (isComponentWithChildren(remainingChildren[0])) {\n    return mapChildren(remainingChildren[0]?.props?.children, true);\n  }\n};\n\nexport const renderElementHeader = (\n  element: React.ReactNode,\n  options: Pick<\n    ElementHeaderProps,\n    'titleHtmlMarkup' | 'isHovered' | 'size' | 'parentType' | 'chevronIcon' | 'icon' | 'highlightText' | 'closeButton'\n  >\n): React.ReactElement | undefined => {\n  const { titleHtmlMarkup, isHovered, size, parentType, chevronIcon, icon, highlightText, closeButton } = options;\n\n  if (isComponent<ElementHeaderProps>(element, ElementHeader)) {\n    return React.cloneElement(element, {\n      chevronIcon,\n      icon,\n      isHovered,\n      size,\n      parentType,\n      highlightText,\n      closeButton,\n    });\n  }\n  if (element) {\n    return (\n      <ElementHeader\n        highlightText={highlightText}\n        titleHtmlMarkup={titleHtmlMarkup}\n        parentType={parentType}\n        chevronIcon={chevronIcon}\n        icon={icon}\n        isHovered={isHovered}\n        size={size}\n        closeButton={closeButton}\n      >\n        {element}\n      </ElementHeader>\n    );\n  }\n};\n","import React from 'react';\n\nimport cn from 'classnames';\n\nimport type { AvatarProps, AvatarType } from '../Avatar';\nimport type { BadgeProps, BadgeType } from '../Badge';\nimport type { IconProps, SvgIcon } from '../Icon';\nimport type { LazyIconProps } from '../LazyIcon';\nimport type { StatusDotProps, StatusDotType } from '../StatusDot';\nimport type { TitleTags } from '../Title';\nimport type { ElementHeaderTextProps, ElementHeaderTextType } from './ElementHeaderText/ElementHeaderText';\nimport type { StatusDotListProps, StatusDotListType } from './StatusDotList/StatusDotList';\n\nimport ElementHeaderText from './ElementHeaderText/ElementHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent } from '../../utils/component';\nimport { AvatarSize } from '../Avatar';\nimport Icon, { IconSize } from '../Icon';\nimport StatusDotList from './StatusDotList';\nimport Highlighter from '../Highlighter';\nimport LazyIcon from '../LazyIcon';\nimport { mapChildren } from './utils';\n\nimport styles from './styles.module.scss';\n\nexport type ElementHeaderSize = 'compact' | 'small' | 'medium' | 'large';\nexport type ParentType = 'linklist' | 'expanderlist';\n\nexport interface ElementHeaderType extends React.FC<ElementHeaderProps> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ElementHeaderText?: ElementHeaderTextType;\n  StatusDot?: StatusDotType;\n  StatusDotList?: StatusDotListType;\n}\n\nexport interface ElementHeaderProps {\n  /** Adds custom classes to the ElementHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ElementHeader */\n  chevronIcon?: SvgIcon;\n  /** Close button to be rendered inside of ElementHeader. This renders in place of chevronIcon */\n  closeButton?: React.ReactElement;\n  /** Children to be rendered inside of ElementHeader */\n  children: React.ReactNode;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** icon to be rendered inside of ElementHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Adjusts styling based on parent */\n  parentType?: ParentType;\n  /** Changes size of the ElementHeader. */\n  size?: ElementHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Highlights text in title. Used for search results */\n  highlightText?: string;\n}\n\nexport interface ElementHeaderChildren {\n  avatarChild?: React.ReactElement<AvatarProps>;\n  elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[];\n  badgeChildren?: React.ReactElement<BadgeProps>[];\n  statusDotChildren?: React.ReactElement<StatusDotProps>[];\n  statusDotMCChild?: React.ReactElement<StatusDotListProps>;\n  elementChild?: React.ReactElement;\n  stringChildren: string[];\n  remainingChildren: React.ReactNode[];\n}\n\nexport const ElementHeaderRoot: ElementHeaderType = props => {\n  const {\n    className = '',\n    titleHtmlMarkup = 'h2',\n    parentType = 'linklist',\n    chevronIcon,\n    closeButton,\n    children,\n    icon,\n    isHovered,\n    size,\n    testId,\n    highlightText,\n  } = props;\n  const breakpoint = useBreakpoint();\n  const showIcon = size !== 'small' && !!icon;\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n  const hasStatusDots = !!mappedChildren?.statusDotChildren?.length || !!mappedChildren?.statusDotMCChild;\n\n  const listLabelClasses = cn(styles['element-header'], { [styles['element-header--compact']]: size === 'compact' }, className);\n  const badgeContainerClasses = cn(styles['element-header__badge-container']);\n  const badgeClasses = cn(styles['element-header__badge']);\n  const statusdotContainerClasses = cn(styles['element-header__statusdot-container']);\n  const chevronClasses = cn(styles['element-header__chevron']);\n  const contentClasses = cn(styles['element-header__content'], {\n    [styles['element-header__content--element']]: !contentIsString,\n    [styles['element-header__content--compact']]: size === 'compact',\n  });\n  const iconClasses = cn(styles['element-header__icon'], { [styles['element-header__icon--with-statusdot']]: hasStatusDots });\n  const avatarClasses = cn(styles['element-header__avatar'], {});\n  const CustomTag = titleHtmlMarkup;\n  const iconPropIsIconComponent = isComponent<IconProps>(icon, Icon);\n  const iconPropIsLazyIconComponent = !iconPropIsIconComponent && isComponent<LazyIconProps>(icon, LazyIcon);\n\n  let iconComponent;\n  if (iconPropIsIconComponent) {\n    iconComponent = React.cloneElement(icon as React.ReactElement<IconProps>, {\n      size: breakpoint < Breakpoint.md ? IconSize.XSmall : IconSize.Small,\n      isHovered,\n    });\n  } else if (iconPropIsLazyIconComponent) {\n    iconComponent = React.cloneElement(icon as React.ReactElement<LazyIconProps>, {\n      size: breakpoint < Breakpoint.md ? IconSize.XSmall : IconSize.Small,\n      isHovered,\n    });\n  } else {\n    iconComponent = icon;\n  }\n\n  return (\n    <span data-testid={testId} className={listLabelClasses}>\n      {showIcon && icon && <span className={iconClasses}>{iconComponent}</span>}\n      {size !== 'small' && mappedChildren?.avatarChild && (\n        <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n      )}\n\n      <span className={contentClasses} data-hasstatusdots={hasStatusDots}>\n        {mappedChildren?.elementHeaderTextChildren}\n        {!!mappedChildren?.stringChildren.length && (\n          <CustomTag className={styles['element-header__title']}>\n            <Highlighter searchText={highlightText}>{mappedChildren.stringChildren}</Highlighter>\n          </CustomTag>\n        )}\n        <Highlighter searchText={highlightText}>{mappedChildren?.remainingChildren}</Highlighter>\n      </span>\n\n      {hasStatusDots && (\n        <span className={statusdotContainerClasses}>\n          {!!mappedChildren?.statusDotChildren && <StatusDotList>{mappedChildren.statusDotChildren}</StatusDotList>}\n          {!!mappedChildren?.statusDotMCChild && mappedChildren?.statusDotMCChild}\n        </span>\n      )}\n\n      <span className={badgeContainerClasses}>\n        {mappedChildren?.badgeChildren &&\n          mappedChildren.badgeChildren.map((badgeChild, index) => {\n            return (\n              <span key={index} className={badgeClasses} data-parenttype={parentType}>\n                {badgeChild}\n              </span>\n            );\n          })}\n      </span>\n      {chevronIcon && typeof closeButton === 'undefined' && (\n        <span className={chevronClasses} data-parenttype={parentType}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n      {closeButton && (\n        <span className={chevronClasses} data-parenttype={parentType}>\n          {closeButton}\n        </span>\n      )}\n    </span>\n  );\n};\n\ntype ElementHeaderComponent = typeof ElementHeaderRoot & {\n  Text: React.FC<ElementHeaderTextProps>;\n  StatusDotList: React.FC<StatusDotListProps>;\n};\nElementHeaderRoot.displayName = 'ElementHeader';\nconst ElementHeader = ElementHeaderRoot as ElementHeaderComponent;\nElementHeader.Text = ElementHeaderText;\nElementHeader.Text.displayName = 'ElementHeader.Text';\nElementHeader.StatusDotList = StatusDotList;\nElementHeader.StatusDotList.displayName = 'ElementHeader.StatusDotList';\n\nexport default ElementHeader;\n"],"mappings":"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"}
+{"version":3,"file":"ElementHeader.js","names":["mapChildren: ChildrenMapper","avatarChild: React.ReactElement<AvatarProps> | undefined","badgeChildren: React.ReactElement<BadgeProps>[]","statusDotChildren: React.ReactElement<StatusDotProps>[]","statusDotMCChild: React.ReactElement<StatusDotListProps> | undefined","elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[]","stringChildren: string[]","remainingChildren: React.ReactNode[]","ElementHeaderRoot: ElementHeaderType"],"sources":["../src/components/ElementHeader/utils.tsx","../src/components/ElementHeader/ElementHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { AvatarProps } from '../Avatar';\nimport type { BadgeProps } from '../Badge';\nimport type { StatusDotProps } from '../StatusDot';\n\nimport ElementHeader, { type ElementHeaderChildren, type ElementHeaderProps } from './ElementHeader';\nimport { ElementHeaderText, type ElementHeaderTextProps } from './ElementHeaderText';\nimport { StatusDotList, type StatusDotListProps } from './StatusDotList';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport Avatar from '../Avatar';\nimport Badge from '../Badge';\nimport StatusDot from '../StatusDot';\n\ntype ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ElementHeaderChildren | undefined;\n\nexport const mapChildren: ChildrenMapper = (children, isJsxChild = false) => {\n  let avatarChild: React.ReactElement<AvatarProps> | undefined;\n  const badgeChildren: React.ReactElement<BadgeProps>[] = [];\n  const statusDotChildren: React.ReactElement<StatusDotProps>[] = [];\n  let statusDotMCChild: React.ReactElement<StatusDotListProps> | undefined;\n  const elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[] = [];\n  const stringChildren: string[] = [];\n  const remainingChildren: React.ReactNode[] = [];\n\n  React.Children.forEach(children, child => {\n    if (child === null || typeof child === 'undefined') return;\n    if (isComponent<AvatarProps>(child, Avatar)) {\n      avatarChild = child;\n    } else if (isComponent<ElementHeaderTextProps>(child, ElementHeaderText)) {\n      elementHeaderTextChildren.push(child);\n    } else if (isComponent<BadgeProps>(child, Badge)) {\n      badgeChildren.push(child);\n    } else if (isComponent<StatusDotListProps>(child, StatusDotList)) {\n      statusDotMCChild = child;\n    } else if (isComponent<StatusDotProps>(child, StatusDot)) {\n      statusDotChildren.push(child);\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined ||\n    elementHeaderTextChildren.length > 0 ||\n    statusDotChildren.length > 0 ||\n    statusDotMCChild !== undefined ||\n    (badgeChildren !== undefined && stringChildren.length > 0);\n  const noRemainingRecursiveChildren =\n    remainingChildren.length === 0 ||\n    (isComponentWithChildren(remainingChildren[0]) && typeof remainingChildren[0]?.props?.children === 'undefined');\n\n  if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {\n    return {\n      avatarChild,\n      elementHeaderTextChildren: elementHeaderTextChildren,\n      badgeChildren,\n      statusDotChildren,\n      statusDotMCChild,\n      stringChildren,\n      remainingChildren,\n    };\n  }\n\n  if (isComponentWithChildren(remainingChildren[0])) {\n    return mapChildren(remainingChildren[0]?.props?.children, true);\n  }\n};\n\nexport const renderElementHeader = (\n  element: React.ReactNode,\n  options: Pick<\n    ElementHeaderProps,\n    'titleHtmlMarkup' | 'isHovered' | 'size' | 'parentType' | 'chevronIcon' | 'icon' | 'highlightText' | 'closeButton'\n  >\n): React.ReactElement | undefined => {\n  const { titleHtmlMarkup, isHovered, size, parentType, chevronIcon, icon, highlightText, closeButton } = options;\n\n  if (isComponent<ElementHeaderProps>(element, ElementHeader)) {\n    return React.cloneElement(element, {\n      chevronIcon,\n      icon,\n      isHovered,\n      size,\n      parentType,\n      highlightText,\n      closeButton,\n    });\n  }\n  if (element) {\n    return (\n      <ElementHeader\n        highlightText={highlightText}\n        titleHtmlMarkup={titleHtmlMarkup}\n        parentType={parentType}\n        chevronIcon={chevronIcon}\n        icon={icon}\n        isHovered={isHovered}\n        size={size}\n        closeButton={closeButton}\n      >\n        {element}\n      </ElementHeader>\n    );\n  }\n};\n","import React from 'react';\n\nimport cn from 'classnames';\n\nimport type { AvatarProps, AvatarType } from '../Avatar';\nimport type { BadgeProps, BadgeType } from '../Badge';\nimport type { IconProps, SvgIcon } from '../Icon';\nimport type { LazyIconProps } from '../LazyIcon';\nimport type { StatusDotProps, StatusDotType } from '../StatusDot';\nimport type { TitleTags } from '../Title';\nimport type { ElementHeaderTextProps, ElementHeaderTextType } from './ElementHeaderText/ElementHeaderText';\nimport type { StatusDotListProps, StatusDotListType } from './StatusDotList/StatusDotList';\n\nimport ElementHeaderText from './ElementHeaderText/ElementHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent } from '../../utils/component';\nimport { AvatarSize } from '../Avatar';\nimport Icon, { IconSize } from '../Icon';\nimport StatusDotList from './StatusDotList';\nimport Highlighter from '../Highlighter';\nimport LazyIcon from '../LazyIcon';\nimport { mapChildren } from './utils';\n\nimport styles from './styles.module.scss';\n\nexport type ElementHeaderSize = 'compact' | 'small' | 'medium' | 'large';\nexport type ParentType = 'linklist' | 'expanderlist';\n\nexport interface ElementHeaderType extends React.FC<ElementHeaderProps> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ElementHeaderText?: ElementHeaderTextType;\n  StatusDot?: StatusDotType;\n  StatusDotList?: StatusDotListType;\n}\n\nexport interface ElementHeaderProps {\n  /** Adds custom classes to the ElementHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ElementHeader */\n  chevronIcon?: SvgIcon;\n  /** Close button to be rendered inside of ElementHeader. This renders in place of chevronIcon */\n  closeButton?: React.ReactElement;\n  /** Children to be rendered inside of ElementHeader */\n  children: React.ReactNode;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** icon to be rendered inside of ElementHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Adjusts styling based on parent */\n  parentType?: ParentType;\n  /** Changes size of the ElementHeader. */\n  size?: ElementHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Highlights text in title. Used for search results */\n  highlightText?: string;\n}\n\nexport interface ElementHeaderChildren {\n  avatarChild?: React.ReactElement<AvatarProps>;\n  elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[];\n  badgeChildren?: React.ReactElement<BadgeProps>[];\n  statusDotChildren?: React.ReactElement<StatusDotProps>[];\n  statusDotMCChild?: React.ReactElement<StatusDotListProps>;\n  elementChild?: React.ReactElement;\n  stringChildren: string[];\n  remainingChildren: React.ReactNode[];\n}\n\nexport const ElementHeaderRoot: ElementHeaderType = props => {\n  const {\n    className = '',\n    titleHtmlMarkup = 'h2',\n    parentType = 'linklist',\n    chevronIcon,\n    closeButton,\n    children,\n    icon,\n    isHovered,\n    size,\n    testId,\n    highlightText,\n  } = props;\n  const breakpoint = useBreakpoint();\n  const showIcon = size !== 'small' && !!icon;\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n  const hasStatusDots = !!mappedChildren?.statusDotChildren?.length || !!mappedChildren?.statusDotMCChild;\n\n  const listLabelClasses = cn(styles['element-header'], { [styles['element-header--compact']]: size === 'compact' }, className);\n  const badgeContainerClasses = cn(styles['element-header__badge-container']);\n  const badgeClasses = cn(styles['element-header__badge']);\n  const statusdotContainerClasses = cn(styles['element-header__statusdot-container']);\n  const chevronClasses = cn(styles['element-header__chevron']);\n  const contentClasses = cn(styles['element-header__content'], {\n    [styles['element-header__content--element']]: !contentIsString,\n    [styles['element-header__content--compact']]: size === 'compact',\n  });\n  const iconClasses = cn(styles['element-header__icon'], { [styles['element-header__icon--with-statusdot']]: hasStatusDots });\n  const avatarClasses = cn(styles['element-header__avatar'], {});\n  const CustomTag = titleHtmlMarkup;\n  const iconPropIsIconComponent = isComponent<IconProps>(icon, Icon);\n  const iconPropIsLazyIconComponent = !iconPropIsIconComponent && isComponent<LazyIconProps>(icon, LazyIcon);\n\n  let iconComponent;\n  if (iconPropIsIconComponent) {\n    iconComponent = React.cloneElement(icon as React.ReactElement<IconProps>, {\n      size: breakpoint < Breakpoint.md ? IconSize.XSmall : IconSize.Small,\n      isHovered,\n    });\n  } else if (iconPropIsLazyIconComponent) {\n    iconComponent = React.cloneElement(icon as React.ReactElement<LazyIconProps>, {\n      size: breakpoint < Breakpoint.md ? IconSize.XSmall : IconSize.Small,\n      isHovered,\n    });\n  } else {\n    iconComponent = icon;\n  }\n\n  return (\n    <span data-testid={testId} className={listLabelClasses}>\n      {showIcon && icon && <span className={iconClasses}>{iconComponent}</span>}\n      {size !== 'small' && mappedChildren?.avatarChild && (\n        <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n      )}\n\n      <span className={contentClasses} data-hasstatusdots={hasStatusDots}>\n        {mappedChildren?.elementHeaderTextChildren}\n        {!!mappedChildren?.stringChildren.length && (\n          <CustomTag className={styles['element-header__title']}>\n            <Highlighter searchText={highlightText}>{mappedChildren.stringChildren}</Highlighter>\n          </CustomTag>\n        )}\n        <Highlighter searchText={highlightText}>{mappedChildren?.remainingChildren}</Highlighter>\n      </span>\n\n      {hasStatusDots && (\n        <span className={statusdotContainerClasses}>\n          {!!mappedChildren?.statusDotChildren && <StatusDotList>{mappedChildren.statusDotChildren}</StatusDotList>}\n          {!!mappedChildren?.statusDotMCChild && mappedChildren?.statusDotMCChild}\n        </span>\n      )}\n\n      <span className={badgeContainerClasses}>\n        {mappedChildren?.badgeChildren &&\n          mappedChildren.badgeChildren.map((badgeChild, index) => {\n            return (\n              <span key={index} className={badgeClasses} data-parenttype={parentType}>\n                {badgeChild}\n              </span>\n            );\n          })}\n      </span>\n      {chevronIcon && typeof closeButton === 'undefined' && (\n        <span className={chevronClasses} data-parenttype={parentType}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n      {closeButton && (\n        <span className={chevronClasses} data-parenttype={parentType}>\n          {closeButton}\n        </span>\n      )}\n    </span>\n  );\n};\n\ntype ElementHeaderComponent = typeof ElementHeaderRoot & {\n  Text: React.FC<ElementHeaderTextProps>;\n  StatusDotList: React.FC<StatusDotListProps>;\n};\nElementHeaderRoot.displayName = 'ElementHeader';\nconst ElementHeader = ElementHeaderRoot as ElementHeaderComponent;\nElementHeader.Text = ElementHeaderText;\nElementHeader.Text.displayName = 'ElementHeader.Text';\nElementHeader.StatusDotList = StatusDotList;\nElementHeader.StatusDotList.displayName = 'ElementHeader.StatusDotList';\n\nexport default ElementHeader;\n"],"mappings":"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"}

package/lib/ElementHeaderText.js

@@ -1,12 +1,12 @@
 import { t as Highlighter_default } from "./Highlighter.js";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/ElementHeader/styles.module.scss";
 const ElementHeaderText = (props) => {
 	const { firstText, firstTextEmphasised = false, secondText = void 0, secondTextEmphasised = false, subText = false, className = "", testId, titleHtmlMarkup = "span", highlightText } = props;
-	const headerTextWrapperClasses = classNames(className, styles["text-wrapper"], { [styles["text-wrapper--sub-level"]]: subText });
-	const firstHeaderTextSegmentClasses = classNames({ [styles["text-wrapper__text--emphasised"]]: firstTextEmphasised });
-	const secondHeaderTextSegmentClasses = classNames({ [styles["text-wrapper__text--emphasised"]]: secondTextEmphasised });
+	const headerTextWrapperClasses = cn(className, styles["text-wrapper"], { [styles["text-wrapper--sub-level"]]: subText });
+	const firstHeaderTextSegmentClasses = cn({ [styles["text-wrapper__text--emphasised"]]: firstTextEmphasised });
+	const secondHeaderTextSegmentClasses = cn({ [styles["text-wrapper__text--emphasised"]]: secondTextEmphasised });
 	const CustomTag = titleHtmlMarkup;
 	return /* @__PURE__ */ jsx("span", {
 		"data-testid": testId,

package/lib/ElementHeaderText.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElementHeaderText.js","names":["ElementHeaderText: React.FC<ElementHeaderTextProps>"],"sources":["../src/components/ElementHeader/ElementHeaderText/ElementHeaderText.tsx","../src/components/ElementHeader/ElementHeaderText/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport type { TitleTags } from '../../Title';\n\nimport Highlighter from '../../Highlighter';\nimport styles from '../styles.module.scss';\n\nexport type ElementHeaderTextType = typeof ElementHeaderText;\n\nexport interface ElementHeaderTextProps {\n  /** The first text in the ElementHeaderText Component */\n  firstText: string;\n  /** Will style the first text as bold */\n  firstTextEmphasised?: boolean;\n  /** The second text in the ElementHeaderText Component */\n  secondText?: string;\n  /** Will style the second text as bold */\n  secondTextEmphasised?: boolean;\n  /** Whether or not this ElementHeaderText is a sub text */\n  subText?: boolean;\n  /** Adds custom classes to the ElementHeaderText component. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Changes the underlying element of the text. Default: span*/\n  titleHtmlMarkup?: TitleTags;\n  /** Highlights text. Used for search results */\n  highlightText?: string;\n}\n\nexport const ElementHeaderText: React.FC<ElementHeaderTextProps> = props => {\n  const {\n    firstText,\n    firstTextEmphasised = false,\n    secondText = undefined,\n    secondTextEmphasised = false,\n    subText = false,\n    className = '',\n    testId,\n    titleHtmlMarkup = 'span',\n    highlightText,\n  } = props;\n\n  const headerTextWrapperClasses = cn(className, styles['text-wrapper'], {\n    [styles['text-wrapper--sub-level']]: subText,\n  });\n  const firstHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: firstTextEmphasised,\n  });\n  const secondHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: secondTextEmphasised,\n  });\n  const CustomTag = titleHtmlMarkup;\n\n  return (\n    <span data-testid={testId} className={headerTextWrapperClasses}>\n      <CustomTag className={styles['element-header__title']}>\n        <Highlighter searchText={highlightText}>\n          <span className={firstHeaderTextSegmentClasses}>{firstText}</span>\n          {secondText && <span className={secondHeaderTextSegmentClasses}>{secondText}</span>}\n        </Highlighter>\n      </CustomTag>\n    </span>\n  );\n};\n\nexport default ElementHeaderText;\n","import ElementHeaderText from './ElementHeaderText';\nexport * from './ElementHeaderText';\nexport default ElementHeaderText;\n"],"mappings":";;;;AA8BA,MAAaA,qBAAsD,UAAS;CAC1E,MAAM,EACJ,WACA,sBAAsB,OACtB,aAAa,KAAA,GACb,uBAAuB,OACvB,UAAU,OACV,YAAY,IACZ,QACA,kBAAkB,QAClB,kBACE;CAEJ,MAAM,2BAA2B,WAAG,WAAW,OAAO,iBAAiB,GACpE,OAAO,6BAA6B,SACtC,CAAC;CACF,MAAM,gCAAgC,WAAG,GACtC,OAAO,oCAAoC,qBAC7C,CAAC;CACF,MAAM,iCAAiC,WAAG,GACvC,OAAO,oCAAoC,sBAC7C,CAAC;CACF,MAAM,YAAY;AAElB,QACE,oBAAC,QAAA;EAAK,eAAa;EAAQ,WAAW;YACpC,oBAAC,WAAA;GAAU,WAAW,OAAO;aAC3B,qBAAC,qBAAA;IAAY,YAAY;eACvB,oBAAC,QAAA;KAAK,WAAW;eAAgC;MAAiB,EACjE,cAAc,oBAAC,QAAA;KAAK,WAAW;eAAiC;MAAkB,CAAA;KACvE;IACJ;GACP;;AAIX,IAAA,4BAAe;AChEf,IAAA,8BAAe"}
+{"version":3,"file":"ElementHeaderText.js","names":["ElementHeaderText: React.FC<ElementHeaderTextProps>"],"sources":["../src/components/ElementHeader/ElementHeaderText/ElementHeaderText.tsx","../src/components/ElementHeader/ElementHeaderText/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport type { TitleTags } from '../../Title';\n\nimport Highlighter from '../../Highlighter';\nimport styles from '../styles.module.scss';\n\nexport type ElementHeaderTextType = typeof ElementHeaderText;\n\nexport interface ElementHeaderTextProps {\n  /** The first text in the ElementHeaderText Component */\n  firstText: string;\n  /** Will style the first text as bold */\n  firstTextEmphasised?: boolean;\n  /** The second text in the ElementHeaderText Component */\n  secondText?: string;\n  /** Will style the second text as bold */\n  secondTextEmphasised?: boolean;\n  /** Whether or not this ElementHeaderText is a sub text */\n  subText?: boolean;\n  /** Adds custom classes to the ElementHeaderText component. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Changes the underlying element of the text. Default: span*/\n  titleHtmlMarkup?: TitleTags;\n  /** Highlights text. Used for search results */\n  highlightText?: string;\n}\n\nexport const ElementHeaderText: React.FC<ElementHeaderTextProps> = props => {\n  const {\n    firstText,\n    firstTextEmphasised = false,\n    secondText = undefined,\n    secondTextEmphasised = false,\n    subText = false,\n    className = '',\n    testId,\n    titleHtmlMarkup = 'span',\n    highlightText,\n  } = props;\n\n  const headerTextWrapperClasses = cn(className, styles['text-wrapper'], {\n    [styles['text-wrapper--sub-level']]: subText,\n  });\n  const firstHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: firstTextEmphasised,\n  });\n  const secondHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: secondTextEmphasised,\n  });\n  const CustomTag = titleHtmlMarkup;\n\n  return (\n    <span data-testid={testId} className={headerTextWrapperClasses}>\n      <CustomTag className={styles['element-header__title']}>\n        <Highlighter searchText={highlightText}>\n          <span className={firstHeaderTextSegmentClasses}>{firstText}</span>\n          {secondText && <span className={secondHeaderTextSegmentClasses}>{secondText}</span>}\n        </Highlighter>\n      </CustomTag>\n    </span>\n  );\n};\n\nexport default ElementHeaderText;\n","import ElementHeaderText from './ElementHeaderText';\nexport * from './ElementHeaderText';\nexport default ElementHeaderText;\n"],"mappings":";;;;AA8BA,MAAaA,qBAAsD,UAAS;CAC1E,MAAM,EACJ,WACA,sBAAsB,OACtB,aAAa,KAAA,GACb,uBAAuB,OACvB,UAAU,OACV,YAAY,IACZ,QACA,kBAAkB,QAClB,kBACE;CAEJ,MAAM,2BAA2B,GAAG,WAAW,OAAO,iBAAiB,GACpE,OAAO,6BAA6B,SACtC,CAAC;CACF,MAAM,gCAAgC,GAAG,GACtC,OAAO,oCAAoC,qBAC7C,CAAC;CACF,MAAM,iCAAiC,GAAG,GACvC,OAAO,oCAAoC,sBAC7C,CAAC;CACF,MAAM,YAAY;AAElB,QACE,oBAAC,QAAA;EAAK,eAAa;EAAQ,WAAW;YACpC,oBAAC,WAAA;GAAU,WAAW,OAAO;aAC3B,qBAAC,qBAAA;IAAY,YAAY;eACvB,oBAAC,QAAA;KAAK,WAAW;eAAgC;MAAiB,EACjE,cAAc,oBAAC,QAAA;KAAK,WAAW;eAAiC;MAAkB,CAAA;KACvE;IACJ;GACP;;AAIX,IAAA,4BAAe;AChEf,IAAA,8BAAe"}

package/lib/ErrorWrapper.js

@@ -1,10 +1,10 @@
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/ErrorWrapper/styles.module.scss";
 const ErrorWrapper = (props) => {
 	const { renderError = true } = props;
 	return /* @__PURE__ */ jsxs("div", {
-		className: classNames(props.errorText && renderError && styles[`error-wrapper--with-error`], props.className),
+		className: cn(props.errorText && renderError && styles[`error-wrapper--with-error`], props.className),
 		"data-testid": props.testId,
 		children: [/* @__PURE__ */ jsx("span", {
 			ref: props.errorMessageRef,

package/lib/ErrorWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorWrapper.js","names":["ErrorWrapper: React.FC<ErrorWrapperProps>"],"sources":["../src/components/ErrorWrapper/ErrorWrapper.tsx","../src/components/ErrorWrapper/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport interface ErrorWrapperClassNameProps {\n  errorWrapperClassName?: string;\n}\n\nexport interface ErrorWrapperProps {\n  /** Form component */\n  children?: React.ReactNode;\n  /** Error message */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds a ref to the error message p tag */\n  errorMessageRef?: React.Ref<HTMLDivElement>;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const ErrorWrapper: React.FC<ErrorWrapperProps> = props => {\n  const { renderError = true } = props;\n\n  const errorWrapperClasses = cn(props.errorText && renderError && styles[`error-wrapper--with-error`], props.className);\n\n  return (\n    <div className={errorWrapperClasses} data-testid={props.testId}>\n      <span ref={props.errorMessageRef} tabIndex={-1}>\n        {props.errorText && (\n          <p className={styles['error-wrapper__errors']} id={props.errorTextId}>\n            {props.errorText}\n          </p>\n        )}\n      </span>\n      {props.children}\n    </div>\n  );\n};\n\nexport default ErrorWrapper;\n","import ErrorWrapper from './ErrorWrapper';\nexport * from './ErrorWrapper';\nexport default ErrorWrapper;\n"],"mappings":";;;AAyBA,MAAaA,gBAA4C,UAAS;CAChE,MAAM,EAAE,cAAc,SAAS;AAI/B,QACE,qBAAC,OAAA;EAAI,WAHqB,WAAG,MAAM,aAAa,eAAe,OAAO,8BAA8B,MAAM,UAAU;EAG/E,eAAa,MAAM;aACtD,oBAAC,QAAA;GAAK,KAAK,MAAM;GAAiB,UAAU;aACzC,MAAM,aACL,oBAAC,KAAA;IAAE,WAAW,OAAO;IAA0B,IAAI,MAAM;cACtD,MAAM;KACL;IAED,EACN,MAAM,SAAA;GACH;;ACtCV,IAAA,yBD0Ce"}
+{"version":3,"file":"ErrorWrapper.js","names":["ErrorWrapper: React.FC<ErrorWrapperProps>"],"sources":["../src/components/ErrorWrapper/ErrorWrapper.tsx","../src/components/ErrorWrapper/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport interface ErrorWrapperClassNameProps {\n  errorWrapperClassName?: string;\n}\n\nexport interface ErrorWrapperProps {\n  /** Form component */\n  children?: React.ReactNode;\n  /** Error message */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds a ref to the error message p tag */\n  errorMessageRef?: React.Ref<HTMLDivElement>;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const ErrorWrapper: React.FC<ErrorWrapperProps> = props => {\n  const { renderError = true } = props;\n\n  const errorWrapperClasses = cn(props.errorText && renderError && styles[`error-wrapper--with-error`], props.className);\n\n  return (\n    <div className={errorWrapperClasses} data-testid={props.testId}>\n      <span ref={props.errorMessageRef} tabIndex={-1}>\n        {props.errorText && (\n          <p className={styles['error-wrapper__errors']} id={props.errorTextId}>\n            {props.errorText}\n          </p>\n        )}\n      </span>\n      {props.children}\n    </div>\n  );\n};\n\nexport default ErrorWrapper;\n","import ErrorWrapper from './ErrorWrapper';\nexport * from './ErrorWrapper';\nexport default ErrorWrapper;\n"],"mappings":";;;AAyBA,MAAaA,gBAA4C,UAAS;CAChE,MAAM,EAAE,cAAc,SAAS;AAI/B,QACE,qBAAC,OAAA;EAAI,WAHqB,GAAG,MAAM,aAAa,eAAe,OAAO,8BAA8B,MAAM,UAAU;EAG/E,eAAa,MAAM;aACtD,oBAAC,QAAA;GAAK,KAAK,MAAM;GAAiB,UAAU;aACzC,MAAM,aACL,oBAAC,KAAA;IAAE,WAAW,OAAO;IAA0B,IAAI,MAAM;cACtD,MAAM;KACL;IAED,EACN,MAAM,SAAA;GACH;;ACtCV,IAAA,yBD0Ce"}