@helsenorge/designsystem-react 5.12.0 → 6.0.0-beta.14

package/components/Slider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\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    setValue((max - min) / 2 + min);\n  }, [min, max]);\n\n  return [value, setSafeValue];\n};\n\nexport type SliderStep = {\n  label?: number | string;\n  emojiUniCode?: string;\n};\n\ninterface SliderProps {\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  /** Function to be called when the value state has changed. */\n  onChange?: (value: number) => void;\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}\n\nexport const Slider: React.FC<SliderProps> = ({\n  title,\n  ariaLabel,\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  testId,\n}) => {\n  const [isMoving, setIsMoving] = useState(false);\n  const [value, setValue] = useSafeNumberValue((maxValue - minValue) / 2 + minValue, minValue, maxValue);\n\n  const titleId = useUuid();\n  const labelLeftId = useUuid();\n  const labelRightId = useUuid();\n  const trackRef = useRef<HTMLDivElement>(null);\n  const markerRef = useRef<HTMLDivElement>(null);\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const largeStep = maxValue / 10;\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return () => {\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        setValue(newValue);\n      }\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n\n    return () => {\n      document.removeEventListener('pointermove', handlePointerMove);\n    };\n  }, [isMoving]);\n\n  useEffect(() => {\n    if (!disabled && onChange) {\n      onChange(value);\n    }\n  }, [value]);\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        setValue(value - step);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValue(value - largeStep);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValue(value + step);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValue(value + largeStep);\n        flag = true;\n        break;\n      case 'Home':\n        setValue(minValue);\n        flag = true;\n        break;\n      case 'End':\n        setValue(maxValue);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\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    setValue(newValue);\n    markerRef.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    setIsMoving(true);\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    markerRef.current?.focus();\n  };\n\n  const markerXPos = maxValue !== minValue ? (trackWidth / (maxValue - minValue)) * (value - minValue) : 0;\n\n  const getAriaValueText = (): string | undefined => {\n    const stepIndex = steps ? Math.round((value - 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 getXPostionStyling = (index: number, stepsLength: number): { left: string } => {\n    return { left: `${(index / (stepsLength - 1)) * 100}%` };\n  };\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={getXPostionStyling(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={getXPostionStyling(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={getXPostionStyling(index, steps.length)}\n              >\n                {step.label}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\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        {/* Komponenten er tilgjengelig for mus/keyboard gjennom bruk av slideren */}\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            role={disabled ? undefined : 'slider'}\n            ref={markerRef}\n            className={classNames(styles.slider__marker, disabled && styles['slider__marker--disabled'])}\n            style={{\n              left: `${markerXPos}px`,\n            }}\n            onKeyDown={handleKeyDown}\n            aria-valuenow={value}\n            aria-valuetext={getAriaValueText()}\n            aria-valuemin={minValue}\n            aria-valuemax={maxValue}\n            tabIndex={disabled ? undefined : 0}\n            aria-disabled={disabled}\n            {...ariaLabelAttributes}\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  );\n};\n\nexport default Slider;\n"],"names":["useSafeNumberValue","initial","min","max","value","setValue","useState","setSafeValue","newValue","useEffect","Slider","title","ariaLabel","labelLeft","labelRight","disabled","onChange","steps","step","minValue","maxValue","testId","isMoving","setIsMoving","titleId","useUuid","labelLeftId","labelRightId","trackRef","useRef","markerRef","trackWidth","useSize","largeStep","handlePointerUp","getValueBasedOnMarkerPosition","markerPosition","trackPosition","_a","normalizedPosition","valueRange","handlePointerMove","handleKeyDown","e","flag","handleTrackClick","handlePointerDown","markerXPos","getAriaValueText","stepIndex","emojiCode","label","ariaLabelAttributes","getAriaLabelAttributes","getXPostionStyling","index","stepsLength","renderEmojies","React","styles","renderSteps","_step","renderStepLabels","AnalyticsId","Title","classNames","Slider$1"],"mappings":"sfAYA,MAAMA,EAAqB,CAACC,EAAiBC,EAAaC,IAAmD,CAC3G,KAAM,CAACC,EAAOC,CAAQ,EAAIC,EAASL,CAAO,EAEpCM,EAAgBC,GAA2B,CAC3CA,EAAWL,EACbE,EAASF,CAAG,EACHK,EAAWN,EACpBG,EAASH,CAAG,EAEZG,EAASG,CAAQ,CACnB,EAGF,OAAAC,EAAU,IAAM,CACJJ,GAAAF,EAAMD,GAAO,EAAIA,CAAG,CAAA,EAC7B,CAACA,EAAKC,CAAG,CAAC,EAEN,CAACC,EAAOG,CAAY,CAC7B,EAgCaG,EAAgC,CAAC,CAC5C,MAAAC,EACA,UAAAC,EACA,UAAAC,EACA,WAAAC,EACA,SAAAC,EAAW,GACX,SAAAC,EACA,MAAAC,EACA,KAAAC,EAAO,EACP,SAAAC,EAAW,EACX,SAAAC,EAAWH,EAAQA,EAAM,OAAS,EAAI,IACtC,OAAAI,CACF,IAAM,CACJ,KAAM,CAACC,EAAUC,CAAW,EAAIjB,EAAS,EAAK,EACxC,CAACF,EAAOC,CAAQ,EAAIL,GAAoBoB,EAAWD,GAAY,EAAIA,EAAUA,EAAUC,CAAQ,EAE/FI,EAAUC,IACVC,EAAcD,IACdE,EAAeF,IACfG,EAAWC,EAAuB,IAAI,EACtCC,EAAYD,EAAuB,IAAI,EACvC,CAAE,MAAOE,GAAeC,EAAQJ,CAAQ,GAAK,CAAE,MAAO,GACtDK,EAAYb,EAAW,GAE7BX,EAAU,IAAM,CACd,MAAMyB,EAAkB,IAAY,CAClCX,EAAY,EAAK,CAAA,EAGV,gBAAA,iBAAiB,YAAaW,CAAe,EAE/C,IAAM,CACF,SAAA,oBAAoB,YAAaA,CAAe,CAAA,CAE7D,EAAG,CAAE,CAAA,EAEC,MAAAC,EAAiCC,GAAmC,OACxE,MAAMC,IAAgBC,EAAAV,EAAS,UAAT,YAAAU,EAAkB,wBAAwB,IAAK,EAG/DC,GAAsBH,EAAiBC,GAAiBN,EACxDS,EAAapB,EAAWD,EAE1Bf,IAAAA,EAAQmC,EAAqBC,EAAarB,EAG9Cf,OAAAA,EADkB,KAAK,MAAMA,EAAQc,CAAI,EACrBA,EACpBd,EAAQ,KAAK,IAAIe,EAAU,KAAK,IAAIC,EAAUhB,CAAK,CAAC,EAE7CA,CAAA,EAGTK,EAAU,IAAM,CACR,MAAAgC,EAAqB,GAA0B,CAC/C,GAAA,CAAC1B,GAAYO,EAAU,CACnB,MAAAd,EAAW2B,EAA8B,EAAE,OAAO,EACxD9B,EAASG,CAAQ,CACnB,CAAA,EAGO,gBAAA,iBAAiB,cAAeiC,CAAiB,EAEnD,IAAM,CACF,SAAA,oBAAoB,cAAeA,CAAiB,CAAA,CAC/D,EACC,CAACnB,CAAQ,CAAC,EAEbb,EAAU,IAAM,CACV,CAACM,GAAYC,GACfA,EAASZ,CAAK,CAChB,EACC,CAACA,CAAK,CAAC,EAEV,MAAMsC,EAAiEC,GAAA,CACjE,GAAA5B,EAAU,OAEd,IAAI6B,EAAO,GAEX,OAAQD,EAAE,IAAK,CACb,IAAK,YACL,IAAK,YACHtC,EAASD,EAAQc,CAAI,EACd0B,EAAA,GACP,MACF,IAAK,WACHvC,EAASD,EAAQ6B,CAAS,EACnBW,EAAA,GACP,MACF,IAAK,aACL,IAAK,UACHvC,EAASD,EAAQc,CAAI,EACd0B,EAAA,GACP,MACF,IAAK,SACHvC,EAASD,EAAQ6B,CAAS,EACnBW,EAAA,GACP,MACF,IAAK,OACHvC,EAASc,CAAQ,EACVyB,EAAA,GACP,MACF,IAAK,MACHvC,EAASe,CAAQ,EACVwB,EAAA,GACP,KAGJ,CAEIA,IACFD,EAAE,eAAe,EACjBA,EAAE,gBAAgB,EACpB,EAGIE,EAAiEF,GAAA,OACjE,GAAA5B,EAAU,OAER,MAAAP,EAAW2B,EAA8BQ,EAAE,OAAO,EACxDtC,EAASG,CAAQ,GACjB8B,EAAAR,EAAU,UAAV,MAAAQ,EAAmB,OAAM,EAGrBQ,EAAoEH,GAAA,OACpE5B,IAEJQ,EAAY,EAAI,EAEhBoB,EAAE,eAAe,EACjBA,EAAE,gBAAgB,GAElBL,EAAAR,EAAU,UAAV,MAAAQ,EAAmB,QAAM,EAGrBS,EAAa3B,IAAaD,EAAYY,GAAcX,EAAWD,IAAcf,EAAQe,GAAY,EAEjG6B,EAAmB,IAA0B,CACjD,MAAMC,EAAYhC,EAAQ,KAAK,OAAOb,EAAQe,GAAYD,CAAI,EAAI,KAElE,GAAID,GAASgC,IAAc,MAAQA,GAAa,GAAKA,EAAYhC,EAAM,OAAQ,CACvEC,MAAAA,EAAOD,EAAMgC,CAAS,EACtBC,EAAYhC,EAAK,aACjBiC,EAAQ,OAAOjC,EAAK,MAAU,IAAcA,EAAK,MAAM,WAAa,OAE1E,OAAOgC,GAAaC,EAAQ,GAAGD,CAAS,IAAIC,CAAK,GAAKD,GAAaC,CACrE,CAEO,EAkBHC,EAAsBC,EAAuB,CACjD,MAAOzC,EACP,IAjByB,IAA0B,CAC/C,GAAAD,GAASE,GAAaC,EACxB,MAAO,CAACU,EAASE,EAAaC,CAAY,EAAE,KAAK,GAAG,EAEtD,GAAIhB,GAASE,EACX,MAAO,CAACW,EAASE,CAAW,EAAE,KAAK,GAAG,EAExC,GAAIf,GAASG,EACX,MAAO,CAACU,EAASG,CAAY,EAAE,KAAK,GAAG,EAEzC,GAAIhB,EACK,OAAAa,CACT,GAKuB,EACvB,OAAQ,OAAA,CACT,EAEK8B,EAAqB,CAACC,EAAeC,KAClC,CAAE,KAAM,GAAID,GAASC,EAAc,GAAM,GAAG,MAG/CC,EAAgB,IAElBC,EAAA,cAAC,MAAI,CAAA,UAAWC,EAAO,yBAAyB,GAC7C1C,GAAA,YAAAA,EAAO,IAAI,CAACC,EAAMqC,IAEfrC,EAAK,cACHwC,EAAA,cAAC,MAAA,CACC,cAAa,GACb,IAAK,QAAUH,EACf,UAAWI,EAAO,cAClB,MAAOL,EAAmBC,EAAOtC,EAAM,MAAM,CAAA,EAE5CC,EAAK,YAAA,EAKhB,EAIE0C,EAAc,IACX3C,GAAA,YAAAA,EAAO,IAAI,CAAC4C,EAAON,IAChBG,EAAA,cAAA,MAAA,CAAI,IAAK,OAASH,EAAO,UAAWI,EAAO,oBAAwB,MAAOL,EAAmBC,EAAOtC,EAAM,MAAM,CAAG,CAAA,GAIzH6C,EAAmB,IAErBJ,EAAA,cAAC,MAAI,CAAA,UAAWC,EAAO,yBAAyB,GAC7C1C,GAAA,YAAAA,EAAO,IAAI,CAACC,EAAMqC,IAEf,OAAOrC,EAAK,MAAU,KACpBwC,EAAA,cAAC,MAAA,CACC,cAAa,GACb,IAAK,QAAUH,EACf,UAAWI,EAAO,cAClB,MAAOL,EAAmBC,EAAOtC,EAAM,MAAM,CAAA,EAE5CC,EAAK,KAAA,EAKhB,EAIJ,OACGwC,EAAA,cAAA,MAAA,CAAI,UAAWC,EAAO,OAAQ,cAAatC,EAAQ,mBAAkB0C,EAAY,QAC/EpD,GACC+C,EAAA,cAACM,EAAM,CAAA,UAAWL,EAAO,cAAkB,WAAY,KAAM,OAAQ,EAAG,WAAY,SAAU,GAAInC,CAC/F,EAAAb,CACH,EAEF+C,EAAA,cAAC,OAAI,UAAWC,EAAO,2BAA2B,GAC/CF,IAGDC,EAAA,cAAC,MAAA,CACC,IAAK9B,EACL,UAAWqC,EAAWN,EAAO,uBAAuB,EAAG5C,GAAY4C,EAAO,iCAAiC,CAAC,EAC5G,QAASd,EACT,cAAeC,CAAA,EAEdY,EAAA,cAAA,MAAA,CAAI,UAAWO,EAAWN,EAAO,cAAe5C,GAAY4C,EAAO,yBAAyB,CAAC,CAAI,EAAAC,EAAA,CAAc,EAChHF,EAAA,cAAC,MAAA,CACC,KAAM3C,EAAW,OAAY,SAC7B,IAAKe,EACL,UAAWmC,EAAWN,EAAO,eAAgB5C,GAAY4C,EAAO,0BAA0B,CAAC,EAC3F,MAAO,CACL,KAAM,GAAGZ,CAAU,IACrB,EACA,UAAWL,EACX,gBAAetC,EACf,iBAAgB4C,EAAiB,EACjC,gBAAe7B,EACf,gBAAeC,EACf,SAAUL,EAAW,OAAY,EACjC,gBAAeA,EACd,GAAGqC,CAAA,CACN,CACF,EACCU,GACH,GACEjD,GAAaC,IACb4C,EAAA,cAAC,OAAK,CAAA,UAAWC,EAAO,eAAA,kBACrB,OAAK,CAAA,GAAIjC,CAAc,EAAAb,CAAU,EAClC6C,EAAA,cAAC,QAAK,GAAI/B,CAAA,EAAeb,CAAW,CACtC,CAEJ,CAEJ,EAEAoD,GAAexD"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/components/Spacer/Spacer.js

@@ -0,0 +1,30 @@
+import e from "react";
+import x from "classnames";
+import { AnalyticsId as o } from "../../constants.js";
+import s from "./styles.module.scss";
+const m = e.forwardRef(function(r, c) {
+  const { size: a = "s", className: p, testId: t } = r, l = x(
+    s.spacer,
+    {
+      [s["spacer--4xs"]]: a === "4xs",
+      [s["spacer--3xs"]]: a === "3xs",
+      [s["spacer--2xs"]]: a === "2xs",
+      [s["spacer--xs"]]: a === "xs",
+      [s["spacer--s"]]: a === "s",
+      [s["spacer--m"]]: a === "m",
+      [s["spacer--l"]]: a === "l",
+      [s["spacer--xl"]]: a === "xl",
+      [s["spacer--2xl"]]: a === "2xl",
+      [s["spacer--3xl"]]: a === "3xl",
+      [s["spacer--4xl"]]: a === "4xl",
+      [s["spacer--5xl"]]: a === "5xl",
+      [s["spacer--6xl"]]: a === "6xl"
+    },
+    p
+  );
+  return /* @__PURE__ */ e.createElement("span", { className: l, ref: c, "data-testid": t, "data-analyticsid": o.Spacer });
+}), u = m;
+export {
+  u as default
+};
+//# sourceMappingURL=Spacer.js.map

package/components/Spacer/Spacer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacer.js","sources":["../../../src/components/Spacer/Spacer.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { SpacerSizes } from './../../theme/spacers';\nimport { AnalyticsId } from '../../constants';\n\nimport spacerStyles from './styles.module.scss';\n\ninterface 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"],"names":["Spacer","React","props","ref","size","className","testId","spacerClasses","classNames","spacerStyles","AnalyticsId","Spacer$1"],"mappings":";;;;AAkBA,MAAMA,IAASC,EAAM,WAAW,SAA4BC,GAAoBC,GAAsC;AACpH,QAAM,EAAE,MAAAC,IAAO,KAAK,WAAAC,GAAW,QAAAC,MAAWJ,GACpCK,IAAgBC;AAAA,IACpBC,EAAa;AAAA,IACb;AAAA,MACE,CAACA,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,YAAY,CAAC,GAAGL,MAAS;AAAA,MACvC,CAACK,EAAa,WAAW,CAAC,GAAGL,MAAS;AAAA,MACtC,CAACK,EAAa,WAAW,CAAC,GAAGL,MAAS;AAAA,MACtC,CAACK,EAAa,WAAW,CAAC,GAAGL,MAAS;AAAA,MACtC,CAACK,EAAa,YAAY,CAAC,GAAGL,MAAS;AAAA,MACvC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,IAC1C;AAAA,IACAC;AAAA,EAAA;AAGK,SAAAJ,gBAAAA,EAAA,cAAC,UAAK,WAAWM,GAAe,KAAAJ,GAAU,eAAaG,GAAQ,oBAAkBI,EAAY,OAAQ,CAAA;AAC9G,CAAC,GAEDC,IAAeX;"}

package/components/Spacer/index.js

@@ -1,2 +1,5 @@
-import{S as o}from"../../Spacer.js";import"react";import"classnames";import"../../constants.js";import"./styles.module.scss";export{o as default};
+import a from "./Spacer.js";
+export {
+  a as default
+};
 //# sourceMappingURL=index.js.map

package/components/Spacer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/StatusDot/StatusDot.js

@@ -0,0 +1,27 @@
+import s from "react";
+import n from "classnames";
+import "../../theme/grid.js";
+import "../../hooks/useBreakpoint.js";
+import { AnalyticsId as h, IconSize as r } from "../../constants.js";
+import { getColor as I } from "../../theme/currys/color.js";
+import { Icon as c } from "../Icon/Icon.js";
+import E from "../Icons/Attachment.js";
+import X from "../Icons/Group.js";
+import v from "../Icons/NoAccess.js";
+import N from "../Icons/Undo.js";
+import t from "./styles.module.scss";
+var w = /* @__PURE__ */ ((e) => (e.onwhite = "onwhite", e.ondark = "ondark", e))(w || {}), z = /* @__PURE__ */ ((e) => (e.info = "info", e.warning = "warning", e.alert = "alert", e.cancelled = "cancelled", e.active = "active", e.transparent = "transparent", e.recurring = "recurring", e.group = "group", e.noaccess = "noaccess", e.attachment = "attachment", e))(z || {});
+const C = ({ variant: e }) => e === "recurring" ? /* @__PURE__ */ s.createElement(c, { size: r.XXSmall, svgIcon: N }) : e === "group" ? /* @__PURE__ */ s.createElement(c, { size: r.XXSmall, svgIcon: X }) : e === "noaccess" ? /* @__PURE__ */ s.createElement(c, { size: r.XXSmall, svgIcon: v, color: I("cherry", 600) }) : e === "attachment" ? /* @__PURE__ */ s.createElement(c, { size: r.XXSmall, svgIcon: E }) : null, b = (e) => {
+  const { id: l, mode: m = "onwhite", variant: o = "info", text: i, className: d, testId: p } = e, a = o === "recurring" || o === "group" || o === "noaccess" || o === "attachment", u = o === "cancelled", f = n(t.statusdot, u && t["statusdot--cancelled"], d), g = n(t.statusdot__dot, a ? t["statusdot__dot--icon"] : t[`statusdot__dot--${o}`]), _ = n(
+    t.statusdot__label,
+    a && t["statusdot__label--icon"],
+    m === "ondark" && t["statusdot__label--on-dark"]
+  );
+  return /* @__PURE__ */ s.createElement("span", { id: l, className: f, "data-testid": p, "data-analyticsid": h.StatusDot }, /* @__PURE__ */ s.createElement("span", { className: g }, /* @__PURE__ */ s.createElement(C, { variant: o })), /* @__PURE__ */ s.createElement("span", { className: _ }, i));
+}, H = b;
+export {
+  w as StatusDotModes,
+  z as StatusDotVariant,
+  H as default
+};
+//# sourceMappingURL=StatusDot.js.map

package/{StatusDot.js.map → components/StatusDot/StatusDot.js.map}

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.js","sources":["../src/components/StatusDot/StatusDot.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport Attachment from '../Icons/Attachment';\nimport Group from '../Icons/Group';\nimport { Icon } from '../Icons/Icon';\nimport NoAccess from '../Icons/NoAccess';\nimport Undo from '../Icons/Undo';\n\nimport styles from './styles.module.scss';\n\nexport enum StatusDotModes {\n  onwhite = 'onwhite',\n  ondark = 'ondark',\n}\n\nexport enum StatusDotVariant {\n  info = 'info',\n  warning = 'warning',\n  alert = 'alert',\n  cancelled = 'cancelled',\n  active = 'active',\n  transparent = 'transparent',\n  recurring = 'recurring',\n  group = 'group',\n  noaccess = 'noaccess',\n  attachment = 'attachment',\n}\n\nexport interface StatusDotIconProps {\n  /** The variant defines style formatting and what icon to use */\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ variant }) => {\n  if (variant === StatusDotVariant.recurring) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Undo} />;\n  } else if (variant === StatusDotVariant.group) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Group} />;\n  } else if (variant === StatusDotVariant.noaccess) {\n    return <Icon size={IconSize.XXSmall} svgIcon={NoAccess} color={getColor('cherry', 600)} />;\n  } else if (variant === StatusDotVariant.attachment) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Attachment} />;\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  mode?: keyof typeof StatusDotModes;\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\nconst StatusDot: React.FC<StatusDotProps> = props => {\n  const { id, mode = StatusDotModes.onwhite, variant = StatusDotVariant.info, text, className, testId } = props;\n\n  const hasIcon =\n    variant === StatusDotVariant.recurring ||\n    variant === StatusDotVariant.group ||\n    variant === StatusDotVariant.noaccess ||\n    variant === StatusDotVariant.attachment;\n\n  const isCancelled = variant === StatusDotVariant.cancelled;\n\n  const statusDotClasses = classNames(styles['statusdot'], isCancelled && styles['statusdot--cancelled'], className);\n  const dotClasses = classNames(styles['statusdot__dot'], hasIcon ? styles[`statusdot__dot--icon`] : styles[`statusdot__dot--${variant}`]);\n  const labelClasses = classNames(\n    styles['statusdot__label'],\n    hasIcon && styles['statusdot__label--icon'],\n    mode === StatusDotModes.ondark && styles['statusdot__label--on-dark']\n  );\n\n  return (\n    <span id={id} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={dotClasses}>\n        <StatusDotIcon variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </span>\n  );\n};\n\nexport default StatusDot;\n"],"names":["StatusDotModes","StatusDotVariant","StatusDotIcon","variant","Icon","IconSize","Undo","Group","React","NoAccess","getColor","Attachment","StatusDot","props","id","mode","text","className","testId","hasIcon","isCancelled","statusDotClasses","classNames","styles","dotClasses","labelClasses","AnalyticsId","StatusDot$1"],"mappings":"ofAeY,IAAAA,GAAAA,IACVA,EAAA,QAAU,UACVA,EAAA,OAAS,SAFCA,IAAAA,GAAA,CAAA,CAAA,EAKAC,GAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,QAAU,UACVA,EAAA,MAAQ,QACRA,EAAA,UAAY,YACZA,EAAA,OAAS,SACTA,EAAA,YAAc,cACdA,EAAA,UAAY,YACZA,EAAA,MAAQ,QACRA,EAAA,SAAW,WACXA,EAAA,WAAa,aAVHA,IAAAA,GAAA,CAAA,CAAA,EAkBZ,MAAMC,EAA8C,CAAC,CAAE,QAAAC,KACjDA,IAAY,4BACNC,EAAK,CAAA,KAAMC,EAAS,QAAS,QAASC,CAAM,CAAA,EAC3CH,IAAY,wBACbC,EAAK,CAAA,KAAMC,EAAS,QAAS,QAASE,CAAO,CAAA,EAC5CJ,IAAY,WACdK,EAAA,cAACJ,EAAK,CAAA,KAAMC,EAAS,QAAS,QAASI,EAAU,MAAOC,EAAS,SAAU,GAAG,CAAG,CAAA,EAC/EP,IAAY,6BACbC,EAAK,CAAA,KAAMC,EAAS,QAAS,QAASM,CAAY,CAAA,EAGrD,KAkBHC,EAA+CC,GAAA,CAC7C,KAAA,CAAE,GAAAC,EAAI,KAAAC,EAAO,UAAwB,QAAAZ,EAAU,OAAuB,KAAAa,EAAM,UAAAC,EAAW,OAAAC,CAAW,EAAAL,EAElGM,EACJhB,IAAY,aACZA,IAAY,SACZA,IAAY,YACZA,IAAY,aAERiB,EAAcjB,IAAY,YAE1BkB,EAAmBC,EAAWC,EAAO,UAAcH,GAAeG,EAAO,sBAAsB,EAAGN,CAAS,EAC3GO,EAAaF,EAAWC,EAAO,eAAmBJ,EAAUI,EAAO,sBAAsB,EAAIA,EAAO,mBAAmBpB,CAAO,EAAE,CAAC,EACjIsB,EAAeH,EACnBC,EAAO,iBACPJ,GAAWI,EAAO,wBAAwB,EAC1CR,IAAS,UAAyBQ,EAAO,2BAA2B,CAAA,EAIpE,OAAAf,EAAA,cAAC,OAAK,CAAA,GAAAM,EAAQ,UAAWO,EAAkB,cAAaH,EAAQ,mBAAkBQ,EAAY,SAAA,EAC3FlB,EAAA,cAAA,OAAA,CAAK,UAAWgB,CACf,EAAAhB,EAAA,cAACN,EAAc,CAAA,QAAAC,CAAA,CAAkB,CACnC,kBACC,OAAK,CAAA,UAAWsB,CAAe,EAAAT,CAAK,CACvC,CAEJ,EAEAW,EAAef"}
+{"version":3,"file":"StatusDot.js","sources":["../../../src/components/StatusDot/StatusDot.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport { Icon } from '../Icon';\nimport Attachment from '../Icons/Attachment';\nimport Group from '../Icons/Group';\nimport NoAccess from '../Icons/NoAccess';\nimport Undo from '../Icons/Undo';\n\nimport styles from './styles.module.scss';\n\nexport enum StatusDotModes {\n  onwhite = 'onwhite',\n  ondark = 'ondark',\n}\n\nexport enum StatusDotVariant {\n  info = 'info',\n  warning = 'warning',\n  alert = 'alert',\n  cancelled = 'cancelled',\n  active = 'active',\n  transparent = 'transparent',\n  recurring = 'recurring',\n  group = 'group',\n  noaccess = 'noaccess',\n  attachment = 'attachment',\n}\n\nexport interface StatusDotIconProps {\n  /** The variant defines style formatting and what icon to use */\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ variant }) => {\n  if (variant === StatusDotVariant.recurring) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Undo} />;\n  } else if (variant === StatusDotVariant.group) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Group} />;\n  } else if (variant === StatusDotVariant.noaccess) {\n    return <Icon size={IconSize.XXSmall} svgIcon={NoAccess} color={getColor('cherry', 600)} />;\n  } else if (variant === StatusDotVariant.attachment) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Attachment} />;\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  mode?: keyof typeof StatusDotModes;\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\nconst StatusDot: React.FC<StatusDotProps> = props => {\n  const { id, mode = StatusDotModes.onwhite, variant = StatusDotVariant.info, text, className, testId } = props;\n\n  const hasIcon =\n    variant === StatusDotVariant.recurring ||\n    variant === StatusDotVariant.group ||\n    variant === StatusDotVariant.noaccess ||\n    variant === StatusDotVariant.attachment;\n\n  const isCancelled = variant === StatusDotVariant.cancelled;\n\n  const statusDotClasses = classNames(styles['statusdot'], isCancelled && styles['statusdot--cancelled'], className);\n  const dotClasses = classNames(styles['statusdot__dot'], hasIcon ? styles[`statusdot__dot--icon`] : styles[`statusdot__dot--${variant}`]);\n  const labelClasses = classNames(\n    styles['statusdot__label'],\n    hasIcon && styles['statusdot__label--icon'],\n    mode === StatusDotModes.ondark && styles['statusdot__label--on-dark']\n  );\n\n  return (\n    <span id={id} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={dotClasses}>\n        <StatusDotIcon variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </span>\n  );\n};\n\nexport default StatusDot;\n"],"names":["StatusDotModes","StatusDotVariant","StatusDotIcon","variant","Icon","IconSize","Undo","Group","React","NoAccess","getColor","Attachment","StatusDot","props","id","mode","text","className","testId","hasIcon","isCancelled","statusDotClasses","classNames","styles","dotClasses","labelClasses","AnalyticsId","StatusDot$1"],"mappings":";;;;;;;;;;;;AAeY,IAAAA,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,SAAS,UAFCA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,UAAU,WACVA,EAAA,QAAQ,SACRA,EAAA,YAAY,aACZA,EAAA,SAAS,UACTA,EAAA,cAAc,eACdA,EAAA,YAAY,aACZA,EAAA,QAAQ,SACRA,EAAA,WAAW,YACXA,EAAA,aAAa,cAVHA,IAAAA,KAAA,CAAA,CAAA;AAkBZ,MAAMC,IAA8C,CAAC,EAAE,SAAAC,QACjDA,MAAY,8CACNC,GAAK,EAAA,MAAMC,EAAS,SAAS,SAASC,EAAM,CAAA,IAC3CH,MAAY,0CACbC,GAAK,EAAA,MAAMC,EAAS,SAAS,SAASE,EAAO,CAAA,IAC5CJ,MAAY,aACdK,gBAAAA,EAAA,cAACJ,GAAK,EAAA,MAAMC,EAAS,SAAS,SAASI,GAAU,OAAOC,EAAS,UAAU,GAAG,EAAG,CAAA,IAC/EP,MAAY,+CACbC,GAAK,EAAA,MAAMC,EAAS,SAAS,SAASM,EAAY,CAAA,IAGrD,MAkBHC,IAAsC,CAASC,MAAA;AAC7C,QAAA,EAAE,IAAAC,GAAI,MAAAC,IAAO,WAAwB,SAAAZ,IAAU,QAAuB,MAAAa,GAAM,WAAAC,GAAW,QAAAC,EAAW,IAAAL,GAElGM,IACJhB,MAAY,eACZA,MAAY,WACZA,MAAY,cACZA,MAAY,cAERiB,IAAcjB,MAAY,aAE1BkB,IAAmBC,EAAWC,EAAO,WAAcH,KAAeG,EAAO,sBAAsB,GAAGN,CAAS,GAC3GO,IAAaF,EAAWC,EAAO,gBAAmBJ,IAAUI,EAAO,sBAAsB,IAAIA,EAAO,mBAAmBpB,CAAO,EAAE,CAAC,GACjIsB,IAAeH;AAAA,IACnBC,EAAO;AAAA,IACPJ,KAAWI,EAAO,wBAAwB;AAAA,IAC1CR,MAAS,YAAyBQ,EAAO,2BAA2B;AAAA,EAAA;AAIpE,SAAAf,gBAAAA,EAAA,cAAC,QAAK,EAAA,IAAAM,GAAQ,WAAWO,GAAkB,eAAaH,GAAQ,oBAAkBQ,EAAY,UAAA,GAC3FlB,gBAAAA,EAAA,cAAA,QAAA,EAAK,WAAWgB,EACf,GAAAhB,gBAAAA,EAAA,cAACN,GAAc,EAAA,SAAAC,EAAA,CAAkB,CACnC,mCACC,QAAK,EAAA,WAAWsB,EAAe,GAAAT,CAAK,CACvC;AAEJ,GAEAW,IAAef;"}

