@helsenorge/designsystem-react 12.0.0-beta.2 → 12.0.2

package/components/Stepper/index.js.map

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

package/components/StickyNote/index.js

@@ -68,7 +68,7 @@ const StickyNote = (props) => {
       return;
     }
     if (textareaProps.disabled) {
-      onClickWhileDisabled && onClickWhileDisabled();
+      if (onClickWhileDisabled) onClickWhileDisabled();
       return;
     }
     (_a = textareaRef.current) == null ? void 0 : _a.focus();
@@ -89,7 +89,7 @@ const StickyNote = (props) => {
   const handleChange = (e) => {
     const textarea = e.target;
     resizeTarget(textarea);
-    textareaProps.onChange && textareaProps.onChange(e);
+    if (textareaProps.onChange) textareaProps.onChange(e);
   };
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs(

package/components/StickyNote/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/StickyNote/Triangle.tsx","../../../src/components/StickyNote/StickyNote.tsx"],"sourcesContent":["interface TriangleProps {\n  type: 'default' | 'active' | 'error';\n}\n\nexport interface Palette {\n  border: string;\n  background: string;\n}\n\nconst Triangle: React.FC<TriangleProps> = ({ type }) => {\n  const palette = ((): Palette => {\n    switch (type) {\n      case 'active':\n        return {\n          border: '#C59302',\n          background: '#F5E080',\n        };\n      case 'error':\n        return {\n          border: '#C83521',\n          background: '#EEC0A5',\n        };\n      default:\n        return {\n          border: '#F5E080',\n          background: '#F5E080',\n        };\n    }\n  })();\n  return (\n    <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <mask id=\"path-1-inside-1_1_44\" fill=\"white\">\n        <path d=\"M22 0L1.80043e-06 22L2.83099e-06 -8.97354e-07L22 0Z\" />\n      </mask>\n      <path d=\"M22 0L1.80043e-06 22L2.83099e-06 -8.97354e-07L22 0Z\" fill={palette.background} />\n      <path\n        d=\"M22 0L22.7071 0.707107L24.4142 -1L22 -1L22 0ZM1.80043e-06 22L-0.999998 22L-0.999998 24.4142L0.707109 22.7071L1.80043e-06 22ZM2.83099e-06 -8.97354e-07L2.87783e-06 -1L-0.999997 -1L-0.999997 -9.38143e-07L2.83099e-06 -8.97354e-07ZM21.2929 -0.707107L-0.707105 21.2929L0.707109 22.7071L22.7071 0.707107L21.2929 -0.707107ZM1 22L1 -8.56565e-07L-0.999997 -9.38143e-07L-0.999998 22L1 22ZM2.78414e-06 0.999999L22 1L22 -1L2.87783e-06 -1L2.78414e-06 0.999999Z\"\n        fill={palette.border}\n        mask=\"url(#path-1-inside-1_1_44)\"\n      />\n    </svg>\n  );\n};\n\nexport default Triangle;\n","import React, { useLayoutEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useHover } from '../../hooks/useHover';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport Icon, { IconSize } from '../Icon';\nimport Triangle from './Triangle';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport X from '../Icons/X';\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,\n    onClickWhileDisabled,\n    testId,\n    ...textareaProps\n  } = props;\n  const errorTextUuid = useUuid(errorTextId);\n  const stickynoteRef = useRef<HTMLDivElement>(null);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const { isFocused: isTextareaFocused } = usePseudoClasses<HTMLTextAreaElement>(textareaRef);\n  const { isHovered } = useHover<HTMLDivElement>(stickynoteRef);\n  const triangleType = error ? 'error' : isTextareaFocused ? 'active' : 'default';\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      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    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--hovered']]: isHovered && !isTextareaFocused && !textareaProps.disabled,\n          [styles['sticky-note--error']]: error,\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, errorTextUuid)}\n        />\n        <button\n          onClick={onXButtonClick}\n          aria-label={arialabelXButton}\n          data-testid=\"closeButton\"\n          className={classNames(styles['sticky-note__x-button'])}\n          type=\"button\"\n        >\n          <Icon svgIcon={X} color=\"black\" size={IconSize.XXSmall} />\n        </button>\n        <div className={classNames(styles['sticky-note__footer'])}>{footerText && <span>{footerText}</span>}</div>\n        <div className={classNames(styles['sticky-note__triangle'])}>\n          <Triangle type={triangleType} />\n        </div>\n      </div>\n      {error && (\n        <p className={styles['sticky-note__error-text']} id={errorTextId}>\n          {errorText}\n        </p>\n      )}\n    </div>\n  );\n};\n\nexport default StickyNote;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/StickyNote/Triangle.tsx","../../../src/components/StickyNote/StickyNote.tsx"],"sourcesContent":["interface TriangleProps {\n  type: 'default' | 'active' | 'error';\n}\n\nexport interface Palette {\n  border: string;\n  background: string;\n}\n\nconst Triangle: React.FC<TriangleProps> = ({ type }) => {\n  const palette = ((): Palette => {\n    switch (type) {\n      case 'active':\n        return {\n          border: '#C59302',\n          background: '#F5E080',\n        };\n      case 'error':\n        return {\n          border: '#C83521',\n          background: '#EEC0A5',\n        };\n      default:\n        return {\n          border: '#F5E080',\n          background: '#F5E080',\n        };\n    }\n  })();\n  return (\n    <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <mask id=\"path-1-inside-1_1_44\" fill=\"white\">\n        <path d=\"M22 0L1.80043e-06 22L2.83099e-06 -8.97354e-07L22 0Z\" />\n      </mask>\n      <path d=\"M22 0L1.80043e-06 22L2.83099e-06 -8.97354e-07L22 0Z\" fill={palette.background} />\n      <path\n        d=\"M22 0L22.7071 0.707107L24.4142 -1L22 -1L22 0ZM1.80043e-06 22L-0.999998 22L-0.999998 24.4142L0.707109 22.7071L1.80043e-06 22ZM2.83099e-06 -8.97354e-07L2.87783e-06 -1L-0.999997 -1L-0.999997 -9.38143e-07L2.83099e-06 -8.97354e-07ZM21.2929 -0.707107L-0.707105 21.2929L0.707109 22.7071L22.7071 0.707107L21.2929 -0.707107ZM1 22L1 -8.56565e-07L-0.999997 -9.38143e-07L-0.999998 22L1 22ZM2.78414e-06 0.999999L22 1L22 -1L2.87783e-06 -1L2.78414e-06 0.999999Z\"\n        fill={palette.border}\n        mask=\"url(#path-1-inside-1_1_44)\"\n      />\n    </svg>\n  );\n};\n\nexport default Triangle;\n","import React, { useLayoutEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useHover } from '../../hooks/useHover';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport Icon, { IconSize } from '../Icon';\nimport Triangle from './Triangle';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport X from '../Icons/X';\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,\n    onClickWhileDisabled,\n    testId,\n    ...textareaProps\n  } = props;\n  const errorTextUuid = useUuid(errorTextId);\n  const stickynoteRef = useRef<HTMLDivElement>(null);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const { isFocused: isTextareaFocused } = usePseudoClasses<HTMLTextAreaElement>(textareaRef);\n  const { isHovered } = useHover<HTMLDivElement>(stickynoteRef);\n  const triangleType = error ? 'error' : isTextareaFocused ? 'active' : 'default';\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--hovered']]: isHovered && !isTextareaFocused && !textareaProps.disabled,\n          [styles['sticky-note--error']]: error,\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, errorTextUuid)}\n        />\n        <button\n          onClick={onXButtonClick}\n          aria-label={arialabelXButton}\n          data-testid=\"closeButton\"\n          className={classNames(styles['sticky-note__x-button'])}\n          type=\"button\"\n        >\n          <Icon svgIcon={X} color=\"black\" size={IconSize.XXSmall} />\n        </button>\n        <div className={classNames(styles['sticky-note__footer'])}>{footerText && <span>{footerText}</span>}</div>\n        <div className={classNames(styles['sticky-note__triangle'])}>\n          <Triangle type={triangleType} />\n        </div>\n      </div>\n      {error && (\n        <p className={styles['sticky-note__error-text']} id={errorTextId}>\n          {errorText}\n        </p>\n      )}\n    </div>\n  );\n};\n\nexport default StickyNote;\n"],"names":[],"mappings":"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"}

package/components/Tabs/TabList/styles.module.scss

@@ -2,6 +2,10 @@
 @use '../../../scss/breakpoints' as breakpoints;
 @import '../../../scss/supernova/styles/colors';
 
+.tab-list-wrapper {
+  position: relative;
+}
+
 .tab-list {
   $tab-list: &;
   $colors: 'blueberry', 'neutral', 'white';
@@ -68,14 +72,16 @@
     border-bottom: 0;
     border-radius: 0.5rem 0.5rem 0 0;
     position: relative;
+
+    // Z-index brukes til å flytte tab bak/foran bottom border til tab-list__border
     z-index: 0;
 
     &--selected {
       overflow: visible;
-      z-index: 1;
       border-color: var(--color-action-border-onlight-focus);
       color: var(--color-base-text-onlight);
       background-color: var(--color-base-background-white);
+      z-index: 2;
     }
 
     &__title-and-icon {
@@ -152,8 +158,12 @@
   }
 
   &__border {
-    position: relative;
-    height: 1px;
-    background-color: var(--color-action-border-onlight-focus);
+    position: absolute;
+    z-index: 1;
+    pointer-events: none;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    border-bottom: 1px solid var(--color-action-border-onlight-focus);
   }
 }

package/components/Tabs/TabList/styles.module.scss.d.ts

@@ -16,6 +16,7 @@ export type Styles = {
   'tab-list--onblueberry': string;
   'tab-list--onneutral': string;
   'tab-list--onwhite': string;
+  'tab-list-wrapper': string;
 };
 
 export type ClassNames = keyof Styles;

package/components/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport designsystemlayout from '../../scss/layout.module.scss';\nimport { PaletteNames } from '../../theme/palette';\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  /** Sets aria label on the \"scroll to the right\" button in TabList */\n  ariaLabelRightButton?: string;\n  /** Sets aria label on the \"scroll to the left\" button in TabList */\n  ariaLabelLeftButton?: string;\n  /** Overrides the default z-index of the tabs header */\n  zIndex?: number;\n}\n\nconst 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  ariaLabelRightButton,\n  ariaLabelLeftButton,\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\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={ariaLabelLeftButton}\n          ariaLabelRightButton={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;\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n"],"names":["React"],"mappings":";;;;;;;AAwCA,MAAM,WAAgC,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe,cAAc;AACnC,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,CAAC;AACtD,QAAA,UAAU,OAAuB,IAAI;AACrC,QAAA,cAAc,OAAuB,IAAI;AACzC,QAAA,aAAa,OAAuB,IAAI;AAE9C,MAAI,cAA2B;AAC/B,MAAI,UAAU,SAAS;AACP,kBAAA;AAAA,EAAA;AAGV,QAAA,gBAAgB,CAAC,aAA2B;AAChD,QAAI,CAAC,cAAc;AACjB,2BAAqB,QAAQ;AAAA,IAAA;AAAA,EAEjC;AAEM,QAAA,iBAAiB,eAAe,YAAY;AAGhD,SAAA,qBAAC,OAAI,EAAA,WAAW,WAAW,WAAW,qBAAqB,mBAAmB,oBAAoB,CAAC,GAAG,eAAa,QACjH,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,WAAW,OAAO,kBAAkB,GAAG;AAAA,UAChD,CAAC,OAAO,0BAA0B,CAAC,GAAG;AAAA,QAAA,CACvC;AAAA,QACD,OAAO;AAAA,UACL;AAAA,QACF;AAAA,QAEA,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,gBAAgB,CAAC,UAAkB,cAAc,KAAK;AAAA,cACtD,aAAa;AAAA,cACb;AAAA,cACA,SAAS;AAAA,cACT;AAAA,cACA;AAAA,cAEC;AAAA,YAAA;AAAA,UACH;AAAA,UACC,oBAAA,OAAA,EAAI,WAAW,WAAW,OAAO,eAAe,GAAG,OAAO,kBAAkB,KAAK,EAAE,CAAC,EAAG,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1F;AAAA,IACA,oBAAC,OAAI,EAAA,KAAK,SAAS,OAAO,EAAE,WAAW,QAAA,GACrC,UAAA,oBAAC,UAAS,EAAA,KAAK,aAAa,OAAc,SAAS,kBAAkB,GAClE,UAAMA,eAAA,SAAS,QAAQ,QAAQ,EAAE,cAAc,EAClD,CAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;AAKA,MAAM,OAAO;AACb,KAAK,cAAc;AACnB,KAAK,MAAM;AACX,KAAK,IAAI,cAAc;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport designsystemlayout from '../../scss/layout.module.scss';\nimport { PaletteNames } from '../../theme/palette';\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  /** Sets aria label on the \"scroll to the right\" button in TabList */\n  ariaLabelRightButton?: string;\n  /** Sets aria label on the \"scroll to the left\" button in TabList */\n  ariaLabelLeftButton?: string;\n  /** Overrides the default z-index of the tabs header */\n  zIndex?: number;\n}\n\nconst 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  ariaLabelRightButton,\n  ariaLabelLeftButton,\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\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={ariaLabelLeftButton}\n          ariaLabelRightButton={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;\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n"],"names":["React"],"mappings":";;;;;;;AAwCA,MAAM,WAAgC,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe,cAAc;AACnC,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,CAAC;AAC5D,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,cAAc,OAAuB,IAAI;AAC/C,QAAM,aAAa,OAAuB,IAAI;AAE9C,MAAI,cAA2B;AAC/B,MAAI,UAAU,SAAS;AACrB,kBAAc;AAAA,EAChB;AAEA,QAAM,gBAAgB,CAAC,aAA2B;AAChD,QAAI,CAAC,cAAc;AACjB,2BAAqB,QAAQ;AAAA,IAC/B;AAAA,EACF;AAEA,QAAM,iBAAiB,eAAe,YAAY;AAElD,SACE,qBAAC,OAAA,EAAI,WAAW,WAAW,WAAW,qBAAqB,mBAAmB,oBAAoB,CAAC,GAAG,eAAa,QACjH,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,WAAW,OAAO,kBAAkB,GAAG;AAAA,UAChD,CAAC,OAAO,0BAA0B,CAAC,GAAG;AAAA,QAAA,CACvC;AAAA,QACD,OAAO;AAAA,UACL;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,gBAAgB,CAAC,UAAkB,cAAc,KAAK;AAAA,cACtD,aAAa;AAAA,cACb;AAAA,cACA,SAAS;AAAA,cACT;AAAA,cACA;AAAA,cAEC;AAAA,YAAA;AAAA,UAAA;AAAA,UAEH,oBAAC,OAAA,EAAI,WAAW,WAAW,OAAO,eAAe,GAAG,OAAO,kBAAkB,KAAK,EAAE,CAAC,EAAA,CAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAE1F,oBAAC,OAAA,EAAI,KAAK,SAAS,OAAO,EAAE,WAAW,QAAA,GACrC,UAAA,oBAAC,UAAA,EAAS,KAAK,aAAa,OAAc,SAAS,kBAAkB,GAClE,UAAAA,eAAM,SAAS,QAAQ,QAAQ,EAAE,cAAc,EAAA,CAClD,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;AAKA,MAAM,OAAO;AACb,KAAK,cAAc;AACnB,KAAK,MAAM;AACX,KAAK,IAAI,cAAc;"}

package/components/Tabs/styles.module.scss

@@ -22,9 +22,11 @@
   height: 50px;
 
   @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-    border-right: 1px solid var(--color-action-border-onlight-focus);
-    border-left: 1px solid var(--color-action-border-onlight-focus);
     height: 50px;
+
+    /* Disse to linjene passer på at den hvite gradienten ikke går over border til den ytre diven */
+    width: auto;
+    margin: 0 2px;
   }
 
   @each $color in $colors {

package/components/Tag/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { palette, PaletteNames } from '../../theme/palette';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport enum TagSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum TagVariant {\n  normal = 'normal',\n  oncolor = 'oncolor',\n  emphasised = 'emphasised',\n}\n\nexport type TagColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;\n\nexport interface TagProps {\n  /** Sets the text of the tag */\n  children: string;\n  /** Sets the size of the tag. Default: medium */\n  size?: keyof typeof TagSize;\n  /** Sets the background of the tag. Default: blueberry */\n  color?: TagColors;\n  /** Adds an icon to the tag. */\n  svgIcon?: SvgIcon | IconName;\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, size = TagSize.medium, color = 'blueberry', svgIcon, variant = 'normal', testId } = props;\n\n  const tagClasses = cn(styles.tag, styles[`tag--${size}`], styles[`tag--${color}`], {\n    [styles['tag--has-icon']]: svgIcon,\n    [styles['tag--emphasised']]: variant == TagVariant.emphasised,\n  });\n\n  return (\n    <span className={tagClasses} data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {svgIcon &&\n        (typeof svgIcon === 'string' ? (\n          <LazyIcon iconName={svgIcon} size={IconSize.XXSmall} color={palette[`${color}800`]} className={styles.tag__icon} />\n        ) : (\n          <Icon svgIcon={svgIcon} size={IconSize.XXSmall} color={palette[`${color}800`]} className={styles.tag__icon} />\n        ))}\n      {children}\n    </span>\n  );\n};\n\nexport default Tag;\n"],"names":["TagSize","TagVariant","cn"],"mappings":";;;;;;;AAYY,IAAA,4BAAAA,aAAL;AACLA,WAAA,QAAS,IAAA;AACTA,WAAA,OAAQ,IAAA;AAFEA,SAAAA;AAAA,GAAA,WAAA,CAAA,CAAA;AAKA,IAAA,+BAAAC,gBAAL;AACLA,cAAA,QAAS,IAAA;AACTA,cAAA,SAAU,IAAA;AACVA,cAAA,YAAa,IAAA;AAHHA,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AAuBZ,MAAM,MAA0B,CAAS,UAAA;AACjC,QAAA,EAAE,UAAU,OAAO,UAAgB,QAAQ,aAAa,SAAS,UAAU,UAAU,OAAW,IAAA;AAEtG,QAAM,aAAaC,WAAG,OAAO,KAAK,OAAO,QAAQ,IAAI,EAAE,GAAG,OAAO,QAAQ,KAAK,EAAE,GAAG;AAAA,IACjF,CAAC,OAAO,eAAe,CAAC,GAAG;AAAA,IAC3B,CAAC,OAAO,iBAAiB,CAAC,GAAG,WAAW;AAAA;AAAA,EAAA,CACzC;AAGC,SAAA,qBAAC,UAAK,WAAW,YAAY,eAAa,QAAQ,oBAAkB,YAAY,KAC7E,UAAA;AAAA,IAAA,YACE,OAAO,YAAY,WAClB,oBAAC,YAAS,UAAU,SAAS,MAAM,SAAS,SAAS,OAAO,QAAQ,GAAG,KAAK,KAAK,GAAG,WAAW,OAAO,UAAW,CAAA,IAEjH,oBAAC,MAAK,EAAA,SAAkB,MAAM,SAAS,SAAS,OAAO,QAAQ,GAAG,KAAK,KAAK,GAAG,WAAW,OAAO,UAAW,CAAA;AAAA,IAE/G;AAAA,EAAA,GACH;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { palette, PaletteNames } from '../../theme/palette';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport enum TagSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum TagVariant {\n  normal = 'normal',\n  oncolor = 'oncolor',\n  emphasised = 'emphasised',\n}\n\nexport type TagColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;\n\nexport interface TagProps {\n  /** Sets the text of the tag */\n  children: string;\n  /** Sets the size of the tag. Default: medium */\n  size?: keyof typeof TagSize;\n  /** Sets the background of the tag. Default: blueberry */\n  color?: TagColors;\n  /** Adds an icon to the tag. */\n  svgIcon?: SvgIcon | IconName;\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, size = TagSize.medium, color = 'blueberry', svgIcon, variant = 'normal', testId } = props;\n\n  const tagClasses = cn(styles.tag, styles[`tag--${size}`], styles[`tag--${color}`], {\n    [styles['tag--has-icon']]: svgIcon,\n    [styles['tag--emphasised']]: variant == TagVariant.emphasised,\n  });\n\n  return (\n    <span className={tagClasses} data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {svgIcon &&\n        (typeof svgIcon === 'string' ? (\n          <LazyIcon iconName={svgIcon} size={IconSize.XXSmall} color={palette[`${color}800`]} className={styles.tag__icon} />\n        ) : (\n          <Icon svgIcon={svgIcon} size={IconSize.XXSmall} color={palette[`${color}800`]} className={styles.tag__icon} />\n        ))}\n      {children}\n    </span>\n  );\n};\n\nexport default Tag;\n"],"names":["TagSize","TagVariant","cn"],"mappings":";;;;;;;AAYO,IAAK,4BAAAA,aAAL;AACLA,WAAA,QAAA,IAAS;AACTA,WAAA,OAAA,IAAQ;AAFE,SAAAA;AAAA,GAAA,WAAA,CAAA,CAAA;AAKL,IAAK,+BAAAC,gBAAL;AACLA,cAAA,QAAA,IAAS;AACTA,cAAA,SAAA,IAAU;AACVA,cAAA,YAAA,IAAa;AAHH,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AAuBZ,MAAM,MAA0B,CAAA,UAAS;AACvC,QAAM,EAAE,UAAU,OAAO,UAAgB,QAAQ,aAAa,SAAS,UAAU,UAAU,OAAA,IAAW;AAEtG,QAAM,aAAaC,WAAG,OAAO,KAAK,OAAO,QAAQ,IAAI,EAAE,GAAG,OAAO,QAAQ,KAAK,EAAE,GAAG;AAAA,IACjF,CAAC,OAAO,eAAe,CAAC,GAAG;AAAA,IAC3B,CAAC,OAAO,iBAAiB,CAAC,GAAG,WAAW;AAAA;AAAA,EAAA,CACzC;AAED,SACE,qBAAC,UAAK,WAAW,YAAY,eAAa,QAAQ,oBAAkB,YAAY,KAC7E,UAAA;AAAA,IAAA,YACE,OAAO,YAAY,WAClB,oBAAC,YAAS,UAAU,SAAS,MAAM,SAAS,SAAS,OAAO,QAAQ,GAAG,KAAK,KAAK,GAAG,WAAW,OAAO,UAAA,CAAW,IAEjH,oBAAC,MAAA,EAAK,SAAkB,MAAM,SAAS,SAAS,OAAO,QAAQ,GAAG,KAAK,KAAK,GAAG,WAAW,OAAO,UAAA,CAAW;AAAA,IAE/G;AAAA,EAAA,GACH;AAEJ;"}

