@helsenorge/designsystem-react 13.0.0-beta.4 → 13.0.0-workspaces-beta.1

package/lib/Checkbox.js

@@ -0,0 +1,117 @@
+import { t as uuid } from "./uuid.js";
+import { a as IconSize, i as FormSize, n as AnalyticsId, r as FormOnColor } from "./constants2.js";
+import { t as usePseudoClasses } from "./usePseudoClasses.js";
+import { t as getColor } from "./color.js";
+import { t as Icon_default } from "./Icon.js";
+import { n as mergeRefs, t as isMutableRefObject } from "./refs.js";
+import { t as Check_default } from "./Check.js";
+import { t as useIdWithFallback } from "./useIdWithFallback.js";
+import { t as getAriaDescribedBy } from "./accessibility.js";
+import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
+import { i as renderLabelAsParent, n as getLabelText } from "./Label.js";
+import React, { useEffect, useState } from "react";
+import classNames from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import checkboxStyles from "./components/Checkbox/styles.module.scss";
+const Checkbox = React.forwardRef((props, ref) => {
+	const { className, checked = false, disabled, label, inputId = uuid(), onColor = FormOnColor.onwhite, name = inputId, size, errorText, error = !!errorText, errorTextId: errorTextIdProp, errorWrapperClassName, value = getLabelText(label), testId, required, onChange } = props;
+	const [isChecked, setIsChecked] = useState(checked);
+	const errorTextId = useIdWithFallback(errorTextIdProp);
+	const onWhite = onColor === FormOnColor.onwhite;
+	const onGrey = onColor === FormOnColor.ongrey;
+	const onBlueberry = onColor === FormOnColor.onblueberry;
+	const onInvalid = error || onColor === FormOnColor.oninvalid;
+	const onDark = onColor === FormOnColor.ondark;
+	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"], {
+		[checkboxStyles["checkbox-label--disabled"]]: disabled,
+		[checkboxStyles["checkbox-label--on-dark"]]: onDark,
+		[checkboxStyles["checkbox-label--large"]]: large,
+		[checkboxStyles["checkbox-label__large--checked"]]: large && isChecked,
+		[checkboxStyles["checkbox-label__large--focus"]]: large && isFocused,
+		[checkboxStyles["checkbox-label__large--on-white"]]: large && onWhite,
+		[checkboxStyles["checkbox-label__large--on-grey"]]: large && onGrey,
+		[checkboxStyles["checkbox-label__large--on-blueberry"]]: large && onBlueberry,
+		[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"], {
+		[checkboxStyles["checkbox__icon-wrapper--on-white"]]: onWhite,
+		[checkboxStyles["checkbox__icon-wrapper--on-grey"]]: onGrey,
+		[checkboxStyles["checkbox__icon-wrapper--on-invalid"]]: onInvalid,
+		[checkboxStyles["checkbox__icon-wrapper--disabled"]]: disabled,
+		[checkboxStyles["checkbox__icon-wrapper__regular--checked"]]: !large && isChecked,
+		[checkboxStyles["checkbox__icon-wrapper__regular--invalid"]]: !large && isChecked && onInvalid,
+		[checkboxStyles["checkbox__icon-wrapper__regular--on-dark"]]: !large && isChecked && onDark,
+		[checkboxStyles["checkbox__icon-wrapper__large--checked"]]: large && isChecked,
+		[checkboxStyles["checkbox__icon-wrapper__large--invalid"]]: large && onInvalid,
+		[checkboxStyles["checkbox__icon-wrapper--on-dark"]]: onDark,
+		[checkboxStyles["checkbox__icon-wrapper--on-blueberry"]]: onBlueberry,
+		[checkboxStyles["checkbox__icon-wrapper--invalid"]]: onInvalid,
+		[checkboxStyles["checkbox__icon-wrapper__large--invalid"]]: large && isChecked && onInvalid,
+		[checkboxStyles["checkbox__icon-wrapper__large--disabled"]]: disabled && large && isChecked,
+		[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"], {
+		[checkboxStyles["checkbox-label__text__large--checked"]]: large && isChecked,
+		[checkboxStyles["checkbox-label__text__large--invalid"]]: large && isChecked && onInvalid,
+		[checkboxStyles["checkbox-label__text--on-dark"]]: onDark,
+		[checkboxStyles["checkbox-label__text--disabled"]]: disabled
+	});
+	let iconColor = getColor("white");
+	if (onDark || large && isChecked) iconColor = getColor("blueberry", 900);
+	if (onInvalid && large && isChecked) iconColor = getColor("white");
+	if (disabled) iconColor = getColor("neutral", 700);
+	useEffect(() => {
+		setIsChecked(checked);
+	}, [checked]);
+	const onChangeHandler = (e) => {
+		if (onChange) onChange(e);
+		setIsChecked(!isChecked);
+	};
+	const getLabelContent = () => {
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
+			id: inputId,
+			name,
+			className: checkboxClasses,
+			type: "checkbox",
+			checked: isChecked,
+			disabled,
+			value,
+			ref: mergedRefs,
+			"aria-describedby": getAriaDescribedBy(props, errorTextId),
+			"aria-invalid": error,
+			required,
+			onChange: onChangeHandler
+		}), /* @__PURE__ */ jsx("span", {
+			className: checkboxIconWrapperClasses,
+			children: isChecked && /* @__PURE__ */ jsx(Icon_default, {
+				color: iconColor,
+				className: checkboxStyles["checkbox__icon"],
+				svgIcon: Check_default,
+				size: IconSize.XSmall
+			})
+		})] });
+	};
+	return /* @__PURE__ */ jsx(ErrorWrapper_default, {
+		className: errorWrapperClassName,
+		errorText,
+		errorTextId,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-testid": testId,
+			"data-analyticsid": AnalyticsId.Checkbox,
+			className: checkboxWrapperClasses,
+			children: renderLabelAsParent(label, getLabelContent(), inputId, onColor, checkboxLabelClasses, labelTextClasses, checkboxStyles["checkbox-sublabel-wrapper"], large)
+		})
+	});
+});
+Checkbox.displayName = "Checkbox";
+var Checkbox_default = Checkbox;
+export { Checkbox_default as n, Checkbox as t };
+
+//# sourceMappingURL=Checkbox.js.map

