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

package/lib/Input.js

@@ -0,0 +1,174 @@
+import { a as IconSize, i as FormSize, n as AnalyticsId, r as FormOnColor, t as AVERAGE_CHARACTER_WIDTH_PX } from "./constants2.js";
+import { t as getColor } from "./color.js";
+import { t as Icon_default } from "./Icon.js";
+import { n as mergeRefs } from "./refs.js";
+import { t as LazyIcon_default } from "./LazyIcon.js";
+import { n as useBreakpoint, t as Breakpoint } from "./useBreakpoint.js";
+import { t as useIdWithFallback } from "./useIdWithFallback.js";
+import { t as getAriaDescribedBy } from "./accessibility.js";
+import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
+import { r as renderLabel } from "./Label.js";
+import { t as MaxCharacters_default } from "./MaxCharacters.js";
+import React, { useEffect, useRef, useState } from "react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import styles from "./components/Input/styles.module.scss";
+let InputTypes = /* @__PURE__ */ function(InputTypes$1) {
+	InputTypes$1["text"] = "text";
+	InputTypes$1["number"] = "number";
+	InputTypes$1["email"] = "email";
+	InputTypes$1["password"] = "password";
+	InputTypes$1["search"] = "search";
+	InputTypes$1["tel"] = "tel";
+	InputTypes$1["url"] = "url";
+	InputTypes$1["date"] = "date";
+	InputTypes$1["time"] = "time";
+	return InputTypes$1;
+}({});
+var getInputMaxWidth = (characters, hasIcon, iconSize) => {
+	const paddingWidth = hasIcon ? "1.5rem" : "2rem";
+	const iconWidth = hasIcon ? `${iconSize}px` : "0px";
+	return `calc(${characters * 12}px + ${paddingWidth} + ${iconWidth} + 4px)`;
+};
+var Input = React.forwardRef((props, ref) => {
+	const { className, defaultValue, placeholder, type = InputTypes.text, name, transparent = false, icon, iconRight, inputWrapperRef, onColor = FormOnColor.onwhite, size, baseIncrementValue, label, error, errorText, errorTextId: errorTextIdProp, inputId: inputIdProp, errorWrapperClassName, testId, disabled, readOnly, autoComplete = "off", afterInputChildren, rightOfInput, width, required, onChange, onKeyDown, autoFocus, maxCharacters, maxText, inputContainerRef,...rest } = props;
+	const breakpoint = useBreakpoint();
+	const inputContainerRefLocal = useRef(null);
+	const inputId = useIdWithFallback(inputIdProp);
+	const [input, setInput] = useState(defaultValue || "");
+	const [prevValue, setPrevValue] = useState(void 0);
+	const numKeyPressed = useRef(false);
+	const errorTextId = useIdWithFallback(errorTextIdProp);
+	const numRegex = /^[0-9]$/;
+	useEffect(() => {
+		setInput(defaultValue || "");
+	}, [defaultValue]);
+	const onDark = onColor === FormOnColor.ondark;
+	const onBlueberry = onColor === FormOnColor.onblueberry;
+	const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;
+	const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;
+	const isLarge = size === FormSize.large;
+	const isTransparent = transparent && onColor !== FormOnColor.ondark && !onError;
+	const inputWrapperClass = classNames(styles["input-wrapper"], className);
+	const inputContainer = classNames(styles["input-container"], {
+		[styles["input-container--transparent"]]: isTransparent,
+		[styles["input-container--on-blueberry"]]: onBlueberry,
+		[styles["input-container--on-dark"]]: onDark,
+		[styles["input-container--invalid"]]: onError,
+		[styles["input-container--large"]]: isLarge,
+		[styles["input-container--disabled"]]: disabled,
+		[styles["input-container--with-icon"]]: icon,
+		[styles["input-container--with-icon--right"]]: icon && iconRight
+	});
+	const inputClass = classNames(styles["input-container__input"], {
+		[styles["input-container__input--large"]]: isLarge,
+		[styles["input-container__input--disabled"]]: disabled
+	});
+	const iconColor = disabled ? getColor("neutral", 700) : getColor("black");
+	const iconSize = breakpoint === Breakpoint.xs || !isLarge ? IconSize.XSmall : IconSize.Small;
+	const renderIcon = () => {
+		if (!icon) return;
+		if (typeof icon === "string") return /* @__PURE__ */ jsx(LazyIcon_default, {
+			className: styles["input-container__input__icon"],
+			color: iconColor,
+			size: iconSize,
+			iconName: icon
+		});
+		return /* @__PURE__ */ jsx(Icon_default, {
+			className: styles["input-container__input__icon"],
+			color: iconColor,
+			size: iconSize,
+			svgIcon: icon
+		});
+	};
+	const handleClick = (e) => {
+		if (inputContainerRefLocal && inputContainerRefLocal.current && icon) {
+			const selectedChild = iconRight ? 0 : 1;
+			inputContainerRefLocal.current.children[selectedChild].focus();
+			if (props.onClick) props.onClick(e);
+		}
+	};
+	const handleChange = (e) => {
+		const newValue = getIncrementValue(e);
+		if (onChange) onChange(e);
+		setInput(newValue);
+		setPrevValue(newValue);
+	};
+	const getIncrementValue = (e) => {
+		if (typeof baseIncrementValue === "undefined" || type !== "number") return e.target.value;
+		const valueAsNumber = Number(e.target.value);
+		if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 || valueAsNumber === -1)) e.target.value = baseIncrementValue + "";
+		return e.target.value;
+	};
+	const handleKeyDown = (e) => {
+		if (numRegex.test(e.key)) numKeyPressed.current = true;
+		if (onKeyDown) onKeyDown(e);
+	};
+	const handleKeyUp = (e) => {
+		if (numRegex.test(e.key)) numKeyPressed.current = false;
+	};
+	const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : void 0;
+	return /* @__PURE__ */ jsx(ErrorWrapper_default, {
+		className: errorWrapperClassName,
+		errorText,
+		errorTextId,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-testid": testId,
+			"data-analyticsid": AnalyticsId.Input,
+			className: inputWrapperClass,
+			ref: inputWrapperRef,
+			children: [
+				renderLabel(label, inputId, onColor),
+				/* @__PURE__ */ jsxs("div", {
+					className: styles["content-wrapper"],
+					children: [/* @__PURE__ */ jsxs("div", {
+						onClick: handleClick,
+						ref: mergeRefs([inputContainerRefLocal, inputContainerRef]),
+						className: inputContainer,
+						style: { maxWidth },
+						children: [
+							!iconRight && renderIcon(),
+							/* @__PURE__ */ jsx("input", {
+								...rest,
+								onChange: handleChange,
+								onKeyDown: handleKeyDown,
+								onKeyUp: handleKeyUp,
+								name,
+								type,
+								defaultValue,
+								id: inputId,
+								className: inputClass,
+								ref,
+								"aria-describedby": getAriaDescribedBy(props, errorTextId),
+								"aria-invalid": !!onError,
+								disabled,
+								placeholder,
+								readOnly,
+								autoComplete: autoComplete || "off",
+								required,
+								autoFocus
+							}),
+							iconRight && renderIcon()
+						]
+					}), /* @__PURE__ */ jsx("div", {
+						className: styles["content-wrapper__right-of-input"],
+						children: rightOfInput
+					})]
+				}),
+				maxCharacters && /* @__PURE__ */ jsx(MaxCharacters_default, {
+					maxCharacters,
+					length: input.toString().length,
+					maxText,
+					onColor,
+					maxWidth
+				}),
+				afterInputChildren
+			]
+		})
+	});
+});
+Input.displayName = "Input";
+var Input_default = Input;
+export { Input_default as n, InputTypes as t };
+
+//# sourceMappingURL=Input.js.map