package/components/TagList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/TagList/TagList.tsx"],"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"],"names":["React"],"mappings":";;;;AAYA,MAAM,UAAuC,CAAC,EAAE,UAAU,aAAa;AAEnE,SAAA,oBAAC,MAAG,EAAA,WAAW,OAAO,UAAU,GAAG,eAAa,QAAQ,oBAAkB,YAAY,SACnF,UAAAA,eAAM,SAAS,IAAI,UAAU,CAC5B,UAAA,oBAAC,MAAG,EAAA,WAAW,OAAO,gBAAgB,GAAI,UAAM,MAAA,CAAA,CACjD,EACH,CAAA;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/TagList/TagList.tsx"],"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"],"names":["React"],"mappings":";;;;AAYA,MAAM,UAAuC,CAAC,EAAE,UAAU,aAAa;AACrE,SACE,oBAAC,MAAA,EAAG,WAAW,OAAO,UAAU,GAAG,eAAa,QAAQ,oBAAkB,YAAY,SACnF,UAAAA,eAAM,SAAS,IAAI,UAAU,CAAA,UAC5B,oBAAC,MAAA,EAAG,WAAW,OAAO,gBAAgB,GAAI,UAAA,MAAA,CAAM,CACjD,EAAA,CACH;AAEJ;"}