package/lib/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport classNames from 'classnames';\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, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport Check from '../Icons/Check';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport checkboxStyles from './styles.module.scss';\n\nexport interface CheckboxProps\n  extends 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}\n\nexport const Checkbox = React.forwardRef((props: CheckboxProps, ref: React.Ref<HTMLInputElement>) => {\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  } = 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,\n          getLabelContent(),\n          inputId,\n          onColor as FormOnColor,\n          checkboxLabelClasses,\n          labelTextClasses,\n          checkboxStyles['checkbox-sublabel-wrapper'],\n          large\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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"}

package/lib/Close.js

@@ -0,0 +1,44 @@
+import { n as AnalyticsId } from "./constants2.js";
+import { t as usePseudoClasses } from "./usePseudoClasses.js";
+import { t as Icon_default } from "./Icon.js";
+import { n as mergeRefs } from "./refs.js";
+import { t as useIsMobileBreakpoint } from "./useIsMobileBreakpoint.js";
+import { t as X_default } from "./X.js";
+import React from "react";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+import styles from "./components/Close/styles.module.scss";
+var Close_default$1 = React.forwardRef(function ButtonForwardedRef(props, ref) {
+	const { small, testId, ariaLabel = "Lukk", onClick, className, color = "blueberry" } = props;
+	const { refObject, isHovered } = usePseudoClasses();
+	const iconSize = useIsMobileBreakpoint() || small ? 38 : 48;
+	let iconColor;
+	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);
+	return /* @__PURE__ */ jsx("button", {
+		ref: mergeRefs([ref, refObject]),
+		"data-testid": testId,
+		"data-analyticsid": AnalyticsId.Close,
+		className: closeClasses,
+		"aria-label": ariaLabel,
+		onClick,
+		type: "button",
+		children: /* @__PURE__ */ jsx("span", {
+			className: classNames(styles["close__inner-container"], {
+				[styles["close__inner-container--small"]]: small,
+				[styles["close__inner-container--plum"]]: color == "plum"
+			}),
+			children: /* @__PURE__ */ jsx(Icon_default, {
+				svgIcon: X_default,
+				color: iconColor,
+				size: iconSize,
+				isHovered
+			})
+		})
+	});
+});
+export { Close_default$1 as t };
+
+//# sourceMappingURL=Close.js.map