package/lib/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","names":[],"sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport { FormOnColor, FormSize, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport { renderLabel } from '../Label';\nimport LazyIcon from '../LazyIcon';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      | 'disabled'\n      | 'readOnly'\n      | 'autoComplete'\n      | 'name'\n      | 'placeholder'\n      | 'defaultValue'\n      | 'required'\n      | 'value'\n      | 'min'\n      | 'max'\n      | 'aria-describedby'\n      | 'aria-labelledby'\n      | 'onBlur'\n      | 'onClick'\n      | 'onChange'\n      | 'onFocus'\n      | 'onKeyDown'\n      | 'autoFocus'\n      | 'inputMode'\n    > {\n  /** The number at which the input field starts when you increment or decrement it */\n  baseIncrementValue?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon | IconName;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Ref that is placed on the inputContainerRef */\n  inputContainerRef?: React.RefObject<HTMLDivElement>;\n  /** Ref that is placed on the inputWrapper */\n  inputWrapperRef?: React.RefObject<HTMLDivElement>;\n  /** Changes the color profile of the input */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the input */\n  size?: keyof typeof FormSize;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** Activates Error style for the input */\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  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** Component shown to the right of input */\n  rightOfInput?: React.ReactNode;\n  /** max character limit in input  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n}\n\nexport enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n  date = 'date',\n  time = 'time',\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    inputWrapperRef,\n    onColor = FormOnColor.onwhite,\n    size,\n    baseIncrementValue,\n    label,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    inputId: inputIdProp,\n    errorWrapperClassName,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete = 'off',\n    afterInputChildren,\n    rightOfInput,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    maxText,\n    inputContainerRef,\n    ...rest\n  } = props;\n  const breakpoint = useBreakpoint();\n  const inputContainerRefLocal = useRef<HTMLDivElement>(null);\n  const inputId = useIdWithFallback(inputIdProp);\n  const [input, setInput] = useState(defaultValue || '');\n  const [prevValue, setPrevValue] = useState<string | number | undefined>(undefined);\n  const numKeyPressed = useRef<boolean>(false);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const numRegex = /^[0-9]$/;\n\n  useEffect(() => {\n    setInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n  const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n  const isLarge = size === FormSize.large;\n  const isTransparent = transparent && onColor !== FormOnColor.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n  const inputContainer = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: isTransparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--large']]: isLarge,\n    [styles['input-container--disabled']]: disabled,\n    [styles['input-container--with-icon']]: icon,\n    [styles['input-container--with-icon--right']]: icon && iconRight,\n  });\n\n  const inputClass = cn(styles['input-container__input'], {\n    [styles['input-container__input--large']]: isLarge,\n    [styles['input-container__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 700) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !isLarge ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = (): React.ReactNode => {\n    if (!icon) {\n      return;\n    }\n\n    if (typeof icon === 'string') {\n      return <LazyIcon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} iconName={icon} />;\n    }\n\n    return <Icon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} svgIcon={icon} />;\n  };\n\n  // eslint-disable-next-line\n  const handleClick = (e: React.MouseEvent<any>): void => {\n    if (inputContainerRefLocal && inputContainerRefLocal.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = inputContainerRefLocal.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n\n      if (props.onClick) props.onClick(e);\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    const newValue = getIncrementValue(e);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    setInput(newValue);\n    setPrevValue(newValue);\n  };\n\n  // Hvis bruker endrer number value med 1 og det skal startes på en annen verdi enn 0\n  const getIncrementValue = (e: React.ChangeEvent<HTMLInputElement>): string => {\n    if (typeof baseIncrementValue === 'undefined' || type !== 'number') return e.target.value;\n\n    const valueAsNumber = Number(e.target.value);\n\n    if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 || valueAsNumber === -1)) {\n      e.target.value = baseIncrementValue + '';\n    }\n\n    return e.target.value;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = true;\n    }\n    if (onKeyDown) onKeyDown(e);\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = false;\n    }\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n        {renderLabel(label, inputId, onColor as FormOnColor)}\n        {/* input-elementet tillater keyboard-interaksjon */}\n        <div className={styles['content-wrapper']}>\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div\n            onClick={handleClick}\n            ref={mergeRefs([inputContainerRefLocal, inputContainerRef])}\n            className={inputContainer}\n            style={{ maxWidth }}\n          >\n            {!iconRight && renderIcon()}\n            <input\n              {...rest}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onKeyUp={handleKeyUp}\n              name={name}\n              type={type}\n              defaultValue={defaultValue}\n              id={inputId}\n              className={inputClass}\n              ref={ref}\n              aria-describedby={getAriaDescribedBy(props, errorTextId)}\n              aria-invalid={!!onError}\n              disabled={disabled}\n              placeholder={placeholder}\n              readOnly={readOnly}\n              autoComplete={autoComplete || 'off'}\n              required={required}\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n            />\n            {iconRight && renderIcon()}\n          </div>\n          <div className={styles['content-wrapper__right-of-input']}>{rightOfInput}</div>\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={input.toString().length}\n            maxText={maxText}\n            onColor={onColor}\n            maxWidth={maxWidth}\n          />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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"}

package/lib/Label.js

@@ -0,0 +1,138 @@
+import { n as AnalyticsId, r as FormOnColor } from "./constants2.js";
+import { t as isComponent } from "./component.js";
+import { t as Spacer_default } from "./Spacer.js";
+import { t as FormFieldTag_default } from "./FormFieldTag.js";
+import { t as StatusDot_default } from "./StatusDot.js";
+import React from "react";
+import classNames from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import styles from "./components/Label/styles.module.scss";
+const Sublabel = ({ children, className, id, onColor, sublabelTexts, testId }) => {
+	const mapSublabels = (hideFromScreenReader) => {
+		return sublabelTexts && sublabelTexts.map((sublabelText, index) => {
+			const labelClasses = classNames(styles.label, styles["sublabel"], {
+				[styles["sublabel--subdued"]]: sublabelText.type === "subdued",
+				[styles["sublabel--on-dark"]]: onColor === FormOnColor.ondark
+			});
+			return hideFromScreenReader === sublabelText.hideFromScreenReader && /* @__PURE__ */ jsx("span", {
+				className: labelClasses,
+				children: sublabelText.text
+			}, index);
+		});
+	};
+	const subLabels = mapSublabels();
+	const ariaHiddenSublabels = mapSublabels(true);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Spacer_default, { size: "3xs" }),
+		(subLabels || children) && /* @__PURE__ */ jsxs("div", {
+			className,
+			id,
+			"data-testid": testId,
+			"data-analyticsid": AnalyticsId.Sublabel,
+			children: [subLabels, children]
+		}),
+		ariaHiddenSublabels && /* @__PURE__ */ jsx("div", {
+			className,
+			"data-testid": testId,
+			children: ariaHiddenSublabels
+		})
+	] });
+};
+const getLabelText = (label) => {
+	let allLabelText = "";
+	if (isComponent(label, Label)) label.props.labelTexts?.forEach((labelText) => {
+		allLabelText += !labelText.hideFromScreenReader ? labelText.text : "";
+	});
+	return allLabelText;
+};
+const renderLabel = (label, inputId, onColor, markup) => {
+	return /* @__PURE__ */ jsx(Fragment, { children: label && isComponent(label, Label) ? React.cloneElement(label, {
+		htmlFor: inputId,
+		htmlMarkup: markup || "label",
+		onColor
+	}) : typeof label === "string" && /* @__PURE__ */ jsx(Label, {
+		labelTexts: [{
+			text: label,
+			type: "normal"
+		}],
+		htmlFor: inputId,
+		onColor
+	}) });
+};
+const renderLabelAsParent = (label, children, inputId, onColor, labelClassName, labelTextClassName, sublabelWrapperClassName, large, markup) => {
+	return /* @__PURE__ */ jsx(Fragment, { children: label && isComponent(label, Label) ? React.cloneElement(label, {
+		htmlFor: inputId,
+		onColor,
+		children,
+		labelClassName: classNames(labelClassName, label.props.labelClassName),
+		labelTextClassName,
+		htmlMarkup: markup || "label",
+		sublabelWrapperClassName,
+		sublabel: large ? void 0 : label.props.sublabel,
+		statusDot: large ? void 0 : label.props.statusDot
+	}) : typeof label === "string" && /* @__PURE__ */ jsx(Label, {
+		labelTexts: [{
+			text: label,
+			type: "subdued"
+		}],
+		htmlFor: inputId,
+		onColor,
+		htmlMarkup: markup || "label",
+		labelClassName,
+		labelTextClassName,
+		sublabelWrapperClassName,
+		children
+	}) });
+};
+var Label = ({ afterLabelChildren, children, className, formFieldTag, htmlFor, htmlMarkup = "label", labelClassName, labelTextClassName, labelId, labelTexts, onColor = FormOnColor.onwhite, statusDot, sublabel, sublabelWrapperClassName, testId }) => {
+	const hasChildren = children && typeof children !== "undefined";
+	const labelWrapperClasses = classNames(styles["label-wrapper"], {
+		[styles["label-wrapper--no-bottom-margin"]]: hasChildren,
+		[styles["label-wrapper--after-label-children"]]: afterLabelChildren
+	}, className);
+	const mapLabels = () => {
+		if (typeof labelTexts === "undefined") return null;
+		return labelTexts.map((labelText, index) => {
+			const labelClasses = classNames(styles.label, {
+				[styles["label--subdued"]]: labelText.type === "subdued",
+				[styles["label--on-dark"]]: onColor === FormOnColor.ondark
+			}, labelTextClassName);
+			return /* @__PURE__ */ jsx("span", {
+				"aria-hidden": labelText.hideFromScreenReader,
+				className: labelClasses,
+				children: labelText.text
+			}, index);
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: labelWrapperClasses,
+		children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(htmlMarkup, {
+			className: labelClassName,
+			id: labelId,
+			htmlFor,
+			"data-testid": testId,
+			"data-analyticsid": AnalyticsId.Label,
+			children: /* @__PURE__ */ jsxs("span", {
+				className: styles["label-content-wrapper"],
+				children: [children, /* @__PURE__ */ jsx("span", {
+					className: styles.label__texts,
+					children: mapLabels()
+				})]
+			})
+		}), (sublabel || statusDot || formFieldTag) && /* @__PURE__ */ jsxs("div", {
+			className: sublabelWrapperClassName,
+			children: [
+				formFieldTag && isComponent(formFieldTag, FormFieldTag_default) && React.cloneElement(formFieldTag),
+				sublabel && isComponent(sublabel, Sublabel) && React.cloneElement(sublabel, { onColor }),
+				statusDot && isComponent(statusDot, StatusDot_default) && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Spacer_default, { size: "3xs" }), React.cloneElement(statusDot, { onColor: onColor === FormOnColor.ondark ? "ondark" : "onwhite" })] })
+			]
+		})] }), afterLabelChildren && /* @__PURE__ */ jsx("div", {
+			className: styles["after-label-children"],
+			children: afterLabelChildren
+		})]
+	});
+};
+var Label_default$1 = Label;
+export { Sublabel as a, renderLabelAsParent as i, getLabelText as n, renderLabel as r, Label_default$1 as t };
+
+//# sourceMappingURL=Label.js.map