package/components/Tile/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Tile/Tile.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { TitleTags } from './../Title/Title';\nimport { useBreakpoint, Breakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { mergeRefs } from '../../utils/refs';\nimport { IconSize } from '../Icon';\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}\n\ninterface TileTitleProps {\n  children: React.ReactNode;\n  className?: string;\n  htmlMarkup?: TitleTags;\n  highlighted?: boolean;\n  compact?: boolean;\n}\n\nexport interface TileCompound extends React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLAnchorElement>> {\n  Title: React.ForwardRefExoticComponent<TileTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n}\n\nconst Title = React.forwardRef<HTMLHeadingElement, TileTitleProps>((props, ref) => {\n  const { compact, children, className, htmlMarkup = 'span', highlighted } = 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 = React.forwardRef<HTMLAnchorElement, TileProps>((props, ref) => {\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  } = props;\n  const { hoverRef, isHovered } = useHover<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, hoverRef])}\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        {React.cloneElement(icon, { size: mobile ? IconSize.Small : IconSize.Medium, isHovered, color: highlighted ? 'white' : 'black' })}\n        {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}) as TileCompound;\n\nTile.displayName = 'Tile';\nTile.Title = Title;\n\nexport default Tile;\n"],"names":["React"],"mappings":";;;;;;;;AA+CA,MAAM,QAAQA,eAAM,WAA+C,CAAC,OAAO,QAAQ;AACjF,QAAM,EAAE,SAAS,UAAU,WAAW,aAAa,QAAQ,gBAAgB;AAC3E,QAAM,eAAe;AAAA,IACnB,WAAW,aAAa;AAAA,IACxB;AAAA,MACE,CAAC,WAAW,0BAA0B,CAAC,GAAG;AAAA,MAC1C,CAAC,WAAW,sBAAsB,CAAC,GAAG;AAAA,IACxC;AAAA,IACA;AAAA,EACF;AACA,QAAM,YAAY;AAElB,SACG,oBAAA,WAAA,EAAU,WAAW,cAAc,KACjC,UACH;AAEJ,CAAC;AAED,MAAM,cAAc;AAEb,MAAM,OAAOA,eAAM,WAAyC,CAAC,OAAO,QAAQ;AAC3E,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM,EAAE,UAAU,UAAU,IAAI,SAA4B;AAC5D,QAAM,aAAa,cAAc;AAC3B,QAAA,SAAS,aAAa,WAAW;AACvC,QAAM,UAAU,YAAY;AAC5B,QAAM,cAAc;AAAA,IAClB,WAAW;AAAA,IACX;AAAA,MACE,CAAC,WAAW,aAAa,CAAC,GAAG;AAAA,MAC7B,CAAC,WAAW,eAAe,CAAC,GAAG;AAAA,MAC/B,CAAC,WAAW,mBAAmB,CAAC,GAAG;AAAA,IACrC;AAAA,IACA;AAAA,EACF;AACA,QAAM,0BAA0B,WAAW,WAAW,eAAe,GAAG;AAAA,IACtE,CAAC,WAAW,wBAAwB,CAAC,GAAG;AAAA,EAAA,CACzC;AAGC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK,UAAU,CAAC,KAAK,QAAQ,CAAC;AAAA,MAC9B;AAAA,MACA;AAAA,MACA,KAAK,WAAW,WAAW,wBAAwB;AAAA,MACnD,WAAW;AAAA,MACX,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAC9B;AAAA,MAEA,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAW,yBACb,UAAA;AAAA,UAAAA,eAAM,aAAa,MAAM,EAAE,MAAM,SAAS,SAAS,QAAQ,SAAS,QAAQ,WAAW,OAAO,cAAc,UAAU,SAAS;AAAA,UAC/HA,eAAM,aAAa,OAAO,EAAE,aAA0B,QAAkB,CAAA;AAAA,QAAA,GAC3E;AAAA,QACC,CAAC,WAAW,CAAC,8BAAW,KAAE,EAAA,WAAW,WAAW,mBAAoB,UAAY,YAAA,CAAA;AAAA,QAChF,YAAa,oBAAA,OAAA,EAAI,WAAW,WAAW,gBAAiB,SAAS,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACpE;AAEJ,CAAC;AAED,KAAK,cAAc;AACnB,KAAK,QAAQ;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tile/Tile.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { TitleTags } from './../Title/Title';\nimport { useBreakpoint, Breakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { mergeRefs } from '../../utils/refs';\nimport { IconSize } from '../Icon';\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}\n\ninterface TileTitleProps {\n  children: React.ReactNode;\n  className?: string;\n  htmlMarkup?: TitleTags;\n  highlighted?: boolean;\n  compact?: boolean;\n}\n\nexport interface TileCompound extends React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLAnchorElement>> {\n  Title: React.ForwardRefExoticComponent<TileTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n}\n\nconst Title = React.forwardRef<HTMLHeadingElement, TileTitleProps>((props, ref) => {\n  const { compact, children, className, htmlMarkup = 'span', highlighted } = 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 = React.forwardRef<HTMLAnchorElement, TileProps>((props, ref) => {\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  } = props;\n  const { hoverRef, isHovered } = useHover<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, hoverRef])}\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        {React.cloneElement(icon, { size: mobile ? IconSize.Small : IconSize.Medium, isHovered, color: highlighted ? 'white' : 'black' })}\n        {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}) as TileCompound;\n\nTile.displayName = 'Tile';\nTile.Title = Title;\n\nexport default Tile;\n"],"names":["React"],"mappings":";;;;;;;;AA+CA,MAAM,QAAQA,eAAM,WAA+C,CAAC,OAAO,QAAQ;AACjF,QAAM,EAAE,SAAS,UAAU,WAAW,aAAa,QAAQ,gBAAgB;AAC3E,QAAM,eAAe;AAAA,IACnB,WAAW,aAAa;AAAA,IACxB;AAAA,MACE,CAAC,WAAW,0BAA0B,CAAC,GAAG;AAAA,MAC1C,CAAC,WAAW,sBAAsB,CAAC,GAAG;AAAA,IAAA;AAAA,IAExC;AAAA,EAAA;AAEF,QAAM,YAAY;AAElB,SACE,oBAAC,WAAA,EAAU,WAAW,cAAc,KACjC,UACH;AAEJ,CAAC;AAED,MAAM,cAAc;AAEb,MAAM,OAAOA,eAAM,WAAyC,CAAC,OAAO,QAAQ;AACjF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM,EAAE,UAAU,UAAA,IAAc,SAAA;AAChC,QAAM,aAAa,cAAA;AACnB,QAAM,SAAS,aAAa,WAAW;AACvC,QAAM,UAAU,YAAY;AAC5B,QAAM,cAAc;AAAA,IAClB,WAAW;AAAA,IACX;AAAA,MACE,CAAC,WAAW,aAAa,CAAC,GAAG;AAAA,MAC7B,CAAC,WAAW,eAAe,CAAC,GAAG;AAAA,MAC/B,CAAC,WAAW,mBAAmB,CAAC,GAAG;AAAA,IAAA;AAAA,IAErC;AAAA,EAAA;AAEF,QAAM,0BAA0B,WAAW,WAAW,eAAe,GAAG;AAAA,IACtE,CAAC,WAAW,wBAAwB,CAAC,GAAG;AAAA,EAAA,CACzC;AAED,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK,UAAU,CAAC,KAAK,QAAQ,CAAC;AAAA,MAC9B;AAAA,MACA;AAAA,MACA,KAAK,WAAW,WAAW,wBAAwB;AAAA,MACnD,WAAW;AAAA,MACX,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAC9B;AAAA,MAEA,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAW,yBACb,UAAA;AAAA,UAAAA,eAAM,aAAa,MAAM,EAAE,MAAM,SAAS,SAAS,QAAQ,SAAS,QAAQ,WAAW,OAAO,cAAc,UAAU,SAAS;AAAA,UAC/HA,eAAM,aAAa,OAAO,EAAE,aAA0B,SAAkB;AAAA,QAAA,GAC3E;AAAA,QACC,CAAC,WAAW,CAAC,8BAAW,KAAA,EAAE,WAAW,WAAW,mBAAoB,UAAA,YAAA,CAAY;AAAA,QAChF,YAAY,oBAAC,OAAA,EAAI,WAAW,WAAW,gBAAiB,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGxE,CAAC;AAED,KAAK,cAAc;AACnB,KAAK,QAAQ;"}