package/lib/Close.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Close.js","names":[],"sources":["../src/components/Close/Close.tsx","../src/components/Close/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport 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}\n\nconst Close = React.forwardRef(function ButtonForwardedRef(props: CloseProps, ref: React.ForwardedRef<HTMLButtonElement>) {\n  const { small, testId, ariaLabel = 'Lukk', onClick, className, color = 'blueberry' } = 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":";;;;;;;;;;ACEA,IAAA,kBD0Bc,MAAM,WAAW,SAAS,mBAAmB,OAAmB,KAA4C;CACxH,MAAM,EAAE,OAAO,QAAQ,YAAY,QAAQ,SAAS,WAAW,QAAQ,gBAAgB;CACvF,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;EAEX"}

package/lib/DictionaryTrigger.js

@@ -0,0 +1,23 @@
+import { n as AnalyticsId } from "./constants2.js";
+import React from "react";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+import styles from "./components/DictionaryTrigger/styles.module.scss";
+var DictionaryTrigger = React.forwardRef(({ children, selected = false, className, testId,...rest }, ref) => {
+	const triggerClasses = classNames(styles.dictionarytrigger, className);
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-testid": testId,
+		"data-analyticsid": AnalyticsId.DictionaryTrigger,
+		className: triggerClasses,
+		"aria-expanded": selected,
+		ref,
+		...rest,
+		children
+	});
+});
+DictionaryTrigger.displayName = "DictionaryTrigger";
+var DictionaryTrigger_default$1 = DictionaryTrigger;
+export { DictionaryTrigger_default$1 as t };
+
+//# sourceMappingURL=DictionaryTrigger.js.map

