@helsenorge/designsystem-react 13.0.0-beta.2 → 13.0.0-beta.5

package/lib/Slider.js

@@ -0,0 +1,269 @@
+import { n as AnalyticsId } from "./constants2.js";
+import { t as usePseudoClasses } from "./usePseudoClasses.js";
+import { n as mergeRefs, t as isMutableRefObject } from "./refs.js";
+import { t as useIdWithFallback } from "./useIdWithFallback.js";
+import { n as getAriaLabelAttributes } from "./accessibility.js";
+import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
+import { t as useSize } from "./useSize.js";
+import { t as Title_default } from "./Title2.js";
+import React, { useEffect, useId, useRef, useState } from "react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import styles from "./components/Slider/styles.module.scss";
+var useSafeNumberValue = (initial, min, max) => {
+	const [value, setValue] = useState(initial);
+	const setSafeValue = (newValue) => {
+		if (newValue > max) setValue(max);
+		else if (newValue < min) setValue(min);
+		else setValue(newValue);
+	};
+	useEffect(() => {
+		setSafeValue(initial);
+	}, [min, max]);
+	return [value, setSafeValue];
+};
+const Slider = React.forwardRef((props, ref) => {
+	const { title, ariaLabel, error, errorText, errorTextId: errorTextIdProp, errorWrapperClassName, labelLeft, labelRight, disabled = false, onChange, steps, step = 1, minValue = 0, maxValue = steps ? steps.length - 1 : 100, selected = true, testId, value, ...rest } = props;
+	const [isMoving, setIsMoving] = useState(false);
+	const [selectedState, setSelectedState] = useState(typeof value === "undefined" ? selected : true);
+	const [valueState, setValueState] = useSafeNumberValue(typeof value === "undefined" ? (maxValue - minValue) / 2 + minValue : value, minValue, maxValue);
+	const errorTextId = useIdWithFallback(errorTextIdProp);
+	const baseId = useId();
+	const titleId = "title-" + baseId;
+	const labelLeftId = "label-" + baseId;
+	const labelRightId = "label-right-" + baseId;
+	const trackRef = useRef(null);
+	const { refObject, isFocused } = usePseudoClasses(isMutableRefObject(ref) ? ref : null);
+	const mergedRefs = mergeRefs([ref, refObject]);
+	const { width: trackWidth } = useSize(trackRef) || { width: 0 };
+	const largeStep = maxValue / 10;
+	const invalid = !!errorText || !!error;
+	useEffect(() => {
+		const handlePointerUp = () => {
+			setIsMoving(false);
+		};
+		document.addEventListener("pointerup", handlePointerUp);
+		return () => {
+			document.removeEventListener("pointerup", handlePointerUp);
+		};
+	}, []);
+	const getValueBasedOnMarkerPosition = (markerPosition) => {
+		let value$1 = (markerPosition - (trackRef.current?.getBoundingClientRect().x ?? 0)) / trackWidth * (maxValue - minValue) + minValue;
+		value$1 = Math.round(value$1 / step) * step;
+		value$1 = Math.max(minValue, Math.min(maxValue, value$1));
+		return value$1;
+	};
+	useEffect(() => {
+		const handlePointerMove = (e) => {
+			if (!disabled && isMoving) setValueState(getValueBasedOnMarkerPosition(e.clientX));
+		};
+		document.addEventListener("pointermove", handlePointerMove);
+		return () => {
+			document.removeEventListener("pointermove", handlePointerMove);
+		};
+	}, [isMoving]);
+	useEffect(() => {
+		if (value !== valueState && typeof value !== "undefined") {
+			handleSelected();
+			setValueState(value);
+		}
+	}, [value]);
+	useEffect(() => {
+		if (typeof value === "undefined" && selected !== selectedState) setSelectedState(selected);
+	}, [selected]);
+	const handleSelected = () => {
+		if (selectedState === false) setSelectedState(true);
+	};
+	const handleKeyDown = (e) => {
+		if (disabled) return;
+		let flag = false;
+		switch (e.key) {
+			case "ArrowLeft":
+			case "ArrowDown":
+				setValueState(valueState - step);
+				flag = true;
+				break;
+			case "PageDown":
+				setValueState(valueState - largeStep);
+				flag = true;
+				break;
+			case "ArrowRight":
+			case "ArrowUp":
+				setValueState(valueState + step);
+				flag = true;
+				break;
+			case "PageUp":
+				setValueState(valueState + largeStep);
+				flag = true;
+				break;
+			case "Home":
+				setValueState(minValue);
+				flag = true;
+				break;
+			case "End":
+				setValueState(maxValue);
+				flag = true;
+				break;
+			default: break;
+		}
+		if (flag) {
+			handleSelected();
+			e.preventDefault();
+			e.stopPropagation();
+		}
+	};
+	const handleTrackClick = (e) => {
+		if (disabled) return;
+		setValueState(getValueBasedOnMarkerPosition(e.clientX));
+		refObject.current?.focus();
+	};
+	const handlePointerDown = (e) => {
+		if (disabled) return;
+		setIsMoving(true);
+		handleSelected();
+		e.preventDefault();
+		e.stopPropagation();
+		refObject.current?.focus();
+	};
+	const markerXPos = maxValue !== minValue ? trackWidth / (maxValue - minValue) * (valueState - minValue) : 0;
+	const getAriaValueText = () => {
+		const stepIndex = steps ? Math.round((valueState - minValue) / step) : null;
+		if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {
+			const step$1 = steps[stepIndex];
+			const emojiCode = step$1.emojiUniCode;
+			const label = typeof step$1.label !== "undefined" ? step$1.label.toString() : void 0;
+			return emojiCode && label ? `${emojiCode} ${label}` : emojiCode || label;
+		}
+	};
+	const getAriaLabeledById = () => {
+		if (title && labelLeft && labelRight) return [
+			titleId,
+			labelLeftId,
+			labelRightId
+		].join(" ");
+		if (title && labelLeft) return [titleId, labelLeftId].join(" ");
+		if (title && labelRight) return [titleId, labelRightId].join(" ");
+		if (title) return titleId;
+	};
+	const ariaLabelAttributes = getAriaLabelAttributes({
+		label: ariaLabel,
+		id: getAriaLabeledById(),
+		prefer: "label"
+	});
+	const getXPositionStyling = (index, stepsLength) => {
+		return { left: `${index / (stepsLength - 1) * 100}%` };
+	};
+	useEffect(() => {
+		if (selectedState && onChange) onChange({ target: {
+			name: props.name,
+			value: valueState
+		} });
+	}, [valueState, selectedState]);
+	const renderEmojies = () => {
+		return /* @__PURE__ */ jsx("div", {
+			className: styles["slider__emoji-container"],
+			children: steps?.map((step$1, index) => {
+				return step$1.emojiUniCode && /* @__PURE__ */ jsx("div", {
+					"aria-hidden": true,
+					className: styles["slider__emoji"],
+					style: getXPositionStyling(index, steps.length),
+					children: step$1.emojiUniCode
+				}, "emoji" + index);
+			})
+		});
+	};
+	const renderSteps = () => {
+		return steps?.map((_step, index) => {
+			return /* @__PURE__ */ jsx("div", {
+				className: styles["slider__track__step"],
+				style: getXPositionStyling(index, steps.length)
+			}, "step" + index);
+		});
+	};
+	const renderStepLabels = () => {
+		return /* @__PURE__ */ jsx("div", {
+			className: styles["slider__value-container"],
+			children: steps?.map((step$1, index) => {
+				return typeof step$1.label !== "undefined" && /* @__PURE__ */ jsx("div", {
+					"aria-hidden": true,
+					className: styles["slider__value"],
+					style: getXPositionStyling(index, steps.length),
+					children: step$1.label
+				}, "label" + index);
+			})
+		});
+	};
+	return /* @__PURE__ */ jsxs(ErrorWrapper_default, {
+		className: errorWrapperClassName,
+		errorText,
+		errorTextId,
+		children: [/* @__PURE__ */ jsx("input", {
+			"aria-valuetext": getAriaValueText(),
+			className: styles["sr-only-slider"],
+			disabled,
+			min: minValue,
+			max: maxValue,
+			onChange,
+			onKeyDown: handleKeyDown,
+			value: valueState,
+			ref: mergedRefs,
+			type: "range",
+			...rest,
+			...ariaLabelAttributes
+		}), /* @__PURE__ */ jsxs("div", {
+			className: styles.slider,
+			"data-testid": testId,
+			"data-analyticsid": AnalyticsId.Slider,
+			children: [
+				title && /* @__PURE__ */ jsx(Title_default, {
+					className: styles["slider__title"],
+					htmlMarkup: "h3",
+					margin: 0,
+					appearance: "title3",
+					id: titleId,
+					children: title
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: styles["slider__content-container"],
+					children: [
+						renderEmojies(),
+						/* @__PURE__ */ jsxs("div", {
+							ref: trackRef,
+							className: classNames(styles["slider__track-wrapper"], disabled && styles["slider__track-wrapper--disabled"]),
+							onClick: handleTrackClick,
+							onPointerDown: handlePointerDown,
+							children: [/* @__PURE__ */ jsx("div", {
+								className: classNames(styles.slider__track, disabled && styles["slider__track--disabled"]),
+								children: renderSteps()
+							}), /* @__PURE__ */ jsx("div", {
+								className: classNames(styles.slider__marker, {
+									[styles["slider__marker--disabled"]]: disabled,
+									[styles["slider__marker--selected"]]: selectedState,
+									[styles["slider__marker--invalid"]]: invalid,
+									[styles["slider__marker--focused"]]: !disabled && isFocused
+								}),
+								style: { left: `${markerXPos}px` }
+							})]
+						}),
+						renderStepLabels()
+					]
+				}),
+				(labelLeft || labelRight) && /* @__PURE__ */ jsxs("span", {
+					className: styles.slider__options,
+					children: [/* @__PURE__ */ jsx("span", {
+						id: labelLeftId,
+						children: labelLeft
+					}), /* @__PURE__ */ jsx("span", {
+						id: labelRightId,
+						children: labelRight
+					})]
+				})
+			]
+		})]
+	});
+});
+Slider.displayName = "Slider";
+var Slider_default$1 = Slider;
+export { Slider as n, Slider_default$1 as t };
+
+//# sourceMappingURL=Slider.js.map