package/components/Tile/styles.module.scss

@@ -75,9 +75,8 @@
   }
 
   &__title {
+    word-break: normal;
     overflow-wrap: break-word;
-    word-wrap: break-word;
-    word-break: break-word;
     font-size: font-settings.$font-size-sm;
     text-align: center;
     line-height: 1.74rem;

package/components/Toggle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\n\nimport classNames from 'classnames';\nimport { useAnimate } from 'motion/react';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\n\nimport styles from './styles.module.scss';\nimport '../../scss/supernova/styles/colors.css';\n\nexport type LabelText = {\n  text: string;\n  type?: 'subdued' | 'normal';\n};\n\nexport enum TogglePosition {\n  left = 'left',\n  right = 'right',\n}\n\nexport enum ToggleOnColor {\n  onwhite = 'onwhite',\n  onneutral = 'onneutral',\n  onblueberry = 'onblueberry',\n}\n\nexport interface ToggleProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\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  /** 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  label,\n  onChange,\n  onColor = ToggleOnColor.onwhite,\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 inputId = useUuid();\n  const toggleId = useUuid();\n  const toggleDotId = useUuid();\n  const labelId = useUuid();\n  const subLabelId = useUuid();\n  const { refObject, isHovered, isActive } = usePseudoClasses<HTMLLabelElement>(scope);\n  const showHoveredStyling = isHovered && !showToggleAnimation;\n  const isOnWhite = onColor === ToggleOnColor.onwhite;\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    animate('#' + toggleId, { background: getBackgroundColor() }, { duration: 0.2, ease: 'easeInOut' });\n    animate(\n      '#' + toggleDotId,\n      { background: checkedState ? 'var(--color-action-graphics-ondark)' : 'var(--core-color-neutral-700)' },\n      { duration: 0.2, ease: 'easeInOut' }\n    );\n    animate('#' + toggleDotId, { x: showHoveredStyling ? 9 : checkedState ? 18 : 0 }, { duration: 0.2, ease: 'easeInOut' });\n    animate('svg', { opacity: checkedState ? 1 : 0 }, { duration: 0.2, ease: 'easeInOut' });\n  }, [checkedState, showHoveredStyling, isActive]);\n\n  const getBackgroundColor = (): string => {\n    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  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\n  const toggleRowClassNames = classNames(styles['toggle-container__row'], {\n    [styles['toggle-container__row--right']]: togglePosition === TogglePosition.right,\n  });\n\n  const subLabelClassNames = classNames(styles['toggle-container__sublabel'], {\n    [styles['toggle-container__sublabel--toggle-right']]: togglePosition === TogglePosition.right,\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    <label ref={refObject} className={styles['toggle-container__toggle-group']}>\n      <input\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 : undefined}\n        role=\"switch\"\n      />\n      <span id={toggleId} className={toggleClassNames} aria-hidden=\"true\">\n        <span id={toggleDotId} className={toggleDotClassNames} aria-hidden=\"true\">\n          <svg\n            width=\"17\"\n            height=\"13\"\n            viewBox=\"0 0 17 13\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            className={styles['toggle-container__toggle__dot__icon']}\n          >\n            <path d=\"M15 2L6.80839 10.548L2 5.53145\" fill=\"none\" strokeWidth=\"3\" />\n          </svg>\n        </span>\n      </span>\n    </label>\n  );\n\n  const renderLabelText = (): React.ReactElement => {\n    return (\n      <span\n        id={labelId}\n        className={classNames(styles['toggle-container__label'], {\n          [styles['toggle-container__label--toggle-right']]: togglePosition === TogglePosition.right,\n        })}\n      >\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    );\n  };\n\n  return (\n    <div className={toggleContainerClassNames} data-testid={testId} data-analyticsid={AnalyticsId.Toggle}>\n      <div className={toggleRowClassNames}>\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      {subLabel && (\n        <div id={subLabelId} className={subLabelClassNames}>\n          {subLabel}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Toggle;\n"],"names":["TogglePosition","ToggleOnColor"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\n\nimport classNames from 'classnames';\nimport { useAnimate } from 'motion/react';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\n\nimport styles from './styles.module.scss';\nimport '../../scss/supernova/styles/colors.css';\n\nexport type LabelText = {\n  text: string;\n  type?: 'subdued' | 'normal';\n};\n\nexport enum TogglePosition {\n  left = 'left',\n  right = 'right',\n}\n\nexport enum ToggleOnColor {\n  onwhite = 'onwhite',\n  onneutral = 'onneutral',\n  onblueberry = 'onblueberry',\n}\n\nexport interface ToggleProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\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  /** 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  label,\n  onChange,\n  onColor = ToggleOnColor.onwhite,\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 inputId = useUuid();\n  const toggleId = useUuid();\n  const toggleDotId = useUuid();\n  const labelId = useUuid();\n  const subLabelId = useUuid();\n  const { refObject, isHovered, isActive } = usePseudoClasses<HTMLLabelElement>(scope);\n  const showHoveredStyling = isHovered && !showToggleAnimation;\n  const isOnWhite = onColor === ToggleOnColor.onwhite;\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    animate('#' + toggleId, { background: getBackgroundColor() }, { duration: 0.2, ease: 'easeInOut' });\n    animate(\n      '#' + toggleDotId,\n      { background: checkedState ? 'var(--color-action-graphics-ondark)' : 'var(--core-color-neutral-700)' },\n      { duration: 0.2, ease: 'easeInOut' }\n    );\n    animate('#' + toggleDotId, { x: showHoveredStyling ? 9 : checkedState ? 18 : 0 }, { duration: 0.2, ease: 'easeInOut' });\n    animate('svg', { opacity: checkedState ? 1 : 0 }, { duration: 0.2, ease: 'easeInOut' });\n  }, [checkedState, showHoveredStyling, isActive]);\n\n  const getBackgroundColor = (): string => {\n    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  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\n  const toggleRowClassNames = classNames(styles['toggle-container__row'], {\n    [styles['toggle-container__row--right']]: togglePosition === TogglePosition.right,\n  });\n\n  const subLabelClassNames = classNames(styles['toggle-container__sublabel'], {\n    [styles['toggle-container__sublabel--toggle-right']]: togglePosition === TogglePosition.right,\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    <label ref={refObject} className={styles['toggle-container__toggle-group']}>\n      <input\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 : undefined}\n        role=\"switch\"\n      />\n      <span id={toggleId} className={toggleClassNames} aria-hidden=\"true\">\n        <span id={toggleDotId} className={toggleDotClassNames} aria-hidden=\"true\">\n          <svg\n            width=\"17\"\n            height=\"13\"\n            viewBox=\"0 0 17 13\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            className={styles['toggle-container__toggle__dot__icon']}\n          >\n            <path d=\"M15 2L6.80839 10.548L2 5.53145\" fill=\"none\" strokeWidth=\"3\" />\n          </svg>\n        </span>\n      </span>\n    </label>\n  );\n\n  const renderLabelText = (): React.ReactElement => {\n    return (\n      <span\n        id={labelId}\n        className={classNames(styles['toggle-container__label'], {\n          [styles['toggle-container__label--toggle-right']]: togglePosition === TogglePosition.right,\n        })}\n      >\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    );\n  };\n\n  return (\n    <div className={toggleContainerClassNames} data-testid={testId} data-analyticsid={AnalyticsId.Toggle}>\n      <div className={toggleRowClassNames}>\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      {subLabel && (\n        <div id={subLabelId} className={subLabelClassNames}>\n          {subLabel}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Toggle;\n"],"names":["TogglePosition","ToggleOnColor"],"mappings":"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"}

package/components/Validation/index.js

@@ -18,7 +18,7 @@ import { T as Textarea } from "../../Textarea.js";
 const ErrorListItem = (props) => {
   const handleClick = (event, element) => {
     event == null ? void 0 : event.preventDefault();
-    (element == null ? void 0 : element.focus) && (element == null ? void 0 : element.focus());
+    if (element == null ? void 0 : element.focus) element == null ? void 0 : element.focus();
   };
   if (props.error.ref) {
     return /* @__PURE__ */ jsx(AnchorLink, { href: `#${props.name}`, onClick: (e) => handleClick(e, props.error.ref), children: props.error.message });

package/components/Validation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Validation/ErrorListItem.tsx","../../../src/components/Validation/ErrorList.tsx","../../../src/components/Validation/ValidationSummary.tsx","../../../src/components/Validation/Validation.tsx"],"sourcesContent":["import React from 'react';\n\nimport { ErrorDetails, FocusableElement } from './types';\nimport AnchorLink, { AnchorLinkOnClickEvent } 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    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 React from 'react';\n\nimport ErrorListItem from './ErrorListItem';\nimport { ValidationErrors } from './types';\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 React from 'react';\n\nimport classNames from 'classnames';\n\nimport ErrorList from './ErrorList';\nimport { ValidationErrors } from './types';\nimport { useUuid } from '../../hooks/useUuid';\nimport Title, { TitleTags } 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}\n\nconst ValidationSummary: React.FC<ValidationSummaryProps> = props => {\n  const { errorTitleHtmlMarkup = 'h2' } = props;\n  const titleId = useUuid();\n\n  const hasErrors = !!props.errors && Object.entries(props.errors).length > 0;\n\n  const summaryClasses = classNames(styles['validation__summary'], hasErrors && styles['validation__summary--visible']);\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 { ValidationErrors } from './types';\nimport ValidationSummary from './ValidationSummary';\nimport { AnalyticsId, FormSize } from '../../constants';\nimport { isComponent, isComponentWithDisplayName } from '../../utils/component';\nimport Checkbox, { CheckboxProps } from '../Checkbox';\nimport { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport FormGroup, { FormGroupProps } from '../FormGroup/FormGroup';\nimport Input, { InputProps } from '../Input';\nimport RadioButton, { RadioButtonProps } from '../RadioButton';\nimport Select, { SelectProps } from '../Select';\nimport Slider, { SliderProps } from '../Slider';\nimport Textarea, { TextareaProps } 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}\n\nexport const Validation = React.forwardRef((props: ValidationProps, ref: React.ForwardedRef<HTMLDivElement>) => {\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 (React.isValidElement(child) && child.type === 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={ref}>\n        {React.Children.map(props.children, (child: React.ReactNode) => renderChild(child))}\n      </div>\n      <ValidationSummary errorTitle={props.errorTitle} errors={props.errors} />\n    </>\n  );\n});\n\nValidation.displayName = 'Validation';\n\nexport default Validation;\n"],"names":["React","child"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Validation/ErrorListItem.tsx","../../../src/components/Validation/ErrorList.tsx","../../../src/components/Validation/ValidationSummary.tsx","../../../src/components/Validation/Validation.tsx"],"sourcesContent":["import React from 'react';\n\nimport { ErrorDetails, FocusableElement } from './types';\nimport AnchorLink, { AnchorLinkOnClickEvent } 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 React from 'react';\n\nimport ErrorListItem from './ErrorListItem';\nimport { ValidationErrors } from './types';\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 React from 'react';\n\nimport classNames from 'classnames';\n\nimport ErrorList from './ErrorList';\nimport { ValidationErrors } from './types';\nimport { useUuid } from '../../hooks/useUuid';\nimport Title, { TitleTags } 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}\n\nconst ValidationSummary: React.FC<ValidationSummaryProps> = props => {\n  const { errorTitleHtmlMarkup = 'h2' } = props;\n  const titleId = useUuid();\n\n  const hasErrors = !!props.errors && Object.entries(props.errors).length > 0;\n\n  const summaryClasses = classNames(styles['validation__summary'], hasErrors && styles['validation__summary--visible']);\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 { ValidationErrors } from './types';\nimport ValidationSummary from './ValidationSummary';\nimport { AnalyticsId, FormSize } from '../../constants';\nimport { isComponent, isComponentWithDisplayName } from '../../utils/component';\nimport Checkbox, { CheckboxProps } from '../Checkbox';\nimport { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport FormGroup, { FormGroupProps } from '../FormGroup/FormGroup';\nimport Input, { InputProps } from '../Input';\nimport RadioButton, { RadioButtonProps } from '../RadioButton';\nimport Select, { SelectProps } from '../Select';\nimport Slider, { SliderProps } from '../Slider';\nimport Textarea, { TextareaProps } 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}\n\nexport const Validation = React.forwardRef((props: ValidationProps, ref: React.ForwardedRef<HTMLDivElement>) => {\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 (React.isValidElement(child) && child.type === 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={ref}>\n        {React.Children.map(props.children, (child: React.ReactNode) => renderChild(child))}\n      </div>\n      <ValidationSummary errorTitle={props.errorTitle} errors={props.errors} />\n    </>\n  );\n});\n\nValidation.displayName = 'Validation';\n\nexport default Validation;\n"],"names":["React","child"],"mappings":"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"}