package/lib/DictionaryTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DictionaryTrigger.js","names":[],"sources":["../src/components/DictionaryTrigger/DictionaryTrigger.tsx","../src/components/DictionaryTrigger/index.ts"],"sourcesContent":["import React from 'react';\n\nimport 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\nconst DictionaryTrigger = React.forwardRef<HTMLButtonElement, DictionaryTriggerProps>(\n  ({ children, selected = false, className, testId, ...rest }, ref) => {\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);\n\nDictionaryTrigger.displayName = 'DictionaryTrigger';\n\nexport default DictionaryTrigger;\n","import DictionaryTrigger from './DictionaryTrigger';\nexport * from './DictionaryTrigger';\nexport default DictionaryTrigger;\n"],"mappings":";;;;;AA2BA,IAAM,oBAAoB,MAAM,YAC7B,EAAE,UAAU,WAAW,OAAO,WAAW,OAAQ,GAAG,QAAQ,QAAQ;CACnE,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;EAGd;AAED,kBAAkB,cAAc;AC7ChC,IAAA,8BD+Ce"}

package/lib/Drawer.js

@@ -0,0 +1,227 @@
+import { n as uuid_default } from "./uuid.js";
+import { c as ZIndex, n as AnalyticsId, o as KeyboardEventKey, s as LanguageLocales } from "./constants2.js";
+import { r as useLanguage } from "./language.js";
+import { t as useIsMobileBreakpoint } from "./useIsMobileBreakpoint.js";
+import { t as Button_default } from "./Button.js";
+import { n as getAriaLabelAttributes } from "./accessibility.js";
+import { n as useFocusTrap_default } from "./useFocusTrap.js";
+import { t as useIsVisible } from "./useIsVisible.js";
+import { t as useKeyboardEvent } from "./useKeyboardEvent.js";
+import { t as useOutsideEvent } from "./useOutsideEvent.js";
+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 React, { useEffect, useRef } from "react";
+import classNames from "classnames";
+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" };
+const getResources = (language) => {
+	switch (language) {
+		case LanguageLocales.ENGLISH: return HN_Designsystem_Drawer_en_GB_default;
+		case LanguageLocales.NORWEGIAN:
+		default: return HN_Designsystem_Drawer_nb_NO_default;
+	}
+};
+var Drawer = (props) => {
+	const { isOpen,...rest } = props;
+	const isMobile = useIsMobileBreakpoint();
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(InnerDrawer, {
+		...rest,
+		isMobile
+	}) });
+};
+var InnerDrawer = (props) => {
+	const { ariaLabel, ariaLabelledBy, ariaLabelCloseBtn: ariaLabelCloseBtn$2, children, closeColor = "blueberry", desktopDirection = "left", footerContent, headerClasses, noCloseButton = false, onPrimaryAction, onRequestClose, onSecondaryAction, primaryActionText, secondaryActionText, title, titleHtmlMarkup = "h3", titleId = uuid_default(), zIndex = ZIndex.OverlayScreen, resources, isMobile } = props;
+	const ariaLabelAttributes = getAriaLabelAttributes({
+		label: ariaLabel,
+		id: ariaLabelledBy,
+		fallbackId: titleId
+	});
+	const overlayRef = useRef(null);
+	const containerRef = useRef(null);
+	const contentRef = useRef(null);
+	const topContent = useRef(null);
+	const bottomContent = useRef(null);
+	const headerRef = useRef(null);
+	const footerRef = useRef(null);
+	const [scope, animate] = useAnimate();
+	const [isPresent, safeToRemove] = usePresence();
+	const [headerHeight, setHeaderHeight] = React.useState(0);
+	const [footerHeight, setFooterHeight] = React.useState(0);
+	const topContentVisible = useIsVisible(topContent);
+	const bottomContentVisible = useIsVisible(bottomContent, 0);
+	const { language } = useLanguage(LanguageLocales.NORWEGIAN);
+	const defaultResources = getResources(language);
+	const mergedResources = {
+		...defaultResources,
+		...resources,
+		ariaLabelCloseBtn: ariaLabelCloseBtn$2 || resources?.ariaLabelCloseBtn || defaultResources.ariaLabelCloseBtn
+	};
+	const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;
+	const headerStyling = classNames(styles.drawer__header, headerClasses, { [styles["drawer__header--no-close-button"]]: noCloseButton });
+	const hasFooterContent = typeof footerContent !== "undefined" && footerContent || onPrimaryAction || onSecondaryAction;
+	useFocusTrap_default(containerRef, true);
+	useReturnFocusOnUnmount(containerRef);
+	useOutsideEvent(containerRef, () => {
+		if (onRequestClose) onRequestClose();
+	});
+	useKeyboardEvent(containerRef, () => onRequestClose && onRequestClose(), [KeyboardEventKey.Escape]);
+	useEffect(() => {
+		containerRef.current?.focus();
+		disableBodyScroll();
+		return () => {
+			enableBodyScroll();
+		};
+	}, []);
+	useEffect(() => {
+		const updateHeights = () => {
+			if (headerRef.current) setHeaderHeight(headerRef.current.offsetHeight);
+			if (footerRef.current) setFooterHeight(footerRef.current.offsetHeight);
+		};
+		updateHeights();
+		const resizeObserver = new ResizeObserver(updateHeights);
+		if (headerRef.current) resizeObserver.observe(headerRef.current);
+		if (footerRef.current) resizeObserver.observe(footerRef.current);
+		return () => {
+			resizeObserver.disconnect();
+		};
+	}, [hasFooterContent]);
+	useEffect(() => {
+		if (!overlayRef.current || !containerRef.current) return;
+		if (!isPresent) {
+			closeDrawer();
+			return;
+		}
+		if (isMobile) animate(containerRef.current, { y: "0" }, {
+			duration: .3,
+			ease: "easeInOut"
+		});
+		else animate(containerRef.current, { x: "0" }, {
+			duration: .3,
+			ease: "easeInOut"
+		});
+		animate(overlayRef.current, {
+			opacity: 1,
+			pointerEvents: "auto"
+		}, {
+			duration: .3,
+			ease: "easeInOut"
+		});
+	}, [isPresent]);
+	const closeDrawer = () => {
+		if (!overlayRef.current || !containerRef.current) return;
+		animate(overlayRef.current, {
+			opacity: 0,
+			pointerEvents: "none"
+		}, {
+			duration: .3,
+			ease: "easeInOut"
+		});
+		if (isMobile) animate(containerRef.current, { y: "100%" }, {
+			duration: .3,
+			ease: "easeInOut",
+			onComplete: () => {
+				if (safeToRemove) safeToRemove();
+			}
+		});
+		else animate(containerRef.current, { x: desktopDirection === "left" ? "-100%" : "100%" }, {
+			duration: .3,
+			ease: "easeInOut",
+			onComplete: () => {
+				if (safeToRemove) safeToRemove();
+			}
+		});
+	};
+	const handleCTA = (callback) => {
+		if (callback) callback();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: styles.drawer,
+		ref: scope,
+		style: { zIndex },
+		"data-analyticsid": AnalyticsId.Drawer,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: styles.drawer__overlay,
+			ref: overlayRef,
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: classNames(styles.drawer__container, { [styles["drawer__container--right"]]: desktopDirection === "right" }),
+			ref: containerRef,
+			role: "dialog",
+			"aria-modal": "true",
+			tabIndex: -1,
+			...ariaLabelAttributes,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: styles.drawer__container__inner,
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: headerStyling,
+						ref: headerRef,
+						children: [/* @__PURE__ */ jsx(Title_default, {
+							id: ariaLabelAttributes?.["aria-labelledby"],
+							htmlMarkup: titleHtmlMarkup,
+							appearance: "title3",
+							children: title
+						}), !noCloseButton && onRequestClose != void 0 && /* @__PURE__ */ jsx(Close_default, {
+							ariaLabel: mergedResources.ariaLabelCloseBtn,
+							color: closeColor,
+							onClick: onRequestClose,
+							className: styles["drawer__header__close-button"]
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: classNames(styles["drawer__content__shadow"], styles["drawer__content__shadow--top"]),
+						style: {
+							opacity: !topContentVisible && contentIsScrollable ? 1 : 0,
+							top: headerHeight
+						}
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: styles.drawer__content,
+						tabIndex: contentIsScrollable ? 0 : void 0,
+						role: contentIsScrollable ? "region" : void 0,
+						...contentIsScrollable ? ariaLabelAttributes : {},
+						ref: contentRef,
+						children: [
+							/* @__PURE__ */ jsx("div", { ref: topContent }),
+							/* @__PURE__ */ jsx("div", {
+								className: styles["drawer__content__children"],
+								children
+							}),
+							/* @__PURE__ */ jsx("div", {
+								ref: bottomContent,
+								style: { height: "1px" }
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: classNames(styles["drawer__content__shadow"], styles["drawer__content__shadow--bottom"]),
+						style: {
+							opacity: !bottomContentVisible && contentIsScrollable ? 1 : 0,
+							bottom: hasFooterContent ? footerHeight : 0
+						}
+					})
+				]
+			}), hasFooterContent && /* @__PURE__ */ jsx("div", {
+				className: styles.drawer__footer,
+				ref: footerRef,
+				children: footerContent ? footerContent : /* @__PURE__ */ jsxs(Fragment, { children: [onPrimaryAction && /* @__PURE__ */ jsx(Button_default, {
+					onClick: () => handleCTA(onPrimaryAction),
+					children: primaryActionText
+				}), onSecondaryAction && /* @__PURE__ */ jsx(Button_default, {
+					variant: "borderless",
+					onClick: () => handleCTA(onSecondaryAction),
+					children: secondaryActionText
+				})] })
+			})]
+		})]
+	});
+};
+var Drawer_default$1 = Drawer;
+export { Drawer_default$1 as t };
+
+//# sourceMappingURL=Drawer.js.map