package/lib/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","names":["handleKeyDown: React.KeyboardEventHandler<HTMLDivElement>","handleTrackClick: React.MouseEventHandler<HTMLDivElement>","handlePointerDown: React.PointerEventHandler<HTMLDivElement>"],"sources":["../src/components/Slider/Slider.tsx","../src/components/Slider/index.ts"],"sourcesContent":["import React, { useEffect, useState, useRef, useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n  const [value, setValue] = useState(initial);\n\n  const setSafeValue = (newValue: number): void => {\n    if (newValue > max) {\n      setValue(max);\n    } else if (newValue < min) {\n      setValue(min);\n    } else {\n      setValue(newValue);\n    }\n  };\n\n  useEffect(() => {\n    setSafeValue(initial);\n  }, [min, max]);\n\n  return [value, setSafeValue];\n};\n\nexport type SliderStep = {\n  label?: number | string;\n  emojiUniCode?: string;\n};\n\nexport interface SliderProps\n  extends ErrorWrapperClassNameProps,\n    Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'onChange' | 'onBlur'> {\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  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tSets aria-label of the slider. */\n  ariaLabel?: string;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Sets the minimum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  minValue?: number;\n  /** Sets the maximum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  maxValue?: number;\n  /** If set to false will only trigger onChange once a user interaction has been made, updates to this prop will be taken into account - true by default */\n  selected?: boolean;\n  /** Sets the steps data for the slider */\n  steps?: SliderStep[];\n  /** Sets the step to move per point in the slider */\n  step?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the value of the slider */\n  value?: number;\n}\n\nexport const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    title,\n    ariaLabel,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    errorWrapperClassName,\n    labelLeft,\n    labelRight,\n    disabled = false,\n    onChange,\n    steps,\n    step = 1,\n    minValue = 0,\n    maxValue = steps ? steps.length - 1 : 100,\n    selected = true,\n    testId,\n    value,\n    ...rest\n  } = props;\n\n  const [isMoving, setIsMoving] = useState(false);\n  const [selectedState, setSelectedState] = useState(typeof value === 'undefined' ? selected : true);\n  const [valueState, setValueState] = useSafeNumberValue(\n    typeof value === 'undefined' ? (maxValue - minValue) / 2 + minValue : value,\n    minValue,\n    maxValue\n  );\n\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const baseId = useId();\n  const titleId = 'title-' + baseId;\n  const labelLeftId = 'label-' + baseId;\n  const labelRightId = 'label-right-' + baseId;\n  const trackRef = useRef<HTMLDivElement>(null);\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const largeStep = maxValue / 10;\n  const invalid = !!errorText || !!error;\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return (): void => {\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, []);\n\n  const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n    const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n    // Calculate the normalized position (0 to 1) of the marker along the track\n    const normalizedPosition = (markerPosition - trackPosition) / trackWidth;\n    const valueRange = maxValue - minValue;\n    // Calculate the value without considering the step\n    let value = normalizedPosition * valueRange + minValue;\n    // Adjust the value to account for the step increment\n    const stepCount = Math.round(value / step);\n    value = stepCount * step;\n    value = Math.max(minValue, Math.min(maxValue, value));\n\n    return value;\n  };\n\n  useEffect(() => {\n    const handlePointerMove = (e: PointerEvent): void => {\n      if (!disabled && isMoving) {\n        const newValue = getValueBasedOnMarkerPosition(e.clientX);\n        setValueState(newValue);\n      }\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n\n    return (): void => {\n      document.removeEventListener('pointermove', handlePointerMove);\n    };\n  }, [isMoving]);\n\n  useEffect(() => {\n    if (value !== valueState && typeof value !== 'undefined') {\n      handleSelected();\n      setValueState(value);\n    }\n  }, [value]);\n\n  useEffect(() => {\n    if (typeof value === 'undefined' && selected !== selectedState) {\n      setSelectedState(selected);\n    }\n  }, [selected]);\n\n  const handleSelected = (): void => {\n    if (selectedState === false) {\n      setSelectedState(true);\n    }\n  };\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    let flag = false;\n\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        setValueState(valueState - step);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValueState(valueState - largeStep);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValueState(valueState + step);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValueState(valueState + largeStep);\n        flag = true;\n        break;\n      case 'Home':\n        setValueState(minValue);\n        flag = true;\n        break;\n      case 'End':\n        setValueState(maxValue);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\n      handleSelected();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    const newValue = getValueBasedOnMarkerPosition(e.clientX);\n    setValueState(newValue);\n    refObject.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    setIsMoving(true);\n    handleSelected();\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    refObject.current?.focus();\n  };\n\n  const markerXPos = maxValue !== minValue ? (trackWidth / (maxValue - minValue)) * (valueState - minValue) : 0;\n\n  const getAriaValueText = (): string | undefined => {\n    const stepIndex = steps ? Math.round((valueState - minValue) / step) : null;\n\n    if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {\n      const step = steps[stepIndex];\n      const emojiCode = step.emojiUniCode;\n      const label = typeof step.label !== 'undefined' ? step.label.toString() : undefined;\n\n      return emojiCode && label ? `${emojiCode} ${label}` : emojiCode || label;\n    }\n\n    return undefined;\n  };\n\n  const getAriaLabeledById = (): string | undefined => {\n    if (title && labelLeft && labelRight) {\n      return [titleId, labelLeftId, labelRightId].join(' ');\n    }\n    if (title && labelLeft) {\n      return [titleId, labelLeftId].join(' ');\n    }\n    if (title && labelRight) {\n      return [titleId, labelRightId].join(' ');\n    }\n    if (title) {\n      return titleId;\n    }\n  };\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: ariaLabel,\n    id: getAriaLabeledById(),\n    prefer: 'label',\n  });\n\n  const getXPositionStyling = (index: number, stepsLength: number): { left: string } => {\n    return { left: `${(index / (stepsLength - 1)) * 100}%` };\n  };\n\n  useEffect(() => {\n    if (selectedState && onChange) {\n      onChange({\n        target: {\n          name: props.name,\n          value: valueState,\n        },\n      } as unknown as React.ChangeEvent<HTMLInputElement>);\n    }\n  }, [valueState, selectedState]);\n\n  const renderEmojies = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__emoji-container']}>\n        {steps?.map((step, index) => {\n          return (\n            step.emojiUniCode && (\n              <div\n                aria-hidden={true}\n                key={'emoji' + index}\n                className={styles['slider__emoji']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.emojiUniCode}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  const renderSteps = (): React.ReactNode => {\n    return steps?.map((_step, index) => {\n      return <div key={'step' + index} className={styles['slider__track__step']} style={getXPositionStyling(index, steps.length)} />;\n    });\n  };\n\n  const renderStepLabels = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__value-container']}>\n        {steps?.map((step, index) => {\n          return (\n            typeof step.label !== 'undefined' && (\n              <div\n                aria-hidden={true}\n                key={'label' + index}\n                className={styles['slider__value']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.label}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <input\n        aria-valuetext={getAriaValueText()}\n        className={styles['sr-only-slider']}\n        disabled={disabled}\n        min={minValue}\n        max={maxValue}\n        onChange={onChange}\n        onKeyDown={handleKeyDown}\n        value={valueState}\n        ref={mergedRefs}\n        type=\"range\"\n        {...rest}\n        {...ariaLabelAttributes}\n      />\n      <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n        {title && (\n          <Title className={styles['slider__title']} htmlMarkup={'h3'} margin={0} appearance={'title3'} id={titleId}>\n            {title}\n          </Title>\n        )}\n        <div className={styles['slider__content-container']}>\n          {renderEmojies()}\n          {/* Slider streken er klikkbar med mus/touch */}\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div\n            ref={trackRef}\n            className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n            onClick={handleTrackClick}\n            onPointerDown={handlePointerDown}\n          >\n            <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])}>{renderSteps()}</div>\n            <div\n              className={classNames(styles.slider__marker, {\n                [styles['slider__marker--disabled']]: disabled,\n                [styles['slider__marker--selected']]: selectedState,\n                [styles['slider__marker--invalid']]: invalid,\n                [styles['slider__marker--focused']]: !disabled && isFocused,\n              })}\n              style={{\n                left: `${markerXPos}px`,\n              }}\n            />\n          </div>\n          {renderStepLabels()}\n        </div>\n        {(labelLeft || labelRight) && (\n          <span className={styles.slider__options}>\n            <span id={labelLeftId}>{labelLeft}</span>\n            <span id={labelRightId}>{labelRight}</span>\n          </span>\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n","import Slider from './Slider';\nexport * from './Slider';\nexport default Slider;\n"],"mappings":"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"}

