@helsenorge/designsystem-react 10.1.0 → 10.2.0

package/PopOver.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopOver.js","sources":["../src/components/PopOver/utils.ts","../src/components/PopOver/PopOver.tsx"],"sourcesContent":["import { CSSProperties } from 'react';\n\nimport { PopOverVariant } from './PopOver';\n\ntype HorizontalPosition = 'left' | 'right' | 'floating';\ntype BubblePosition = 'leftabove' | 'leftbelow' | 'rightabove' | 'rightbelow' | 'floatingabove' | 'floatingbelow';\n\n/** Bredde på hjelpeboble */\nconst BUBBLE_WIDTH_PX = 373;\n/** Hjelpeboblen skal holde avstand til venstre/høyre kant på vinduet */\nconst WINDOW_MARGIN_PX = 12;\n/** Vertikal avstand fra hjelpeboble til kontroller */\nconst BUBBLE_VERTICAL_OFFSET_PX = 16;\n/** Høyde/bredde på pil */\nconst ARROW_WIDTH_PX = 20;\n/** Avstand fra pil til hjelpeboble */\nconst ARROW_VERTICAL_OFFSET_PX = 4;\n/** Pilen skal holde avstand til venstre/høyre kant av hjelpeboblen */\nconst ARROW_HORIZONTAL_MARGIN_PX = 12;\n\n/**\n * Beregn om hjelpeboblen skal vises over eller under kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under/automatisk)\n * @returns Om hjelpeboblen skal vises over eller under\n */\nexport const getVerticalPosition = (\n  controllerSize: DOMRect,\n  bubbleSize: DOMRect,\n  variant: keyof typeof PopOverVariant\n): keyof typeof PopOverVariant => {\n  if (variant !== PopOverVariant.positionautomatic) {\n    return variant;\n  }\n  if (controllerSize.top > bubbleSize.height + BUBBLE_VERTICAL_OFFSET_PX) {\n    return PopOverVariant.positionabove;\n  } else {\n    return PopOverVariant.positionbelow;\n  }\n};\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerLeftCenterPx = (controllerSize: DOMRect): number => controllerSize.left + controllerSize.width / 2;\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til høyre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerRightCenterPx = (controllerSize: DOMRect): number =>\n  document.documentElement.clientWidth - controllerSize.right + controllerSize.width / 2;\n\n/**\n * Finn venstre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Venstre kant av hjelpeboblen i px\n */\nconst getBubbleLeftPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const controllerHorizontalCenterPx = getControllerLeftCenterPx(controllerSize);\n\n  return controllerHorizontalCenterPx - bubbleSize.width / 2;\n};\n\n/**\n * Finn høyre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Høyre kant av hjelpeboblen i px\n */\nconst getBubbleRightPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx + bubbleSize.width;\n};\n\n/**\n * Sjekk om venstre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom venstre kant er innenfor vinduet\n */\nconst getBubbleLeftVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx > WINDOW_MARGIN_PX;\n};\n\n/**\n * Sjekk om høyre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom høyre kant er innenfor vinduet\n */\nconst getBubbleRightIsVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleRightPx = getBubbleRightPx(controllerSize, bubbleSize);\n\n  return bubbleRightPx < document.documentElement.clientWidth - WINDOW_MARGIN_PX;\n};\n\n/**\n * Finn riktig horisontal plassering til hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns left, right eller floating\n */\nconst getHorizontalPosition = (controllerSize: DOMRect, bubbleSize: DOMRect): HorizontalPosition => {\n  if (!getBubbleRightIsVisible(controllerSize, bubbleSize)) {\n    return 'right';\n  }\n  if (!getBubbleLeftVisible(controllerSize, bubbleSize)) {\n    return 'left';\n  }\n\n  return 'floating';\n};\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleAbovePx = (controllerSize: DOMRect, bubbleSize: DOMRect): number =>\n  controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - bubbleSize.height;\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises under\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleBelowPx = (controllerSize: DOMRect): number => controllerSize.bottom + BUBBLE_VERTICAL_OFFSET_PX;\n\n/**\n * Finn maks bredde på hjelpeboblen i forhold til vinduet\n * @returns Bredde på hjelpeboblen i px\n */\nconst getBubbleWidth = (): number => document.documentElement.clientWidth - WINDOW_MARGIN_PX * 2;\n\n/**\n * Sjekk om hjelpeboblen har plass i vinduet\n * @returns true dersom det er plass til hjelpeboblen i vinduet\n */\nconst getBubbleFitsInWindow = (): boolean => {\n  return document.documentElement.clientWidth > BUBBLE_WIDTH_PX + WINDOW_MARGIN_PX * 2;\n};\n\n/**\n * Finn vertikal plassering av pilen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @returns \"Top\" for pilen i px\n */\nconst getArrowTopxPx = (controllerSize: DOMRect): number => controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - ARROW_VERTICAL_OFFSET_PX;\n\n/**\n * Finn horisontal plassering av pilen i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowLeftPx = (controllerSize: DOMRect): number => getControllerLeftCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn horisontal plassering av pilen\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowRightPx = (controllerSize: DOMRect): number => getControllerRightCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns Beste mulige plassering av hjelpeboblen\n */\nconst getBubblePosition = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): BubblePosition => {\n  const horizontalPosition = getHorizontalPosition(controllerSize, bubbleSize);\n  const verticalPosition = getVerticalPosition(controllerSize, bubbleSize, variant);\n\n  if (horizontalPosition === 'left') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'leftabove';\n    }\n    return 'leftbelow';\n  }\n\n  if (horizontalPosition === 'right') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'rightabove';\n    }\n    return 'rightbelow';\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return 'floatingabove';\n  }\n\n  return 'floatingbelow';\n};\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer hjelpeboblen riktig\n */\nexport const getBubbleStyle = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): CSSProperties => {\n  const bubblePosition = getBubblePosition(controllerSize, bubbleSize, variant);\n  const bubbleWidth = !getBubbleFitsInWindow() ? getBubbleWidth() : undefined;\n\n  if (bubblePosition === 'leftabove') {\n    return {\n      left: WINDOW_MARGIN_PX,\n      top: getBubbleAbovePx(controllerSize, bubbleSize),\n      width: bubbleWidth,\n    };\n  }\n  if (bubblePosition === 'leftbelow') {\n    return { left: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightabove') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightbelow') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  if (bubblePosition === 'floatingbelow') {\n    return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n};\n\n/**\n * Finn riktig plassering av pilen\n * @param bubbleStyle CSSProperties for hjelpeboblen\n * @param controllerSize DOMRect for kontrolleren\n * @param verticalPosition Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer pilen riktig\n */\nexport const getArrowStyle = (\n  bubbleStyle: CSSProperties,\n  controllerSize: DOMRect,\n  verticalPosition: keyof typeof PopOverVariant\n): CSSProperties => {\n  const leftPx = getArrowLeftPx(controllerSize);\n  const rightPx = getArrowRightPx(controllerSize);\n  const minLeftPx = (bubbleStyle.left as number) + ARROW_HORIZONTAL_MARGIN_PX;\n  const minRightPx = (bubbleStyle.right as number) + ARROW_HORIZONTAL_MARGIN_PX;\n\n  if (bubbleStyle.right) {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return {\n        right: rightPx > minRightPx ? rightPx : minRightPx,\n        top: getArrowTopxPx(controllerSize),\n      };\n    }\n\n    return {\n      right: rightPx > minRightPx ? rightPx : minRightPx,\n      top: controllerSize.bottom,\n    };\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return {\n      left: leftPx > minLeftPx ? leftPx : minLeftPx,\n      top: getArrowTopxPx(controllerSize),\n    };\n  }\n\n  return {\n    left: leftPx > minLeftPx ? leftPx : minLeftPx,\n    top: controllerSize.bottom,\n  };\n};\n","import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getArrowStyle, getBubbleStyle, getVerticalPosition } from './utils';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useInterval } from '../../hooks/useInterval';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { useSize } from '../../hooks/useSize';\nimport { mergeRefs } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport enum PopOverVariant {\n  positionautomatic = 'positionautomatic',\n  positionbelow = 'positionbelow',\n  positionabove = 'positionabove',\n}\n\nexport type PopOverRole = 'tooltip';\n\nexport interface PopOverProps {\n  /** Id of the PopOver */\n  id?: string;\n  /** Content shown inside PopOver. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n  children: React.ReactNode;\n  /** Ref for the element the PopOver is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n  /** Ref for the element the PopOver is placed upon */\n  popOverRef?: React.RefObject<HTMLDivElement>;\n  /** Show the popover. Only applies when role=tooltip. Default: false. */\n  show?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the arrow element. */\n  arrowClassName?: string;\n  /** Determines the placement of the popover. Default: automatic positioning. */\n  variant?: keyof typeof PopOverVariant;\n  /** Sets role of the PopOver element */\n  role?: PopOverRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Overrides the default z-index of PopOver */\n  zIndex?: number;\n}\n\nconst PopOver = React.forwardRef<HTMLDivElement | SVGSVGElement, PopOverProps>((props, ref) => {\n  const {\n    id,\n    children,\n    controllerRef,\n    popOverRef,\n    show = false,\n    className = '',\n    variant = PopOverVariant.positionautomatic,\n    role,\n    testId,\n    arrowClassName,\n    zIndex = ZIndex.PopOver,\n  } = props;\n\n  const bubbleRef = popOverRef || useRef<HTMLDivElement>(null);\n  const arrowRef = useRef<HTMLDivElement>(null);\n  const bubbleSize = useSize(bubbleRef);\n  const [controllerSize, setControllerSize] = useState<DOMRect>();\n  const controllerisVisible = useIsVisible(bubbleRef, 0);\n\n  const updateControllerSize = (): void => {\n    setControllerSize(controllerRef.current?.getBoundingClientRect());\n  };\n\n  useInterval(updateControllerSize, 500);\n  useLayoutEvent(updateControllerSize, ['scroll', 'resize'], 10);\n\n  useEffect(() => {\n    updateControllerSize();\n  }, []);\n\n  const isTooltip = role === 'tooltip';\n\n  const popOverClasses = classNames(styles.popover, { [styles['popover--visible']]: isTooltip ? show : controllerisVisible }, className);\n  const verticalPosition = controllerSize && bubbleSize && getVerticalPosition(controllerSize, bubbleSize, variant);\n  const arrowClasses = classNames(styles.popover__arrow, arrowClassName, {\n    [styles['popover__arrow--over']]: verticalPosition === PopOverVariant.positionbelow,\n    [styles['popover__arrow--under']]: verticalPosition === PopOverVariant.positionabove,\n    [styles['popover__arrow--visible']]: isTooltip ? show : controllerisVisible,\n  });\n\n  const bubbleStyle = controllerSize && bubbleSize && getBubbleStyle(controllerSize, bubbleSize, variant);\n  const arrowStyle = bubbleStyle && controllerSize && verticalPosition && getArrowStyle(bubbleStyle, controllerSize, verticalPosition);\n\n  return (\n    <>\n      <div\n        id={id}\n        ref={mergeRefs([ref, bubbleRef])}\n        className={popOverClasses}\n        style={{ ...bubbleStyle, zIndex }}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.PopOver}\n        role={role}\n      >\n        {children}\n      </div>\n      <div ref={arrowRef} className={arrowClasses} style={{ ...arrowStyle, zIndex }} />\n    </>\n  );\n});\n\nPopOver.displayName = 'PopOver';\n\nexport default PopOver;\n"],"names":["PopOverVariant"],"mappings":"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"}
+{"version":3,"file":"PopOver.js","sources":["../src/components/PopOver/utils.ts","../src/components/PopOver/PopOver.tsx"],"sourcesContent":["import { CSSProperties } from 'react';\n\nimport { PopOverVariant } from './PopOver';\n\ntype HorizontalPosition = 'left' | 'right' | 'floating';\ntype BubblePosition = 'leftabove' | 'leftbelow' | 'rightabove' | 'rightbelow' | 'floatingabove' | 'floatingbelow';\n\n/** Bredde på hjelpeboble */\nconst BUBBLE_WIDTH_PX = 373;\n/** Hjelpeboblen skal holde avstand til venstre/høyre kant på vinduet */\nconst WINDOW_MARGIN_PX = 12;\n/** Vertikal avstand fra hjelpeboble til kontroller */\nconst BUBBLE_VERTICAL_OFFSET_PX = 16;\n/** Høyde/bredde på pil */\nconst ARROW_WIDTH_PX = 20;\n/** Avstand fra pil til hjelpeboble */\nconst ARROW_VERTICAL_OFFSET_PX = 4;\n/** Pilen skal holde avstand til venstre/høyre kant av hjelpeboblen */\nconst ARROW_HORIZONTAL_MARGIN_PX = 12;\n\n/**\n * Beregn om hjelpeboblen skal vises over eller under kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under/automatisk)\n * @returns Om hjelpeboblen skal vises over eller under\n */\nexport const getVerticalPosition = (\n  controllerSize: DOMRect,\n  bubbleSize: DOMRect,\n  variant: keyof typeof PopOverVariant\n): keyof typeof PopOverVariant => {\n  if (variant !== PopOverVariant.positionautomatic) {\n    return variant;\n  }\n  if (controllerSize.top > bubbleSize.height + BUBBLE_VERTICAL_OFFSET_PX) {\n    return PopOverVariant.positionabove;\n  } else {\n    return PopOverVariant.positionbelow;\n  }\n};\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerLeftCenterPx = (controllerSize: DOMRect): number => controllerSize.left + controllerSize.width / 2;\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til høyre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerRightCenterPx = (controllerSize: DOMRect): number =>\n  document.documentElement.clientWidth - controllerSize.right + controllerSize.width / 2;\n\n/**\n * Finn venstre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Venstre kant av hjelpeboblen i px\n */\nconst getBubbleLeftPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const controllerHorizontalCenterPx = getControllerLeftCenterPx(controllerSize);\n\n  return controllerHorizontalCenterPx - bubbleSize.width / 2;\n};\n\n/**\n * Finn høyre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Høyre kant av hjelpeboblen i px\n */\nconst getBubbleRightPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx + bubbleSize.width;\n};\n\n/**\n * Sjekk om venstre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom venstre kant er innenfor vinduet\n */\nconst getBubbleLeftVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx > WINDOW_MARGIN_PX;\n};\n\n/**\n * Sjekk om høyre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom høyre kant er innenfor vinduet\n */\nconst getBubbleRightIsVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleRightPx = getBubbleRightPx(controllerSize, bubbleSize);\n\n  return bubbleRightPx < document.documentElement.clientWidth - WINDOW_MARGIN_PX;\n};\n\n/**\n * Finn riktig horisontal plassering til hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns left, right eller floating\n */\nconst getHorizontalPosition = (controllerSize: DOMRect, bubbleSize: DOMRect): HorizontalPosition => {\n  if (!getBubbleRightIsVisible(controllerSize, bubbleSize)) {\n    return 'right';\n  }\n  if (!getBubbleLeftVisible(controllerSize, bubbleSize)) {\n    return 'left';\n  }\n\n  return 'floating';\n};\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleAbovePx = (controllerSize: DOMRect, bubbleSize: DOMRect): number =>\n  controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - bubbleSize.height;\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises under\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleBelowPx = (controllerSize: DOMRect): number => controllerSize.bottom + BUBBLE_VERTICAL_OFFSET_PX;\n\n/**\n * Finn maks bredde på hjelpeboblen i forhold til vinduet\n * @returns Bredde på hjelpeboblen i px\n */\nconst getBubbleWidth = (): number => document.documentElement.clientWidth - WINDOW_MARGIN_PX * 2;\n\n/**\n * Sjekk om hjelpeboblen har plass i vinduet\n * @returns true dersom det er plass til hjelpeboblen i vinduet\n */\nconst getBubbleFitsInWindow = (): boolean => {\n  return document.documentElement.clientWidth > BUBBLE_WIDTH_PX + WINDOW_MARGIN_PX * 2;\n};\n\n/**\n * Finn vertikal plassering av pilen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @returns \"Top\" for pilen i px\n */\nconst getArrowTopxPx = (controllerSize: DOMRect): number => controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - ARROW_VERTICAL_OFFSET_PX;\n\n/**\n * Finn horisontal plassering av pilen i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowLeftPx = (controllerSize: DOMRect): number => getControllerLeftCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn horisontal plassering av pilen\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowRightPx = (controllerSize: DOMRect): number => getControllerRightCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns Beste mulige plassering av hjelpeboblen\n */\nconst getBubblePosition = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): BubblePosition => {\n  const horizontalPosition = getHorizontalPosition(controllerSize, bubbleSize);\n  const verticalPosition = getVerticalPosition(controllerSize, bubbleSize, variant);\n\n  if (horizontalPosition === 'left') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'leftabove';\n    }\n    return 'leftbelow';\n  }\n\n  if (horizontalPosition === 'right') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'rightabove';\n    }\n    return 'rightbelow';\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return 'floatingabove';\n  }\n\n  return 'floatingbelow';\n};\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer hjelpeboblen riktig\n */\nexport const getBubbleStyle = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): CSSProperties => {\n  const bubblePosition = getBubblePosition(controllerSize, bubbleSize, variant);\n  const bubbleWidth = !getBubbleFitsInWindow() ? getBubbleWidth() : undefined;\n\n  if (bubblePosition === 'leftabove') {\n    return {\n      left: WINDOW_MARGIN_PX,\n      top: getBubbleAbovePx(controllerSize, bubbleSize),\n      width: bubbleWidth,\n    };\n  }\n  if (bubblePosition === 'leftbelow') {\n    return { left: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightabove') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightbelow') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  if (bubblePosition === 'floatingbelow') {\n    return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n};\n\n/**\n * Finn riktig plassering av pilen\n * @param bubbleStyle CSSProperties for hjelpeboblen\n * @param controllerSize DOMRect for kontrolleren\n * @param verticalPosition Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer pilen riktig\n */\nexport const getArrowStyle = (\n  bubbleStyle: CSSProperties,\n  controllerSize: DOMRect,\n  verticalPosition: keyof typeof PopOverVariant\n): CSSProperties => {\n  const leftPx = getArrowLeftPx(controllerSize);\n  const rightPx = getArrowRightPx(controllerSize);\n  const minLeftPx = (bubbleStyle.left as number) + ARROW_HORIZONTAL_MARGIN_PX;\n  const minRightPx = (bubbleStyle.right as number) + ARROW_HORIZONTAL_MARGIN_PX;\n\n  if (bubbleStyle.right) {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return {\n        right: rightPx > minRightPx ? rightPx : minRightPx,\n        top: getArrowTopxPx(controllerSize),\n      };\n    }\n\n    return {\n      right: rightPx > minRightPx ? rightPx : minRightPx,\n      top: controllerSize.bottom,\n    };\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return {\n      left: leftPx > minLeftPx ? leftPx : minLeftPx,\n      top: getArrowTopxPx(controllerSize),\n    };\n  }\n\n  return {\n    left: leftPx > minLeftPx ? leftPx : minLeftPx,\n    top: controllerSize.bottom,\n  };\n};\n","import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getArrowStyle, getBubbleStyle, getVerticalPosition } from './utils';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useInterval } from '../../hooks/useInterval';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { useSize } from '../../hooks/useSize';\nimport { mergeRefs } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport enum PopOverVariant {\n  positionautomatic = 'positionautomatic',\n  positionbelow = 'positionbelow',\n  positionabove = 'positionabove',\n}\n\nexport type PopOverRole = 'tooltip';\n\nexport interface PopOverProps {\n  /** Id of the PopOver */\n  id?: string;\n  /** Content shown inside PopOver. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n  children: React.ReactNode;\n  /** Ref for the element the PopOver is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n  /** Ref for the element the PopOver is placed upon */\n  popOverRef?: React.RefObject<HTMLDivElement>;\n  /** Show the popover. Only applies when role=tooltip. Default: false. */\n  show?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the arrow element. */\n  arrowClassName?: string;\n  /** Determines the placement of the popover. Default: automatic positioning. */\n  variant?: keyof typeof PopOverVariant;\n  /** Sets role of the PopOver element */\n  role?: PopOverRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Overrides the default z-index of PopOver */\n  zIndex?: number;\n}\n\nconst PopOver = React.forwardRef<HTMLDivElement | SVGSVGElement, PopOverProps>((props, ref) => {\n  const {\n    id,\n    children,\n    controllerRef,\n    popOverRef,\n    show = false,\n    className = '',\n    variant = PopOverVariant.positionautomatic,\n    role,\n    testId,\n    arrowClassName,\n    zIndex = ZIndex.PopOver,\n  } = props;\n\n  const bubbleRef = popOverRef || useRef<HTMLDivElement>(null);\n  const arrowRef = useRef<HTMLDivElement>(null);\n  const bubbleSize = useSize(bubbleRef);\n  const [controllerSize, setControllerSize] = useState<DOMRect>();\n  const controllerisVisible = useIsVisible(bubbleRef, 0);\n\n  const updateControllerSize = (): void => {\n    setControllerSize(controllerRef.current?.getBoundingClientRect());\n  };\n\n  useInterval(updateControllerSize, 500);\n  useLayoutEvent(updateControllerSize, ['scroll', 'resize'], 10);\n\n  useEffect(() => {\n    updateControllerSize();\n  }, []);\n\n  const isTooltip = role === 'tooltip';\n\n  const popOverClasses = classNames(styles.popover, { [styles['popover--visible']]: isTooltip ? show : controllerisVisible }, className);\n  const verticalPosition = controllerSize && bubbleSize && getVerticalPosition(controllerSize, bubbleSize, variant);\n  const arrowClasses = classNames(styles.popover__arrow, arrowClassName, {\n    [styles['popover__arrow--over']]: verticalPosition === PopOverVariant.positionbelow,\n    [styles['popover__arrow--under']]: verticalPosition === PopOverVariant.positionabove,\n    [styles['popover__arrow--visible']]: isTooltip ? show : controllerisVisible,\n  });\n\n  const bubbleStyle = controllerSize && bubbleSize && getBubbleStyle(controllerSize, bubbleSize, variant);\n  const arrowStyle = bubbleStyle && controllerSize && verticalPosition && getArrowStyle(bubbleStyle, controllerSize, verticalPosition);\n\n  return (\n    <>\n      <div\n        id={id}\n        ref={mergeRefs([ref, bubbleRef])}\n        className={popOverClasses}\n        style={{ ...bubbleStyle, zIndex }}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.PopOver}\n        role={role}\n      >\n        {children}\n      </div>\n      <div ref={arrowRef} className={arrowClasses} style={{ ...arrowStyle, zIndex }} />\n    </>\n  );\n});\n\nPopOver.displayName = 'PopOver';\n\nexport default PopOver;\n"],"names":["PopOverVariant","React"],"mappings":";;;;;;;;;;AAQA,MAAM,kBAAkB;AAExB,MAAM,mBAAmB;AAEzB,MAAM,4BAA4B;AAElC,MAAM,iBAAiB;AAEvB,MAAM,2BAA2B;AAEjC,MAAM,6BAA6B;AAS5B,MAAM,sBAAsB,CACjC,gBACA,YACA,YACgC;AAC5B,MAAA,YAAY,eAAe,mBAAmB;AACzC,WAAA;AAAA,EAAA;AAET,MAAI,eAAe,MAAM,WAAW,SAAS,2BAA2B;AACtE,WAAO,eAAe;AAAA,EAAA,OACjB;AACL,WAAO,eAAe;AAAA,EAAA;AAE1B;AAOA,MAAM,4BAA4B,CAAC,mBAAoC,eAAe,OAAO,eAAe,QAAQ;AAOpH,MAAM,6BAA6B,CAAC,mBAClC,SAAS,gBAAgB,cAAc,eAAe,QAAQ,eAAe,QAAQ;AAQvF,MAAM,kBAAkB,CAAC,gBAAyB,eAAgC;AAC1E,QAAA,+BAA+B,0BAA0B,cAAc;AAEtE,SAAA,+BAA+B,WAAW,QAAQ;AAC3D;AAQA,MAAM,mBAAmB,CAAC,gBAAyB,eAAgC;AAC3E,QAAA,eAAe,gBAAgB,gBAAgB,UAAU;AAE/D,SAAO,eAAe,WAAW;AACnC;AAQA,MAAM,uBAAuB,CAAC,gBAAyB,eAAiC;AAChF,QAAA,eAAe,gBAAgB,gBAAgB,UAAU;AAE/D,SAAO,eAAe;AACxB;AAQA,MAAM,0BAA0B,CAAC,gBAAyB,eAAiC;AACnF,QAAA,gBAAgB,iBAAiB,gBAAgB,UAAU;AAE1D,SAAA,gBAAgB,SAAS,gBAAgB,cAAc;AAChE;AAQA,MAAM,wBAAwB,CAAC,gBAAyB,eAA4C;AAClG,MAAI,CAAC,wBAAwB,gBAAgB,UAAU,GAAG;AACjD,WAAA;AAAA,EAAA;AAET,MAAI,CAAC,qBAAqB,gBAAgB,UAAU,GAAG;AAC9C,WAAA;AAAA,EAAA;AAGF,SAAA;AACT;AAQA,MAAM,mBAAmB,CAAC,gBAAyB,eACjD,eAAe,MAAM,4BAA4B,WAAW;AAQ9D,MAAM,mBAAmB,CAAC,mBAAoC,eAAe,SAAS;AAMtF,MAAM,iBAAiB,MAAc,SAAS,gBAAgB,cAAc,mBAAmB;AAM/F,MAAM,wBAAwB,MAAe;AAC3C,SAAO,SAAS,gBAAgB,cAAc,kBAAkB,mBAAmB;AACrF;AAOA,MAAM,iBAAiB,CAAC,mBAAoC,eAAe,MAAM,4BAA4B;AAO7G,MAAM,iBAAiB,CAAC,mBAAoC,0BAA0B,cAAc,IAAI,iBAAiB;AAOzH,MAAM,kBAAkB,CAAC,mBAAoC,2BAA2B,cAAc,IAAI,iBAAiB;AAS3H,MAAM,oBAAoB,CAAC,gBAAyB,YAAqB,YAAyD;AAC1H,QAAA,qBAAqB,sBAAsB,gBAAgB,UAAU;AAC3E,QAAM,mBAAmB,oBAAoB,gBAAgB,YAAY,OAAO;AAEhF,MAAI,uBAAuB,QAAQ;AAC7B,QAAA,qBAAqB,eAAe,eAAe;AAC9C,aAAA;AAAA,IAAA;AAEF,WAAA;AAAA,EAAA;AAGT,MAAI,uBAAuB,SAAS;AAC9B,QAAA,qBAAqB,eAAe,eAAe;AAC9C,aAAA;AAAA,IAAA;AAEF,WAAA;AAAA,EAAA;AAGL,MAAA,qBAAqB,eAAe,eAAe;AAC9C,WAAA;AAAA,EAAA;AAGF,SAAA;AACT;AASO,MAAM,iBAAiB,CAAC,gBAAyB,YAAqB,YAAwD;AACnI,QAAM,iBAAiB,kBAAkB,gBAAgB,YAAY,OAAO;AAC5E,QAAM,cAAc,CAAC,0BAA0B,eAAmB,IAAA;AAElE,MAAI,mBAAmB,aAAa;AAC3B,WAAA;AAAA,MACL,MAAM;AAAA,MACN,KAAK,iBAAiB,gBAAgB,UAAU;AAAA,MAChD,OAAO;AAAA,IACT;AAAA,EAAA;AAEF,MAAI,mBAAmB,aAAa;AAC3B,WAAA,EAAE,MAAM,kBAAkB,KAAK,iBAAiB,cAAc,GAAG,OAAO,YAAY;AAAA,EAAA;AAE7F,MAAI,mBAAmB,cAAc;AAC5B,WAAA,EAAE,OAAO,kBAAkB,KAAK,iBAAiB,gBAAgB,UAAU,GAAG,OAAO,YAAY;AAAA,EAAA;AAE1G,MAAI,mBAAmB,cAAc;AAC5B,WAAA,EAAE,OAAO,kBAAkB,KAAK,iBAAiB,cAAc,GAAG,OAAO,YAAY;AAAA,EAAA;AAG9F,MAAI,mBAAmB,iBAAiB;AAC/B,WAAA,EAAE,MAAM,gBAAgB,gBAAgB,UAAU,GAAG,KAAK,iBAAiB,cAAc,GAAG,OAAO,YAAY;AAAA,EAAA;AAGxH,SAAO,EAAE,MAAM,gBAAgB,gBAAgB,UAAU,GAAG,KAAK,iBAAiB,gBAAgB,UAAU,GAAG,OAAO,YAAY;AACpI;AASO,MAAM,gBAAgB,CAC3B,aACA,gBACA,qBACkB;AACZ,QAAA,SAAS,eAAe,cAAc;AACtC,QAAA,UAAU,gBAAgB,cAAc;AACxC,QAAA,YAAa,YAAY,OAAkB;AAC3C,QAAA,aAAc,YAAY,QAAmB;AAEnD,MAAI,YAAY,OAAO;AACjB,QAAA,qBAAqB,eAAe,eAAe;AAC9C,aAAA;AAAA,QACL,OAAO,UAAU,aAAa,UAAU;AAAA,QACxC,KAAK,eAAe,cAAc;AAAA,MACpC;AAAA,IAAA;AAGK,WAAA;AAAA,MACL,OAAO,UAAU,aAAa,UAAU;AAAA,MACxC,KAAK,eAAe;AAAA,IACtB;AAAA,EAAA;AAGE,MAAA,qBAAqB,eAAe,eAAe;AAC9C,WAAA;AAAA,MACL,MAAM,SAAS,YAAY,SAAS;AAAA,MACpC,KAAK,eAAe,cAAc;AAAA,IACpC;AAAA,EAAA;AAGK,SAAA;AAAA,IACL,MAAM,SAAS,YAAY,SAAS;AAAA,IACpC,KAAK,eAAe;AAAA,EACtB;AACF;AC7QY,IAAA,mCAAAA,oBAAL;AACLA,kBAAA,mBAAoB,IAAA;AACpBA,kBAAA,eAAgB,IAAA;AAChBA,kBAAA,eAAgB,IAAA;AAHNA,SAAAA;AAAA,GAAA,kBAAA,CAAA,CAAA;AAiCZ,MAAM,UAAUC,eAAM,WAAyD,CAAC,OAAO,QAAQ;AACvF,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,OAAO;AAAA,EAAA,IACd;AAEE,QAAA,YAAY,cAAc,OAAuB,IAAI;AACrD,QAAA,WAAW,OAAuB,IAAI;AACtC,QAAA,aAAa,QAAQ,SAAS;AACpC,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAkB;AACxD,QAAA,sBAAsB,aAAa,WAAW,CAAC;AAErD,QAAM,uBAAuB,MAAY;;AACrB,uBAAA,mBAAc,YAAd,mBAAuB,uBAAuB;AAAA,EAClE;AAEA,cAAY,sBAAsB,GAAG;AACrC,iBAAe,sBAAsB,CAAC,UAAU,QAAQ,GAAG,EAAE;AAE7D,YAAU,MAAM;AACO,yBAAA;AAAA,EACvB,GAAG,EAAE;AAEL,QAAM,YAAY,SAAS;AAE3B,QAAM,iBAAiB,WAAW,OAAO,SAAS,EAAE,CAAC,OAAO,kBAAkB,CAAC,GAAG,YAAY,OAAO,oBAAA,GAAuB,SAAS;AACrI,QAAM,mBAAmB,kBAAkB,cAAc,oBAAoB,gBAAgB,YAAY,OAAO;AAChH,QAAM,eAAe,WAAW,OAAO,gBAAgB,gBAAgB;AAAA,IACrE,CAAC,OAAO,sBAAsB,CAAC,GAAG,qBAAqB;AAAA,IACvD,CAAC,OAAO,uBAAuB,CAAC,GAAG,qBAAqB;AAAA,IACxD,CAAC,OAAO,yBAAyB,CAAC,GAAG,YAAY,OAAO;AAAA,EAAA,CACzD;AAED,QAAM,cAAc,kBAAkB,cAAc,eAAe,gBAAgB,YAAY,OAAO;AACtG,QAAM,aAAa,eAAe,kBAAkB,oBAAoB,cAAc,aAAa,gBAAgB,gBAAgB;AAEnI,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,KAAK,UAAU,CAAC,KAAK,SAAS,CAAC;AAAA,QAC/B,WAAW;AAAA,QACX,OAAO,EAAE,GAAG,aAAa,OAAO;AAAA,QAChC,eAAa;AAAA,QACb,oBAAkB,YAAY;AAAA,QAC9B;AAAA,QAEC;AAAA,MAAA;AAAA,IACH;AAAA,IACA,oBAAC,OAAI,EAAA,KAAK,UAAU,WAAW,cAAc,OAAO,EAAE,GAAG,YAAY,OAAA,EAAU,CAAA;AAAA,EAAA,GACjF;AAEJ,CAAC;AAED,QAAQ,cAAc;"}