package/lib/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","names":["Sublabel: React.FC<SublabelProps>","Label: FunctionComponent<LabelProps>"],"sources":["../src/components/Label/SubLabel.tsx","../src/components/Label/Label.tsx","../src/components/Label/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { LabelText } from './Label';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport Spacer from '../Spacer';\n\nimport styles from './styles.module.scss';\n\nexport interface SublabelProps {\n  /** Sets the content of the Sublabel */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** id that is placed on the wrapper */\n  id: string;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: FormOnColor;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  sublabelTexts?: LabelText[];\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Sublabel: React.FC<SublabelProps> = ({ children, className, id, onColor, sublabelTexts, testId }) => {\n  const mapSublabels = (hideFromScreenReader?: boolean): React.ReactNode => {\n    return (\n      sublabelTexts &&\n      sublabelTexts.map((sublabelText, index) => {\n        const labelClasses = cn(styles.label, styles['sublabel'], {\n          [styles['sublabel--subdued']]: sublabelText.type === 'subdued',\n          [styles['sublabel--on-dark']]: onColor === FormOnColor.ondark,\n        });\n        return (\n          hideFromScreenReader === sublabelText.hideFromScreenReader && (\n            <span className={labelClasses} key={index}>\n              {sublabelText.text}\n            </span>\n          )\n        );\n      })\n    );\n  };\n\n  const subLabels = mapSublabels();\n  const ariaHiddenSublabels = mapSublabels(true);\n\n  return (\n    <>\n      <Spacer size={'3xs'} />\n      {(subLabels || children) && (\n        <div className={className} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Sublabel}>\n          {subLabels}\n          {children}\n        </div>\n      )}\n      {ariaHiddenSublabels && (\n        <div className={className} data-testid={testId}>\n          {ariaHiddenSublabels}\n        </div>\n      )}\n    </>\n  );\n};\n","import React, { FunctionComponent } from 'react';\n\nimport cn from 'classnames';\n\nimport { Sublabel, SublabelProps } from './SubLabel';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport FormFieldTag, { FormFieldTagProps } from '../FormFieldTag';\nimport Spacer from '../Spacer';\nimport StatusDot, { StatusDotProps } from '../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type LabelText = {\n  hideFromScreenReader?: boolean;\n  text: string;\n  type?: 'normal' | 'subdued';\n};\n\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'label' | 'p';\n\nexport interface LabelProps {\n  /** Component shown after label - discourage use of this */\n  afterLabelChildren?: React.ReactNode;\n  /** Sets the content of the Label */\n  children?: React.ReactNode;\n  /** Sets a tag that describes whether the form field is required or optional */\n  formFieldTag?: React.ReactNode;\n  /** Adds custom classes to the label tag. */\n  labelClassName?: string;\n  /** Adds custom classes to the label text. */\n  labelTextClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Id that is put on the \"for\" attribute of the label */\n  htmlFor?: string;\n  /** Changes the underlying element of the label */\n  htmlMarkup?: LabelTags;\n  /** Id som plasseres på <label/> */\n  labelId?: string;\n  /** Array of main label strings. Can be of type semibold or normal */\n  labelTexts?: LabelText[];\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: keyof typeof FormOnColor;\n  /** StatusDot placed underneath the last sublabel */\n  statusDot?: React.ReactNode;\n  /** Sublabel component */\n  sublabel?: React.ReactNode;\n  /** Adds custom classes to the div wrapping the sublabels. */\n  sublabelWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getLabelText = (label: React.ReactNode): string => {\n  let allLabelText = '';\n\n  if (isComponent<LabelProps>(label, Label)) {\n    label.props.labelTexts?.forEach(labelText => {\n      allLabelText += !labelText.hideFromScreenReader ? labelText.text : '';\n    });\n  }\n\n  return allLabelText;\n};\n\nexport const renderLabel = (label: React.ReactNode, inputId: string, onColor: FormOnColor, markup?: LabelTags): React.ReactNode => {\n  return (\n    <>\n      {label && isComponent<LabelProps>(label, Label)\n        ? React.cloneElement(label, {\n            htmlFor: inputId,\n            htmlMarkup: markup || 'label',\n            onColor,\n          })\n        : typeof label === 'string' && <Label labelTexts={[{ text: label, type: 'normal' }]} htmlFor={inputId} onColor={onColor} />}\n    </>\n  );\n};\n\nexport const renderLabelAsParent = (\n  label: React.ReactNode,\n  children: React.ReactNode,\n  inputId: string,\n  onColor: FormOnColor,\n  labelClassName?: string,\n  labelTextClassName?: string,\n  sublabelWrapperClassName?: string,\n  large?: boolean,\n  markup?: LabelTags\n): React.ReactNode => {\n  return (\n    <>\n      {label && isComponent<LabelProps>(label, Label)\n        ? React.cloneElement(label, {\n            htmlFor: inputId,\n            onColor,\n            children: children,\n            labelClassName: cn(labelClassName, label.props.labelClassName),\n            labelTextClassName: labelTextClassName,\n            htmlMarkup: markup || 'label',\n            sublabelWrapperClassName: sublabelWrapperClassName,\n            sublabel: large ? undefined : label.props.sublabel,\n            statusDot: large ? undefined : label.props.statusDot,\n          })\n        : typeof label === 'string' && (\n            <Label\n              labelTexts={[{ text: label, type: 'subdued' }]}\n              htmlFor={inputId}\n              onColor={onColor}\n              htmlMarkup={markup || 'label'}\n              labelClassName={labelClassName}\n              labelTextClassName={labelTextClassName}\n              sublabelWrapperClassName={sublabelWrapperClassName}\n            >\n              {children}\n            </Label>\n          )}\n    </>\n  );\n};\n\nconst Label: FunctionComponent<LabelProps> = ({\n  afterLabelChildren,\n  children,\n  className,\n  formFieldTag,\n  htmlFor,\n  htmlMarkup = 'label',\n  labelClassName,\n  labelTextClassName,\n  labelId,\n  labelTexts,\n  onColor = FormOnColor.onwhite,\n  statusDot,\n  sublabel,\n  sublabelWrapperClassName,\n  testId,\n}) => {\n  const hasChildren = children && typeof children !== 'undefined';\n  const labelWrapperClasses = cn(\n    styles['label-wrapper'],\n    { [styles['label-wrapper--no-bottom-margin']]: hasChildren, [styles['label-wrapper--after-label-children']]: afterLabelChildren },\n    className\n  );\n\n  const mapLabels = (): React.ReactNode => {\n    if (typeof labelTexts === 'undefined') return null;\n\n    return labelTexts.map((labelText, index) => {\n      const labelClasses = cn(\n        styles.label,\n        {\n          [styles['label--subdued']]: labelText.type === 'subdued',\n          [styles['label--on-dark']]: onColor === FormOnColor.ondark,\n        },\n        labelTextClassName\n      );\n      return (\n        <span aria-hidden={labelText.hideFromScreenReader} className={labelClasses} key={index}>\n          {labelText.text}\n        </span>\n      );\n    });\n  };\n  const CustomTag = htmlMarkup;\n\n  return (\n    <div className={labelWrapperClasses}>\n      <div>\n        <CustomTag className={labelClassName} id={labelId} htmlFor={htmlFor} data-testid={testId} data-analyticsid={AnalyticsId.Label}>\n          <span className={styles['label-content-wrapper']}>\n            {children}\n            <span className={styles.label__texts}>{mapLabels()}</span>\n          </span>\n        </CustomTag>\n        {(sublabel || statusDot || formFieldTag) && (\n          <div className={sublabelWrapperClassName}>\n            {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n            {sublabel &&\n              isComponent<SublabelProps>(sublabel, Sublabel) &&\n              React.cloneElement(sublabel, {\n                onColor: onColor as FormOnColor,\n              })}\n            {statusDot && isComponent<StatusDotProps>(statusDot, StatusDot) && (\n              <>\n                <Spacer size={'3xs'} />\n                {React.cloneElement(statusDot, {\n                  onColor: onColor === FormOnColor.ondark ? 'ondark' : 'onwhite',\n                })}\n              </>\n            )}\n          </div>\n        )}\n      </div>\n      {afterLabelChildren && <div className={styles['after-label-children']}>{afterLabelChildren}</div>}\n    </div>\n  );\n};\n\nexport default Label;\n","import Label from './Label';\nexport { Sublabel } from './SubLabel';\nexport * from './Label';\nexport default Label;\n"],"mappings":";;;;;;;;;AAyBA,MAAaA,YAAqC,EAAE,UAAU,WAAW,IAAI,SAAS,eAAe,aAAa;CAChH,MAAM,gBAAgB,yBAAoD;AACxE,SACE,iBACA,cAAc,KAAK,cAAc,UAAU;GACzC,MAAM,eAAe,WAAG,OAAO,OAAO,OAAO,aAAa;KACvD,OAAO,uBAAuB,aAAa,SAAS;KACpD,OAAO,uBAAuB,YAAY,YAAY;IACxD,CAAC;AACF,UACE,yBAAyB,aAAa,wBACpC,oBAAC,QAAA;IAAK,WAAW;cACd,aAAa;MADoB,MAE7B;IAGX;;CAIN,MAAM,YAAY,cAAc;CAChC,MAAM,sBAAsB,aAAa,KAAK;AAE9C,QACE,qBAAA,UAAA,EAAA,UAAA;EACE,oBAAC,gBAAA,EAAO,MAAM,OAAA,CAAS;GACrB,aAAa,aACb,qBAAC,OAAA;GAAe;GAAe;GAAI,eAAa;GAAQ,oBAAkB,YAAY;cACnF,WACA,SAAA;IACG;EAEP,uBACC,oBAAC,OAAA;GAAe;GAAW,eAAa;aACrC;IACG;KAEP;;ACRP,MAAa,gBAAgB,UAAmC;CAC9D,IAAI,eAAe;AAEnB,KAAI,YAAwB,OAAO,MAAM,CACvC,OAAM,MAAM,YAAY,SAAQ,cAAa;AAC3C,kBAAgB,CAAC,UAAU,uBAAuB,UAAU,OAAO;GACnE;AAGJ,QAAO;;AAGT,MAAa,eAAe,OAAwB,SAAiB,SAAsB,WAAwC;AACjI,QACE,oBAAA,UAAA,EAAA,UACG,SAAS,YAAwB,OAAO,MAAM,GAC3C,MAAM,aAAa,OAAO;EACxB,SAAS;EACT,YAAY,UAAU;EACtB;EACD,CAAC,GACF,OAAO,UAAU,YAAY,oBAAC,OAAA;EAAM,YAAY,CAAC;GAAE,MAAM;GAAO,MAAM;GAAU,CAAC;EAAE,SAAS;EAAkB;GAAW,EAAA,CAC5H;;AAIP,MAAa,uBACX,OACA,UACA,SACA,SACA,gBACA,oBACA,0BACA,OACA,WACoB;AACpB,QACE,oBAAA,UAAA,EAAA,UACG,SAAS,YAAwB,OAAO,MAAM,GAC3C,MAAM,aAAa,OAAO;EACxB,SAAS;EACT;EACU;EACV,gBAAgB,WAAG,gBAAgB,MAAM,MAAM,eAAe;EAC1C;EACpB,YAAY,UAAU;EACI;EAC1B,UAAU,QAAQ,KAAA,IAAY,MAAM,MAAM;EAC1C,WAAW,QAAQ,KAAA,IAAY,MAAM,MAAM;EAC5C,CAAC,GACF,OAAO,UAAU,YACf,oBAAC,OAAA;EACC,YAAY,CAAC;GAAE,MAAM;GAAO,MAAM;GAAW,CAAC;EAC9C,SAAS;EACA;EACT,YAAY,UAAU;EACN;EACI;EACM;EAEzB;GACK,EAAA,CAEb;;AAIP,IAAMC,SAAwC,EAC5C,oBACA,UACA,WACA,cACA,SACA,aAAa,SACb,gBACA,oBACA,SACA,YACA,UAAU,YAAY,SACtB,WACA,UACA,0BACA,aACI;CACJ,MAAM,cAAc,YAAY,OAAO,aAAa;CACpD,MAAM,sBAAsB,WAC1B,OAAO,kBACP;GAAG,OAAO,qCAAqC;GAAc,OAAO,yCAAyC;EAAoB,EACjI,UACD;CAED,MAAM,kBAAmC;AACvC,MAAI,OAAO,eAAe,YAAa,QAAO;AAE9C,SAAO,WAAW,KAAK,WAAW,UAAU;GAC1C,MAAM,eAAe,WACnB,OAAO,OACP;KACG,OAAO,oBAAoB,UAAU,SAAS;KAC9C,OAAO,oBAAoB,YAAY,YAAY;IACrD,EACD,mBACD;AACD,UACE,oBAAC,QAAA;IAAK,eAAa,UAAU;IAAsB,WAAW;cAC3D,UAAU;MADoE,MAE1E;IAET;;AAIJ,QACE,qBAAC,OAAA;EAAI,WAAW;aACd,qBAAC,OAAA,EAAA,UAAA,CACC,oBALY,YAKX;GAAU,WAAW;GAAgB,IAAI;GAAkB;GAAS,eAAa;GAAQ,oBAAkB,YAAY;aACtH,qBAAC,QAAA;IAAK,WAAW,OAAO;eACrB,UACD,oBAAC,QAAA;KAAK,WAAW,OAAO;eAAe,WAAW;MAAQ,CAAA;KACrD;IACG,GACV,YAAY,aAAa,iBACzB,qBAAC,OAAA;GAAI,WAAW;;IACb,gBAAgB,YAA+B,cAAc,qBAAa,IAAI,MAAM,aAAa,aAAa;IAC9G,YACC,YAA2B,UAAU,SAAS,IAC9C,MAAM,aAAa,UAAU,EAClB,SACV,CAAC;IACH,aAAa,YAA4B,WAAW,kBAAU,IAC7D,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,gBAAA,EAAO,MAAM,OAAA,CAAS,EACtB,MAAM,aAAa,WAAW,EAC7B,SAAS,YAAY,YAAY,SAAS,WAAW,WACtD,CAAC,CAAA,EAAA,CACD;;IAED,CAAA,EAAA,CAEJ,EACL,sBAAsB,oBAAC,OAAA;GAAI,WAAW,OAAO;aAA0B;IAAyB,CAAA;GAC7F;;ACjMV,IAAA,kBDqMe"}

