@helsenorge/designsystem-react 15.5.0 → 15.5.1

package/lib/components/StickyNote/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/StickyNote/Close.tsx","../../../src/components/StickyNote/Triangle.tsx","../../../src/components/StickyNote/StickyNote.tsx","../../../src/components/StickyNote/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface CloseProps {\n  /** Function is called when user clicks the button */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the button element */\n  ref?: React.Ref<HTMLButtonElement | null>;\n}\n\n/*\n  Denne er kopiert fra Close-komponent. \n  Det er for å kunne ha en egen lokal variant for StickyNote. \n  Likt som i Figma.\n */\n\nconst Close: React.FC<CloseProps> = (props: CloseProps) => {\n  const { testId, ariaLabel = 'Lukk', onClick, ref } = props;\n  const { refObject, isHovered } = usePseudoClasses();\n\n  const iconSize = useIsMobileBreakpoint() ? 38 : 48;\n\n  const closeClasses = classNames(styles.close);\n\n  return (\n    <button\n      ref={mergeRefs([ref, refObject])}\n      data-testid={testId}\n      className={closeClasses}\n      aria-label={ariaLabel}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <span className={classNames(styles['close__inner-container'])}>\n        <Icon svgIcon={X} color=\"black\" size={iconSize} isHovered={isHovered} />\n      </span>\n    </button>\n  );\n};\n\nexport default Close;\n","import { useId } from 'react';\n\ninterface TriangleProps {\n  isHover: boolean;\n  isFocus: boolean;\n  isActive: boolean;\n  isError: boolean;\n}\n\nexport interface Palette {\n  border: string;\n  background: string;\n}\n\nconst Triangle: React.FC<TriangleProps> = ({ isHover, isFocus, isActive, isError }) => {\n  const uniqueId = useId();\n  const maskIdFocus = `${uniqueId}-mask-focus`;\n  const maskIdNormal = `${uniqueId}-mask-normal`;\n  const palette = ((): Palette => {\n    const colors: Palette = {\n      border: 'var(--component-stickynote-border-normal)',\n      background: 'var(--component-stickynote-background-fold-normal-light)',\n    };\n\n    if (!isError) {\n      if (isHover) {\n        colors.background = 'var(--component-stickynote-background-fold-normal-medium)';\n      }\n      if (isFocus) {\n        colors.border = 'var(--color-action-border-onlight-focus)';\n        colors.background = 'var(--component-stickynote-background-fold-normal-medium)';\n      }\n      if (isActive) {\n        colors.background = 'var(--component-stickynote-background-fold-normal-dark)';\n      }\n    } else {\n      colors.border = 'var(--component-stickynote-border-error)';\n      colors.background = 'var(--component-stickynote-background-fold-error-light)';\n      if (isHover) {\n        colors.background = 'var(--component-stickynote-background-fold-error-medium)';\n      }\n      if (isFocus) {\n        colors.border = 'var(--color-action-border-onlight-focus)';\n        colors.background = 'var(--component-stickynote-background-fold-error-medium)';\n      }\n      if (isActive) {\n        colors.background = 'var(--component-stickynote-background-fold-error-dark)';\n      }\n    }\n    return colors;\n  })();\n\n  let svg: React.ReactNode;\n\n  if (isFocus) {\n    svg = (\n      <svg width=\"21\" height=\"21\" viewBox=\"0 0 21 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <mask id={maskIdFocus} fill=\"white\">\n          <path d=\"M0.493163 20.9211L0.276366 20.9211L0.276367 0.921142L20.2764 0.921143L20.2764 1.13794L0.493163 20.9211Z\" />\n        </mask>\n        <path\n          d=\"M0.493163 20.9211L0.276366 20.9211L0.276367 0.921142L20.2764 0.921143L20.2764 1.13794L0.493163 20.9211Z\"\n          fill={palette.background}\n        />\n        <path\n          d=\"M0.493163 20.9211L0.493163 22.9211L1.32159 22.9211L1.90738 22.3354L0.493163 20.9211ZM0.276366 20.9211L-1.72363 20.9211L-1.72363 22.9211L0.276366 22.9211L0.276366 20.9211ZM0.276367 0.921142L0.276367 -1.07886L-1.72363 -1.07886L-1.72363 0.921142L0.276367 0.921142ZM20.2764 0.921143L22.2764 0.921143L22.2764 -1.07886L20.2764 -1.07886L20.2764 0.921143ZM20.2764 1.13794L21.6906 2.55215L22.2764 1.96637L22.2764 1.13794L20.2764 1.13794ZM0.493163 20.9211L0.493163 18.9211L0.276366 18.9211L0.276366 20.9211L0.276366 22.9211L0.493163 22.9211L0.493163 20.9211ZM0.276366 20.9211L2.27637 20.9211L2.27637 0.921142L0.276367 0.921142L-1.72363 0.921142L-1.72363 20.9211L0.276366 20.9211ZM0.276367 0.921142L0.276367 2.92114L20.2764 2.92114L20.2764 0.921143L20.2764 -1.07886L0.276367 -1.07886L0.276367 0.921142ZM20.2764 0.921143L18.2764 0.921142L18.2764 1.13794L20.2764 1.13794L22.2764 1.13794L22.2764 0.921143L20.2764 0.921143ZM20.2764 1.13794L18.8622 -0.276274L-0.92105 19.5069L0.493163 20.9211L1.90738 22.3354L21.6906 2.55215L20.2764 1.13794Z\"\n          fill={palette.border}\n          mask={`url(#${maskIdFocus})`}\n        />\n      </svg>\n    );\n  } else {\n    svg = (\n      <svg width=\"21\" height=\"21\" viewBox=\"0 0 21 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <mask id={maskIdNormal} fill=\"white\">\n          <path d=\"M0.923827 20.9211L0.70703 20.9211L0.707031 0.921142L20.707 0.921143L20.707 1.13794L0.923827 20.9211Z\" />\n        </mask>\n        <path\n          d=\"M0.923827 20.9211L0.70703 20.9211L0.707031 0.921142L20.707 0.921143L20.707 1.13794L0.923827 20.9211Z\"\n          fill={palette.background}\n        />\n        <path\n          d=\"M0.923827 20.9211L0.923827 21.9211L1.33804 21.9211L1.63093 21.6282L0.923827 20.9211ZM0.70703 20.9211L-0.29297 20.9211L-0.29297 21.9211L0.70703 21.9211L0.70703 20.9211ZM0.707031 0.921142L0.707031 -0.0788582L-0.292969 -0.0788583L-0.292969 0.921142L0.707031 0.921142ZM20.707 0.921143L21.707 0.921143L21.707 -0.0788574L20.707 -0.0788574L20.707 0.921143ZM20.707 1.13794L21.4141 1.84505L21.707 1.55215L21.707 1.13794L20.707 1.13794ZM0.923827 20.9211L0.923827 19.9211L0.70703 19.9211L0.70703 20.9211L0.70703 21.9211L0.923827 21.9211L0.923827 20.9211ZM0.70703 20.9211L1.70703 20.9211L1.70703 0.921142L0.707031 0.921142L-0.292969 0.921142L-0.29297 20.9211L0.70703 20.9211ZM0.707031 0.921142L0.707031 1.92114L20.707 1.92114L20.707 0.921143L20.707 -0.0788574L0.707031 -0.0788582L0.707031 0.921142ZM20.707 0.921143L19.707 0.921143L19.707 1.13794L20.707 1.13794L21.707 1.13794L21.707 0.921143L20.707 0.921143ZM20.707 1.13794L19.9999 0.430833L0.21672 20.214L0.923827 20.9211L1.63093 21.6282L21.4141 1.84505L20.707 1.13794Z\"\n          fill={palette.border}\n          mask={`url(#${maskIdNormal})`}\n        />\n      </svg>\n    );\n  }\n\n  return <>{svg}</>;\n};\n\nexport default Triangle;\n","import { useLayoutEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Close from './Close';\nimport Triangle from './Triangle';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport interface StickyNoteProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /** Aria label for the delete/close button */\n  arialabelXButton: string;\n  /** Activates the error styling */\n  error?: boolean;\n  /** Error text to show below the note */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Text shown under the textarea  */\n  footerText?: string;\n  /** Function run when clicking the delete/close button */\n  onXButtonClick?: () => void;\n  /** Function run if user clicks the component while it is disabled */\n  onClickWhileDisabled?: () => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Timestamp shown over the textarea  */\n  timestamp: string;\n  /** Classname for the outer wrapper */\n  wrapperClassName?: string;\n}\n\nconst StickyNote: React.FC<StickyNoteProps> = (props: StickyNoteProps) => {\n  const {\n    wrapperClassName,\n    timestamp,\n    onXButtonClick,\n    arialabelXButton,\n    footerText,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    onClickWhileDisabled,\n    testId,\n    ...textareaProps\n  } = props;\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const showErrorStyling = error || !!errorText;\n  const stickynoteRef = useRef<HTMLDivElement>(null);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const { isFocused: isTextareaFocused } = usePseudoClasses<HTMLTextAreaElement | null>(textareaRef);\n  const { isHovered, isActive } = usePseudoClasses<HTMLDivElement | null>(stickynoteRef);\n\n  const handleWrapperClick = (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void => {\n    if ((event.target as HTMLElement).closest('button')) {\n      return;\n    }\n    if (textareaProps.disabled) {\n      if (onClickWhileDisabled) onClickWhileDisabled();\n      return;\n    }\n    textareaRef.current?.focus();\n  };\n\n  const resizeTextarea = (): void => {\n    const textarea = textareaRef.current;\n    if (!textarea) return;\n    resizeTarget(textarea);\n  };\n\n  const resizeTarget = (target: HTMLTextAreaElement): void => {\n    // Reset field height\n    target.style.height = 'inherit';\n    // Set new height\n    target.style.height = `${target.scrollHeight}px`;\n  };\n\n  useLayoutEffect(() => {\n    resizeTextarea();\n    // Must run after the shadow DOM has been set up to work on microweb\n    setTimeout(() => resizeTextarea(), 1000);\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    const textarea = e.target as HTMLTextAreaElement;\n    resizeTarget(textarea);\n    if (textareaProps.onChange) textareaProps.onChange(e);\n  };\n\n  return (\n    <div>\n      <div\n        data-testid={testId}\n        ref={stickynoteRef}\n        className={classNames(styles['sticky-note'], wrapperClassName, {\n          [styles['sticky-note--focused']]: isTextareaFocused,\n          [styles['sticky-note--active']]: isActive,\n          [styles['sticky-note--hovered']]: isHovered && !isTextareaFocused && !textareaProps.disabled,\n          [styles['sticky-note--error']]: showErrorStyling,\n        })}\n        onClick={handleWrapperClick}\n        role=\"textbox\"\n        tabIndex={-1}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            handleWrapperClick(e as React.KeyboardEvent<HTMLDivElement>);\n          }\n        }}\n      >\n        <div className={classNames(styles['sticky-note__header'])}>\n          {timestamp && <span className={styles['sticky-note__header__timestamp']}>{timestamp}</span>}\n        </div>\n        <textarea\n          ref={textareaRef}\n          data-testid={`${testId}-textarea`}\n          className={classNames(styles['sticky-note__textarea'], textareaProps.className)}\n          {...textareaProps}\n          onChange={handleChange}\n          aria-describedby={getAriaDescribedBy(props, errorTextId)}\n        />\n        <Close onClick={onXButtonClick} ariaLabel={arialabelXButton} testId=\"closeButton\" />\n        <div className={classNames(styles['sticky-note__footer'])}>{footerText && <span>{footerText}</span>}</div>\n        <div className={classNames(styles['sticky-note__triangle'])}>\n          <Triangle isHover={isHovered} isActive={isActive} isFocus={isTextareaFocused} isError={showErrorStyling} />\n        </div>\n      </div>\n      {errorText && (\n        <p className={styles['sticky-note__error-text']} id={errorTextId}>\n          {errorText}\n        </p>\n      )}\n    </div>\n  );\n};\n\nexport default StickyNote;\n","import StickyNote from './StickyNote';\nexport * from './StickyNote';\nexport default StickyNote;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/StickyNote/Close.tsx","../../../src/components/StickyNote/Triangle.tsx","../../../src/components/StickyNote/StickyNote.tsx","../../../src/components/StickyNote/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface CloseProps {\n  /** Function is called when user clicks the button */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the button element */\n  ref?: React.Ref<HTMLButtonElement | null>;\n}\n\n/*\n  Denne er kopiert fra Close-komponent. \n  Det er for å kunne ha en egen lokal variant for StickyNote. \n  Likt som i Figma.\n */\n\nconst Close: React.FC<CloseProps> = (props: CloseProps) => {\n  const { testId, ariaLabel = 'Lukk', onClick, ref } = props;\n  const { refObject, isHovered } = usePseudoClasses();\n\n  const iconSize = useIsMobileBreakpoint() ? 38 : 48;\n\n  const closeClasses = classNames(styles.close);\n\n  return (\n    <button\n      ref={mergeRefs([ref, refObject])}\n      data-testid={testId}\n      className={closeClasses}\n      aria-label={ariaLabel}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <span className={classNames(styles['close__inner-container'])}>\n        <Icon svgIcon={X} color=\"black\" size={iconSize} isHovered={isHovered} />\n      </span>\n    </button>\n  );\n};\n\nexport default Close;\n","import { useId } from 'react';\n\ninterface TriangleProps {\n  isHover: boolean;\n  isFocus: boolean;\n  isActive: boolean;\n  isError: boolean;\n}\n\nexport interface Palette {\n  border: string;\n  background: string;\n}\n\nconst Triangle: React.FC<TriangleProps> = ({ isHover, isFocus, isActive, isError }) => {\n  const uniqueId = useId();\n  const maskIdFocus = `${uniqueId}-mask-focus`;\n  const maskIdNormal = `${uniqueId}-mask-normal`;\n  const palette = ((): Palette => {\n    const colors: Palette = {\n      border: 'var(--component-stickynote-border-normal)',\n      background: 'var(--component-stickynote-background-fold-normal-light)',\n    };\n\n    if (!isError) {\n      if (isHover) {\n        colors.background = 'var(--component-stickynote-background-fold-normal-medium)';\n      }\n      if (isFocus) {\n        colors.border = 'var(--color-action-border-onlight-focus)';\n        colors.background = 'var(--component-stickynote-background-fold-normal-medium)';\n      }\n      if (isActive) {\n        colors.background = 'var(--component-stickynote-background-fold-normal-dark)';\n      }\n    } else {\n      colors.border = 'var(--component-stickynote-border-error)';\n      colors.background = 'var(--component-stickynote-background-fold-error-light)';\n      if (isHover) {\n        colors.background = 'var(--component-stickynote-background-fold-error-medium)';\n      }\n      if (isFocus) {\n        colors.border = 'var(--color-action-border-onlight-focus)';\n        colors.background = 'var(--component-stickynote-background-fold-error-medium)';\n      }\n      if (isActive) {\n        colors.background = 'var(--component-stickynote-background-fold-error-dark)';\n      }\n    }\n    return colors;\n  })();\n\n  let svg: React.ReactNode;\n\n  if (isFocus) {\n    svg = (\n      <svg width=\"21\" height=\"21\" viewBox=\"0 0 21 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <mask id={maskIdFocus} fill=\"white\">\n          <path d=\"M0.493163 20.9211L0.276366 20.9211L0.276367 0.921142L20.2764 0.921143L20.2764 1.13794L0.493163 20.9211Z\" />\n        </mask>\n        <path\n          d=\"M0.493163 20.9211L0.276366 20.9211L0.276367 0.921142L20.2764 0.921143L20.2764 1.13794L0.493163 20.9211Z\"\n          fill={palette.background}\n        />\n        <path\n          d=\"M0.493163 20.9211L0.493163 22.9211L1.32159 22.9211L1.90738 22.3354L0.493163 20.9211ZM0.276366 20.9211L-1.72363 20.9211L-1.72363 22.9211L0.276366 22.9211L0.276366 20.9211ZM0.276367 0.921142L0.276367 -1.07886L-1.72363 -1.07886L-1.72363 0.921142L0.276367 0.921142ZM20.2764 0.921143L22.2764 0.921143L22.2764 -1.07886L20.2764 -1.07886L20.2764 0.921143ZM20.2764 1.13794L21.6906 2.55215L22.2764 1.96637L22.2764 1.13794L20.2764 1.13794ZM0.493163 20.9211L0.493163 18.9211L0.276366 18.9211L0.276366 20.9211L0.276366 22.9211L0.493163 22.9211L0.493163 20.9211ZM0.276366 20.9211L2.27637 20.9211L2.27637 0.921142L0.276367 0.921142L-1.72363 0.921142L-1.72363 20.9211L0.276366 20.9211ZM0.276367 0.921142L0.276367 2.92114L20.2764 2.92114L20.2764 0.921143L20.2764 -1.07886L0.276367 -1.07886L0.276367 0.921142ZM20.2764 0.921143L18.2764 0.921142L18.2764 1.13794L20.2764 1.13794L22.2764 1.13794L22.2764 0.921143L20.2764 0.921143ZM20.2764 1.13794L18.8622 -0.276274L-0.92105 19.5069L0.493163 20.9211L1.90738 22.3354L21.6906 2.55215L20.2764 1.13794Z\"\n          fill={palette.border}\n          mask={`url(#${maskIdFocus})`}\n        />\n      </svg>\n    );\n  } else {\n    svg = (\n      <svg width=\"21\" height=\"21\" viewBox=\"0 0 21 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <mask id={maskIdNormal} fill=\"white\">\n          <path d=\"M0.923827 20.9211L0.70703 20.9211L0.707031 0.921142L20.707 0.921143L20.707 1.13794L0.923827 20.9211Z\" />\n        </mask>\n        <path\n          d=\"M0.923827 20.9211L0.70703 20.9211L0.707031 0.921142L20.707 0.921143L20.707 1.13794L0.923827 20.9211Z\"\n          fill={palette.background}\n        />\n        <path\n          d=\"M0.923827 20.9211L0.923827 21.9211L1.33804 21.9211L1.63093 21.6282L0.923827 20.9211ZM0.70703 20.9211L-0.29297 20.9211L-0.29297 21.9211L0.70703 21.9211L0.70703 20.9211ZM0.707031 0.921142L0.707031 -0.0788582L-0.292969 -0.0788583L-0.292969 0.921142L0.707031 0.921142ZM20.707 0.921143L21.707 0.921143L21.707 -0.0788574L20.707 -0.0788574L20.707 0.921143ZM20.707 1.13794L21.4141 1.84505L21.707 1.55215L21.707 1.13794L20.707 1.13794ZM0.923827 20.9211L0.923827 19.9211L0.70703 19.9211L0.70703 20.9211L0.70703 21.9211L0.923827 21.9211L0.923827 20.9211ZM0.70703 20.9211L1.70703 20.9211L1.70703 0.921142L0.707031 0.921142L-0.292969 0.921142L-0.29297 20.9211L0.70703 20.9211ZM0.707031 0.921142L0.707031 1.92114L20.707 1.92114L20.707 0.921143L20.707 -0.0788574L0.707031 -0.0788582L0.707031 0.921142ZM20.707 0.921143L19.707 0.921143L19.707 1.13794L20.707 1.13794L21.707 1.13794L21.707 0.921143L20.707 0.921143ZM20.707 1.13794L19.9999 0.430833L0.21672 20.214L0.923827 20.9211L1.63093 21.6282L21.4141 1.84505L20.707 1.13794Z\"\n          fill={palette.border}\n          mask={`url(#${maskIdNormal})`}\n        />\n      </svg>\n    );\n  }\n\n  return <>{svg}</>;\n};\n\nexport default Triangle;\n","import { useLayoutEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Close from './Close';\nimport Triangle from './Triangle';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport interface StickyNoteProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /** Aria label for the delete/close button */\n  arialabelXButton: string;\n  /** Activates the error styling */\n  error?: boolean;\n  /** Error text to show below the note */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Text shown under the textarea  */\n  footerText?: string;\n  /** Function run when clicking the delete/close button */\n  onXButtonClick?: () => void;\n  /** Function run if user clicks the component while it is disabled */\n  onClickWhileDisabled?: () => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Timestamp shown over the textarea  */\n  timestamp: string;\n  /** Classname for the outer wrapper */\n  wrapperClassName?: string;\n}\n\nconst StickyNote: React.FC<StickyNoteProps> = (props: StickyNoteProps) => {\n  const {\n    wrapperClassName,\n    timestamp,\n    onXButtonClick,\n    arialabelXButton,\n    footerText,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    onClickWhileDisabled,\n    testId,\n    ...textareaProps\n  } = props;\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const showErrorStyling = error || !!errorText;\n  const stickynoteRef = useRef<HTMLDivElement>(null);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const { isFocused: isTextareaFocused } = usePseudoClasses<HTMLTextAreaElement | null>(textareaRef);\n  const { isHovered, isActive } = usePseudoClasses<HTMLDivElement | null>(stickynoteRef);\n\n  const handleWrapperClick = (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void => {\n    if ((event.target as HTMLElement).closest('button')) {\n      return;\n    }\n    if (textareaProps.disabled) {\n      if (onClickWhileDisabled) onClickWhileDisabled();\n      return;\n    }\n    textareaRef.current?.focus();\n  };\n\n  const resizeTextarea = (): void => {\n    const textarea = textareaRef.current;\n    if (!textarea) return;\n    resizeTarget(textarea);\n  };\n\n  const resizeTarget = (target: HTMLTextAreaElement): void => {\n    // Reset field height\n    target.style.height = 'inherit';\n    // Set new height\n    target.style.height = `${target.scrollHeight}px`;\n  };\n\n  useLayoutEffect(() => {\n    resizeTextarea();\n    // Must run after the shadow DOM has been set up to work on microweb\n    setTimeout(() => resizeTextarea(), 1000);\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    const textarea = e.target as HTMLTextAreaElement;\n    resizeTarget(textarea);\n    if (textareaProps.onChange) textareaProps.onChange(e);\n  };\n\n  return (\n    <div>\n      <div\n        data-testid={testId}\n        ref={stickynoteRef}\n        className={classNames(styles['sticky-note'], wrapperClassName, {\n          [styles['sticky-note--focused']]: isTextareaFocused,\n          [styles['sticky-note--active']]: isActive,\n          [styles['sticky-note--hovered']]: isHovered && !isTextareaFocused && !textareaProps.disabled,\n          [styles['sticky-note--error']]: showErrorStyling,\n        })}\n        onClick={handleWrapperClick}\n        role=\"textbox\"\n        tabIndex={-1}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            handleWrapperClick(e as React.KeyboardEvent<HTMLDivElement>);\n          }\n        }}\n      >\n        <div className={classNames(styles['sticky-note__header'])}>\n          {timestamp && <span className={styles['sticky-note__header__timestamp']}>{timestamp}</span>}\n        </div>\n        <textarea\n          ref={textareaRef}\n          data-testid={`${testId}-textarea`}\n          className={classNames(styles['sticky-note__textarea'], textareaProps.className)}\n          {...textareaProps}\n          onChange={handleChange}\n          aria-describedby={getAriaDescribedBy(props, errorTextId)}\n        />\n        <Close onClick={onXButtonClick} ariaLabel={arialabelXButton} testId=\"closeButton\" />\n        <div className={classNames(styles['sticky-note__footer'])}>{footerText && <span>{footerText}</span>}</div>\n        <div className={classNames(styles['sticky-note__triangle'])}>\n          <Triangle isHover={isHovered} isActive={isActive} isFocus={isTextareaFocused} isError={showErrorStyling} />\n        </div>\n      </div>\n      {errorText && (\n        <p className={styles['sticky-note__error-text']} id={errorTextId}>\n          {errorText}\n        </p>\n      )}\n    </div>\n  );\n};\n\nexport default StickyNote;\n","import StickyNote from './StickyNote';\nexport * from './StickyNote';\nexport default StickyNote;\n"],"mappings":"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"}

