@helsenorge/designsystem-react 12.12.2 → 12.12.3

package/lib/Checkbox.js

@@ -0,0 +1,135 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React__default, { useState, useEffect } from "react";
+import classNames from "classnames";
+import { FormOnColor, FormSize, AnalyticsId, IconSize } from "./constants.js";
+import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
+import { useUuid } from "./hooks/useUuid.js";
+import { getColor } from "./theme/currys/color.js";
+import { getAriaDescribedBy } from "./utils/accessibility.js";
+import { isMutableRefObject, mergeRefs } from "./utils/refs.js";
+import { u as uuid } from "./uuid.js";
+import { E as ErrorWrapper } from "./ErrorWrapper.js";
+import { I as Icon } from "./Icon.js";
+import Check from "./components/Icons/Check.js";
+import { g as getLabelText, r as renderLabelAsParent } from "./Label.js";
+import checkboxStyles from "./components/Checkbox/styles.module.scss";
+const Checkbox = React__default.forwardRef((props, ref) => {
+  const {
+    className,
+    checked = false,
+    disabled,
+    label,
+    inputId = uuid(),
+    onColor = FormOnColor.onwhite,
+    name = inputId,
+    size,
+    errorText,
+    error = !!errorText,
+    errorTextId,
+    errorWrapperClassName,
+    value = getLabelText(label),
+    testId,
+    required,
+    onChange
+  } = props;
+  const [isChecked, setIsChecked] = useState(checked);
+  const errorTextUuid = useUuid(errorTextId);
+  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, errorTextUuid),
+          "aria-invalid": error,
+          required,
+          onChange: onChangeHandler
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: checkboxIconWrapperClasses, children: isChecked && /* @__PURE__ */ jsx(Icon, { color: iconColor, className: checkboxStyles["checkbox__icon"], svgIcon: Check, size: IconSize.XSmall }) })
+    ] });
+  };
+  return /* @__PURE__ */ jsx(ErrorWrapper, { className: errorWrapperClassName, errorText, errorTextId: errorTextUuid, 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";
+export {
+  Checkbox as C
+};
+//# sourceMappingURL=Checkbox.js.map

package/lib/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","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 { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\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,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    onChange,\n  } = props;\n  const [isChecked, setIsChecked] = useState(checked);\n  const errorTextUuid = useUuid(errorTextId);\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, errorTextUuid)}\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={errorTextUuid}>\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"],"names":["React"],"mappings":"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"}

package/lib/Close.js

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import classNames from "classnames";
+import { AnalyticsId } from "./constants.js";
+import { useHover } from "./hooks/useHover.js";
+import { useIsMobileBreakpoint } from "./hooks/useIsMobileBreakpoint.js";
+import { mergeRefs } from "./utils/refs.js";
+import { I as Icon } from "./Icon.js";
+import X from "./components/Icons/X.js";
+import styles from "./components/Close/styles.module.scss";
+const Close = React__default.forwardRef(function ButtonForwardedRef(props, ref) {
+  const { small, testId, ariaLabel = "Lukk", onClick, className, color = "blueberry" } = props;
+  const { hoverRef, isHovered } = useHover();
+  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, hoverRef]),
+      "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, { svgIcon: X, color: iconColor, size: iconSize, isHovered })
+        }
+      )
+    }
+  );
+});
+export {
+  Close as C
+};
+//# sourceMappingURL=Close.js.map