package/lib/LinkList.js

@@ -0,0 +1,128 @@
+import { n as AnalyticsId } from "./constants2.js";
+import { t as usePseudoClasses } from "./usePseudoClasses.js";
+import { i as renderElementHeader } from "./ElementHeader.js";
+import { i as listEditModeWrapperClassnames, t as ListEditMode_default } from "./ListEditMode.js";
+import { t as ChevronRight_default } from "./ChevronRight.js";
+import React from "react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import LinkListStyles from "./components/LinkList/styles.module.scss";
+const Link = React.forwardRef((props, ref) => {
+	const { children, className = "", color = "white", icon, image, size = "medium", chevron = false, linkRef, status = "none", testId, target, variant, htmlMarkup = "a", highlightText, editMode = false,...restProps } = props;
+	const { refObject, isHovered } = usePseudoClasses(linkRef);
+	const isFill = variant === "fill";
+	const isFillNegative = variant === "fill-negative";
+	const isOutline = variant === "outline";
+	const isLine = variant === "line";
+	const liClasses = classNames(LinkListStyles["link-list"], {
+		[LinkListStyles["link-list__list-item--line"]]: isLine,
+		[LinkListStyles["link-list__list-item--outline"]]: isOutline,
+		[LinkListStyles[`link-list__list-item--outline--${color}`]]: isOutline
+	});
+	const linkClasses = classNames(LinkListStyles["link-list__anchor"], LinkListStyles[`link-list__anchor--${color}`], {
+		[LinkListStyles[`link-list__anchor--line--${color}`]]: isLine,
+		[LinkListStyles["link-list__anchor--fill"]]: isFill,
+		[LinkListStyles[`link-list__anchor--fill--${color}`]]: isFill,
+		[LinkListStyles["link-list__anchor--outline"]]: isOutline,
+		[LinkListStyles[`link-list__anchor--outline--${color}`]]: isOutline,
+		[LinkListStyles["link-list__anchor--fill-negative"]]: isFillNegative,
+		[LinkListStyles[`link-list__anchor--fill-negative--${color}`]]: isFillNegative,
+		[LinkListStyles[`link-list__anchor--${size}`]]: size,
+		[LinkListStyles["link-list__anchor--button"]]: htmlMarkup === "button",
+		[LinkListStyles["link-list__anchor--new"]]: status === "new"
+	}, className);
+	const statusMarkerClasses = classNames(LinkListStyles["link-list__status-marker"], { [LinkListStyles["link-list__status-marker--new"]]: status === "new" });
+	const imageContainer = /* @__PURE__ */ jsx("span", {
+		className: LinkListStyles["link-list__image-container"],
+		children: image
+	});
+	return /* @__PURE__ */ jsx("li", {
+		className: liClasses,
+		ref,
+		"data-testid": testId,
+		"data-analyticsid": AnalyticsId.Link,
+		children: editMode ? /* @__PURE__ */ jsxs("div", {
+			className: linkClasses,
+			children: [/* @__PURE__ */ jsx("div", { className: statusMarkerClasses }), renderElementHeader(children, {
+				titleHtmlMarkup: "span",
+				size,
+				parentType: "linklist",
+				chevronIcon: chevron ? ChevronRight_default : void 0,
+				icon: icon ?? imageContainer,
+				highlightText
+			})]
+		}) : htmlMarkup === "a" ? /* @__PURE__ */ jsxs("a", {
+			className: linkClasses,
+			ref: refObject,
+			rel: target === "_blank" ? "noopener noreferrer" : void 0,
+			target,
+			...restProps,
+			children: [/* @__PURE__ */ jsx("div", { className: statusMarkerClasses }), renderElementHeader(children, {
+				titleHtmlMarkup: "span",
+				isHovered,
+				size,
+				parentType: "linklist",
+				chevronIcon: chevron ? ChevronRight_default : void 0,
+				icon: icon ?? imageContainer,
+				highlightText
+			})]
+		}) : htmlMarkup === "button" && /* @__PURE__ */ jsxs("button", {
+			className: linkClasses,
+			ref: refObject,
+			type: "button",
+			...restProps,
+			children: [/* @__PURE__ */ jsx("div", { className: statusMarkerClasses }), renderElementHeader(children, {
+				titleHtmlMarkup: "span",
+				isHovered,
+				size,
+				parentType: "linklist",
+				chevronIcon: chevron ? ChevronRight_default : void 0,
+				icon: icon ?? imageContainer,
+				highlightText
+			})]
+		})
+	});
+});
+const LinkList = React.forwardRef(function LinkListForwardedRef(props, ref) {
+	const { children, className = "", chevron = false, size = "medium", color = "white", testId, variant = "line", highlightText, editMode = false } = props;
+	return /* @__PURE__ */ jsx("ul", {
+		ref,
+		className: classNames(LinkListStyles["link-list"], className, {
+			[LinkListStyles[`link-list--outline--${color}`]]: variant === "outline",
+			[listEditModeWrapperClassnames]: editMode
+		}),
+		"data-testid": testId,
+		"data-analyticsid": AnalyticsId.LinkList,
+		children: React.Children.map(children, (child) => {
+			if (React.isValidElement(child) && child.type === Link) if (editMode) return /* @__PURE__ */ jsx(ListEditMode_default, {
+				color,
+				variant,
+				onDelete: child.props.onDelete,
+				children: React.cloneElement(child, {
+					color,
+					size,
+					chevron: false,
+					variant,
+					highlightText,
+					editMode: true
+				})
+			});
+			else return React.cloneElement(child, {
+				color,
+				size,
+				chevron,
+				variant,
+				highlightText,
+				editMode: false
+			});
+			return null;
+		})
+	});
+});
+LinkList.displayName = "LinkList";
+LinkList.Link = Link;
+Link.displayName = "LinkList.Link";
+var LinkList_default$1 = LinkList;
+export { Link as n, LinkList as r, LinkList_default$1 as t };
+
+//# sourceMappingURL=LinkList.js.map

