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

package/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../src/components/Slider/Slider.tsx"],"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    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(props.errorTextId);\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"],"names":["React","value","step"],"mappings":"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"}
+{"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    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(props.errorTextId);\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":";;;;;;;;;;;;AAeA,IAAM,sBAAsB,SAAiB,KAAa,QAAmD;CAC3G,MAAM,CAAC,OAAO,YAAY,SAAS,QAAQ;CAE3C,MAAM,gBAAgB,aAA2B;AAC/C,MAAI,WAAW,IACb,UAAS,IAAI;WACJ,WAAW,IACpB,UAAS,IAAI;MAEb,UAAS,SAAS;;AAItB,iBAAgB;AACd,eAAa,QAAQ;IACpB,CAAC,KAAK,IAAI,CAAC;AAEd,QAAO,CAAC,OAAO,aAAa;;AA2C9B,MAAa,SAAS,MAAM,YAAY,OAAoB,QAAqC;CAC/F,MAAM,EACJ,OACA,WACA,OACA,WACA,uBACA,WACA,YACA,WAAW,OACX,UACA,OACA,OAAO,GACP,WAAW,GACX,WAAW,QAAQ,MAAM,SAAS,IAAI,KACtC,WAAW,MACX,QACA,MACA,GAAG,SACD;CAEJ,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAC/C,MAAM,CAAC,eAAe,oBAAoB,SAAS,OAAO,UAAU,cAAc,WAAW,KAAK;CAClG,MAAM,CAAC,YAAY,iBAAiB,mBAClC,OAAO,UAAU,eAAe,WAAW,YAAY,IAAI,WAAW,OACtE,UACA,SACD;CAED,MAAM,cAAc,kBAAkB,MAAM,YAAY;CACxD,MAAM,SAAS,OAAO;CACtB,MAAM,UAAU,WAAW;CAC3B,MAAM,cAAc,WAAW;CAC/B,MAAM,eAAe,iBAAiB;CACtC,MAAM,WAAW,OAAuB,KAAK;CAC7C,MAAM,EAAE,WAAW,cAAc,iBAAmC,mBAAmB,IAAI,GAAG,MAAM,KAAK;CACzG,MAAM,aAAa,UAAU,CAAC,KAAK,UAAU,CAAC;CAE9C,MAAM,EAAE,OAAO,eAAe,QAAQ,SAAS,IAAI,EAAE,OAAO,GAAG;CAC/D,MAAM,YAAY,WAAW;CAC7B,MAAM,UAAU,CAAC,CAAC,aAAa,CAAC,CAAC;AAEjC,iBAAgB;EACd,MAAM,wBAA8B;AAClC,eAAY,MAAM;;AAGpB,WAAS,iBAAiB,aAAa,gBAAgB;AAEvD,eAAmB;AACjB,YAAS,oBAAoB,aAAa,gBAAgB;;IAE3D,EAAE,CAAC;CAEN,MAAM,iCAAiC,mBAAmC;EAOxE,IAAI,WAHwB,kBAHN,SAAS,SAAS,uBAAuB,CAAC,KAAK,MAGP,cAC3C,WAAW,YAEgB;AAG9C,YADkB,KAAK,MAAM,UAAQ,KAAK,GACtB;AACpB,YAAQ,KAAK,IAAI,UAAU,KAAK,IAAI,UAAU,QAAM,CAAC;AAErD,SAAO;;AAGT,iBAAgB;EACd,MAAM,qBAAqB,MAA0B;AACnD,OAAI,CAAC,YAAY,SAEf,eADiB,8BAA8B,EAAE,QAAQ,CAClC;;AAI3B,WAAS,iBAAiB,eAAe,kBAAkB;AAE3D,eAAmB;AACjB,YAAS,oBAAoB,eAAe,kBAAkB;;IAE/D,CAAC,SAAS,CAAC;AAEd,iBAAgB;AACd,MAAI,UAAU,cAAc,OAAO,UAAU,aAAa;AACxD,mBAAgB;AAChB,iBAAc,MAAM;;IAErB,CAAC,MAAM,CAAC;AAEX,iBAAgB;AACd,MAAI,OAAO,UAAU,eAAe,aAAa,cAC/C,kBAAiB,SAAS;IAE3B,CAAC,SAAS,CAAC;CAEd,MAAM,uBAA6B;AACjC,MAAI,kBAAkB,MACpB,kBAAiB,KAAK;;CAI1B,MAAMA,iBAA4D,MAAK;AACrE,MAAI,SAAU;EAEd,IAAI,OAAO;AAEX,UAAQ,EAAE,KAAV;GACE,KAAK;GACL,KAAK;AACH,kBAAc,aAAa,KAAK;AAChC,WAAO;AACP;GACF,KAAK;AACH,kBAAc,aAAa,UAAU;AACrC,WAAO;AACP;GACF,KAAK;GACL,KAAK;AACH,kBAAc,aAAa,KAAK;AAChC,WAAO;AACP;GACF,KAAK;AACH,kBAAc,aAAa,UAAU;AACrC,WAAO;AACP;GACF,KAAK;AACH,kBAAc,SAAS;AACvB,WAAO;AACP;GACF,KAAK;AACH,kBAAc,SAAS;AACvB,WAAO;AACP;GACF,QACE;;AAGJ,MAAI,MAAM;AACR,mBAAgB;AAChB,KAAE,gBAAgB;AAClB,KAAE,iBAAiB;;;CAIvB,MAAMC,oBAA4D,MAAK;AACrE,MAAI,SAAU;AAGd,gBADiB,8BAA8B,EAAE,QAAQ,CAClC;AACvB,YAAU,SAAS,OAAO;;CAG5B,MAAMC,qBAA+D,MAAK;AACxE,MAAI,SAAU;AAEd,cAAY,KAAK;AACjB,kBAAgB;AAEhB,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AAEnB,YAAU,SAAS,OAAO;;CAG5B,MAAM,aAAa,aAAa,WAAY,cAAc,WAAW,aAAc,aAAa,YAAY;CAE5G,MAAM,yBAA6C;EACjD,MAAM,YAAY,QAAQ,KAAK,OAAO,aAAa,YAAY,KAAK,GAAG;AAEvE,MAAI,SAAS,cAAc,QAAQ,aAAa,KAAK,YAAY,MAAM,QAAQ;GAC7E,MAAM,SAAO,MAAM;GACnB,MAAM,YAAY,OAAK;GACvB,MAAM,QAAQ,OAAO,OAAK,UAAU,cAAc,OAAK,MAAM,UAAU,GAAG,KAAA;AAE1E,UAAO,aAAa,QAAQ,GAAG,UAAU,GAAG,UAAU,aAAa;;;CAMvE,MAAM,2BAA+C;AACnD,MAAI,SAAS,aAAa,WACxB,QAAO;GAAC;GAAS;GAAa;GAAa,CAAC,KAAK,IAAI;AAEvD,MAAI,SAAS,UACX,QAAO,CAAC,SAAS,YAAY,CAAC,KAAK,IAAI;AAEzC,MAAI,SAAS,WACX,QAAO,CAAC,SAAS,aAAa,CAAC,KAAK,IAAI;AAE1C,MAAI,MACF,QAAO;;CAIX,MAAM,sBAAsB,uBAAuB;EACjD,OAAO;EACP,IAAI,oBAAoB;EACxB,QAAQ;EACT,CAAC;CAEF,MAAM,uBAAuB,OAAe,gBAA0C;AACpF,SAAO,EAAE,MAAM,GAAI,SAAS,cAAc,KAAM,IAAI,IAAI;;AAG1D,iBAAgB;AACd,MAAI,iBAAiB,SACnB,UAAS,EACP,QAAQ;GACN,MAAM,MAAM;GACZ,OAAO;GACR,EACF,CAAmD;IAErD,CAAC,YAAY,cAAc,CAAC;CAE/B,MAAM,sBAAuC;AAC3C,SACE,oBAAC,OAAA;GAAI,WAAW,OAAO;aACpB,OAAO,KAAK,QAAM,UAAU;AAC3B,WACE,OAAK,gBACH,oBAAC,OAAA;KACC,eAAa;KAEb,WAAW,OAAO;KAClB,OAAO,oBAAoB,OAAO,MAAM,OAAO;eAE9C,OAAK;OAJD,UAAU,MAKX;KAGV;IACE;;CAIV,MAAM,oBAAqC;AACzC,SAAO,OAAO,KAAK,OAAO,UAAU;AAClC,UAAO,oBAAC,OAAA;IAAyB,WAAW,OAAO;IAAwB,OAAO,oBAAoB,OAAO,MAAM,OAAO;MAAzG,SAAS,MAAoG;IAC9H;;CAGJ,MAAM,yBAA0C;AAC9C,SACE,oBAAC,OAAA;GAAI,WAAW,OAAO;aACpB,OAAO,KAAK,QAAM,UAAU;AAC3B,WACE,OAAO,OAAK,UAAU,eACpB,oBAAC,OAAA;KACC,eAAa;KAEb,WAAW,OAAO;KAClB,OAAO,oBAAoB,OAAO,MAAM,OAAO;eAE9C,OAAK;OAJD,UAAU,MAKX;KAGV;IACE;;AAIV,QACE,qBAAC,sBAAA;EAAa,WAAW;EAAkC;EAAwB;aACjF,oBAAC,SAAA;GACC,kBAAgB,kBAAkB;GAClC,WAAW,OAAO;GACR;GACV,KAAK;GACL,KAAK;GACK;GACV,WAAW;GACX,OAAO;GACP,KAAK;GACL,MAAK;GACL,GAAI;GACJ,GAAI;IACJ,EACF,qBAAC,OAAA;GAAI,WAAW,OAAO;GAAQ,eAAa;GAAQ,oBAAkB,YAAY;;IAC/E,SACC,oBAAC,eAAA;KAAM,WAAW,OAAO;KAAkB,YAAY;KAAM,QAAQ;KAAG,YAAY;KAAU,IAAI;eAC/F;MACK;IAEV,qBAAC,OAAA;KAAI,WAAW,OAAO;;MACpB,eAAe;MAGhB,qBAAC,OAAA;OACC,KAAK;OACL,WAAW,GAAW,OAAO,0BAA0B,YAAY,OAAO,mCAAmC;OAC7G,SAAS;OACT,eAAe;kBAEf,oBAAC,OAAA;QAAI,WAAW,GAAW,OAAO,eAAe,YAAY,OAAO,2BAA2B;kBAAG,aAAa;SAAO,EACtH,oBAAC,OAAA;QACC,WAAW,GAAW,OAAO,gBAAgB;UAC1C,OAAO,8BAA8B;UACrC,OAAO,8BAA8B;UACrC,OAAO,6BAA6B;UACpC,OAAO,6BAA6B,CAAC,YAAY;SACnD,CAAC;QACF,OAAO,EACL,MAAM,GAAG,WAAW,KACrB;SACD,CAAA;QACE;MACL,kBAAkB;;MACf;KACJ,aAAa,eACb,qBAAC,QAAA;KAAK,WAAW,OAAO;gBACtB,oBAAC,QAAA;MAAK,IAAI;gBAAc;OAAiB,EACzC,oBAAC,QAAA;MAAK,IAAI;gBAAe;OAAkB,CAAA;MACtC;;IAEL,CAAA;GACO;EAEjB;AAEF,OAAO,cAAc;AC9YrB,IAAA,mBDgZe"}