package/lib/Spacer.js

@@ -0,0 +1,31 @@
+import { n as AnalyticsId } from "./constants2.js";
+import React from "react";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+import spacerStyles from "./components/Spacer/styles.module.scss";
+var Spacer_default$1 = React.forwardRef(function SpacerForwardedRef(props, ref) {
+	const { size = "s", className, testId } = props;
+	return /* @__PURE__ */ jsx("span", {
+		className: classNames(spacerStyles.spacer, {
+			[spacerStyles["spacer--4xs"]]: size === "4xs",
+			[spacerStyles["spacer--3xs"]]: size === "3xs",
+			[spacerStyles["spacer--2xs"]]: size === "2xs",
+			[spacerStyles["spacer--xs"]]: size === "xs",
+			[spacerStyles["spacer--s"]]: size === "s",
+			[spacerStyles["spacer--m"]]: size === "m",
+			[spacerStyles["spacer--l"]]: size === "l",
+			[spacerStyles["spacer--xl"]]: size === "xl",
+			[spacerStyles["spacer--2xl"]]: size === "2xl",
+			[spacerStyles["spacer--3xl"]]: size === "3xl",
+			[spacerStyles["spacer--4xl"]]: size === "4xl",
+			[spacerStyles["spacer--5xl"]]: size === "5xl",
+			[spacerStyles["spacer--6xl"]]: size === "6xl"
+		}, className),
+		ref,
+		"data-testid": testId,
+		"data-analyticsid": AnalyticsId.Spacer
+	});
+});
+export { Spacer_default$1 as t };
+
+//# sourceMappingURL=Spacer.js.map