package/components/StatusDot/index.js

@@ -1,2 +1,8 @@
-import{S as o}from"../../StatusDot.js";import{a as h,b as j}from"../../StatusDot.js";import"react";import"classnames";import"../../theme/grid.js";import"../../hooks/useBreakpoint.js";import"../../constants.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Attachment.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../Icons/Undo.js";import"./styles.module.scss";export{h as StatusDotModes,j as StatusDotVariant,o as default};
+import o from "./StatusDot.js";
+import { StatusDotModes as s, StatusDotVariant as e } from "./StatusDot.js";
+export {
+  s as StatusDotModes,
+  e as StatusDotVariant,
+  o as default
+};
 //# sourceMappingURL=index.js.map

package/components/StatusDot/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/components/StatusDot/styles.module.scss

@@ -6,6 +6,7 @@
 @import '../../scss/screen-reader';
 
 $status-dot-size: 0.937rem;
+
 .statusdot {
   position: relative;
   display: inline-flex;

package/components/Step/Step.js

@@ -0,0 +1,30 @@
+import e from "react";
+import { AnalyticsId as n } from "../../constants.js";
+import d from "../StepButtons/StepButtons.js";
+import i from "./styles.module.scss";
+const f = ({
+  stepper: t,
+  children: c,
+  backButton: a,
+  forwardButton: s,
+  additionalButtons: m,
+  cancelButton: r,
+  stickyButtons: p = !1,
+  testId: l
+}) => {
+  const o = a || s || m || r;
+  return /* @__PURE__ */ e.createElement("div", { "data-testid": l, "data-analyticsid": n.Step }, t && /* @__PURE__ */ e.createElement("div", { className: i.step__stepper }, t), /* @__PURE__ */ e.createElement("div", { className: i.step__content }, c), o && /* @__PURE__ */ e.createElement(
+    d,
+    {
+      backButton: a,
+      forwardButton: s,
+      additionalButtons: m,
+      cancelButton: r,
+      sticky: p
+    }
+  ));
+}, S = f;
+export {
+  S as default
+};
+//# sourceMappingURL=Step.js.map

package/components/Step/Step.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.js","sources":["../../../src/components/Step/Step.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { ButtonProps } from '../Button';\nimport StepButtons from '../StepButtons';\nimport { StepperProps } from '../Stepper';\n\nimport styles from './styles.module.scss';\n\nexport interface StepProps {\n  /** Stepper viser fremdriften */\n  stepper?: React.ReactElement<StepperProps>;\n  /** Innhold i steget */\n  children: React.ReactNode;\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 dersom innholdet i Step tar mer plass enn vinduet. Default: false  */\n  stickyButtons?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Step: React.FC<StepProps> = ({\n  stepper,\n  children,\n  backButton,\n  forwardButton,\n  additionalButtons,\n  cancelButton,\n  stickyButtons = false,\n  testId,\n}) => {\n  const hasNavigation = backButton || forwardButton || additionalButtons || cancelButton;\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.Step}>\n      {stepper && <div className={styles.step__stepper}>{stepper}</div>}\n      <div className={styles.step__content}>{children}</div>\n      {hasNavigation && (\n        <StepButtons\n          backButton={backButton}\n          forwardButton={forwardButton}\n          additionalButtons={additionalButtons}\n          cancelButton={cancelButton}\n          sticky={stickyButtons}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default Step;\n"],"names":["Step","stepper","children","backButton","forwardButton","additionalButtons","cancelButton","stickyButtons","testId","hasNavigation","React","AnalyticsId","styles","StepButtons","Step$1"],"mappings":";;;;AA8BA,MAAMA,IAA4B,CAAC;AAAA,EACjC,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,QAAAC;AACF,MAAM;AACE,QAAAC,IAAgBN,KAAcC,KAAiBC,KAAqBC;AAGxE,SAAAI,gBAAAA,EAAA,cAAC,SAAI,eAAaF,GAAQ,oBAAkBG,EAAY,KAAA,GACrDV,KAAWS,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAWE,EAAO,cAAgB,GAAAX,CAAQ,GAC1DS,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWE,EAAO,cAAA,GAAgBV,CAAS,GAC/CO,KACCC,gBAAAA,EAAA;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,YAAAV;AAAA,MACA,eAAAC;AAAA,MACA,mBAAAC;AAAA,MACA,cAAAC;AAAA,MACA,QAAQC;AAAA,IAAA;AAAA,EAAA,CAGd;AAEJ,GAEAO,IAAed;"}

package/components/Step/index.js

@@ -1,2 +1,5 @@
-import e from"react";import{AnalyticsId as n}from"../../constants.js";import{S as d}from"../../StepButtons.js";import i from"./styles.module.scss";import"classnames";import"../StepButtons/styles.module.scss";const f=({stepper:t,children:p,backButton:a,forwardButton:s,additionalButtons:m,cancelButton:r,stickyButtons:c=!1,testId:o})=>{const l=a||s||m||r;return e.createElement("div",{"data-testid":o,"data-analyticsid":n.Step},t&&e.createElement("div",{className:i.step__stepper},t),e.createElement("div",{className:i.step__content},p),l&&e.createElement(d,{backButton:a,forwardButton:s,additionalButtons:m,cancelButton:r,sticky:c}))},g=f;export{g as default};
+import e from "./Step.js";
+export {
+  e as default
+};
 //# sourceMappingURL=index.js.map

package/components/Step/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Step/Step.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { ButtonProps } from '../Button';\nimport StepButtons from '../StepButtons';\nimport { StepperProps } from '../Stepper';\n\nimport styles from './styles.module.scss';\n\nexport interface StepProps {\n  /** Stepper viser fremdriften */\n  stepper?: React.ReactElement<StepperProps>;\n  /** Innhold i steget */\n  children: React.ReactNode;\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 dersom innholdet i Step tar mer plass enn vinduet. Default: false  */\n  stickyButtons?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Step: React.FC<StepProps> = ({\n  stepper,\n  children,\n  backButton,\n  forwardButton,\n  additionalButtons,\n  cancelButton,\n  stickyButtons = false,\n  testId,\n}) => {\n  const hasNavigation = backButton || forwardButton || additionalButtons || cancelButton;\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.Step}>\n      {stepper && <div className={styles.step__stepper}>{stepper}</div>}\n      <div className={styles.step__content}>{children}</div>\n      {hasNavigation && (\n        <StepButtons\n          backButton={backButton}\n          forwardButton={forwardButton}\n          additionalButtons={additionalButtons}\n          cancelButton={cancelButton}\n          sticky={stickyButtons}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default Step;\n"],"names":["Step","stepper","children","backButton","forwardButton","additionalButtons","cancelButton","stickyButtons","testId","hasNavigation","React","AnalyticsId","styles","StepButtons","Step$1"],"mappings":"gNA8BA,MAAMA,EAA4B,CAAC,CACjC,QAAAC,EACA,SAAAC,EACA,WAAAC,EACA,cAAAC,EACA,kBAAAC,EACA,aAAAC,EACA,cAAAC,EAAgB,GAChB,OAAAC,CACF,IAAM,CACE,MAAAC,EAAgBN,GAAcC,GAAiBC,GAAqBC,EAGxE,OAAAI,EAAA,cAAC,OAAI,cAAaF,EAAQ,mBAAkBG,EAAY,IAAA,EACrDV,GAAWS,EAAA,cAAC,MAAI,CAAA,UAAWE,EAAO,aAAgB,EAAAX,CAAQ,EAC1DS,EAAA,cAAA,MAAA,CAAI,UAAWE,EAAO,aAAA,EAAgBV,CAAS,EAC/CO,GACCC,EAAA,cAACG,EAAA,CACC,WAAAV,EACA,cAAAC,EACA,kBAAAC,EACA,aAAAC,EACA,OAAQC,CAAA,CAAA,CAGd,CAEJ,EAEAO,EAAed"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/StepButtons/StepButtons.js

@@ -0,0 +1,21 @@
+import s from "react";
+import e from "classnames";
+import { AnalyticsId as m } from "../../constants.js";
+import t from "./styles.module.scss";
+const p = (r) => {
+  const { backButton: n, forwardButton: a, additionalButtons: o, cancelButton: l, sticky: u = !1, testId: i } = r, c = e(t.stepbuttons, u && t["stepbuttons--has-sticky-buttons"]);
+  return n || a || o || l ? /* @__PURE__ */ s.createElement("div", { className: c, "data-testid": i, "data-analyticsid": m.StepButtons }, (n || a) && /* @__PURE__ */ s.createElement("div", { className: e(t.stepbuttons__buttons, t["stepbuttons__buttons--navigation"]) }, n && s.cloneElement(n, {
+    variant: "outline",
+    wrapperClassName: e(t["stepbuttons__button--back"])
+  }), a && s.cloneElement(a, {
+    variant: "fill",
+    wrapperClassName: e(t["stepbuttons__button--forward"])
+  })), o && /* @__PURE__ */ s.createElement("div", { className: e(t.stepbuttons__buttons, t["stepbuttons__buttons--additional"]) }, o), l && /* @__PURE__ */ s.createElement("div", { className: t.stepbuttons__buttons }, s.cloneElement(l, {
+    variant: "borderless"
+  }))) : null;
+}, v = p;
+export {
+  p as StepButtons,
+  v as default
+};
+//# sourceMappingURL=StepButtons.js.map

package/components/StepButtons/StepButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepButtons.js","sources":["../../../src/components/StepButtons/StepButtons.tsx"],"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={classNames(styles.stepbuttons__buttons, styles['stepbuttons__buttons--navigation'])}>\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"],"names":["StepButtons","props","backButton","forwardButton","additionalButtons","cancelButton","sticky","testId","navigationClasses","classNames","styles","React","AnalyticsId","StepButtons$1"],"mappings":";;;;AAwBO,MAAMA,IAA0C,CAASC,MAAA;AACxD,QAAA,EAAE,YAAAC,GAAY,eAAAC,GAAe,mBAAAC,GAAmB,cAAAC,GAAc,QAAAC,IAAS,IAAO,QAAAC,EAAW,IAAAN,GAEzFO,IAAoBC,EAAWC,EAAO,aAAaJ,KAAUI,EAAO,iCAAiC,CAAC;AAExG,SAAAR,KAAcC,KAAiBC,KAAqBC,IAEpDM,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAWH,GAAmB,eAAaD,GAAQ,oBAAkBK,EAAY,YAClF,IAAAV,KAAcC,MACdQ,gBAAAA,EAAA,cAAC,SAAI,WAAWF,EAAWC,EAAO,sBAAsBA,EAAO,kCAAkC,CAAC,EAC/F,GAAAR,KACCS,EAAM,aAAaT,GAAY;AAAA,IAC7B,SAAS;AAAA,IACT,kBAAkBO,EAAWC,EAAO,2BAA2B,CAAC;AAAA,EACjE,CAAA,GACFP,KACCQ,EAAM,aAAaR,GAAe;AAAA,IAChC,SAAS;AAAA,IACT,kBAAkBM,EAAWC,EAAO,8BAA8B,CAAC;AAAA,EACpE,CAAA,CACL,GAEDN,KACCO,gBAAAA,EAAA,cAAC,SAAI,WAAWF,EAAWC,EAAO,sBAAsBA,EAAO,kCAAkC,CAAC,KAAIN,CAAkB,GAEzHC,KACEM,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWD,EAAO,qBAAA,GACpBC,EAAM,aAAaN,GAAc;AAAA,IAChC,SAAS;AAAA,EACV,CAAA,CACH,CAEJ,IAGG;AACT,GAEAQ,IAAeb;"}

package/components/StepButtons/index.js

@@ -1,2 +1,7 @@
-import{S as o}from"../../StepButtons.js";import{a as s}from"../../StepButtons.js";import"react";import"classnames";import"../../constants.js";import"./styles.module.scss";export{s as StepButtons,o as default};
+import o from "./StepButtons.js";
+import { StepButtons as r } from "./StepButtons.js";
+export {
+  r as StepButtons,
+  o as default
+};
 //# sourceMappingURL=index.js.map

package/components/StepButtons/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/components/Stepper/Dot.js

@@ -0,0 +1,16 @@
+import d from "react";
+import l from "classnames";
+import { STEPPER_PADDING_X_PX as m } from "./utils.js";
+import e from "./styles.module.scss";
+const f = ({ index: o, completed: p, distanceBetweenDots: s, position: t }) => {
+  const r = l(
+    e.stepper__dot,
+    p && e["stepper__dot--completed"],
+    t && e[`stepper__dot--${t}`]
+  ), a = !t && typeof o < "u" && typeof s < "u" ? { left: `${o * s + m}px` } : void 0;
+  return /* @__PURE__ */ d.createElement("span", { className: r, style: a, "data-testid": "dot" });
+}, u = f;
+export {
+  u as default
+};
+//# sourceMappingURL=Dot.js.map

package/components/Stepper/Dot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dot.js","sources":["../../../src/components/Stepper/Dot.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { STEPPER_PADDING_X_PX } from './utils';\n\nimport styles from './styles.module.scss';\n\ninterface DotProps {\n  index?: number;\n  completed: boolean;\n  distanceBetweenDots?: number;\n  position?: 'left' | 'right';\n}\n\nconst Dot: React.FC<DotProps> = ({ index, completed, distanceBetweenDots, position }) => {\n  const classes = classNames(\n    styles.stepper__dot,\n    completed && styles['stepper__dot--completed'],\n    position && styles[`stepper__dot--${position}`]\n  );\n  const positionWithStyle = !position && typeof index !== 'undefined' && typeof distanceBetweenDots !== 'undefined';\n  const style: React.HTMLAttributes<HTMLSpanElement>['style'] = positionWithStyle\n    ? { left: `${index * distanceBetweenDots + STEPPER_PADDING_X_PX}px` }\n    : undefined;\n\n  return <span className={classes} style={style} data-testid=\"dot\" />;\n};\n\nexport default Dot;\n"],"names":["Dot","index","completed","distanceBetweenDots","position","classes","classNames","styles","style","STEPPER_PADDING_X_PX","Dot$1"],"mappings":";;;;AAeA,MAAMA,IAA0B,CAAC,EAAE,OAAAC,GAAO,WAAAC,GAAW,qBAAAC,GAAqB,UAAAC,QAAe;AACvF,QAAMC,IAAUC;AAAA,IACdC,EAAO;AAAA,IACPL,KAAaK,EAAO,yBAAyB;AAAA,IAC7CH,KAAYG,EAAO,iBAAiBH,CAAQ,EAAE;AAAA,EAAA,GAG1CI,IADoB,CAACJ,KAAY,OAAOH,IAAU,OAAe,OAAOE,IAAwB,MAElG,EAAE,MAAM,GAAGF,IAAQE,IAAsBM,CAAoB,KAC7D,IAAA;AAEJ,yCAAQ,QAAK,EAAA,WAAWJ,GAAS,OAAAG,GAAc,eAAY,MAAM,CAAA;AACnE,GAEAE,IAAeV;"}

package/components/Stepper/DotList.js

@@ -0,0 +1,7 @@
+import t from "react";
+import c from "./Dot.js";
+const l = ({ allowedValues: o, currentValue: m, distanceBetweenDots: r }) => /* @__PURE__ */ t.createElement(t.Fragment, null, o.map((e, a) => /* @__PURE__ */ t.createElement(c, { index: a, key: e, completed: e < m, distanceBetweenDots: r }))), s = l;
+export {
+  s as default
+};
+//# sourceMappingURL=DotList.js.map

package/components/Stepper/DotList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotList.js","sources":["../../../src/components/Stepper/DotList.tsx"],"sourcesContent":["import React from 'react';\n\nimport Dot from './Dot';\n\ninterface DotListProps {\n  allowedValues: number[];\n  currentValue: number;\n  distanceBetweenDots: number;\n}\n\nconst Dots: React.FC<DotListProps> = ({ allowedValues, currentValue, distanceBetweenDots }) => (\n  <>\n    {allowedValues.map((value, index) => (\n      <Dot index={index} key={value} completed={value < currentValue} distanceBetweenDots={distanceBetweenDots} />\n    ))}\n  </>\n);\n\nexport default Dots;\n"],"names":["Dots","allowedValues","currentValue","distanceBetweenDots","React","value","index","Dot","DotList"],"mappings":";;AAUA,MAAMA,IAA+B,CAAC,EAAE,eAAAC,GAAe,cAAAC,GAAc,qBAAAC,EAAoB,MAEpFC,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAAH,EAAc,IAAI,CAACI,GAAOC,MACzBF,gBAAAA,EAAA,cAACG,GAAI,EAAA,OAAAD,GAAc,KAAKD,GAAO,WAAWA,IAAQH,GAAc,qBAAAC,EAA0C,CAAA,CAC3G,CACH,GAGFK,IAAeR;"}

package/components/Stepper/Stepper.js

@@ -0,0 +1,35 @@
+import e, { useRef as d } from "react";
+import u from "./Dot.js";
+import V from "./DotList.js";
+import { getValidatedProps as $, getAllowedValues as k, getMaximumDots as M, getDistanceBetweenDots as N, getMarkerPosition as P } from "./utils.js";
+import { AnalyticsId as S } from "../../constants.js";
+import { useSize as f } from "../../hooks/useSize.js";
+import { getAriaLabelAttributes as L } from "../../utils/accessibility.js";
+import s from "./styles.module.scss";
+const R = ({ ariaLabelledById: g, ariaLabel: w, value: x, min: b = 0, max: h = 2, testId: D }) => {
+  const n = d(null), i = d(null), { width: E = 0 } = f(n) || {}, { width: p = 0 } = f(i) || {}, { validatedValue: t, validatedMin: o, validatedMax: a } = $(x, b, h), r = k(o, a), v = r.indexOf(t), A = M(E), m = N(p, r.length), c = P(m, v), l = r.length <= A, _ = t === a, y = L({ label: w, id: g });
+  return /* @__PURE__ */ e.createElement("div", { className: s["stepper-wrapper"], ref: n }, /* @__PURE__ */ e.createElement(
+    "span",
+    {
+      role: "progressbar",
+      ...y,
+      "aria-valuenow": t,
+      "aria-valuemin": o,
+      "aria-valuemax": a,
+      className: s.stepper,
+      style: {
+        backgroundPositionX: `${_ ? p : c}px`
+      },
+      ref: i,
+      "data-testid": D,
+      "data-analyticsid": S.Stepper
+    },
+    l && /* @__PURE__ */ e.createElement(V, { allowedValues: r, currentValue: t, distanceBetweenDots: m }),
+    !l && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(u, { completed: t > o, position: "left" }), /* @__PURE__ */ e.createElement(u, { completed: t === a, position: "right" })),
+    /* @__PURE__ */ e.createElement("span", { className: s.stepper__marker, style: { left: `${c}px` } })
+  ), !l && /* @__PURE__ */ e.createElement("span", { className: s.stepper__number }, `${t}/${a}`));
+}, j = R;
+export {
+  j as default
+};
+//# sourceMappingURL=Stepper.js.map

package/components/Stepper/Stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.js","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport Dot from './Dot';\nimport DotList from './DotList';\nimport { getMaximumDots, getDistanceBetweenDots, getMarkerPosition, getAllowedValues, getValidatedProps } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport interface StepperProps {\n  /**\n   * Sets aria-label of the stepper. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the stepper. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /**\n   * Current value. Must be between min and max\n   */\n  value?: number;\n  /**\n   * Minimum value\n   */\n  min?: number;\n  /**\n   * Maximum value\n   */\n  max?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Stepper: React.FC<StepperProps> = ({ ariaLabelledById, ariaLabel, value, min = 0, max = 2, testId }) => {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const ref = useRef<HTMLSpanElement>(null);\n  const { width: wrapperWidth = 0 } = useSize(wrapperRef) || {};\n  const { width: stepperWidth = 0 } = useSize(ref) || {};\n\n  const { validatedValue, validatedMin, validatedMax } = getValidatedProps(value, min, max);\n  const allowedValues = getAllowedValues(validatedMin, validatedMax);\n  const index = allowedValues.indexOf(validatedValue);\n  const maximumDots = getMaximumDots(wrapperWidth);\n  const distanceBetweenDots = getDistanceBetweenDots(stepperWidth, allowedValues.length);\n  const markerPosition = getMarkerPosition(distanceBetweenDots, index);\n\n  const showAllDots = allowedValues.length <= maximumDots;\n  const isCompleted = validatedValue === validatedMax;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n  return (\n    <div className={styles['stepper-wrapper']} ref={wrapperRef}>\n      <span\n        role=\"progressbar\"\n        {...ariaLabelAttributes}\n        aria-valuenow={validatedValue}\n        aria-valuemin={validatedMin}\n        aria-valuemax={validatedMax}\n        className={styles.stepper}\n        style={{\n          backgroundPositionX: `${isCompleted ? stepperWidth : markerPosition}px`,\n        }}\n        ref={ref}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Stepper}\n      >\n        {showAllDots && <DotList allowedValues={allowedValues} currentValue={validatedValue} distanceBetweenDots={distanceBetweenDots} />}\n        {!showAllDots && (\n          <>\n            <Dot completed={validatedValue > validatedMin} position=\"left\" />\n            <Dot completed={validatedValue === validatedMax} position=\"right\" />\n          </>\n        )}\n        <span className={styles.stepper__marker} style={{ left: `${markerPosition}px` }} />\n      </span>\n      {!showAllDots && <span className={styles.stepper__number}>{`${validatedValue}/${validatedMax}`}</span>}\n    </div>\n  );\n};\n\nexport default Stepper;\n"],"names":["Stepper","ariaLabelledById","ariaLabel","value","min","max","testId","wrapperRef","useRef","ref","wrapperWidth","useSize","stepperWidth","validatedValue","validatedMin","validatedMax","getValidatedProps","allowedValues","getAllowedValues","index","maximumDots","getMaximumDots","distanceBetweenDots","getDistanceBetweenDots","markerPosition","getMarkerPosition","showAllDots","isCompleted","ariaLabelAttributes","getAriaLabelAttributes","styles","React","AnalyticsId","DotList","Dot","Stepper$1"],"mappings":";;;;;;;;AAoCA,MAAMA,IAAkC,CAAC,EAAE,kBAAAC,GAAkB,WAAAC,GAAW,OAAAC,GAAO,KAAAC,IAAM,GAAG,KAAAC,IAAM,GAAG,QAAAC,QAAa;AACtG,QAAAC,IAAaC,EAAuB,IAAI,GACxCC,IAAMD,EAAwB,IAAI,GAClC,EAAE,OAAOE,IAAe,MAAMC,EAAQJ,CAAU,KAAK,IACrD,EAAE,OAAOK,IAAe,MAAMD,EAAQF,CAAG,KAAK,IAE9C,EAAE,gBAAAI,GAAgB,cAAAC,GAAc,cAAAC,EAAA,IAAiBC,EAAkBb,GAAOC,GAAKC,CAAG,GAClFY,IAAgBC,EAAiBJ,GAAcC,CAAY,GAC3DI,IAAQF,EAAc,QAAQJ,CAAc,GAC5CO,IAAcC,EAAeX,CAAY,GACzCY,IAAsBC,EAAuBX,GAAcK,EAAc,MAAM,GAC/EO,IAAiBC,EAAkBH,GAAqBH,CAAK,GAE7DO,IAAcT,EAAc,UAAUG,GACtCO,IAAcd,MAAmBE,GAEjCa,IAAsBC,EAAuB,EAAE,OAAO3B,GAAW,IAAID,GAAkB;AAE7F,yCACG,OAAI,EAAA,WAAW6B,EAAO,iBAAiB,GAAG,KAAKvB,EAC9C,GAAAwB,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAGH;AAAA,MACJ,iBAAef;AAAA,MACf,iBAAeC;AAAA,MACf,iBAAeC;AAAA,MACf,WAAWe,EAAO;AAAA,MAClB,OAAO;AAAA,QACL,qBAAqB,GAAGH,IAAcf,IAAeY,CAAc;AAAA,MACrE;AAAA,MACA,KAAAf;AAAA,MACA,eAAaH;AAAA,MACb,oBAAkB0B,EAAY;AAAA,IAAA;AAAA,IAE7BN,KAAgBK,gBAAAA,EAAA,cAAAE,GAAA,EAAQ,eAAAhB,GAA8B,cAAcJ,GAAgB,qBAAAS,GAA0C;AAAA,IAC9H,CAACI,KACAK,gBAAAA,EAAA,cAAAA,EAAA,UAAA,sCACGG,GAAI,EAAA,WAAWrB,IAAiBC,GAAc,UAAS,OAAO,CAAA,mCAC9DoB,GAAI,EAAA,WAAWrB,MAAmBE,GAAc,UAAS,QAAQ,CAAA,CACpE;AAAA,IAEFgB,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAWD,EAAO,iBAAiB,OAAO,EAAE,MAAM,GAAGN,CAAc,KAAQ,EAAA,CAAA;AAAA,EAAA,GAElF,CAACE,KAAeK,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAWD,EAAO,gBAAA,GAAkB,GAAGjB,CAAc,IAAIE,CAAY,EAAG,CACjG;AAEJ,GAEAoB,IAAenC;"}

package/components/Stepper/index.js

@@ -1,2 +1,5 @@
-import o,{useRef as D}from"react";import b from"classnames";import l from"./styles.module.scss";import{AnalyticsId as v}from"../../constants.js";import{useSize as A}from"../../hooks/useSize.js";import{getAriaLabelAttributes as R}from"../../utils/accessibility.js";import"../../utils/debounce.js";const S=4,M=24,$=8,x=(e,t)=>e<t?e:t-1,k=(e,t)=>t<e?e:t,I=(e,t,s)=>typeof e>"u"||e<t?t:e>s?s:e,W=e=>Math.floor(e/(M+S)),X=(e,t)=>(e-M)/(t-1),T=(e,t)=>e*t,L=(e,t)=>Array.from(Array(t-e+1),(s,a)=>a+e),C=(e,t,s)=>{const a=x(t,s),r=k(a,s);return{validatedValue:I(e,a,r),validatedMin:a,validatedMax:r}},F=({index:e,completed:t,distanceBetweenDots:s,position:a})=>{const r=b(l.stepper__dot,t&&l["stepper__dot--completed"],a&&l[`stepper__dot--${a}`]),i=!a&&typeof e<"u"&&typeof s<"u"?{left:`${e*s+$}px`}:void 0;return o.createElement("span",{className:r,style:i,"data-testid":"dot"})},f=F,K=({allowedValues:e,currentValue:t,distanceBetweenDots:s})=>o.createElement(o.Fragment,null,e.map((a,r)=>o.createElement(f,{index:r,key:a,completed:a<t,distanceBetweenDots:s}))),O=K,z=({ariaLabelledById:e,ariaLabel:t,value:s,min:a=0,max:r=2,testId:p})=>{const i=D(null),_=D(null),{width:h=0}=A(i)||{},{width:g=0}=A(_)||{},{validatedValue:n,validatedMin:m,validatedMax:c}=C(s,a,r),d=L(m,c),V=d.indexOf(n),w=W(h),E=X(g,d.length),y=T(E,V),u=d.length<=w,P=n===c,N=R({label:t,id:e});return o.createElement("div",{className:l["stepper-wrapper"],ref:i},o.createElement("span",{role:"progressbar",...N,"aria-valuenow":n,"aria-valuemin":m,"aria-valuemax":c,className:l.stepper,style:{backgroundPositionX:`${P?g:y}px`},ref:_,"data-testid":p,"data-analyticsid":v.Stepper},u&&o.createElement(O,{allowedValues:d,currentValue:n,distanceBetweenDots:E}),!u&&o.createElement(o.Fragment,null,o.createElement(f,{completed:n>m,position:"left"}),o.createElement(f,{completed:n===c,position:"right"})),o.createElement("span",{className:l.stepper__marker,style:{left:`${y}px`}})),!u&&o.createElement("span",{className:l.stepper__number},`${n}/${c}`))},U=z;export{U as default};
+import p from "./Stepper.js";
+export {
+  p as default
+};
 //# sourceMappingURL=index.js.map

package/components/Stepper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Stepper/utils.ts","../../../src/components/Stepper/Dot.tsx","../../../src/components/Stepper/DotList.tsx","../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["/**\n * Minimum avstand fra markør til prikk\n */\nconst MARKER_DOT_MIN_DISTANCE_PX = 4;\n\n/**\n * Bredde på markør\n */\nconst MARKER_WIDTH_PX = 24;\n\n/**\n * Horisontal padding på stepper\n */\nexport const STEPPER_PADDING_X_PX = 8;\n\n/**\n * Valider at minimum-verdi er innenfor gyldig område\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Mimimum-verdi, ikke større enn eller lik maksimum-verdi\n */\nexport const getValidatedMin = (min: number, max: number): number => (min < max ? min : max - 1);\n\n/**\n * Valider at maksimum-verdi er innenfor gyldig område\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Maksimum-verdi, ikke mindre enn minimum-verdi\n */\nexport const getValidatedMax = (min: number, max: number): number => (max < min ? min : max);\n\n/**\n * Valider at verdi er innenfor gyldig område\n * @param value Nåværende verdi\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Verdi, ikke mindre enn 0, ikke mer enn max\n */\nexport const getValidatedValue = (value: number | undefined, min: number, max: number): number => {\n  if (typeof value === 'undefined' || value < min) {\n    return min;\n  }\n\n  return value > max ? max : value;\n};\n\n/**\n * Finn antall prikker det er plass til\n * @param stepperWidth Bredde på stepper\n * @returns Antall prikker\n */\nexport const getMaximumDots = (stepperWidth: number): number => Math.floor(stepperWidth / (MARKER_WIDTH_PX + MARKER_DOT_MIN_DISTANCE_PX));\n\n/**\n * Beregn riktig distance mellom prikker\n * @param stepperWidth Bredde på stepper\n * @param dots Antall prikker som skal vises\n * @returns Distanse mellom prikker\n */\nexport const getDistanceBetweenDots = (stepperWidth: number, dots: number): number => (stepperWidth - MARKER_WIDTH_PX) / (dots - 1);\n\n/**\n * Beregn riktig plassering av markør\n * @param distanceBetweenDots Distanse mellom prikker\n * @param index Nåværende verdi i stepper\n * @returns Plassering til markør fra venstre\n */\nexport const getMarkerPosition = (distanceBetweenDots: number, index: number): number => distanceBetweenDots * index;\n\n/**\n * Lag liste med tillate verdier fra min til maks\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Liste med verdier\n */\nexport const getAllowedValues = (min: number, max: number): number[] => Array.from(Array(max - min + 1), (_, index) => index + min);\n\n/**\n * Valider props som skal brukes til beregning av posisjon m.m.\n * @param value Nåværende verdi\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Objekt med gyldige verdier\n */\nexport const getValidatedProps = (\n  value: number | undefined,\n  min: number,\n  max: number\n): { validatedValue: number; validatedMin: number; validatedMax: number } => {\n  const validatedMin = getValidatedMin(min, max);\n  const validatedMax = getValidatedMax(validatedMin, max);\n  const validatedValue = getValidatedValue(value, validatedMin, validatedMax);\n\n  return { validatedValue, validatedMin, validatedMax };\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { STEPPER_PADDING_X_PX } from './utils';\n\nimport styles from './styles.module.scss';\n\ninterface DotProps {\n  index?: number;\n  completed: boolean;\n  distanceBetweenDots?: number;\n  position?: 'left' | 'right';\n}\n\nconst Dot: React.FC<DotProps> = ({ index, completed, distanceBetweenDots, position }) => {\n  const classes = classNames(\n    styles.stepper__dot,\n    completed && styles['stepper__dot--completed'],\n    position && styles[`stepper__dot--${position}`]\n  );\n  const positionWithStyle = !position && typeof index !== 'undefined' && typeof distanceBetweenDots !== 'undefined';\n  const style: React.HTMLAttributes<HTMLSpanElement>['style'] = positionWithStyle\n    ? { left: `${index * distanceBetweenDots + STEPPER_PADDING_X_PX}px` }\n    : undefined;\n\n  return <span className={classes} style={style} data-testid=\"dot\" />;\n};\n\nexport default Dot;\n","import React from 'react';\n\nimport Dot from './Dot';\n\ninterface DotListProps {\n  allowedValues: number[];\n  currentValue: number;\n  distanceBetweenDots: number;\n}\n\nconst Dots: React.FC<DotListProps> = ({ allowedValues, currentValue, distanceBetweenDots }) => (\n  <>\n    {allowedValues.map((value, index) => (\n      <Dot index={index} key={value} completed={value < currentValue} distanceBetweenDots={distanceBetweenDots} />\n    ))}\n  </>\n);\n\nexport default Dots;\n","import React, { useRef } from 'react';\n\nimport Dot from './Dot';\nimport DotList from './DotList';\nimport { getMaximumDots, getDistanceBetweenDots, getMarkerPosition, getAllowedValues, getValidatedProps } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport interface StepperProps {\n  /**\n   * Sets aria-label of the stepper. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the stepper. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /**\n   * Current value. Must be between min and max\n   */\n  value?: number;\n  /**\n   * Minimum value\n   */\n  min?: number;\n  /**\n   * Maximum value\n   */\n  max?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Stepper: React.FC<StepperProps> = ({ ariaLabelledById, ariaLabel, value, min = 0, max = 2, testId }) => {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const ref = useRef<HTMLSpanElement>(null);\n  const { width: wrapperWidth = 0 } = useSize(wrapperRef) || {};\n  const { width: stepperWidth = 0 } = useSize(ref) || {};\n\n  const { validatedValue, validatedMin, validatedMax } = getValidatedProps(value, min, max);\n  const allowedValues = getAllowedValues(validatedMin, validatedMax);\n  const index = allowedValues.indexOf(validatedValue);\n  const maximumDots = getMaximumDots(wrapperWidth);\n  const distanceBetweenDots = getDistanceBetweenDots(stepperWidth, allowedValues.length);\n  const markerPosition = getMarkerPosition(distanceBetweenDots, index);\n\n  const showAllDots = allowedValues.length <= maximumDots;\n  const isCompleted = validatedValue === validatedMax;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n  return (\n    <div className={styles['stepper-wrapper']} ref={wrapperRef}>\n      <span\n        role=\"progressbar\"\n        {...ariaLabelAttributes}\n        aria-valuenow={validatedValue}\n        aria-valuemin={validatedMin}\n        aria-valuemax={validatedMax}\n        className={styles.stepper}\n        style={{\n          backgroundPositionX: `${isCompleted ? stepperWidth : markerPosition}px`,\n        }}\n        ref={ref}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Stepper}\n      >\n        {showAllDots && <DotList allowedValues={allowedValues} currentValue={validatedValue} distanceBetweenDots={distanceBetweenDots} />}\n        {!showAllDots && (\n          <>\n            <Dot completed={validatedValue > validatedMin} position=\"left\" />\n            <Dot completed={validatedValue === validatedMax} position=\"right\" />\n          </>\n        )}\n        <span className={styles.stepper__marker} style={{ left: `${markerPosition}px` }} />\n      </span>\n      {!showAllDots && <span className={styles.stepper__number}>{`${validatedValue}/${validatedMax}`}</span>}\n    </div>\n  );\n};\n\nexport default Stepper;\n"],"names":["MARKER_DOT_MIN_DISTANCE_PX","MARKER_WIDTH_PX","STEPPER_PADDING_X_PX","getValidatedMin","min","max","getValidatedMax","getValidatedValue","value","getMaximumDots","stepperWidth","getDistanceBetweenDots","dots","getMarkerPosition","distanceBetweenDots","index","getAllowedValues","_","getValidatedProps","validatedMin","validatedMax","Dot","completed","position","classes","classNames","styles","style","Dot$1","Dots","allowedValues","currentValue","React","DotList","Stepper","ariaLabelledById","ariaLabel","testId","wrapperRef","useRef","ref","wrapperWidth","useSize","validatedValue","maximumDots","markerPosition","showAllDots","isCompleted","ariaLabelAttributes","getAriaLabelAttributes","AnalyticsId","Stepper$1"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/Stepper/utils.js

@@ -0,0 +1,16 @@
+const c = 8, s = (t, e) => t < e ? t : e - 1, d = (t, e) => e < t ? t : e, _ = (t, e, o) => typeof t > "u" || t < e ? e : t > o ? o : t, M = (t) => Math.floor(t / 28), i = (t, e) => (t - 24) / (e - 1), l = (t, e) => t * e, D = (t, e) => Array.from(Array(e - t + 1), (o, a) => a + t), A = (t, e, o) => {
+  const a = s(e, o), n = d(a, o);
+  return { validatedValue: _(t, a, n), validatedMin: a, validatedMax: n };
+};
+export {
+  c as STEPPER_PADDING_X_PX,
+  D as getAllowedValues,
+  i as getDistanceBetweenDots,
+  l as getMarkerPosition,
+  M as getMaximumDots,
+  d as getValidatedMax,
+  s as getValidatedMin,
+  A as getValidatedProps,
+  _ as getValidatedValue
+};
+//# sourceMappingURL=utils.js.map

package/components/Stepper/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/components/Stepper/utils.ts"],"sourcesContent":["/**\n * Minimum avstand fra markør til prikk\n */\nconst MARKER_DOT_MIN_DISTANCE_PX = 4;\n\n/**\n * Bredde på markør\n */\nconst MARKER_WIDTH_PX = 24;\n\n/**\n * Horisontal padding på stepper\n */\nexport const STEPPER_PADDING_X_PX = 8;\n\n/**\n * Valider at minimum-verdi er innenfor gyldig område\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Mimimum-verdi, ikke større enn eller lik maksimum-verdi\n */\nexport const getValidatedMin = (min: number, max: number): number => (min < max ? min : max - 1);\n\n/**\n * Valider at maksimum-verdi er innenfor gyldig område\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Maksimum-verdi, ikke mindre enn minimum-verdi\n */\nexport const getValidatedMax = (min: number, max: number): number => (max < min ? min : max);\n\n/**\n * Valider at verdi er innenfor gyldig område\n * @param value Nåværende verdi\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Verdi, ikke mindre enn 0, ikke mer enn max\n */\nexport const getValidatedValue = (value: number | undefined, min: number, max: number): number => {\n  if (typeof value === 'undefined' || value < min) {\n    return min;\n  }\n\n  return value > max ? max : value;\n};\n\n/**\n * Finn antall prikker det er plass til\n * @param stepperWidth Bredde på stepper\n * @returns Antall prikker\n */\nexport const getMaximumDots = (stepperWidth: number): number => Math.floor(stepperWidth / (MARKER_WIDTH_PX + MARKER_DOT_MIN_DISTANCE_PX));\n\n/**\n * Beregn riktig distance mellom prikker\n * @param stepperWidth Bredde på stepper\n * @param dots Antall prikker som skal vises\n * @returns Distanse mellom prikker\n */\nexport const getDistanceBetweenDots = (stepperWidth: number, dots: number): number => (stepperWidth - MARKER_WIDTH_PX) / (dots - 1);\n\n/**\n * Beregn riktig plassering av markør\n * @param distanceBetweenDots Distanse mellom prikker\n * @param index Nåværende verdi i stepper\n * @returns Plassering til markør fra venstre\n */\nexport const getMarkerPosition = (distanceBetweenDots: number, index: number): number => distanceBetweenDots * index;\n\n/**\n * Lag liste med tillate verdier fra min til maks\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Liste med verdier\n */\nexport const getAllowedValues = (min: number, max: number): number[] => Array.from(Array(max - min + 1), (_, index) => index + min);\n\n/**\n * Valider props som skal brukes til beregning av posisjon m.m.\n * @param value Nåværende verdi\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Objekt med gyldige verdier\n */\nexport const getValidatedProps = (\n  value: number | undefined,\n  min: number,\n  max: number\n): { validatedValue: number; validatedMin: number; validatedMax: number } => {\n  const validatedMin = getValidatedMin(min, max);\n  const validatedMax = getValidatedMax(validatedMin, max);\n  const validatedValue = getValidatedValue(value, validatedMin, validatedMax);\n\n  return { validatedValue, validatedMin, validatedMax };\n};\n"],"names":["STEPPER_PADDING_X_PX","getValidatedMin","min","max","getValidatedMax","getValidatedValue","value","getMaximumDots","stepperWidth","getDistanceBetweenDots","dots","getMarkerPosition","distanceBetweenDots","index","getAllowedValues","_","getValidatedProps","validatedMin","validatedMax"],"mappings":"AAaO,MAAMA,IAAuB,GAQvBC,IAAkB,CAACC,GAAaC,MAAyBD,IAAMC,IAAMD,IAAMC,IAAM,GAQjFC,IAAkB,CAACF,GAAaC,MAAyBA,IAAMD,IAAMA,IAAMC,GAS3EE,IAAoB,CAACC,GAA2BJ,GAAaC,MACpE,OAAOG,IAAU,OAAeA,IAAQJ,IACnCA,IAGFI,IAAQH,IAAMA,IAAMG,GAQhBC,IAAiB,CAACC,MAAiC,KAAK,MAAMA,IAAgB,EAA6C,GAQ3HC,IAAyB,CAACD,GAAsBE,OAA0BF,IAAe,OAAoBE,IAAO,IAQpHC,IAAoB,CAACC,GAA6BC,MAA0BD,IAAsBC,GAQlGC,IAAmB,CAACZ,GAAaC,MAA0B,MAAM,KAAK,MAAMA,IAAMD,IAAM,CAAC,GAAG,CAACa,GAAGF,MAAUA,IAAQX,CAAG,GASrHc,IAAoB,CAC/BV,GACAJ,GACAC,MAC2E;AACrE,QAAAc,IAAehB,EAAgBC,GAAKC,CAAG,GACvCe,IAAed,EAAgBa,GAAcd,CAAG;AAG/C,SAAA,EAAE,gBAFcE,EAAkBC,GAAOW,GAAcC,CAAY,GAEjD,cAAAD,GAAc,cAAAC;AACzC;"}

package/components/Table/Table.js

@@ -0,0 +1,59 @@
+import l, { useState as r, useRef as L, useEffect as b } from "react";
+import g from "classnames";
+import { getCurrentConfig as I, getCenteredOverflowTableStyle as N, getBreakpointClass as R } from "./utils.js";
+import { AnalyticsId as _ } from "../../constants.js";
+import { useBreakpoint as H } from "../../hooks/useBreakpoint.js";
+import { useLayoutEvent as O } from "../../hooks/useLayoutEvent.js";
+import { getAriaLabelAttributes as P } from "../../utils/accessibility.js";
+import V from "../HorizontalScroll/HorizontalScroll.js";
+import j from "./styles.module.scss";
+var q = /* @__PURE__ */ ((e) => (e.none = "none", e.centeredoverflow = "centeredoverflow", e.horizontalscroll = "horizontalscroll", e.block = "block", e))(q || {}), D = /* @__PURE__ */ ((e) => (e.compact = "compact", e.normal = "normal", e))(D || {});
+const F = [
+  {
+    breakpoint: "xl",
+    variant: "centeredoverflow",
+    fallbackVariant: "horizontalscroll"
+    /* horizontalscroll */
+  }
+], $ = [
+  {
+    breakpoint: "xl",
+    variant: "centeredoverflow",
+    fallbackVariant: "horizontalscroll"
+    /* horizontalscroll */
+  },
+  {
+    breakpoint: "sm",
+    variant: "centeredoverflow",
+    fallbackVariant: "block"
+    /* block */
+  }
+], M = ({
+  id: e,
+  testId: h,
+  className: p,
+  children: v,
+  breakpointConfig: i = F,
+  mode: w = "normal",
+  scrollAriaLabel: u,
+  scrollAriaLabelledById: k
+}) => {
+  const [t, W] = r(), [a, z] = r(0), [E, y] = r(0), [s, S] = r(window.innerWidth), n = L(null), c = H();
+  b(() => {
+    W(I(i, c, a, s));
+  }, [i, c, a, s]), b(() => {
+    var o, m, f;
+    ((t == null ? void 0 : t.variant) === "centeredoverflow" || (t == null ? void 0 : t.variant) === "horizontalscroll") && z(((o = n.current) == null ? void 0 : o.getBoundingClientRect().width) ?? 0), (t == null ? void 0 : t.variant) === "centeredoverflow" && y(((f = (m = n.current) == null ? void 0 : m.parentElement) == null ? void 0 : f.getBoundingClientRect().width) ?? 0);
+  }, [t]), O(() => S(window.innerWidth), ["resize"], 100);
+  const A = (t == null ? void 0 : t.variant) === "centeredoverflow" ? N(E, a) : void 0, B = R(t), x = g(j.table, B, p), d = /* @__PURE__ */ l.createElement("table", { className: x, id: e, "data-testid": h, "data-analyticsid": _.Table, ref: n, style: A }, l.Children.map(v, (o) => l.isValidElement(o) && l.cloneElement(o, { mode: w }))), C = P({ label: u, id: k });
+  return (t == null ? void 0 : t.variant) === "horizontalscroll" ? /* @__PURE__ */ l.createElement(V, { childWidth: a, testId: "horizontal-scroll", ...C }, d) : d;
+};
+export {
+  D as ModeType,
+  q as ResponsiveTableVariant,
+  M as Table,
+  M as default,
+  F as defaultConfig,
+  $ as simpleConfig
+};
+//# sourceMappingURL=Table.js.map

package/components/Table/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getCurrentConfig, getBreakpointClass, getCenteredOverflowTableStyle } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport HorizontalScroll from '../HorizontalScroll';\n\nimport styles from './styles.module.scss';\n\nexport enum ResponsiveTableVariant {\n  /** No handling responsive behaviour. Default. */\n  none = 'none',\n  /** Overflow parent container to the left and right while remaining centered horizontally. */\n  centeredoverflow = 'centeredoverflow',\n  /** Show horizontal scrollbar when table is too big for the screen. */\n  horizontalscroll = 'horizontalscroll',\n  /** Collapse to two columns. */\n  block = 'block',\n}\nexport enum ModeType {\n  compact = 'compact',\n  normal = 'normal',\n}\nexport interface BreakpointConfig {\n  /** Breakpoint at which responsive behaviour will be applied. The table component uses a \"desktop first\" approach. */\n  breakpoint: keyof typeof Breakpoint;\n  /** Desired behaviour on this breakpoint and all smaller screens. */\n  variant: keyof typeof ResponsiveTableVariant;\n  /** If variant is horizontallscroll, use a fallback instead of device is not a touch device. */\n  fallbackVariant?: keyof typeof ResponsiveTableVariant;\n}\n\nexport interface Props {\n  /** Unique ID */\n  id?: string;\n  /** Id used for testing */\n  testId?: string;\n  /** Customize how the table behaves on various screen widths */\n  breakpointConfig?: BreakpointConfig | BreakpointConfig[];\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table. Use TableHead and TableBody */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n  /** Sets aria-label of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n  scrollAriaLabel?: string;\n  /** Sets aria-labelledby of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n  scrollAriaLabelledById?: string;\n}\n\nexport const defaultConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n];\n\nexport const simpleConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n  {\n    breakpoint: 'sm',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.block,\n  },\n];\n\nexport const Table: React.FC<Props> = ({\n  id,\n  testId,\n  className,\n  children,\n  breakpointConfig = defaultConfig,\n  mode = ModeType.normal,\n  scrollAriaLabel,\n  scrollAriaLabelledById,\n}) => {\n  const [currentConfig, setCurrentConfig] = useState<BreakpointConfig>();\n  const [tableWidth, setTableWidth] = useState<number>(0);\n  const [parentWidth, setParentWidth] = useState<number>(0);\n  const [windowWidth, setWindowWidth] = useState(window.innerWidth);\n  const tableRef = useRef<HTMLTableElement>(null);\n  const breakpoint = useBreakpoint();\n\n  useEffect(() => {\n    setCurrentConfig(getCurrentConfig(breakpointConfig, breakpoint, tableWidth, windowWidth));\n  }, [breakpointConfig, breakpoint, tableWidth, windowWidth]);\n\n  useEffect(() => {\n    if (\n      currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ||\n      currentConfig?.variant === ResponsiveTableVariant.horizontalscroll\n    ) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n    if (currentConfig?.variant === ResponsiveTableVariant.centeredoverflow) {\n      setParentWidth(tableRef.current?.parentElement?.getBoundingClientRect().width ?? 0);\n    }\n  }, [currentConfig]);\n\n  useLayoutEvent(() => setWindowWidth(window.innerWidth), ['resize'], 100);\n\n  const tableStyle =\n    currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ? getCenteredOverflowTableStyle(parentWidth, tableWidth) : undefined;\n\n  const breakpointClass = getBreakpointClass(currentConfig);\n  const tableClass = classNames(styles.table, breakpointClass, className);\n\n  const table = (\n    <table className={tableClass} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Table} ref={tableRef} style={tableStyle}>\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n    </table>\n  );\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: scrollAriaLabel, id: scrollAriaLabelledById });\n\n  if (currentConfig?.variant === ResponsiveTableVariant.horizontalscroll) {\n    return (\n      <HorizontalScroll childWidth={tableWidth} testId=\"horizontal-scroll\" {...ariaLabelAttributes}>\n        {table}\n      </HorizontalScroll>\n    );\n  }\n\n  return table;\n};\n\nexport default Table;\n"],"names":["ResponsiveTableVariant","ModeType","defaultConfig","simpleConfig","Table","id","testId","className","children","breakpointConfig","mode","scrollAriaLabel","scrollAriaLabelledById","currentConfig","setCurrentConfig","useState","tableWidth","setTableWidth","parentWidth","setParentWidth","windowWidth","setWindowWidth","tableRef","useRef","breakpoint","useBreakpoint","useEffect","getCurrentConfig","_a","_c","_b","useLayoutEvent","tableStyle","getCenteredOverflowTableStyle","breakpointClass","getBreakpointClass","tableClass","classNames","styles","table","React","AnalyticsId","child","ariaLabelAttributes","getAriaLabelAttributes","HorizontalScroll"],"mappings":";;;;;;;;;AAaY,IAAAA,sBAAAA,OAEVA,EAAA,OAAO,QAEPA,EAAA,mBAAmB,oBAEnBA,EAAA,mBAAmB,oBAEnBA,EAAA,QAAQ,SAREA,IAAAA,KAAA,CAAA,CAAA,GAUAC,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,SAAS,UAFCA,IAAAA,KAAA,CAAA,CAAA;AAgCL,MAAMC,IAAoC;AAAA,EAC/C;AAAA,IACE,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,iBAAiB;AAAA;AAAA,EACnB;AACF,GAEaC,IAAmC;AAAA,EAC9C;AAAA,IACE,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,iBAAiB;AAAA;AAAA,EACnB;AAAA,EACA;AAAA,IACE,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,iBAAiB;AAAA;AAAA,EACnB;AACF,GAEaC,IAAyB,CAAC;AAAA,EACrC,IAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC,IAAmBP;AAAA,EACnB,MAAAQ,IAAO;AAAA,EACP,iBAAAC;AAAA,EACA,wBAAAC;AACF,MAAM;AACJ,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAA2B,GAC/D,CAACC,GAAYC,CAAa,IAAIF,EAAiB,CAAC,GAChD,CAACG,GAAaC,CAAc,IAAIJ,EAAiB,CAAC,GAClD,CAACK,GAAaC,CAAc,IAAIN,EAAS,OAAO,UAAU,GAC1DO,IAAWC,EAAyB,IAAI,GACxCC,IAAaC;AAEnB,EAAAC,EAAU,MAAM;AACd,IAAAZ,EAAiBa,EAAiBlB,GAAkBe,GAAYR,GAAYI,CAAW,CAAC;AAAA,KACvF,CAACX,GAAkBe,GAAYR,GAAYI,CAAW,CAAC,GAE1DM,EAAU,MAAM;;AACd,MACEb,KAAA,gBAAAA,EAAe,aAAY,uBAC3BA,KAAA,gBAAAA,EAAe,aAAY,uBAE3BI,IAAcW,IAAAN,EAAS,YAAT,gBAAAM,EAAkB,wBAAwB,UAAS,CAAC,IAEhEf,KAAA,gBAAAA,EAAe,aAAY,sBAC7BM,IAAeU,KAAAC,IAAAR,EAAS,YAAT,gBAAAQ,EAAkB,kBAAlB,gBAAAD,EAAiC,wBAAwB,UAAS,CAAC;AAAA,EACpF,GACC,CAAChB,CAAa,CAAC,GAEHkB,EAAA,MAAMV,EAAe,OAAO,UAAU,GAAG,CAAC,QAAQ,GAAG,GAAG;AAEvE,QAAMW,KACJnB,KAAA,gBAAAA,EAAe,aAAY,qBAA0CoB,EAA8Bf,GAAaF,CAAU,IAAI,QAE1HkB,IAAkBC,EAAmBtB,CAAa,GAClDuB,IAAaC,EAAWC,EAAO,OAAOJ,GAAiB3B,CAAS,GAEhEgC,IACJC,gBAAAA,EAAA,cAAC,SAAM,EAAA,WAAWJ,GAAY,IAAA/B,GAAQ,eAAaC,GAAQ,oBAAkBmC,EAAY,OAAO,KAAKnB,GAAU,OAAOU,EAAA,GACnHQ,EAAM,SAAS,IAAIhC,GAAU,CAASkC,MAAAF,EAAM,eAAoCE,CAAK,KAAKF,EAAM,aAAaE,GAAO,EAAE,MAAAhC,EAAK,CAAC,CAAC,CAChI,GAGIiC,IAAsBC,EAAuB,EAAE,OAAOjC,GAAiB,IAAIC,GAAwB;AAErG,UAAAC,KAAA,gBAAAA,EAAe,aAAY,qBAE3B2B,gBAAAA,EAAA,cAACK,KAAiB,YAAY7B,GAAY,QAAO,qBAAqB,GAAG2B,KACtEJ,CACH,IAIGA;AACT;"}

package/components/Table/TableBody/TableBody.js

@@ -0,0 +1,13 @@
+import e from "react";
+import r from "classnames";
+import s from "../styles.module.scss";
+import { ModeType as n } from "../Table.js";
+const d = ({ className: o, children: a, mode: l = n.normal }) => {
+  const m = r(s["table-body"], o);
+  return /* @__PURE__ */ e.createElement("tbody", { className: m }, e.Children.map(a, (t) => e.isValidElement(t) && e.cloneElement(t, { mode: l })));
+}, f = d;
+export {
+  d as TableBody,
+  f as default
+};
+//# sourceMappingURL=TableBody.js.map

package/components/Table/TableBody/TableBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableBody.js","sources":["../../../../src/components/Table/TableBody/TableBody.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport interface Props {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table body. Use TableRows */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableBody = ({ className, children, mode = ModeType.normal }: Props): React.JSX.Element => {\n  const tableBodyClasses = classNames(tableStyles['table-body'], className);\n  return (\n    <tbody className={tableBodyClasses}>\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n    </tbody>\n  );\n};\n\nexport default TableBody;\n"],"names":["TableBody","className","children","mode","ModeType","tableBodyClasses","classNames","tableStyles","React","child","TableBody$1"],"mappings":";;;;AAgBa,MAAAA,IAAY,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,MAAAC,IAAOC,EAAS,aAAuC;AACtG,QAAMC,IAAmBC,EAAWC,EAAY,YAAY,GAAGN,CAAS;AAEtE,SAAAO,gBAAAA,EAAA,cAAC,WAAM,WAAWH,EAAA,GACfG,EAAM,SAAS,IAAIN,GAAU,CAASO,MAAAD,EAAM,eAAoCC,CAAK,KAAKD,EAAM,aAAaC,GAAO,EAAE,MAAAN,GAAM,CAAC,CAChI;AAEJ,GAEAO,IAAeV;"}

package/components/Table/TableBody/index.js

@@ -1,2 +1,7 @@
-import{a as r}from"../../../TableBody.js";import{T as h}from"../../../TableBody.js";import"react";import"classnames";import"../styles.module.scss";import"../../../Table.js";import"../../../constants.js";import"../../../hooks/useBreakpoint.js";import"../../../theme/grid.js";import"../../../hooks/useLayoutEvent.js";import"../../../utils/debounce.js";import"../../../utils/accessibility.js";import"../../../HorizontalScroll.js";import"../../../hooks/useIsVisible.js";import"../../../hooks/useIntersectionObserver.js";import"../../../hooks/useSize.js";import"../../HorizontalScroll/styles.module.scss";import"../../../utils/device.js";export{h as TableBody,r as default};
+import e from "./TableBody.js";
+import { TableBody as t } from "./TableBody.js";
+export {
+  t as TableBody,
+  e as default
+};
 //# sourceMappingURL=index.js.map

package/components/Table/TableBody/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}