@helsenorge/designsystem-react 15.1.0 → 15.3.0

package/lib/SingleSelectItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SingleSelectItem.js","names":[],"sources":["../src/components/Dropdown/SingleSelect/utils.tsx","../src/components/Dropdown/SingleSelect/SingleSelectItem.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SingleSelectContextType } from './SingleSelect';\n\nexport const SingleSelectContext = React.createContext<SingleSelectContextType | null>(null);\n\nexport const useSingleSelect = (): SingleSelectContextType | null => React.useContext(SingleSelectContext);\n","import React, { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { AsChildSlotHandle } from '../../AsChildSlot';\n\nimport { useSingleSelect } from './utils';\nimport AsChildSlot from '../../AsChildSlot';\n\nimport styles from './styles.module.scss';\n\nexport interface SingleSelectItemProps extends Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'> {\n  /** The text to the singleSelectItem */\n  text?: string;\n  /** input id of the singleSelectItem */\n  inputId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** When true, onclick and keyboard events will be passed to the child Button or AnchorLink. */\n  asChild?: boolean;\n  /** Only use when asChild is set to true and only pass one child */\n  children?: React.ReactNode;\n  /** Value for this singleSelectItem option - used by the parent wrapper to keep track of the context */\n  value?: string;\n  /** aria-describedby passthrough if needed */\n  ['aria-describedby']?: string;\n  /** Marks this option as initially selected */\n  defaultSelected?: boolean;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLElement | null>;\n}\n\nexport const SingleSelectItem: React.FC<SingleSelectItemProps> = props => {\n  const { text, value, testId, asChild = false, children, disabled, defaultSelected, ref, ...rest } = props;\n\n  const generatedId = useId();\n  const inputId = props.inputId ?? generatedId;\n  const group = useSingleSelect();\n  const optionValue = typeof value === 'string' && value.length > 0 ? value : inputId;\n  const isSelected = group ? group.value === optionValue : false;\n  const isDisabled = !!disabled || !!group?.disabled;\n  const asChildSlotRef = React.useRef<AsChildSlotHandle | null>(null);\n\n  React.useEffect(() => {\n    if (defaultSelected && group && typeof group.value === 'undefined') {\n      group.onValueChange?.(optionValue);\n    }\n  }, [defaultSelected, group, optionValue]);\n\n  const contentClasses = classNames(styles['single-select-item__content'], {\n    [styles['single-select-item__content--disabled']]: isDisabled,\n  });\n  const dotClasses = classNames(styles['single-select-item__dot'], {\n    [styles['single-select-item__dot--disabled']]: isDisabled,\n    [styles['single-select-item__dot--checked']]: isSelected,\n  });\n\n  const childArray = React.Children.toArray(children).filter(React.isValidElement) as React.ReactElement[];\n  const childElement = childArray[0] ?? null;\n\n  const selectThis = (e?: React.SyntheticEvent): void => {\n    if (isDisabled) return;\n    if (group && group.value !== optionValue) {\n      group.onValueChange?.(optionValue, e);\n    }\n  };\n\n  const content = (\n    <>\n      <span className={dotClasses} aria-hidden />\n      <span>{text}</span>\n    </>\n  );\n\n  const Component = (asChild ? AsChildSlot : 'button') as React.ElementType;\n  const childWithInjectedContent = childElement ? React.cloneElement(childElement, undefined, content) : null;\n\n  const componentProps = asChild\n    ? {\n        ref: asChildSlotRef,\n        elementRef: ref,\n        className: contentClasses,\n        disabled: isDisabled,\n        onSelect: (e: React.SyntheticEvent): void => selectThis(e),\n        ariaCurrent: isSelected ? 'true' : undefined,\n        children: childWithInjectedContent,\n      }\n    : {\n        ...rest,\n        type: 'button' as const,\n        className: contentClasses,\n        disabled: isDisabled,\n        onClick: (e: React.MouseEvent<HTMLButtonElement>): void => {\n          e.preventDefault();\n          selectThis(e);\n        },\n        onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>): void => {\n          if (e.key === 'Enter') {\n            e.preventDefault();\n            selectThis(e);\n          }\n        },\n        ref: ref,\n        'aria-disabled': isDisabled || undefined,\n        'aria-current': isSelected ? 'true' : undefined,\n        children: content,\n      };\n\n  return (\n    <div data-testid={testId} className={styles['single-select-item']}>\n      <Component {...componentProps} />\n    </div>\n  );\n};\n\nSingleSelectItem.displayName = 'Dropdown.SingleSelectItem';\n\nexport default SingleSelectItem;\n"],"mappings":";;;;;;AAIA,IAAa,sBAAsB,MAAM,cAA8C,IAAI;AAE3F,IAAa,wBAAwD,MAAM,WAAW,mBAAmB;;;AC0BzG,IAAa,oBAAoD,UAAS;CACxE,MAAM,EAAE,MAAM,OAAO,QAAQ,UAAU,OAAO,UAAU,UAAU,iBAAiB,KAAK,GAAG,SAAS;CAEpG,MAAM,cAAc,MAAM;CAC1B,MAAM,UAAU,MAAM,WAAW;CACjC,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,cAAc,OAAO,UAAU,YAAY,MAAM,SAAS,IAAI,QAAQ;CAC5E,MAAM,aAAa,QAAQ,MAAM,UAAU,cAAc;CACzD,MAAM,aAAa,CAAC,CAAC,YAAY,CAAC,CAAC,OAAO;CAC1C,MAAM,iBAAiB,MAAM,OAAiC,IAAI;CAElE,MAAM,gBAAgB;EACpB,IAAI,mBAAmB,SAAS,OAAO,MAAM,UAAU,aACrD,MAAM,gBAAgB,WAAW;CAErC,GAAG;EAAC;EAAiB;EAAO;CAAW,CAAC;CAExC,MAAM,iBAAiB,WAAW,OAAO,gCAAgC,GACtE,OAAO,2CAA2C,WACrD,CAAC;CACD,MAAM,aAAa,WAAW,OAAO,4BAA4B;GAC9D,OAAO,uCAAuC;GAC9C,OAAO,sCAAsC;CAChD,CAAC;CAGD,MAAM,eADa,MAAM,SAAS,QAAQ,QAAQ,EAAE,OAAO,MAAM,cAC5C,EAAW,MAAM;CAEtC,MAAM,cAAc,MAAmC;EACrD,IAAI,YAAY;EAChB,IAAI,SAAS,MAAM,UAAU,aAC3B,MAAM,gBAAgB,aAAa,CAAC;CAExC;CAEA,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;EAAM,WAAW;EAAY,eAAA;CAAa,CAAA,GAC1C,oBAAC,QAAD,EAAA,UAAO,KAAW,CAAA,CAClB,EAAA,CAAA;CAGJ,MAAM,YAAa,UAAU,sBAAc;CAC3C,MAAM,2BAA2B,eAAe,MAAM,aAAa,cAAc,KAAA,GAAW,OAAO,IAAI;CAEvG,MAAM,iBAAiB,UACnB;EACE,KAAK;EACL,YAAY;EACZ,WAAW;EACX,UAAU;EACV,WAAW,MAAkC,WAAW,CAAC;EACzD,aAAa,aAAa,SAAS,KAAA;EACnC,UAAU;CACZ,IACA;EACE,GAAG;EACH,MAAM;EACN,WAAW;EACX,UAAU;EACV,UAAU,MAAiD;GACzD,EAAE,eAAe;GACjB,WAAW,CAAC;EACd;EACA,YAAY,MAAoD;GAC9D,IAAI,EAAE,QAAQ,SAAS;IACrB,EAAE,eAAe;IACjB,WAAW,CAAC;GACd;EACF;EACK;EACL,iBAAiB,cAAc,KAAA;EAC/B,gBAAgB,aAAa,SAAS,KAAA;EACtC,UAAU;CACZ;CAEJ,OACE,oBAAC,OAAD;EAAK,eAAa;EAAQ,WAAW,OAAO;YAC1C,oBAAC,WAAD,EAAW,GAAI,eAAiB,CAAA;CAC7B,CAAA;AAET;AAEA,iBAAiB,cAAc"}
+{"version":3,"file":"SingleSelectItem.js","names":[],"sources":["../src/components/Dropdown/SingleSelect/utils.tsx","../src/components/Dropdown/SingleSelect/SingleSelectItem.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SingleSelectContextType } from './SingleSelect';\n\nexport const SingleSelectContext = React.createContext<SingleSelectContextType | null>(null);\n\nexport const useSingleSelect = (): SingleSelectContextType | null => React.useContext(SingleSelectContext);\n","import React, { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { AsChildSlotHandle } from '../../AsChildSlot';\n\nimport { useSingleSelect } from './utils';\nimport AsChildSlot from '../../AsChildSlot';\n\nimport styles from './styles.module.scss';\n\nexport interface SingleSelectItemProps extends Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'> {\n  /** The text to the singleSelectItem */\n  text?: string;\n  /** input id of the singleSelectItem */\n  inputId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** When true, onclick and keyboard events will be passed to the child Button or AnchorLink. */\n  asChild?: boolean;\n  /** Only use when asChild is set to true and only pass one child */\n  children?: React.ReactNode;\n  /** Value for this singleSelectItem option - used by the parent wrapper to keep track of the context */\n  value?: string;\n  /** aria-describedby passthrough if needed */\n  ['aria-describedby']?: string;\n  /** Marks this option as initially selected */\n  defaultSelected?: boolean;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLElement | null>;\n}\n\nexport const SingleSelectItem: React.FC<SingleSelectItemProps> = props => {\n  const { text, value, testId, asChild = false, children, disabled, defaultSelected, ref, ...rest } = props;\n\n  const generatedId = useId();\n  const inputId = props.inputId ?? generatedId;\n  const group = useSingleSelect();\n  const optionValue = typeof value === 'string' && value.length > 0 ? value : inputId;\n  const isSelected = group ? group.value === optionValue : false;\n  const isDisabled = !!disabled || !!group?.disabled;\n  const asChildSlotRef = React.useRef<AsChildSlotHandle | null>(null);\n\n  React.useEffect(() => {\n    if (defaultSelected && group && typeof group.value === 'undefined') {\n      group.onValueChange?.(optionValue);\n    }\n  }, [defaultSelected, group, optionValue]);\n\n  const contentClasses = classNames(styles['single-select-item__content'], {\n    [styles['single-select-item__content--disabled']]: isDisabled,\n  });\n  const dotClasses = classNames(styles['single-select-item__dot'], {\n    [styles['single-select-item__dot--disabled']]: isDisabled,\n    [styles['single-select-item__dot--checked']]: isSelected,\n  });\n\n  const childArray = React.Children.toArray(children).filter(React.isValidElement) as React.ReactElement[];\n  const childElement = childArray[0] ?? null;\n\n  const selectThis = (e?: React.SyntheticEvent): void => {\n    if (isDisabled) return;\n    if (group && group.value !== optionValue) {\n      group.onValueChange?.(optionValue, e);\n    }\n  };\n\n  const content = (\n    <>\n      <span className={dotClasses} aria-hidden />\n      <span>{text}</span>\n    </>\n  );\n\n  const Component = (asChild ? AsChildSlot : 'button') as React.ElementType;\n  const childWithInjectedContent = childElement ? React.cloneElement(childElement, undefined, content) : null;\n\n  const componentProps = asChild\n    ? {\n        ref: asChildSlotRef,\n        elementRef: ref,\n        className: contentClasses,\n        disabled: isDisabled,\n        onSelect: (e: React.SyntheticEvent): void => selectThis(e),\n        ariaCurrent: isSelected ? 'true' : undefined,\n        children: childWithInjectedContent,\n      }\n    : {\n        ...rest,\n        type: 'button' as const,\n        className: contentClasses,\n        disabled: isDisabled,\n        onClick: (e: React.MouseEvent<HTMLButtonElement>): void => {\n          e.preventDefault();\n          selectThis(e);\n        },\n        onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>): void => {\n          if (e.key === 'Enter') {\n            e.preventDefault();\n            selectThis(e);\n          }\n        },\n        ref: ref,\n        'aria-disabled': isDisabled || undefined,\n        'aria-current': isSelected ? 'true' : undefined,\n        children: content,\n      };\n\n  return (\n    <div data-testid={testId} className={styles['single-select-item']}>\n      <Component {...componentProps} />\n    </div>\n  );\n};\n\nSingleSelectItem.displayName = 'Dropdown.SingleSelectItem';\n\nexport default SingleSelectItem;\n"],"mappings":";;;;;;AAIA,IAAa,sBAAsB,MAAM,cAA8C,IAAI;AAE3F,IAAa,wBAAwD,MAAM,WAAW,mBAAmB;;;AC0BzG,IAAa,oBAAoD,UAAS;CACxE,MAAM,EAAE,MAAM,OAAO,QAAQ,UAAU,OAAO,UAAU,UAAU,iBAAiB,KAAK,GAAG,SAAS;CAEpG,MAAM,cAAc,MAAM;CAC1B,MAAM,UAAU,MAAM,WAAW;CACjC,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,cAAc,OAAO,UAAU,YAAY,MAAM,SAAS,IAAI,QAAQ;CAC5E,MAAM,aAAa,QAAQ,MAAM,UAAU,cAAc;CACzD,MAAM,aAAa,CAAC,CAAC,YAAY,CAAC,CAAC,OAAO;CAC1C,MAAM,iBAAiB,MAAM,OAAiC,IAAI;CAElE,MAAM,gBAAgB;EACpB,IAAI,mBAAmB,SAAS,OAAO,MAAM,UAAU,aACrD,MAAM,gBAAgB,WAAW;CAErC,GAAG;EAAC;EAAiB;EAAO;CAAW,CAAC;CAExC,MAAM,iBAAiB,GAAW,OAAO,gCAAgC,GACtE,OAAO,2CAA2C,WACrD,CAAC;CACD,MAAM,aAAa,GAAW,OAAO,4BAA4B;GAC9D,OAAO,uCAAuC;GAC9C,OAAO,sCAAsC;CAChD,CAAC;CAGD,MAAM,eADa,MAAM,SAAS,QAAQ,QAAQ,EAAE,OAAO,MAAM,cAC5C,EAAW,MAAM;CAEtC,MAAM,cAAc,MAAmC;EACrD,IAAI,YAAY;EAChB,IAAI,SAAS,MAAM,UAAU,aAC3B,MAAM,gBAAgB,aAAa,CAAC;CAExC;CAEA,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;EAAM,WAAW;EAAY,eAAA;CAAa,CAAA,GAC1C,oBAAC,QAAD,EAAA,UAAO,KAAW,CAAA,CAClB,EAAA,CAAA;CAGJ,MAAM,YAAa,UAAU,sBAAc;CAC3C,MAAM,2BAA2B,eAAe,MAAM,aAAa,cAAc,KAAA,GAAW,OAAO,IAAI;CAEvG,MAAM,iBAAiB,UACnB;EACE,KAAK;EACL,YAAY;EACZ,WAAW;EACX,UAAU;EACV,WAAW,MAAkC,WAAW,CAAC;EACzD,aAAa,aAAa,SAAS,KAAA;EACnC,UAAU;CACZ,IACA;EACE,GAAG;EACH,MAAM;EACN,WAAW;EACX,UAAU;EACV,UAAU,MAAiD;GACzD,EAAE,eAAe;GACjB,WAAW,CAAC;EACd;EACA,YAAY,MAAoD;GAC9D,IAAI,EAAE,QAAQ,SAAS;IACrB,EAAE,eAAe;IACjB,WAAW,CAAC;GACd;EACF;EACK;EACL,iBAAiB,cAAc,KAAA;EAC/B,gBAAgB,aAAa,SAAS,KAAA;EACtC,UAAU;CACZ;CAEJ,OACE,oBAAC,OAAD;EAAK,eAAa;EAAQ,WAAW,OAAO;YAC1C,oBAAC,WAAD,EAAW,GAAI,eAAiB,CAAA;CAC7B,CAAA;AAET;AAEA,iBAAiB,cAAc"}

package/lib/Slider.js

@@ -6,7 +6,7 @@ import { getAriaLabelAttributes } from "./utils/accessibility.js";
 import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
 import { useSize } from "./hooks/useSize.js";
 import Title_default from "./components/Title/index.js";
-import classNames from "classnames";
+import cn from "classnames";
 import { useEffect, useId, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Slider/styles.module.scss";
@@ -239,13 +239,13 @@ var Slider = (props) => {
 						renderEmojies(),
 						/* @__PURE__ */ jsxs("div", {
 							ref: trackRef,
-							className: classNames(styles["slider__track-wrapper"], disabled && styles["slider__track-wrapper--disabled"]),
+							className: cn(styles["slider__track-wrapper"], disabled && styles["slider__track-wrapper--disabled"]),
 							onPointerDown: handlePointerDown,
 							children: [/* @__PURE__ */ jsx("div", {
-								className: classNames(styles.slider__track, disabled && styles["slider__track--disabled"]),
+								className: cn(styles.slider__track, disabled && styles["slider__track--disabled"]),
 								children: renderSteps()
 							}), /* @__PURE__ */ jsx("div", {
-								className: classNames(styles.slider__marker, {
+								className: cn(styles.slider__marker, {
 									[styles["slider__marker--disabled"]]: disabled,
 									[styles["slider__marker--selected"]]: selectedState,
 									[styles["slider__marker--invalid"]]: invalid,

package/lib/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":[],"sources":["../src/components/Slider/Slider.tsx","../src/components/Slider/index.ts"],"sourcesContent":["import { useEffect, useState, useRef, useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { AnalyticsId } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport ErrorWrapper 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  const [prevMin, setPrevMin] = useState(min);\n  const [prevMax, setPrevMax] = useState(max);\n\n  const getSafeValue = (newValue: number): number => {\n    if (newValue > max) {\n      return max;\n    }\n    if (newValue < min) {\n      return min;\n    }\n    return newValue;\n  };\n\n  const setSafeValue = (newValue: number): void => {\n    setValue(getSafeValue(newValue));\n  };\n\n  if (min !== prevMin || max !== prevMax) {\n    setPrevMin(min);\n    setPrevMax(max);\n    const safeValue = getSafeValue(initial);\n    if (safeValue !== value) {\n      setValue(safeValue);\n    }\n  }\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, 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  /** Ref passed to component */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nexport const Slider: React.FC<SliderProps> = props => {\n  const {\n    title,\n    ariaLabel,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    errorWrapperClassName,\n    labelLeft,\n    labelRight,\n    disabled = false,\n    onChange,\n    steps,\n    step = 1,\n    minValue = 0,\n    maxValue = steps ? steps.length - 1 : 100,\n    selected = true,\n    testId,\n    value,\n    ref,\n    ...rest\n  } = props;\n\n  const [isMoving, setIsMoving] = useState(false);\n  const [selectedState, setSelectedState] = useState(typeof value === 'undefined' ? selected : true);\n  const [valueState, setValueState] = useSafeNumberValue(\n    typeof value === 'undefined' ? (maxValue - minValue) / 2 + minValue : value,\n    minValue,\n    maxValue\n  );\n\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const baseId = useId();\n  const titleId = 'title-' + baseId;\n  const labelLeftId = 'label-' + baseId;\n  const labelRightId = 'label-right-' + baseId;\n  const trackRef = useRef<HTMLDivElement>(null);\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const largeStep = maxValue / 10;\n  const invalid = !!errorText || !!error;\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return (): void => {\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, []);\n\n  const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n    const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n    // Calculate the normalized position (0 to 1) of the marker along the track\n    const normalizedPosition = (markerPosition - trackPosition) / trackWidth;\n    const valueRange = maxValue - minValue;\n    // Calculate the value without considering the step\n    let value = normalizedPosition * valueRange + minValue;\n    // Adjust the value to account for the step increment\n    const stepCount = Math.round(value / step);\n    value = stepCount * step;\n    value = Math.max(minValue, Math.min(maxValue, value));\n\n    return value;\n  };\n\n  const handleSelected = (): void => {\n    if (selectedState === false) {\n      setSelectedState(true);\n    }\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 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    handleTrackClick(e);\n    setIsMoving(true);\n    handleSelected();\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    refObject.current?.focus();\n  };\n\n  const markerXPos = maxValue !== minValue ? (trackWidth / (maxValue - minValue)) * (valueState - minValue) : 0;\n\n  const getAriaValueText = (): string | undefined => {\n    const stepIndex = steps ? Math.round((valueState - minValue) / step) : null;\n\n    if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {\n      const step = steps[stepIndex];\n      const emojiCode = step.emojiUniCode;\n      const label = typeof step.label !== 'undefined' ? step.label.toString() : undefined;\n\n      return emojiCode && label ? `${emojiCode} ${label}` : emojiCode || label;\n    }\n\n    return undefined;\n  };\n\n  const getAriaLabeledById = (): string | undefined => {\n    if (title && labelLeft && labelRight) {\n      return [titleId, labelLeftId, labelRightId].join(' ');\n    }\n    if (title && labelLeft) {\n      return [titleId, labelLeftId].join(' ');\n    }\n    if (title && labelRight) {\n      return [titleId, labelRightId].join(' ');\n    }\n    if (title) {\n      return titleId;\n    }\n  };\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: ariaLabel,\n    id: getAriaLabeledById(),\n    prefer: 'label',\n  });\n\n  const getXPositionStyling = (index: number, stepsLength: number): { left: string } => {\n    return { left: `${(index / (stepsLength - 1)) * 100}%` };\n  };\n\n  useEffect(() => {\n    if (selectedState && onChange) {\n      onChange({\n        target: {\n          name: props.name,\n          value: valueState,\n        },\n      } as unknown as React.ChangeEvent<HTMLInputElement>);\n    }\n  }, [valueState, selectedState]);\n\n  const renderEmojies = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__emoji-container']}>\n        {steps?.map((step, index) => {\n          return (\n            step.emojiUniCode && (\n              <div\n                aria-hidden={true}\n                key={'emoji' + index}\n                className={styles['slider__emoji']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.emojiUniCode}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  const renderSteps = (): React.ReactNode => {\n    return steps?.map((_step, index) => {\n      return <div key={'step' + index} className={styles['slider__track__step']} style={getXPositionStyling(index, steps.length)} />;\n    });\n  };\n\n  const renderStepLabels = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__value-container']}>\n        {steps?.map((step, index) => {\n          return (\n            typeof step.label !== 'undefined' && (\n              <div\n                aria-hidden={true}\n                key={'label' + index}\n                className={styles['slider__value']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.label}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <input\n        aria-valuetext={getAriaValueText()}\n        className={styles['sr-only-slider']}\n        disabled={disabled}\n        min={minValue}\n        max={maxValue}\n        onChange={onChange}\n        onKeyDown={handleKeyDown}\n        value={valueState}\n        ref={mergedRefs}\n        type=\"range\"\n        {...rest}\n        {...ariaLabelAttributes}\n      />\n      <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n        {title && (\n          <Title className={styles['slider__title']} htmlMarkup={'h3'} margin={0} appearance={'title3'} id={titleId}>\n            {title}\n          </Title>\n        )}\n        <div className={styles['slider__content-container']}>\n          {renderEmojies()}\n          {/* Slider streken er klikkbar med mus/touch */}\n          <div\n            ref={trackRef}\n            className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n            onPointerDown={handlePointerDown}\n          >\n            <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])}>{renderSteps()}</div>\n            <div\n              className={classNames(styles.slider__marker, {\n                [styles['slider__marker--disabled']]: disabled,\n                [styles['slider__marker--selected']]: selectedState,\n                [styles['slider__marker--invalid']]: invalid,\n                [styles['slider__marker--focused']]: !disabled && isFocused,\n              })}\n              style={{\n                left: `${markerXPos}px`,\n              }}\n            />\n          </div>\n          {renderStepLabels()}\n        </div>\n        {(labelLeft || labelRight) && (\n          <span className={styles.slider__options}>\n            <span id={labelLeftId}>{labelLeft}</span>\n            <span id={labelRightId}>{labelRight}</span>\n          </span>\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n","import Slider from './Slider';\nexport * from './Slider';\nexport default Slider;\n"],"mappings":"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"}
+{"version":3,"file":"Slider.js","names":[],"sources":["../src/components/Slider/Slider.tsx","../src/components/Slider/index.ts"],"sourcesContent":["import { useEffect, useState, useRef, useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { AnalyticsId } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport ErrorWrapper 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  const [prevMin, setPrevMin] = useState(min);\n  const [prevMax, setPrevMax] = useState(max);\n\n  const getSafeValue = (newValue: number): number => {\n    if (newValue > max) {\n      return max;\n    }\n    if (newValue < min) {\n      return min;\n    }\n    return newValue;\n  };\n\n  const setSafeValue = (newValue: number): void => {\n    setValue(getSafeValue(newValue));\n  };\n\n  if (min !== prevMin || max !== prevMax) {\n    setPrevMin(min);\n    setPrevMax(max);\n    const safeValue = getSafeValue(initial);\n    if (safeValue !== value) {\n      setValue(safeValue);\n    }\n  }\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, 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  /** Ref passed to component */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nexport const Slider: React.FC<SliderProps> = props => {\n  const {\n    title,\n    ariaLabel,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    errorWrapperClassName,\n    labelLeft,\n    labelRight,\n    disabled = false,\n    onChange,\n    steps,\n    step = 1,\n    minValue = 0,\n    maxValue = steps ? steps.length - 1 : 100,\n    selected = true,\n    testId,\n    value,\n    ref,\n    ...rest\n  } = props;\n\n  const [isMoving, setIsMoving] = useState(false);\n  const [selectedState, setSelectedState] = useState(typeof value === 'undefined' ? selected : true);\n  const [valueState, setValueState] = useSafeNumberValue(\n    typeof value === 'undefined' ? (maxValue - minValue) / 2 + minValue : value,\n    minValue,\n    maxValue\n  );\n\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const baseId = useId();\n  const titleId = 'title-' + baseId;\n  const labelLeftId = 'label-' + baseId;\n  const labelRightId = 'label-right-' + baseId;\n  const trackRef = useRef<HTMLDivElement>(null);\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const largeStep = maxValue / 10;\n  const invalid = !!errorText || !!error;\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return (): void => {\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, []);\n\n  const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n    const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n    // Calculate the normalized position (0 to 1) of the marker along the track\n    const normalizedPosition = (markerPosition - trackPosition) / trackWidth;\n    const valueRange = maxValue - minValue;\n    // Calculate the value without considering the step\n    let value = normalizedPosition * valueRange + minValue;\n    // Adjust the value to account for the step increment\n    const stepCount = Math.round(value / step);\n    value = stepCount * step;\n    value = Math.max(minValue, Math.min(maxValue, value));\n\n    return value;\n  };\n\n  const handleSelected = (): void => {\n    if (selectedState === false) {\n      setSelectedState(true);\n    }\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 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    handleTrackClick(e);\n    setIsMoving(true);\n    handleSelected();\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    refObject.current?.focus();\n  };\n\n  const markerXPos = maxValue !== minValue ? (trackWidth / (maxValue - minValue)) * (valueState - minValue) : 0;\n\n  const getAriaValueText = (): string | undefined => {\n    const stepIndex = steps ? Math.round((valueState - minValue) / step) : null;\n\n    if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {\n      const step = steps[stepIndex];\n      const emojiCode = step.emojiUniCode;\n      const label = typeof step.label !== 'undefined' ? step.label.toString() : undefined;\n\n      return emojiCode && label ? `${emojiCode} ${label}` : emojiCode || label;\n    }\n\n    return undefined;\n  };\n\n  const getAriaLabeledById = (): string | undefined => {\n    if (title && labelLeft && labelRight) {\n      return [titleId, labelLeftId, labelRightId].join(' ');\n    }\n    if (title && labelLeft) {\n      return [titleId, labelLeftId].join(' ');\n    }\n    if (title && labelRight) {\n      return [titleId, labelRightId].join(' ');\n    }\n    if (title) {\n      return titleId;\n    }\n  };\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: ariaLabel,\n    id: getAriaLabeledById(),\n    prefer: 'label',\n  });\n\n  const getXPositionStyling = (index: number, stepsLength: number): { left: string } => {\n    return { left: `${(index / (stepsLength - 1)) * 100}%` };\n  };\n\n  useEffect(() => {\n    if (selectedState && onChange) {\n      onChange({\n        target: {\n          name: props.name,\n          value: valueState,\n        },\n      } as unknown as React.ChangeEvent<HTMLInputElement>);\n    }\n  }, [valueState, selectedState]);\n\n  const renderEmojies = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__emoji-container']}>\n        {steps?.map((step, index) => {\n          return (\n            step.emojiUniCode && (\n              <div\n                aria-hidden={true}\n                key={'emoji' + index}\n                className={styles['slider__emoji']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.emojiUniCode}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  const renderSteps = (): React.ReactNode => {\n    return steps?.map((_step, index) => {\n      return <div key={'step' + index} className={styles['slider__track__step']} style={getXPositionStyling(index, steps.length)} />;\n    });\n  };\n\n  const renderStepLabels = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__value-container']}>\n        {steps?.map((step, index) => {\n          return (\n            typeof step.label !== 'undefined' && (\n              <div\n                aria-hidden={true}\n                key={'label' + index}\n                className={styles['slider__value']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.label}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <input\n        aria-valuetext={getAriaValueText()}\n        className={styles['sr-only-slider']}\n        disabled={disabled}\n        min={minValue}\n        max={maxValue}\n        onChange={onChange}\n        onKeyDown={handleKeyDown}\n        value={valueState}\n        ref={mergedRefs}\n        type=\"range\"\n        {...rest}\n        {...ariaLabelAttributes}\n      />\n      <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n        {title && (\n          <Title className={styles['slider__title']} htmlMarkup={'h3'} margin={0} appearance={'title3'} id={titleId}>\n            {title}\n          </Title>\n        )}\n        <div className={styles['slider__content-container']}>\n          {renderEmojies()}\n          {/* Slider streken er klikkbar med mus/touch */}\n          <div\n            ref={trackRef}\n            className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n            onPointerDown={handlePointerDown}\n          >\n            <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])}>{renderSteps()}</div>\n            <div\n              className={classNames(styles.slider__marker, {\n                [styles['slider__marker--disabled']]: disabled,\n                [styles['slider__marker--selected']]: selectedState,\n                [styles['slider__marker--invalid']]: invalid,\n                [styles['slider__marker--focused']]: !disabled && isFocused,\n              })}\n              style={{\n                left: `${markerXPos}px`,\n              }}\n            />\n          </div>\n          {renderStepLabels()}\n        </div>\n        {(labelLeft || labelRight) && (\n          <span className={styles.slider__options}>\n            <span id={labelLeftId}>{labelLeft}</span>\n            <span id={labelRightId}>{labelRight}</span>\n          </span>\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n","import Slider from './Slider';\nexport * from './Slider';\nexport default Slider;\n"],"mappings":"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"}

package/lib/Spacer.js

@@ -1,12 +1,12 @@
 import { AnalyticsId } from "./constants.js";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx } from "react/jsx-runtime";
 import spacerStyles from "./components/Spacer/styles.module.scss";
 //#region src/components/Spacer/Spacer.tsx
 var Spacer = (props) => {
 	const { size = "s", className, testId, ref } = props;
 	return /* @__PURE__ */ jsx("span", {
-		className: classNames(spacerStyles.spacer, {
+		className: cn(spacerStyles.spacer, {
 			[spacerStyles["spacer--4xs"]]: size === "4xs",
 			[spacerStyles["spacer--3xs"]]: size === "3xs",
 			[spacerStyles["spacer--2xs"]]: size === "2xs",

package/lib/Spacer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spacer.js","names":[],"sources":["../src/components/Spacer/Spacer.tsx","../src/components/Spacer/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { SpacerSizes } from './../../theme/spacers';\n\nimport { AnalyticsId } from '../../constants';\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  /** Ref passed to the component */\n  ref?: React.Ref<HTMLElement | null>;\n}\n\nconst Spacer: React.FC<SpacerProps> = (props: SpacerProps) => {\n  const { size = 's', className, testId, ref } = props;\n  const spacerClasses = classNames(\n    spacerStyles.spacer,\n    {\n      [spacerStyles['spacer--4xs']]: size === '4xs',\n      [spacerStyles['spacer--3xs']]: size === '3xs',\n      [spacerStyles['spacer--2xs']]: size === '2xs',\n      [spacerStyles['spacer--xs']]: size === 'xs',\n      [spacerStyles['spacer--s']]: size === 's',\n      [spacerStyles['spacer--m']]: size === 'm',\n      [spacerStyles['spacer--l']]: size === 'l',\n      [spacerStyles['spacer--xl']]: size === 'xl',\n      [spacerStyles['spacer--2xl']]: size === '2xl',\n      [spacerStyles['spacer--3xl']]: size === '3xl',\n      [spacerStyles['spacer--4xl']]: size === '4xl',\n      [spacerStyles['spacer--5xl']]: size === '5xl',\n      [spacerStyles['spacer--6xl']]: size === '6xl',\n    },\n    className\n  );\n\n  return <span className={spacerClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Spacer}></span>;\n};\n\nexport default Spacer;\n","import Spacer from './Spacer';\nexport * from './Spacer';\nexport default Spacer;\n"],"mappings":";;;;;AAmBA,IAAM,UAAiC,UAAuB;CAC5D,MAAM,EAAE,OAAO,KAAK,WAAW,QAAQ,QAAQ;CAqB/C,OAAO,oBAAC,QAAD;EAAM,WApBS,WACpB,aAAa,QACb;IACG,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,gBAAgB,SAAS;IACtC,aAAa,eAAe,SAAS;IACrC,aAAa,eAAe,SAAS;IACrC,aAAa,eAAe,SAAS;IACrC,aAAa,gBAAgB,SAAS;IACtC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;EAC1C,GACA,SAGsB;EAAoB;EAAK,eAAa;EAAQ,oBAAkB,YAAY;CAAc,CAAA;AACpH;;;ACxCA,IAAA,iBAAe"}
+{"version":3,"file":"Spacer.js","names":[],"sources":["../src/components/Spacer/Spacer.tsx","../src/components/Spacer/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { SpacerSizes } from './../../theme/spacers';\n\nimport { AnalyticsId } from '../../constants';\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  /** Ref passed to the component */\n  ref?: React.Ref<HTMLElement | null>;\n}\n\nconst Spacer: React.FC<SpacerProps> = (props: SpacerProps) => {\n  const { size = 's', className, testId, ref } = props;\n  const spacerClasses = classNames(\n    spacerStyles.spacer,\n    {\n      [spacerStyles['spacer--4xs']]: size === '4xs',\n      [spacerStyles['spacer--3xs']]: size === '3xs',\n      [spacerStyles['spacer--2xs']]: size === '2xs',\n      [spacerStyles['spacer--xs']]: size === 'xs',\n      [spacerStyles['spacer--s']]: size === 's',\n      [spacerStyles['spacer--m']]: size === 'm',\n      [spacerStyles['spacer--l']]: size === 'l',\n      [spacerStyles['spacer--xl']]: size === 'xl',\n      [spacerStyles['spacer--2xl']]: size === '2xl',\n      [spacerStyles['spacer--3xl']]: size === '3xl',\n      [spacerStyles['spacer--4xl']]: size === '4xl',\n      [spacerStyles['spacer--5xl']]: size === '5xl',\n      [spacerStyles['spacer--6xl']]: size === '6xl',\n    },\n    className\n  );\n\n  return <span className={spacerClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Spacer}></span>;\n};\n\nexport default Spacer;\n","import Spacer from './Spacer';\nexport * from './Spacer';\nexport default Spacer;\n"],"mappings":";;;;;AAmBA,IAAM,UAAiC,UAAuB;CAC5D,MAAM,EAAE,OAAO,KAAK,WAAW,QAAQ,QAAQ;CAqB/C,OAAO,oBAAC,QAAD;EAAM,WApBS,GACpB,aAAa,QACb;IACG,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,gBAAgB,SAAS;IACtC,aAAa,eAAe,SAAS;IACrC,aAAa,eAAe,SAAS;IACrC,aAAa,eAAe,SAAS;IACrC,aAAa,gBAAgB,SAAS;IACtC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;EAC1C,GACA,SAGsB;EAAoB;EAAK,eAAa;EAAQ,oBAAkB,YAAY;CAAc,CAAA;AACpH;;;ACxCA,IAAA,iBAAe"}

package/lib/StatusDot.js

@@ -1,7 +1,7 @@
 import { AnalyticsId, FormOnColor, IconSize } from "./constants.js";
 import { getColor } from "./theme/currys/color.js";
 import { r as LazyIcon } from "./LazyIcon.js";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/StatusDot/styles.module.scss";
 //#region src/components/StatusDot/constants.ts
@@ -40,7 +40,7 @@ var StatusDotIcon = ({ onColor, variant = "info" }) => {
 		color: onColor === StatusDotOnColor.ondark ? getColor("white") : getColor("black"),
 		size: IconSize.XXSmall,
 		onColor,
-		className: classNames({
+		className: cn({
 			[styles[`statusdot__dot--${variant}`]]: typeof variant !== "undefined",
 			[styles["statusdot__dot--on-dark"]]: onColor === StatusDotOnColor.ondark
 		})
@@ -131,8 +131,8 @@ var StatusDotIcon = ({ onColor, variant = "info" }) => {
 };
 var StatusDot = (props) => {
 	const { id, onColor = StatusDotOnColor.onwhite, variant = StatusDotVariant.info, text, className, testId, ref } = props;
-	const statusDotClasses = classNames(styles["statusdot"], className);
-	const labelClasses = classNames(styles["statusdot__label"], { [styles["statusdot__label--on-dark"]]: onColor === StatusDotOnColor.ondark });
+	const statusDotClasses = cn(styles["statusdot"], className);
+	const labelClasses = cn(styles["statusdot__label"], { [styles["statusdot__label--on-dark"]]: onColor === StatusDotOnColor.ondark });
 	return /* @__PURE__ */ jsxs("span", {
 		id,
 		ref,

package/lib/StatusDot.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.js","names":[],"sources":["../src/components/StatusDot/constants.ts","../src/components/StatusDot/StatusDot.tsx","../src/components/StatusDot/index.ts"],"sourcesContent":["import { FormOnColor } from '../../constants';\n\nexport enum StatusDotOnColor {\n  onwhite = FormOnColor.onwhite,\n  ondark = FormOnColor.ondark,\n}\n\nexport enum StatusDotVariant {\n  success = 'success',\n  inprocess = 'inprocess',\n  exception = 'exception',\n  unknown = 'unknown',\n  inspected = 'inspected',\n  cancelled = 'cancelled',\n  alert = 'alert',\n  transparent = 'transparent',\n  info = 'info',\n  group = 'group',\n  recurring = 'recurring',\n  noaccess = 'noaccess',\n  draft = 'draft',\n  hidden = 'hidden',\n  login = 'login',\n  attachment = 'attachment',\n  active = 'active',\n  pending = 'pending',\n  inactive = 'inactive',\n  ready = 'ready',\n}\n","import classNames from 'classnames';\n\nimport { StatusDotOnColor, StatusDotVariant } from './constants';\nimport { IconSize } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport { LazyIcon } from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport interface StatusDotIconProps {\n  /** Defines the color of the icon */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** The variant defines style formatting and what icon to use */\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ onColor, variant = 'info' }) => {\n  const color = onColor === StatusDotOnColor.ondark ? getColor('white') : getColor('black');\n  const iconProps = {\n    color,\n    size: IconSize.XXSmall,\n    onColor,\n    className: classNames({\n      [styles[`statusdot__dot--${variant}`]]: typeof variant !== 'undefined',\n      [styles['statusdot__dot--on-dark']]: onColor === StatusDotOnColor.ondark,\n    }),\n  };\n\n  switch (variant) {\n    case StatusDotVariant.success:\n      return <LazyIcon {...iconProps} iconName={'DotCheckmark'} />;\n    case StatusDotVariant.inprocess:\n      return <LazyIcon {...iconProps} iconName={'DotHalfDisc'} />;\n    case StatusDotVariant.exception:\n      return <LazyIcon {...iconProps} iconName={'DotTriangle'} />;\n    case StatusDotVariant.unknown:\n      return <LazyIcon {...iconProps} iconName={'DotQuestionMark'} />;\n    case StatusDotVariant.inspected:\n      return <LazyIcon {...iconProps} iconName={'DotLookingGlass'} />;\n    case StatusDotVariant.cancelled:\n      return <LazyIcon {...iconProps} iconName={'DotX'} />;\n    case StatusDotVariant.alert:\n      return <LazyIcon {...iconProps} iconName={'DotExclamationMark'} />;\n    case StatusDotVariant.transparent:\n      return <LazyIcon {...iconProps} iconName={'DotOutline'} />;\n    case StatusDotVariant.info:\n      return <LazyIcon {...iconProps} iconName={'DotInfo'} />;\n    case StatusDotVariant.group:\n      return <LazyIcon {...iconProps} iconName={'DotGroup'} />;\n    case StatusDotVariant.recurring:\n      return <LazyIcon {...iconProps} iconName={'DotCircleArrows'} />;\n    case StatusDotVariant.noaccess:\n      return <LazyIcon {...iconProps} iconName={'DotNoAccess'} />;\n    case StatusDotVariant.draft:\n      return <LazyIcon {...iconProps} iconName={'DotPencil'} />;\n    case StatusDotVariant.hidden:\n      return <LazyIcon {...iconProps} iconName={'DotNoEye'} />;\n    case StatusDotVariant.login:\n      return <LazyIcon {...iconProps} iconName={'DotLogin'} />;\n    case StatusDotVariant.attachment:\n      return <LazyIcon {...iconProps} iconName={'DotAttachment'} />;\n    case StatusDotVariant.active:\n      return <LazyIcon {...iconProps} iconName={'DotFill'} />;\n    case StatusDotVariant.pending:\n      return <LazyIcon {...iconProps} iconName={'DotDot'} />;\n    case StatusDotVariant.inactive:\n      return <LazyIcon {...iconProps} iconName={'DotOutline'} />;\n    case StatusDotVariant.ready:\n      return <LazyIcon {...iconProps} iconName={'DotOutline'} />;\n  }\n\n  return null;\n};\n\nexport interface StatusDotProps {\n  /** id that is placed on the wrapper */\n  id?: string;\n  /** Defines the color mode, onwhite, ondark etc. */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the root element */\n  ref?: React.Ref<HTMLElement | null>;\n}\n\nexport type StatusDotType = typeof StatusDot;\nconst StatusDot: React.FC<StatusDotProps> = (props: StatusDotProps) => {\n  const { id, onColor = StatusDotOnColor.onwhite, variant = StatusDotVariant.info, text, className, testId, ref } = props;\n  const statusDotClasses = classNames(styles['statusdot'], className);\n  const labelClasses = classNames(styles['statusdot__label'], {\n    [styles['statusdot__label--on-dark']]: onColor === StatusDotOnColor.ondark,\n  });\n\n  return (\n    <span id={id} ref={ref} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={styles['statusdot__dot']} data-testid={testId + '-dot'}>\n        <StatusDotIcon onColor={onColor} variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </span>\n  );\n};\n\nexport default StatusDot;\n","import StatusDot from './StatusDot';\nexport { StatusDotOnColor, StatusDotVariant } from './constants';\nexport * from './StatusDot';\nexport default StatusDot;\n"],"mappings":"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"}
+{"version":3,"file":"StatusDot.js","names":[],"sources":["../src/components/StatusDot/constants.ts","../src/components/StatusDot/StatusDot.tsx","../src/components/StatusDot/index.ts"],"sourcesContent":["import { FormOnColor } from '../../constants';\n\nexport enum StatusDotOnColor {\n  onwhite = FormOnColor.onwhite,\n  ondark = FormOnColor.ondark,\n}\n\nexport enum StatusDotVariant {\n  success = 'success',\n  inprocess = 'inprocess',\n  exception = 'exception',\n  unknown = 'unknown',\n  inspected = 'inspected',\n  cancelled = 'cancelled',\n  alert = 'alert',\n  transparent = 'transparent',\n  info = 'info',\n  group = 'group',\n  recurring = 'recurring',\n  noaccess = 'noaccess',\n  draft = 'draft',\n  hidden = 'hidden',\n  login = 'login',\n  attachment = 'attachment',\n  active = 'active',\n  pending = 'pending',\n  inactive = 'inactive',\n  ready = 'ready',\n}\n","import classNames from 'classnames';\n\nimport { StatusDotOnColor, StatusDotVariant } from './constants';\nimport { IconSize } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport { LazyIcon } from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport interface StatusDotIconProps {\n  /** Defines the color of the icon */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** The variant defines style formatting and what icon to use */\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ onColor, variant = 'info' }) => {\n  const color = onColor === StatusDotOnColor.ondark ? getColor('white') : getColor('black');\n  const iconProps = {\n    color,\n    size: IconSize.XXSmall,\n    onColor,\n    className: classNames({\n      [styles[`statusdot__dot--${variant}`]]: typeof variant !== 'undefined',\n      [styles['statusdot__dot--on-dark']]: onColor === StatusDotOnColor.ondark,\n    }),\n  };\n\n  switch (variant) {\n    case StatusDotVariant.success:\n      return <LazyIcon {...iconProps} iconName={'DotCheckmark'} />;\n    case StatusDotVariant.inprocess:\n      return <LazyIcon {...iconProps} iconName={'DotHalfDisc'} />;\n    case StatusDotVariant.exception:\n      return <LazyIcon {...iconProps} iconName={'DotTriangle'} />;\n    case StatusDotVariant.unknown:\n      return <LazyIcon {...iconProps} iconName={'DotQuestionMark'} />;\n    case StatusDotVariant.inspected:\n      return <LazyIcon {...iconProps} iconName={'DotLookingGlass'} />;\n    case StatusDotVariant.cancelled:\n      return <LazyIcon {...iconProps} iconName={'DotX'} />;\n    case StatusDotVariant.alert:\n      return <LazyIcon {...iconProps} iconName={'DotExclamationMark'} />;\n    case StatusDotVariant.transparent:\n      return <LazyIcon {...iconProps} iconName={'DotOutline'} />;\n    case StatusDotVariant.info:\n      return <LazyIcon {...iconProps} iconName={'DotInfo'} />;\n    case StatusDotVariant.group:\n      return <LazyIcon {...iconProps} iconName={'DotGroup'} />;\n    case StatusDotVariant.recurring:\n      return <LazyIcon {...iconProps} iconName={'DotCircleArrows'} />;\n    case StatusDotVariant.noaccess:\n      return <LazyIcon {...iconProps} iconName={'DotNoAccess'} />;\n    case StatusDotVariant.draft:\n      return <LazyIcon {...iconProps} iconName={'DotPencil'} />;\n    case StatusDotVariant.hidden:\n      return <LazyIcon {...iconProps} iconName={'DotNoEye'} />;\n    case StatusDotVariant.login:\n      return <LazyIcon {...iconProps} iconName={'DotLogin'} />;\n    case StatusDotVariant.attachment:\n      return <LazyIcon {...iconProps} iconName={'DotAttachment'} />;\n    case StatusDotVariant.active:\n      return <LazyIcon {...iconProps} iconName={'DotFill'} />;\n    case StatusDotVariant.pending:\n      return <LazyIcon {...iconProps} iconName={'DotDot'} />;\n    case StatusDotVariant.inactive:\n      return <LazyIcon {...iconProps} iconName={'DotOutline'} />;\n    case StatusDotVariant.ready:\n      return <LazyIcon {...iconProps} iconName={'DotOutline'} />;\n  }\n\n  return null;\n};\n\nexport interface StatusDotProps {\n  /** id that is placed on the wrapper */\n  id?: string;\n  /** Defines the color mode, onwhite, ondark etc. */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the root element */\n  ref?: React.Ref<HTMLElement | null>;\n}\n\nexport type StatusDotType = typeof StatusDot;\nconst StatusDot: React.FC<StatusDotProps> = (props: StatusDotProps) => {\n  const { id, onColor = StatusDotOnColor.onwhite, variant = StatusDotVariant.info, text, className, testId, ref } = props;\n  const statusDotClasses = classNames(styles['statusdot'], className);\n  const labelClasses = classNames(styles['statusdot__label'], {\n    [styles['statusdot__label--on-dark']]: onColor === StatusDotOnColor.ondark,\n  });\n\n  return (\n    <span id={id} ref={ref} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={styles['statusdot__dot']} data-testid={testId + '-dot'}>\n        <StatusDotIcon onColor={onColor} variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </span>\n  );\n};\n\nexport default StatusDot;\n","import StatusDot from './StatusDot';\nexport { StatusDotOnColor, StatusDotVariant } from './constants';\nexport * from './StatusDot';\nexport default StatusDot;\n"],"mappings":"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"}

package/lib/StatusDotList.js

@@ -1,5 +1,5 @@
 import { r as StatusDotVariant, t as StatusDot_default } from "./StatusDot.js";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/ElementHeader/StatusDotList/styles.module.scss";
 //#region src/components/ElementHeader/StatusDotList/StatusDotList.tsx
@@ -7,7 +7,7 @@ var StatusDotList = (props) => {
 	const { additionalText, children, className = "", testId, stacking = "horizontal", hiddenForChild = false, topStatusDot, bottomStatusDot } = props;
 	return /* @__PURE__ */ jsxs("span", {
 		"data-testid": testId,
-		className: classNames(styles["statusdotlist"], className),
+		className: cn(styles["statusdotlist"], className),
 		children: [
 			topStatusDot,
 			hiddenForChild && /* @__PURE__ */ jsx(StatusDot_default, {

package/lib/StatusDotList.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDotList.js","names":[],"sources":["../src/components/ElementHeader/StatusDotList/StatusDotList.tsx","../src/components/ElementHeader/StatusDotList/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport type { StatusDotProps } from '../../StatusDot';\n\nimport StatusDot, { StatusDotVariant } from '../../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type StatusDotListType = typeof StatusDotList;\n\nexport interface StatusDotListProps {\n  /** Additional text to the bottom statusdot */\n  additionalText?: string;\n  /** StatusDot that is under the others and outside the stacking */\n  bottomStatusDot?: React.ReactElement<StatusDotProps>;\n  /** Stacking of the statusdots  */\n  stacking?: 'vertical' | 'horizontal';\n  /** StatusDots as children */\n  children?: React.ReactNode;\n  /** Adds custom classes */\n  className?: string;\n  /** Show a hidden for child statusdot over the other */\n  hiddenForChild?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** StatusDot that is over the others and outside the stacking */\n  topStatusDot?: React.ReactElement<StatusDotProps>;\n}\n\nexport const StatusDotList: React.FC<StatusDotListProps> = props => {\n  const {\n    additionalText,\n    children,\n    className = '',\n    testId,\n    stacking = 'horizontal',\n    hiddenForChild = false,\n    topStatusDot,\n    bottomStatusDot,\n  } = props;\n\n  return (\n    <span data-testid={testId} className={cn(styles['statusdotlist'], className)}>\n      {topStatusDot}\n      {/* @todo: legg til tekst i SOT */}\n      {hiddenForChild && <StatusDot variant={StatusDotVariant.hidden} text=\"Skjult for barnet\" />}\n      <span data-stacking={stacking} className={styles['statusdotlist__children']}>\n        {children}\n      </span>\n      {bottomStatusDot}\n      {additionalText && <span className={styles['statusdotlist__additional-text']}>{additionalText}</span>}\n    </span>\n  );\n};\n\nexport default StatusDotList;\n","import StatusDotList from './StatusDotList';\nexport * from './StatusDotList';\nexport default StatusDotList;\n"],"mappings":";;;;;AA6BA,IAAa,iBAA8C,UAAS;CAClE,MAAM,EACJ,gBACA,UACA,YAAY,IACZ,QACA,WAAW,cACX,iBAAiB,OACjB,cACA,oBACE;CAEJ,OACE,qBAAC,QAAD;EAAM,eAAa;EAAQ,WAAW,WAAG,OAAO,kBAAkB,SAAS;YAA3E;GACG;GAEA,kBAAkB,oBAAC,mBAAD;IAAW,SAAS,iBAAiB;IAAQ,MAAK;GAAqB,CAAA;GAC1F,oBAAC,QAAD;IAAM,iBAAe;IAAU,WAAW,OAAO;IAC9C;GACG,CAAA;GACL;GACA,kBAAkB,oBAAC,QAAD;IAAM,WAAW,OAAO;cAAoC;GAAqB,CAAA;EAChG;;AAEV;;;ACnDA,IAAA,wBAAe"}
+{"version":3,"file":"StatusDotList.js","names":[],"sources":["../src/components/ElementHeader/StatusDotList/StatusDotList.tsx","../src/components/ElementHeader/StatusDotList/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport type { StatusDotProps } from '../../StatusDot';\n\nimport StatusDot, { StatusDotVariant } from '../../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type StatusDotListType = typeof StatusDotList;\n\nexport interface StatusDotListProps {\n  /** Additional text to the bottom statusdot */\n  additionalText?: string;\n  /** StatusDot that is under the others and outside the stacking */\n  bottomStatusDot?: React.ReactElement<StatusDotProps>;\n  /** Stacking of the statusdots  */\n  stacking?: 'vertical' | 'horizontal';\n  /** StatusDots as children */\n  children?: React.ReactNode;\n  /** Adds custom classes */\n  className?: string;\n  /** Show a hidden for child statusdot over the other */\n  hiddenForChild?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** StatusDot that is over the others and outside the stacking */\n  topStatusDot?: React.ReactElement<StatusDotProps>;\n}\n\nexport const StatusDotList: React.FC<StatusDotListProps> = props => {\n  const {\n    additionalText,\n    children,\n    className = '',\n    testId,\n    stacking = 'horizontal',\n    hiddenForChild = false,\n    topStatusDot,\n    bottomStatusDot,\n  } = props;\n\n  return (\n    <span data-testid={testId} className={cn(styles['statusdotlist'], className)}>\n      {topStatusDot}\n      {/* @todo: legg til tekst i SOT */}\n      {hiddenForChild && <StatusDot variant={StatusDotVariant.hidden} text=\"Skjult for barnet\" />}\n      <span data-stacking={stacking} className={styles['statusdotlist__children']}>\n        {children}\n      </span>\n      {bottomStatusDot}\n      {additionalText && <span className={styles['statusdotlist__additional-text']}>{additionalText}</span>}\n    </span>\n  );\n};\n\nexport default StatusDotList;\n","import StatusDotList from './StatusDotList';\nexport * from './StatusDotList';\nexport default StatusDotList;\n"],"mappings":";;;;;AA6BA,IAAa,iBAA8C,UAAS;CAClE,MAAM,EACJ,gBACA,UACA,YAAY,IACZ,QACA,WAAW,cACX,iBAAiB,OACjB,cACA,oBACE;CAEJ,OACE,qBAAC,QAAD;EAAM,eAAa;EAAQ,WAAW,GAAG,OAAO,kBAAkB,SAAS;YAA3E;GACG;GAEA,kBAAkB,oBAAC,mBAAD;IAAW,SAAS,iBAAiB;IAAQ,MAAK;GAAqB,CAAA;GAC1F,oBAAC,QAAD;IAAM,iBAAe;IAAU,WAAW,OAAO;IAC9C;GACG,CAAA;GACL;GACA,kBAAkB,oBAAC,QAAD;IAAM,WAAW,OAAO;cAAoC;GAAqB,CAAA;EAChG;;AAEV;;;ACnDA,IAAA,wBAAe"}

package/lib/StepButtons.js

@@ -1,12 +1,12 @@
 import { AnalyticsId } from "./constants.js";
-import classNames from "classnames";
+import cn from "classnames";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/StepButtons/styles.module.scss";
 //#region src/components/StepButtons/StepButtons.tsx
 var StepButtons = (props) => {
 	const { backButton, forwardButton, additionalButtons, cancelButton, sticky = false, testId } = props;
-	const navigationClasses = classNames(styles.stepbuttons, sticky && styles["stepbuttons--has-sticky-buttons"]);
+	const navigationClasses = cn(styles.stepbuttons, sticky && styles["stepbuttons--has-sticky-buttons"]);
 	if (backButton || forwardButton || additionalButtons || cancelButton) return /* @__PURE__ */ jsxs("div", {
 		className: navigationClasses,
 		"data-testid": testId,
@@ -16,14 +16,14 @@ var StepButtons = (props) => {
 				className: styles.stepbuttons__buttons,
 				children: [backButton && React.cloneElement(backButton, {
 					variant: "outline",
-					wrapperClassName: classNames(styles["stepbuttons__button--back"])
+					wrapperClassName: cn(styles["stepbuttons__button--back"])
 				}), forwardButton && React.cloneElement(forwardButton, {
 					variant: "fill",
-					wrapperClassName: classNames(styles["stepbuttons__button--forward"])
+					wrapperClassName: cn(styles["stepbuttons__button--forward"])
 				})]
 			}),
 			additionalButtons && /* @__PURE__ */ jsx("div", {
-				className: classNames(styles.stepbuttons__buttons, styles["stepbuttons__buttons--additional"]),
+				className: cn(styles.stepbuttons__buttons, styles["stepbuttons__buttons--additional"]),
 				children: additionalButtons
 			}),
 			cancelButton && /* @__PURE__ */ jsx("div", {

package/lib/StepButtons.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepButtons.js","names":[],"sources":["../src/components/StepButtons/StepButtons.tsx","../src/components/StepButtons/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ButtonProps } from '../Button';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface StepButtonsProps {\n  /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n  backButton?: React.ReactElement<ButtonProps>;\n  /** Knapp for å gå videre. Vises med \"fill\" variant. */\n  forwardButton?: React.ReactElement<ButtonProps>;\n  /** Ekstra knapper. Valgfritt utseende. */\n  additionalButtons?: React.ReactElement<ButtonProps>[];\n  /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n  cancelButton?: React.ReactElement<ButtonProps>;\n  /** Knappene vil vises sticky nederst på skjermen. Default: false  */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const StepButtons: React.FC<StepButtonsProps> = props => {\n  const { backButton, forwardButton, additionalButtons, cancelButton, sticky = false, testId } = props;\n\n  const navigationClasses = classNames(styles.stepbuttons, sticky && styles['stepbuttons--has-sticky-buttons']);\n\n  if (backButton || forwardButton || additionalButtons || cancelButton) {\n    return (\n      <div className={navigationClasses} data-testid={testId} data-analyticsid={AnalyticsId.StepButtons}>\n        {(backButton || forwardButton) && (\n          <div className={styles.stepbuttons__buttons}>\n            {backButton &&\n              React.cloneElement(backButton, {\n                variant: 'outline',\n                wrapperClassName: classNames(styles['stepbuttons__button--back']),\n              })}\n            {forwardButton &&\n              React.cloneElement(forwardButton, {\n                variant: 'fill',\n                wrapperClassName: classNames(styles['stepbuttons__button--forward']),\n              })}\n          </div>\n        )}\n        {additionalButtons && (\n          <div className={classNames(styles.stepbuttons__buttons, styles['stepbuttons__buttons--additional'])}>{additionalButtons}</div>\n        )}\n        {cancelButton && (\n          <div className={styles.stepbuttons__buttons}>\n            {React.cloneElement(cancelButton, {\n              variant: 'borderless',\n            })}\n          </div>\n        )}\n      </div>\n    );\n  }\n  return null;\n};\n\nexport default StepButtons;\n","import StepButtons from './StepButtons';\nexport * from './StepButtons';\nexport default StepButtons;\n"],"mappings":";;;;;;AAyBA,IAAa,eAA0C,UAAS;CAC9D,MAAM,EAAE,YAAY,eAAe,mBAAmB,cAAc,SAAS,OAAO,WAAW;CAE/F,MAAM,oBAAoB,WAAW,OAAO,aAAa,UAAU,OAAO,kCAAkC;CAE5G,IAAI,cAAc,iBAAiB,qBAAqB,cACtD,OACE,qBAAC,OAAD;EAAK,WAAW;EAAmB,eAAa;EAAQ,oBAAkB,YAAY;YAAtF;IACI,cAAc,kBACd,qBAAC,OAAD;IAAK,WAAW,OAAO;cAAvB,CACG,cACC,MAAM,aAAa,YAAY;KAC7B,SAAS;KACT,kBAAkB,WAAW,OAAO,4BAA4B;IAClE,CAAC,GACF,iBACC,MAAM,aAAa,eAAe;KAChC,SAAS;KACT,kBAAkB,WAAW,OAAO,+BAA+B;IACrE,CAAC,CACA;;GAEN,qBACC,oBAAC,OAAD;IAAK,WAAW,WAAW,OAAO,sBAAsB,OAAO,mCAAmC;cAAI;GAAuB,CAAA;GAE9H,gBACC,oBAAC,OAAD;IAAK,WAAW,OAAO;cACpB,MAAM,aAAa,cAAc,EAChC,SAAS,aACX,CAAC;GACE,CAAA;EAEJ;;CAGT,OAAO;AACT;;;AC3DA,IAAA,sBAAe"}
+{"version":3,"file":"StepButtons.js","names":[],"sources":["../src/components/StepButtons/StepButtons.tsx","../src/components/StepButtons/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ButtonProps } from '../Button';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface StepButtonsProps {\n  /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n  backButton?: React.ReactElement<ButtonProps>;\n  /** Knapp for å gå videre. Vises med \"fill\" variant. */\n  forwardButton?: React.ReactElement<ButtonProps>;\n  /** Ekstra knapper. Valgfritt utseende. */\n  additionalButtons?: React.ReactElement<ButtonProps>[];\n  /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n  cancelButton?: React.ReactElement<ButtonProps>;\n  /** Knappene vil vises sticky nederst på skjermen. Default: false  */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const StepButtons: React.FC<StepButtonsProps> = props => {\n  const { backButton, forwardButton, additionalButtons, cancelButton, sticky = false, testId } = props;\n\n  const navigationClasses = classNames(styles.stepbuttons, sticky && styles['stepbuttons--has-sticky-buttons']);\n\n  if (backButton || forwardButton || additionalButtons || cancelButton) {\n    return (\n      <div className={navigationClasses} data-testid={testId} data-analyticsid={AnalyticsId.StepButtons}>\n        {(backButton || forwardButton) && (\n          <div className={styles.stepbuttons__buttons}>\n            {backButton &&\n              React.cloneElement(backButton, {\n                variant: 'outline',\n                wrapperClassName: classNames(styles['stepbuttons__button--back']),\n              })}\n            {forwardButton &&\n              React.cloneElement(forwardButton, {\n                variant: 'fill',\n                wrapperClassName: classNames(styles['stepbuttons__button--forward']),\n              })}\n          </div>\n        )}\n        {additionalButtons && (\n          <div className={classNames(styles.stepbuttons__buttons, styles['stepbuttons__buttons--additional'])}>{additionalButtons}</div>\n        )}\n        {cancelButton && (\n          <div className={styles.stepbuttons__buttons}>\n            {React.cloneElement(cancelButton, {\n              variant: 'borderless',\n            })}\n          </div>\n        )}\n      </div>\n    );\n  }\n  return null;\n};\n\nexport default StepButtons;\n","import StepButtons from './StepButtons';\nexport * from './StepButtons';\nexport default StepButtons;\n"],"mappings":";;;;;;AAyBA,IAAa,eAA0C,UAAS;CAC9D,MAAM,EAAE,YAAY,eAAe,mBAAmB,cAAc,SAAS,OAAO,WAAW;CAE/F,MAAM,oBAAoB,GAAW,OAAO,aAAa,UAAU,OAAO,kCAAkC;CAE5G,IAAI,cAAc,iBAAiB,qBAAqB,cACtD,OACE,qBAAC,OAAD;EAAK,WAAW;EAAmB,eAAa;EAAQ,oBAAkB,YAAY;YAAtF;IACI,cAAc,kBACd,qBAAC,OAAD;IAAK,WAAW,OAAO;cAAvB,CACG,cACC,MAAM,aAAa,YAAY;KAC7B,SAAS;KACT,kBAAkB,GAAW,OAAO,4BAA4B;IAClE,CAAC,GACF,iBACC,MAAM,aAAa,eAAe;KAChC,SAAS;KACT,kBAAkB,GAAW,OAAO,+BAA+B;IACrE,CAAC,CACA;;GAEN,qBACC,oBAAC,OAAD;IAAK,WAAW,GAAW,OAAO,sBAAsB,OAAO,mCAAmC;cAAI;GAAuB,CAAA;GAE9H,gBACC,oBAAC,OAAD;IAAK,WAAW,OAAO;cACpB,MAAM,aAAa,cAAc,EAChC,SAAS,aACX,CAAC;GACE,CAAA;EAEJ;;CAGT,OAAO;AACT;;;AC3DA,IAAA,sBAAe"}

package/lib/TabList.js

@@ -8,7 +8,7 @@ import { useIsVisible } from "./hooks/useIsVisible.js";
 import ChevronLeft from "./components/Icons/ChevronLeft.js";
 import ChevronRight from "./components/Icons/ChevronRight.js";
 import { useRovingFocus } from "./hooks/useRovingFocus.js";
-import classNames from "classnames";
+import cn from "classnames";
 import React, { useEffect, useRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Tabs/TabList/styles.module.scss";
@@ -51,7 +51,7 @@ var TabItem = (props) => {
 		props.onTabListClick(props.index);
 		scrollToTab(props.index);
 	};
-	const tabButtonClasses = classNames(styles["tab-list__tab"], styles[`tab-list__tab--${props.color}`], {
+	const tabButtonClasses = cn(styles["tab-list__tab"], styles[`tab-list__tab--${props.color}`], {
 		[styles["tab-list__tab--selected"]]: isSelected,
 		[styles["tab-list__tab--not-selected"]]: !isSelected
 	});
@@ -100,7 +100,7 @@ var TabList = (props) => {
 	const listRef = useRef(null);
 	const tabRefs = useRef(React.Children.map(children, () => React.createRef()) || []);
 	useRovingFocus(onTabListClick, tabRefs, listRef, true);
-	const tablistClasses = classNames(styles["tab-list"], styles[`tab-list--${onColor}`]);
+	const tablistClasses = cn(styles["tab-list"], styles[`tab-list--${onColor}`]);
 	const getBackgroundColor = (onColor) => {
 		switch (onColor) {
 			case "onwhite": return "var(--color-base-background-white)";
@@ -143,14 +143,14 @@ var TabList = (props) => {
 		className: styles["tab-list-wrapper"],
 		children: [
 			shouldShowFadeStart() && /* @__PURE__ */ jsxs("div", {
-				className: classNames(styles["tab-list__start-wrapper"]),
+				className: cn(styles["tab-list__start-wrapper"]),
 				children: [/* @__PURE__ */ jsx(TabChevron, {
 					onClick: () => scrollInList("left"),
 					direction: "left",
 					backgroundColor: `${getBackgroundColor(onColor)}`,
 					ariaLabel: ariaLabelLeftButton
 				}), /* @__PURE__ */ jsx("div", {
-					className: classNames(styles["tab-list__fade-start"]),
+					className: cn(styles["tab-list__fade-start"]),
 					style: { backgroundColor: `${getBackgroundColor(onColor)}` }
 				})]
 			}),
@@ -173,9 +173,9 @@ var TabList = (props) => {
 				})
 			}),
 			shouldShowFadeEnd() && /* @__PURE__ */ jsxs("div", {
-				className: classNames(styles["tab-list__end-wrapper"]),
+				className: cn(styles["tab-list__end-wrapper"]),
 				children: [/* @__PURE__ */ jsx("div", {
-					className: classNames(styles["tab-list__fade-end"]),
+					className: cn(styles["tab-list__fade-end"]),
 					style: { backgroundColor: `${getBackgroundColor(onColor)}` }
 				}), /* @__PURE__ */ jsx(TabChevron, {
 					onClick: () => scrollInList("right"),
@@ -184,7 +184,7 @@ var TabList = (props) => {
 					ariaLabel: ariaLabelRightButton
 				})]
 			}),
-			/* @__PURE__ */ jsx("div", { className: classNames(styles["tab-list__border"]) })
+			/* @__PURE__ */ jsx("div", { className: cn(styles["tab-list__border"]) })
 		]
 	});
 };

package/lib/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","names":[],"sources":["../src/components/Tabs/Tab.tsx","../src/components/Tabs/TabList/TabChevron.tsx","../src/components/Tabs/TabList/TabItem.tsx","../src/components/Tabs/TabList/TabList.tsx","../src/components/Tabs/TabList/index.ts"],"sourcesContent":["import type { SvgIcon } from '../Icon';\nimport type { 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 from 'react';\n\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\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 } = usePseudoClasses<HTMLButtonElement | null>(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 { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { IconName } from '../../Icons/IconNames';\nimport type { TabProps } from '../Tab';\nimport type { TabsColors } from '../Tabs';\n\nimport { palette } from '../../../theme/palette';\nimport Icon, { IconSize } from '../../Icon';\nimport LazyIcon from '../../LazyIcon';\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.RefObject<React.RefObject<HTMLButtonElement | null>[] | 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    if (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\n    if (currentRef?.current?.scrollIntoView) {\n      currentRef?.current?.scrollIntoView({ behavior: 'smooth', inline: 'nearest', block: 'nearest' });\n    }\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      >\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, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { TabProps } from '../Tab';\nimport type { TabsColors, TabsOnColor } from '../Tabs';\n\nimport TabChevron from './TabChevron';\nimport TabItem from './TabItem';\nimport { useIsVisible } from '../../../hooks/useIsVisible';\nimport { useRovingFocus } from '../../../hooks/useRovingFocus';\nimport { isComponent } from '../../../utils/component';\nimport Tab from '../Tab';\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 className={styles['tab-list-wrapper']}>\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","import TabList from './TabList';\nexport * from './TabList';\nexport default TabList;\n"],"mappings":"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"}
+{"version":3,"file":"TabList.js","names":[],"sources":["../src/components/Tabs/Tab.tsx","../src/components/Tabs/TabList/TabChevron.tsx","../src/components/Tabs/TabList/TabItem.tsx","../src/components/Tabs/TabList/TabList.tsx","../src/components/Tabs/TabList/index.ts"],"sourcesContent":["import type { SvgIcon } from '../Icon';\nimport type { 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 from 'react';\n\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\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 } = usePseudoClasses<HTMLButtonElement | null>(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 { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { IconName } from '../../Icons/IconNames';\nimport type { TabProps } from '../Tab';\nimport type { TabsColors } from '../Tabs';\n\nimport { palette } from '../../../theme/palette';\nimport Icon, { IconSize } from '../../Icon';\nimport LazyIcon from '../../LazyIcon';\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.RefObject<React.RefObject<HTMLButtonElement | null>[] | 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    if (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\n    if (currentRef?.current?.scrollIntoView) {\n      currentRef?.current?.scrollIntoView({ behavior: 'smooth', inline: 'nearest', block: 'nearest' });\n    }\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      >\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, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { TabProps } from '../Tab';\nimport type { TabsColors, TabsOnColor } from '../Tabs';\n\nimport TabChevron from './TabChevron';\nimport TabItem from './TabItem';\nimport { useIsVisible } from '../../../hooks/useIsVisible';\nimport { useRovingFocus } from '../../../hooks/useRovingFocus';\nimport { isComponent } from '../../../utils/component';\nimport Tab from '../Tab';\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 className={styles['tab-list-wrapper']}>\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","import TabList from './TabList';\nexport * from './TabList';\nexport default TabList;\n"],"mappings":"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"}

package/lib/TabPanel.js

@@ -1,4 +1,4 @@
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/Tabs/TabPanel/styles.module.scss";
 //#region src/components/Tabs/TabPanel/TabPanel.tsx
@@ -6,7 +6,7 @@ var TabPanel = (props) => {
 	const { children, color = "white", isFirst = false, style, ref } = props;
 	return /* @__PURE__ */ jsx("div", {
 		ref,
-		className: classNames(styles["tab-panel"], styles[`tab-panel--${color}`], { [styles["tab-panel--first"]]: isFirst }),
+		className: cn(styles["tab-panel"], styles[`tab-panel--${color}`], { [styles["tab-panel--first"]]: isFirst }),
 		style,
 		children: /* @__PURE__ */ jsx("div", { children })
 	});

package/lib/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","names":[],"sources":["../src/components/Tabs/TabPanel/TabPanel.tsx","../src/components/Tabs/TabPanel/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { TabsColors } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabPanelProps {\n  children?: React.ReactNode;\n  color?: TabsColors;\n  isFirst?: boolean;\n  style?: React.CSSProperties;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\n\nconst TabPanel: React.FC<TabPanelProps> = props => {\n  const { children, color = 'white', isFirst = false, style, ref } = props;\n\n  const tabPanelClasses = classNames(styles['tab-panel'], styles[`tab-panel--${color}`], {\n    [styles['tab-panel--first']]: isFirst,\n  });\n\n  return (\n    <div ref={ref} className={tabPanelClasses} style={style}>\n      <div>{children}</div>\n    </div>\n  );\n};\n\nTabPanel.displayName = 'TabPanel';\nexport default TabPanel;\n","import TabPanel from './TabPanel';\nexport * from './TabPanel';\nexport default TabPanel;\n"],"mappings":";;;;AAeA,IAAM,YAAoC,UAAS;CACjD,MAAM,EAAE,UAAU,QAAQ,SAAS,UAAU,OAAO,OAAO,QAAQ;CAMnE,OACE,oBAAC,OAAD;EAAU;EAAK,WALO,WAAW,OAAO,cAAc,OAAO,cAAc,UAAU,GACpF,OAAO,sBAAsB,QAChC,CAG4B;EAAwB;YAChD,oBAAC,OAAD,EAAM,SAAc,CAAA;CACjB,CAAA;AAET;AAEA,SAAS,cAAc;;;AC3BvB,IAAA,mBAAe"}
+{"version":3,"file":"TabPanel.js","names":[],"sources":["../src/components/Tabs/TabPanel/TabPanel.tsx","../src/components/Tabs/TabPanel/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { TabsColors } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabPanelProps {\n  children?: React.ReactNode;\n  color?: TabsColors;\n  isFirst?: boolean;\n  style?: React.CSSProperties;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\n\nconst TabPanel: React.FC<TabPanelProps> = props => {\n  const { children, color = 'white', isFirst = false, style, ref } = props;\n\n  const tabPanelClasses = classNames(styles['tab-panel'], styles[`tab-panel--${color}`], {\n    [styles['tab-panel--first']]: isFirst,\n  });\n\n  return (\n    <div ref={ref} className={tabPanelClasses} style={style}>\n      <div>{children}</div>\n    </div>\n  );\n};\n\nTabPanel.displayName = 'TabPanel';\nexport default TabPanel;\n","import TabPanel from './TabPanel';\nexport * from './TabPanel';\nexport default TabPanel;\n"],"mappings":";;;;AAeA,IAAM,YAAoC,UAAS;CACjD,MAAM,EAAE,UAAU,QAAQ,SAAS,UAAU,OAAO,OAAO,QAAQ;CAMnE,OACE,oBAAC,OAAD;EAAU;EAAK,WALO,GAAW,OAAO,cAAc,OAAO,cAAc,UAAU,GACpF,OAAO,sBAAsB,QAChC,CAG4B;EAAwB;YAChD,oBAAC,OAAD,EAAM,SAAc,CAAA;CACjB,CAAA;AAET;AAEA,SAAS,cAAc;;;AC3BvB,IAAA,mBAAe"}

package/lib/TableBody.js

@@ -1,12 +1,12 @@
 import { n as ModeType } from "./constants2.js";
 import { i as mapChildrenWithMode } from "./utils5.js";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx } from "react/jsx-runtime";
 import tableStyles from "./components/Table/styles.module.scss";
 //#region src/components/Table/TableBody/TableBody.tsx
 var TableBody = ({ className, children, mode = ModeType.normal, ...rest }) => {
 	return /* @__PURE__ */ jsx("tbody", {
-		className: classNames(tableStyles["table-body"], className),
+		className: cn(tableStyles["table-body"], className),
 		...rest,
 		children: mapChildrenWithMode(children, mode)
 	});

package/lib/TableBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.js","names":[],"sources":["../src/components/Table/TableBody/TableBody.tsx","../src/components/Table/TableBody/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\nimport { mapChildrenWithMode } from '../utils';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'tbody'>, 'style'> {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table body. Use TableRows */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableBody: React.FC<Props> = ({ className, children, mode = ModeType.normal, ...rest }) => {\n  const tableBodyClasses = classNames(tableStyles['table-body'], className);\n  return (\n    <tbody className={tableBodyClasses} {...rest}>\n      {mapChildrenWithMode(children, mode)}\n    </tbody>\n  );\n};\n\nexport default TableBody;\n","import TableBody from './TableBody';\nexport * from './TableBody';\nexport default TableBody;\n"],"mappings":";;;;;;AAeA,IAAa,aAA8B,EAAE,WAAW,UAAU,OAAO,SAAS,QAAQ,GAAG,WAAW;CAEtG,OACE,oBAAC,SAAD;EAAO,WAFgB,WAAW,YAAY,eAAe,SAE3C;EAAkB,GAAI;YACrC,oBAAoB,UAAU,IAAI;CAC9B,CAAA;AAEX;;;ACpBA,IAAA,oBAAe"}
+{"version":3,"file":"TableBody.js","names":[],"sources":["../src/components/Table/TableBody/TableBody.tsx","../src/components/Table/TableBody/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\nimport { mapChildrenWithMode } from '../utils';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'tbody'>, 'style'> {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table body. Use TableRows */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableBody: React.FC<Props> = ({ className, children, mode = ModeType.normal, ...rest }) => {\n  const tableBodyClasses = classNames(tableStyles['table-body'], className);\n  return (\n    <tbody className={tableBodyClasses} {...rest}>\n      {mapChildrenWithMode(children, mode)}\n    </tbody>\n  );\n};\n\nexport default TableBody;\n","import TableBody from './TableBody';\nexport * from './TableBody';\nexport default TableBody;\n"],"mappings":";;;;;;AAeA,IAAa,aAA8B,EAAE,WAAW,UAAU,OAAO,SAAS,QAAQ,GAAG,WAAW;CAEtG,OACE,oBAAC,SAAD;EAAO,WAFgB,GAAW,YAAY,eAAe,SAE3C;EAAkB,GAAI;YACrC,oBAAoB,UAAU,IAAI;CAC9B,CAAA;AAEX;;;ACpBA,IAAA,oBAAe"}

package/lib/TableCell.js

@@ -1,11 +1,11 @@
 import { a as TextAlign, n as ModeType } from "./constants2.js";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx } from "react/jsx-runtime";
 import tableStyles from "./components/Table/styles.module.scss";
 //#region src/components/Table/TableCell/TableCell.tsx
 var TableCell = ({ nowrap = false, textAlign = TextAlign.left, dataLabel, children, className, testId, mode = ModeType.normal, ...rest }) => {
 	return /* @__PURE__ */ jsx("td", {
-		className: classNames(tableStyles["table__cell"], { [tableStyles["table__cell--compact"]]: mode === ModeType.compact }, { [tableStyles["table__cell--nowrap"]]: nowrap }, { [tableStyles["table__cell--center"]]: textAlign === "center" }, { [tableStyles["table__cell--right"]]: textAlign === "right" }, className),
+		className: cn(tableStyles["table__cell"], { [tableStyles["table__cell--compact"]]: mode === ModeType.compact }, { [tableStyles["table__cell--nowrap"]]: nowrap }, { [tableStyles["table__cell--center"]]: textAlign === "center" }, { [tableStyles["table__cell--right"]]: textAlign === "right" }, className),
 		"data-label": dataLabel,
 		"data-testid": testId,
 		...rest,

package/lib/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.js","names":[],"sources":["../src/components/Table/TableCell/TableCell.tsx","../src/components/Table/TableCell/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { ModeType, TextAlign } from '../constants';\nimport tableStyles from '../styles.module.scss';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'td'>, 'style'> {\n  /** Label used for small viewport block */\n  dataLabel?: string;\n  /**  text align in cell */\n  textAlign?: TextAlign;\n  /**  nowrap for white space */\n  nowrap?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table cell */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n  /** For test purposes */\n  testId?: string;\n}\n\nexport const TableCell: React.FC<Props> = ({\n  nowrap = false,\n  textAlign = TextAlign.left,\n  dataLabel,\n  children,\n  className,\n  testId,\n  mode = ModeType.normal,\n  ...rest\n}) => {\n  const tableCellClass = classNames(\n    tableStyles['table__cell'],\n    { [tableStyles['table__cell--compact']]: mode === ModeType.compact },\n    { [tableStyles['table__cell--nowrap']]: nowrap },\n    { [tableStyles['table__cell--center']]: textAlign === 'center' },\n    { [tableStyles['table__cell--right']]: textAlign === 'right' },\n    className\n  );\n\n  return (\n    <td className={tableCellClass} data-label={dataLabel} data-testid={testId} {...rest}>\n      {children}\n    </td>\n  );\n};\n\nexport default TableCell;\n","import TableCell from './TableCell';\nexport * from './TableCell';\nexport default TableCell;\n"],"mappings":";;;;;AAsBA,IAAa,aAA8B,EACzC,SAAS,OACT,YAAY,UAAU,MACtB,WACA,UACA,WACA,QACA,OAAO,SAAS,QAChB,GAAG,WACC;CAUJ,OACE,oBAAC,MAAD;EAAI,WAViB,WACrB,YAAY,gBACZ,GAAG,YAAY,0BAA0B,SAAS,SAAS,QAAQ,GACnE,GAAG,YAAY,yBAAyB,OAAO,GAC/C,GAAG,YAAY,yBAAyB,cAAc,SAAS,GAC/D,GAAG,YAAY,wBAAwB,cAAc,QAAQ,GAC7D,SAIe;EAAgB,cAAY;EAAW,eAAa;EAAQ,GAAI;EAC5E;CACC,CAAA;AAER;;;AC5CA,IAAA,oBAAe"}
+{"version":3,"file":"TableCell.js","names":[],"sources":["../src/components/Table/TableCell/TableCell.tsx","../src/components/Table/TableCell/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { ModeType, TextAlign } from '../constants';\nimport tableStyles from '../styles.module.scss';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'td'>, 'style'> {\n  /** Label used for small viewport block */\n  dataLabel?: string;\n  /**  text align in cell */\n  textAlign?: TextAlign;\n  /**  nowrap for white space */\n  nowrap?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table cell */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n  /** For test purposes */\n  testId?: string;\n}\n\nexport const TableCell: React.FC<Props> = ({\n  nowrap = false,\n  textAlign = TextAlign.left,\n  dataLabel,\n  children,\n  className,\n  testId,\n  mode = ModeType.normal,\n  ...rest\n}) => {\n  const tableCellClass = classNames(\n    tableStyles['table__cell'],\n    { [tableStyles['table__cell--compact']]: mode === ModeType.compact },\n    { [tableStyles['table__cell--nowrap']]: nowrap },\n    { [tableStyles['table__cell--center']]: textAlign === 'center' },\n    { [tableStyles['table__cell--right']]: textAlign === 'right' },\n    className\n  );\n\n  return (\n    <td className={tableCellClass} data-label={dataLabel} data-testid={testId} {...rest}>\n      {children}\n    </td>\n  );\n};\n\nexport default TableCell;\n","import TableCell from './TableCell';\nexport * from './TableCell';\nexport default TableCell;\n"],"mappings":";;;;;AAsBA,IAAa,aAA8B,EACzC,SAAS,OACT,YAAY,UAAU,MACtB,WACA,UACA,WACA,QACA,OAAO,SAAS,QAChB,GAAG,WACC;CAUJ,OACE,oBAAC,MAAD;EAAI,WAViB,GACrB,YAAY,gBACZ,GAAG,YAAY,0BAA0B,SAAS,SAAS,QAAQ,GACnE,GAAG,YAAY,yBAAyB,OAAO,GAC/C,GAAG,YAAY,yBAAyB,cAAc,SAAS,GAC/D,GAAG,YAAY,wBAAwB,cAAc,QAAQ,GAC7D,SAIe;EAAgB,cAAY;EAAW,eAAa;EAAQ,GAAI;EAC5E;CACC,CAAA;AAER;;;AC5CA,IAAA,oBAAe"}