package/lib/Spacer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacer.js","names":[],"sources":["../src/components/Spacer/Spacer.tsx","../src/components/Spacer/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { SpacerSizes } from './../../theme/spacers';\n\nimport spacerStyles from './styles.module.scss';\n\nexport interface SpacerProps {\n  /** Sets the size of the spacer. */\n  size?: SpacerSizes;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Spacer = React.forwardRef(function SpacerForwardedRef(props: SpacerProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { size = 's', className, testId } = props;\n  const spacerClasses = classNames(\n    spacerStyles.spacer,\n    {\n      [spacerStyles['spacer--4xs']]: size === '4xs',\n      [spacerStyles['spacer--3xs']]: size === '3xs',\n      [spacerStyles['spacer--2xs']]: size === '2xs',\n      [spacerStyles['spacer--xs']]: size === 'xs',\n      [spacerStyles['spacer--s']]: size === 's',\n      [spacerStyles['spacer--m']]: size === 'm',\n      [spacerStyles['spacer--l']]: size === 'l',\n      [spacerStyles['spacer--xl']]: size === 'xl',\n      [spacerStyles['spacer--2xl']]: size === '2xl',\n      [spacerStyles['spacer--3xl']]: size === '3xl',\n      [spacerStyles['spacer--4xl']]: size === '4xl',\n      [spacerStyles['spacer--5xl']]: size === '5xl',\n      [spacerStyles['spacer--6xl']]: size === '6xl',\n    },\n    className\n  );\n\n  return <span className={spacerClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Spacer}></span>;\n});\n\nexport default Spacer;\n","import Spacer from './Spacer';\nexport * from './Spacer';\nexport default Spacer;\n"],"mappings":";;;;;ACEA,IAAA,mBDgBe,MAAM,WAAW,SAAS,mBAAmB,OAAoB,KAAsC;CACpH,MAAM,EAAE,OAAO,KAAK,WAAW,WAAW;AAqB1C,QAAO,oBAAC,QAAA;EAAK,WApBS,WACpB,aAAa,QACb;IACG,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,gBAAgB,SAAS;IACtC,aAAa,eAAe,SAAS;IACrC,aAAa,eAAe,SAAS;IACrC,aAAa,eAAe,SAAS;IACrC,aAAa,gBAAgB,SAAS;IACtC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;GACzC,EACD,UACD;EAE2C;EAAK,eAAa;EAAQ,oBAAkB,YAAY;GAAe;EACnH"}

package/lib/StatusDot.js

@@ -0,0 +1,150 @@
+import { a as IconSize, n as AnalyticsId, r as FormOnColor } from "./constants2.js";
+import { t as getColor } from "./color.js";
+import { n as LazyIcon } from "./LazyIcon.js";
+import React from "react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import styles from "./components/StatusDot/styles.module.scss";
+let StatusDotOnColor = /* @__PURE__ */ function(StatusDotOnColor$1) {
+	StatusDotOnColor$1[StatusDotOnColor$1["onwhite"] = FormOnColor.onwhite] = "onwhite";
+	StatusDotOnColor$1[StatusDotOnColor$1["ondark"] = FormOnColor.ondark] = "ondark";
+	return StatusDotOnColor$1;
+}({});
+let StatusDotVariant = /* @__PURE__ */ function(StatusDotVariant$1) {
+	StatusDotVariant$1["success"] = "success";
+	StatusDotVariant$1["inprocess"] = "inprocess";
+	StatusDotVariant$1["exception"] = "exception";
+	StatusDotVariant$1["unknown"] = "unknown";
+	StatusDotVariant$1["inspected"] = "inspected";
+	StatusDotVariant$1["cancelled"] = "cancelled";
+	StatusDotVariant$1["alert"] = "alert";
+	StatusDotVariant$1["transparent"] = "transparent";
+	StatusDotVariant$1["info"] = "info";
+	StatusDotVariant$1["group"] = "group";
+	StatusDotVariant$1["recurring"] = "recurring";
+	StatusDotVariant$1["noaccess"] = "noaccess";
+	StatusDotVariant$1["draft"] = "draft";
+	StatusDotVariant$1["hidden"] = "hidden";
+	StatusDotVariant$1["login"] = "login";
+	StatusDotVariant$1["attachment"] = "attachment";
+	StatusDotVariant$1["active"] = "active";
+	StatusDotVariant$1["pending"] = "pending";
+	StatusDotVariant$1["inactive"] = "inactive";
+	return StatusDotVariant$1;
+}({});
+var StatusDotIcon = ({ onColor, variant = "info" }) => {
+	const iconProps = {
+		color: onColor === StatusDotOnColor.ondark ? getColor("white") : getColor("black"),
+		size: IconSize.XXSmall,
+		onColor,
+		className: classNames({
+			[styles[`statusdot__dot--${variant}`]]: typeof variant !== "undefined",
+			[styles["statusdot__dot--on-dark"]]: onColor === StatusDotOnColor.ondark
+		})
+	};
+	switch (variant) {
+		case StatusDotVariant.success: return /* @__PURE__ */ jsx(LazyIcon, {
+			...iconProps,
+			iconName: "DotSuccess"
+		});
+		case StatusDotVariant.inprocess: return /* @__PURE__ */ jsx(LazyIcon, {
+			...iconProps,
+			iconName: "DotHalfDisc"
+		});
+		case StatusDotVariant.exception: return /* @__PURE__ */ jsx(LazyIcon, {
+			...iconProps,
+			iconName: "DotWarningTriangle"
+		});
+		case StatusDotVariant.unknown: return /* @__PURE__ */ jsx(LazyIcon, {
+			...iconProps,
+			iconName: "DotQuestionMark"
+		});
+		case StatusDotVariant.inspected: return /* @__PURE__ */ jsx(LazyIcon, {
+			...iconProps,
+			iconName: "DotLookingGlass"
+		});
+		case StatusDotVariant.cancelled: return /* @__PURE__ */ jsx(LazyIcon, {
+			...iconProps,
+			iconName: "DotCancelled"
+		});
+		case StatusDotVariant.alert: return /* @__PURE__ */ jsx(LazyIcon, {
+			...iconProps,
+			iconName: "DotAlert"
+		});
+		case StatusDotVariant.transparent: return /* @__PURE__ */ jsx(LazyIcon, {
+			...iconProps,
+			iconName: "DotTransparent"
+		});
+		case StatusDotVariant.info: return /* @__PURE__ */ jsx(LazyIcon, {
+			...iconProps,
+			iconName: "DotInfo"
+		});
+		case StatusDotVariant.group: return /* @__PURE__ */ jsx(LazyIcon, {
+			...iconProps,
+			iconName: "Group"
+		});
+		case StatusDotVariant.recurring: return /* @__PURE__ */ jsx(LazyIcon, {
+			...iconProps,
+			iconName: "Change"
+		});
+		case StatusDotVariant.noaccess: return /* @__PURE__ */ jsx(LazyIcon, {
+			...iconProps,
+			iconName: "NoAccess"
+		});
+		case StatusDotVariant.draft: return /* @__PURE__ */ jsx(LazyIcon, {
+			...iconProps,
+			iconName: "Pencil"
+		});
+		case StatusDotVariant.hidden: return /* @__PURE__ */ jsx(LazyIcon, {
+			...iconProps,
+			iconName: "NoEye"
+		});
+		case StatusDotVariant.login: return /* @__PURE__ */ jsx(LazyIcon, {
+			...iconProps,
+			iconName: "Login"
+		});
+		case StatusDotVariant.attachment: return /* @__PURE__ */ jsx(LazyIcon, {
+			...iconProps,
+			iconName: "Attachment"
+		});
+		case StatusDotVariant.active: return /* @__PURE__ */ jsx(LazyIcon, {
+			...iconProps,
+			iconName: "DotActive"
+		});
+		case StatusDotVariant.pending: return /* @__PURE__ */ jsx(LazyIcon, {
+			...iconProps,
+			iconName: "DotPending"
+		});
+		case StatusDotVariant.inactive: return /* @__PURE__ */ jsx(LazyIcon, {
+			...iconProps,
+			iconName: "DotInactive"
+		});
+	}
+	return null;
+};
+var StatusDot_default$1 = React.forwardRef(function StatusDotForwardedRef(props, ref) {
+	const { id, onColor = StatusDotOnColor.onwhite, variant = StatusDotVariant.info, text, className, testId } = props;
+	const statusDotClasses = classNames(styles["statusdot"], className);
+	const labelClasses = classNames(styles["statusdot__label"], { [styles["statusdot__label--on-dark"]]: onColor === StatusDotOnColor.ondark });
+	return /* @__PURE__ */ jsxs("span", {
+		id,
+		ref,
+		className: statusDotClasses,
+		"data-testid": testId,
+		"data-analyticsid": AnalyticsId.StatusDot,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: styles["statusdot__dot"],
+			"data-testid": testId + "-dot",
+			children: /* @__PURE__ */ jsx(StatusDotIcon, {
+				onColor,
+				variant
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			className: labelClasses,
+			children: text
+		})]
+	});
+});
+export { StatusDotOnColor as n, StatusDotVariant as r, StatusDot_default$1 as t };
+
+//# sourceMappingURL=StatusDot.js.map