package/lib/components/Table/index.js

@@ -14,21 +14,18 @@ import { n as TableHead } from "../../TableHead.js";
 import { n as TableHeadCell } from "../../TableHeadCell.js";
 import { n as TableRow } from "../../TableRow.js";
 import classNames from "classnames";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
 //#region src/components/Table/Table.tsx
 var Table = ({ id, testId, className, children, breakpointConfig = defaultConfig, mode = ModeType.normal, scrollAriaLabel, scrollAriaLabelledById, ...rest }) => {
-	const [currentConfig, setCurrentConfig] = useState();
 	const [tableWidth, setTableWidth] = useState(0);
 	const [parentWidth, setParentWidth] = useState(0);
 	const [windowWidth, setWindowWidth] = useState(window.innerWidth);
 	const tableRef = useRef(null);
 	const tableIsVisible = useIsVisible(tableRef, 0);
 	const breakpoint = useBreakpoint();
-	useEffect(() => {
-		setCurrentConfig(getCurrentConfig(breakpointConfig, breakpoint, tableWidth, windowWidth));
-	}, [
+	const currentConfig = useMemo(() => getCurrentConfig(breakpointConfig, breakpoint, tableWidth, windowWidth), [
 		breakpointConfig,
 		breakpoint,
 		tableWidth,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Table/Table.tsx","../../../src/components/Table/index.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { Breakpoint } from '../../hooks/useBreakpoint';\n\nimport { defaultConfig, ModeType, ResponsiveTableVariant } from './constants';\nimport { getCurrentConfig, getBreakpointClass, getCenteredOverflowTableStyle, mapChildrenWithMode, omitProps } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport HorizontalScroll from '../HorizontalScroll';\n\nimport styles from './styles.module.scss';\n\nexport interface BreakpointConfig {\n  /** Breakpoint at which responsive behaviour will be applied. The table component uses a \"desktop first\" approach. */\n  breakpoint: keyof typeof Breakpoint;\n  /** Desired behaviour on this breakpoint and all smaller screens. */\n  variant: keyof typeof ResponsiveTableVariant;\n  /** If variant is horizontallscroll, use a fallback instead of device is not a touch device. */\n  fallbackVariant?: keyof typeof ResponsiveTableVariant;\n}\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'table'>, 'style'> {\n  /** Unique ID */\n  id?: string;\n  /** Id used for testing */\n  testId?: string;\n  /** Customize how the table behaves on various screen widths */\n  breakpointConfig?: BreakpointConfig | BreakpointConfig[];\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table. Use TableHead and TableBody */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n  /** Sets aria-label of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n  scrollAriaLabel?: string;\n  /** Sets aria-labelledby of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n  scrollAriaLabelledById?: string;\n}\n\nexport const Table: React.FC<Props> = ({\n  id,\n  testId,\n  className,\n  children,\n  breakpointConfig = defaultConfig,\n  mode = ModeType.normal,\n  scrollAriaLabel,\n  scrollAriaLabelledById,\n  ...rest\n}) => {\n  const [currentConfig, setCurrentConfig] = useState<BreakpointConfig>();\n  const [tableWidth, setTableWidth] = useState<number>(0);\n  const [parentWidth, setParentWidth] = useState<number>(0);\n  const [windowWidth, setWindowWidth] = useState(window.innerWidth);\n  const tableRef = useRef<HTMLTableElement>(null);\n  const tableIsVisible = useIsVisible(tableRef, 0);\n  const breakpoint = useBreakpoint();\n\n  useEffect(() => {\n    setCurrentConfig(getCurrentConfig(breakpointConfig, breakpoint, tableWidth, windowWidth));\n  }, [breakpointConfig, breakpoint, tableWidth, windowWidth]);\n\n  useEffect(() => {\n    if (\n      currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ||\n      currentConfig?.variant === ResponsiveTableVariant.horizontalscroll\n    ) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n    if (currentConfig?.variant === ResponsiveTableVariant.centeredoverflow) {\n      setParentWidth(tableRef.current?.parentElement?.getBoundingClientRect().width ?? 0);\n    }\n  }, [currentConfig, breakpoint]);\n\n  useLayoutEvent(() => setWindowWidth(window.innerWidth), ['resize'], 100);\n\n  useEffect(() => {\n    if (tableWidth === 0 && tableIsVisible) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n  }, [tableWidth, tableIsVisible]);\n\n  const tableStyle =\n    currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ? getCenteredOverflowTableStyle(parentWidth, tableWidth) : undefined;\n\n  const breakpointClass = getBreakpointClass(currentConfig);\n  const tableClass = classNames(styles.table, breakpointClass, className);\n  const domRest = omitProps(rest as Record<string, unknown>, ['breakpoint', 'variant', 'fallbackVariant', 'headerCategory']);\n\n  const table = (\n    <table\n      className={tableClass}\n      id={id}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Table}\n      ref={tableRef}\n      style={tableStyle}\n      {...(domRest as React.ComponentPropsWithoutRef<'table'>)}\n    >\n      {mapChildrenWithMode(children, mode)}\n    </table>\n  );\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: scrollAriaLabel, id: scrollAriaLabelledById });\n\n  if (currentConfig?.variant === ResponsiveTableVariant.horizontalscroll) {\n    return (\n      <HorizontalScroll childWidth={tableWidth} testId=\"horizontal-scroll\" {...ariaLabelAttributes}>\n        {table}\n      </HorizontalScroll>\n    );\n  }\n\n  return table;\n};\n\nexport default Table;\n","import { Table } from './Table';\n\nexport { TableBody } from './TableBody';\nexport { TableCell } from './TableCell';\nexport { TableExpandedRow } from './TableExpandedRow';\nexport { TableExpanderCell } from './TableExpanderCell';\nexport { TableHead } from './TableHead';\nexport { TableHeadCell } from './TableHeadCell';\nexport { TableRow } from './TableRow';\nexport { SortDirection, HeaderCategory, TextAlign, ResponsiveTableVariant, ModeType, defaultConfig, simpleConfig } from './constants';\n\nexport * from './Table';\nexport * from './utils';\n\nexport default Table;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA6CA,IAAa,SAA0B,EACrC,IACA,QACA,WACA,UACA,mBAAmB,eACnB,OAAO,SAAS,QAChB,iBACA,wBACA,GAAG,WACC;CACJ,MAAM,CAAC,eAAe,oBAAoB,SAA2B;CACrE,MAAM,CAAC,YAAY,iBAAiB,SAAiB,CAAC;CACtD,MAAM,CAAC,aAAa,kBAAkB,SAAiB,CAAC;CACxD,MAAM,CAAC,aAAa,kBAAkB,SAAS,OAAO,UAAU;CAChE,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,iBAAiB,aAAa,UAAU,CAAC;CAC/C,MAAM,aAAa,cAAc;CAEjC,gBAAgB;EACd,iBAAiB,iBAAiB,kBAAkB,YAAY,YAAY,WAAW,CAAC;CAC1F,GAAG;EAAC;EAAkB;EAAY;EAAY;CAAW,CAAC;CAE1D,gBAAgB;EACd,IACE,eAAe,YAAY,uBAAuB,oBAClD,eAAe,YAAY,uBAAuB,kBAElD,cAAc,SAAS,SAAS,sBAAsB,CAAC,CAAC,SAAS,CAAC;EAEpE,IAAI,eAAe,YAAY,uBAAuB,kBACpD,eAAe,SAAS,SAAS,eAAe,sBAAsB,CAAC,CAAC,SAAS,CAAC;CAEtF,GAAG,CAAC,eAAe,UAAU,CAAC;CAE9B,qBAAqB,eAAe,OAAO,UAAU,GAAG,CAAC,QAAQ,GAAG,GAAG;CAEvE,gBAAgB;EACd,IAAI,eAAe,KAAK,gBACtB,cAAc,SAAS,SAAS,sBAAsB,CAAC,CAAC,SAAS,CAAC;CAEtE,GAAG,CAAC,YAAY,cAAc,CAAC;CAE/B,MAAM,aACJ,eAAe,YAAY,uBAAuB,mBAAmB,8BAA8B,aAAa,UAAU,IAAI,KAAA;CAEhI,MAAM,kBAAkB,mBAAmB,aAAa;CACxD,MAAM,aAAa,WAAW,OAAO,OAAO,iBAAiB,SAAS;CACtE,MAAM,UAAU,UAAU,MAAiC;EAAC;EAAc;EAAW;EAAmB;CAAgB,CAAC;CAEzH,MAAM,QACJ,oBAAC,SAAD;EACE,WAAW;EACP;EACJ,eAAa;EACb,oBAAkB,YAAY;EAC9B,KAAK;EACL,OAAO;EACP,GAAK;YAEJ,oBAAoB,UAAU,IAAI;CAC9B,CAAA;CAGT,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAiB,IAAI;CAAuB,CAAC;CAEzG,IAAI,eAAe,YAAY,uBAAuB,kBACpD,OACE,oBAAC,0BAAD;EAAkB,YAAY;EAAY,QAAO;EAAoB,GAAI;YACtE;CACe,CAAA;CAItB,OAAO;AACT;;;AC1GA,IAAA,gBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Table/Table.tsx","../../../src/components/Table/index.ts"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { Breakpoint } from '../../hooks/useBreakpoint';\n\nimport { defaultConfig, ModeType, ResponsiveTableVariant } from './constants';\nimport { getCurrentConfig, getBreakpointClass, getCenteredOverflowTableStyle, mapChildrenWithMode, omitProps } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport HorizontalScroll from '../HorizontalScroll';\n\nimport styles from './styles.module.scss';\n\nexport interface BreakpointConfig {\n  /** Breakpoint at which responsive behaviour will be applied. The table component uses a \"desktop first\" approach. */\n  breakpoint: keyof typeof Breakpoint;\n  /** Desired behaviour on this breakpoint and all smaller screens. */\n  variant: keyof typeof ResponsiveTableVariant;\n  /** If variant is horizontallscroll, use a fallback instead of device is not a touch device. */\n  fallbackVariant?: keyof typeof ResponsiveTableVariant;\n}\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'table'>, 'style'> {\n  /** Unique ID */\n  id?: string;\n  /** Id used for testing */\n  testId?: string;\n  /** Customize how the table behaves on various screen widths */\n  breakpointConfig?: BreakpointConfig | BreakpointConfig[];\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table. Use TableHead and TableBody */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n  /** Sets aria-label of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n  scrollAriaLabel?: string;\n  /** Sets aria-labelledby of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n  scrollAriaLabelledById?: string;\n}\n\nexport const Table: React.FC<Props> = ({\n  id,\n  testId,\n  className,\n  children,\n  breakpointConfig = defaultConfig,\n  mode = ModeType.normal,\n  scrollAriaLabel,\n  scrollAriaLabelledById,\n  ...rest\n}) => {\n  const [tableWidth, setTableWidth] = useState<number>(0);\n  const [parentWidth, setParentWidth] = useState<number>(0);\n  const [windowWidth, setWindowWidth] = useState(window.innerWidth);\n  const tableRef = useRef<HTMLTableElement>(null);\n  const tableIsVisible = useIsVisible(tableRef, 0);\n  const breakpoint = useBreakpoint();\n\n  const currentConfig = useMemo(\n    () => getCurrentConfig(breakpointConfig, breakpoint, tableWidth, windowWidth),\n    [breakpointConfig, breakpoint, tableWidth, windowWidth]\n  );\n\n  useEffect(() => {\n    if (\n      currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ||\n      currentConfig?.variant === ResponsiveTableVariant.horizontalscroll\n    ) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n    if (currentConfig?.variant === ResponsiveTableVariant.centeredoverflow) {\n      setParentWidth(tableRef.current?.parentElement?.getBoundingClientRect().width ?? 0);\n    }\n  }, [currentConfig, breakpoint]);\n\n  useLayoutEvent(() => setWindowWidth(window.innerWidth), ['resize'], 100);\n\n  useEffect(() => {\n    if (tableWidth === 0 && tableIsVisible) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n  }, [tableWidth, tableIsVisible]);\n\n  const tableStyle =\n    currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ? getCenteredOverflowTableStyle(parentWidth, tableWidth) : undefined;\n\n  const breakpointClass = getBreakpointClass(currentConfig);\n  const tableClass = classNames(styles.table, breakpointClass, className);\n  const domRest = omitProps(rest as Record<string, unknown>, ['breakpoint', 'variant', 'fallbackVariant', 'headerCategory']);\n\n  const table = (\n    <table\n      className={tableClass}\n      id={id}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Table}\n      ref={tableRef}\n      style={tableStyle}\n      {...(domRest as React.ComponentPropsWithoutRef<'table'>)}\n    >\n      {mapChildrenWithMode(children, mode)}\n    </table>\n  );\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: scrollAriaLabel, id: scrollAriaLabelledById });\n\n  if (currentConfig?.variant === ResponsiveTableVariant.horizontalscroll) {\n    return (\n      <HorizontalScroll childWidth={tableWidth} testId=\"horizontal-scroll\" {...ariaLabelAttributes}>\n        {table}\n      </HorizontalScroll>\n    );\n  }\n\n  return table;\n};\n\nexport default Table;\n","import { Table } from './Table';\n\nexport { TableBody } from './TableBody';\nexport { TableCell } from './TableCell';\nexport { TableExpandedRow } from './TableExpandedRow';\nexport { TableExpanderCell } from './TableExpanderCell';\nexport { TableHead } from './TableHead';\nexport { TableHeadCell } from './TableHeadCell';\nexport { TableRow } from './TableRow';\nexport { SortDirection, HeaderCategory, TextAlign, ResponsiveTableVariant, ModeType, defaultConfig, simpleConfig } from './constants';\n\nexport * from './Table';\nexport * from './utils';\n\nexport default Table;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA6CA,IAAa,SAA0B,EACrC,IACA,QACA,WACA,UACA,mBAAmB,eACnB,OAAO,SAAS,QAChB,iBACA,wBACA,GAAG,WACC;CACJ,MAAM,CAAC,YAAY,iBAAiB,SAAiB,CAAC;CACtD,MAAM,CAAC,aAAa,kBAAkB,SAAiB,CAAC;CACxD,MAAM,CAAC,aAAa,kBAAkB,SAAS,OAAO,UAAU;CAChE,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,iBAAiB,aAAa,UAAU,CAAC;CAC/C,MAAM,aAAa,cAAc;CAEjC,MAAM,gBAAgB,cACd,iBAAiB,kBAAkB,YAAY,YAAY,WAAW,GAC5E;EAAC;EAAkB;EAAY;EAAY;CAAW,CACxD;CAEA,gBAAgB;EACd,IACE,eAAe,YAAY,uBAAuB,oBAClD,eAAe,YAAY,uBAAuB,kBAElD,cAAc,SAAS,SAAS,sBAAsB,CAAC,CAAC,SAAS,CAAC;EAEpE,IAAI,eAAe,YAAY,uBAAuB,kBACpD,eAAe,SAAS,SAAS,eAAe,sBAAsB,CAAC,CAAC,SAAS,CAAC;CAEtF,GAAG,CAAC,eAAe,UAAU,CAAC;CAE9B,qBAAqB,eAAe,OAAO,UAAU,GAAG,CAAC,QAAQ,GAAG,GAAG;CAEvE,gBAAgB;EACd,IAAI,eAAe,KAAK,gBACtB,cAAc,SAAS,SAAS,sBAAsB,CAAC,CAAC,SAAS,CAAC;CAEtE,GAAG,CAAC,YAAY,cAAc,CAAC;CAE/B,MAAM,aACJ,eAAe,YAAY,uBAAuB,mBAAmB,8BAA8B,aAAa,UAAU,IAAI,KAAA;CAEhI,MAAM,kBAAkB,mBAAmB,aAAa;CACxD,MAAM,aAAa,WAAW,OAAO,OAAO,iBAAiB,SAAS;CACtE,MAAM,UAAU,UAAU,MAAiC;EAAC;EAAc;EAAW;EAAmB;CAAgB,CAAC;CAEzH,MAAM,QACJ,oBAAC,SAAD;EACE,WAAW;EACP;EACJ,eAAa;EACb,oBAAkB,YAAY;EAC9B,KAAK;EACL,OAAO;EACP,GAAK;EAEJ,UAAA,oBAAoB,UAAU,IAAI;CAC9B,CAAA;CAGT,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAiB,IAAI;CAAuB,CAAC;CAEzG,IAAI,eAAe,YAAY,uBAAuB,kBACpD,OACE,oBAAC,0BAAD;EAAkB,YAAY;EAAY,QAAO;EAAoB,GAAI;EACtE,UAAA;CACe,CAAA;CAItB,OAAO;AACT;;;AC1GA,IAAA,gBAAe"}

package/lib/components/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/resources/HN.Designsystem.Tabs.en-GB.json","../../../src/resources/HN.Designsystem.Tabs.nb-NO.json","../../../src/resources/HN.Designsystem.Tabs.se-NO.json","../../../src/components/Tabs/resourceHelper.ts","../../../src/components/Tabs/Tabs.tsx","../../../src/components/Tabs/index.ts"],"sourcesContent":["{\n  \"ariaLabelRightButton\": \"Scroll right\",\n  \"ariaLabelLeftButton\": \"Scroll left\"\n}\n","{\n  \"ariaLabelRightButton\": \"Scroll til høyre\",\n  \"ariaLabelLeftButton\": \"Scroll til venstre\"\n}\n","{\n  \"ariaLabelRightButton\": \"Sirdde olgeš guvlui\",\n  \"ariaLabelLeftButton\": \"Sirdde gurut guvlui\"\n}\n","import type { HNDesignsystemTabs } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Tabs.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Tabs.nb-NO.json';\nimport seNO from '../../resources/HN.Designsystem.Tabs.se-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemTabs => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.SAMI_NORTHERN:\n      return seNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemTabs } from '../../resources/Resources';\nimport type { PaletteNames } from '../../theme/palette';\n\nimport { getResources } from './resourceHelper';\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport { LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport designsystemlayout from '../../scss/layout.module.scss';\n\nimport styles from './styles.module.scss';\n\nexport type { TabProps } from './Tab';\nexport type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;\nexport type TabsOnColor = 'onblueberry' | 'onneutral' | 'onwhite';\n\nexport interface TabsProps {\n  children?: React.ReactNode;\n  /** Controlled state for Tabs component */\n  activeTab?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the color of the tabs. Default: white */\n  color?: TabsColors;\n  /** Sets wether the component should use the container-breakout class. Default: true */\n  containerBreakout?: boolean;\n  /** Sets the background color of the tabs. Can only be used when the color is set to white. Default: onwhite */\n  onColor?: TabsOnColor;\n  /** Whether the tab list should be sticky */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemTabs>;\n  /** Overrides the default z-index of the tabs header */\n  zIndex?: number;\n}\n\nexport const TabsRoot: React.FC<TabsProps> = ({\n  activeTab,\n  children,\n  className,\n  color = 'white',\n  containerBreakout = true,\n  onColor = 'onwhite',\n  sticky = true,\n  testId,\n  resources,\n  zIndex,\n}) => {\n  const isControlled = activeTab !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(0);\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabPanelRef = useRef<HTMLDivElement>(null);\n  const tabListRef = useRef<HTMLDivElement>(null);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemTabs = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  let onColorUsed: TabsOnColor = 'onwhite';\n  if (color === 'white') {\n    onColorUsed = onColor;\n  }\n\n  const onValueChange = (newValue: number): void => {\n    if (!isControlled) {\n      setUncontrolledValue(newValue);\n    }\n  };\n\n  const activeTabIndex = isControlled ? activeTab : uncontrolledValue;\n\n  return (\n    <div className={classNames(className, containerBreakout && designsystemlayout['container-breakout'])} data-testid={testId}>\n      <div\n        ref={tabListRef}\n        className={classNames(styles['tab-list-wrapper'], {\n          [styles['tab-list-wrapper--sticky']]: sticky,\n        })}\n        style={{\n          zIndex: zIndex,\n        }}\n      >\n        <TabList\n          onTabListClick={(index: number) => onValueChange(index)}\n          selectedTab={activeTabIndex}\n          color={color}\n          onColor={onColorUsed}\n          ariaLabelLeftButton={mergedResources.ariaLabelLeftButton}\n          ariaLabelRightButton={mergedResources.ariaLabelRightButton}\n        >\n          {children}\n        </TabList>\n        <div className={classNames(styles['panel-wrapper'], styles[`panel-wrapper--${color}`])}></div>\n      </div>\n      <div ref={tabsRef} style={{ marginTop: '-50px' }}>\n        <TabPanel ref={tabPanelRef} color={color} isFirst={activeTabIndex == 0}>\n          {React.Children.toArray(children)[activeTabIndex]}\n        </TabPanel>\n      </div>\n    </div>\n  );\n};\n\ntype TabsComponent = typeof TabsRoot & {\n  Tab: typeof Tab;\n};\nconst Tabs = TabsRoot as TabsComponent;\nTabsRoot.displayName = 'Tabs';\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n","import Tabs from './Tabs';\nexport * from './Tabs';\nexport default Tabs;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AGOA,IAAa,gBAAgB,aAAkD;CAC7E,QAAQ,UAAR;EACE,KAAK,gBAAgB,SACnB,OAAO;EACT,KAAK,gBAAgB,eACnB,OAAO;EACT,KAAK,gBAAgB;EACrB,SACE,OAAO;CACX;AACF;;;AC0BA,IAAa,YAAiC,EAC5C,WACA,UACA,WACA,QAAQ,SACR,oBAAoB,MACpB,UAAU,WACV,SAAS,MACT,QACA,WACA,aACI;CACJ,MAAM,eAAe,cAAc,KAAA;CACnC,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,CAAC;CAC5D,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,cAAc,OAAuB,IAAI;CAC/C,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAG3E,MAAM,kBAAsC;EAC1C,GAHuB,aAAa,QAGjC;EACH,GAAG;CACL;CAEA,IAAI,cAA2B;CAC/B,IAAI,UAAU,SACZ,cAAc;CAGhB,MAAM,iBAAiB,aAA2B;EAChD,IAAI,CAAC,cACH,qBAAqB,QAAQ;CAEjC;CAEA,MAAM,iBAAiB,eAAe,YAAY;CAElD,OACE,qBAAC,OAAD;EAAK,WAAW,WAAW,WAAW,qBAAqB,mBAAmB,qBAAqB;EAAG,eAAa;YAAnH,CACE,qBAAC,OAAD;GACE,KAAK;GACL,WAAW,WAAW,OAAO,qBAAqB,GAC/C,OAAO,8BAA8B,OACxC,CAAC;GACD,OAAO,EACG,OACV;aAPF,CASE,oBAAC,iBAAD;IACE,iBAAiB,UAAkB,cAAc,KAAK;IACtD,aAAa;IACN;IACP,SAAS;IACT,qBAAqB,gBAAgB;IACrC,sBAAsB,gBAAgB;IAErC;GACM,CAAA,GACT,oBAAC,OAAD,EAAK,WAAW,WAAW,OAAO,kBAAkB,OAAO,kBAAkB,QAAQ,EAAQ,CAAA,CAC1F;MACL,oBAAC,OAAD;GAAK,KAAK;GAAS,OAAO,EAAE,WAAW,QAAQ;aAC7C,oBAAC,kBAAD;IAAU,KAAK;IAAoB;IAAO,SAAS,kBAAkB;cAClE,MAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC;GAC1B,CAAA;EACP,CAAA,CACF;;AAET;AAKA,IAAM,OAAO;AACb,SAAS,cAAc;AACvB,KAAK,cAAc;AACnB,KAAK,MAAM;AACX,KAAK,IAAI,cAAc;;;ACtHvB,IAAA,eAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/resources/HN.Designsystem.Tabs.en-GB.json","../../../src/resources/HN.Designsystem.Tabs.nb-NO.json","../../../src/resources/HN.Designsystem.Tabs.se-NO.json","../../../src/components/Tabs/resourceHelper.ts","../../../src/components/Tabs/Tabs.tsx","../../../src/components/Tabs/index.ts"],"sourcesContent":["{\n  \"ariaLabelRightButton\": \"Scroll right\",\n  \"ariaLabelLeftButton\": \"Scroll left\"\n}\n","{\n  \"ariaLabelRightButton\": \"Scroll til høyre\",\n  \"ariaLabelLeftButton\": \"Scroll til venstre\"\n}\n","{\n  \"ariaLabelRightButton\": \"Sirdde olgeš guvlui\",\n  \"ariaLabelLeftButton\": \"Sirdde gurut guvlui\"\n}\n","import type { HNDesignsystemTabs } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Tabs.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Tabs.nb-NO.json';\nimport seNO from '../../resources/HN.Designsystem.Tabs.se-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemTabs => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.SAMI_NORTHERN:\n      return seNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemTabs } from '../../resources/Resources';\nimport type { PaletteNames } from '../../theme/palette';\n\nimport { getResources } from './resourceHelper';\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport { LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport designsystemlayout from '../../scss/layout.module.scss';\n\nimport styles from './styles.module.scss';\n\nexport type { TabProps } from './Tab';\nexport type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;\nexport type TabsOnColor = 'onblueberry' | 'onneutral' | 'onwhite';\n\nexport interface TabsProps {\n  children?: React.ReactNode;\n  /** Controlled state for Tabs component */\n  activeTab?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the color of the tabs. Default: white */\n  color?: TabsColors;\n  /** Sets wether the component should use the container-breakout class. Default: true */\n  containerBreakout?: boolean;\n  /** Sets the background color of the tabs. Can only be used when the color is set to white. Default: onwhite */\n  onColor?: TabsOnColor;\n  /** Whether the tab list should be sticky */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemTabs>;\n  /** Overrides the default z-index of the tabs header */\n  zIndex?: number;\n}\n\nexport const TabsRoot: React.FC<TabsProps> = ({\n  activeTab,\n  children,\n  className,\n  color = 'white',\n  containerBreakout = true,\n  onColor = 'onwhite',\n  sticky = true,\n  testId,\n  resources,\n  zIndex,\n}) => {\n  const isControlled = activeTab !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(0);\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabPanelRef = useRef<HTMLDivElement>(null);\n  const tabListRef = useRef<HTMLDivElement>(null);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemTabs = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  let onColorUsed: TabsOnColor = 'onwhite';\n  if (color === 'white') {\n    onColorUsed = onColor;\n  }\n\n  const onValueChange = (newValue: number): void => {\n    if (!isControlled) {\n      setUncontrolledValue(newValue);\n    }\n  };\n\n  const activeTabIndex = isControlled ? activeTab : uncontrolledValue;\n\n  return (\n    <div className={classNames(className, containerBreakout && designsystemlayout['container-breakout'])} data-testid={testId}>\n      <div\n        ref={tabListRef}\n        className={classNames(styles['tab-list-wrapper'], {\n          [styles['tab-list-wrapper--sticky']]: sticky,\n        })}\n        style={{\n          zIndex: zIndex,\n        }}\n      >\n        <TabList\n          onTabListClick={(index: number) => onValueChange(index)}\n          selectedTab={activeTabIndex}\n          color={color}\n          onColor={onColorUsed}\n          ariaLabelLeftButton={mergedResources.ariaLabelLeftButton}\n          ariaLabelRightButton={mergedResources.ariaLabelRightButton}\n        >\n          {children}\n        </TabList>\n        <div className={classNames(styles['panel-wrapper'], styles[`panel-wrapper--${color}`])}></div>\n      </div>\n      <div ref={tabsRef} style={{ marginTop: '-50px' }}>\n        <TabPanel ref={tabPanelRef} color={color} isFirst={activeTabIndex == 0}>\n          {React.Children.toArray(children)[activeTabIndex]}\n        </TabPanel>\n      </div>\n    </div>\n  );\n};\n\ntype TabsComponent = typeof TabsRoot & {\n  Tab: typeof Tab;\n};\nconst Tabs = TabsRoot as TabsComponent;\nTabsRoot.displayName = 'Tabs';\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n","import Tabs from './Tabs';\nexport * from './Tabs';\nexport default Tabs;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AGOA,IAAa,gBAAgB,aAAkD;CAC7E,QAAQ,UAAR;EACE,KAAK,gBAAgB,SACnB,OAAO;EACT,KAAK,gBAAgB,eACnB,OAAO;EACT,KAAK,gBAAgB;EACrB,SACE,OAAO;CACX;AACF;;;AC0BA,IAAa,YAAiC,EAC5C,WACA,UACA,WACA,QAAQ,SACR,oBAAoB,MACpB,UAAU,WACV,SAAS,MACT,QACA,WACA,aACI;CACJ,MAAM,eAAe,cAAc,KAAA;CACnC,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,CAAC;CAC5D,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,cAAc,OAAuB,IAAI;CAC/C,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAG3E,MAAM,kBAAsC;EAC1C,GAHuB,aAAa,QAGjC;EACH,GAAG;CACL;CAEA,IAAI,cAA2B;CAC/B,IAAI,UAAU,SACZ,cAAc;CAGhB,MAAM,iBAAiB,aAA2B;EAChD,IAAI,CAAC,cACH,qBAAqB,QAAQ;CAEjC;CAEA,MAAM,iBAAiB,eAAe,YAAY;CAElD,OACE,qBAAC,OAAD;EAAK,WAAW,WAAW,WAAW,qBAAqB,mBAAmB,qBAAqB;EAAG,eAAa;EAAnH,UAAA,CACE,qBAAC,OAAD;GACE,KAAK;GACL,WAAW,WAAW,OAAO,qBAAqB,GAC/C,OAAO,8BAA8B,OACxC,CAAC;GACD,OAAO,EACG,OACV;GAPF,UAAA,CASE,oBAAC,iBAAD;IACE,iBAAiB,UAAkB,cAAc,KAAK;IACtD,aAAa;IACN;IACP,SAAS;IACT,qBAAqB,gBAAgB;IACrC,sBAAsB,gBAAgB;IAErC;GACM,CAAA,GACT,oBAAC,OAAD,EAAK,WAAW,WAAW,OAAO,kBAAkB,OAAO,kBAAkB,QAAQ,EAAQ,CAAA,CAC1F;EACL,CAAA,GAAA,oBAAC,OAAD;GAAK,KAAK;GAAS,OAAO,EAAE,WAAW,QAAQ;GAC7C,UAAA,oBAAC,kBAAD;IAAU,KAAK;IAAoB;IAAO,SAAS,kBAAkB;IAClE,UAAA,MAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC;GAC1B,CAAA;EACP,CAAA,CACF;;AAET;AAKA,IAAM,OAAO;AACb,SAAS,cAAc;AACvB,KAAK,cAAc;AACnB,KAAK,MAAM;AACX,KAAK,IAAI,cAAc;;;ACtHvB,IAAA,eAAe"}

package/lib/components/Tag/index.js

@@ -5,8 +5,9 @@ import styles from "./styles.module.scss";
 //#region src/components/Tag/Tag.tsx
 var Tag = (props) => {
 	const { children, variant = "normal", testId } = props;
+	const tagClasses = classNames(styles.tag, styles[`tag--${variant}`]);
 	return /* @__PURE__ */ jsx("span", {
-		className: classNames(styles.tag, styles[`tag--${variant}`]),
+		className: tagClasses,
 		"data-testid": testId,
 		"data-analyticsid": AnalyticsId.Tag,
 		children

package/lib/components/Tag/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Tag/Tag.tsx","../../../src/components/Tag/constants.ts","../../../src/components/Tag/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport type { TagVariant } from './constants';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface TagProps {\n  /** Sets the text of the tag */\n  children: string;\n  /* Changes the appearance of the tag. Default: normal */\n  variant?: keyof typeof TagVariant;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst Tag: React.FC<TagProps> = props => {\n  const { children, variant = 'normal', testId } = props;\n\n  const tagClasses = cn(styles.tag, styles[`tag--${variant}`]);\n\n  return (\n    <span className={tagClasses} data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {children}\n    </span>\n  );\n};\n\nexport default Tag;\n","export enum TagVariant {\n  normal = 'normal',\n  accent1 = 'accent1',\n  accent2 = 'accent2',\n  accent3 = 'accent3',\n}\n","import Tag from './Tag';\nexport { TagVariant } from './constants';\nexport * from './Tag';\nexport default Tag;\n"],"mappings":";;;;;AAiBA,IAAM,OAA0B,UAAS;CACvC,MAAM,EAAE,UAAU,UAAU,UAAU,WAAW;CAIjD,OACE,oBAAC,QAAD;EAAM,WAHW,WAAG,OAAO,KAAK,OAAO,QAAQ,UAG9B;EAAY,eAAa;EAAQ,oBAAkB,YAAY;EAC7E;CACG,CAAA;AAEV;;;AC3BA,IAAY,aAAL,yBAAA,YAAA;CACL,WAAA,YAAA;CACA,WAAA,aAAA;CACA,WAAA,aAAA;CACA,WAAA,aAAA;;AACF,EAAA,CAAA,CAAA;;;ACFA,IAAA,cAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Tag/Tag.tsx","../../../src/components/Tag/constants.ts","../../../src/components/Tag/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport type { TagVariant } from './constants';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface TagProps {\n  /** Sets the text of the tag */\n  children: string;\n  /* Changes the appearance of the tag. Default: normal */\n  variant?: keyof typeof TagVariant;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst Tag: React.FC<TagProps> = props => {\n  const { children, variant = 'normal', testId } = props;\n\n  const tagClasses = cn(styles.tag, styles[`tag--${variant}`]);\n\n  return (\n    <span className={tagClasses} data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {children}\n    </span>\n  );\n};\n\nexport default Tag;\n","export enum TagVariant {\n  normal = 'normal',\n  accent1 = 'accent1',\n  accent2 = 'accent2',\n  accent3 = 'accent3',\n}\n","import Tag from './Tag';\nexport { TagVariant } from './constants';\nexport * from './Tag';\nexport default Tag;\n"],"mappings":";;;;;AAiBA,IAAM,OAA0B,UAAS;CACvC,MAAM,EAAE,UAAU,UAAU,UAAU,WAAW;CAEjD,MAAM,aAAa,WAAG,OAAO,KAAK,OAAO,QAAQ,UAAU;CAE3D,OACE,oBAAC,QAAD;EAAM,WAAW;EAAY,eAAa;EAAQ,oBAAkB,YAAY;EAC7E;CACG,CAAA;AAEV;;;AC3BA,IAAY,aAAL,yBAAA,YAAA;CACL,WAAA,YAAA;CACA,WAAA,aAAA;CACA,WAAA,aAAA;CACA,WAAA,aAAA;;AACF,EAAA,CAAA,CAAA;;;ACFA,IAAA,cAAe"}

package/lib/components/TagList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/TagList/TagList.tsx","../../../src/components/TagList/index.ts"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface TagListPropsProps {\n  children?: React.ReactNode;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst TagList: React.FC<TagListPropsProps> = ({ children, testId }) => {\n  return (\n    <ul className={styles['tag-list']} data-testid={testId} data-analyticsid={AnalyticsId.TagList}>\n      {React.Children.map(children, child => (\n        <li className={styles['tag-list__item']}>{child}</li>\n      ))}\n    </ul>\n  );\n};\n\nexport default TagList;\n","import TagList from './TagList';\nexport * from './TagList';\nexport default TagList;\n"],"mappings":";;;;;AAYA,IAAM,WAAwC,EAAE,UAAU,aAAa;CACrE,OACE,oBAAC,MAAD;EAAI,WAAW,OAAO;EAAa,eAAa;EAAQ,oBAAkB,YAAY;YACnF,MAAM,SAAS,IAAI,WAAU,UAC5B,oBAAC,MAAD;GAAI,WAAW,OAAO;aAAoB;EAAU,CAAA,CACrD;CACC,CAAA;AAER;;;AClBA,IAAA,kBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/TagList/TagList.tsx","../../../src/components/TagList/index.ts"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface TagListPropsProps {\n  children?: React.ReactNode;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst TagList: React.FC<TagListPropsProps> = ({ children, testId }) => {\n  return (\n    <ul className={styles['tag-list']} data-testid={testId} data-analyticsid={AnalyticsId.TagList}>\n      {React.Children.map(children, child => (\n        <li className={styles['tag-list__item']}>{child}</li>\n      ))}\n    </ul>\n  );\n};\n\nexport default TagList;\n","import TagList from './TagList';\nexport * from './TagList';\nexport default TagList;\n"],"mappings":";;;;;AAYA,IAAM,WAAwC,EAAE,UAAU,aAAa;CACrE,OACE,oBAAC,MAAD;EAAI,WAAW,OAAO;EAAa,eAAa;EAAQ,oBAAkB,YAAY;EACnF,UAAA,MAAM,SAAS,IAAI,WAAU,UAC5B,oBAAC,MAAD;GAAI,WAAW,OAAO;GAAoB,UAAA;EAAU,CAAA,CACrD;CACC,CAAA;AAER;;;AClBA,IAAA,kBAAe"}

package/lib/components/Tile/index.js

@@ -12,11 +12,12 @@ import tileStyles from "./styles.module.scss";
 //#region src/components/Tile/Tile.tsx
 var Title = (props) => {
 	const { compact, children, className, htmlMarkup = "span", highlighted, ref } = props;
+	const titleClasses = classNames(tileStyles["tile__title"], {
+		[tileStyles["tile__title--highlighted"]]: highlighted,
+		[tileStyles["tile__title--compact"]]: compact
+	}, className);
 	return /* @__PURE__ */ jsx(htmlMarkup, {
-		className: classNames(tileStyles["tile__title"], {
-			[tileStyles["tile__title--highlighted"]]: highlighted,
-			[tileStyles["tile__title--compact"]]: compact
-		}, className),
+		className: titleClasses,
 		ref,
 		children
 	});

package/lib/components/Tile/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Tile/Tile.tsx","../../../src/components/Tile/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { LazyIconProps } from '../LazyIcon';\nimport type { TitleTags } from './../Title/Title';\n\nimport { AnalyticsId } from '../../constants';\nimport { useBreakpoint, Breakpoint } from '../../hooks/useBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { isComponent } from '../../utils/component';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon, { IconSize, type BaseIconProps, type IconProps } from '../Icon';\nimport LazyIcon from '../LazyIcon';\n\nimport tileStyles from './styles.module.scss';\n\nexport type TileVariants = 'normal' | 'compact';\n\ninterface TileProps extends Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick' | 'rel'> {\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**\tSets the icon to be displayed inside the tile. */\n  icon: React.ReactElement;\n  /**\tSets the title to be displayed inside the tile. */\n  title: React.ReactElement;\n  /** Toggles the highlighted style of the tile. */\n  highlighted?: boolean;\n  /** Sets the description to be displayed inside the tile. */\n  description?: string;\n  /** Sets a fixed max and min width for the tile. */\n  fixed?: boolean;\n  /** Sets the visual variant of the component */\n  variant?: TileVariants;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLAnchorElement | null>;\n}\n\ninterface TileTitleProps {\n  children: React.ReactNode;\n  className?: string;\n  htmlMarkup?: TitleTags;\n  highlighted?: boolean;\n  compact?: boolean;\n  /** Ref passed to the title element */\n  ref?: React.Ref<HTMLHeadingElement | null>;\n}\n\nexport interface TileCompound extends React.FC<TileProps> {\n  Title: React.FC<TileTitleProps>;\n}\n\nconst Title: React.FC<TileTitleProps> = props => {\n  const { compact, children, className, htmlMarkup = 'span', highlighted, ref } = props;\n  const titleClasses = classNames(\n    tileStyles['tile__title'],\n    {\n      [tileStyles['tile__title--highlighted']]: highlighted,\n      [tileStyles['tile__title--compact']]: compact,\n    },\n    className\n  );\n  const CustomTag = htmlMarkup;\n\n  return (\n    <CustomTag className={titleClasses} ref={ref}>\n      {children}\n    </CustomTag>\n  );\n};\n\nTitle.displayName = 'Title';\n\nexport const Tile: TileCompound = props => {\n  const {\n    children,\n    icon,\n    title,\n    className = '',\n    description,\n    fixed = false,\n    highlighted = false,\n    testId,\n    target,\n    rel,\n    variant = 'normal',\n    href,\n    onClick,\n    ref,\n  } = props;\n  const { refObject, isHovered } = usePseudoClasses<HTMLAnchorElement>();\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < Breakpoint.md;\n  const compact = variant === 'compact';\n  const tileClasses = classNames(\n    tileStyles.tile,\n    {\n      [tileStyles['tile--fixed']]: fixed,\n      [tileStyles['tile--compact']]: compact,\n      [tileStyles['tile--highlighted']]: highlighted,\n    },\n    className\n  );\n  const tileTitleWrapperClasses = classNames(tileStyles['title-wrapper'], {\n    [tileStyles['title-wrapper--compact']]: compact,\n  });\n\n  return (\n    <a\n      ref={mergeRefs([ref, refObject])}\n      href={href}\n      target={target}\n      rel={target === '_blank' ? 'noopener noreferrer' : rel}\n      className={tileClasses}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Tile}\n      onClick={onClick}\n    >\n      <div className={tileTitleWrapperClasses}>\n        {(isComponent<IconProps>(icon, Icon) || isComponent<LazyIconProps>(icon, LazyIcon)) &&\n          React.cloneElement(icon as React.ReactElement<BaseIconProps>, {\n            size: mobile ? IconSize.Small : IconSize.Medium,\n            isHovered,\n            color: highlighted ? 'white' : 'black',\n          })}\n        {isComponent<TileTitleProps>(title, Tile.Title) && React.cloneElement(title, { highlighted: highlighted, compact: compact })}\n      </div>\n      {!compact && !mobile && <p className={tileStyles.tile__description}>{description}</p>}\n      {children && <div className={tileStyles.tile__children}>{children}</div>}\n    </a>\n  );\n};\n\nTile.displayName = 'Tile';\nTile.Title = Title;\n\nexport default Tile;\n","import Tile from './Tile';\nexport * from './Tile';\nexport default Tile;\n"],"mappings":";;;;;;;;;;;;AAuDA,IAAM,SAAkC,UAAS;CAC/C,MAAM,EAAE,SAAS,UAAU,WAAW,aAAa,QAAQ,aAAa,QAAQ;CAWhF,OACE,oBAAC,YAAD;EAAW,WAXQ,WACnB,WAAW,gBACX;IACG,WAAW,8BAA8B;IACzC,WAAW,0BAA0B;EACxC,GACA,SAKsB;EAAmB;EACtC;CACQ,CAAA;AAEf;AAEA,MAAM,cAAc;AAEpB,IAAa,QAAqB,UAAS;CACzC,MAAM,EACJ,UACA,MACA,OACA,YAAY,IACZ,aACA,QAAQ,OACR,cAAc,OACd,QACA,QACA,KACA,UAAU,UACV,MACA,SACA,QACE;CACJ,MAAM,EAAE,WAAW,cAAc,iBAAoC;CAErE,MAAM,SADa,cACJ,IAAa,WAAW;CACvC,MAAM,UAAU,YAAY;CAC5B,MAAM,cAAc,WAClB,WAAW,MACX;GACG,WAAW,iBAAiB;GAC5B,WAAW,mBAAmB;GAC9B,WAAW,uBAAuB;CACrC,GACA,SACF;CACA,MAAM,0BAA0B,WAAW,WAAW,kBAAkB,GACrE,WAAW,4BAA4B,QAC1C,CAAC;CAED,OACE,qBAAC,KAAD;EACE,KAAK,UAAU,CAAC,KAAK,SAAS,CAAC;EACzB;EACE;EACR,KAAK,WAAW,WAAW,wBAAwB;EACnD,WAAW;EACX,eAAa;EACb,oBAAkB,YAAY;EACrB;YARX;GAUE,qBAAC,OAAD;IAAK,WAAW;cAAhB,EACI,YAAuB,MAAM,YAAI,KAAK,YAA2B,MAAM,gBAAQ,MAC/E,MAAM,aAAa,MAA2C;KAC5D,MAAM,SAAS,SAAS,QAAQ,SAAS;KACzC;KACA,OAAO,cAAc,UAAU;IACjC,CAAC,GACF,YAA4B,OAAO,KAAK,KAAK,KAAK,MAAM,aAAa,OAAO;KAAe;KAAsB;IAAQ,CAAC,CACxH;;GACJ,CAAC,WAAW,CAAC,UAAU,oBAAC,KAAD;IAAG,WAAW,WAAW;cAAoB;GAAe,CAAA;GACnF,YAAY,oBAAC,OAAD;IAAK,WAAW,WAAW;IAAiB;GAAc,CAAA;EACtE;;AAEP;AAEA,KAAK,cAAc;AACnB,KAAK,QAAQ;;;ACvIb,IAAA,eAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Tile/Tile.tsx","../../../src/components/Tile/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { LazyIconProps } from '../LazyIcon';\nimport type { TitleTags } from './../Title/Title';\n\nimport { AnalyticsId } from '../../constants';\nimport { useBreakpoint, Breakpoint } from '../../hooks/useBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { isComponent } from '../../utils/component';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon, { IconSize, type BaseIconProps, type IconProps } from '../Icon';\nimport LazyIcon from '../LazyIcon';\n\nimport tileStyles from './styles.module.scss';\n\nexport type TileVariants = 'normal' | 'compact';\n\ninterface TileProps extends Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick' | 'rel'> {\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**\tSets the icon to be displayed inside the tile. */\n  icon: React.ReactElement;\n  /**\tSets the title to be displayed inside the tile. */\n  title: React.ReactElement;\n  /** Toggles the highlighted style of the tile. */\n  highlighted?: boolean;\n  /** Sets the description to be displayed inside the tile. */\n  description?: string;\n  /** Sets a fixed max and min width for the tile. */\n  fixed?: boolean;\n  /** Sets the visual variant of the component */\n  variant?: TileVariants;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLAnchorElement | null>;\n}\n\ninterface TileTitleProps {\n  children: React.ReactNode;\n  className?: string;\n  htmlMarkup?: TitleTags;\n  highlighted?: boolean;\n  compact?: boolean;\n  /** Ref passed to the title element */\n  ref?: React.Ref<HTMLHeadingElement | null>;\n}\n\nexport interface TileCompound extends React.FC<TileProps> {\n  Title: React.FC<TileTitleProps>;\n}\n\nconst Title: React.FC<TileTitleProps> = props => {\n  const { compact, children, className, htmlMarkup = 'span', highlighted, ref } = props;\n  const titleClasses = classNames(\n    tileStyles['tile__title'],\n    {\n      [tileStyles['tile__title--highlighted']]: highlighted,\n      [tileStyles['tile__title--compact']]: compact,\n    },\n    className\n  );\n  const CustomTag = htmlMarkup;\n\n  return (\n    <CustomTag className={titleClasses} ref={ref}>\n      {children}\n    </CustomTag>\n  );\n};\n\nTitle.displayName = 'Title';\n\nexport const Tile: TileCompound = props => {\n  const {\n    children,\n    icon,\n    title,\n    className = '',\n    description,\n    fixed = false,\n    highlighted = false,\n    testId,\n    target,\n    rel,\n    variant = 'normal',\n    href,\n    onClick,\n    ref,\n  } = props;\n  const { refObject, isHovered } = usePseudoClasses<HTMLAnchorElement>();\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < Breakpoint.md;\n  const compact = variant === 'compact';\n  const tileClasses = classNames(\n    tileStyles.tile,\n    {\n      [tileStyles['tile--fixed']]: fixed,\n      [tileStyles['tile--compact']]: compact,\n      [tileStyles['tile--highlighted']]: highlighted,\n    },\n    className\n  );\n  const tileTitleWrapperClasses = classNames(tileStyles['title-wrapper'], {\n    [tileStyles['title-wrapper--compact']]: compact,\n  });\n\n  return (\n    <a\n      ref={mergeRefs([ref, refObject])}\n      href={href}\n      target={target}\n      rel={target === '_blank' ? 'noopener noreferrer' : rel}\n      className={tileClasses}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Tile}\n      onClick={onClick}\n    >\n      <div className={tileTitleWrapperClasses}>\n        {(isComponent<IconProps>(icon, Icon) || isComponent<LazyIconProps>(icon, LazyIcon)) &&\n          React.cloneElement(icon as React.ReactElement<BaseIconProps>, {\n            size: mobile ? IconSize.Small : IconSize.Medium,\n            isHovered,\n            color: highlighted ? 'white' : 'black',\n          })}\n        {isComponent<TileTitleProps>(title, Tile.Title) && React.cloneElement(title, { highlighted: highlighted, compact: compact })}\n      </div>\n      {!compact && !mobile && <p className={tileStyles.tile__description}>{description}</p>}\n      {children && <div className={tileStyles.tile__children}>{children}</div>}\n    </a>\n  );\n};\n\nTile.displayName = 'Tile';\nTile.Title = Title;\n\nexport default Tile;\n","import Tile from './Tile';\nexport * from './Tile';\nexport default Tile;\n"],"mappings":";;;;;;;;;;;;AAuDA,IAAM,SAAkC,UAAS;CAC/C,MAAM,EAAE,SAAS,UAAU,WAAW,aAAa,QAAQ,aAAa,QAAQ;CAChF,MAAM,eAAe,WACnB,WAAW,gBACX;GACG,WAAW,8BAA8B;GACzC,WAAW,0BAA0B;CACxC,GACA,SACF;CAGA,OACE,oBAAC,YAAD;EAAW,WAAW;EAAmB;EACtC;CACQ,CAAA;AAEf;AAEA,MAAM,cAAc;AAEpB,IAAa,QAAqB,UAAS;CACzC,MAAM,EACJ,UACA,MACA,OACA,YAAY,IACZ,aACA,QAAQ,OACR,cAAc,OACd,QACA,QACA,KACA,UAAU,UACV,MACA,SACA,QACE;CACJ,MAAM,EAAE,WAAW,cAAc,iBAAoC;CAErE,MAAM,SADa,cACJ,IAAa,WAAW;CACvC,MAAM,UAAU,YAAY;CAC5B,MAAM,cAAc,WAClB,WAAW,MACX;GACG,WAAW,iBAAiB;GAC5B,WAAW,mBAAmB;GAC9B,WAAW,uBAAuB;CACrC,GACA,SACF;CACA,MAAM,0BAA0B,WAAW,WAAW,kBAAkB,GACrE,WAAW,4BAA4B,QAC1C,CAAC;CAED,OACE,qBAAC,KAAD;EACE,KAAK,UAAU,CAAC,KAAK,SAAS,CAAC;EACzB;EACE;EACR,KAAK,WAAW,WAAW,wBAAwB;EACnD,WAAW;EACX,eAAa;EACb,oBAAkB,YAAY;EACrB;EARX,UAAA;GAUE,qBAAC,OAAD;IAAK,WAAW;IAAhB,UAAA,EACI,YAAuB,MAAM,YAAI,KAAK,YAA2B,MAAM,gBAAQ,MAC/E,MAAM,aAAa,MAA2C;KAC5D,MAAM,SAAS,SAAS,QAAQ,SAAS;KACzC;KACA,OAAO,cAAc,UAAU;IACjC,CAAC,GACF,YAA4B,OAAO,KAAK,KAAK,KAAK,MAAM,aAAa,OAAO;KAAe;KAAsB;IAAQ,CAAC,CACxH;;GACJ,CAAC,WAAW,CAAC,UAAU,oBAAC,KAAD;IAAG,WAAW,WAAW;IAAoB,UAAA;GAAe,CAAA;GACnF,YAAY,oBAAC,OAAD;IAAK,WAAW,WAAW;IAAiB;GAAc,CAAA;EACtE;;AAEP;AAEA,KAAK,cAAc;AACnB,KAAK,QAAQ;;;ACvIb,IAAA,eAAe"}

package/lib/components/ToastList/index.js

@@ -56,8 +56,9 @@ var ToastList = (props) => {
 			timeoutRefs.current.clear();
 		};
 	}, []);
+	const setRefs = mergeRefs([internalRef, ref]);
 	return /* @__PURE__ */ jsx("section", {
-		ref: mergeRefs([internalRef, ref]),
+		ref: setRefs,
 		className: styles["toast-list"],
 		"data-testid": testId,
 		children: /* @__PURE__ */ jsx(AnimatePresence, {

package/lib/components/ToastList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/ToastList/ToastList.tsx","../../../src/components/ToastList/index.ts"],"sourcesContent":["import React from 'react';\n\nimport { AnimatePresence, motion } from 'motion/react';\n\nimport { mergeRefs } from '../../utils/refs';\nimport Toast from '../Toast/Toast';\n\nimport styles from './styles.module.scss';\n\nexport interface ToastData {\n  id: string;\n  title: string;\n  message?: string;\n}\n\nexport interface ToastListProps {\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Array of toast data to display */\n  toasts?: ToastData[];\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLElement | null>;\n}\n\nconst DURATION = 8000;\n\nconst ToastList: React.FC<ToastListProps> = props => {\n  const { testId, toasts = [], ref } = props;\n  const internalRef = React.useRef<HTMLElement | null>(null);\n  const [visibleToasts, setVisibleToasts] = React.useState<ToastData[]>([]);\n  const [removedToastIds, setRemovedToastIds] = React.useState<Set<string>>(new Set());\n  const timeoutRefs = React.useRef<Map<string, NodeJS.Timeout>>(new Map());\n\n  React.useEffect(() => {\n    const newToasts = toasts.filter(toast => !visibleToasts.some(vt => vt.id === toast.id) && !removedToastIds.has(toast.id));\n    if (newToasts.length > 0) {\n      setVisibleToasts(prev => [...prev, ...newToasts]);\n    }\n  }, [toasts, visibleToasts, removedToastIds]);\n\n  // Handles removal of a toast\n  const handleRemoveToast = React.useCallback((id: string): void => {\n    setVisibleToasts(prev => prev.filter(t => t.id !== id));\n    // Add to removed IDs to prevent re-appearance\n    setRemovedToastIds(prev => new Set([...prev, id]));\n\n    // Clear timeout if exists\n    const timeout = timeoutRefs.current.get(id);\n    if (timeout) {\n      clearTimeout(timeout);\n      timeoutRefs.current.delete(id);\n    }\n  }, []);\n\n  // Handle auto-removal of toasts after duration\n  React.useEffect(() => {\n    const timeouts = timeoutRefs.current;\n\n    // Set up timeouts for new visible toasts that don't have timeout yet\n    visibleToasts.forEach(toast => {\n      if (!timeouts.has(toast.id)) {\n        const timeout = setTimeout(() => {\n          handleRemoveToast(toast.id);\n        }, DURATION);\n\n        timeouts.set(toast.id, timeout);\n      }\n    });\n  }, [visibleToasts, handleRemoveToast]);\n\n  // Cleanup timeouts for removed toasts\n  React.useEffect(() => {\n    const timeouts = timeoutRefs.current;\n    const currentToastIds = new Set(visibleToasts.map(t => t.id));\n\n    timeouts.forEach((timeout, id) => {\n      if (!currentToastIds.has(id)) {\n        clearTimeout(timeout);\n        timeouts.delete(id);\n      }\n    });\n  }, [visibleToasts]);\n\n  // Cleanup all timeouts on unmount\n  React.useEffect(() => {\n    return (): void => {\n      timeoutRefs.current.forEach(timeout => clearTimeout(timeout));\n      timeoutRefs.current.clear();\n    };\n  }, []);\n\n  const setRefs = mergeRefs([internalRef, ref]);\n\n  return (\n    <section ref={setRefs} className={styles['toast-list']} data-testid={testId}>\n      <AnimatePresence mode=\"popLayout\">\n        {visibleToasts.map(toast => (\n          <motion.div\n            key={toast.id}\n            layout\n            initial={{ opacity: 0, y: 50 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: -20 }}\n            transition={{\n              layout: { type: 'spring', duration: 0.4, bounce: 0.1 },\n            }}\n          >\n            <Toast\n              testId={`${testId}-${toast.id}`}\n              title={toast.title}\n              message={toast.message}\n              onClose={() => handleRemoveToast(toast.id)}\n            />\n          </motion.div>\n        ))}\n      </AnimatePresence>\n    </section>\n  );\n};\n\nToastList.displayName = 'ToastList';\n\nexport default ToastList;\n","import ToastList from './ToastList';\nexport * from './ToastList';\nexport default ToastList;\n"],"mappings":";;;;;;;AAwBA,IAAM,WAAW;AAEjB,IAAM,aAAsC,UAAS;CACnD,MAAM,EAAE,QAAQ,SAAS,CAAC,GAAG,QAAQ;CACrC,MAAM,cAAc,MAAM,OAA2B,IAAI;CACzD,MAAM,CAAC,eAAe,oBAAoB,MAAM,SAAsB,CAAC,CAAC;CACxE,MAAM,CAAC,iBAAiB,sBAAsB,MAAM,yBAAsB,IAAI,IAAI,CAAC;CACnF,MAAM,cAAc,MAAM,uBAAoC,IAAI,IAAI,CAAC;CAEvE,MAAM,gBAAgB;EACpB,MAAM,YAAY,OAAO,QAAO,UAAS,CAAC,cAAc,MAAK,OAAM,GAAG,OAAO,MAAM,EAAE,KAAK,CAAC,gBAAgB,IAAI,MAAM,EAAE,CAAC;EACxH,IAAI,UAAU,SAAS,GACrB,kBAAiB,SAAQ,CAAC,GAAG,MAAM,GAAG,SAAS,CAAC;CAEpD,GAAG;EAAC;EAAQ;EAAe;CAAe,CAAC;CAG3C,MAAM,oBAAoB,MAAM,aAAa,OAAqB;EAChE,kBAAiB,SAAQ,KAAK,QAAO,MAAK,EAAE,OAAO,EAAE,CAAC;EAEtD,oBAAmB,yBAAQ,IAAI,IAAI,CAAC,GAAG,MAAM,EAAE,CAAC,CAAC;EAGjD,MAAM,UAAU,YAAY,QAAQ,IAAI,EAAE;EAC1C,IAAI,SAAS;GACX,aAAa,OAAO;GACpB,YAAY,QAAQ,OAAO,EAAE;EAC/B;CACF,GAAG,CAAC,CAAC;CAGL,MAAM,gBAAgB;EACpB,MAAM,WAAW,YAAY;EAG7B,cAAc,SAAQ,UAAS;GAC7B,IAAI,CAAC,SAAS,IAAI,MAAM,EAAE,GAAG;IAC3B,MAAM,UAAU,iBAAiB;KAC/B,kBAAkB,MAAM,EAAE;IAC5B,GAAG,QAAQ;IAEX,SAAS,IAAI,MAAM,IAAI,OAAO;GAChC;EACF,CAAC;CACH,GAAG,CAAC,eAAe,iBAAiB,CAAC;CAGrC,MAAM,gBAAgB;EACpB,MAAM,WAAW,YAAY;EAC7B,MAAM,kBAAkB,IAAI,IAAI,cAAc,KAAI,MAAK,EAAE,EAAE,CAAC;EAE5D,SAAS,SAAS,SAAS,OAAO;GAChC,IAAI,CAAC,gBAAgB,IAAI,EAAE,GAAG;IAC5B,aAAa,OAAO;IACpB,SAAS,OAAO,EAAE;GACpB;EACF,CAAC;CACH,GAAG,CAAC,aAAa,CAAC;CAGlB,MAAM,gBAAgB;EACpB,aAAmB;GACjB,YAAY,QAAQ,SAAQ,YAAW,aAAa,OAAO,CAAC;GAC5D,YAAY,QAAQ,MAAM;EAC5B;CACF,GAAG,CAAC,CAAC;CAIL,OACE,oBAAC,WAAD;EAAS,KAHK,UAAU,CAAC,aAAa,GAAG,CAG3B;EAAS,WAAW,OAAO;EAAe,eAAa;YACnE,oBAAC,iBAAD;GAAiB,MAAK;aACnB,cAAc,KAAI,UACjB,oBAAC,OAAO,KAAR;IAEE,QAAA;IACA,SAAS;KAAE,SAAS;KAAG,GAAG;IAAG;IAC7B,SAAS;KAAE,SAAS;KAAG,GAAG;IAAE;IAC5B,MAAM;KAAE,SAAS;KAAG,GAAG;IAAI;IAC3B,YAAY,EACV,QAAQ;KAAE,MAAM;KAAU,UAAU;KAAK,QAAQ;IAAI,EACvD;cAEA,oBAAC,OAAD;KACE,QAAQ,GAAG,OAAO,GAAG,MAAM;KAC3B,OAAO,MAAM;KACb,SAAS,MAAM;KACf,eAAe,kBAAkB,MAAM,EAAE;IAC1C,CAAA;GACS,GAfL,MAAM,EAeD,CACb;EACc,CAAA;CACV,CAAA;AAEb;AAEA,UAAU,cAAc;;;ACtHxB,IAAA,oBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/ToastList/ToastList.tsx","../../../src/components/ToastList/index.ts"],"sourcesContent":["import React from 'react';\n\nimport { AnimatePresence, motion } from 'motion/react';\n\nimport { mergeRefs } from '../../utils/refs';\nimport Toast from '../Toast/Toast';\n\nimport styles from './styles.module.scss';\n\nexport interface ToastData {\n  id: string;\n  title: string;\n  message?: string;\n}\n\nexport interface ToastListProps {\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Array of toast data to display */\n  toasts?: ToastData[];\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLElement | null>;\n}\n\nconst DURATION = 8000;\n\nconst ToastList: React.FC<ToastListProps> = props => {\n  const { testId, toasts = [], ref } = props;\n  const internalRef = React.useRef<HTMLElement | null>(null);\n  const [visibleToasts, setVisibleToasts] = React.useState<ToastData[]>([]);\n  const [removedToastIds, setRemovedToastIds] = React.useState<Set<string>>(new Set());\n  const timeoutRefs = React.useRef<Map<string, NodeJS.Timeout>>(new Map());\n\n  React.useEffect(() => {\n    const newToasts = toasts.filter(toast => !visibleToasts.some(vt => vt.id === toast.id) && !removedToastIds.has(toast.id));\n    if (newToasts.length > 0) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setVisibleToasts(prev => [...prev, ...newToasts]);\n    }\n  }, [toasts, visibleToasts, removedToastIds]);\n\n  // Handles removal of a toast\n  const handleRemoveToast = React.useCallback((id: string): void => {\n    setVisibleToasts(prev => prev.filter(t => t.id !== id));\n    // Add to removed IDs to prevent re-appearance\n    setRemovedToastIds(prev => new Set([...prev, id]));\n\n    // Clear timeout if exists\n    const timeout = timeoutRefs.current.get(id);\n    if (timeout) {\n      clearTimeout(timeout);\n      timeoutRefs.current.delete(id);\n    }\n  }, []);\n\n  // Handle auto-removal of toasts after duration\n  React.useEffect(() => {\n    const timeouts = timeoutRefs.current;\n\n    // Set up timeouts for new visible toasts that don't have timeout yet\n    visibleToasts.forEach(toast => {\n      if (!timeouts.has(toast.id)) {\n        const timeout = setTimeout(() => {\n          handleRemoveToast(toast.id);\n        }, DURATION);\n\n        timeouts.set(toast.id, timeout);\n      }\n    });\n  }, [visibleToasts, handleRemoveToast]);\n\n  // Cleanup timeouts for removed toasts\n  React.useEffect(() => {\n    const timeouts = timeoutRefs.current;\n    const currentToastIds = new Set(visibleToasts.map(t => t.id));\n\n    timeouts.forEach((timeout, id) => {\n      if (!currentToastIds.has(id)) {\n        clearTimeout(timeout);\n        timeouts.delete(id);\n      }\n    });\n  }, [visibleToasts]);\n\n  // Cleanup all timeouts on unmount\n  React.useEffect(() => {\n    return (): void => {\n      timeoutRefs.current.forEach(timeout => clearTimeout(timeout));\n      timeoutRefs.current.clear();\n    };\n  }, []);\n\n  const setRefs = mergeRefs([internalRef, ref]);\n\n  return (\n    <section ref={setRefs} className={styles['toast-list']} data-testid={testId}>\n      <AnimatePresence mode=\"popLayout\">\n        {visibleToasts.map(toast => (\n          <motion.div\n            key={toast.id}\n            layout\n            initial={{ opacity: 0, y: 50 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: -20 }}\n            transition={{\n              layout: { type: 'spring', duration: 0.4, bounce: 0.1 },\n            }}\n          >\n            <Toast\n              testId={`${testId}-${toast.id}`}\n              title={toast.title}\n              message={toast.message}\n              onClose={() => handleRemoveToast(toast.id)}\n            />\n          </motion.div>\n        ))}\n      </AnimatePresence>\n    </section>\n  );\n};\n\nToastList.displayName = 'ToastList';\n\nexport default ToastList;\n","import ToastList from './ToastList';\nexport * from './ToastList';\nexport default ToastList;\n"],"mappings":";;;;;;;AAwBA,IAAM,WAAW;AAEjB,IAAM,aAAsC,UAAS;CACnD,MAAM,EAAE,QAAQ,SAAS,CAAC,GAAG,QAAQ;CACrC,MAAM,cAAc,MAAM,OAA2B,IAAI;CACzD,MAAM,CAAC,eAAe,oBAAoB,MAAM,SAAsB,CAAC,CAAC;CACxE,MAAM,CAAC,iBAAiB,sBAAsB,MAAM,yBAAsB,IAAI,IAAI,CAAC;CACnF,MAAM,cAAc,MAAM,uBAAoC,IAAI,IAAI,CAAC;CAEvE,MAAM,gBAAgB;EACpB,MAAM,YAAY,OAAO,QAAO,UAAS,CAAC,cAAc,MAAK,OAAM,GAAG,OAAO,MAAM,EAAE,KAAK,CAAC,gBAAgB,IAAI,MAAM,EAAE,CAAC;EACxH,IAAI,UAAU,SAAS,GAErB,kBAAiB,SAAQ,CAAC,GAAG,MAAM,GAAG,SAAS,CAAC;CAEpD,GAAG;EAAC;EAAQ;EAAe;CAAe,CAAC;CAG3C,MAAM,oBAAoB,MAAM,aAAa,OAAqB;EAChE,kBAAiB,SAAQ,KAAK,QAAO,MAAK,EAAE,OAAO,EAAE,CAAC;EAEtD,oBAAmB,yBAAQ,IAAI,IAAI,CAAC,GAAG,MAAM,EAAE,CAAC,CAAC;EAGjD,MAAM,UAAU,YAAY,QAAQ,IAAI,EAAE;EAC1C,IAAI,SAAS;GACX,aAAa,OAAO;GACpB,YAAY,QAAQ,OAAO,EAAE;EAC/B;CACF,GAAG,CAAC,CAAC;CAGL,MAAM,gBAAgB;EACpB,MAAM,WAAW,YAAY;EAG7B,cAAc,SAAQ,UAAS;GAC7B,IAAI,CAAC,SAAS,IAAI,MAAM,EAAE,GAAG;IAC3B,MAAM,UAAU,iBAAiB;KAC/B,kBAAkB,MAAM,EAAE;IAC5B,GAAG,QAAQ;IAEX,SAAS,IAAI,MAAM,IAAI,OAAO;GAChC;EACF,CAAC;CACH,GAAG,CAAC,eAAe,iBAAiB,CAAC;CAGrC,MAAM,gBAAgB;EACpB,MAAM,WAAW,YAAY;EAC7B,MAAM,kBAAkB,IAAI,IAAI,cAAc,KAAI,MAAK,EAAE,EAAE,CAAC;EAE5D,SAAS,SAAS,SAAS,OAAO;GAChC,IAAI,CAAC,gBAAgB,IAAI,EAAE,GAAG;IAC5B,aAAa,OAAO;IACpB,SAAS,OAAO,EAAE;GACpB;EACF,CAAC;CACH,GAAG,CAAC,aAAa,CAAC;CAGlB,MAAM,gBAAgB;EACpB,aAAmB;GACjB,YAAY,QAAQ,SAAQ,YAAW,aAAa,OAAO,CAAC;GAC5D,YAAY,QAAQ,MAAM;EAC5B;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,UAAU,UAAU,CAAC,aAAa,GAAG,CAAC;CAE5C,OACE,oBAAC,WAAD;EAAS,KAAK;EAAS,WAAW,OAAO;EAAe,eAAa;EACnE,UAAA,oBAAC,iBAAD;GAAiB,MAAK;GACnB,UAAA,cAAc,KAAI,UACjB,oBAAC,OAAO,KAAR;IAEE,QAAA;IACA,SAAS;KAAE,SAAS;KAAG,GAAG;IAAG;IAC7B,SAAS;KAAE,SAAS;KAAG,GAAG;IAAE;IAC5B,MAAM;KAAE,SAAS;KAAG,GAAG;IAAI;IAC3B,YAAY,EACV,QAAQ;KAAE,MAAM;KAAU,UAAU;KAAK,QAAQ;IAAI,EACvD;IAEA,UAAA,oBAAC,OAAD;KACE,QAAQ,GAAG,OAAO,GAAG,MAAM;KAC3B,OAAO,MAAM;KACb,SAAS,MAAM;KACf,eAAe,kBAAkB,MAAM,EAAE;IAC1C,CAAA;GACS,GAfL,MAAM,EAeD,CACb;EACc,CAAA;CACV,CAAA;AAEb;AAEA,UAAU,cAAc;;;ACvHxB,IAAA,oBAAe"}

package/lib/components/Toggle/index.js

@@ -20,6 +20,7 @@ var ToggleOnColor = /* @__PURE__ */ function(ToggleOnColor) {
 //#endregion
 //#region src/components/Toggle/Toggle.tsx
 var Toggle = ({ checked = false, disabled, label, onChange, onColor = ToggleOnColor.onwhite, statusText, subLabel, togglePosition = TogglePosition.left, testId }) => {
+	const [checkedControlledState, setCheckedControlledState] = useState(checked);
 	const [checkedState, setCheckedState] = useState(checked);
 	const [showToggleAnimation, setShowToggleAnimation] = useState(false);
 	const [scope, animate] = useAnimate();
@@ -35,6 +36,10 @@ var Toggle = ({ checked = false, disabled, label, onChange, onColor = ToggleOnCo
 	const isOnWhite = onColor === ToggleOnColor.onwhite;
 	const animationDuration = disabled ? 0 : .2;
 	const dotBackgroundColor = disabled ? "var(--color-disabled-graphics)" : checkedState ? "var(--color-action-graphics-ondark)" : "var(--core-color-neutral-700)";
+	if (checked !== checkedControlledState && typeof checked !== "undefined") {
+		setCheckedControlledState(checked);
+		if (typeof checked !== "undefined") setCheckedState(checked);
+	}
 	const getBackgroundColor = () => {
 		if (disabled) return "transparent";
 		else if (checkedState && isActive) return "var(--core-color-blueberry-800)";
@@ -50,9 +55,6 @@ var Toggle = ({ checked = false, disabled, label, onChange, onColor = ToggleOnCo
 			return () => clearTimeout(timer);
 		}
 	}, [showToggleAnimation]);
-	useEffect(() => {
-		setCheckedState(checked);
-	}, [checked]);
 	useEffect(() => {
 		if (!toggleRef.current || !toggleDotRef.current) return;
 		animate(toggleRef.current, { background: getBackgroundColor() }, {
@@ -145,8 +147,9 @@ var Toggle = ({ checked = false, disabled, label, onChange, onColor = ToggleOnCo
 				id: labelId,
 				className: styles["toggle-container__label"],
 				children: label.map((labelText) => {
+					const labelClassNames = classNames({ [styles["toggle-container__label__text--subdued"]]: labelText.type === "subdued" });
 					return /* @__PURE__ */ jsx("span", {
-						className: classNames({ [styles["toggle-container__label__text--subdued"]]: labelText.type === "subdued" }),
+						className: labelClassNames,
 						children: labelText.text
 					}, labelId + labelText.text);
 				})

package/lib/components/Toggle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Toggle/constants.ts","../../../src/components/Toggle/Toggle.tsx","../../../src/components/Toggle/index.ts"],"sourcesContent":["export enum TogglePosition {\n  left = 'left',\n  right = 'right',\n}\n\nexport enum ToggleOnColor {\n  onwhite = 'onwhite',\n  onneutral = 'onneutral',\n  onblueberry = 'onblueberry',\n}\n","import React, { useState, useEffect, useId } from 'react';\n\nimport classNames from 'classnames';\nimport { useAnimate } from 'motion/react';\n\nimport { ToggleOnColor, TogglePosition } from './constants';\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\n\nimport styles from './styles.module.scss';\n\nimport '../../scss/supernova/styles/colors.css';\n\nexport type LabelText = {\n  text: string;\n  type?: 'subdued' | 'normal';\n};\n\nexport type StatusTextType = {\n  checked: string;\n  unchecked: string;\n};\n\nexport interface ToggleProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'disabled'> {\n  /**  Determines if the Toggle is checked */\n  checked?: boolean;\n  /** Sets the label of the Toggle */\n  label: LabelText[];\n  /** Defines the color of the toggle */\n  onColor?: keyof typeof ToggleOnColor;\n  /** A text that is shown under the Toggle switch */\n  statusText?: StatusTextType;\n  /** Sets the sublabel of the Toggle */\n  subLabel?: string;\n  /** Sets the position of the toggle relative to the label */\n  togglePosition?: keyof typeof TogglePosition;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Toggle: React.FC<ToggleProps> = ({\n  checked = false,\n  disabled,\n  label,\n  onChange,\n  onColor = ToggleOnColor.onwhite,\n  statusText,\n  subLabel,\n  togglePosition = TogglePosition.left,\n  testId,\n}: ToggleProps) => {\n  const [checkedState, setCheckedState] = useState(checked);\n  const [showToggleAnimation, setShowToggleAnimation] = useState(false);\n  const [scope, animate] = useAnimate();\n  const baseId = useId();\n  const toggleId = 'toggle-' + baseId;\n  const inputId = 'input-' + baseId;\n  const labelId = 'label-' + baseId;\n  const subLabelId = 'sublabel-' + baseId;\n  const toggleRef = React.useRef<HTMLSpanElement>(null);\n  const toggleDotRef = React.useRef<HTMLSpanElement>(null);\n  const { refObject, isHovered, isActive } = usePseudoClasses<HTMLLabelElement>(scope);\n  const showHoveredStyling = isHovered && !showToggleAnimation;\n  const isOnWhite = onColor === ToggleOnColor.onwhite;\n  const animationDuration = disabled ? 0 : 0.2;\n  const dotBackgroundColor = disabled\n    ? 'var(--color-disabled-graphics)'\n    : checkedState\n      ? 'var(--color-action-graphics-ondark)'\n      : 'var(--core-color-neutral-700)';\n\n  const getBackgroundColor = (): string => {\n    if (disabled) {\n      return 'transparent';\n    } else if (checkedState && isActive) {\n      return 'var(--core-color-blueberry-800)';\n    } else if (checkedState) {\n      return showHoveredStyling ? 'var(--color-action-graphics-onlight-hover)' : 'var(--color-action-graphics-onlight)';\n    } else if (isOnWhite && isActive) {\n      return 'var(--core-color-neutral-400)';\n    } else if (isOnWhite) {\n      return showHoveredStyling ? 'var(--core-color-neutral-200)' : 'var(--core-color-neutral-50)';\n    } else if (isActive) {\n      return 'var(--core-color-neutral-200)';\n    } else {\n      return showHoveredStyling ? 'var(--core-color-neutral-50)' : 'var(--core-color-white)';\n    }\n  };\n\n  useEffect(() => {\n    if (showToggleAnimation) {\n      const timer = setTimeout(() => setShowToggleAnimation(false), 300);\n      return (): void => clearTimeout(timer);\n    }\n  }, [showToggleAnimation]);\n\n  useEffect(() => {\n    setCheckedState(checked);\n  }, [checked]);\n\n  useEffect(() => {\n    if (!toggleRef.current || !toggleDotRef.current) return;\n    animate(toggleRef.current, { background: getBackgroundColor() }, { duration: animationDuration, ease: 'easeInOut' });\n    animate(\n      toggleDotRef.current,\n      {\n        background: dotBackgroundColor,\n      },\n      { duration: animationDuration, ease: 'easeInOut' }\n    );\n    animate(toggleDotRef.current, { x: checkedState ? 16 : 0 }, { duration: animationDuration, ease: 'easeInOut' });\n    animate('svg', { opacity: checkedState ? 1 : 0 }, { duration: animationDuration, ease: 'easeInOut' });\n  }, [checkedState, showHoveredStyling, isActive, disabled]);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n    setCheckedState(event.target.checked);\n    setShowToggleAnimation(true);\n    onChange?.(event);\n  };\n\n  const toggleContainerClassNames = classNames(styles['toggle-container'], {\n    [styles['toggle-container--position-right']]: togglePosition === TogglePosition.right,\n    [styles['toggle-container--with-status']]: statusText !== undefined && statusText !== null,\n    [styles['toggle-container--disabled']]: disabled,\n  });\n\n  const subLabelClassNames = classNames(styles['toggle-container__sublabel']);\n\n  const statusTextClassNames = classNames(styles['toggle-container__status'], {\n    [styles['toggle-container__status--checked']]: checkedState,\n  });\n\n  const toggleClassNames = classNames(styles['toggle-container__toggle'], {\n    [styles['toggle-container__toggle--ignore-hover']]: showToggleAnimation,\n    [styles['toggle-container__toggle--on-white']]: onColor === ToggleOnColor.onwhite,\n  });\n\n  const toggleDotClassNames = classNames(styles['toggle-container__toggle__dot'], {\n    [styles['toggle-container__toggle__dot--ignore-hover']]: showToggleAnimation,\n  });\n\n  const renderToggle = (): React.ReactElement => (\n    <div className={styles['toggle-container__outer-toggle']}>\n      <label ref={refObject} className={styles['toggle-container__toggle-group']}>\n        <input\n          disabled={disabled}\n          id={inputId}\n          type=\"checkbox\"\n          checked={checkedState}\n          onChange={handleChange}\n          className={styles['toggle-container__input']}\n          aria-label={label.map(l => l.text).join(' ')}\n          aria-describedby={[subLabel ? subLabelId : null, statusText ? toggleId + '-status' : null].filter(Boolean).join(' ') || undefined}\n          role=\"switch\"\n        />\n        <span id={toggleId} ref={toggleRef} className={toggleClassNames} aria-hidden=\"true\">\n          <span ref={toggleDotRef} className={toggleDotClassNames} aria-hidden=\"true\">\n            <svg\n              width=\"12\"\n              height=\"12\"\n              viewBox=\"0 0 12 12\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className={styles['toggle-container__toggle__dot__icon']}\n            >\n              <path d=\"M11 2.65247L4.69877 9.34741L1 5.41836\" strokeWidth=\"2.2\" />\n            </svg>\n          </span>\n        </span>\n      </label>\n      {statusText && (\n        <span className={statusTextClassNames} id={toggleId + '-status'}>\n          {checkedState ? statusText.checked : statusText.unchecked}\n        </span>\n      )}\n    </div>\n  );\n\n  const renderLabelText = (): React.ReactElement => {\n    return (\n      <div className={styles['toggle-container__outer-label']}>\n        <span id={labelId} className={styles['toggle-container__label']}>\n          {label.map(labelText => {\n            const labelClassNames = classNames({\n              [styles['toggle-container__label__text--subdued']]: labelText.type === 'subdued',\n            });\n\n            return (\n              <span key={labelId + labelText.text} className={labelClassNames}>\n                {labelText.text}\n              </span>\n            );\n          })}\n        </span>\n        {subLabel && (\n          <div id={subLabelId} className={subLabelClassNames}>\n            {subLabel}\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div className={toggleContainerClassNames} data-testid={testId} data-analyticsid={AnalyticsId.Toggle}>\n      {togglePosition === TogglePosition.left && (\n        <>\n          {renderToggle()}\n          {renderLabelText()}\n        </>\n      )}\n      {togglePosition === TogglePosition.right && (\n        <>\n          {renderLabelText()}\n          {renderToggle()}\n        </>\n      )}\n    </div>\n  );\n};\n\nexport default Toggle;\n","import Toggle from './Toggle';\nexport { TogglePosition, ToggleOnColor } from './constants';\nexport * from './Toggle';\nexport default Toggle;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Toggle/constants.ts","../../../src/components/Toggle/Toggle.tsx","../../../src/components/Toggle/index.ts"],"sourcesContent":["export enum TogglePosition {\n  left = 'left',\n  right = 'right',\n}\n\nexport enum ToggleOnColor {\n  onwhite = 'onwhite',\n  onneutral = 'onneutral',\n  onblueberry = 'onblueberry',\n}\n","import React, { useState, useEffect, useId } from 'react';\n\nimport classNames from 'classnames';\nimport { useAnimate } from 'motion/react';\n\nimport { ToggleOnColor, TogglePosition } from './constants';\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\n\nimport styles from './styles.module.scss';\n\nimport '../../scss/supernova/styles/colors.css';\n\nexport type LabelText = {\n  text: string;\n  type?: 'subdued' | 'normal';\n};\n\nexport type StatusTextType = {\n  checked: string;\n  unchecked: string;\n};\n\nexport interface ToggleProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'disabled'> {\n  /**  Determines if the Toggle is checked */\n  checked?: boolean;\n  /** Sets the label of the Toggle */\n  label: LabelText[];\n  /** Defines the color of the toggle */\n  onColor?: keyof typeof ToggleOnColor;\n  /** A text that is shown under the Toggle switch */\n  statusText?: StatusTextType;\n  /** Sets the sublabel of the Toggle */\n  subLabel?: string;\n  /** Sets the position of the toggle relative to the label */\n  togglePosition?: keyof typeof TogglePosition;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Toggle: React.FC<ToggleProps> = ({\n  checked = false,\n  disabled,\n  label,\n  onChange,\n  onColor = ToggleOnColor.onwhite,\n  statusText,\n  subLabel,\n  togglePosition = TogglePosition.left,\n  testId,\n}: ToggleProps) => {\n  const [checkedControlledState, setCheckedControlledState] = useState(checked);\n  const [checkedState, setCheckedState] = useState(checked);\n  const [showToggleAnimation, setShowToggleAnimation] = useState(false);\n  const [scope, animate] = useAnimate();\n  const baseId = useId();\n  const toggleId = 'toggle-' + baseId;\n  const inputId = 'input-' + baseId;\n  const labelId = 'label-' + baseId;\n  const subLabelId = 'sublabel-' + baseId;\n  const toggleRef = React.useRef<HTMLSpanElement>(null);\n  const toggleDotRef = React.useRef<HTMLSpanElement>(null);\n  const { refObject, isHovered, isActive } = usePseudoClasses<HTMLLabelElement>(scope);\n  const showHoveredStyling = isHovered && !showToggleAnimation;\n  const isOnWhite = onColor === ToggleOnColor.onwhite;\n  const animationDuration = disabled ? 0 : 0.2;\n  const dotBackgroundColor = disabled\n    ? 'var(--color-disabled-graphics)'\n    : checkedState\n      ? 'var(--color-action-graphics-ondark)'\n      : 'var(--core-color-neutral-700)';\n\n  if (checked !== checkedControlledState && typeof checked !== 'undefined') {\n    setCheckedControlledState(checked);\n\n    if (typeof checked !== 'undefined') {\n      setCheckedState(checked);\n    }\n  }\n\n  const getBackgroundColor = (): string => {\n    if (disabled) {\n      return 'transparent';\n    } else if (checkedState && isActive) {\n      return 'var(--core-color-blueberry-800)';\n    } else if (checkedState) {\n      return showHoveredStyling ? 'var(--color-action-graphics-onlight-hover)' : 'var(--color-action-graphics-onlight)';\n    } else if (isOnWhite && isActive) {\n      return 'var(--core-color-neutral-400)';\n    } else if (isOnWhite) {\n      return showHoveredStyling ? 'var(--core-color-neutral-200)' : 'var(--core-color-neutral-50)';\n    } else if (isActive) {\n      return 'var(--core-color-neutral-200)';\n    } else {\n      return showHoveredStyling ? 'var(--core-color-neutral-50)' : 'var(--core-color-white)';\n    }\n  };\n\n  useEffect(() => {\n    if (showToggleAnimation) {\n      const timer = setTimeout(() => setShowToggleAnimation(false), 300);\n      return (): void => clearTimeout(timer);\n    }\n  }, [showToggleAnimation]);\n\n  useEffect(() => {\n    if (!toggleRef.current || !toggleDotRef.current) return;\n    animate(toggleRef.current, { background: getBackgroundColor() }, { duration: animationDuration, ease: 'easeInOut' });\n    animate(\n      toggleDotRef.current,\n      {\n        background: dotBackgroundColor,\n      },\n      { duration: animationDuration, ease: 'easeInOut' }\n    );\n    animate(toggleDotRef.current, { x: checkedState ? 16 : 0 }, { duration: animationDuration, ease: 'easeInOut' });\n    animate('svg', { opacity: checkedState ? 1 : 0 }, { duration: animationDuration, ease: 'easeInOut' });\n  }, [checkedState, showHoveredStyling, isActive, disabled]);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n    setCheckedState(event.target.checked);\n    setShowToggleAnimation(true);\n    onChange?.(event);\n  };\n\n  const toggleContainerClassNames = classNames(styles['toggle-container'], {\n    [styles['toggle-container--position-right']]: togglePosition === TogglePosition.right,\n    [styles['toggle-container--with-status']]: statusText !== undefined && statusText !== null,\n    [styles['toggle-container--disabled']]: disabled,\n  });\n\n  const subLabelClassNames = classNames(styles['toggle-container__sublabel']);\n\n  const statusTextClassNames = classNames(styles['toggle-container__status'], {\n    [styles['toggle-container__status--checked']]: checkedState,\n  });\n\n  const toggleClassNames = classNames(styles['toggle-container__toggle'], {\n    [styles['toggle-container__toggle--ignore-hover']]: showToggleAnimation,\n    [styles['toggle-container__toggle--on-white']]: onColor === ToggleOnColor.onwhite,\n  });\n\n  const toggleDotClassNames = classNames(styles['toggle-container__toggle__dot'], {\n    [styles['toggle-container__toggle__dot--ignore-hover']]: showToggleAnimation,\n  });\n\n  const renderToggle = (): React.ReactElement => (\n    <div className={styles['toggle-container__outer-toggle']}>\n      <label ref={refObject} className={styles['toggle-container__toggle-group']}>\n        <input\n          disabled={disabled}\n          id={inputId}\n          type=\"checkbox\"\n          checked={checkedState}\n          onChange={handleChange}\n          className={styles['toggle-container__input']}\n          aria-label={label.map(l => l.text).join(' ')}\n          aria-describedby={[subLabel ? subLabelId : null, statusText ? toggleId + '-status' : null].filter(Boolean).join(' ') || undefined}\n          role=\"switch\"\n        />\n        <span id={toggleId} ref={toggleRef} className={toggleClassNames} aria-hidden=\"true\">\n          <span ref={toggleDotRef} className={toggleDotClassNames} aria-hidden=\"true\">\n            <svg\n              width=\"12\"\n              height=\"12\"\n              viewBox=\"0 0 12 12\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className={styles['toggle-container__toggle__dot__icon']}\n            >\n              <path d=\"M11 2.65247L4.69877 9.34741L1 5.41836\" strokeWidth=\"2.2\" />\n            </svg>\n          </span>\n        </span>\n      </label>\n      {statusText && (\n        <span className={statusTextClassNames} id={toggleId + '-status'}>\n          {checkedState ? statusText.checked : statusText.unchecked}\n        </span>\n      )}\n    </div>\n  );\n\n  const renderLabelText = (): React.ReactElement => {\n    return (\n      <div className={styles['toggle-container__outer-label']}>\n        <span id={labelId} className={styles['toggle-container__label']}>\n          {label.map(labelText => {\n            const labelClassNames = classNames({\n              [styles['toggle-container__label__text--subdued']]: labelText.type === 'subdued',\n            });\n\n            return (\n              <span key={labelId + labelText.text} className={labelClassNames}>\n                {labelText.text}\n              </span>\n            );\n          })}\n        </span>\n        {subLabel && (\n          <div id={subLabelId} className={subLabelClassNames}>\n            {subLabel}\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div className={toggleContainerClassNames} data-testid={testId} data-analyticsid={AnalyticsId.Toggle}>\n      {togglePosition === TogglePosition.left && (\n        <>\n          {renderToggle()}\n          {renderLabelText()}\n        </>\n      )}\n      {togglePosition === TogglePosition.right && (\n        <>\n          {renderLabelText()}\n          {renderToggle()}\n        </>\n      )}\n    </div>\n  );\n};\n\nexport default Toggle;\n","import Toggle from './Toggle';\nexport { TogglePosition, ToggleOnColor } from './constants';\nexport * from './Toggle';\nexport default Toggle;\n"],"mappings":"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"}

package/lib/components/Validation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Validation/ErrorListItem.tsx","../../../src/components/Validation/ErrorList.tsx","../../../src/components/Validation/ValidationSummary.tsx","../../../src/components/Validation/Validation.tsx","../../../src/components/Validation/index.ts"],"sourcesContent":["import type { ErrorDetails, FocusableElement } from './types';\nimport type { AnchorLinkOnClickEvent } from '../AnchorLink';\n\nimport AnchorLink from '../AnchorLink';\n\ninterface ErrorElementProps {\n  name: string;\n  error: ErrorDetails;\n}\n\nconst ErrorListItem: React.FC<ErrorElementProps> = props => {\n  const handleClick = (event?: AnchorLinkOnClickEvent, element?: FocusableElement): void => {\n    event?.preventDefault();\n    if (element?.focus) element?.focus();\n  };\n\n  if (props.error.ref) {\n    return (\n      <AnchorLink href={`#${props.name}`} onClick={(e): void => handleClick(e, props.error.ref)}>\n        {props.error.message}\n      </AnchorLink>\n    );\n  }\n\n  return <>{props.error.message}</>;\n};\n\nexport default ErrorListItem;\n","import type { ValidationErrors } from './types';\n\nimport ErrorListItem from './ErrorListItem';\nimport List from '../List';\n\ninterface ErrorListProps {\n  errors: ValidationErrors;\n}\n\nconst ErrorList: React.FC<ErrorListProps> = props => (\n  <List>\n    {Object.entries(props.errors).map(([name, error]) => (\n      <List.Item key={name}>\n        <ErrorListItem name={name} error={error} />\n      </List.Item>\n    ))}\n  </List>\n);\n\nexport default ErrorList;\n","import { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ValidationErrors } from './types';\nimport type { TitleTags } from '../Title';\n\nimport ErrorList from './ErrorList';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationSummaryProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Error list */\n  errors?: ValidationErrors;\n  /** Markup props for error summary title. Default: h2 */\n  errorTitleHtmlMarkup?: TitleTags;\n  /** Will be shown last */\n  children?: React.ReactNode;\n  /** Hides the list visually - summary is still announced by screen readers */\n  visuallyHidden?: boolean;\n}\n\nconst ValidationSummary: React.FC<ValidationSummaryProps> = props => {\n  const { errorTitleHtmlMarkup = 'h2' } = props;\n  const titleId = useId();\n\n  const hasErrors = !!props.errors && Object.entries(props.errors).length > 0;\n  const visuallyHidden = props.visuallyHidden;\n\n  const summaryClasses = classNames(styles['validation__summary'], {\n    [styles['validation__summary--visible']]: hasErrors && !visuallyHidden,\n    [styles['validation__summary--sr-only']]: visuallyHidden,\n  });\n\n  return (\n    <div\n      role={'status'}\n      aria-atomic={'true'}\n      aria-live={'polite'}\n      aria-relevant={'all'}\n      aria-labelledby={hasErrors && props.errorTitle ? titleId : undefined}\n      className={summaryClasses}\n    >\n      {hasErrors && (\n        <>\n          {props.errorTitle && (\n            <Title appearance=\"title4\" id={titleId} htmlMarkup={errorTitleHtmlMarkup} margin={{ marginTop: 0, marginBottom: 1 }}>\n              {props.errorTitle}\n            </Title>\n          )}\n          <ErrorList errors={props.errors!} />\n        </>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ValidationSummary;\n","import React from 'react';\n\nimport type { ValidationErrors } from './types';\nimport type { FormSize } from '../../constants';\nimport type { CheckboxProps } from '../Checkbox';\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport type { FormGroupProps } from '../FormGroup/FormGroup';\nimport type { InputProps } from '../Input';\nimport type { RadioButtonProps } from '../RadioButton';\nimport type { SelectProps } from '../Select';\nimport type { SliderProps } from '../Slider';\nimport type { TextareaProps } from '../Textarea';\n\nimport ValidationSummary from './ValidationSummary';\nimport { AnalyticsId } from '../../constants';\nimport { isComponent, isComponentWithDisplayName } from '../../utils/component';\nimport Checkbox from '../Checkbox';\nimport FormGroup from '../FormGroup/FormGroup';\nimport Input from '../Input';\nimport RadioButton from '../RadioButton';\nimport Select from '../Select';\nimport Slider from '../Slider';\nimport Textarea from '../Textarea';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Validation errors. If errors include references to HTML elements, the errors will be rendered as links with an onClick handler to focus the element. */\n  errors?: ValidationErrors;\n  /** Items in the Validation compontent */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Hides the ValidationSummary list visually - summary is still announced by screen readers */\n  visuallyHiddenSummary?: boolean;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\n\nexport const Validation: React.FC<ValidationProps> = (props: ValidationProps) => {\n  const validationErrorClass = styles['validation__error-wrapper'];\n\n  const cloneFormElement = <T extends ErrorWrapperClassNameProps>(child: React.ReactElement<T>): React.ReactElement<T> => {\n    return React.cloneElement(child, {\n      ...child.props,\n      errorWrapperClassName: validationErrorClass,\n    });\n  };\n\n  const renderChild = (child: React.ReactNode): React.ReactNode => {\n    if (\n      isComponent<FormGroupProps>(child, FormGroup) ||\n      isComponent<CheckboxProps>(child, Checkbox) ||\n      isComponent<RadioButtonProps>(child, RadioButton) ||\n      isComponent<TextareaProps>(child, Textarea) ||\n      isComponent<InputProps>(child, Input) ||\n      isComponent<SelectProps>(child, Select) ||\n      isComponent<SliderProps>(child, Slider) ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DateTimePickerWrapper') ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DatePicker') ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DateTime')\n    ) {\n      return cloneFormElement<ErrorWrapperClassNameProps>(child);\n    }\n    if (isComponent<React.FragmentProps>(child, React.Fragment)) {\n      return React.Children.map(child.props.children, (child: React.ReactNode) => {\n        return renderChild(child);\n      });\n    }\n\n    return child;\n  };\n\n  return (\n    <>\n      <div data-testid={props.testId} data-analyticsid={AnalyticsId.Validation} className={props.className} ref={props.ref}>\n        {React.Children.map(props.children, (child: React.ReactNode) => renderChild(child))}\n      </div>\n      <ValidationSummary errorTitle={props.errorTitle} errors={props.errors} visuallyHidden={props.visuallyHiddenSummary} />\n    </>\n  );\n};\n\nValidation.displayName = 'Validation';\n\nexport default Validation;\n","import Validation from './Validation';\nexport * from './Validation';\nexport default Validation;\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAM,iBAA6C,UAAS;CAC1D,MAAM,eAAe,OAAgC,YAAqC;EACxF,OAAO,eAAe;EACtB,IAAI,SAAS,OAAO,SAAS,MAAM;CACrC;CAEA,IAAI,MAAM,MAAM,KACd,OACE,oBAAC,oBAAD;EAAY,MAAM,IAAI,MAAM;EAAQ,UAAU,MAAY,YAAY,GAAG,MAAM,MAAM,GAAG;YACrF,MAAM,MAAM;CACH,CAAA;CAIhB,OAAO,oBAAA,UAAA,EAAA,UAAG,MAAM,MAAM,QAAU,CAAA;AAClC;;;AChBA,IAAM,aAAsC,UAC1C,oBAAC,cAAD,EAAA,UACG,OAAO,QAAQ,MAAM,MAAM,CAAC,CAAC,KAAK,CAAC,MAAM,WACxC,oBAAC,aAAK,MAAN,EAAA,UACE,oBAAC,eAAD;CAAqB;CAAa;AAAQ,CAAA,EACjC,GAFK,IAEL,CACZ,EACG,CAAA;;;ACSR,IAAM,qBAAsD,UAAS;CACnE,MAAM,EAAE,uBAAuB,SAAS;CACxC,MAAM,UAAU,MAAM;CAEtB,MAAM,YAAY,CAAC,CAAC,MAAM,UAAU,OAAO,QAAQ,MAAM,MAAM,CAAC,CAAC,SAAS;CAC1E,MAAM,iBAAiB,MAAM;CAE7B,MAAM,iBAAiB,WAAW,OAAO,wBAAwB;GAC9D,OAAO,kCAAkC,aAAa,CAAC;GACvD,OAAO,kCAAkC;CAC5C,CAAC;CAED,OACE,qBAAC,OAAD;EACE,MAAM;EACN,eAAa;EACb,aAAW;EACX,iBAAe;EACf,mBAAiB,aAAa,MAAM,aAAa,UAAU,KAAA;EAC3D,WAAW;YANb,CAQG,aACC,qBAAA,UAAA,EAAA,UAAA,CACG,MAAM,cACL,oBAAC,eAAD;GAAO,YAAW;GAAS,IAAI;GAAS,YAAY;GAAsB,QAAQ;IAAE,WAAW;IAAG,cAAc;GAAE;aAC/G,MAAM;EACF,CAAA,GAET,oBAAC,WAAD,EAAW,QAAQ,MAAM,OAAU,CAAA,CACnC,EAAA,CAAA,GAEH,MAAM,QACJ;;AAET;;;ACdA,IAAa,cAAyC,UAA2B;CAC/E,MAAM,uBAAuB,OAAO;CAEpC,MAAM,oBAA0D,UAAwD;EACtH,OAAO,MAAM,aAAa,OAAO;GAC/B,GAAG,MAAM;GACT,uBAAuB;EACzB,CAAC;CACH;CAEA,MAAM,eAAe,UAA4C;EAC/D,IACE,YAA4B,OAAO,SAAS,KAC5C,YAA2B,OAAO,gBAAQ,KAC1C,YAA8B,OAAO,mBAAW,KAChD,YAA2B,OAAO,gBAAQ,KAC1C,YAAwB,OAAO,aAAK,KACpC,YAAyB,OAAO,cAAM,KACtC,YAAyB,OAAO,cAAM,KACtC,2BAAuD,OAAO,uBAAuB,KACrF,2BAAuD,OAAO,YAAY,KAC1E,2BAAuD,OAAO,UAAU,GAExE,OAAO,iBAA6C,KAAK;EAE3D,IAAI,YAAiC,OAAO,MAAM,QAAQ,GACxD,OAAO,MAAM,SAAS,IAAI,MAAM,MAAM,WAAW,UAA2B;GAC1E,OAAO,YAAY,KAAK;EAC1B,CAAC;EAGH,OAAO;CACT;CAEA,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;EAAK,eAAa,MAAM;EAAQ,oBAAkB,YAAY;EAAY,WAAW,MAAM;EAAW,KAAK,MAAM;YAC9G,MAAM,SAAS,IAAI,MAAM,WAAW,UAA2B,YAAY,KAAK,CAAC;CAC/E,CAAA,GACL,oBAAC,mBAAD;EAAmB,YAAY,MAAM;EAAY,QAAQ,MAAM;EAAQ,gBAAgB,MAAM;CAAwB,CAAA,CACrH,EAAA,CAAA;AAEN;AAEA,WAAW,cAAc;;;ACvFzB,IAAA,qBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Validation/ErrorListItem.tsx","../../../src/components/Validation/ErrorList.tsx","../../../src/components/Validation/ValidationSummary.tsx","../../../src/components/Validation/Validation.tsx","../../../src/components/Validation/index.ts"],"sourcesContent":["import type { ErrorDetails, FocusableElement } from './types';\nimport type { AnchorLinkOnClickEvent } from '../AnchorLink';\n\nimport AnchorLink from '../AnchorLink';\n\ninterface ErrorElementProps {\n  name: string;\n  error: ErrorDetails;\n}\n\nconst ErrorListItem: React.FC<ErrorElementProps> = props => {\n  const handleClick = (event?: AnchorLinkOnClickEvent, element?: FocusableElement): void => {\n    event?.preventDefault();\n    if (element?.focus) element?.focus();\n  };\n\n  if (props.error.ref) {\n    return (\n      <AnchorLink href={`#${props.name}`} onClick={(e): void => handleClick(e, props.error.ref)}>\n        {props.error.message}\n      </AnchorLink>\n    );\n  }\n\n  return <>{props.error.message}</>;\n};\n\nexport default ErrorListItem;\n","import type { ValidationErrors } from './types';\n\nimport ErrorListItem from './ErrorListItem';\nimport List from '../List';\n\ninterface ErrorListProps {\n  errors: ValidationErrors;\n}\n\nconst ErrorList: React.FC<ErrorListProps> = props => (\n  <List>\n    {Object.entries(props.errors).map(([name, error]) => (\n      <List.Item key={name}>\n        <ErrorListItem name={name} error={error} />\n      </List.Item>\n    ))}\n  </List>\n);\n\nexport default ErrorList;\n","import { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ValidationErrors } from './types';\nimport type { TitleTags } from '../Title';\n\nimport ErrorList from './ErrorList';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationSummaryProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Error list */\n  errors?: ValidationErrors;\n  /** Markup props for error summary title. Default: h2 */\n  errorTitleHtmlMarkup?: TitleTags;\n  /** Will be shown last */\n  children?: React.ReactNode;\n  /** Hides the list visually - summary is still announced by screen readers */\n  visuallyHidden?: boolean;\n}\n\nconst ValidationSummary: React.FC<ValidationSummaryProps> = props => {\n  const { errorTitleHtmlMarkup = 'h2' } = props;\n  const titleId = useId();\n\n  const hasErrors = !!props.errors && Object.entries(props.errors).length > 0;\n  const visuallyHidden = props.visuallyHidden;\n\n  const summaryClasses = classNames(styles['validation__summary'], {\n    [styles['validation__summary--visible']]: hasErrors && !visuallyHidden,\n    [styles['validation__summary--sr-only']]: visuallyHidden,\n  });\n\n  return (\n    <div\n      role={'status'}\n      aria-atomic={'true'}\n      aria-live={'polite'}\n      aria-relevant={'all'}\n      aria-labelledby={hasErrors && props.errorTitle ? titleId : undefined}\n      className={summaryClasses}\n    >\n      {hasErrors && (\n        <>\n          {props.errorTitle && (\n            <Title appearance=\"title4\" id={titleId} htmlMarkup={errorTitleHtmlMarkup} margin={{ marginTop: 0, marginBottom: 1 }}>\n              {props.errorTitle}\n            </Title>\n          )}\n          <ErrorList errors={props.errors!} />\n        </>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ValidationSummary;\n","import React from 'react';\n\nimport type { ValidationErrors } from './types';\nimport type { FormSize } from '../../constants';\nimport type { CheckboxProps } from '../Checkbox';\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport type { FormGroupProps } from '../FormGroup/FormGroup';\nimport type { InputProps } from '../Input';\nimport type { RadioButtonProps } from '../RadioButton';\nimport type { SelectProps } from '../Select';\nimport type { SliderProps } from '../Slider';\nimport type { TextareaProps } from '../Textarea';\n\nimport ValidationSummary from './ValidationSummary';\nimport { AnalyticsId } from '../../constants';\nimport { isComponent, isComponentWithDisplayName } from '../../utils/component';\nimport Checkbox from '../Checkbox';\nimport FormGroup from '../FormGroup/FormGroup';\nimport Input from '../Input';\nimport RadioButton from '../RadioButton';\nimport Select from '../Select';\nimport Slider from '../Slider';\nimport Textarea from '../Textarea';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Validation errors. If errors include references to HTML elements, the errors will be rendered as links with an onClick handler to focus the element. */\n  errors?: ValidationErrors;\n  /** Items in the Validation compontent */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Hides the ValidationSummary list visually - summary is still announced by screen readers */\n  visuallyHiddenSummary?: boolean;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\n\nexport const Validation: React.FC<ValidationProps> = (props: ValidationProps) => {\n  const validationErrorClass = styles['validation__error-wrapper'];\n\n  const cloneFormElement = <T extends ErrorWrapperClassNameProps>(child: React.ReactElement<T>): React.ReactElement<T> => {\n    return React.cloneElement(child, {\n      ...child.props,\n      errorWrapperClassName: validationErrorClass,\n    });\n  };\n\n  const renderChild = (child: React.ReactNode): React.ReactNode => {\n    if (\n      isComponent<FormGroupProps>(child, FormGroup) ||\n      isComponent<CheckboxProps>(child, Checkbox) ||\n      isComponent<RadioButtonProps>(child, RadioButton) ||\n      isComponent<TextareaProps>(child, Textarea) ||\n      isComponent<InputProps>(child, Input) ||\n      isComponent<SelectProps>(child, Select) ||\n      isComponent<SliderProps>(child, Slider) ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DateTimePickerWrapper') ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DatePicker') ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DateTime')\n    ) {\n      return cloneFormElement<ErrorWrapperClassNameProps>(child);\n    }\n    if (isComponent<React.FragmentProps>(child, React.Fragment)) {\n      return React.Children.map(child.props.children, (child: React.ReactNode) => {\n        return renderChild(child);\n      });\n    }\n\n    return child;\n  };\n\n  return (\n    <>\n      <div data-testid={props.testId} data-analyticsid={AnalyticsId.Validation} className={props.className} ref={props.ref}>\n        {React.Children.map(props.children, (child: React.ReactNode) => renderChild(child))}\n      </div>\n      <ValidationSummary errorTitle={props.errorTitle} errors={props.errors} visuallyHidden={props.visuallyHiddenSummary} />\n    </>\n  );\n};\n\nValidation.displayName = 'Validation';\n\nexport default Validation;\n","import Validation from './Validation';\nexport * from './Validation';\nexport default Validation;\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAM,iBAA6C,UAAS;CAC1D,MAAM,eAAe,OAAgC,YAAqC;EACxF,OAAO,eAAe;EACtB,IAAI,SAAS,OAAO,SAAS,MAAM;CACrC;CAEA,IAAI,MAAM,MAAM,KACd,OACE,oBAAC,oBAAD;EAAY,MAAM,IAAI,MAAM;EAAQ,UAAU,MAAY,YAAY,GAAG,MAAM,MAAM,GAAG;EACrF,UAAA,MAAM,MAAM;CACH,CAAA;CAIhB,OAAO,oBAAA,UAAA,EAAA,UAAG,MAAM,MAAM,QAAU,CAAA;AAClC;;;AChBA,IAAM,aAAsC,UAC1C,oBAAC,cAAD,EAAA,UACG,OAAO,QAAQ,MAAM,MAAM,CAAC,CAAC,KAAK,CAAC,MAAM,WACxC,oBAAC,aAAK,MAAN,EAAA,UACE,oBAAC,eAAD;CAAqB;CAAa;AAAQ,CAAA,EACjC,GAFK,IAEL,CACZ,EACG,CAAA;;;ACSR,IAAM,qBAAsD,UAAS;CACnE,MAAM,EAAE,uBAAuB,SAAS;CACxC,MAAM,UAAU,MAAM;CAEtB,MAAM,YAAY,CAAC,CAAC,MAAM,UAAU,OAAO,QAAQ,MAAM,MAAM,CAAC,CAAC,SAAS;CAC1E,MAAM,iBAAiB,MAAM;CAE7B,MAAM,iBAAiB,WAAW,OAAO,wBAAwB;GAC9D,OAAO,kCAAkC,aAAa,CAAC;GACvD,OAAO,kCAAkC;CAC5C,CAAC;CAED,OACE,qBAAC,OAAD;EACE,MAAM;EACN,eAAa;EACb,aAAW;EACX,iBAAe;EACf,mBAAiB,aAAa,MAAM,aAAa,UAAU,KAAA;EAC3D,WAAW;EANb,UAAA,CAQG,aACC,qBAAA,UAAA,EAAA,UAAA,CACG,MAAM,cACL,oBAAC,eAAD;GAAO,YAAW;GAAS,IAAI;GAAS,YAAY;GAAsB,QAAQ;IAAE,WAAW;IAAG,cAAc;GAAE;GAC/G,UAAA,MAAM;EACF,CAAA,GAET,oBAAC,WAAD,EAAW,QAAQ,MAAM,OAAU,CAAA,CACnC,EAAA,CAAA,GAEH,MAAM,QACJ;;AAET;;;ACdA,IAAa,cAAyC,UAA2B;CAC/E,MAAM,uBAAuB,OAAO;CAEpC,MAAM,oBAA0D,UAAwD;EACtH,OAAO,MAAM,aAAa,OAAO;GAC/B,GAAG,MAAM;GACT,uBAAuB;EACzB,CAAC;CACH;CAEA,MAAM,eAAe,UAA4C;EAC/D,IACE,YAA4B,OAAO,SAAS,KAC5C,YAA2B,OAAO,gBAAQ,KAC1C,YAA8B,OAAO,mBAAW,KAChD,YAA2B,OAAO,gBAAQ,KAC1C,YAAwB,OAAO,aAAK,KACpC,YAAyB,OAAO,cAAM,KACtC,YAAyB,OAAO,cAAM,KACtC,2BAAuD,OAAO,uBAAuB,KACrF,2BAAuD,OAAO,YAAY,KAC1E,2BAAuD,OAAO,UAAU,GAExE,OAAO,iBAA6C,KAAK;EAE3D,IAAI,YAAiC,OAAO,MAAM,QAAQ,GACxD,OAAO,MAAM,SAAS,IAAI,MAAM,MAAM,WAAW,UAA2B;GAC1E,OAAO,YAAY,KAAK;EAC1B,CAAC;EAGH,OAAO;CACT;CAEA,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;EAAK,eAAa,MAAM;EAAQ,oBAAkB,YAAY;EAAY,WAAW,MAAM;EAAW,KAAK,MAAM;EAC9G,UAAA,MAAM,SAAS,IAAI,MAAM,WAAW,UAA2B,YAAY,KAAK,CAAC;CAC/E,CAAA,GACL,oBAAC,mBAAD;EAAmB,YAAY,MAAM;EAAY,QAAQ,MAAM;EAAQ,gBAAgB,MAAM;CAAwB,CAAA,CACrH,EAAA,CAAA;AAEN;AAEA,WAAW,cAAc;;;ACvFzB,IAAA,qBAAe"}

package/lib/components/VisualCheckboxCloud/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/VisualCheckboxCloud/VisualCheckboxCloud.tsx","../../../src/components/VisualCheckboxCloud/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { CheckboxProps } from './Checkbox/Checkbox';\n\nimport Checkbox from './Checkbox/Checkbox';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { isComponent } from '../../utils/component';\nimport ErrorWrapper from '../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface VisualCheckboxCloudProps {\n  /** Items in the cloud. Should be VisualCheckboxCloud.Checkbox elements. */\n  children?: React.ReactNode;\n  /** Name shared by all child Checkbox elements (overridable per child) */\n  name?: string;\n  /** Error message shown above the cloud */\n  error?: string;\n  /** Error text id (auto-generated if omitted) */\n  errorTextId?: string;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n  /** Ref passed to the error message element */\n  errorMessageRef?: React.Ref<HTMLDivElement | null>;\n  /** Adds custom classes to the root element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper */\n  errorWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error wrapper */\n  errorWrapperTestId?: string;\n}\n\ninterface VisualCheckboxCloudComponent extends React.FC<VisualCheckboxCloudProps> {\n  Checkbox: typeof Checkbox;\n}\n\nexport const VisualCheckboxCloud: VisualCheckboxCloudComponent = props => {\n  const {\n    children,\n    name,\n    error,\n    errorTextId: errorTextIdProp,\n    renderError = true,\n    errorMessageRef,\n    className,\n    errorWrapperClassName,\n    testId,\n    errorWrapperTestId,\n  } = props;\n\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n\n  const mapChild = (child: React.ReactNode): React.ReactNode => {\n    if (isComponent<CheckboxProps>(child, Checkbox)) {\n      return React.cloneElement(child, {\n        name: child.props.name ?? name,\n        error: !!error || child.props.error,\n        errorTextId: child.props.errorTextId ?? errorTextId,\n      });\n    }\n    return child;\n  };\n\n  return (\n    <ErrorWrapper\n      className={classNames(errorWrapperClassName, className)}\n      errorText={error}\n      errorTextId={errorTextId}\n      renderError={renderError}\n      errorMessageRef={errorMessageRef}\n      testId={errorWrapperTestId}\n    >\n      <div className={styles['visual-checkbox-cloud']} data-testid={testId}>\n        {React.Children.map(children, mapChild)}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nVisualCheckboxCloud.Checkbox = Checkbox;\n\nexport default VisualCheckboxCloud;\n","import VisualCheckboxCloud from './VisualCheckboxCloud';\nexport * from './VisualCheckboxCloud';\nexport default VisualCheckboxCloud;\n"],"mappings":";;;;;;;;;AAwCA,IAAa,uBAAoD,UAAS;CACxE,MAAM,EACJ,UACA,MACA,OACA,aAAa,iBACb,cAAc,MACd,iBACA,WACA,uBACA,QACA,uBACE;CAEJ,MAAM,cAAc,kBAAkB,eAAe;CAErD,MAAM,YAAY,UAA4C;EAC5D,IAAI,YAA2B,OAAO,QAAQ,GAC5C,OAAO,MAAM,aAAa,OAAO;GAC/B,MAAM,MAAM,MAAM,QAAQ;GAC1B,OAAO,CAAC,CAAC,SAAS,MAAM,MAAM;GAC9B,aAAa,MAAM,MAAM,eAAe;EAC1C,CAAC;EAEH,OAAO;CACT;CAEA,OACE,oBAAC,sBAAD;EACE,WAAW,WAAW,uBAAuB,SAAS;EACtD,WAAW;EACE;EACA;EACI;EACjB,QAAQ;YAER,oBAAC,OAAD;GAAK,WAAW,OAAO;GAA0B,eAAa;aAC3D,MAAM,SAAS,IAAI,UAAU,QAAQ;EACnC,CAAA;CACO,CAAA;AAElB;AAEA,oBAAoB,WAAW;;;ACjF/B,IAAA,8BAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/VisualCheckboxCloud/VisualCheckboxCloud.tsx","../../../src/components/VisualCheckboxCloud/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { CheckboxProps } from './Checkbox/Checkbox';\n\nimport Checkbox from './Checkbox/Checkbox';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { isComponent } from '../../utils/component';\nimport ErrorWrapper from '../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface VisualCheckboxCloudProps {\n  /** Items in the cloud. Should be VisualCheckboxCloud.Checkbox elements. */\n  children?: React.ReactNode;\n  /** Name shared by all child Checkbox elements (overridable per child) */\n  name?: string;\n  /** Error message shown above the cloud */\n  error?: string;\n  /** Error text id (auto-generated if omitted) */\n  errorTextId?: string;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n  /** Ref passed to the error message element */\n  errorMessageRef?: React.Ref<HTMLDivElement | null>;\n  /** Adds custom classes to the root element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper */\n  errorWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error wrapper */\n  errorWrapperTestId?: string;\n}\n\ninterface VisualCheckboxCloudComponent extends React.FC<VisualCheckboxCloudProps> {\n  Checkbox: typeof Checkbox;\n}\n\nexport const VisualCheckboxCloud: VisualCheckboxCloudComponent = props => {\n  const {\n    children,\n    name,\n    error,\n    errorTextId: errorTextIdProp,\n    renderError = true,\n    errorMessageRef,\n    className,\n    errorWrapperClassName,\n    testId,\n    errorWrapperTestId,\n  } = props;\n\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n\n  const mapChild = (child: React.ReactNode): React.ReactNode => {\n    if (isComponent<CheckboxProps>(child, Checkbox)) {\n      return React.cloneElement(child, {\n        name: child.props.name ?? name,\n        error: !!error || child.props.error,\n        errorTextId: child.props.errorTextId ?? errorTextId,\n      });\n    }\n    return child;\n  };\n\n  return (\n    <ErrorWrapper\n      className={classNames(errorWrapperClassName, className)}\n      errorText={error}\n      errorTextId={errorTextId}\n      renderError={renderError}\n      errorMessageRef={errorMessageRef}\n      testId={errorWrapperTestId}\n    >\n      <div className={styles['visual-checkbox-cloud']} data-testid={testId}>\n        {React.Children.map(children, mapChild)}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nVisualCheckboxCloud.Checkbox = Checkbox;\n\nexport default VisualCheckboxCloud;\n","import VisualCheckboxCloud from './VisualCheckboxCloud';\nexport * from './VisualCheckboxCloud';\nexport default VisualCheckboxCloud;\n"],"mappings":";;;;;;;;;AAwCA,IAAa,uBAAoD,UAAS;CACxE,MAAM,EACJ,UACA,MACA,OACA,aAAa,iBACb,cAAc,MACd,iBACA,WACA,uBACA,QACA,uBACE;CAEJ,MAAM,cAAc,kBAAkB,eAAe;CAErD,MAAM,YAAY,UAA4C;EAC5D,IAAI,YAA2B,OAAO,QAAQ,GAC5C,OAAO,MAAM,aAAa,OAAO;GAC/B,MAAM,MAAM,MAAM,QAAQ;GAC1B,OAAO,CAAC,CAAC,SAAS,MAAM,MAAM;GAC9B,aAAa,MAAM,MAAM,eAAe;EAC1C,CAAC;EAEH,OAAO;CACT;CAEA,OACE,oBAAC,sBAAD;EACE,WAAW,WAAW,uBAAuB,SAAS;EACtD,WAAW;EACE;EACA;EACI;EACjB,QAAQ;EAER,UAAA,oBAAC,OAAD;GAAK,WAAW,OAAO;GAA0B,eAAa;GAC3D,UAAA,MAAM,SAAS,IAAI,UAAU,QAAQ;EACnC,CAAA;CACO,CAAA;AAElB;AAEA,oBAAoB,WAAW;;;ACjF/B,IAAA,8BAAe"}

package/lib/components/VisualCheckboxGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/VisualCheckboxGroup/VisualCheckboxGroup.tsx","../../../src/components/VisualCheckboxGroup/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { VisualCheckboxProps, VisualCheckboxVariant } from './VisualCheckbox/VisualCheckbox';\n\nimport VisualCheckbox from './VisualCheckbox/VisualCheckbox';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { isComponent } from '../../utils/component';\nimport ErrorWrapper from '../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface VisualCheckboxGroupProps {\n  /** Items in the group. Should be VisualCheckboxGroup.VisualCheckbox elements. */\n  children?: React.ReactNode;\n  /** Name shared by all child VisualCheckbox elements (overridable per child) */\n  name?: string;\n  /** Variant applied to all child VisualCheckbox elements (overridable per child). */\n  variant?: VisualCheckboxVariant;\n  /** When set and the number of VisualCheckbox children exceeds this limit on the mobile breakpoint, the variant is forced to `line`. */\n  mobileLineVariantLimit?: number;\n  /** Error message shown above the group */\n  error?: string;\n  /** Error text id (auto-generated if omitted) */\n  errorTextId?: string;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n  /** Ref passed to the error message element */\n  errorMessageRef?: React.Ref<HTMLDivElement | null>;\n  /** Adds custom classes to the root element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper */\n  errorWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error wrapper */\n  errorWrapperTestId?: string;\n}\n\ninterface VisualCheckboxGroupComponent extends React.FC<VisualCheckboxGroupProps> {\n  VisualCheckbox: typeof VisualCheckbox;\n}\n\nexport const VisualCheckboxGroup: VisualCheckboxGroupComponent = props => {\n  const {\n    children,\n    name,\n    variant = 'rectangle',\n    mobileLineVariantLimit,\n    error,\n    errorTextId: errorTextIdProp,\n    renderError = true,\n    errorMessageRef,\n    className,\n    errorWrapperClassName,\n    testId,\n    errorWrapperTestId,\n  } = props;\n\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const isMobile = useIsMobileBreakpoint();\n\n  const visualCheckboxCount = React.Children.toArray(children).filter(child =>\n    isComponent<VisualCheckboxProps>(child, VisualCheckbox)\n  ).length;\n\n  const effectiveVariant: VisualCheckboxVariant | undefined =\n    isMobile && mobileLineVariantLimit !== undefined && visualCheckboxCount > mobileLineVariantLimit ? 'line' : variant;\n\n  const mapChild = (child: React.ReactNode): React.ReactNode => {\n    if (isComponent<VisualCheckboxProps>(child, VisualCheckbox)) {\n      return React.cloneElement(child, {\n        name: child.props.name ?? name,\n        variant: child.props.variant ?? effectiveVariant,\n        error: !!error || child.props.error,\n        errorTextId: child.props.errorTextId ?? errorTextId,\n      });\n    }\n    return child;\n  };\n\n  return (\n    <ErrorWrapper\n      className={classNames(errorWrapperClassName, className)}\n      errorText={error}\n      errorTextId={errorTextId}\n      renderError={renderError}\n      errorMessageRef={errorMessageRef}\n      testId={errorWrapperTestId}\n    >\n      <div\n        className={classNames(styles['visual-checkbox-group'], {\n          [styles['visual-checkbox-group--variant-line']]: effectiveVariant === 'line',\n        })}\n        data-testid={testId}\n      >\n        {React.Children.map(children, mapChild)}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nVisualCheckboxGroup.VisualCheckbox = VisualCheckbox;\n\nexport default VisualCheckboxGroup;\n","import VisualCheckboxGroup from './VisualCheckboxGroup';\nexport * from './VisualCheckboxGroup';\nexport default VisualCheckboxGroup;\n"],"mappings":";;;;;;;;;;AA6CA,IAAa,uBAAoD,UAAS;CACxE,MAAM,EACJ,UACA,MACA,UAAU,aACV,wBACA,OACA,aAAa,iBACb,cAAc,MACd,iBACA,WACA,uBACA,QACA,uBACE;CAEJ,MAAM,cAAc,kBAAkB,eAAe;CACrD,MAAM,WAAW,sBAAsB;CAEvC,MAAM,sBAAsB,MAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,QAAO,UAClE,YAAiC,OAAO,cAAc,CACxD,CAAC,CAAC;CAEF,MAAM,mBACJ,YAAY,2BAA2B,KAAA,KAAa,sBAAsB,yBAAyB,SAAS;CAE9G,MAAM,YAAY,UAA4C;EAC5D,IAAI,YAAiC,OAAO,cAAc,GACxD,OAAO,MAAM,aAAa,OAAO;GAC/B,MAAM,MAAM,MAAM,QAAQ;GAC1B,SAAS,MAAM,MAAM,WAAW;GAChC,OAAO,CAAC,CAAC,SAAS,MAAM,MAAM;GAC9B,aAAa,MAAM,MAAM,eAAe;EAC1C,CAAC;EAEH,OAAO;CACT;CAEA,OACE,oBAAC,sBAAD;EACE,WAAW,WAAW,uBAAuB,SAAS;EACtD,WAAW;EACE;EACA;EACI;EACjB,QAAQ;YAER,oBAAC,OAAD;GACE,WAAW,WAAW,OAAO,0BAA0B,GACpD,OAAO,yCAAyC,qBAAqB,OACxE,CAAC;GACD,eAAa;aAEZ,MAAM,SAAS,IAAI,UAAU,QAAQ;EACnC,CAAA;CACO,CAAA;AAElB;AAEA,oBAAoB,iBAAiB;;;ACtGrC,IAAA,8BAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/VisualCheckboxGroup/VisualCheckboxGroup.tsx","../../../src/components/VisualCheckboxGroup/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { VisualCheckboxProps, VisualCheckboxVariant } from './VisualCheckbox/VisualCheckbox';\n\nimport VisualCheckbox from './VisualCheckbox/VisualCheckbox';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { isComponent } from '../../utils/component';\nimport ErrorWrapper from '../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface VisualCheckboxGroupProps {\n  /** Items in the group. Should be VisualCheckboxGroup.VisualCheckbox elements. */\n  children?: React.ReactNode;\n  /** Name shared by all child VisualCheckbox elements (overridable per child) */\n  name?: string;\n  /** Variant applied to all child VisualCheckbox elements (overridable per child). */\n  variant?: VisualCheckboxVariant;\n  /** When set and the number of VisualCheckbox children exceeds this limit on the mobile breakpoint, the variant is forced to `line`. */\n  mobileLineVariantLimit?: number;\n  /** Error message shown above the group */\n  error?: string;\n  /** Error text id (auto-generated if omitted) */\n  errorTextId?: string;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n  /** Ref passed to the error message element */\n  errorMessageRef?: React.Ref<HTMLDivElement | null>;\n  /** Adds custom classes to the root element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper */\n  errorWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error wrapper */\n  errorWrapperTestId?: string;\n}\n\ninterface VisualCheckboxGroupComponent extends React.FC<VisualCheckboxGroupProps> {\n  VisualCheckbox: typeof VisualCheckbox;\n}\n\nexport const VisualCheckboxGroup: VisualCheckboxGroupComponent = props => {\n  const {\n    children,\n    name,\n    variant = 'rectangle',\n    mobileLineVariantLimit,\n    error,\n    errorTextId: errorTextIdProp,\n    renderError = true,\n    errorMessageRef,\n    className,\n    errorWrapperClassName,\n    testId,\n    errorWrapperTestId,\n  } = props;\n\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const isMobile = useIsMobileBreakpoint();\n\n  const visualCheckboxCount = React.Children.toArray(children).filter(child =>\n    isComponent<VisualCheckboxProps>(child, VisualCheckbox)\n  ).length;\n\n  const effectiveVariant: VisualCheckboxVariant | undefined =\n    isMobile && mobileLineVariantLimit !== undefined && visualCheckboxCount > mobileLineVariantLimit ? 'line' : variant;\n\n  const mapChild = (child: React.ReactNode): React.ReactNode => {\n    if (isComponent<VisualCheckboxProps>(child, VisualCheckbox)) {\n      return React.cloneElement(child, {\n        name: child.props.name ?? name,\n        variant: child.props.variant ?? effectiveVariant,\n        error: !!error || child.props.error,\n        errorTextId: child.props.errorTextId ?? errorTextId,\n      });\n    }\n    return child;\n  };\n\n  return (\n    <ErrorWrapper\n      className={classNames(errorWrapperClassName, className)}\n      errorText={error}\n      errorTextId={errorTextId}\n      renderError={renderError}\n      errorMessageRef={errorMessageRef}\n      testId={errorWrapperTestId}\n    >\n      <div\n        className={classNames(styles['visual-checkbox-group'], {\n          [styles['visual-checkbox-group--variant-line']]: effectiveVariant === 'line',\n        })}\n        data-testid={testId}\n      >\n        {React.Children.map(children, mapChild)}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nVisualCheckboxGroup.VisualCheckbox = VisualCheckbox;\n\nexport default VisualCheckboxGroup;\n","import VisualCheckboxGroup from './VisualCheckboxGroup';\nexport * from './VisualCheckboxGroup';\nexport default VisualCheckboxGroup;\n"],"mappings":";;;;;;;;;;AA6CA,IAAa,uBAAoD,UAAS;CACxE,MAAM,EACJ,UACA,MACA,UAAU,aACV,wBACA,OACA,aAAa,iBACb,cAAc,MACd,iBACA,WACA,uBACA,QACA,uBACE;CAEJ,MAAM,cAAc,kBAAkB,eAAe;CACrD,MAAM,WAAW,sBAAsB;CAEvC,MAAM,sBAAsB,MAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,QAAO,UAClE,YAAiC,OAAO,cAAc,CACxD,CAAC,CAAC;CAEF,MAAM,mBACJ,YAAY,2BAA2B,KAAA,KAAa,sBAAsB,yBAAyB,SAAS;CAE9G,MAAM,YAAY,UAA4C;EAC5D,IAAI,YAAiC,OAAO,cAAc,GACxD,OAAO,MAAM,aAAa,OAAO;GAC/B,MAAM,MAAM,MAAM,QAAQ;GAC1B,SAAS,MAAM,MAAM,WAAW;GAChC,OAAO,CAAC,CAAC,SAAS,MAAM,MAAM;GAC9B,aAAa,MAAM,MAAM,eAAe;EAC1C,CAAC;EAEH,OAAO;CACT;CAEA,OACE,oBAAC,sBAAD;EACE,WAAW,WAAW,uBAAuB,SAAS;EACtD,WAAW;EACE;EACA;EACI;EACjB,QAAQ;EAER,UAAA,oBAAC,OAAD;GACE,WAAW,WAAW,OAAO,0BAA0B,GACpD,OAAO,yCAAyC,qBAAqB,OACxE,CAAC;GACD,eAAa;GAEZ,UAAA,MAAM,SAAS,IAAI,UAAU,QAAQ;EACnC,CAAA;CACO,CAAA;AAElB;AAEA,oBAAoB,iBAAiB;;;ACtGrC,IAAA,8BAAe"}

package/lib/components/VisualContentgroupWithImage/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/VisualContentgroupWithImage/VisualContentgroupWithImage.tsx","../../../src/components/VisualContentgroupWithImage/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport type ImageRatios = 'square' | 'landscape';\n\nexport interface VisualContentgroupWithImageProps {\n  /** Set the ratio of the image. */\n  imageRatio?: ImageRatios;\n  /** Content rendered inside the visualcontent area. */\n  visualContent: React.ReactNode;\n  /** Content rendered inside the component */\n  children: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst VisualContentgroupWithImage: React.FC<VisualContentgroupWithImageProps> = props => {\n  const { imageRatio = 'square', visualContent, children, testId } = props;\n\n  return (\n    <div data-testid={testId} className={styles['visual-contentgroup-with-image']}>\n      <div\n        className={classNames(styles['visual-contentgroup-with-image__frame'], {\n          [styles[`visual-contentgroup-with-image__frame--${imageRatio}`]]: imageRatio,\n        })}\n      >\n        {visualContent}\n      </div>\n      {children}\n    </div>\n  );\n};\n\nexport default VisualContentgroupWithImage;\n","import VisualContentgroupWithImage from './VisualContentgroupWithImage';\nexport * from './VisualContentgroupWithImage';\nexport default VisualContentgroupWithImage;\n"],"mappings":";;;;AAiBA,IAAM,+BAA0E,UAAS;CACvF,MAAM,EAAE,aAAa,UAAU,eAAe,UAAU,WAAW;CAEnE,OACE,qBAAC,OAAD;EAAK,eAAa;EAAQ,WAAW,OAAO;YAA5C,CACE,oBAAC,OAAD;GACE,WAAW,WAAW,OAAO,0CAA0C,GACpE,OAAO,0CAA0C,gBAAgB,WACpE,CAAC;aAEA;EACE,CAAA,GACJ,QACE;;AAET;;;AC9BA,IAAA,sCAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/VisualContentgroupWithImage/VisualContentgroupWithImage.tsx","../../../src/components/VisualContentgroupWithImage/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport type ImageRatios = 'square' | 'landscape';\n\nexport interface VisualContentgroupWithImageProps {\n  /** Set the ratio of the image. */\n  imageRatio?: ImageRatios;\n  /** Content rendered inside the visualcontent area. */\n  visualContent: React.ReactNode;\n  /** Content rendered inside the component */\n  children: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst VisualContentgroupWithImage: React.FC<VisualContentgroupWithImageProps> = props => {\n  const { imageRatio = 'square', visualContent, children, testId } = props;\n\n  return (\n    <div data-testid={testId} className={styles['visual-contentgroup-with-image']}>\n      <div\n        className={classNames(styles['visual-contentgroup-with-image__frame'], {\n          [styles[`visual-contentgroup-with-image__frame--${imageRatio}`]]: imageRatio,\n        })}\n      >\n        {visualContent}\n      </div>\n      {children}\n    </div>\n  );\n};\n\nexport default VisualContentgroupWithImage;\n","import VisualContentgroupWithImage from './VisualContentgroupWithImage';\nexport * from './VisualContentgroupWithImage';\nexport default VisualContentgroupWithImage;\n"],"mappings":";;;;AAiBA,IAAM,+BAA0E,UAAS;CACvF,MAAM,EAAE,aAAa,UAAU,eAAe,UAAU,WAAW;CAEnE,OACE,qBAAC,OAAD;EAAK,eAAa;EAAQ,WAAW,OAAO;EAA5C,UAAA,CACE,oBAAC,OAAD;GACE,WAAW,WAAW,OAAO,0CAA0C,GACpE,OAAO,0CAA0C,gBAAgB,WACpE,CAAC;GAEA,UAAA;EACE,CAAA,GACJ,QACE;;AAET;;;AC9BA,IAAA,sCAAe"}

package/lib/components/VisualRadioCloud/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/VisualRadioCloud/VisualRadioCloud.tsx","../../../src/components/VisualRadioCloud/index.ts"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { RadioProps } from './Radio/Radio';\n\nimport Radio from './Radio/Radio';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { isComponent } from '../../utils/component';\nimport ErrorWrapper from '../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface VisualRadioCloudProps {\n  /** Items in the cloud. Should be VisualRadioCloud.Radio elements. */\n  children?: React.ReactNode;\n  /** Name shared by all child Radio elements (overridable per child). Required for native form grouping. */\n  name?: string;\n  /** Selected value (controlled). */\n  value?: string;\n  /** Initial selected value (uncontrolled). */\n  defaultValue?: string;\n  /** Called when the selected value changes. */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;\n  /** Error message shown above the cloud */\n  error?: string;\n  /** Error text id (auto-generated if omitted) */\n  errorTextId?: string;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n  /** Ref passed to the error message element */\n  errorMessageRef?: React.Ref<HTMLDivElement | null>;\n  /** Adds custom classes to the root element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper */\n  errorWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error wrapper */\n  errorWrapperTestId?: string;\n  /** Accessible label for the radiogroup. Use this or `aria-labelledby` when no external `<legend>` labels the group. */\n  'aria-label'?: string;\n  /** Id of element labelling the radiogroup (e.g. an external Title/legend). */\n  'aria-labelledby'?: string;\n}\n\ninterface VisualRadioCloudComponent extends React.FC<VisualRadioCloudProps> {\n  Radio: typeof Radio;\n}\n\nexport const VisualRadioCloud: VisualRadioCloudComponent = props => {\n  const {\n    children,\n    name,\n    value,\n    defaultValue,\n    onChange,\n    error,\n    errorTextId: errorTextIdProp,\n    renderError = true,\n    errorMessageRef,\n    className,\n    errorWrapperClassName,\n    testId,\n    errorWrapperTestId,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n  } = props;\n\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const [selectedValue, setSelectedValue] = useState<string | undefined>(value ?? defaultValue);\n  const [prevValue, setPrevValue] = useState<string | undefined>(value);\n  if (prevValue !== value) {\n    setPrevValue(value);\n    if (value !== undefined && value !== selectedValue) {\n      setSelectedValue(value);\n    }\n  }\n\n  const mapChild = (child: React.ReactNode): React.ReactNode => {\n    if (isComponent<RadioProps>(child, Radio)) {\n      const isSelected = selectedValue !== undefined && child.props.value === selectedValue;\n      return React.cloneElement(child, {\n        name: child.props.name ?? name,\n        checked: isSelected,\n        error: !!error || child.props.error,\n        errorTextId: child.props.errorTextId ?? errorTextId,\n        onChange: (e: React.ChangeEvent<HTMLInputElement>) => {\n          setSelectedValue(child.props.value);\n          child.props.onChange?.(e);\n          onChange?.(e, child.props.value);\n        },\n      });\n    }\n    return child;\n  };\n\n  return (\n    <ErrorWrapper\n      className={classNames(errorWrapperClassName, className)}\n      errorText={error}\n      errorTextId={errorTextId}\n      renderError={renderError}\n      errorMessageRef={errorMessageRef}\n      testId={errorWrapperTestId}\n    >\n      <div\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-invalid={error ? true : undefined}\n        aria-describedby={error ? errorTextId : undefined}\n        className={styles['visual-radio-cloud']}\n        data-testid={testId}\n      >\n        {React.Children.map(children, mapChild)}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nVisualRadioCloud.Radio = Radio;\n\nexport default VisualRadioCloud;\n","import VisualRadioCloud from './VisualRadioCloud';\nexport * from './VisualRadioCloud';\nexport default VisualRadioCloud;\n"],"mappings":";;;;;;;;;AAkDA,IAAa,oBAA8C,UAAS;CAClE,MAAM,EACJ,UACA,MACA,OACA,cACA,UACA,OACA,aAAa,iBACb,cAAc,MACd,iBACA,WACA,uBACA,QACA,oBACA,cAAc,WACd,mBAAmB,mBACjB;CAEJ,MAAM,cAAc,kBAAkB,eAAe;CACrD,MAAM,CAAC,eAAe,oBAAoB,SAA6B,SAAS,YAAY;CAC5F,MAAM,CAAC,WAAW,gBAAgB,SAA6B,KAAK;CACpE,IAAI,cAAc,OAAO;EACvB,aAAa,KAAK;EAClB,IAAI,UAAU,KAAA,KAAa,UAAU,eACnC,iBAAiB,KAAK;CAE1B;CAEA,MAAM,YAAY,UAA4C;EAC5D,IAAI,YAAwB,OAAO,KAAK,GAAG;GACzC,MAAM,aAAa,kBAAkB,KAAA,KAAa,MAAM,MAAM,UAAU;GACxE,OAAO,MAAM,aAAa,OAAO;IAC/B,MAAM,MAAM,MAAM,QAAQ;IAC1B,SAAS;IACT,OAAO,CAAC,CAAC,SAAS,MAAM,MAAM;IAC9B,aAAa,MAAM,MAAM,eAAe;IACxC,WAAW,MAA2C;KACpD,iBAAiB,MAAM,MAAM,KAAK;KAClC,MAAM,MAAM,WAAW,CAAC;KACxB,WAAW,GAAG,MAAM,MAAM,KAAK;IACjC;GACF,CAAC;EACH;EACA,OAAO;CACT;CAEA,OACE,oBAAC,sBAAD;EACE,WAAW,WAAW,uBAAuB,SAAS;EACtD,WAAW;EACE;EACA;EACI;EACjB,QAAQ;YAER,oBAAC,OAAD;GACE,MAAK;GACL,cAAY;GACZ,mBAAiB;GACjB,gBAAc,QAAQ,OAAO,KAAA;GAC7B,oBAAkB,QAAQ,cAAc,KAAA;GACxC,WAAW,OAAO;GAClB,eAAa;aAEZ,MAAM,SAAS,IAAI,UAAU,QAAQ;EACnC,CAAA;CACO,CAAA;AAElB;AAEA,iBAAiB,QAAQ;;;ACvHzB,IAAA,2BAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/VisualRadioCloud/VisualRadioCloud.tsx","../../../src/components/VisualRadioCloud/index.ts"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { RadioProps } from './Radio/Radio';\n\nimport Radio from './Radio/Radio';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { isComponent } from '../../utils/component';\nimport ErrorWrapper from '../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface VisualRadioCloudProps {\n  /** Items in the cloud. Should be VisualRadioCloud.Radio elements. */\n  children?: React.ReactNode;\n  /** Name shared by all child Radio elements (overridable per child). Required for native form grouping. */\n  name?: string;\n  /** Selected value (controlled). */\n  value?: string;\n  /** Initial selected value (uncontrolled). */\n  defaultValue?: string;\n  /** Called when the selected value changes. */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;\n  /** Error message shown above the cloud */\n  error?: string;\n  /** Error text id (auto-generated if omitted) */\n  errorTextId?: string;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n  /** Ref passed to the error message element */\n  errorMessageRef?: React.Ref<HTMLDivElement | null>;\n  /** Adds custom classes to the root element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper */\n  errorWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error wrapper */\n  errorWrapperTestId?: string;\n  /** Accessible label for the radiogroup. Use this or `aria-labelledby` when no external `<legend>` labels the group. */\n  'aria-label'?: string;\n  /** Id of element labelling the radiogroup (e.g. an external Title/legend). */\n  'aria-labelledby'?: string;\n}\n\ninterface VisualRadioCloudComponent extends React.FC<VisualRadioCloudProps> {\n  Radio: typeof Radio;\n}\n\nexport const VisualRadioCloud: VisualRadioCloudComponent = props => {\n  const {\n    children,\n    name,\n    value,\n    defaultValue,\n    onChange,\n    error,\n    errorTextId: errorTextIdProp,\n    renderError = true,\n    errorMessageRef,\n    className,\n    errorWrapperClassName,\n    testId,\n    errorWrapperTestId,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n  } = props;\n\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const [selectedValue, setSelectedValue] = useState<string | undefined>(value ?? defaultValue);\n  const [prevValue, setPrevValue] = useState<string | undefined>(value);\n  if (prevValue !== value) {\n    setPrevValue(value);\n    if (value !== undefined && value !== selectedValue) {\n      setSelectedValue(value);\n    }\n  }\n\n  const mapChild = (child: React.ReactNode): React.ReactNode => {\n    if (isComponent<RadioProps>(child, Radio)) {\n      const isSelected = selectedValue !== undefined && child.props.value === selectedValue;\n      return React.cloneElement(child, {\n        name: child.props.name ?? name,\n        checked: isSelected,\n        error: !!error || child.props.error,\n        errorTextId: child.props.errorTextId ?? errorTextId,\n        onChange: (e: React.ChangeEvent<HTMLInputElement>) => {\n          setSelectedValue(child.props.value);\n          child.props.onChange?.(e);\n          onChange?.(e, child.props.value);\n        },\n      });\n    }\n    return child;\n  };\n\n  return (\n    <ErrorWrapper\n      className={classNames(errorWrapperClassName, className)}\n      errorText={error}\n      errorTextId={errorTextId}\n      renderError={renderError}\n      errorMessageRef={errorMessageRef}\n      testId={errorWrapperTestId}\n    >\n      <div\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-invalid={error ? true : undefined}\n        aria-describedby={error ? errorTextId : undefined}\n        className={styles['visual-radio-cloud']}\n        data-testid={testId}\n      >\n        {React.Children.map(children, mapChild)}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nVisualRadioCloud.Radio = Radio;\n\nexport default VisualRadioCloud;\n","import VisualRadioCloud from './VisualRadioCloud';\nexport * from './VisualRadioCloud';\nexport default VisualRadioCloud;\n"],"mappings":";;;;;;;;;AAkDA,IAAa,oBAA8C,UAAS;CAClE,MAAM,EACJ,UACA,MACA,OACA,cACA,UACA,OACA,aAAa,iBACb,cAAc,MACd,iBACA,WACA,uBACA,QACA,oBACA,cAAc,WACd,mBAAmB,mBACjB;CAEJ,MAAM,cAAc,kBAAkB,eAAe;CACrD,MAAM,CAAC,eAAe,oBAAoB,SAA6B,SAAS,YAAY;CAC5F,MAAM,CAAC,WAAW,gBAAgB,SAA6B,KAAK;CACpE,IAAI,cAAc,OAAO;EACvB,aAAa,KAAK;EAClB,IAAI,UAAU,KAAA,KAAa,UAAU,eACnC,iBAAiB,KAAK;CAE1B;CAEA,MAAM,YAAY,UAA4C;EAC5D,IAAI,YAAwB,OAAO,KAAK,GAAG;GACzC,MAAM,aAAa,kBAAkB,KAAA,KAAa,MAAM,MAAM,UAAU;GACxE,OAAO,MAAM,aAAa,OAAO;IAC/B,MAAM,MAAM,MAAM,QAAQ;IAC1B,SAAS;IACT,OAAO,CAAC,CAAC,SAAS,MAAM,MAAM;IAC9B,aAAa,MAAM,MAAM,eAAe;IACxC,WAAW,MAA2C;KACpD,iBAAiB,MAAM,MAAM,KAAK;KAClC,MAAM,MAAM,WAAW,CAAC;KACxB,WAAW,GAAG,MAAM,MAAM,KAAK;IACjC;GACF,CAAC;EACH;EACA,OAAO;CACT;CAEA,OACE,oBAAC,sBAAD;EACE,WAAW,WAAW,uBAAuB,SAAS;EACtD,WAAW;EACE;EACA;EACI;EACjB,QAAQ;EAER,UAAA,oBAAC,OAAD;GACE,MAAK;GACL,cAAY;GACZ,mBAAiB;GACjB,gBAAc,QAAQ,OAAO,KAAA;GAC7B,oBAAkB,QAAQ,cAAc,KAAA;GACxC,WAAW,OAAO;GAClB,eAAa;GAEZ,UAAA,MAAM,SAAS,IAAI,UAAU,QAAQ;EACnC,CAAA;CACO,CAAA;AAElB;AAEA,iBAAiB,QAAQ;;;ACvHzB,IAAA,2BAAe"}