package/lib/Close.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Close.js","sources":["../src/components/Close/Close.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\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 { hoverRef, isHovered } = useHover();\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, hoverRef])}\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"],"names":["React"],"mappings":";;;;;;;;;;AA4BA,MAAM,QAAQA,eAAM,WAAW,SAAS,mBAAmB,OAAmB,KAA4C;AACxH,QAAM,EAAE,OAAO,QAAQ,YAAY,QAAQ,SAAS,WAAW,QAAQ,YAAA,IAAgB;AACvF,QAAM,EAAE,UAAU,UAAA,IAAc,SAAA;AAEhC,QAAM,WAAW,sBAAA,KAA2B,QAAQ,KAAK;AAEzD,MAAI;AACJ,MAAI,UAAU,SAAS;AACrB,gBAAY;AAAA,EACd,WAAW,UAAU,QAAQ;AAC3B,gBAAY;AAAA,EACd,OAAO;AACL,gBAAY;AAAA,EACd;AAEA,QAAM,eAAe,WAAW,OAAO,OAAO,EAAE,CAAC,OAAO,cAAc,CAAC,GAAG,MAAA,GAAS,SAAS;AAE5F,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK,UAAU,CAAC,KAAK,QAAQ,CAAC;AAAA,MAC9B,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAC9B,WAAW;AAAA,MACX,cAAY;AAAA,MACZ;AAAA,MACA,MAAK;AAAA,MAEL,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,WAAW,OAAO,wBAAwB,GAAG;AAAA,YACtD,CAAC,OAAO,+BAA+B,CAAC,GAAG;AAAA,YAC3C,CAAC,OAAO,8BAA8B,CAAC,GAAG,SAAS;AAAA,UAAA,CACpD;AAAA,UAED,UAAA,oBAAC,QAAK,SAAS,GAAG,OAAO,WAAW,MAAM,UAAU,UAAA,CAAsB;AAAA,QAAA;AAAA,MAAA;AAAA,IAC5E;AAAA,EAAA;AAGN,CAAC;"}

package/lib/DictionaryTrigger.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import classNames from "classnames";
+import { AnalyticsId } from "./constants.js";
+import styles from "./components/DictionaryTrigger/styles.module.scss";
+const DictionaryTrigger = React__default.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";
+export {
+  DictionaryTrigger as D
+};
+//# sourceMappingURL=DictionaryTrigger.js.map

package/lib/DictionaryTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DictionaryTrigger.js","sources":["../src/components/DictionaryTrigger/DictionaryTrigger.tsx"],"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"],"names":["React"],"mappings":";;;;;AA2BA,MAAM,oBAAoBA,eAAM;AAAA,EAC9B,CAAC,EAAE,UAAU,WAAW,OAAO,WAAW,QAAQ,GAAG,KAAA,GAAQ,QAAQ;AACnE,UAAM,iBAAiB,WAAW,OAAO,mBAAmB,SAAS;AAErE,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,eAAa;AAAA,QACb,oBAAkB,YAAY;AAAA,QAC9B,WAAW;AAAA,QACX,iBAAe;AAAA,QACf;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,kBAAkB,cAAc;"}

package/lib/Drawer.js