package/RadioButton.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import React, { useState } from "react";
+import React__default, { useState } from "react";
 import classNames from "classnames";
 import { FormOnColor, FormSize, AnalyticsId } from "./constants.js";
 import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
@@ -20,7 +20,7 @@ const getRadioLabelClasses = (radioId, onColor, large, checkedRadioId) => {
     [radioButtonStyles["radio-button-label__large--selected-invalid"]]: large && checked && onCherry
   });
 };
-const RadioButton = React.forwardRef((props, ref) => {
+const RadioButton = React__default.forwardRef((props, ref) => {
   const {
     className,
     defaultChecked,

package/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the radioButton. Large version only works when used inside a FormGroup wrapper. */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getRadioLabelClasses = (\n  radioId: string,\n  onColor: FormOnColor,\n  large: boolean,\n  checkedRadioId?: string\n): string | undefined => {\n  const onCherry = onColor === 'oninvalid';\n  const checked = radioId === checkedRadioId;\n\n  return classNames({\n    [radioButtonStyles['radio-button-label__large--on-grey']]: large && onColor === 'ongrey' && !checked,\n    [radioButtonStyles['radio-button-label__large--on-blueberry']]: onColor === 'onblueberry' && !checked && large,\n    [radioButtonStyles['radio-button-label__large--selected']]: large && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__large--selected-invalid']]: large && checked && onCherry,\n  });\n};\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ...rest\n  } = props;\n  const invalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onCherry = onColor === FormOnColor.oninvalid;\n  const isLarge = size === FormSize.large;\n  const [checked, changeChecked] = useState<boolean>();\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n  const errorTextUuid = useUuid(errorTextId);\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n    [radioButtonStyles['radio-button-wrapper__large--focused']]: isLarge && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(\n    radioButtonStyles['radio-button-label'],\n    {\n      [radioButtonStyles['radio-button-label--disabled']]: disabled,\n      [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n      [radioButtonStyles['radio-button-label--invalid']]: invalid,\n      [radioButtonStyles['radio-button-label__large']]: isLarge,\n      [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n    },\n    labelClassNames\n  );\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__large']]: isLarge,\n      [radioButtonStyles['radio-button__large--disabled']]: isLarge && disabled,\n      [radioButtonStyles['radio-button__large--invalid']]: isLarge && invalid,\n    },\n    className\n  );\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(e.target.checked);\n    onChange && onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\n      id={inputId}\n      name={name}\n      className={radioButtonClasses}\n      type=\"radio\"\n      disabled={disabled}\n      value={value}\n      ref={mergedRefs}\n      defaultChecked={defaultChecked}\n      aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n      required={required}\n      {...rest}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n        {renderLabelAsParent(\n          label,\n          getLabelContent(),\n          inputId,\n          onColor as FormOnColor,\n          radioButtonLabelClasses,\n          undefined,\n          radioButtonStyles['radiobutton-sublabel-wrapper'],\n          isLarge\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"RadioButton.js","sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the radioButton. Large version only works when used inside a FormGroup wrapper. */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getRadioLabelClasses = (\n  radioId: string,\n  onColor: FormOnColor,\n  large: boolean,\n  checkedRadioId?: string\n): string | undefined => {\n  const onCherry = onColor === 'oninvalid';\n  const checked = radioId === checkedRadioId;\n\n  return classNames({\n    [radioButtonStyles['radio-button-label__large--on-grey']]: large && onColor === 'ongrey' && !checked,\n    [radioButtonStyles['radio-button-label__large--on-blueberry']]: onColor === 'onblueberry' && !checked && large,\n    [radioButtonStyles['radio-button-label__large--selected']]: large && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__large--selected-invalid']]: large && checked && onCherry,\n  });\n};\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ...rest\n  } = props;\n  const invalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onCherry = onColor === FormOnColor.oninvalid;\n  const isLarge = size === FormSize.large;\n  const [checked, changeChecked] = useState<boolean>();\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n  const errorTextUuid = useUuid(errorTextId);\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n    [radioButtonStyles['radio-button-wrapper__large--focused']]: isLarge && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(\n    radioButtonStyles['radio-button-label'],\n    {\n      [radioButtonStyles['radio-button-label--disabled']]: disabled,\n      [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n      [radioButtonStyles['radio-button-label--invalid']]: invalid,\n      [radioButtonStyles['radio-button-label__large']]: isLarge,\n      [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n    },\n    labelClassNames\n  );\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__large']]: isLarge,\n      [radioButtonStyles['radio-button__large--disabled']]: isLarge && disabled,\n      [radioButtonStyles['radio-button__large--invalid']]: isLarge && invalid,\n    },\n    className\n  );\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(e.target.checked);\n    onChange && onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\n      id={inputId}\n      name={name}\n      className={radioButtonClasses}\n      type=\"radio\"\n      disabled={disabled}\n      value={value}\n      ref={mergedRefs}\n      defaultChecked={defaultChecked}\n      aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n      required={required}\n      {...rest}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n        {renderLabelAsParent(\n          label,\n          getLabelContent(),\n          inputId,\n          onColor as FormOnColor,\n          radioButtonLabelClasses,\n          undefined,\n          radioButtonStyles['radiobutton-sublabel-wrapper'],\n          isLarge\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"names":["React"],"mappings":"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"}

package/Select.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import classNames from "classnames";
 import { FormOnColor, AnalyticsId, IconSize, AVERAGE_CHARACTER_WIDTH_PX } from "./constants.js";
 import { useUuid } from "./hooks/useUuid.js";
@@ -18,7 +18,7 @@ const getIconColor = (invalid, disabled) => {
   const iconColor = invalid ? "cherry" : "blueberry";
   return disabled ? getColor("neutral", 500) : getColor(iconColor, 600);
 };
-const Select = React.forwardRef(function SelectForwardedRef(props, ref) {
+const Select = React__default.forwardRef(function SelectForwardedRef(props, ref) {
   const {
     className,
     children,

package/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.SelectHTMLAttributes<HTMLSelectElement>,\n      'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'\n    > {\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: React.ReactNode;\n  /** Changes the visuals of the component */\n  onColor?: keyof typeof FormOnColor;\n  /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n  /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n  defaultValue?: string | number;\n  /** Adds custom classes to the wrapper tag */\n  wrapperClassName?: string;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean) => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select = React.forwardRef(function SelectForwardedRef(props: SelectProps, ref: React.Ref<HTMLSelectElement>) {\n  const {\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    errorTextId,\n    errorWrapperClassName,\n    label,\n    selectId,\n    name = selectId,\n    onColor = FormOnColor.onwhite,\n    testId,\n    width,\n    required,\n    value,\n    defaultValue,\n    autoComplete = 'off',\n    wrapperClassName,\n    ...rest\n  } = props;\n\n  const uuid = useUuid(selectId);\n  const errorTextUuid = useUuid(errorTextId);\n  const onBlueberry = onColor === 'onblueberry';\n  const invalid = onColor === 'oninvalid' || !!errorText || !!error;\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectInnerWrapperClasses = classNames(\n    selectStyles['select-inner-wrapper'],\n    {\n      [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n      [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n      [selectStyles['select-inner-wrapper--invalid']]: invalid,\n      [selectStyles['select-inner-wrapper--disabled']]: disabled,\n    },\n    className\n  );\n\n  const selectClasses = classNames(selectStyles.select, {\n    [selectStyles['select--on-blueberry']]: onBlueberry,\n    [selectStyles['select--invalid']]: invalid,\n  });\n\n  const selectWrapperClasses = classNames(selectStyles['select-wrapper'], wrapperClassName);\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectWrapperClasses} style={{ maxWidth }}>\n        {renderLabel(label, uuid, onColor as FormOnColor)}\n        <div className={selectInnerWrapperClasses} data-testid={testId + '-inner-wrapper'}>\n          <Icon\n            className={selectStyles['select-arrow']}\n            svgIcon={ChevronDown}\n            color={iconColor}\n            size={IconSize.XSmall}\n            testId={testId + '-icon'}\n          />\n          <select\n            aria-invalid={!!invalid}\n            id={uuid}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n            aria-required={!!required}\n            value={value}\n            defaultValue={defaultValue}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            {...rest}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Select;\n"],"names":[],"mappings":";;;;;;;;;;;;AAmDA,MAAM,oBAAoB,CAAC,eAA+B;AACxD,QAAM,eAAe;AAErB,SAAO,QAAQ,aAAa,0BAA0B,QAAQ,YAAY;AAC5E;AAEA,MAAM,eAAe,CAAC,SAAkB,aAAsB;AACtD,QAAA,YAAY,UAAU,WAAW;AACvC,SAAO,WAAW,SAAS,WAAW,GAAG,IAAI,SAAS,WAAW,GAAG;AACtE;AAEO,MAAM,SAAS,MAAM,WAAW,SAAS,mBAAmB,OAAoB,KAAmC;AAClH,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU,YAAY;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AAEE,QAAA,OAAO,QAAQ,QAAQ;AACvB,QAAA,gBAAgB,QAAQ,WAAW;AACzC,QAAM,cAAc,YAAY;AAChC,QAAM,UAAU,YAAY,eAAe,CAAC,CAAC,aAAa,CAAC,CAAC;AAC5D,QAAM,YAAY,aAAa,SAAS,CAAC,CAAC,QAAQ;AAClD,QAAM,WAAW,QAAQ,kBAAkB,KAAK,IAAI;AAEpD,QAAM,4BAA4B;AAAA,IAChC,aAAa,sBAAsB;AAAA,IACnC;AAAA,MACE,CAAC,aAAa,mCAAmC,CAAC,GAAG,YAAY;AAAA,MACjE,CAAC,aAAa,oCAAoC,CAAC,GAAG;AAAA,MACtD,CAAC,aAAa,+BAA+B,CAAC,GAAG;AAAA,MACjD,CAAC,aAAa,gCAAgC,CAAC,GAAG;AAAA,IACpD;AAAA,IACA;AAAA,EACF;AAEM,QAAA,gBAAgB,WAAW,aAAa,QAAQ;AAAA,IACpD,CAAC,aAAa,sBAAsB,CAAC,GAAG;AAAA,IACxC,CAAC,aAAa,iBAAiB,CAAC,GAAG;AAAA,EAAA,CACpC;AAED,QAAM,uBAAuB,WAAW,aAAa,gBAAgB,GAAG,gBAAgB;AAExF,6BACG,cAAa,EAAA,WAAW,uBAAuB,WAAsB,aAAa,eACjF,UAAC,qBAAA,OAAA,EAAI,eAAa,QAAQ,oBAAkB,YAAY,QAAQ,WAAW,sBAAsB,OAAO,EAAE,SACvG,GAAA,UAAA;AAAA,IAAY,YAAA,OAAO,MAAM,OAAsB;AAAA,yBAC/C,OAAI,EAAA,WAAW,2BAA2B,eAAa,SAAS,kBAC/D,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,aAAa,cAAc;AAAA,UACtC,SAAS;AAAA,UACT,OAAO;AAAA,UACP,MAAM,SAAS;AAAA,UACf,QAAQ,SAAS;AAAA,QAAA;AAAA,MACnB;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,gBAAc,CAAC,CAAC;AAAA,UAChB,IAAI;AAAA,UACJ;AAAA,UACA,WAAW;AAAA,UACX;AAAA,UACA;AAAA,UACA;AAAA,UACA,oBAAkB,mBAAmB,OAAO,aAAa;AAAA,UACzD,iBAAe,CAAC,CAAC;AAAA,UACjB;AAAA,UACA;AAAA,UACA,cAAc,eAAe,eAAe;AAAA,UAC3C,GAAG;AAAA,UAEH;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EACF,CAAA;AAAA,EAAA,EAAA,CACF,EACF,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"Select.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.SelectHTMLAttributes<HTMLSelectElement>,\n      'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'\n    > {\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: React.ReactNode;\n  /** Changes the visuals of the component */\n  onColor?: keyof typeof FormOnColor;\n  /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n  /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n  defaultValue?: string | number;\n  /** Adds custom classes to the wrapper tag */\n  wrapperClassName?: string;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean) => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select = React.forwardRef(function SelectForwardedRef(props: SelectProps, ref: React.Ref<HTMLSelectElement>) {\n  const {\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    errorTextId,\n    errorWrapperClassName,\n    label,\n    selectId,\n    name = selectId,\n    onColor = FormOnColor.onwhite,\n    testId,\n    width,\n    required,\n    value,\n    defaultValue,\n    autoComplete = 'off',\n    wrapperClassName,\n    ...rest\n  } = props;\n\n  const uuid = useUuid(selectId);\n  const errorTextUuid = useUuid(errorTextId);\n  const onBlueberry = onColor === 'onblueberry';\n  const invalid = onColor === 'oninvalid' || !!errorText || !!error;\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectInnerWrapperClasses = classNames(\n    selectStyles['select-inner-wrapper'],\n    {\n      [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n      [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n      [selectStyles['select-inner-wrapper--invalid']]: invalid,\n      [selectStyles['select-inner-wrapper--disabled']]: disabled,\n    },\n    className\n  );\n\n  const selectClasses = classNames(selectStyles.select, {\n    [selectStyles['select--on-blueberry']]: onBlueberry,\n    [selectStyles['select--invalid']]: invalid,\n  });\n\n  const selectWrapperClasses = classNames(selectStyles['select-wrapper'], wrapperClassName);\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectWrapperClasses} style={{ maxWidth }}>\n        {renderLabel(label, uuid, onColor as FormOnColor)}\n        <div className={selectInnerWrapperClasses} data-testid={testId + '-inner-wrapper'}>\n          <Icon\n            className={selectStyles['select-arrow']}\n            svgIcon={ChevronDown}\n            color={iconColor}\n            size={IconSize.XSmall}\n            testId={testId + '-icon'}\n          />\n          <select\n            aria-invalid={!!invalid}\n            id={uuid}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n            aria-required={!!required}\n            value={value}\n            defaultValue={defaultValue}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            {...rest}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Select;\n"],"names":["React"],"mappings":";;;;;;;;;;;;AAmDA,MAAM,oBAAoB,CAAC,eAA+B;AACxD,QAAM,eAAe;AAErB,SAAO,QAAQ,aAAa,0BAA0B,QAAQ,YAAY;AAC5E;AAEA,MAAM,eAAe,CAAC,SAAkB,aAAsB;AACtD,QAAA,YAAY,UAAU,WAAW;AACvC,SAAO,WAAW,SAAS,WAAW,GAAG,IAAI,SAAS,WAAW,GAAG;AACtE;AAEO,MAAM,SAASA,eAAM,WAAW,SAAS,mBAAmB,OAAoB,KAAmC;AAClH,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU,YAAY;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AAEE,QAAA,OAAO,QAAQ,QAAQ;AACvB,QAAA,gBAAgB,QAAQ,WAAW;AACzC,QAAM,cAAc,YAAY;AAChC,QAAM,UAAU,YAAY,eAAe,CAAC,CAAC,aAAa,CAAC,CAAC;AAC5D,QAAM,YAAY,aAAa,SAAS,CAAC,CAAC,QAAQ;AAClD,QAAM,WAAW,QAAQ,kBAAkB,KAAK,IAAI;AAEpD,QAAM,4BAA4B;AAAA,IAChC,aAAa,sBAAsB;AAAA,IACnC;AAAA,MACE,CAAC,aAAa,mCAAmC,CAAC,GAAG,YAAY;AAAA,MACjE,CAAC,aAAa,oCAAoC,CAAC,GAAG;AAAA,MACtD,CAAC,aAAa,+BAA+B,CAAC,GAAG;AAAA,MACjD,CAAC,aAAa,gCAAgC,CAAC,GAAG;AAAA,IACpD;AAAA,IACA;AAAA,EACF;AAEM,QAAA,gBAAgB,WAAW,aAAa,QAAQ;AAAA,IACpD,CAAC,aAAa,sBAAsB,CAAC,GAAG;AAAA,IACxC,CAAC,aAAa,iBAAiB,CAAC,GAAG;AAAA,EAAA,CACpC;AAED,QAAM,uBAAuB,WAAW,aAAa,gBAAgB,GAAG,gBAAgB;AAExF,6BACG,cAAa,EAAA,WAAW,uBAAuB,WAAsB,aAAa,eACjF,UAAC,qBAAA,OAAA,EAAI,eAAa,QAAQ,oBAAkB,YAAY,QAAQ,WAAW,sBAAsB,OAAO,EAAE,SACvG,GAAA,UAAA;AAAA,IAAY,YAAA,OAAO,MAAM,OAAsB;AAAA,yBAC/C,OAAI,EAAA,WAAW,2BAA2B,eAAa,SAAS,kBAC/D,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,aAAa,cAAc;AAAA,UACtC,SAAS;AAAA,UACT,OAAO;AAAA,UACP,MAAM,SAAS;AAAA,UACf,QAAQ,SAAS;AAAA,QAAA;AAAA,MACnB;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,gBAAc,CAAC,CAAC;AAAA,UAChB,IAAI;AAAA,UACJ;AAAA,UACA,WAAW;AAAA,UACX;AAAA,UACA;AAAA,UACA;AAAA,UACA,oBAAkB,mBAAmB,OAAO,aAAa;AAAA,UACzD,iBAAe,CAAC,CAAC;AAAA,UACjB;AAAA,UACA;AAAA,UACA,cAAc,eAAe,eAAe;AAAA,UAC3C,GAAG;AAAA,UAEH;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EACF,CAAA;AAAA,EAAA,EAAA,CACF,EACF,CAAA;AAEJ,CAAC;"}

package/Slider.js

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import React, { useState, useRef, useEffect } from "react";
+import React__default, { useState, useRef, useEffect } from "react";
 import classNames from "classnames";
 import { AnalyticsId } from "./constants.js";
 import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
 import { useSize } from "./hooks/useSize.js";
 import { useUuid } from "./hooks/useUuid.js";
 import { getAriaLabelAttributes } from "./utils/accessibility.js";
-import { isMutableRefObject, mergeRefs } from "./utils/refs.js";
+import { mergeRefs, isMutableRefObject } from "./utils/refs.js";
 import { E as ErrorWrapper } from "./ErrorWrapper.js";
 import { T as Title } from "./Title.js";
 import styles from "./components/Slider/styles.module.scss";
@@ -26,7 +26,7 @@ const useSafeNumberValue = (initial, min, max) => {
   }, [min, max]);
   return [value, setSafeValue];
 };
-const Slider = React.forwardRef((props, ref) => {
+const Slider = React__default.forwardRef((props, ref) => {
   const {
     title,
     ariaLabel,

package/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.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 { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n  const [value, setValue] = useState(initial);\n\n  const setSafeValue = (newValue: number): void => {\n    if (newValue > max) {\n      setValue(max);\n    } else if (newValue < min) {\n      setValue(min);\n    } else {\n      setValue(newValue);\n    }\n  };\n\n  useEffect(() => {\n    setSafeValue(initial);\n  }, [min, max]);\n\n  return [value, setSafeValue];\n};\n\nexport type SliderStep = {\n  label?: number | string;\n  emojiUniCode?: string;\n};\n\nexport interface SliderProps\n  extends ErrorWrapperClassNameProps,\n    Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'onChange' | 'onBlur'> {\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tSets aria-label of the slider. */\n  ariaLabel?: string;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Sets the minimum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  minValue?: number;\n  /** Sets the maximum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  maxValue?: number;\n  /** If set to false will only trigger onChange once a user interaction has been made, updates to this prop will be taken into account - true by default */\n  selected?: boolean;\n  /** Sets the steps data for the slider */\n  steps?: SliderStep[];\n  /** Sets the step to move per point in the slider */\n  step?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the value of the slider */\n  value?: number;\n}\n\nexport const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    title,\n    ariaLabel,\n    error,\n    errorText,\n    errorTextId,\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 errorTextUuid = useUuid(errorTextId);\n  const titleId = useUuid();\n  const labelLeftId = useUuid();\n  const labelRightId = useUuid();\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={errorTextUuid}>\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":["value","step"],"mappings":"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"}
+{"version":3,"file":"Slider.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 { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n  const [value, setValue] = useState(initial);\n\n  const setSafeValue = (newValue: number): void => {\n    if (newValue > max) {\n      setValue(max);\n    } else if (newValue < min) {\n      setValue(min);\n    } else {\n      setValue(newValue);\n    }\n  };\n\n  useEffect(() => {\n    setSafeValue(initial);\n  }, [min, max]);\n\n  return [value, setSafeValue];\n};\n\nexport type SliderStep = {\n  label?: number | string;\n  emojiUniCode?: string;\n};\n\nexport interface SliderProps\n  extends ErrorWrapperClassNameProps,\n    Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'onChange' | 'onBlur'> {\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tSets aria-label of the slider. */\n  ariaLabel?: string;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Sets the minimum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  minValue?: number;\n  /** Sets the maximum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  maxValue?: number;\n  /** If set to false will only trigger onChange once a user interaction has been made, updates to this prop will be taken into account - true by default */\n  selected?: boolean;\n  /** Sets the steps data for the slider */\n  steps?: SliderStep[];\n  /** Sets the step to move per point in the slider */\n  step?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the value of the slider */\n  value?: number;\n}\n\nexport const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    title,\n    ariaLabel,\n    error,\n    errorText,\n    errorTextId,\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 errorTextUuid = useUuid(errorTextId);\n  const titleId = useUuid();\n  const labelLeftId = useUuid();\n  const labelRightId = useUuid();\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={errorTextUuid}>\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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"}

package/Spacer.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import React from "react";
+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.forwardRef(function SpacerForwardedRef(props, ref) {
+const Spacer = React__default.forwardRef(function SpacerForwardedRef(props, ref) {
   const { size = "s", className, testId } = props;
   const spacerClasses = classNames(
     spacerStyles.spacer,

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":[],"mappings":";;;;;AAkBA,MAAM,SAAS,MAAM,WAAW,SAAS,mBAAmB,OAAoB,KAAsC;AACpH,QAAM,EAAE,OAAO,KAAK,WAAW,OAAW,IAAA;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,IAC1C;AAAA,IACA;AAAA,EACF;AAEO,SAAA,oBAAC,UAAK,WAAW,eAAe,KAAU,eAAa,QAAQ,oBAAkB,YAAY,OAAQ,CAAA;AAC9G,CAAC;"}
+{"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,OAAW,IAAA;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,IAC1C;AAAA,IACA;AAAA,EACF;AAEO,SAAA,oBAAC,UAAK,WAAW,eAAe,KAAU,eAAa,QAAQ,oBAAkB,YAAY,OAAQ,CAAA;AAC9G,CAAC;"}

package/StatusDot.js

@@ -3,7 +3,7 @@ import classNames from "classnames";
 import "./theme/grid.js";
 import "./hooks/useBreakpoint.js";
 import "react";
-import { FormOnColor, AnalyticsId, IconSize } from "./constants.js";
+import { AnalyticsId, FormOnColor, IconSize } from "./constants.js";
 import { getColor } from "./theme/currys/color.js";
 import { I as Icon } from "./Icon.js";
 import Attachment from "./components/Icons/Attachment.js";

package/StepButtons.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import classNames from "classnames";
 import { AnalyticsId } from "./constants.js";
 import styles from "./components/StepButtons/styles.module.scss";
@@ -9,17 +9,17 @@ const StepButtons = (props) => {
   if (backButton || forwardButton || additionalButtons || cancelButton) {
     return /* @__PURE__ */ jsxs("div", { className: navigationClasses, "data-testid": testId, "data-analyticsid": AnalyticsId.StepButtons, children: [
       (backButton || forwardButton) && /* @__PURE__ */ jsxs("div", { className: styles.stepbuttons__buttons, children: [
-        backButton && React.cloneElement(backButton, {
+        backButton && React__default.cloneElement(backButton, {
           variant: "outline",
           wrapperClassName: classNames(styles["stepbuttons__button--back"])
         }),
-        forwardButton && React.cloneElement(forwardButton, {
+        forwardButton && React__default.cloneElement(forwardButton, {
           variant: "fill",
           wrapperClassName: classNames(styles["stepbuttons__button--forward"])
         })
       ] }),
       additionalButtons && /* @__PURE__ */ jsx("div", { className: classNames(styles.stepbuttons__buttons, styles["stepbuttons__buttons--additional"]), children: additionalButtons }),
-      cancelButton && /* @__PURE__ */ jsx("div", { className: styles.stepbuttons__buttons, children: React.cloneElement(cancelButton, {
+      cancelButton && /* @__PURE__ */ jsx("div", { className: styles.stepbuttons__buttons, children: React__default.cloneElement(cancelButton, {
         variant: "borderless"
       }) })
     ] });

package/StepButtons.js.map

@@ -1 +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={styles.stepbuttons__buttons}>\n            {backButton &&\n              React.cloneElement(backButton, {\n                variant: 'outline',\n                wrapperClassName: classNames(styles['stepbuttons__button--back']),\n              })}\n            {forwardButton &&\n              React.cloneElement(forwardButton, {\n                variant: 'fill',\n                wrapperClassName: classNames(styles['stepbuttons__button--forward']),\n              })}\n          </div>\n        )}\n        {additionalButtons && (\n          <div className={classNames(styles.stepbuttons__buttons, styles['stepbuttons__buttons--additional'])}>{additionalButtons}</div>\n        )}\n        {cancelButton && (\n          <div className={styles.stepbuttons__buttons}>\n            {React.cloneElement(cancelButton, {\n              variant: 'borderless',\n            })}\n          </div>\n        )}\n      </div>\n    );\n  }\n  return null;\n};\n\nexport default StepButtons;\n"],"names":[],"mappings":";;;;;AAwBO,MAAM,cAA0C,CAAS,UAAA;AACxD,QAAA,EAAE,YAAY,eAAe,mBAAmB,cAAc,SAAS,OAAO,WAAW;AAE/F,QAAM,oBAAoB,WAAW,OAAO,aAAa,UAAU,OAAO,iCAAiC,CAAC;AAExG,MAAA,cAAc,iBAAiB,qBAAqB,cAAc;AAElE,WAAA,qBAAC,SAAI,WAAW,mBAAmB,eAAa,QAAQ,oBAAkB,YAAY,aAClF,UAAA;AAAA,OAAA,cAAc,kBACd,qBAAC,OAAI,EAAA,WAAW,OAAO,sBACpB,UAAA;AAAA,QACC,cAAA,MAAM,aAAa,YAAY;AAAA,UAC7B,SAAS;AAAA,UACT,kBAAkB,WAAW,OAAO,2BAA2B,CAAC;AAAA,QAAA,CACjE;AAAA,QACF,iBACC,MAAM,aAAa,eAAe;AAAA,UAChC,SAAS;AAAA,UACT,kBAAkB,WAAW,OAAO,8BAA8B,CAAC;AAAA,QACpE,CAAA;AAAA,MAAA,GACL;AAAA,MAED,qBACE,oBAAA,OAAA,EAAI,WAAW,WAAW,OAAO,sBAAsB,OAAO,kCAAkC,CAAC,GAAI,UAAkB,kBAAA,CAAA;AAAA,MAEzH,oCACE,OAAI,EAAA,WAAW,OAAO,sBACpB,UAAA,MAAM,aAAa,cAAc;AAAA,QAChC,SAAS;AAAA,MAAA,CACV,EACH,CAAA;AAAA,IAAA,GAEJ;AAAA,EAAA;AAGG,SAAA;AACT;"}
+{"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={styles.stepbuttons__buttons}>\n            {backButton &&\n              React.cloneElement(backButton, {\n                variant: 'outline',\n                wrapperClassName: classNames(styles['stepbuttons__button--back']),\n              })}\n            {forwardButton &&\n              React.cloneElement(forwardButton, {\n                variant: 'fill',\n                wrapperClassName: classNames(styles['stepbuttons__button--forward']),\n              })}\n          </div>\n        )}\n        {additionalButtons && (\n          <div className={classNames(styles.stepbuttons__buttons, styles['stepbuttons__buttons--additional'])}>{additionalButtons}</div>\n        )}\n        {cancelButton && (\n          <div className={styles.stepbuttons__buttons}>\n            {React.cloneElement(cancelButton, {\n              variant: 'borderless',\n            })}\n          </div>\n        )}\n      </div>\n    );\n  }\n  return null;\n};\n\nexport default StepButtons;\n"],"names":["React"],"mappings":";;;;;AAwBO,MAAM,cAA0C,CAAS,UAAA;AACxD,QAAA,EAAE,YAAY,eAAe,mBAAmB,cAAc,SAAS,OAAO,WAAW;AAE/F,QAAM,oBAAoB,WAAW,OAAO,aAAa,UAAU,OAAO,iCAAiC,CAAC;AAExG,MAAA,cAAc,iBAAiB,qBAAqB,cAAc;AAElE,WAAA,qBAAC,SAAI,WAAW,mBAAmB,eAAa,QAAQ,oBAAkB,YAAY,aAClF,UAAA;AAAA,OAAA,cAAc,kBACd,qBAAC,OAAI,EAAA,WAAW,OAAO,sBACpB,UAAA;AAAA,QACC,cAAAA,eAAM,aAAa,YAAY;AAAA,UAC7B,SAAS;AAAA,UACT,kBAAkB,WAAW,OAAO,2BAA2B,CAAC;AAAA,QAAA,CACjE;AAAA,QACF,iBACCA,eAAM,aAAa,eAAe;AAAA,UAChC,SAAS;AAAA,UACT,kBAAkB,WAAW,OAAO,8BAA8B,CAAC;AAAA,QACpE,CAAA;AAAA,MAAA,GACL;AAAA,MAED,qBACE,oBAAA,OAAA,EAAI,WAAW,WAAW,OAAO,sBAAsB,OAAO,kCAAkC,CAAC,GAAI,UAAkB,kBAAA,CAAA;AAAA,MAEzH,oCACE,OAAI,EAAA,WAAW,OAAO,sBACpB,UAAAA,eAAM,aAAa,cAAc;AAAA,QAChC,SAAS;AAAA,MAAA,CACV,EACH,CAAA;AAAA,IAAA,GAEJ;AAAA,EAAA;AAGG,SAAA;AACT;"}

package/TabList.js

@@ -1,5 +1,5 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import React, { useRef, useEffect } from "react";
+import React__default, { useRef, useEffect } from "react";
 import classNames from "classnames";
 import { palette } from "./theme/palette.js";
 import { I as Icon } from "./Icon.js";
@@ -66,7 +66,7 @@ const TabItem = (props) => {
   ) });
 };
 const TabChevron = ({ direction, onClick, backgroundColor, ariaLabel }) => {
-  const buttonRef = React.useRef(null);
+  const buttonRef = React__default.useRef(null);
   const { isHovered } = useHover(buttonRef);
   return /* @__PURE__ */ jsx(
     "button",
@@ -84,7 +84,7 @@ const TabChevron = ({ direction, onClick, backgroundColor, ariaLabel }) => {
 const TabList = (props) => {
   const { selectedTab, onTabListClick, children, color, onColor, ariaLabelLeftButton, ariaLabelRightButton } = props;
   const listRef = useRef(null);
-  const tabRefs = useRef(React.Children.map(children, () => React.createRef()) || []);
+  const tabRefs = useRef(React__default.Children.map(children, () => React__default.createRef()) || []);
   useRovingFocus(onTabListClick, tabRefs, listRef, true);
   const tablistClasses = classNames(styles["tab-list"], styles[`tab-list--${onColor}`]);
   const getBackgroundColor = (onColor2) => {
@@ -143,7 +143,7 @@ const TabList = (props) => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("ul", { className: tablistClasses, ref: listRef, role: "tablist", "aria-orientation": "horizontal", children: React.Children.map(children, (child, index) => {
+    /* @__PURE__ */ jsx("ul", { className: tablistClasses, ref: listRef, role: "tablist", "aria-orientation": "horizontal", children: React__default.Children.map(children, (child, index) => {
       if (isComponent(child, Tab)) {
         return /* @__PURE__ */ jsx(
           TabItem,

package/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","sources":["../src/components/Tabs/Tab.tsx","../src/components/Tabs/TabList/TabItem.tsx","../src/components/Tabs/TabList/TabChevron.tsx","../src/components/Tabs/TabList/TabList.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\n\nexport interface TabProps {\n  /** Sets the tab panel content */\n  children?: React.ReactNode;\n  /** Optional icon on the tab */\n  icon?: SvgIcon | IconName;\n  /** Called when tab is selected */\n  onTabClick?: (index: number) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Title on the tab */\n  title?: string;\n}\n\nconst Tab: React.FC<TabProps> = props => {\n  return <>{props.children ?? null}</>;\n};\n\nexport default Tab;\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { palette } from '../../../theme/palette';\nimport Icon, { IconSize } from '../../Icon';\nimport { IconName } from '../../Icons/IconNames';\nimport LazyIcon from '../../LazyIcon';\nimport { TabProps } from '../Tab';\nimport { TabsColors } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabItemProps {\n  tabProps: TabProps;\n  index: number;\n  color: TabsColors;\n  selectedTab: number;\n  tabRefs: React.MutableRefObject<React.RefObject<HTMLButtonElement>[] | null | undefined>;\n  tabListVisible: boolean;\n  onTabListClick: (index: number) => void;\n}\n\nconst TabItem: React.FC<TabItemProps> = props => {\n  const isSelected = props.index === props.selectedTab;\n  const { title, onTabClick, icon, testId } = props.tabProps;\n  const handleClick = (): void => {\n    onTabClick && onTabClick(props.index);\n    props.onTabListClick(props.index);\n    scrollToTab(props.index);\n  };\n  const tabButtonClasses = classNames(styles['tab-list__tab'], styles[`tab-list__tab--${props.color}`], {\n    [styles['tab-list__tab--selected']]: isSelected,\n    [styles['tab-list__tab--not-selected']]: !isSelected,\n  });\n\n  const currentRef = props.tabRefs.current && props.tabRefs.current[props.index];\n\n  const scrollToTab = (index: number): void => {\n    const currentRef = props.tabRefs.current && props.tabRefs.current[index];\n    currentRef?.current?.scrollIntoView && currentRef?.current?.scrollIntoView({ behavior: 'smooth', inline: 'nearest', block: 'nearest' });\n  };\n\n  const itemRef = useRef<HTMLLIElement>(null);\n\n  useEffect(() => {\n    if (isSelected && props.tabListVisible) {\n      scrollToTab(props.index);\n    }\n  }, [isSelected]);\n\n  return (\n    <li role=\"presentation\" ref={itemRef}>\n      <button\n        role=\"tab\"\n        aria-selected={isSelected}\n        onClick={handleClick}\n        className={tabButtonClasses}\n        data-testid={testId}\n        ref={currentRef as React.RefObject<HTMLButtonElement>}\n        style={{\n          borderBottom: isSelected\n            ? `2px solid var(--color-base-background-${props.color})`\n            : '1px solid var(--color-action-border-onlight-focus)',\n        }}\n      >\n        <span className={styles['tab-list__tab__title-and-icon']}>\n          {icon &&\n            (typeof icon === 'string' ? (\n              <LazyIcon\n                iconName={icon as IconName}\n                size={IconSize.XSmall}\n                color={isSelected ? palette[`black`] : palette['blueberry500']}\n              />\n            ) : (\n              <Icon svgIcon={icon} size={IconSize.XSmall} color={isSelected ? palette[`black`] : palette['blueberry500']} />\n            ))}\n          {title}\n        </span>\n      </button>\n    </li>\n  );\n};\n\nexport default TabItem;\n","import React from 'react';\n\nimport { useHover } from '../../../hooks/useHover';\nimport Icon, { IconSize } from '../../Icon';\nimport ChevronLeft from '../../Icons/ChevronLeft';\nimport ChevronRight from '../../Icons/ChevronRight';\n\nimport styles from './styles.module.scss';\n\ninterface TabChevronProps {\n  direction: 'left' | 'right';\n  onClick: () => void;\n  backgroundColor?: string;\n  ariaLabel?: string;\n}\n\nconst TabChevron: React.FC<TabChevronProps> = ({ direction, onClick, backgroundColor, ariaLabel }) => {\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const { isHovered } = useHover<HTMLButtonElement>(buttonRef);\n\n  return (\n    <button\n      type=\"button\"\n      ref={buttonRef}\n      className={styles['tab-list__button']}\n      onClick={onClick}\n      aria-label={ariaLabel}\n      style={{ backgroundColor: backgroundColor }}\n    >\n      {direction === 'left' ? (\n        <Icon color={'var(--color-action-graphics-onlight)'} isHovered={isHovered} svgIcon={ChevronLeft} size={IconSize.XSmall} />\n      ) : (\n        <Icon color={'var(--color-action-graphics-onlight)'} isHovered={isHovered} svgIcon={ChevronRight} size={IconSize.XSmall} />\n      )}\n    </button>\n  );\n};\n\nexport default TabChevron;\n","import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport TabItem from './TabItem';\nimport { useIsVisible } from '../../../hooks/useIsVisible';\nimport { useRovingFocus } from '../../../hooks/useRovingFocus';\nimport { isComponent } from '../../../utils/component';\nimport Tab, { TabProps } from '../Tab';\nimport { TabsColors, TabsOnColor } from '../Tabs';\nimport TabChevron from './TabChevron';\n\nimport styles from './styles.module.scss';\ninterface TabListProps {\n  children: React.ReactNode;\n  onTabListClick: (index: number) => void;\n  selectedTab: number;\n  color: TabsColors;\n  onColor: TabsOnColor;\n  ariaLabelRightButton?: string;\n  ariaLabelLeftButton?: string;\n}\n\nconst TabList: React.FC<TabListProps> = props => {\n  const { selectedTab, onTabListClick, children, color, onColor, ariaLabelLeftButton, ariaLabelRightButton } = props;\n\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const tabRefs = useRef(React.Children.map(children, () => React.createRef<HTMLButtonElement>()) || []);\n  useRovingFocus(onTabListClick, tabRefs, listRef, true);\n\n  const tablistClasses = classNames(styles['tab-list'], styles[`tab-list--${onColor}`]);\n\n  const getBackgroundColor = (onColor: TabsOnColor): string => {\n    switch (onColor) {\n      case 'onwhite':\n        return 'var(--color-base-background-white)';\n      case 'onblueberry':\n        return 'var(--color-base-background-blueberry)';\n      case 'onneutral':\n        return 'var(--color-base-background-neutral)';\n    }\n  };\n  const firstTab = tabRefs.current && tabRefs.current[0];\n  const lastTab = tabRefs.current && tabRefs.current[tabRefs.current.length - 1];\n\n  const firstTabVisible = useIsVisible(firstTab);\n  const lastTabVisible = useIsVisible(lastTab);\n  const tabListVisible = useIsVisible(listRef);\n\n  const shouldShowFadeStart = (): boolean => {\n    return !firstTabVisible;\n  };\n\n  const shouldShowFadeEnd = (): boolean => {\n    return !lastTabVisible;\n  };\n\n  const scrollInList = (direction: string): void => {\n    if (listRef.current) {\n      const listWidth = listRef.current.clientWidth;\n      const listScrollLeft = listRef.current.scrollLeft;\n      const maxScrollLeft = listRef.current.scrollWidth - listWidth;\n\n      if (direction === 'right' && !lastTabVisible) {\n        const scrollAmount = Math.min(listWidth / 2, maxScrollLeft - listScrollLeft);\n        listRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n      } else if (direction === 'left' && !firstTabVisible) {\n        const scrollAmount = -Math.min(listWidth / 2, listScrollLeft);\n        listRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n      }\n    }\n  };\n\n  return (\n    <div>\n      {shouldShowFadeStart() && (\n        <div className={classNames(styles['tab-list__start-wrapper'])}>\n          <TabChevron\n            onClick={() => scrollInList('left')}\n            direction=\"left\"\n            backgroundColor={`${getBackgroundColor(onColor)}`}\n            ariaLabel={ariaLabelLeftButton}\n          />\n          <div\n            className={classNames(styles['tab-list__fade-start'])}\n            style={{\n              backgroundColor: `${getBackgroundColor(onColor)}`,\n            }}\n          ></div>\n        </div>\n      )}\n      <ul className={tablistClasses} ref={listRef} role=\"tablist\" aria-orientation=\"horizontal\">\n        {React.Children.map(children, (child, index) => {\n          if (isComponent<TabProps>(child, Tab)) {\n            return (\n              <TabItem\n                tabRefs={tabRefs}\n                tabListVisible={tabListVisible}\n                key={child.props.title}\n                index={index}\n                selectedTab={selectedTab}\n                onTabListClick={onTabListClick}\n                tabProps={child.props}\n                color={color}\n              />\n            );\n          }\n          return null;\n        })}\n      </ul>\n      {shouldShowFadeEnd() && (\n        <div className={classNames(styles['tab-list__end-wrapper'])}>\n          <div\n            className={classNames(styles['tab-list__fade-end'])}\n            style={{\n              backgroundColor: `${getBackgroundColor(onColor)}`,\n            }}\n          ></div>\n          <TabChevron\n            onClick={() => scrollInList('right')}\n            direction=\"right\"\n            backgroundColor={`${getBackgroundColor(onColor)}`}\n            ariaLabel={ariaLabelRightButton}\n          />\n        </div>\n      )}\n      <div className={classNames(styles['tab-list__border'])}></div>\n    </div>\n  );\n};\n\nexport default TabList;\n"],"names":["currentRef","onColor"],"mappings":"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"}
+{"version":3,"file":"TabList.js","sources":["../src/components/Tabs/Tab.tsx","../src/components/Tabs/TabList/TabItem.tsx","../src/components/Tabs/TabList/TabChevron.tsx","../src/components/Tabs/TabList/TabList.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\n\nexport interface TabProps {\n  /** Sets the tab panel content */\n  children?: React.ReactNode;\n  /** Optional icon on the tab */\n  icon?: SvgIcon | IconName;\n  /** Called when tab is selected */\n  onTabClick?: (index: number) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Title on the tab */\n  title?: string;\n}\n\nconst Tab: React.FC<TabProps> = props => {\n  return <>{props.children ?? null}</>;\n};\n\nexport default Tab;\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { palette } from '../../../theme/palette';\nimport Icon, { IconSize } from '../../Icon';\nimport { IconName } from '../../Icons/IconNames';\nimport LazyIcon from '../../LazyIcon';\nimport { TabProps } from '../Tab';\nimport { TabsColors } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabItemProps {\n  tabProps: TabProps;\n  index: number;\n  color: TabsColors;\n  selectedTab: number;\n  tabRefs: React.MutableRefObject<React.RefObject<HTMLButtonElement>[] | null | undefined>;\n  tabListVisible: boolean;\n  onTabListClick: (index: number) => void;\n}\n\nconst TabItem: React.FC<TabItemProps> = props => {\n  const isSelected = props.index === props.selectedTab;\n  const { title, onTabClick, icon, testId } = props.tabProps;\n  const handleClick = (): void => {\n    onTabClick && onTabClick(props.index);\n    props.onTabListClick(props.index);\n    scrollToTab(props.index);\n  };\n  const tabButtonClasses = classNames(styles['tab-list__tab'], styles[`tab-list__tab--${props.color}`], {\n    [styles['tab-list__tab--selected']]: isSelected,\n    [styles['tab-list__tab--not-selected']]: !isSelected,\n  });\n\n  const currentRef = props.tabRefs.current && props.tabRefs.current[props.index];\n\n  const scrollToTab = (index: number): void => {\n    const currentRef = props.tabRefs.current && props.tabRefs.current[index];\n    currentRef?.current?.scrollIntoView && currentRef?.current?.scrollIntoView({ behavior: 'smooth', inline: 'nearest', block: 'nearest' });\n  };\n\n  const itemRef = useRef<HTMLLIElement>(null);\n\n  useEffect(() => {\n    if (isSelected && props.tabListVisible) {\n      scrollToTab(props.index);\n    }\n  }, [isSelected]);\n\n  return (\n    <li role=\"presentation\" ref={itemRef}>\n      <button\n        role=\"tab\"\n        aria-selected={isSelected}\n        onClick={handleClick}\n        className={tabButtonClasses}\n        data-testid={testId}\n        ref={currentRef as React.RefObject<HTMLButtonElement>}\n        style={{\n          borderBottom: isSelected\n            ? `2px solid var(--color-base-background-${props.color})`\n            : '1px solid var(--color-action-border-onlight-focus)',\n        }}\n      >\n        <span className={styles['tab-list__tab__title-and-icon']}>\n          {icon &&\n            (typeof icon === 'string' ? (\n              <LazyIcon\n                iconName={icon as IconName}\n                size={IconSize.XSmall}\n                color={isSelected ? palette[`black`] : palette['blueberry500']}\n              />\n            ) : (\n              <Icon svgIcon={icon} size={IconSize.XSmall} color={isSelected ? palette[`black`] : palette['blueberry500']} />\n            ))}\n          {title}\n        </span>\n      </button>\n    </li>\n  );\n};\n\nexport default TabItem;\n","import React from 'react';\n\nimport { useHover } from '../../../hooks/useHover';\nimport Icon, { IconSize } from '../../Icon';\nimport ChevronLeft from '../../Icons/ChevronLeft';\nimport ChevronRight from '../../Icons/ChevronRight';\n\nimport styles from './styles.module.scss';\n\ninterface TabChevronProps {\n  direction: 'left' | 'right';\n  onClick: () => void;\n  backgroundColor?: string;\n  ariaLabel?: string;\n}\n\nconst TabChevron: React.FC<TabChevronProps> = ({ direction, onClick, backgroundColor, ariaLabel }) => {\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const { isHovered } = useHover<HTMLButtonElement>(buttonRef);\n\n  return (\n    <button\n      type=\"button\"\n      ref={buttonRef}\n      className={styles['tab-list__button']}\n      onClick={onClick}\n      aria-label={ariaLabel}\n      style={{ backgroundColor: backgroundColor }}\n    >\n      {direction === 'left' ? (\n        <Icon color={'var(--color-action-graphics-onlight)'} isHovered={isHovered} svgIcon={ChevronLeft} size={IconSize.XSmall} />\n      ) : (\n        <Icon color={'var(--color-action-graphics-onlight)'} isHovered={isHovered} svgIcon={ChevronRight} size={IconSize.XSmall} />\n      )}\n    </button>\n  );\n};\n\nexport default TabChevron;\n","import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport TabItem from './TabItem';\nimport { useIsVisible } from '../../../hooks/useIsVisible';\nimport { useRovingFocus } from '../../../hooks/useRovingFocus';\nimport { isComponent } from '../../../utils/component';\nimport Tab, { TabProps } from '../Tab';\nimport { TabsColors, TabsOnColor } from '../Tabs';\nimport TabChevron from './TabChevron';\n\nimport styles from './styles.module.scss';\ninterface TabListProps {\n  children: React.ReactNode;\n  onTabListClick: (index: number) => void;\n  selectedTab: number;\n  color: TabsColors;\n  onColor: TabsOnColor;\n  ariaLabelRightButton?: string;\n  ariaLabelLeftButton?: string;\n}\n\nconst TabList: React.FC<TabListProps> = props => {\n  const { selectedTab, onTabListClick, children, color, onColor, ariaLabelLeftButton, ariaLabelRightButton } = props;\n\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const tabRefs = useRef(React.Children.map(children, () => React.createRef<HTMLButtonElement>()) || []);\n  useRovingFocus(onTabListClick, tabRefs, listRef, true);\n\n  const tablistClasses = classNames(styles['tab-list'], styles[`tab-list--${onColor}`]);\n\n  const getBackgroundColor = (onColor: TabsOnColor): string => {\n    switch (onColor) {\n      case 'onwhite':\n        return 'var(--color-base-background-white)';\n      case 'onblueberry':\n        return 'var(--color-base-background-blueberry)';\n      case 'onneutral':\n        return 'var(--color-base-background-neutral)';\n    }\n  };\n  const firstTab = tabRefs.current && tabRefs.current[0];\n  const lastTab = tabRefs.current && tabRefs.current[tabRefs.current.length - 1];\n\n  const firstTabVisible = useIsVisible(firstTab);\n  const lastTabVisible = useIsVisible(lastTab);\n  const tabListVisible = useIsVisible(listRef);\n\n  const shouldShowFadeStart = (): boolean => {\n    return !firstTabVisible;\n  };\n\n  const shouldShowFadeEnd = (): boolean => {\n    return !lastTabVisible;\n  };\n\n  const scrollInList = (direction: string): void => {\n    if (listRef.current) {\n      const listWidth = listRef.current.clientWidth;\n      const listScrollLeft = listRef.current.scrollLeft;\n      const maxScrollLeft = listRef.current.scrollWidth - listWidth;\n\n      if (direction === 'right' && !lastTabVisible) {\n        const scrollAmount = Math.min(listWidth / 2, maxScrollLeft - listScrollLeft);\n        listRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n      } else if (direction === 'left' && !firstTabVisible) {\n        const scrollAmount = -Math.min(listWidth / 2, listScrollLeft);\n        listRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n      }\n    }\n  };\n\n  return (\n    <div>\n      {shouldShowFadeStart() && (\n        <div className={classNames(styles['tab-list__start-wrapper'])}>\n          <TabChevron\n            onClick={() => scrollInList('left')}\n            direction=\"left\"\n            backgroundColor={`${getBackgroundColor(onColor)}`}\n            ariaLabel={ariaLabelLeftButton}\n          />\n          <div\n            className={classNames(styles['tab-list__fade-start'])}\n            style={{\n              backgroundColor: `${getBackgroundColor(onColor)}`,\n            }}\n          ></div>\n        </div>\n      )}\n      <ul className={tablistClasses} ref={listRef} role=\"tablist\" aria-orientation=\"horizontal\">\n        {React.Children.map(children, (child, index) => {\n          if (isComponent<TabProps>(child, Tab)) {\n            return (\n              <TabItem\n                tabRefs={tabRefs}\n                tabListVisible={tabListVisible}\n                key={child.props.title}\n                index={index}\n                selectedTab={selectedTab}\n                onTabListClick={onTabListClick}\n                tabProps={child.props}\n                color={color}\n              />\n            );\n          }\n          return null;\n        })}\n      </ul>\n      {shouldShowFadeEnd() && (\n        <div className={classNames(styles['tab-list__end-wrapper'])}>\n          <div\n            className={classNames(styles['tab-list__fade-end'])}\n            style={{\n              backgroundColor: `${getBackgroundColor(onColor)}`,\n            }}\n          ></div>\n          <TabChevron\n            onClick={() => scrollInList('right')}\n            direction=\"right\"\n            backgroundColor={`${getBackgroundColor(onColor)}`}\n            ariaLabel={ariaLabelRightButton}\n          />\n        </div>\n      )}\n      <div className={classNames(styles['tab-list__border'])}></div>\n    </div>\n  );\n};\n\nexport default TabList;\n"],"names":["currentRef","React","onColor"],"mappings":"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"}

package/Table.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import React, { useState, useRef, useEffect } from "react";
+import React__default, { useState, useRef, useEffect } from "react";
 import classNames from "classnames";
 import { AnalyticsId } from "./constants.js";
 import { Breakpoint, useBreakpoint } from "./hooks/useBreakpoint.js";
@@ -146,7 +146,7 @@ const Table = ({
       ref: tableRef,
       style: tableStyle,
       ...rest,
-      children: React.Children.map(children, (child) => React.isValidElement(child) && React.cloneElement(child, { mode }))
+      children: React__default.Children.map(children, (child) => React__default.isValidElement(child) && React__default.cloneElement(child, { mode }))
     }
   );
   const ariaLabelAttributes = getAriaLabelAttributes({ label: scrollAriaLabel, id: scrollAriaLabelledById });