package/lib/StatusDot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusDot.js","names":["StatusDotIcon: React.FC<StatusDotIconProps>","StatusDot: StatusDotType"],"sources":["../src/components/StatusDot/StatusDot.tsx","../src/components/StatusDot/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../..';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport { LazyIcon } from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport enum StatusDotOnColor {\n  onwhite = FormOnColor.onwhite,\n  ondark = FormOnColor.ondark,\n}\n\nexport enum StatusDotVariant {\n  success = 'success',\n  inprocess = 'inprocess',\n  exception = 'exception',\n  unknown = 'unknown',\n  inspected = 'inspected',\n  cancelled = 'cancelled',\n  alert = 'alert',\n  transparent = 'transparent',\n  info = 'info',\n  group = 'group',\n  recurring = 'recurring',\n  noaccess = 'noaccess',\n  draft = 'draft',\n  hidden = 'hidden',\n  login = 'login',\n  attachment = 'attachment',\n  active = 'active',\n  pending = 'pending',\n  inactive = 'inactive',\n}\n\nexport interface StatusDotIconProps {\n  /** Defines the color of the icon */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** The variant defines style formatting and what icon to use */\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ onColor, variant = 'info' }) => {\n  const color = onColor === StatusDotOnColor.ondark ? getColor('white') : getColor('black');\n  const iconProps = {\n    color,\n    size: IconSize.XXSmall,\n    onColor,\n    className: classNames({\n      [styles[`statusdot__dot--${variant}`]]: typeof variant !== 'undefined',\n      [styles['statusdot__dot--on-dark']]: onColor === StatusDotOnColor.ondark,\n    }),\n  };\n\n  switch (variant) {\n    case StatusDotVariant.success:\n      return <LazyIcon {...iconProps} iconName={'DotSuccess'} />;\n    case StatusDotVariant.inprocess:\n      return <LazyIcon {...iconProps} iconName={'DotHalfDisc'} />;\n    case StatusDotVariant.exception:\n      return <LazyIcon {...iconProps} iconName={'DotWarningTriangle'} />;\n    case StatusDotVariant.unknown:\n      return <LazyIcon {...iconProps} iconName={'DotQuestionMark'} />;\n    case StatusDotVariant.inspected:\n      return <LazyIcon {...iconProps} iconName={'DotLookingGlass'} />;\n    case StatusDotVariant.cancelled:\n      return <LazyIcon {...iconProps} iconName={'DotCancelled'} />;\n    case StatusDotVariant.alert:\n      return <LazyIcon {...iconProps} iconName={'DotAlert'} />;\n    case StatusDotVariant.transparent:\n      return <LazyIcon {...iconProps} iconName={'DotTransparent'} />;\n    case StatusDotVariant.info:\n      return <LazyIcon {...iconProps} iconName={'DotInfo'} />;\n    case StatusDotVariant.group:\n      return <LazyIcon {...iconProps} iconName={'Group'} />;\n    case StatusDotVariant.recurring:\n      return <LazyIcon {...iconProps} iconName={'Change'} />;\n    case StatusDotVariant.noaccess:\n      return <LazyIcon {...iconProps} iconName={'NoAccess'} />;\n    case StatusDotVariant.draft:\n      return <LazyIcon {...iconProps} iconName={'Pencil'} />;\n    case StatusDotVariant.hidden:\n      return <LazyIcon {...iconProps} iconName={'NoEye'} />;\n    case StatusDotVariant.login:\n      return <LazyIcon {...iconProps} iconName={'Login'} />;\n    case StatusDotVariant.attachment:\n      return <LazyIcon {...iconProps} iconName={'Attachment'} />;\n    case StatusDotVariant.active:\n      return <LazyIcon {...iconProps} iconName={'DotActive'} />;\n    case StatusDotVariant.pending:\n      return <LazyIcon {...iconProps} iconName={'DotPending'} />;\n    case StatusDotVariant.inactive:\n      return <LazyIcon {...iconProps} iconName={'DotInactive'} />;\n  }\n\n  return null;\n};\n\nexport interface StatusDotProps {\n  /** id that is placed on the wrapper */\n  id?: string;\n  /** Defines the color mode, onwhite, ondark etc. */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport type StatusDotType = React.ForwardRefExoticComponent<StatusDotProps & React.RefAttributes<HTMLElement>>;\nconst StatusDot: StatusDotType = React.forwardRef(function StatusDotForwardedRef(\n  props: StatusDotProps,\n  ref: React.ForwardedRef<HTMLElement>\n) {\n  const { id, onColor = StatusDotOnColor.onwhite, variant = StatusDotVariant.info, text, className, testId } = props;\n\n  const statusDotClasses = classNames(styles['statusdot'], className);\n  const labelClasses = classNames(styles['statusdot__label'], {\n    [styles['statusdot__label--on-dark']]: onColor === StatusDotOnColor.ondark,\n  });\n\n  return (\n    <span id={id} ref={ref} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={styles['statusdot__dot']} data-testid={testId + '-dot'}>\n        <StatusDotIcon onColor={onColor} variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </span>\n  );\n});\n\nexport default StatusDot;\n","import StatusDot from './StatusDot';\nexport * from './StatusDot';\nexport default StatusDot;\n"],"mappings":"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"}