@@ -0,0 +1,249 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React__default, { useRef, useEffect } from "react";
+import classNames from "classnames";
+import { LanguageLocales, ZIndex, KeyboardEventKey, AnalyticsId } from "./constants.js";
+import { useFocusTrap } from "./hooks/useFocusTrap.js";
+import { useIsMobileBreakpoint } from "./hooks/useIsMobileBreakpoint.js";
+import { useIsVisible } from "./hooks/useIsVisible.js";
+import { useKeyboardEvent } from "./hooks/useKeyboardEvent.js";
+import { useOutsideEvent } from "./hooks/useOutsideEvent.js";
+import { useReturnFocusOnUnmount } from "./hooks/useReturnFocusOnUnmount.js";
+import { getAriaLabelAttributes } from "./utils/accessibility.js";
+import { useLanguage } from "./utils/language.js";
+import { disableBodyScroll, enableBodyScroll } from "./utils/scroll.js";
+import { u as uuid } from "./uuid.js";
+import { B as Button } from "./Button.js";
+import { C as Close } from "./Close.js";
+import { T as Title } from "./Title.js";
+import styles from "./components/Drawer/styles.module.scss";
+import { A as AnimatePresence, u as usePresence } from "./index2.js";
+import { u as useAnimate } from "./use-animate.js";
+const ariaLabelCloseBtn$1 = "Close";
+const enGB = {
+  ariaLabelCloseBtn: ariaLabelCloseBtn$1
+};
+const ariaLabelCloseBtn = "Lukk";
+const nbNO = {
+  ariaLabelCloseBtn
+};
+const getResources = (language) => {
+  switch (language) {
+    case LanguageLocales.ENGLISH:
+      return enGB;
+    case LanguageLocales.NORWEGIAN:
+    default:
+      return nbNO;
+  }
+};
+const Drawer = (props) => {
+  const { isOpen, ...rest } = props;
+  const isMobile = useIsMobileBreakpoint();
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(InnerDrawer, { ...rest, isMobile }) });
+};
+const InnerDrawer = (props) => {
+  const {
+    ariaLabel,
+    ariaLabelledBy,
+    ariaLabelCloseBtn: ariaLabelCloseBtn2,
+    children,
+    closeColor = "blueberry",
+    desktopDirection = "left",
+    footerContent,
+    headerClasses,
+    noCloseButton = false,
+    onPrimaryAction,
+    onRequestClose,
+    onSecondaryAction,
+    primaryActionText,
+    secondaryActionText,
+    title,
+    titleHtmlMarkup = "h3",
+    titleId = uuid(),
+    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__default.useState(0);
+  const [footerHeight, setFooterHeight] = React__default.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: ariaLabelCloseBtn2 || (resources == null ? void 0 : 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(containerRef, true);
+  useReturnFocusOnUnmount(containerRef);
+  useOutsideEvent(containerRef, () => {
+    if (onRequestClose) onRequestClose();
+  });
+  useKeyboardEvent(containerRef, () => onRequestClose && onRequestClose(), [KeyboardEventKey.Escape]);
+  useEffect(() => {
+    var _a;
+    (_a = containerRef.current) == null ? void 0 : _a.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: 0.3, ease: "easeInOut" });
+    } else {
+      animate(containerRef.current, { x: "0" }, { duration: 0.3, ease: "easeInOut" });
+    }
+    animate(overlayRef.current, { opacity: 1, pointerEvents: "auto" }, { duration: 0.3, ease: "easeInOut" });
+  }, [isPresent]);
+  const closeDrawer = () => {
+    if (!overlayRef.current || !containerRef.current) return;
+    animate(overlayRef.current, { opacity: 0, pointerEvents: "none" }, { duration: 0.3, ease: "easeInOut" });
+    if (isMobile) {
+      animate(
+        containerRef.current,
+        { y: "100%" },
+        {
+          duration: 0.3,
+          ease: "easeInOut",
+          onComplete: () => {
+            if (safeToRemove) safeToRemove();
+          }
+        }
+      );
+    } else {
+      animate(
+        containerRef.current,
+        { x: desktopDirection === "left" ? "-100%" : "100%" },
+        {
+          duration: 0.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, { id: ariaLabelAttributes == null ? void 0 : ariaLabelAttributes["aria-labelledby"], htmlMarkup: titleHtmlMarkup, appearance: "title3", children: title }),
+              !noCloseButton && onRequestClose != void 0 && /* @__PURE__ */ jsx(
+                Close,
+                {
+                  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, { onClick: () => handleCTA(onPrimaryAction), children: primaryActionText }),
+            onSecondaryAction && /* @__PURE__ */ jsx(Button, { variant: "borderless", onClick: () => handleCTA(onSecondaryAction), children: secondaryActionText })
+          ] }) })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  Drawer as D
+};
+//# sourceMappingURL=Drawer.js.map

package/lib/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sources":["../src/components/Drawer/resourceHelper.ts","../src/components/Drawer/Drawer.tsx"],"sourcesContent":["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"],"names":["ariaLabelCloseBtn","React"],"mappings":"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"}

package/lib/Duolist.js

@@ -0,0 +1,92 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React__default from "react";
+import classNames from "classnames";
+import { AnalyticsId } from "./constants.js";
+import { useBreakpoint, Breakpoint } from "./hooks/useBreakpoint.js";
+import { S as Spacer } from "./Spacer.js";
+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, {})
+    ] }),
+    /* @__PURE__ */ jsx(
+      "dl",
+      {
+        style: !nonFormatted ? { gridTemplateColumns: useCollapsedMode ? `1fr` : `auto ${duolistColumnStyle}` } : void 0,
+        className: duolistClasses,
+        children: React__default.Children.map(children, (child) => {
+          if (child === null || typeof child === "undefined") return;
+          const duolistGroup = child;
+          if (duolistGroup.type === DuolistGroup) {
+            return React__default.cloneElement(child, {
+              boldColumn: duolistGroup.props.boldColumn ?? boldColumn,
+              format: duolistGroup.props.format ?? format,
+              separator: duolistGroup.props.separator ?? separator
+            });
+          }
+        })
+      }
+    )
+  ] });
+};
+export {
+  Duolist as D,
+  DuolistGroup as a
+};
+//# sourceMappingURL=Duolist.js.map