package/lib/Drawer.js.map

@@ -0,0 +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 { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Drawer.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Drawer.nb-NO.json';\nimport { HNDesignsystemDrawer } from '../../resources/Resources';\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 { 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 { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { HNDesignsystemDrawer } from '../../resources/Resources';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { useLanguage } from '../../utils/language';\nimport { disableBodyScroll, enableBodyScroll } from '../../utils/scroll';\nimport uuid from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Title, { TitleTags } 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  /** @deprecated Close button aria-label */\n  ariaLabelCloseBtn?: 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    ariaLabelCloseBtn,\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    ariaLabelCloseBtn: ariaLabelCloseBtn || resources?.ariaLabelCloseBtn || defaultResources.ariaLabelCloseBtn,\n  };\n\n  const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;\n  const headerStyling = classNames(styles.drawer__header, headerClasses, {\n    [styles['drawer__header--no-close-button']]: noCloseButton,\n  });\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  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  // 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  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 id={ariaLabelAttributes?.['aria-labelledby']} htmlMarkup={titleHtmlMarkup} appearance=\"title3\">\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

@@ -0,0 +1,74 @@
+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 React from "react";
+import classNames from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import duolistStyles from "./components/Duolist/styles.module.scss";
+const DuolistGroup = (props) => {
+	const { format = "formatted", boldColumn = format === "non-formatted" ? "none" : "first", description, separator = ": ", term } = props;
+	const firstBold = boldColumn === "first";
+	const secondBold = boldColumn === "second";
+	const nonFormatted = format === "non-formatted";
+	const dtClassNames = classNames(duolistStyles["duolist__dt"], {
+		[duolistStyles["duolist__dt--bold"]]: firstBold,
+		[duolistStyles["duolist__dt--non-formatted"]]: nonFormatted
+	});
+	const ddClassNames = classNames(duolistStyles["duolist__dd"], {
+		[duolistStyles["duolist__dd--bold"]]: secondBold,
+		[duolistStyles["duolist__dd--non-formatted"]]: nonFormatted
+	});
+	const renderContent = () => {
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
+			"data-separator": nonFormatted ? separator : void 0,
+			className: dtClassNames,
+			children: term
+		}), /* @__PURE__ */ jsx("dd", {
+			className: ddClassNames,
+			children: description
+		})] });
+	};
+	return nonFormatted ? /* @__PURE__ */ jsx("div", { children: renderContent() }) : /* @__PURE__ */ jsx(Fragment, { children: renderContent() });
+};
+const Duolist = (props) => {
+	const { boldColumn, border = "no-border", descriptionWidth, label, format = "formatted", separator, variant = "normal", children, className, testId, useCollapsedFromAndBelowBreakpoint } = props;
+	const hasBorder = border === "border";
+	const hasLines = variant === "line";
+	const extraPaddingTop = hasBorder && (label || hasLines);
+	const nonFormatted = format === "non-formatted";
+	const breakpoint = useBreakpoint();
+	const useCollapsedMode = useCollapsedFromAndBelowBreakpoint && breakpoint <= Breakpoint[useCollapsedFromAndBelowBreakpoint];
+	const duolistWrapperClasses = classNames({
+		[duolistStyles["duolist-wrapper--border"]]: hasBorder,
+		[duolistStyles["duolist-wrapper--extra-padding-top"]]: extraPaddingTop
+	}, className);
+	const duolistClasses = classNames(duolistStyles.duolist, {
+		[duolistStyles["duolist--line"]]: hasLines,
+		[duolistStyles["duolist--non-formatted"]]: nonFormatted,
+		[duolistStyles["duolist--collapsed"]]: useCollapsedMode,
+		[duolistStyles["duolist--not-collapsed"]]: !useCollapsedMode
+	});
+	const duolistColumnStyle = descriptionWidth ? descriptionWidth + "%" : "minmax(60%, 1fr)";
+	return /* @__PURE__ */ jsxs("div", {
+		className: duolistWrapperClasses,
+		"data-testid": testId,
+		"data-analyticsid": AnalyticsId.Duolist,
+		children: [label && /* @__PURE__ */ jsxs(Fragment, { children: [label, /* @__PURE__ */ jsx(Spacer_default, {})] }), /* @__PURE__ */ jsx("dl", {
+			style: !nonFormatted ? { gridTemplateColumns: useCollapsedMode ? `1fr` : `auto ${duolistColumnStyle}` } : void 0,
+			className: duolistClasses,
+			children: React.Children.map(children, (child) => {
+				if (child === null || typeof child === "undefined") return;
+				const duolistGroup = child;
+				if (duolistGroup.type === DuolistGroup) return React.cloneElement(child, {
+					boldColumn: duolistGroup.props.boldColumn ?? boldColumn,
+					format: duolistGroup.props.format ?? format,
+					separator: duolistGroup.props.separator ?? separator
+				});
+			})
+		})]
+	});
+};
+var Duolist_default$1 = Duolist;
+export { Duolist as n, DuolistGroup as r, Duolist_default$1 as t };
+
+//# sourceMappingURL=Duolist.js.map

package/lib/Duolist.js.map

@@ -0,0 +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 { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport Spacer from '../Spacer';\nimport { TitleProps } from '../Title';\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}\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 data-separator={nonFormatted ? separator : undefined} className={dtClassNames}>\n          {term}\n        </dt>\n        <dd className={ddClassNames}>{description}</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              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":";;;;;;;AAsDA,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;GAAG,kBAAgB,eAAe,YAAY,KAAA;GAAW,WAAW;aAClE;IACE,EACL,oBAAC,MAAA;GAAG,WAAW;aAAe;IAAiB,CAAA,EAAA,CAC9C;;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,YAAY,aAAa,MAAM,cAAc;KAC7C,QAAQ,aAAa,MAAM,UAAU;KACrC,WAAW,aAAa,MAAM,aAAa;KAC5C,CAAC;KAEJ;IACC,CAAA;GACD;;ACjJV,IAAA,oBDqJe"}