package/lib/StatusDotList.js

@@ -0,0 +1,33 @@
+import { r as StatusDotVariant, t as StatusDot_default } from "./StatusDot.js";
+import React from "react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import styles from "./components/ElementHeader/StatusDotList/styles.module.scss";
+const StatusDotList = (props) => {
+	const { additionalText, children, className = "", testId, stacking = "horizontal", hiddenForChild = false, topStatusDot, bottomStatusDot } = props;
+	return /* @__PURE__ */ jsxs("span", {
+		"data-testid": testId,
+		className: classNames(styles["statusdotlist"], className),
+		children: [
+			topStatusDot,
+			hiddenForChild && /* @__PURE__ */ jsx(StatusDot_default, {
+				variant: StatusDotVariant.hidden,
+				text: "Skjult for barnet"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"data-stacking": stacking,
+				className: styles["statusdotlist__children"],
+				children
+			}),
+			bottomStatusDot,
+			additionalText && /* @__PURE__ */ jsx("span", {
+				className: styles["statusdotlist__additional-text"],
+				children: additionalText
+			})
+		]
+	});
+};
+var StatusDotList_default$1 = StatusDotList;
+export { StatusDotList as n, StatusDotList_default$1 as t };
+
+//# sourceMappingURL=StatusDotList.js.map