package/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../src/constants.ts"],"sourcesContent":["export enum IconSize {\n  XXSmall = 24,\n  XSmall = 38,\n  Small = 48,\n  Medium = 64,\n  Large = 80,\n  XLarge = 130,\n}\n\nexport enum ZIndex {\n  OverlayScreen = 1300000,\n  PopOver = 11000,\n  LightBoxButtons = 1000,\n}\n\nexport const AVERAGE_CHARACTER_WIDTH_PX = 12;\n\nexport interface HTMLButtonProps {\n  autoFocus?: boolean;\n  disabled?: boolean;\n  form?: string;\n  formAction?: string;\n  formEncType?: string;\n  formMethod?: string;\n  formNoValidate?: boolean;\n  formTarget?: string;\n  name?: string;\n  type?: 'submit' | 'reset' | 'button' | string;\n  value?: string | string[] | number;\n  id?: string;\n}\n\nexport type AnchorTarget = '_self' | '_blank' | '_parent' | '_top';\n\nexport interface HTMLAnchorProps {\n  download?: string;\n  href?: string;\n  hrefLang?: string;\n  media?: string;\n  ping?: string;\n  rel?: AnchorTarget;\n  target?: string;\n  referrerPolicy?:\n    | ''\n    | 'same-origin'\n    | 'no-referrer'\n    | 'no-referrer-when-downgrade'\n    | 'origin'\n    | 'origin-when-cross-origin'\n    | 'strict-origin'\n    | 'strict-origin-when-cross-origin'\n    | 'unsafe-url';\n}\n\nexport type ButtonVariant = 'secondary' | 'tertiary' | string | undefined | null;\n\nexport enum FormOnColor {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  ondark = 'ondark',\n  oninvalid = 'oninvalid',\n}\n\nexport enum FormSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum AnalyticsId {\n  AnchorLink = 'anchor-link',\n  ArticleTeaser = 'article-teaser',\n  Avatar = 'avatar',\n  Badge = 'badge',\n  Button = 'button',\n  Checkbox = 'checkbox',\n  Chip = 'chip',\n  Close = 'close',\n  DictionaryTrigger = 'dictionary-trigger',\n  Drawer = 'Drawer',\n  Dropdown = 'dropdown',\n  Duolist = 'duolist',\n  EmptyState = 'empty-state',\n  Expander = 'expander',\n  ExpanderHierarchy = 'expander-hierarchy',\n  ExpanderHierarchyExpander = 'expander-hierarchy-expander',\n  ExpanderList = 'expander-list',\n  ExpanderListExpander = 'expander-list-expander',\n  EyebrowHeader = 'eyebrow-header',\n  FormGroup = 'form-group',\n  FormLayout = 'form-layout',\n  HelpBubble = 'help-bubble',\n  HelpDrawer = 'help-drawer',\n  HelpExpanderInline = 'help-expander-inline',\n  HelpExpanderStandalone = 'help-expander-standalone',\n  HelpTooltip = 'help-tooltip',\n  HelpTriggerIcon = 'help-trigger-icon',\n  HelpTriggerInline = 'help-trigger-inline',\n  HelpTriggerStandalone = 'help-trigger-standalone',\n  HighlightPanel = 'highlight-panel',\n  Icon = 'icon',\n  Illustration = 'Illustration',\n  InfoTeaser = 'info-teaser',\n  Input = 'input',\n  Label = 'label',\n  Link = 'link',\n  LinkList = 'link-list',\n  List = 'list',\n  Loader = 'loader',\n  Logo = 'logo',\n  Modal = 'modal',\n  NotificationPanel = 'notification-panel',\n  PanelOld = 'panel',\n  PanelList = 'panel-list',\n  PopMenu = 'pop-menu',\n  PopOver = 'pop-over',\n  Portal = 'portal',\n  PromoPanel = 'promo-panel',\n  RadioButton = 'radio-button',\n  Select = 'select',\n  SharingStatus = 'sharing-status',\n  Slider = 'slider',\n  Spacer = 'spacer',\n  StatusDot = 'status-dot',\n  Step = 'step',\n  StepButtons = 'step-buttons',\n  Stepper = 'stepper',\n  Sublabel = 'sublabel',\n  Table = 'table',\n  Tag = 'tag',\n  TagList = 'tag-list',\n  Textarea = 'textarea',\n  Tile = 'tile',\n  Title = 'title',\n  Toggle = 'toggle',\n  Validation = 'validation',\n}\n\nexport enum KeyboardEventKey {\n  Enter = 'Enter',\n  Escape = 'Escape',\n  ArrowDown = 'ArrowDown',\n  ArrowUp = 'ArrowUp',\n  ArrowRight = 'ArrowRight',\n  ArrowLeft = 'ArrowLeft',\n  Home = 'Home',\n  End = 'End',\n  Space = ' ',\n  Tab = 'Tab',\n}\n\nexport enum LanguageLocales {\n  NORWEGIAN = 'nb-NO',\n  NORWEGIAN_NYNORSK = 'nn-NO',\n  ENGLISH = 'en-GB',\n  SAMI_NORTHERN = 'se-NO',\n}\n"],"names":["IconSize","ZIndex","FormOnColor","FormSize","AnalyticsId","KeyboardEventKey","LanguageLocales"],"mappings":"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"}
+{"version":3,"file":"constants.js","sources":["../src/constants.ts"],"sourcesContent":["export enum IconSize {\n  XXSmall = 24,\n  XSmall = 38,\n  Small = 48,\n  Medium = 64,\n  Large = 80,\n  XLarge = 130,\n}\n\nexport enum ZIndex {\n  OverlayScreen = 1300000,\n  PopOver = 11000,\n  LightBoxButtons = 1000,\n}\n\nexport const AVERAGE_CHARACTER_WIDTH_PX = 12;\n\nexport interface HTMLButtonProps {\n  autoFocus?: boolean;\n  disabled?: boolean;\n  form?: string;\n  formAction?: string;\n  formEncType?: string;\n  formMethod?: string;\n  formNoValidate?: boolean;\n  formTarget?: string;\n  name?: string;\n  type?: 'submit' | 'reset' | 'button' | string;\n  value?: string | string[] | number;\n  id?: string;\n}\n\nexport type AnchorTarget = '_self' | '_blank' | '_parent' | '_top';\n\nexport interface HTMLAnchorProps {\n  download?: string;\n  href?: string;\n  hrefLang?: string;\n  media?: string;\n  ping?: string;\n  rel?: AnchorTarget;\n  target?: string;\n  referrerPolicy?:\n    | ''\n    | 'same-origin'\n    | 'no-referrer'\n    | 'no-referrer-when-downgrade'\n    | 'origin'\n    | 'origin-when-cross-origin'\n    | 'strict-origin'\n    | 'strict-origin-when-cross-origin'\n    | 'unsafe-url';\n}\n\nexport type ButtonVariant = 'secondary' | 'tertiary' | string | undefined | null;\n\nexport enum FormOnColor {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  ondark = 'ondark',\n  oninvalid = 'oninvalid',\n}\n\nexport enum FormSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum AnalyticsId {\n  AnchorLink = 'anchor-link',\n  ArticleTeaser = 'article-teaser',\n  Avatar = 'avatar',\n  Badge = 'badge',\n  Button = 'button',\n  Checkbox = 'checkbox',\n  Chip = 'chip',\n  Close = 'close',\n  DictionaryTrigger = 'dictionary-trigger',\n  Drawer = 'Drawer',\n  Dropdown = 'dropdown',\n  Duolist = 'duolist',\n  EmptyState = 'empty-state',\n  Expander = 'expander',\n  ExpanderHierarchy = 'expander-hierarchy',\n  ExpanderHierarchyExpander = 'expander-hierarchy-expander',\n  ExpanderList = 'expander-list',\n  ExpanderListExpander = 'expander-list-expander',\n  EyebrowHeader = 'eyebrow-header',\n  FormGroup = 'form-group',\n  FormLayout = 'form-layout',\n  HelpBubble = 'help-bubble',\n  HelpDrawer = 'help-drawer',\n  HelpExpanderInline = 'help-expander-inline',\n  HelpExpanderStandalone = 'help-expander-standalone',\n  HelpTooltip = 'help-tooltip',\n  HelpTriggerIcon = 'help-trigger-icon',\n  HelpTriggerInline = 'help-trigger-inline',\n  HelpTriggerStandalone = 'help-trigger-standalone',\n  HighlightPanel = 'highlight-panel',\n  Icon = 'icon',\n  Illustration = 'Illustration',\n  InfoTeaser = 'info-teaser',\n  Input = 'input',\n  Label = 'label',\n  Link = 'link',\n  LinkList = 'link-list',\n  List = 'list',\n  Loader = 'loader',\n  Logo = 'logo',\n  Modal = 'modal',\n  NotificationPanel = 'notification-panel',\n  PanelOld = 'panel',\n  PanelList = 'panel-list',\n  PopMenu = 'pop-menu',\n  PopOver = 'pop-over',\n  Portal = 'portal',\n  PromoPanel = 'promo-panel',\n  RadioButton = 'radio-button',\n  Select = 'select',\n  SharingStatus = 'sharing-status',\n  Slider = 'slider',\n  Spacer = 'spacer',\n  StatusDot = 'status-dot',\n  Step = 'step',\n  StepButtons = 'step-buttons',\n  Stepper = 'stepper',\n  Sublabel = 'sublabel',\n  Table = 'table',\n  Tag = 'tag',\n  TagList = 'tag-list',\n  Textarea = 'textarea',\n  Tile = 'tile',\n  Title = 'title',\n  Toggle = 'toggle',\n  Validation = 'validation',\n}\n\nexport enum KeyboardEventKey {\n  Enter = 'Enter',\n  Escape = 'Escape',\n  ArrowDown = 'ArrowDown',\n  ArrowUp = 'ArrowUp',\n  ArrowRight = 'ArrowRight',\n  ArrowLeft = 'ArrowLeft',\n  Home = 'Home',\n  End = 'End',\n  Space = ' ',\n  Tab = 'Tab',\n}\n\nexport enum LanguageLocales {\n  NORWEGIAN = 'nb-NO',\n  NORWEGIAN_NYNORSK = 'nn-NO',\n  ENGLISH = 'en-GB',\n  SAMI_NORTHERN = 'se-NO',\n}\n"],"names":["IconSize","ZIndex","FormOnColor","FormSize","AnalyticsId","KeyboardEventKey","LanguageLocales"],"mappings":"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"}