package/lib/LinkList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkList.js","names":["Link: LinkType"],"sources":["../src/components/LinkList/LinkList.tsx","../src/components/LinkList/index.ts"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { PaletteNames } from '../../theme/palette';\nimport { ElementHeaderType, renderElementHeader } from '../ElementHeader/ElementHeader';\nimport ChevronRight from '../Icons/ChevronRight';\nimport ListEditModeItem, { ListEditModeItemProps, listEditModeWrapperClassnames } from '../ListEditMode';\n\nimport LinkListStyles from './styles.module.scss';\n\nexport type LinkListSize = 'small' | 'medium' | 'large';\n\nexport type LinkListStatus = 'none' | 'new';\n\nexport type LinkAnchorTargets = '_self' | '_blank' | '_parent';\n\nexport type LinkListColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral'>;\nexport type LinkListVariant = 'line' | 'outline' | 'fill' | 'fill-negative';\n\nexport interface LinkType extends React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLLIElement>> {\n  ElementHeader?: ElementHeaderType;\n}\n\nexport type LinkTags = 'button' | 'a';\nexport interface CompoundComponent extends React.ForwardRefExoticComponent<LinkListProps & React.RefAttributes<HTMLUListElement>> {\n  Link: LinkType;\n}\n\nexport interface LinkListProps {\n  /** Items in the LinkList */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  Changes the colors of the list. */\n  color?: LinkListColors;\n  /** Toggles chevron icon on or off. */\n  chevron?: boolean;\n  /** Changes size of the LinkList. */\n  size?: LinkListSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets visual priority */\n  variant?: LinkListVariant;\n  /** Highlights text. Used for search results */\n  highlightText?: string;\n  /**\n   * @experimental This prop is experimental and may change in the future.\n   * Enables ListEditMode\n   */\n  editMode?: boolean;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\nexport type LinkProps = Modify<\n  React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,\n  {\n    children: React.ReactNode;\n    chevron?: boolean;\n    className?: string;\n    icon?: React.ReactElement;\n    /** Renders the image in the LinkList header */\n    image?: React.ReactElement;\n    /** Displays a status on the left side: default none */\n    status?: LinkListStatus;\n    href?: string;\n    target?: LinkAnchorTargets;\n    /** HTML markup for link. Default: a */\n    htmlMarkup?: LinkTags;\n    /**\n     * Ref for lenke/knapp\n     */\n    linkRef?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>;\n    /** Sets the data-testid attribute. */\n    testId?: string;\n    /** Highlights text. Override if different from list */\n    highlightText?: string;\n  }\n> &\n  Pick<LinkListProps, 'color' | 'size' | 'variant'> &\n  ListEditModeItemProps;\n\nexport const Link: LinkType = React.forwardRef((props: LinkProps, ref: React.Ref<HTMLLIElement>) => {\n  const {\n    children,\n    className = '',\n    color = 'white',\n    icon,\n    image,\n    size = 'medium',\n    chevron = false,\n    linkRef,\n    status = 'none',\n    testId,\n    target,\n    variant,\n    htmlMarkup = 'a',\n    highlightText,\n    editMode = false,\n    ...restProps\n  } = props;\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement | HTMLAnchorElement>(linkRef);\n\n  const isFill = variant === 'fill';\n  const isFillNegative = variant === 'fill-negative';\n  const isOutline = variant === 'outline';\n  const isLine = variant === 'line';\n\n  const liClasses = cn(LinkListStyles['link-list'], {\n    [LinkListStyles['link-list__list-item--line']]: isLine,\n    [LinkListStyles['link-list__list-item--outline']]: isOutline,\n    [LinkListStyles[`link-list__list-item--outline--${color}`]]: isOutline,\n  });\n  const linkClasses = cn(\n    LinkListStyles['link-list__anchor'],\n    LinkListStyles[`link-list__anchor--${color}`],\n    {\n      [LinkListStyles[`link-list__anchor--line--${color}`]]: isLine,\n      [LinkListStyles['link-list__anchor--fill']]: isFill,\n      [LinkListStyles[`link-list__anchor--fill--${color}`]]: isFill,\n      [LinkListStyles['link-list__anchor--outline']]: isOutline,\n      [LinkListStyles[`link-list__anchor--outline--${color}`]]: isOutline,\n      [LinkListStyles['link-list__anchor--fill-negative']]: isFillNegative,\n      [LinkListStyles[`link-list__anchor--fill-negative--${color}`]]: isFillNegative,\n      [LinkListStyles[`link-list__anchor--${size}`]]: size,\n      [LinkListStyles['link-list__anchor--button']]: htmlMarkup === 'button',\n      [LinkListStyles['link-list__anchor--new']]: status === 'new',\n    },\n    className\n  );\n\n  const statusMarkerClasses = cn(LinkListStyles['link-list__status-marker'], {\n    [LinkListStyles['link-list__status-marker--new']]: status === 'new',\n  });\n\n  const imageContainer = <span className={LinkListStyles['link-list__image-container']}>{image}</span>;\n\n  return (\n    <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      {editMode ? (\n        <div className={linkClasses}>\n          <div className={statusMarkerClasses}></div>\n          {renderElementHeader(children, {\n            titleHtmlMarkup: 'span',\n            size,\n            parentType: 'linklist',\n            chevronIcon: chevron ? ChevronRight : undefined,\n            icon: icon ?? imageContainer,\n            highlightText,\n          })}\n        </div>\n      ) : htmlMarkup === 'a' ? (\n        <a\n          className={linkClasses}\n          ref={refObject as React.RefObject<HTMLAnchorElement>}\n          rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n          target={target}\n          {...restProps}\n        >\n          <div className={statusMarkerClasses}></div>\n          {renderElementHeader(children, {\n            titleHtmlMarkup: 'span',\n            isHovered,\n            size,\n            parentType: 'linklist',\n            chevronIcon: chevron ? ChevronRight : undefined,\n            icon: icon ?? imageContainer,\n            highlightText,\n          })}\n        </a>\n      ) : (\n        htmlMarkup === 'button' && (\n          <button className={linkClasses} ref={refObject as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n            <div className={statusMarkerClasses}></div>\n            {renderElementHeader(children, {\n              titleHtmlMarkup: 'span',\n              isHovered,\n              size,\n              parentType: 'linklist',\n              chevronIcon: chevron ? ChevronRight : undefined,\n              icon: icon ?? imageContainer,\n              highlightText,\n            })}\n          </button>\n        )\n      )}\n    </li>\n  );\n});\n\nexport const LinkList = React.forwardRef(function LinkListForwardedRef(props: LinkListProps, ref: React.Ref<HTMLUListElement>) {\n  const {\n    children,\n    className = '',\n    chevron = false,\n    size = 'medium',\n    color = 'white',\n    testId,\n    variant = 'line',\n    highlightText,\n    editMode = false,\n  } = props;\n\n  const listClassNames = cn(LinkListStyles['link-list'], className, {\n    [LinkListStyles[`link-list--outline--${color}`]]: variant === 'outline',\n    [listEditModeWrapperClassnames]: editMode,\n  });\n\n  return (\n    <ul ref={ref} className={listClassNames} data-testid={testId} data-analyticsid={AnalyticsId.LinkList}>\n      {React.Children.map(children, (child: React.ReactNode) => {\n        if (React.isValidElement<LinkProps>(child) && child.type === Link) {\n          if (editMode) {\n            return (\n              <ListEditModeItem color={color} variant={variant} onDelete={child.props.onDelete}>\n                {React.cloneElement(child, {\n                  color,\n                  size,\n                  chevron: false,\n                  variant,\n                  highlightText: highlightText,\n                  editMode: true,\n                })}\n              </ListEditModeItem>\n            );\n          } else {\n            return React.cloneElement(child, {\n              color,\n              size,\n              chevron,\n              variant,\n              highlightText: highlightText,\n              editMode: false,\n            });\n          }\n        }\n        return null;\n      })}\n    </ul>\n  );\n}) as CompoundComponent;\n\nLinkList.displayName = 'LinkList';\nLinkList.Link = Link;\nLink.displayName = 'LinkList.Link';\n\nexport default LinkList;\n","import LinkList from './LinkList';\nexport * from './LinkList';\nexport default LinkList;\n"],"mappings":"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"}