package/lib/StatusDotList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusDotList.js","names":["StatusDotList: StatusDotListType"],"sources":["../src/components/ElementHeader/StatusDotList/StatusDotList.tsx","../src/components/ElementHeader/StatusDotList/index.ts"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport StatusDot, { StatusDotProps, StatusDotVariant } from '../../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type StatusDotListType = React.FC<StatusDotListProps>;\n\nexport interface StatusDotListProps {\n  /** Additional text to the bottom statusdot */\n  additionalText?: string;\n  /** StatusDot that is under the others and outside the stacking */\n  bottomStatusDot?: React.ReactElement<StatusDotProps>;\n  /** Stacking of the statusdots  */\n  stacking?: 'vertical' | 'horizontal';\n  /** StatusDots as children */\n  children?: React.ReactNode;\n  /** Adds custom classes */\n  className?: string;\n  /** Show a hidden for child statusdot over the other */\n  hiddenForChild?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** StatusDot that is over the others and outside the stacking */\n  topStatusDot?: React.ReactElement<StatusDotProps>;\n}\n\nexport const StatusDotList: StatusDotListType = props => {\n  const {\n    additionalText,\n    children,\n    className = '',\n    testId,\n    stacking = 'horizontal',\n    hiddenForChild = false,\n    topStatusDot,\n    bottomStatusDot,\n  } = props;\n\n  return (\n    <span data-testid={testId} className={cn(styles['statusdotlist'], className)}>\n      {topStatusDot}\n      {/* @todo: legg til tekst i SOT */}\n      {hiddenForChild && <StatusDot variant={StatusDotVariant.hidden} text=\"Skjult for barnet\" />}\n      <span data-stacking={stacking} className={styles['statusdotlist__children']}>\n        {children}\n      </span>\n      {bottomStatusDot}\n      {additionalText && <span className={styles['statusdotlist__additional-text']}>{additionalText}</span>}\n    </span>\n  );\n};\n\nexport default StatusDotList;\n","import StatusDotList from './StatusDotList';\nexport * from './StatusDotList';\nexport default StatusDotList;\n"],"mappings":";;;;;AA6BA,MAAaA,iBAAmC,UAAS;CACvD,MAAM,EACJ,gBACA,UACA,YAAY,IACZ,QACA,WAAW,cACX,iBAAiB,OACjB,cACA,oBACE;AAEJ,QACE,qBAAC,QAAA;EAAK,eAAa;EAAQ,WAAW,WAAG,OAAO,kBAAkB,UAAU;;GACzE;GAEA,kBAAkB,oBAAC,mBAAA;IAAU,SAAS,iBAAiB;IAAQ,MAAK;KAAsB;GAC3F,oBAAC,QAAA;IAAK,iBAAe;IAAU,WAAW,OAAO;IAC9C;KACI;GACN;GACA,kBAAkB,oBAAC,QAAA;IAAK,WAAW,OAAO;cAAoC;KAAsB;;GAChG;;ACjDX,IAAA,0BDqDe"}

package/lib/StepButtons.js