package/Spacer.js

@@ -1,32 +1,31 @@
+import { n as AnalyticsId } from "./constants2.js";
+import React from "react";
+import cn from "classnames";
 import { jsx } from "react/jsx-runtime";
-import React__default from "react";
-import classNames from "classnames";
-import { AnalyticsId } from "./constants.js";
 import spacerStyles from "./components/Spacer/styles.module.scss";
-const Spacer = React__default.forwardRef(function SpacerForwardedRef(props, ref) {
-  const { size = "s", className, testId } = props;
-  const spacerClasses = 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
-  );
-  return /* @__PURE__ */ jsx("span", { className: spacerClasses, ref, "data-testid": testId, "data-analyticsid": AnalyticsId.Spacer });
+var Spacer_default$1 = React.forwardRef(function SpacerForwardedRef(props, ref) {
+	const { size = "s", className, testId } = props;
+	return /* @__PURE__ */ jsx("span", {
+		className: cn(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 as S
-};
-//# sourceMappingURL=Spacer.js.map
+export { Spacer_default$1 as t };
+
+//# sourceMappingURL=Spacer.js.map

package/Spacer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spacer.js","sources":["../src/components/Spacer/Spacer.tsx"],"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"],"names":["React"],"mappings":";;;;;AAkBA,MAAM,SAASA,eAAM,WAAW,SAAS,mBAAmB,OAAoB,KAAsC;AACpH,QAAM,EAAE,OAAO,KAAK,WAAW,WAAW;AAC1C,QAAM,gBAAgB;AAAA,IACpB,aAAa;AAAA,IACb;AAAA,MACE,CAAC,aAAa,aAAa,CAAC,GAAG,SAAS;AAAA,MACxC,CAAC,aAAa,aAAa,CAAC,GAAG,SAAS;AAAA,MACxC,CAAC,aAAa,aAAa,CAAC,GAAG,SAAS;AAAA,MACxC,CAAC,aAAa,YAAY,CAAC,GAAG,SAAS;AAAA,MACvC,CAAC,aAAa,WAAW,CAAC,GAAG,SAAS;AAAA,MACtC,CAAC,aAAa,WAAW,CAAC,GAAG,SAAS;AAAA,MACtC,CAAC,aAAa,WAAW,CAAC,GAAG,SAAS;AAAA,MACtC,CAAC,aAAa,YAAY,CAAC,GAAG,SAAS;AAAA,MACvC,CAAC,aAAa,aAAa,CAAC,GAAG,SAAS;AAAA,MACxC,CAAC,aAAa,aAAa,CAAC,GAAG,SAAS;AAAA,MACxC,CAAC,aAAa,aAAa,CAAC,GAAG,SAAS;AAAA,MACxC,CAAC,aAAa,aAAa,CAAC,GAAG,SAAS;AAAA,MACxC,CAAC,aAAa,aAAa,CAAC,GAAG,SAAS;AAAA,IAAA;AAAA,IAE1C;AAAA,EAAA;AAGF,SAAO,oBAAC,UAAK,WAAW,eAAe,KAAU,eAAa,QAAQ,oBAAkB,YAAY,OAAA,CAAQ;AAC9G,CAAC;"}
+{"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,GACpB,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/StatusDot.js

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

package/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, 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"],"names":["StatusDotOnColor","StatusDotVariant","React"],"mappings":"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"}
+{"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/StatusDotList.js

@@ -1,27 +1,33 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import classNames from "classnames";
-import { S as StatusDot, a as StatusDotVariant } from "./StatusDot.js";
+import { r as StatusDotVariant, t as StatusDot_default } from "./StatusDot.js";
+import React from "react";
+import cn 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, { 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 })
-  ] });
+	const { additionalText, children, className = "", testId, stacking = "horizontal", hiddenForChild = false, topStatusDot, bottomStatusDot } = props;
+	return /* @__PURE__ */ jsxs("span", {
+		"data-testid": testId,
+		className: cn(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
+			})
+		]
+	});
 };