package/lib/List.js

@@ -0,0 +1,22 @@
+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/List/styles.module.scss";
+var Item = ({ children }) => /* @__PURE__ */ jsx("li", {
+	className: styles.list__item,
+	children
+});
+var List = ({ children, className, testId, variant = "bullet", margin }) => {
+	return /* @__PURE__ */ jsx(["numbered", "alphabetical"].includes(variant) ? "ol" : "ul", {
+		className: classNames(styles.list, styles[`list--${variant}`], margin && styles["list--margin"], className),
+		"data-testid": testId,
+		"data-analyticsid": AnalyticsId.List,
+		children
+	});
+};
+List.Item = Item;
+var List_default$1 = List;
+export { List_default$1 as t };
+
+//# sourceMappingURL=List.js.map

package/lib/List.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","names":["Item: ItemType","List: ListCompound"],"sources":["../src/components/List/List.tsx","../src/components/List/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 type ListVariant = 'bullet' | 'dashed' | 'numbered' | 'alphabetical';\n\nexport interface ItemProps {\n  children: React.ReactNode;\n}\n\ntype ItemType = React.FC<ItemProps>;\n\nconst Item: ItemType = ({ children }: ItemProps) => <li className={styles.list__item}>{children}</li>;\n\nexport interface ListProps {\n  /** List contents */\n  children: React.ReactNode;\n  /** Changes the visual representation of the list. */\n  variant?: ListVariant;\n  /** Adds margin above/below list */\n  margin?: boolean;\n  /** Adds className to list element */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport interface ListCompound extends React.FC<ListProps> {\n  Item: ItemType;\n}\n\nconst List: ListCompound = ({ children, className, testId, variant = 'bullet', margin }: ListProps) => {\n  const CustomTag = ['numbered', 'alphabetical'].includes(variant) ? 'ol' : 'ul';\n\n  const listClasses = classNames(styles.list, styles[`list--${variant}`], margin && styles['list--margin'], className);\n\n  return (\n    <CustomTag className={listClasses} data-testid={testId} data-analyticsid={AnalyticsId.List}>\n      {children}\n    </CustomTag>\n  );\n};\n\nList.Item = Item;\n\nexport default List;\n","import List from './List';\nexport * from './List';\nexport default List;\n"],"mappings":";;;;;AAgBA,IAAMA,QAAkB,EAAE,eAA0B,oBAAC,MAAA;CAAG,WAAW,OAAO;CAAa;EAAc;AAmBrG,IAAMC,QAAsB,EAAE,UAAU,WAAW,QAAQ,UAAU,UAAU,aAAwB;AAKrG,QACE,oBALgB,CAAC,YAAY,eAAe,CAAC,SAAS,QAAQ,GAAG,OAAO,MAKvE;EAAU,WAHO,WAAW,OAAO,MAAM,OAAO,SAAS,YAAY,UAAU,OAAO,iBAAiB,UAAU;EAG/E,eAAa;EAAQ,oBAAkB,YAAY;EACnF;GACS;;AAIhB,KAAK,OAAO;AC7CZ,IAAA,iBD+Ce"}

package/lib/ListEditMode.js

@@ -0,0 +1,43 @@
+import { a as IconSize } from "./constants2.js";
+import { t as usePseudoClasses } from "./usePseudoClasses.js";
+import { t as Icon_default } from "./Icon.js";
+import { t as X_default } from "./X.js";
+import React from "react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import styles from "./components/ListEditMode/styles.module.scss";
+const listEditModeWrapperClassnames = classNames([styles[`list-edit-mode`]]);
+const IconButton = ({ icon, color, onClick }) => {
+	const { refObject, isHovered } = usePseudoClasses();
+	return /* @__PURE__ */ jsx("button", {
+		ref: refObject,
+		onClick,
+		type: "button",
+		className: classNames(styles["list-edit-mode__icon-button"]),
+		children: /* @__PURE__ */ jsx(Icon_default, {
+			isHovered,
+			svgIcon: icon,
+			size: IconSize.Small,
+			color: color === "blue" ? "var(--color-action-graphics-onlight)" : "var(--color-destructive-graphics-normal"
+		})
+	});
+};
+const ListEditModeItem = (props) => {
+	const { children, variant = "line", color = "neutral", onDelete } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames(styles["list-edit-mode__item"], color && styles[`list-edit-mode__item--${color}`], {
+			[styles["list-edit-mode__item--line"]]: variant === "line",
+			[styles["list-edit-mode__item--fill"]]: variant === "fill" || variant === "fill-negative"
+		}),
+		children: [onDelete && /* @__PURE__ */ jsx(IconButton, {
+			icon: X_default,
+			onClick: onDelete,
+			color: "red"
+		}), children]
+	});
+};
+ListEditModeItem.displayName = "ListEditModeItem";
+var ListEditMode_default$1 = ListEditModeItem;
+export { listEditModeWrapperClassnames as i, IconButton as n, ListEditModeItem as r, ListEditMode_default$1 as t };
+
+//# sourceMappingURL=ListEditMode.js.map