@@ -0,0 +1,39 @@
+import { n as AnalyticsId } from "./constants2.js";
+import React from "react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import styles from "./components/StepButtons/styles.module.scss";
+const StepButtons = (props) => {
+	const { backButton, forwardButton, additionalButtons, cancelButton, sticky = false, testId } = props;
+	const navigationClasses = classNames(styles.stepbuttons, sticky && styles["stepbuttons--has-sticky-buttons"]);
+	if (backButton || forwardButton || additionalButtons || cancelButton) return /* @__PURE__ */ jsxs("div", {
+		className: navigationClasses,
+		"data-testid": testId,
+		"data-analyticsid": AnalyticsId.StepButtons,
+		children: [
+			(backButton || forwardButton) && /* @__PURE__ */ jsxs("div", {
+				className: styles.stepbuttons__buttons,
+				children: [backButton && React.cloneElement(backButton, {
+					variant: "outline",
+					wrapperClassName: classNames(styles["stepbuttons__button--back"])
+				}), forwardButton && React.cloneElement(forwardButton, {
+					variant: "fill",
+					wrapperClassName: classNames(styles["stepbuttons__button--forward"])
+				})]
+			}),
+			additionalButtons && /* @__PURE__ */ jsx("div", {
+				className: classNames(styles.stepbuttons__buttons, styles["stepbuttons__buttons--additional"]),
+				children: additionalButtons
+			}),
+			cancelButton && /* @__PURE__ */ jsx("div", {
+				className: styles.stepbuttons__buttons,
+				children: React.cloneElement(cancelButton, { variant: "borderless" })
+			})
+		]
+	});
+	return null;
+};
+var StepButtons_default$1 = StepButtons;
+export { StepButtons as n, StepButtons_default$1 as t };
+
+//# sourceMappingURL=StepButtons.js.map

package/lib/StepButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepButtons.js","names":["StepButtons: React.FC<StepButtonsProps>"],"sources":["../src/components/StepButtons/StepButtons.tsx","../src/components/StepButtons/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { ButtonProps } from '../Button';\n\nimport styles from './styles.module.scss';\n\nexport interface StepButtonsProps {\n  /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n  backButton?: React.ReactElement<ButtonProps>;\n  /** Knapp for å gå videre. Vises med \"fill\" variant. */\n  forwardButton?: React.ReactElement<ButtonProps>;\n  /** Ekstra knapper. Valgfritt utseende. */\n  additionalButtons?: React.ReactElement<ButtonProps>[];\n  /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n  cancelButton?: React.ReactElement<ButtonProps>;\n  /** Knappene vil vises sticky nederst på skjermen. Default: false  */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const StepButtons: React.FC<StepButtonsProps> = props => {\n  const { backButton, forwardButton, additionalButtons, cancelButton, sticky = false, testId } = props;\n\n  const navigationClasses = classNames(styles.stepbuttons, sticky && styles['stepbuttons--has-sticky-buttons']);\n\n  if (backButton || forwardButton || additionalButtons || cancelButton) {\n    return (\n      <div className={navigationClasses} data-testid={testId} data-analyticsid={AnalyticsId.StepButtons}>\n        {(backButton || forwardButton) && (\n          <div className={styles.stepbuttons__buttons}>\n            {backButton &&\n              React.cloneElement(backButton, {\n                variant: 'outline',\n                wrapperClassName: classNames(styles['stepbuttons__button--back']),\n              })}\n            {forwardButton &&\n              React.cloneElement(forwardButton, {\n                variant: 'fill',\n                wrapperClassName: classNames(styles['stepbuttons__button--forward']),\n              })}\n          </div>\n        )}\n        {additionalButtons && (\n          <div className={classNames(styles.stepbuttons__buttons, styles['stepbuttons__buttons--additional'])}>{additionalButtons}</div>\n        )}\n        {cancelButton && (\n          <div className={styles.stepbuttons__buttons}>\n            {React.cloneElement(cancelButton, {\n              variant: 'borderless',\n            })}\n          </div>\n        )}\n      </div>\n    );\n  }\n  return null;\n};\n\nexport default StepButtons;\n","import StepButtons from './StepButtons';\nexport * from './StepButtons';\nexport default StepButtons;\n"],"mappings":";;;;;AAwBA,MAAaA,eAA0C,UAAS;CAC9D,MAAM,EAAE,YAAY,eAAe,mBAAmB,cAAc,SAAS,OAAO,WAAW;CAE/F,MAAM,oBAAoB,WAAW,OAAO,aAAa,UAAU,OAAO,mCAAmC;AAE7G,KAAI,cAAc,iBAAiB,qBAAqB,aACtD,QACE,qBAAC,OAAA;EAAI,WAAW;EAAmB,eAAa;EAAQ,oBAAkB,YAAY;;IAClF,cAAc,kBACd,qBAAC,OAAA;IAAI,WAAW,OAAO;eACpB,cACC,MAAM,aAAa,YAAY;KAC7B,SAAS;KACT,kBAAkB,WAAW,OAAO,6BAA6B;KAClE,CAAC,EACH,iBACC,MAAM,aAAa,eAAe;KAChC,SAAS;KACT,kBAAkB,WAAW,OAAO,gCAAgC;KACrE,CAAC,CAAA;KACA;GAEP,qBACC,oBAAC,OAAA;IAAI,WAAW,WAAW,OAAO,sBAAsB,OAAO,oCAAoC;cAAG;KAAwB;GAE/H,gBACC,oBAAC,OAAA;IAAI,WAAW,OAAO;cACpB,MAAM,aAAa,cAAc,EAChC,SAAS,cACV,CAAC;KACE;;GAEJ;AAGV,QAAO;;ACzDT,IAAA,wBD4De"}