-export {
-  StatusDotList as S
-};
-//# sourceMappingURL=StatusDotList.js.map
+var StatusDotList_default$1 = StatusDotList;
+export { StatusDotList as n, StatusDotList_default$1 as t };
+
+//# sourceMappingURL=StatusDotList.js.map

package/StatusDotList.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDotList.js","sources":["../src/components/ElementHeader/StatusDotList/StatusDotList.tsx"],"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"],"names":["cn"],"mappings":";;;;AA6BO,MAAM,gBAAmC,CAAA,UAAS;AACvD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,SACE,qBAAC,QAAA,EAAK,eAAa,QAAQ,WAAWA,WAAG,OAAO,eAAe,GAAG,SAAS,GACxE,UAAA;AAAA,IAAA;AAAA,IAEA,kBAAkB,oBAAC,WAAA,EAAU,SAAS,iBAAiB,QAAQ,MAAK,qBAAoB;AAAA,IACzF,oBAAC,UAAK,iBAAe,UAAU,WAAW,OAAO,yBAAyB,GACvE,UACH;AAAA,IACC;AAAA,IACA,kBAAkB,oBAAC,QAAA,EAAK,WAAW,OAAO,gCAAgC,GAAI,UAAA,eAAA,CAAe;AAAA,EAAA,GAChG;AAEJ;"}
+{"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,GAAG,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"}