package/lib/ListEditMode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListEditMode.js","names":[],"sources":["../src/components/ListEditMode/ListEditMode.tsx","../src/components/ListEditMode/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { ExpanderListColors, ExpanderListVariant } from '../ExpanderList';\nimport Icon, { SvgIcon } from '../Icon';\nimport X from '../Icons/X';\nimport { LinkListColors, LinkListVariant } from '../LinkList';\n\nimport styles from './styles.module.scss';\n\nexport interface ListEditModeProps extends ListEditModeItemProps {\n  /** Items in the ListEditMode */\n  children: React.ReactNode;\n  /** Sets visual priority */\n  variant?: LinkListVariant | ExpanderListVariant;\n  /** Sets color */\n  color?: LinkListColors | ExpanderListColors;\n}\n\nexport interface ListEditModeItemProps {\n  /** Enables ListEditMode */\n  editMode?: boolean;\n  /** Callback for delete button  */\n  onDelete?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n}\n\nexport const listEditModeWrapperClassnames = classNames([styles[`list-edit-mode`]]);\n\nexport const IconButton = ({\n  icon,\n  color,\n  onClick,\n}: {\n  icon: SvgIcon;\n  color: 'red' | 'blue';\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n}): React.JSX.Element => {\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n\n  return (\n    <button ref={refObject} onClick={onClick} type=\"button\" className={classNames(styles['list-edit-mode__icon-button'])}>\n      <Icon\n        isHovered={isHovered}\n        svgIcon={icon}\n        size={IconSize.Small}\n        color={color === 'blue' ? 'var(--color-action-graphics-onlight)' : 'var(--color-destructive-graphics-normal'}\n      />\n    </button>\n  );\n};\n\nexport const ListEditModeItem = (props: ListEditModeProps): React.JSX.Element => {\n  const { children, variant = 'line', color = 'neutral', onDelete } = props;\n\n  const listClassNames = classNames(styles['list-edit-mode__item'], color && styles[`list-edit-mode__item--${color}`], {\n    [styles['list-edit-mode__item--line']]: variant === 'line',\n    [styles['list-edit-mode__item--fill']]: variant === 'fill' || variant === 'fill-negative',\n  });\n\n  return (\n    <div className={listClassNames}>\n      {onDelete && <IconButton icon={X} onClick={onDelete} color=\"red\" />}\n      {children}\n    </div>\n  );\n};\n\nListEditModeItem.displayName = 'ListEditModeItem';\n\nexport default ListEditModeItem;\n","import ListEditModeItem from './ListEditMode';\nexport * from './ListEditMode';\nexport default ListEditModeItem;\n"],"mappings":";;;;;;;;AA6BA,MAAa,gCAAgC,WAAW,CAAC,OAAO,kBAAkB,CAAC;AAEnF,MAAa,cAAc,EACzB,MACA,OACA,cAKuB;CACvB,MAAM,EAAE,WAAW,cAAc,kBAAqC;AAEtE,QACE,oBAAC,UAAA;EAAO,KAAK;EAAoB;EAAS,MAAK;EAAS,WAAW,WAAW,OAAO,+BAA+B;YAClH,oBAAC,cAAA;GACY;GACX,SAAS;GACT,MAAM,SAAS;GACf,OAAO,UAAU,SAAS,yCAAyC;IACnE;GACK;;AAIb,MAAa,oBAAoB,UAAgD;CAC/E,MAAM,EAAE,UAAU,UAAU,QAAQ,QAAQ,WAAW,aAAa;AAOpE,QACE,qBAAC,OAAA;EAAI,WANgB,WAAW,OAAO,yBAAyB,SAAS,OAAO,yBAAyB,UAAU;IAClH,OAAO,gCAAgC,YAAY;IACnD,OAAO,gCAAgC,YAAY,UAAU,YAAY;GAC3E,CAAC;aAIG,YAAY,oBAAC,YAAA;GAAW,MAAM;GAAG,SAAS;GAAU,OAAM;IAAQ,EAClE,SAAA;GACG;;AAIV,iBAAiB,cAAc;ACpE/B,IAAA,yBDsEe"}

package/lib/MaxCharacters.js

@@ -0,0 +1,24 @@
+import { r as FormOnColor } from "./constants2.js";
+import React from "react";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+import styles from "./components/MaxCharacters/styles.module.scss";
+var MaxCharacters = ({ maxCharacters, maxText, length, onColor, maxWidth }) => {
+	const progress = length / maxCharacters;
+	const counterTextClass = classNames(styles["max-characters"], {
+		[styles[`max-characters--on-dark`]]: onColor === FormOnColor.ondark,
+		[styles[`max-characters--invalid`]]: progress > 1
+	});
+	const ariaLevel = progress > .95 ? "polite" : "off";
+	return /* @__PURE__ */ jsx("div", {
+		"aria-live": ariaLevel,
+		"aria-atomic": "true",
+		className: counterTextClass,
+		style: { maxWidth },
+		children: `${length}/${maxCharacters} ${maxText ? maxText : "tegn"}`
+	});
+};
+var MaxCharacters_default = MaxCharacters;
+export { MaxCharacters_default as t };
+
+//# sourceMappingURL=MaxCharacters.js.map