@helsenorge/designsystem-react 16.1.0 → 16.2.0

package/lib/Button.js

@@ -39,9 +39,14 @@ var Button = (props) => {
 	const borderlessVariant = variant === "borderless";
 	const iconColor = getIconColor(variant === "fill", borderlessVariant, disabled, concept, onDark, isMobile);
 	const hasArrow = arrow === "icon" && !borderlessVariant;
+	const hasAccessibilityArrow = arrow !== void 0 && arrow !== "icon" && !fluid && !leftIcon && !rightIcon && !hasArrow && borderlessVariant;
 	const large = size === "large" && !destructive;
 	const largeBorderless = large && borderlessVariant;
-	const hasUURightArrow = arrow === "accessibility-character" && !fluid && !leftIcon && !rightIcon && !hasArrow && borderlessVariant;
+	const getAccessibilityArrow = () => {
+		if (arrow === "accessibility-character" || arrow === "inline-accessible-right") return "\xA0\xA0→";
+		else if (arrow === "inline-accessible-up") return "\xA0\xA0↑";
+		else return "\xA0\xA0↓";
+	};
 	const rest = { ...restProps };
 	const buttonWrapperClasses = classNames(buttonStyles["button-wrapper"], { [buttonStyles["button-wrapper--fluid"]]: fluid || ellipsis }, wrapperClassName);
 	const buttonClasses = classNames(buttonStyles.button, {
@@ -81,7 +86,7 @@ var Button = (props) => {
 			children: [disabled && borderlessVariant && /* @__PURE__ */ jsx("span", {
 				className: diagonalClasses,
 				children: /* @__PURE__ */ jsx("span", { className: buttonStyles["diagonal__line"] })
-			}), /* @__PURE__ */ jsx("span", { children: onlyIcon ? ariaLabel : restChildren })]
+			}), /* @__PURE__ */ jsx("span", { children: onlyIcon ? ariaLabel : /* @__PURE__ */ jsxs(Fragment, { children: [restChildren, hasAccessibilityArrow && getAccessibilityArrow()] }) })]
 		});
 	};
 	const renderbuttonContentWrapper = () => {
@@ -91,13 +96,7 @@ var Button = (props) => {
 			children: [
 				renderIcon(leftIcon, iconSize, !onlyIcon ? buttonStyles["button__left-icon"] : void 0),
 				renderButtonContent(),
-				hasArrow ? renderIcon(/* @__PURE__ */ jsx(Icon_default, { svgIcon: ArrowRight }), iconSize, classNames(buttonStyles["button__arrow"], { [buttonStyles["button__arrow--both-icons"]]: bothIcons })) : renderIcon(rightIcon, iconSize, buttonStyles["button__right-icon"]),
-				hasUURightArrow && /* @__PURE__ */ jsx("span", {
-					style: { color: iconColor },
-					className: buttonStyles["button__right-unicode-arrow"],
-					"aria-hidden": true,
-					children: "  →"
-				})
+				hasArrow ? renderIcon(/* @__PURE__ */ jsx(Icon_default, { svgIcon: ArrowRight }), iconSize, classNames(buttonStyles["button__arrow"], { [buttonStyles["button__arrow--both-icons"]]: bothIcons })) : renderIcon(rightIcon, iconSize, buttonStyles["button__right-icon"])
 			]
 		});
 	};

package/lib/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":[],"sources":["../src/components/Button/Button.tsx","../src/components/Button/index.ts"],"sourcesContent":["import React, { type AriaAttributes, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from './../Icon';\nimport { type HTMLButtonProps, type HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { type BaseIconElement, useIcons } from '../../hooks/useIcons';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys/color';\nimport { isTest, isProd } from '../../utils/environment';\nimport ArrowRight from '../Icons/ArrowRight';\n\nimport buttonStyles from './styles.module.scss';\n\nexport type ButtonConcept = 'normal' | 'destructive';\nexport type ButtonVariant = 'fill' | 'outline' | 'borderless';\nexport type ButtonSize = 'normal' | 'large';\nexport type ButtonOnColor = 'onlight' | 'ondark';\nexport type ButtonTags = 'button' | 'a';\nexport type ButtonArrows = 'icon' | 'accessibility-character';\nexport type ButtonTextPosition = 'left' | 'centered';\n\nexport interface ButtonProps extends Omit<HTMLButtonProps, 'onClick' | 'type'>, Omit<HTMLAnchorProps, 'onClick'>, AriaAttributes {\n  /** Sets the aria-label of the button, use when the button only includes an icon */\n  ariaLabel?: string;\n  /** Gives a unique id to the button */\n  id?: string;\n  /** Sets the content of the button. */\n  children: React.ReactNode;\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Enables an arrow icon to the right inside the button (Not available in borderless variant) */\n  arrow?: ButtonArrows;\n  /** Changes the intent of the button. Mostly changes the color profile. */\n  concept?: ButtonConcept;\n  /** Disables text wrapping and enables ellipsis. */\n  ellipsis?: boolean;\n  /** Makes the button scale to full width of its parent element. */\n  fluid?: boolean;\n  /** Changes the underlying element of the button. */\n  htmlMarkup?: ButtonTags;\n  /** Changes the button colors for different backgrounds. */\n  onColor?: ButtonOnColor;\n  /** Function that is called when the Button loses focus */\n  onBlur?: () => void;\n  /** Function that is called when clicked */\n  onClick?: (\n    e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<unknown> | React.KeyboardEvent<HTMLUListElement> | null\n  ) => void;\n  /** Changes the button colors for different backgrounds. (Large not available in borderless variant) */\n  size?: ButtonSize;\n  /** Changes the visual representation of the button. */\n  variant?: ButtonVariant;\n  /** Specifies the focus order relative to the other buttons or controls on the page  */\n  tabIndex?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Adds custom classes to the text */\n  textClassName?: string;\n  /** Sets the position of the text in the button - only applies when button is fluid */\n  textPosition?: ButtonTextPosition;\n  /** Button type. Default: button */\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n  /** Ref that is passed to the component */\n  ref?: React.RefObject<HTMLButtonElement | HTMLAnchorElement | null>;\n}\n\nconst getIconColor = (\n  fill: boolean,\n  borderless: boolean,\n  disabled: boolean,\n  concept: ButtonConcept,\n  ondark: boolean,\n  mobile: boolean\n): string => {\n  if (mobile && disabled) {\n    return !ondark || fill ? getColor('neutral', !borderless ? 700 : 500) : getColor('white');\n  }\n  if (disabled) {\n    return !ondark || fill ? getColor('neutral', 500) : `${getColor('white')}b3`;\n  }\n  if ((fill && !ondark) || (!fill && ondark)) {\n    return 'white';\n  }\n\n  return concept === 'normal' ? getColor('blueberry', 600) : getColor('cherry', 500);\n};\nconst getIconSize = (large: boolean, mobile: boolean, isBorderless: boolean): IconSize => {\n  if ((isBorderless && large) || (mobile && large)) {\n    return IconSize.Small;\n  }\n\n  if (large) {\n    return IconSize.Medium;\n  }\n\n  return IconSize.XSmall;\n};\n\nconst checkOnlyIconAria = (onlyIcon: boolean, ariaLabel: string | undefined, devEnv: boolean): void => {\n  if (devEnv && onlyIcon && (ariaLabel === undefined || ariaLabel === '')) {\n    // eslint-disable-next-line no-console\n    console.error(new Error('Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav'));\n  }\n};\n\nconst Button: React.FC<ButtonProps> = props => {\n  const {\n    ariaLabel,\n    id,\n    children,\n    wrapperClassName,\n    className,\n    arrow,\n    concept = 'normal',\n    disabled = false,\n    ellipsis = false,\n    fluid = false,\n    htmlMarkup = 'button',\n    onColor = 'onlight',\n    onBlur,\n    onClick,\n    size = 'normal',\n    variant = 'fill',\n    href,\n    tabIndex,\n    testId,\n    target,\n    type = 'button',\n    textClassName,\n    textPosition = 'left',\n    ref,\n    ...restProps\n  } = props;\n  const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement | HTMLAnchorElement | null>(ref);\n  const buttonContentRef = useRef<HTMLDivElement>(null);\n  const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;\n  const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;\n  const onDark = onColor === 'ondark';\n  const isMobile = useIsMobileBreakpoint();\n  const destructive = concept === 'destructive' && !disabled;\n  const outlineVariant = variant === 'outline';\n  const borderlessVariant = variant === 'borderless';\n  const iconColor = getIconColor(variant === 'fill', borderlessVariant, disabled, concept, onDark, isMobile);\n  const hasArrow = arrow === 'icon' && !borderlessVariant;\n  const large = size === 'large' && !destructive;\n  const largeBorderless = large && borderlessVariant;\n  const hasUURightArrow = arrow === 'accessibility-character' && !fluid && !leftIcon && !rightIcon && !hasArrow && borderlessVariant;\n  const rest = { ...restProps };\n\n  const buttonWrapperClasses = classNames(\n    buttonStyles['button-wrapper'],\n    { [buttonStyles['button-wrapper--fluid']]: fluid || ellipsis },\n    wrapperClassName\n  );\n  const buttonClasses = classNames(\n    buttonStyles.button,\n    {\n      [buttonStyles['button--destructive']]: destructive,\n      [buttonStyles['button--normal']]: !large,\n      [buttonStyles['button--large-non-borderless']]: large && !largeBorderless,\n      [buttonStyles['button--large-borderless']]: largeBorderless,\n      [buttonStyles['button--outline']]: outlineVariant,\n      [buttonStyles['button--borderless']]: borderlessVariant,\n      [buttonStyles['button--left-icon']]: leftIcon && !onlyIcon,\n      [buttonStyles['button--right-icon']]: rightIcon && !onlyIcon,\n      [buttonStyles['button--both-icons']]: bothIcons,\n      [buttonStyles['button--only-icon']]: onlyIcon,\n      [buttonStyles['button--arrow']]: hasArrow,\n      [buttonStyles['button--on-dark']]: onDark,\n    },\n    className\n  );\n  const buttonTextClasses = classNames(\n    buttonStyles['button__text'],\n    {\n      [buttonStyles['button__text--ellipsis']]: ellipsis,\n      [buttonStyles['button__text--centered']]: fluid && textPosition === 'centered',\n    },\n    textClassName\n  );\n  const diagonalClasses = classNames(buttonStyles['diagonal'], {\n    [buttonStyles['diagonal--on-dark']]: onDark,\n  });\n\n  useEffect(() => {\n    checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());\n  }, []);\n\n  const renderIcon = (iconElement: BaseIconElement | null, iconSize: number, iconClassName?: string): BaseIconElement | null => {\n    return iconElement\n      ? React.cloneElement(iconElement, {\n          size: iconSize,\n          color: iconElement?.props.color && !disabled ? iconElement.props.color : iconColor,\n          isHovered: iconElement.props.isHovered === undefined ? !disabled && isHovered : iconElement.props.isHovered,\n          className: iconClassName,\n        })\n      : null;\n  };\n\n  const renderButtonContent = (): React.ReactNode => {\n    return (\n      <span className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <span className={diagonalClasses}>\n            <span className={buttonStyles['diagonal__line']} />\n          </span>\n        )}\n        <span>{onlyIcon ? ariaLabel : restChildren}</span>\n      </span>\n    );\n  };\n\n  const renderbuttonContentWrapper = (): React.ReactNode => {\n    const iconSize = getIconSize(large, isMobile, borderlessVariant);\n\n    return (\n      <span className={buttonClasses}>\n        {renderIcon(leftIcon, iconSize, !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n        {renderButtonContent()}\n        {hasArrow\n          ? renderIcon(\n              <Icon svgIcon={ArrowRight} />,\n              iconSize,\n              classNames(buttonStyles['button__arrow'], { [buttonStyles['button__arrow--both-icons']]: bothIcons })\n            )\n          : renderIcon(rightIcon, iconSize, buttonStyles['button__right-icon'])}\n        {hasUURightArrow && (\n          <span style={{ color: iconColor }} className={buttonStyles['button__right-unicode-arrow']} aria-hidden>\n            {'  →'}\n          </span>\n        )}\n      </span>\n    );\n  };\n\n  return (\n    <>\n      {htmlMarkup === 'button' && (\n        <button\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          disabled={disabled}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          ref={refObject as React.RefObject<HTMLButtonElement>}\n          tabIndex={tabIndex}\n          type={type}\n          {...rest}\n        >\n          {renderbuttonContentWrapper()}\n        </button>\n      )}\n      {htmlMarkup === 'a' && (\n        <a\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          href={href}\n          target={target}\n          rel={target === '_blank' ? 'noopener noreferrer' : props.rel}\n          ref={refObject as React.RefObject<HTMLAnchorElement>}\n          tabIndex={tabIndex}\n          {...restProps}\n        >\n          {renderbuttonContentWrapper()}\n        </a>\n      )}\n    </>\n  );\n};\n\nexport default Button;\n","import Button from './Button';\nexport * from './Button';\nexport default Button;\n"],"mappings":"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"}
+{"version":3,"file":"Button.js","names":[],"sources":["../src/components/Button/Button.tsx","../src/components/Button/index.ts"],"sourcesContent":["import React, { type AriaAttributes, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from './../Icon';\nimport { type HTMLButtonProps, type HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { type BaseIconElement, useIcons } from '../../hooks/useIcons';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys/color';\nimport { isTest, isProd } from '../../utils/environment';\nimport ArrowRight from '../Icons/ArrowRight';\n\nimport buttonStyles from './styles.module.scss';\n\nexport type ButtonConcept = 'normal' | 'destructive';\nexport type ButtonVariant = 'fill' | 'outline' | 'borderless';\nexport type ButtonSize = 'normal' | 'large';\nexport type ButtonOnColor = 'onlight' | 'ondark';\nexport type ButtonTags = 'button' | 'a';\nexport type ButtonArrows =\n  'icon' | 'inline-accessible-right' | 'inline-accessible-up' | 'inline-accessible-down' | 'accessibility-character';\nexport type ButtonTextPosition = 'left' | 'centered';\n\nexport interface ButtonProps extends Omit<HTMLButtonProps, 'onClick' | 'type'>, Omit<HTMLAnchorProps, 'onClick'>, AriaAttributes {\n  /** Sets the aria-label of the button, use when the button only includes an icon */\n  ariaLabel?: string;\n  /** Gives a unique id to the button */\n  id?: string;\n  /** Sets the content of the button. */\n  children: React.ReactNode;\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Enables an arrow icon to the right inside the button (Not available in borderless variant) */\n  arrow?: ButtonArrows;\n  /** Changes the intent of the button. Mostly changes the color profile. */\n  concept?: ButtonConcept;\n  /** Disables text wrapping and enables ellipsis. */\n  ellipsis?: boolean;\n  /** Makes the button scale to full width of its parent element. */\n  fluid?: boolean;\n  /** Changes the underlying element of the button. */\n  htmlMarkup?: ButtonTags;\n  /** Changes the button colors for different backgrounds. */\n  onColor?: ButtonOnColor;\n  /** Function that is called when the Button loses focus */\n  onBlur?: () => void;\n  /** Function that is called when clicked */\n  onClick?: (\n    e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<unknown> | React.KeyboardEvent<HTMLUListElement> | null\n  ) => void;\n  /** Changes the button colors for different backgrounds. (Large not available in borderless variant) */\n  size?: ButtonSize;\n  /** Changes the visual representation of the button. */\n  variant?: ButtonVariant;\n  /** Specifies the focus order relative to the other buttons or controls on the page  */\n  tabIndex?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Adds custom classes to the text */\n  textClassName?: string;\n  /** Sets the position of the text in the button - only applies when button is fluid */\n  textPosition?: ButtonTextPosition;\n  /** Button type. Default: button */\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n  /** Ref that is passed to the component */\n  ref?: React.RefObject<HTMLButtonElement | HTMLAnchorElement | null>;\n}\n\nconst getIconColor = (\n  fill: boolean,\n  borderless: boolean,\n  disabled: boolean,\n  concept: ButtonConcept,\n  ondark: boolean,\n  mobile: boolean\n): string => {\n  if (mobile && disabled) {\n    return !ondark || fill ? getColor('neutral', !borderless ? 700 : 500) : getColor('white');\n  }\n  if (disabled) {\n    return !ondark || fill ? getColor('neutral', 500) : `${getColor('white')}b3`;\n  }\n  if ((fill && !ondark) || (!fill && ondark)) {\n    return 'white';\n  }\n\n  return concept === 'normal' ? getColor('blueberry', 600) : getColor('cherry', 500);\n};\nconst getIconSize = (large: boolean, mobile: boolean, isBorderless: boolean): IconSize => {\n  if ((isBorderless && large) || (mobile && large)) {\n    return IconSize.Small;\n  }\n\n  if (large) {\n    return IconSize.Medium;\n  }\n\n  return IconSize.XSmall;\n};\n\nconst checkOnlyIconAria = (onlyIcon: boolean, ariaLabel: string | undefined, devEnv: boolean): void => {\n  if (devEnv && onlyIcon && (ariaLabel === undefined || ariaLabel === '')) {\n    // eslint-disable-next-line no-console\n    console.error(new Error('Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav'));\n  }\n};\n\nconst Button: React.FC<ButtonProps> = props => {\n  const {\n    ariaLabel,\n    id,\n    children,\n    wrapperClassName,\n    className,\n    arrow,\n    concept = 'normal',\n    disabled = false,\n    ellipsis = false,\n    fluid = false,\n    htmlMarkup = 'button',\n    onColor = 'onlight',\n    onBlur,\n    onClick,\n    size = 'normal',\n    variant = 'fill',\n    href,\n    tabIndex,\n    testId,\n    target,\n    type = 'button',\n    textClassName,\n    textPosition = 'left',\n    ref,\n    ...restProps\n  } = props;\n  const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement | HTMLAnchorElement | null>(ref);\n  const buttonContentRef = useRef<HTMLDivElement>(null);\n  const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;\n  const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;\n  const onDark = onColor === 'ondark';\n  const isMobile = useIsMobileBreakpoint();\n  const destructive = concept === 'destructive' && !disabled;\n  const outlineVariant = variant === 'outline';\n  const borderlessVariant = variant === 'borderless';\n  const iconColor = getIconColor(variant === 'fill', borderlessVariant, disabled, concept, onDark, isMobile);\n  const hasArrow = arrow === 'icon' && !borderlessVariant;\n  const hasAccessibilityArrow =\n    arrow !== undefined && arrow !== 'icon' && !fluid && !leftIcon && !rightIcon && !hasArrow && borderlessVariant;\n  const large = size === 'large' && !destructive;\n  const largeBorderless = large && borderlessVariant;\n\n  const getAccessibilityArrow = (): string | null => {\n    const nonBreakSpace = '\\u00A0\\u00A0';\n\n    if (arrow === 'accessibility-character' || arrow === 'inline-accessible-right') {\n      return nonBreakSpace + '→';\n    } else if (arrow === 'inline-accessible-up') {\n      return nonBreakSpace + '↑';\n    } else {\n      return nonBreakSpace + '↓';\n    }\n  };\n  const rest = { ...restProps };\n\n  const buttonWrapperClasses = classNames(\n    buttonStyles['button-wrapper'],\n    { [buttonStyles['button-wrapper--fluid']]: fluid || ellipsis },\n    wrapperClassName\n  );\n  const buttonClasses = classNames(\n    buttonStyles.button,\n    {\n      [buttonStyles['button--destructive']]: destructive,\n      [buttonStyles['button--normal']]: !large,\n      [buttonStyles['button--large-non-borderless']]: large && !largeBorderless,\n      [buttonStyles['button--large-borderless']]: largeBorderless,\n      [buttonStyles['button--outline']]: outlineVariant,\n      [buttonStyles['button--borderless']]: borderlessVariant,\n      [buttonStyles['button--left-icon']]: leftIcon && !onlyIcon,\n      [buttonStyles['button--right-icon']]: rightIcon && !onlyIcon,\n      [buttonStyles['button--both-icons']]: bothIcons,\n      [buttonStyles['button--only-icon']]: onlyIcon,\n      [buttonStyles['button--arrow']]: hasArrow,\n      [buttonStyles['button--on-dark']]: onDark,\n    },\n    className\n  );\n  const buttonTextClasses = classNames(\n    buttonStyles['button__text'],\n    {\n      [buttonStyles['button__text--ellipsis']]: ellipsis,\n      [buttonStyles['button__text--centered']]: fluid && textPosition === 'centered',\n    },\n    textClassName\n  );\n  const diagonalClasses = classNames(buttonStyles['diagonal'], {\n    [buttonStyles['diagonal--on-dark']]: onDark,\n  });\n\n  useEffect(() => {\n    checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());\n  }, []);\n\n  const renderIcon = (iconElement: BaseIconElement | null, iconSize: number, iconClassName?: string): BaseIconElement | null => {\n    return iconElement\n      ? React.cloneElement(iconElement, {\n          size: iconSize,\n          color: iconElement?.props.color && !disabled ? iconElement.props.color : iconColor,\n          isHovered: iconElement.props.isHovered === undefined ? !disabled && isHovered : iconElement.props.isHovered,\n          className: iconClassName,\n        })\n      : null;\n  };\n\n  const renderButtonContent = (): React.ReactNode => {\n    return (\n      <span className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <span className={diagonalClasses}>\n            <span className={buttonStyles['diagonal__line']} />\n          </span>\n        )}\n        <span>\n          {onlyIcon ? (\n            ariaLabel\n          ) : (\n            <>\n              {restChildren}\n              {hasAccessibilityArrow && getAccessibilityArrow()}\n            </>\n          )}\n        </span>\n      </span>\n    );\n  };\n\n  const renderbuttonContentWrapper = (): React.ReactNode => {\n    const iconSize = getIconSize(large, isMobile, borderlessVariant);\n\n    return (\n      <span className={buttonClasses}>\n        {renderIcon(leftIcon, iconSize, !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n        {renderButtonContent()}\n        {hasArrow\n          ? renderIcon(\n              <Icon svgIcon={ArrowRight} />,\n              iconSize,\n              classNames(buttonStyles['button__arrow'], { [buttonStyles['button__arrow--both-icons']]: bothIcons })\n            )\n          : renderIcon(rightIcon, iconSize, buttonStyles['button__right-icon'])}\n      </span>\n    );\n  };\n\n  return (\n    <>\n      {htmlMarkup === 'button' && (\n        <button\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          disabled={disabled}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          ref={refObject as React.RefObject<HTMLButtonElement>}\n          tabIndex={tabIndex}\n          type={type}\n          {...rest}\n        >\n          {renderbuttonContentWrapper()}\n        </button>\n      )}\n      {htmlMarkup === 'a' && (\n        <a\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          href={href}\n          target={target}\n          rel={target === '_blank' ? 'noopener noreferrer' : props.rel}\n          ref={refObject as React.RefObject<HTMLAnchorElement>}\n          tabIndex={tabIndex}\n          {...restProps}\n        >\n          {renderbuttonContentWrapper()}\n        </a>\n      )}\n    </>\n  );\n};\n\nexport default Button;\n","import Button from './Button';\nexport * from './Button';\nexport default Button;\n"],"mappings":"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"}

package/lib/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [16.2.0](https://github.com/helsenorge/designsystem/compare/v16.1.0...v16.2.0) (2026-10-19)
+
+### Features
+
+* **button:**  arrow prop har fått inline accessible arrow up og down ([d9fbb3f](https://github.com/helsenorge/designsystem/commit/d9fbb3f552f8fa64a91deed23940354602aad940)), closes [#372257](https://github.com/helsenorge/designsystem/issues/372257)
+* **label:**  size large støtter sublabel og statusdot ([1dbf3b4](https://github.com/helsenorge/designsystem/commit/1dbf3b4e7b66686ae538065576a01873a81e213d)), closes [#385962](https://github.com/helsenorge/designsystem/issues/385962)
+
+### Bug Fixes
+
+*  popovers skal ikke skjules når trigger er utenfor skjermen ([70eba3a](https://github.com/helsenorge/designsystem/commit/70eba3a3d245c8693f39fd82e91abcc8f022fe74)), closes [#386662](https://github.com/helsenorge/designsystem/issues/386662)
+* **filter:**  justert spacing i headercontent ([c359c8c](https://github.com/helsenorge/designsystem/commit/c359c8c1bd1c4744d10daedb2da269b248c2d4b9)), closes [#384688](https://github.com/helsenorge/designsystem/issues/384688)
+
 ## [16.1.0](https://github.com/helsenorge/designsystem/compare/v16.0.0...v16.1.0) (2026-10-13)
 
 ### Features

package/lib/Checkbox.js

@@ -93,8 +93,6 @@ var Checkbox = (props) => {
 				onColor,
 				labelClassName: checkboxLabelClasses,
 				labelTextClassName: labelTextClasses,
-				sublabelWrapperClassName: checkboxStyles["checkbox-sublabel-wrapper"],
-				large,
 				afterLabelChildrenClassName: checkboxStyles["checkbox-afterlabelchildren-wrapper"]
 			})
 		})

package/lib/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":[],"sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport CheckboxMarker from './CheckboxMarker/CheckboxMarker';\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label/utils';\n\nimport checkboxStyles from './styles.module.scss';\n\nexport interface CheckboxProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the checkbox - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** input id of the checkbox */\n  inputId?: string;\n  /** Changes the visuals of the checkbox */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the checkbox */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nexport const Checkbox: React.FC<CheckboxProps> = props => {\n  const {\n    className,\n    checked = false,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId: errorTextIdProp,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    onChange,\n    ref,\n  } = props;\n\n  const [checkedControlledState, setCheckedControlledState] = useState(checked);\n  const [isChecked, setIsChecked] = useState(checked);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const onWhite = onColor === FormOnColor.onwhite;\n  const onGrey = onColor === FormOnColor.ongrey;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onInvalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const large = size === FormSize.large;\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const checkboxWrapperClasses = classNames(checkboxStyles['checkbox-wrapper'], {\n    [checkboxStyles['checkbox-wrapper--large']]: large,\n  });\n  const checkboxLabelClasses = classNames(checkboxStyles['checkbox-label'], {\n    [checkboxStyles['checkbox-label--disabled']]: disabled,\n    [checkboxStyles['checkbox-label--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label--large']]: large,\n    [checkboxStyles['checkbox-label__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__large--focus']]: large && isFocused,\n    [checkboxStyles['checkbox-label__large--on-white']]: large && onWhite,\n    [checkboxStyles['checkbox-label__large--on-grey']]: large && onGrey,\n    [checkboxStyles['checkbox-label__large--on-blueberry']]: large && onBlueberry,\n    [checkboxStyles['checkbox-label__large--on-invalid']]: large && onInvalid,\n    [checkboxStyles['checkbox-label__large--disabled']]: large && disabled,\n  });\n  const checkboxClasses = classNames(checkboxStyles.checkbox, className);\n  const labelTextClasses = classNames(checkboxStyles['checkbox-label__text'], {\n    [checkboxStyles['checkbox-label__text__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__text__large--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox-label__text--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label__text--disabled']]: disabled,\n  });\n\n  if (checked !== checkedControlledState && typeof checked !== 'undefined') {\n    setCheckedControlledState(checked);\n    setIsChecked(checked);\n  }\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n\n    setIsChecked(!isChecked);\n  };\n\n  const getLabelContent = (): React.ReactNode => {\n    return (\n      <>\n        <span className={checkboxStyles['checkbox__marker-wrapper']}>\n          <input\n            id={inputId}\n            name={name}\n            className={checkboxClasses}\n            type=\"checkbox\"\n            checked={isChecked}\n            disabled={disabled}\n            value={value}\n            ref={mergedRefs}\n            aria-describedby={getAriaDescribedBy(props, errorTextId)}\n            aria-invalid={error}\n            required={required}\n            onChange={onChangeHandler}\n          />\n          <CheckboxMarker checked={isChecked} disabled={disabled} error={error} onColor={onColor} size={size} />\n        </span>\n      </>\n    );\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n        {renderLabelAsParent({\n          label: label,\n          children: getLabelContent(),\n          inputId: inputId,\n          onColor: onColor as FormOnColor,\n          labelClassName: checkboxLabelClasses,\n          labelTextClassName: labelTextClasses,\n          sublabelWrapperClassName: checkboxStyles['checkbox-sublabel-wrapper'],\n          large: large,\n          afterLabelChildrenClassName: checkboxStyles['checkbox-afterlabelchildren-wrapper'],\n        })}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;;;AA+CA,IAAa,YAAoC,UAAS;CACxD,MAAM,EACJ,WACA,UAAU,OACV,UACA,OACA,UAAU,KAAK,GACf,UAAU,YAAY,SACtB,OAAO,SACP,MACA,WACA,QAAQ,CAAC,CAAC,WACV,aAAa,iBACb,uBACA,QAAQ,aAAa,KAAK,GAC1B,QACA,UACA,UACA,QACE;CAEJ,MAAM,CAAC,wBAAwB,6BAA6B,SAAS,OAAO;CAC5E,MAAM,CAAC,WAAW,gBAAgB,SAAS,OAAO;CAClD,MAAM,cAAc,kBAAkB,eAAe;CACrD,MAAM,UAAU,YAAY,YAAY;CACxC,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,cAAc,YAAY,YAAY;CAC5C,MAAM,YAAY,SAAS,YAAY,YAAY;CACnD,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,QAAQ,SAAS,SAAS;CAChC,MAAM,EAAE,WAAW,cAAc,iBAAmC,mBAAmB,GAAG,IAAI,MAAM,IAAI;CACxG,MAAM,aAAa,UAAU,CAAC,KAAK,SAAS,CAAC;CAE7C,MAAM,yBAAyB,WAAW,eAAe,qBAAqB,GAC3E,eAAe,6BAA6B,MAC/C,CAAC;CACD,MAAM,uBAAuB,WAAW,eAAe,mBAAmB;GACvE,eAAe,8BAA8B;GAC7C,eAAe,6BAA6B;GAC5C,eAAe,2BAA2B;GAC1C,eAAe,oCAAoC,SAAS;GAC5D,eAAe,kCAAkC,SAAS;GAC1D,eAAe,qCAAqC,SAAS;GAC7D,eAAe,oCAAoC,SAAS;GAC5D,eAAe,yCAAyC,SAAS;GACjE,eAAe,uCAAuC,SAAS;GAC/D,eAAe,qCAAqC,SAAS;CAChE,CAAC;CACD,MAAM,kBAAkB,WAAW,eAAe,UAAU,SAAS;CACrE,MAAM,mBAAmB,WAAW,eAAe,yBAAyB;GACzE,eAAe,0CAA0C,SAAS;GAClE,eAAe,0CAA0C,SAAS,aAAa;GAC/E,eAAe,mCAAmC;GAClD,eAAe,oCAAoC;CACtD,CAAC;CAED,IAAI,YAAY,0BAA0B,OAAO,YAAY,aAAa;EACxE,0BAA0B,OAAO;EACjC,aAAa,OAAO;CACtB;CAEA,MAAM,mBAAmB,MAAiD;EACxE,IAAI,UACF,SAAS,CAAC;EAGZ,aAAa,CAAC,SAAS;CACzB;CAEA,MAAM,wBAAyC;EAC7C,OACE,oBAAA,UAAA,EAAA,UACE,qBAAC,QAAD;GAAM,WAAW,eAAe;GAAhC,UAAA,CACE,oBAAC,SAAD;IACE,IAAI;IACE;IACN,WAAW;IACX,MAAK;IACL,SAAS;IACC;IACH;IACP,KAAK;IACL,oBAAkB,mBAAmB,OAAO,WAAW;IACvD,gBAAc;IACJ;IACV,UAAU;GACX,CAAA,GACD,oBAAC,gBAAD;IAAgB,SAAS;IAAqB;IAAiB;IAAgB;IAAe;GAAO,CAAA,CACjG;EACN,CAAA,EAAA,CAAA;CAEN;CAEA,OACE,oBAAC,sBAAD;EAAc,WAAW;EAAkC;EAAwB;EACjF,UAAA,oBAAC,OAAD;GAAK,eAAa;GAAQ,oBAAkB,YAAY;GAAU,WAAW;GAC1E,UAAA,oBAAoB;IACZ;IACP,UAAU,gBAAgB;IACjB;IACA;IACT,gBAAgB;IAChB,oBAAoB;IACpB,0BAA0B,eAAe;IAClC;IACP,6BAA6B,eAAe;GAC9C,CAAC;EACE,CAAA;CACO,CAAA;AAElB"}
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport CheckboxMarker from './CheckboxMarker/CheckboxMarker';\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label/utils';\n\nimport checkboxStyles from './styles.module.scss';\n\nexport interface CheckboxProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the checkbox - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** input id of the checkbox */\n  inputId?: string;\n  /** Changes the visuals of the checkbox */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the checkbox */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nexport const Checkbox: React.FC<CheckboxProps> = props => {\n  const {\n    className,\n    checked = false,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId: errorTextIdProp,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    onChange,\n    ref,\n  } = props;\n\n  const [checkedControlledState, setCheckedControlledState] = useState(checked);\n  const [isChecked, setIsChecked] = useState(checked);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const onWhite = onColor === FormOnColor.onwhite;\n  const onGrey = onColor === FormOnColor.ongrey;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onInvalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const large = size === FormSize.large;\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const checkboxWrapperClasses = classNames(checkboxStyles['checkbox-wrapper'], {\n    [checkboxStyles['checkbox-wrapper--large']]: large,\n  });\n  const checkboxLabelClasses = classNames(checkboxStyles['checkbox-label'], {\n    [checkboxStyles['checkbox-label--disabled']]: disabled,\n    [checkboxStyles['checkbox-label--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label--large']]: large,\n    [checkboxStyles['checkbox-label__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__large--focus']]: large && isFocused,\n    [checkboxStyles['checkbox-label__large--on-white']]: large && onWhite,\n    [checkboxStyles['checkbox-label__large--on-grey']]: large && onGrey,\n    [checkboxStyles['checkbox-label__large--on-blueberry']]: large && onBlueberry,\n    [checkboxStyles['checkbox-label__large--on-invalid']]: large && onInvalid,\n    [checkboxStyles['checkbox-label__large--disabled']]: large && disabled,\n  });\n  const checkboxClasses = classNames(checkboxStyles.checkbox, className);\n  const labelTextClasses = classNames(checkboxStyles['checkbox-label__text'], {\n    [checkboxStyles['checkbox-label__text__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__text__large--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox-label__text--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label__text--disabled']]: disabled,\n  });\n\n  if (checked !== checkedControlledState && typeof checked !== 'undefined') {\n    setCheckedControlledState(checked);\n    setIsChecked(checked);\n  }\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n\n    setIsChecked(!isChecked);\n  };\n\n  const getLabelContent = (): React.ReactNode => {\n    return (\n      <>\n        <span className={checkboxStyles['checkbox__marker-wrapper']}>\n          <input\n            id={inputId}\n            name={name}\n            className={checkboxClasses}\n            type=\"checkbox\"\n            checked={isChecked}\n            disabled={disabled}\n            value={value}\n            ref={mergedRefs}\n            aria-describedby={getAriaDescribedBy(props, errorTextId)}\n            aria-invalid={error}\n            required={required}\n            onChange={onChangeHandler}\n          />\n          <CheckboxMarker checked={isChecked} disabled={disabled} error={error} onColor={onColor} size={size} />\n        </span>\n      </>\n    );\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n        {renderLabelAsParent({\n          label: label,\n          children: getLabelContent(),\n          inputId: inputId,\n          onColor: onColor as FormOnColor,\n          labelClassName: checkboxLabelClasses,\n          labelTextClassName: labelTextClasses,\n          afterLabelChildrenClassName: checkboxStyles['checkbox-afterlabelchildren-wrapper'],\n        })}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;;;AA+CA,IAAa,YAAoC,UAAS;CACxD,MAAM,EACJ,WACA,UAAU,OACV,UACA,OACA,UAAU,KAAK,GACf,UAAU,YAAY,SACtB,OAAO,SACP,MACA,WACA,QAAQ,CAAC,CAAC,WACV,aAAa,iBACb,uBACA,QAAQ,aAAa,KAAK,GAC1B,QACA,UACA,UACA,QACE;CAEJ,MAAM,CAAC,wBAAwB,6BAA6B,SAAS,OAAO;CAC5E,MAAM,CAAC,WAAW,gBAAgB,SAAS,OAAO;CAClD,MAAM,cAAc,kBAAkB,eAAe;CACrD,MAAM,UAAU,YAAY,YAAY;CACxC,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,cAAc,YAAY,YAAY;CAC5C,MAAM,YAAY,SAAS,YAAY,YAAY;CACnD,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,QAAQ,SAAS,SAAS;CAChC,MAAM,EAAE,WAAW,cAAc,iBAAmC,mBAAmB,GAAG,IAAI,MAAM,IAAI;CACxG,MAAM,aAAa,UAAU,CAAC,KAAK,SAAS,CAAC;CAE7C,MAAM,yBAAyB,WAAW,eAAe,qBAAqB,GAC3E,eAAe,6BAA6B,MAC/C,CAAC;CACD,MAAM,uBAAuB,WAAW,eAAe,mBAAmB;GACvE,eAAe,8BAA8B;GAC7C,eAAe,6BAA6B;GAC5C,eAAe,2BAA2B;GAC1C,eAAe,oCAAoC,SAAS;GAC5D,eAAe,kCAAkC,SAAS;GAC1D,eAAe,qCAAqC,SAAS;GAC7D,eAAe,oCAAoC,SAAS;GAC5D,eAAe,yCAAyC,SAAS;GACjE,eAAe,uCAAuC,SAAS;GAC/D,eAAe,qCAAqC,SAAS;CAChE,CAAC;CACD,MAAM,kBAAkB,WAAW,eAAe,UAAU,SAAS;CACrE,MAAM,mBAAmB,WAAW,eAAe,yBAAyB;GACzE,eAAe,0CAA0C,SAAS;GAClE,eAAe,0CAA0C,SAAS,aAAa;GAC/E,eAAe,mCAAmC;GAClD,eAAe,oCAAoC;CACtD,CAAC;CAED,IAAI,YAAY,0BAA0B,OAAO,YAAY,aAAa;EACxE,0BAA0B,OAAO;EACjC,aAAa,OAAO;CACtB;CAEA,MAAM,mBAAmB,MAAiD;EACxE,IAAI,UACF,SAAS,CAAC;EAGZ,aAAa,CAAC,SAAS;CACzB;CAEA,MAAM,wBAAyC;EAC7C,OACE,oBAAA,UAAA,EAAA,UACE,qBAAC,QAAD;GAAM,WAAW,eAAe;GAAhC,UAAA,CACE,oBAAC,SAAD;IACE,IAAI;IACE;IACN,WAAW;IACX,MAAK;IACL,SAAS;IACC;IACH;IACP,KAAK;IACL,oBAAkB,mBAAmB,OAAO,WAAW;IACvD,gBAAc;IACJ;IACV,UAAU;GACX,CAAA,GACD,oBAAC,gBAAD;IAAgB,SAAS;IAAqB;IAAiB;IAAgB;IAAe;GAAO,CAAA,CACjG;EACN,CAAA,EAAA,CAAA;CAEN;CAEA,OACE,oBAAC,sBAAD;EAAc,WAAW;EAAkC;EAAwB;EACjF,UAAA,oBAAC,OAAD;GAAK,eAAa;GAAQ,oBAAkB,YAAY;GAAU,WAAW;GAC1E,UAAA,oBAAoB;IACZ;IACP,UAAU,gBAAgB;IACjB;IACA;IACT,gBAAgB;IAChB,oBAAoB;IACpB,6BAA6B,eAAe;GAC9C,CAAC;EACE,CAAA;CACO,CAAA;AAElB"}

package/lib/Drawer.js

@@ -11,10 +11,10 @@ import { useIsVisible } from "./hooks/useIsVisible.js";
 import { useKeyboardEvent } from "./hooks/useKeyboardEvent.js";
 import { useOutsideEvent } from "./hooks/useOutsideEvent.js";
 import { t as Close_default } from "./Close.js";
-import { useReturnFocusOnUnmount } from "./hooks/useReturnFocusOnUnmount.js";
-import { disableBodyScroll, enableBodyScroll } from "./utils/scroll.js";
 import ChevronLeft from "./components/Icons/ChevronLeft.js";
 import Title_default from "./components/Title/index.js";
+import { useReturnFocusOnUnmount } from "./hooks/useReturnFocusOnUnmount.js";
+import { disableBodyScroll, enableBodyScroll } from "./utils/scroll.js";
 import classNames from "classnames";
 import React, { useEffect, useRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -22,34 +22,6 @@ import { AnimatePresence, useAnimate, usePresence } from "motion/react";
 import styles from "./components/Drawer/DrawerBackButton.module.scss";
 import styles$1 from "./components/Drawer/DrawerHeaderContent.module.scss";
 import styles$2 from "./components/Drawer/styles.module.scss";
-var HN_Designsystem_Drawer_en_GB_default = {
-	ariaLabelCloseBtn: "Close",
-	ariaLabelBackButton: "Go back"
-};
-var HN_Designsystem_Drawer_nb_NO_default = {
-	ariaLabelBackButton: "Gå tilbake",
-	ariaLabelCloseBtn: "Lukk"
-};
-var HN_Designsystem_Drawer_nn_NO_default = {
-	ariaLabelCloseBtn: "Lukk",
-	ariaLabelBackButton: "Gå tilbake"
-};
-var HN_Designsystem_Drawer_se_NO_default = {
-	ariaLabelCloseBtn: "Gidde",
-	ariaLabelBackButton: "Mana ruovttoluotta"
-};
-//#endregion
-//#region src/components/Drawer/resourceHelper.ts
-var getResources = (language) => {
-	switch (language) {
-		case LanguageLocales.ENGLISH: return HN_Designsystem_Drawer_en_GB_default;
-		case LanguageLocales.NORWEGIAN_NYNORSK: return HN_Designsystem_Drawer_nn_NO_default;
-		case LanguageLocales.SAMI_NORTHERN: return HN_Designsystem_Drawer_se_NO_default;
-		case LanguageLocales.NORWEGIAN:
-		default: return HN_Designsystem_Drawer_nb_NO_default;
-	}
-};
-//#endregion
 //#region src/components/Drawer/DrawerBackButton.tsx
 var DrawerBackButton = (props) => {
 	const { ariaLabel = "Tilbake", onClick, className } = props;
@@ -95,6 +67,33 @@ var DrawerHeaderContent = (props) => {
 		})]
 	});
 };
+var HN_Designsystem_Drawer_en_GB_default = {
+	ariaLabelCloseBtn: "Close",
+	ariaLabelBackButton: "Go back"
+};
+var HN_Designsystem_Drawer_nb_NO_default = {
+	ariaLabelBackButton: "Gå tilbake",
+	ariaLabelCloseBtn: "Lukk"
+};
+var HN_Designsystem_Drawer_nn_NO_default = {
+	ariaLabelCloseBtn: "Lukk",
+	ariaLabelBackButton: "Gå tilbake"
+};
+var HN_Designsystem_Drawer_se_NO_default = {
+	ariaLabelCloseBtn: "Gidde",
+	ariaLabelBackButton: "Mana ruovttoluotta"
+};
+//#endregion
+//#region src/components/Drawer/resourceHelper.ts
+var getResources = (language) => {
+	switch (language) {
+		case LanguageLocales.ENGLISH: return HN_Designsystem_Drawer_en_GB_default;
+		case LanguageLocales.NORWEGIAN_NYNORSK: return HN_Designsystem_Drawer_nn_NO_default;
+		case LanguageLocales.SAMI_NORTHERN: return HN_Designsystem_Drawer_se_NO_default;
+		case LanguageLocales.NORWEGIAN:
+		default: return HN_Designsystem_Drawer_nb_NO_default;
+	}
+};
 //#endregion
 //#region src/components/Drawer/Drawer.tsx
 var Drawer = (props) => {

package/lib/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","names":[],"sources":["../src/resources/HN.Designsystem.Drawer.en-GB.json","../src/resources/HN.Designsystem.Drawer.nb-NO.json","../src/resources/HN.Designsystem.Drawer.nn-NO.json","../src/resources/HN.Designsystem.Drawer.se-NO.json","../src/components/Drawer/resourceHelper.ts","../src/components/Drawer/DrawerBackButton.tsx","../src/components/Drawer/DrawerHeaderContent.tsx","../src/components/Drawer/Drawer.tsx","../src/components/Drawer/index.ts"],"sourcesContent":["{\n  \"ariaLabelCloseBtn\": \"Close\",\n  \"ariaLabelBackButton\": \"Go back\"\n}\n","{\n  \"ariaLabelBackButton\": \"Gå tilbake\",\n  \"ariaLabelCloseBtn\": \"Lukk\"\n}\n","{\n  \"ariaLabelCloseBtn\": \"Lukk\",\n  \"ariaLabelBackButton\": \"Gå tilbake\"\n}\n","{\n  \"ariaLabelCloseBtn\": \"Gidde\",\n  \"ariaLabelBackButton\": \"Mana ruovttoluotta\"\n}\n","import type { HNDesignsystemDrawer } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Drawer.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Drawer.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.Drawer.nn-NO.json';\nimport seNO from '../../resources/HN.Designsystem.Drawer.se-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDrawer => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN_NYNORSK:\n      return nnNO;\n    case LanguageLocales.SAMI_NORTHERN:\n      return seNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import classNames from 'classnames';\n\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport Icon from '../Icon';\nimport ChevronLeft from '../Icons/ChevronLeft';\n\nimport styles from './DrawerBackButton.module.scss';\n\nexport interface DrawerBackButtonProps {\n  /** Function is called when user clicks the button */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n}\n\nconst DrawerBackButton: React.FC<DrawerBackButtonProps> = props => {\n  const { ariaLabel = 'Tilbake', onClick, className } = props;\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n\n  const iconSize = useIsMobileBreakpoint() ? 38 : 48;\n\n  return (\n    <button ref={refObject} className={classNames(styles['back-button'], className)} aria-label={ariaLabel} onClick={onClick} type=\"button\">\n      <span className={classNames(styles['back-button__inner-container'])}>\n        <Icon svgIcon={ChevronLeft} color={'var(--color-action-graphics-dark-normal'} size={iconSize} isHovered={isHovered} />\n      </span>\n    </button>\n  );\n};\n\nexport default DrawerBackButton;\n","import type React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { TitleTags } from '../Title';\n\nimport DrawerBackButton from './DrawerBackButton';\nimport Title from '../Title';\n\nimport styles from './DrawerHeaderContent.module.scss';\n\nexport interface DrawerHeaderContentProps {\n  /** Title shown in the header */\n  title?: React.ReactNode;\n  /** id of the title element */\n  titleId?: string;\n  /** Ref passed to the title heading element */\n  titleRef?: React.Ref<HTMLHeadingElement | null>;\n  /** Changes the underlying element of the title. Default: h3 */\n  titleHtmlMarkup?: TitleTags;\n  /** Shows a back button before the title. When present the title is centered. */\n  withBackButton?: boolean;\n  /** Callback for the back button */\n  onRequestBack?: () => void;\n  /** Sets the aria-label of the back button */\n  backButtonAriaLabel?: string;\n  /** Adds custom classes to the root element. */\n  className?: string;\n}\n\nconst DrawerHeaderContent: React.FC<DrawerHeaderContentProps> = props => {\n  const { title, titleId, titleRef, titleHtmlMarkup = 'h3', withBackButton, onRequestBack, backButtonAriaLabel, className } = props;\n\n  return (\n    <div className={classNames(styles['header-content'], className)}>\n      <span\n        className={classNames(styles['header-content__title'], {\n          [styles['header-content__title--centered']]: withBackButton,\n        })}\n      >\n        <Title id={titleId} ref={titleRef} tabIndex={-1} htmlMarkup={titleHtmlMarkup} appearance=\"title3\">\n          {title}\n        </Title>\n      </span>\n      {withBackButton && (\n        <DrawerBackButton ariaLabel={backButtonAriaLabel} onClick={onRequestBack} className={styles['header-content__back-button']} />\n      )}\n    </div>\n  );\n};\n\nexport default DrawerHeaderContent;\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { AnimatePresence, useAnimate, usePresence } from 'motion/react';\n\nimport type { HNDesignsystemDrawer } from '../../resources/Resources';\nimport type { TitleTags } from '../Title';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, KeyboardEventKey, LanguageLocales, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useKeyboardEvent } from '../../hooks/useKeyboardEvent';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { disableBodyScroll, enableBodyScroll } from '../../utils/scroll';\nimport uuid from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport DrawerHeaderContent from './DrawerHeaderContent';\n\nimport styles from './styles.module.scss';\n\ntype DesktopDirections = 'left' | 'right';\ntype PaddingSizes = 'normal' | 'extra';\n\nexport interface DrawerProps extends InnerDrawerProps {\n  /** Opens and closes the drawer */\n  isOpen: boolean;\n}\n\nexport interface InnerDrawerProps {\n  /** Sets the aria-label of the drawer */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the drawer */\n  ariaLabelledBy?: string;\n  /** Sets the style of the Drawer Close button. Meant for use by HelpDrawer */\n  closeColor?: 'blueberry' | 'plum';\n  /** Direction of the drawer on desktop. Default: left */\n  desktopDirection?: DesktopDirections;\n  /** Sets the style of the Drawer header */\n  headerClasses?: string;\n  /** Optional content that replaces the default title (and back button) in the header. The close button is still rendered. */\n  headerContent?: React.ReactNode;\n  /** Title to display in the header of the drawer */\n  title?: string;\n  /** id of the drawer title */\n  titleId?: string;\n  /** Changes the underlying element of the title. Default: h3 */\n  titleHtmlMarkup?: TitleTags;\n  /** Callback that triggers when clicking on close button or outside the drawer, update isOpen state when this triggers */\n  onRequestClose?: () => void;\n  /** Optional footer content that can be rendered instead of default CTA(s) */\n  footerContent?: React.ReactNode;\n  /** Main content of the drawer */\n  children?: React.ReactNode;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Primary CTA callback */\n  onPrimaryAction?: () => void;\n  /** Text for primary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n  primaryActionText?: string;\n  /** Text for secondary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n  secondaryActionText?: string;\n  /** Secondary CTA callback */\n  onSecondaryAction?: () => void;\n  /** Customize the z-index of the drawer */\n  zIndex?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemDrawer>;\n  /** Sets mobile styling and animation from outer level Drawer */\n  isMobile?: boolean;\n  /** Sets classname for content part in Drawer */\n  contentClassName?: string;\n  /** Sets the content padding of the Drawer */\n  paddingSize?: PaddingSizes;\n}\n\nconst Drawer: React.FC<DrawerProps> = props => {\n  const { isOpen, ...rest } = props;\n  const isMobile = useIsMobileBreakpoint();\n\n  return <AnimatePresence>{isOpen && <InnerDrawer {...rest} isMobile={isMobile} />}</AnimatePresence>;\n};\n\nconst InnerDrawer: React.FC<InnerDrawerProps> = props => {\n  const {\n    ariaLabel,\n    ariaLabelledBy,\n    children,\n    closeColor = 'blueberry',\n    desktopDirection = 'left',\n    footerContent,\n    headerClasses,\n    headerContent,\n    noCloseButton = false,\n    onPrimaryAction,\n    onRequestClose,\n    onSecondaryAction,\n    primaryActionText,\n    secondaryActionText,\n    title,\n    titleHtmlMarkup = 'h3',\n    titleId = uuid(),\n    zIndex = ZIndex.OverlayScreen,\n    resources,\n    isMobile,\n    contentClassName,\n    paddingSize = 'normal',\n  } = props;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledBy, fallbackId: titleId });\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  // topContent and bottomContent are used to detect scroll position for shadow effects\n  const topContent = useRef<HTMLDivElement>(null);\n  const bottomContent = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null);\n  const footerRef = useRef<HTMLDivElement>(null);\n  const titleRef = useRef<HTMLHeadingElement>(null);\n  const [scope, animate] = useAnimate();\n  const [isPresent, safeToRemove] = usePresence();\n  const [headerHeight, setHeaderHeight] = React.useState(0);\n  const [footerHeight, setFooterHeight] = React.useState(0);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContentVisible = useIsVisible(bottomContent, 0);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemDrawer = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  // eslint-disable-next-line react-hooks/refs\n  const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;\n  const headerStyling = classNames(\n    styles.drawer__header,\n    { [styles['drawer__header--padding-extra']]: paddingSize === 'extra' },\n    headerClasses\n  );\n  const hasFooterContent = (typeof footerContent !== 'undefined' && footerContent) || onPrimaryAction || onSecondaryAction;\n\n  useFocusTrap(containerRef, true);\n  useReturnFocusOnUnmount(containerRef);\n  useOutsideEvent(containerRef, () => {\n    if (onRequestClose) onRequestClose();\n  });\n  useKeyboardEvent(containerRef, () => onRequestClose && onRequestClose(), [KeyboardEventKey.Escape]);\n\n  // Close animasjon, vi kaller `onClose()` til slutt\n  const closeDrawer = (): void => {\n    if (!overlayRef.current || !containerRef.current) return;\n\n    animate(overlayRef.current, { opacity: 0, pointerEvents: 'none' }, { duration: 0.3, ease: 'easeInOut' });\n\n    if (isMobile) {\n      animate(\n        containerRef.current,\n        { y: '100%' },\n        {\n          duration: 0.3,\n          ease: 'easeInOut',\n          onComplete: () => {\n            if (safeToRemove) safeToRemove();\n          },\n        }\n      );\n    } else {\n      animate(\n        containerRef.current,\n        { x: desktopDirection === 'left' ? '-100%' : '100%' },\n        {\n          duration: 0.3,\n          ease: 'easeInOut',\n          onComplete: () => {\n            if (safeToRemove) safeToRemove();\n          },\n        }\n      );\n    }\n  };\n\n  useEffect(() => {\n    containerRef.current?.focus();\n    disableBodyScroll();\n\n    return (): void => {\n      enableBodyScroll();\n    };\n  }, []);\n\n  // Measure header and footer heights\n  useEffect(() => {\n    const updateHeights = (): void => {\n      if (headerRef.current) {\n        setHeaderHeight(headerRef.current.offsetHeight);\n      }\n      if (footerRef.current) {\n        setFooterHeight(footerRef.current.offsetHeight);\n      }\n    };\n\n    updateHeights();\n\n    // Update heights when content changes\n    const resizeObserver = new ResizeObserver(updateHeights);\n    if (headerRef.current) {\n      resizeObserver.observe(headerRef.current);\n    }\n    if (footerRef.current) {\n      resizeObserver.observe(footerRef.current);\n    }\n\n    return (): void => {\n      resizeObserver.disconnect();\n    };\n  }, [hasFooterContent]);\n\n  // Open animation.\n  useEffect(() => {\n    if (!overlayRef.current || !containerRef.current) return;\n\n    if (!isPresent) {\n      closeDrawer();\n      return;\n    }\n\n    if (isMobile) {\n      animate(containerRef.current, { y: '0' }, { duration: 0.3, ease: 'easeInOut' });\n    } else {\n      animate(containerRef.current, { x: '0' }, { duration: 0.3, ease: 'easeInOut' });\n    }\n\n    animate(overlayRef.current, { opacity: 1, pointerEvents: 'auto' }, { duration: 0.3, ease: 'easeInOut' });\n  }, [isPresent]);\n\n  const handleCTA = (callback?: () => void): void => {\n    if (callback) {\n      callback();\n    }\n  };\n\n  useEffect(() => {\n    titleRef.current?.focus();\n  }, [title]);\n\n  const headerMain = (\n    <DrawerHeaderContent\n      title={title}\n      titleId={ariaLabelAttributes?.['aria-labelledby']}\n      titleRef={titleRef}\n      titleHtmlMarkup={titleHtmlMarkup}\n      backButtonAriaLabel={mergedResources.ariaLabelBackButton}\n    />\n  );\n\n  return (\n    <div className={styles.drawer} ref={scope} style={{ zIndex }} data-analyticsid={AnalyticsId.Drawer}>\n      <div className={styles.drawer__overlay} ref={overlayRef} aria-hidden=\"true\" />\n      <div\n        className={classNames(styles.drawer__container, {\n          [styles['drawer__container--right']]: desktopDirection === 'right',\n        })}\n        ref={containerRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabIndex={-1}\n        {...ariaLabelAttributes}\n      >\n        <div className={styles.drawer__container__inner}>\n          <div className={headerStyling} ref={headerRef}>\n            {headerContent ?? headerMain}\n            {!noCloseButton && onRequestClose != undefined && (\n              <Close\n                ariaLabel={mergedResources.ariaLabelCloseBtn}\n                color={closeColor}\n                onClick={onRequestClose}\n                className={styles['drawer__header__close-button']}\n              />\n            )}\n          </div>\n          <div\n            className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--top'])}\n            style={{\n              opacity: !topContentVisible && contentIsScrollable ? 1 : 0,\n              top: headerHeight,\n            }}\n          />\n          <div\n            className={classNames(styles.drawer__content, contentClassName)}\n            tabIndex={contentIsScrollable ? 0 : undefined}\n            role={contentIsScrollable ? 'region' : undefined}\n            {...(contentIsScrollable ? ariaLabelAttributes : {})}\n            ref={contentRef}\n          >\n            <div ref={topContent} />\n            <div\n              className={classNames(styles['drawer__content__children'], {\n                [styles['drawer__content__children--padding-extra']]: paddingSize === 'extra',\n              })}\n              data-overflow-boundary\n            >\n              {children}\n            </div>\n            <div ref={bottomContent} style={{ height: '1px' }} />\n          </div>\n          <div\n            className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--bottom'])}\n            style={{\n              opacity: !bottomContentVisible && contentIsScrollable ? 1 : 0,\n              bottom: hasFooterContent ? footerHeight : 0,\n            }}\n          />\n        </div>\n        {hasFooterContent && (\n          <div\n            className={classNames(styles.drawer__footer, { [styles['drawer__footer--padding-extra']]: paddingSize === 'extra' })}\n            ref={footerRef}\n          >\n            {footerContent ? (\n              footerContent\n            ) : (\n              <>\n                {onPrimaryAction && <Button onClick={() => handleCTA(onPrimaryAction)}>{primaryActionText}</Button>}\n                {onSecondaryAction && (\n                  <Button variant=\"borderless\" onClick={() => handleCTA(onSecondaryAction)}>\n                    {secondaryActionText}\n                  </Button>\n                )}\n              </>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Drawer;\n","import Drawer from './Drawer';\nexport * from './Drawer';\nexport default Drawer;\n"],"mappings":"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"}
+{"version":3,"file":"Drawer.js","names":[],"sources":["../src/components/Drawer/DrawerBackButton.tsx","../src/components/Drawer/DrawerHeaderContent.tsx","../src/resources/HN.Designsystem.Drawer.en-GB.json","../src/resources/HN.Designsystem.Drawer.nb-NO.json","../src/resources/HN.Designsystem.Drawer.nn-NO.json","../src/resources/HN.Designsystem.Drawer.se-NO.json","../src/components/Drawer/resourceHelper.ts","../src/components/Drawer/Drawer.tsx","../src/components/Drawer/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport Icon from '../Icon';\nimport ChevronLeft from '../Icons/ChevronLeft';\n\nimport styles from './DrawerBackButton.module.scss';\n\nexport interface DrawerBackButtonProps {\n  /** Function is called when user clicks the button */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n}\n\nconst DrawerBackButton: React.FC<DrawerBackButtonProps> = props => {\n  const { ariaLabel = 'Tilbake', onClick, className } = props;\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n\n  const iconSize = useIsMobileBreakpoint() ? 38 : 48;\n\n  return (\n    <button ref={refObject} className={classNames(styles['back-button'], className)} aria-label={ariaLabel} onClick={onClick} type=\"button\">\n      <span className={classNames(styles['back-button__inner-container'])}>\n        <Icon svgIcon={ChevronLeft} color={'var(--color-action-graphics-dark-normal'} size={iconSize} isHovered={isHovered} />\n      </span>\n    </button>\n  );\n};\n\nexport default DrawerBackButton;\n","import type React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { TitleTags } from '../Title';\n\nimport DrawerBackButton from './DrawerBackButton';\nimport Title from '../Title';\n\nimport styles from './DrawerHeaderContent.module.scss';\n\nexport interface DrawerHeaderContentProps {\n  /** Title shown in the header */\n  title?: React.ReactNode;\n  /** id of the title element */\n  titleId?: string;\n  /** Ref passed to the title heading element */\n  titleRef?: React.Ref<HTMLHeadingElement | null>;\n  /** Changes the underlying element of the title. Default: h3 */\n  titleHtmlMarkup?: TitleTags;\n  /** Shows a back button before the title. When present the title is centered. */\n  withBackButton?: boolean;\n  /** Callback for the back button */\n  onRequestBack?: () => void;\n  /** Sets the aria-label of the back button */\n  backButtonAriaLabel?: string;\n  /** Adds custom classes to the root element. */\n  className?: string;\n}\n\nconst DrawerHeaderContent: React.FC<DrawerHeaderContentProps> = props => {\n  const { title, titleId, titleRef, titleHtmlMarkup = 'h3', withBackButton, onRequestBack, backButtonAriaLabel, className } = props;\n\n  return (\n    <div className={classNames(styles['header-content'], className)}>\n      <span\n        className={classNames(styles['header-content__title'], {\n          [styles['header-content__title--centered']]: withBackButton,\n        })}\n      >\n        <Title id={titleId} ref={titleRef} tabIndex={-1} htmlMarkup={titleHtmlMarkup} appearance=\"title3\">\n          {title}\n        </Title>\n      </span>\n      {withBackButton && (\n        <DrawerBackButton ariaLabel={backButtonAriaLabel} onClick={onRequestBack} className={styles['header-content__back-button']} />\n      )}\n    </div>\n  );\n};\n\nexport default DrawerHeaderContent;\n","{\n  \"ariaLabelCloseBtn\": \"Close\",\n  \"ariaLabelBackButton\": \"Go back\"\n}\n","{\n  \"ariaLabelBackButton\": \"Gå tilbake\",\n  \"ariaLabelCloseBtn\": \"Lukk\"\n}\n","{\n  \"ariaLabelCloseBtn\": \"Lukk\",\n  \"ariaLabelBackButton\": \"Gå tilbake\"\n}\n","{\n  \"ariaLabelCloseBtn\": \"Gidde\",\n  \"ariaLabelBackButton\": \"Mana ruovttoluotta\"\n}\n","import type { HNDesignsystemDrawer } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Drawer.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Drawer.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.Drawer.nn-NO.json';\nimport seNO from '../../resources/HN.Designsystem.Drawer.se-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDrawer => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN_NYNORSK:\n      return nnNO;\n    case LanguageLocales.SAMI_NORTHERN:\n      return seNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { AnimatePresence, useAnimate, usePresence } from 'motion/react';\n\nimport type { HNDesignsystemDrawer } from '../../resources/Resources';\nimport type { TitleTags } from '../Title';\n\nimport DrawerHeaderContent from './DrawerHeaderContent';\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, KeyboardEventKey, LanguageLocales, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useKeyboardEvent } from '../../hooks/useKeyboardEvent';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { disableBodyScroll, enableBodyScroll } from '../../utils/scroll';\nimport uuid from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\n\nimport styles from './styles.module.scss';\n\ntype DesktopDirections = 'left' | 'right';\ntype PaddingSizes = 'normal' | 'extra';\n\nexport interface DrawerProps extends InnerDrawerProps {\n  /** Opens and closes the drawer */\n  isOpen: boolean;\n}\n\nexport interface InnerDrawerProps {\n  /** Sets the aria-label of the drawer */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the drawer */\n  ariaLabelledBy?: string;\n  /** Sets the style of the Drawer Close button. Meant for use by HelpDrawer */\n  closeColor?: 'blueberry' | 'plum';\n  /** Direction of the drawer on desktop. Default: left */\n  desktopDirection?: DesktopDirections;\n  /** Sets the style of the Drawer header */\n  headerClasses?: string;\n  /** Optional content that replaces the default title (and back button) in the header. The close button is still rendered. */\n  headerContent?: React.ReactNode;\n  /** Title to display in the header of the drawer */\n  title?: string;\n  /** id of the drawer title */\n  titleId?: string;\n  /** Changes the underlying element of the title. Default: h3 */\n  titleHtmlMarkup?: TitleTags;\n  /** Callback that triggers when clicking on close button or outside the drawer, update isOpen state when this triggers */\n  onRequestClose?: () => void;\n  /** Optional footer content that can be rendered instead of default CTA(s) */\n  footerContent?: React.ReactNode;\n  /** Main content of the drawer */\n  children?: React.ReactNode;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Primary CTA callback */\n  onPrimaryAction?: () => void;\n  /** Text for primary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n  primaryActionText?: string;\n  /** Text for secondary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n  secondaryActionText?: string;\n  /** Secondary CTA callback */\n  onSecondaryAction?: () => void;\n  /** Customize the z-index of the drawer */\n  zIndex?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemDrawer>;\n  /** Sets mobile styling and animation from outer level Drawer */\n  isMobile?: boolean;\n  /** Sets classname for content part in Drawer */\n  contentClassName?: string;\n  /** Sets the content padding of the Drawer */\n  paddingSize?: PaddingSizes;\n}\n\nconst Drawer: React.FC<DrawerProps> = props => {\n  const { isOpen, ...rest } = props;\n  const isMobile = useIsMobileBreakpoint();\n\n  return <AnimatePresence>{isOpen && <InnerDrawer {...rest} isMobile={isMobile} />}</AnimatePresence>;\n};\n\nconst InnerDrawer: React.FC<InnerDrawerProps> = props => {\n  const {\n    ariaLabel,\n    ariaLabelledBy,\n    children,\n    closeColor = 'blueberry',\n    desktopDirection = 'left',\n    footerContent,\n    headerClasses,\n    headerContent,\n    noCloseButton = false,\n    onPrimaryAction,\n    onRequestClose,\n    onSecondaryAction,\n    primaryActionText,\n    secondaryActionText,\n    title,\n    titleHtmlMarkup = 'h3',\n    titleId = uuid(),\n    zIndex = ZIndex.OverlayScreen,\n    resources,\n    isMobile,\n    contentClassName,\n    paddingSize = 'normal',\n  } = props;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledBy, fallbackId: titleId });\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  // topContent and bottomContent are used to detect scroll position for shadow effects\n  const topContent = useRef<HTMLDivElement>(null);\n  const bottomContent = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null);\n  const footerRef = useRef<HTMLDivElement>(null);\n  const titleRef = useRef<HTMLHeadingElement>(null);\n  const [scope, animate] = useAnimate();\n  const [isPresent, safeToRemove] = usePresence();\n  const [headerHeight, setHeaderHeight] = React.useState(0);\n  const [footerHeight, setFooterHeight] = React.useState(0);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContentVisible = useIsVisible(bottomContent, 0);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemDrawer = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  // eslint-disable-next-line react-hooks/refs\n  const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;\n  const headerStyling = classNames(\n    styles.drawer__header,\n    { [styles['drawer__header--padding-extra']]: paddingSize === 'extra' },\n    headerClasses\n  );\n  const hasFooterContent = (typeof footerContent !== 'undefined' && footerContent) || onPrimaryAction || onSecondaryAction;\n\n  useFocusTrap(containerRef, true);\n  useReturnFocusOnUnmount(containerRef);\n  useOutsideEvent(containerRef, () => {\n    if (onRequestClose) onRequestClose();\n  });\n  useKeyboardEvent(containerRef, () => onRequestClose && onRequestClose(), [KeyboardEventKey.Escape]);\n\n  // Close animasjon, vi kaller `onClose()` til slutt\n  const closeDrawer = (): void => {\n    if (!overlayRef.current || !containerRef.current) return;\n\n    animate(overlayRef.current, { opacity: 0, pointerEvents: 'none' }, { duration: 0.3, ease: 'easeInOut' });\n\n    if (isMobile) {\n      animate(\n        containerRef.current,\n        { y: '100%' },\n        {\n          duration: 0.3,\n          ease: 'easeInOut',\n          onComplete: () => {\n            if (safeToRemove) safeToRemove();\n          },\n        }\n      );\n    } else {\n      animate(\n        containerRef.current,\n        { x: desktopDirection === 'left' ? '-100%' : '100%' },\n        {\n          duration: 0.3,\n          ease: 'easeInOut',\n          onComplete: () => {\n            if (safeToRemove) safeToRemove();\n          },\n        }\n      );\n    }\n  };\n\n  useEffect(() => {\n    containerRef.current?.focus();\n    disableBodyScroll();\n\n    return (): void => {\n      enableBodyScroll();\n    };\n  }, []);\n\n  // Measure header and footer heights\n  useEffect(() => {\n    const updateHeights = (): void => {\n      if (headerRef.current) {\n        setHeaderHeight(headerRef.current.offsetHeight);\n      }\n      if (footerRef.current) {\n        setFooterHeight(footerRef.current.offsetHeight);\n      }\n    };\n\n    updateHeights();\n\n    // Update heights when content changes\n    const resizeObserver = new ResizeObserver(updateHeights);\n    if (headerRef.current) {\n      resizeObserver.observe(headerRef.current);\n    }\n    if (footerRef.current) {\n      resizeObserver.observe(footerRef.current);\n    }\n\n    return (): void => {\n      resizeObserver.disconnect();\n    };\n  }, [hasFooterContent]);\n\n  // Open animation.\n  useEffect(() => {\n    if (!overlayRef.current || !containerRef.current) return;\n\n    if (!isPresent) {\n      closeDrawer();\n      return;\n    }\n\n    if (isMobile) {\n      animate(containerRef.current, { y: '0' }, { duration: 0.3, ease: 'easeInOut' });\n    } else {\n      animate(containerRef.current, { x: '0' }, { duration: 0.3, ease: 'easeInOut' });\n    }\n\n    animate(overlayRef.current, { opacity: 1, pointerEvents: 'auto' }, { duration: 0.3, ease: 'easeInOut' });\n  }, [isPresent]);\n\n  const handleCTA = (callback?: () => void): void => {\n    if (callback) {\n      callback();\n    }\n  };\n\n  useEffect(() => {\n    titleRef.current?.focus();\n  }, [title]);\n\n  const headerMain = (\n    <DrawerHeaderContent\n      title={title}\n      titleId={ariaLabelAttributes?.['aria-labelledby']}\n      titleRef={titleRef}\n      titleHtmlMarkup={titleHtmlMarkup}\n      backButtonAriaLabel={mergedResources.ariaLabelBackButton}\n    />\n  );\n\n  return (\n    <div className={styles.drawer} ref={scope} style={{ zIndex }} data-analyticsid={AnalyticsId.Drawer}>\n      <div className={styles.drawer__overlay} ref={overlayRef} aria-hidden=\"true\" />\n      <div\n        className={classNames(styles.drawer__container, {\n          [styles['drawer__container--right']]: desktopDirection === 'right',\n        })}\n        ref={containerRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabIndex={-1}\n        {...ariaLabelAttributes}\n      >\n        <div className={styles.drawer__container__inner}>\n          <div className={headerStyling} ref={headerRef}>\n            {headerContent ?? headerMain}\n            {!noCloseButton && onRequestClose != undefined && (\n              <Close\n                ariaLabel={mergedResources.ariaLabelCloseBtn}\n                color={closeColor}\n                onClick={onRequestClose}\n                className={styles['drawer__header__close-button']}\n              />\n            )}\n          </div>\n          <div\n            className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--top'])}\n            style={{\n              opacity: !topContentVisible && contentIsScrollable ? 1 : 0,\n              top: headerHeight,\n            }}\n          />\n          <div\n            className={classNames(styles.drawer__content, contentClassName)}\n            tabIndex={contentIsScrollable ? 0 : undefined}\n            role={contentIsScrollable ? 'region' : undefined}\n            {...(contentIsScrollable ? ariaLabelAttributes : {})}\n            ref={contentRef}\n          >\n            <div ref={topContent} />\n            <div\n              className={classNames(styles['drawer__content__children'], {\n                [styles['drawer__content__children--padding-extra']]: paddingSize === 'extra',\n              })}\n              data-overflow-boundary\n            >\n              {children}\n            </div>\n            <div ref={bottomContent} style={{ height: '1px' }} />\n          </div>\n          <div\n            className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--bottom'])}\n            style={{\n              opacity: !bottomContentVisible && contentIsScrollable ? 1 : 0,\n              bottom: hasFooterContent ? footerHeight : 0,\n            }}\n          />\n        </div>\n        {hasFooterContent && (\n          <div\n            className={classNames(styles.drawer__footer, { [styles['drawer__footer--padding-extra']]: paddingSize === 'extra' })}\n            ref={footerRef}\n          >\n            {footerContent ? (\n              footerContent\n            ) : (\n              <>\n                {onPrimaryAction && <Button onClick={() => handleCTA(onPrimaryAction)}>{primaryActionText}</Button>}\n                {onSecondaryAction && (\n                  <Button variant=\"borderless\" onClick={() => handleCTA(onSecondaryAction)}>\n                    {secondaryActionText}\n                  </Button>\n                )}\n              </>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Drawer;\n","import Drawer from './Drawer';\nexport * from './Drawer';\nexport default Drawer;\n"],"mappings":"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"}

package/lib/PopOver.js

@@ -22,7 +22,7 @@ var PopOver = (props) => {
 	});
 	const placementProp = placement ?? (variant === PopOverVariant.positionabove ? "top" : "bottom");
 	const arrowRef = useRef(null);
-	const { refs, floatingStyles, context, middlewareData } = useFloating({
+	const { refs, floatingStyles, context } = useFloating({
 		middleware: [
 			offset(10),
 			flip(),
@@ -37,7 +37,6 @@ var PopOver = (props) => {
 	const click = useClick(context);
 	const dismiss = useDismiss(context);
 	const { getFloatingProps } = useInteractions([click, dismiss]);
-	const isVisible = show && !middlewareData.hide?.referenceHidden;
 	const mergedRef = useMergeRefs([refs.setFloating, ref]);
 	return /* @__PURE__ */ jsx(FloatingFocusManager, {
 		context,
@@ -47,7 +46,7 @@ var PopOver = (props) => {
 			ref: mergedRef,
 			style: {
 				...floatingStyles,
-				visibility: isVisible ? "visible" : "hidden",
+				visibility: show ? "visible" : "hidden",
 				zIndex
 			},
 			className: classNames(styles.popover, className),

package/lib/PopOver.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopOver.js","names":[],"sources":["../src/components/PopOver/utils.ts","../src/components/PopOver/PopOver.tsx","../src/components/PopOver/index.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nexport enum PopOverVariant {\n  positionautomatic = 'positionautomatic',\n  positionbelow = 'positionbelow',\n  positionabove = 'positionabove',\n}\n\ntype HorizontalPosition = 'left' | 'right' | 'floating';\ntype BubblePosition = 'leftabove' | 'leftbelow' | 'rightabove' | 'rightbelow' | 'floatingabove' | 'floatingbelow';\n\n/** Bredde på hjelpeboble */\nconst BUBBLE_WIDTH_PX = 373;\n/** Hjelpeboblen skal holde avstand til venstre/høyre kant på vinduet */\nconst WINDOW_MARGIN_PX = 12;\n/** Vertikal avstand fra hjelpeboble til kontroller */\nconst BUBBLE_VERTICAL_OFFSET_PX = 16;\n/** Høyde/bredde på pil */\nconst ARROW_WIDTH_PX = 20;\n/** Avstand fra pil til hjelpeboble */\nconst ARROW_VERTICAL_OFFSET_PX = 4;\n/** Pilen skal holde avstand til venstre/høyre kant av hjelpeboblen */\nconst ARROW_HORIZONTAL_MARGIN_PX = 12;\n\n/**\n * Beregn om hjelpeboblen skal vises over eller under kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under/automatisk)\n * @returns Om hjelpeboblen skal vises over eller under\n */\nexport const getVerticalPosition = (\n  controllerSize: DOMRect,\n  bubbleSize: DOMRect,\n  variant: keyof typeof PopOverVariant\n): keyof typeof PopOverVariant => {\n  if (variant !== PopOverVariant.positionautomatic) {\n    return variant;\n  }\n  if (controllerSize.top > bubbleSize.height + BUBBLE_VERTICAL_OFFSET_PX) {\n    return PopOverVariant.positionabove;\n  } else {\n    return PopOverVariant.positionbelow;\n  }\n};\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerLeftCenterPx = (controllerSize: DOMRect): number => controllerSize.left + controllerSize.width / 2;\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til høyre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerRightCenterPx = (controllerSize: DOMRect): number =>\n  document.documentElement.clientWidth - controllerSize.right + controllerSize.width / 2;\n\n/**\n * Finn venstre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Venstre kant av hjelpeboblen i px\n */\nconst getBubbleLeftPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const controllerHorizontalCenterPx = getControllerLeftCenterPx(controllerSize);\n\n  return controllerHorizontalCenterPx - bubbleSize.width / 2;\n};\n\n/**\n * Finn høyre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Høyre kant av hjelpeboblen i px\n */\nconst getBubbleRightPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx + bubbleSize.width;\n};\n\n/**\n * Sjekk om venstre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom venstre kant er innenfor vinduet\n */\nconst getBubbleLeftVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx > WINDOW_MARGIN_PX;\n};\n\n/**\n * Sjekk om høyre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom høyre kant er innenfor vinduet\n */\nconst getBubbleRightIsVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleRightPx = getBubbleRightPx(controllerSize, bubbleSize);\n\n  return bubbleRightPx < document.documentElement.clientWidth - WINDOW_MARGIN_PX;\n};\n\n/**\n * Finn riktig horisontal plassering til hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns left, right eller floating\n */\nconst getHorizontalPosition = (controllerSize: DOMRect, bubbleSize: DOMRect): HorizontalPosition => {\n  if (!getBubbleRightIsVisible(controllerSize, bubbleSize)) {\n    return 'right';\n  }\n  if (!getBubbleLeftVisible(controllerSize, bubbleSize)) {\n    return 'left';\n  }\n\n  return 'floating';\n};\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleAbovePx = (controllerSize: DOMRect, bubbleSize: DOMRect): number =>\n  controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - bubbleSize.height;\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises under\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleBelowPx = (controllerSize: DOMRect): number => controllerSize.bottom + BUBBLE_VERTICAL_OFFSET_PX;\n\n/**\n * Finn maks bredde på hjelpeboblen i forhold til vinduet\n * @returns Bredde på hjelpeboblen i px\n */\nconst getBubbleWidth = (): number => document.documentElement.clientWidth - WINDOW_MARGIN_PX * 2;\n\n/**\n * Sjekk om hjelpeboblen har plass i vinduet\n * @returns true dersom det er plass til hjelpeboblen i vinduet\n */\nconst getBubbleFitsInWindow = (): boolean => {\n  return document.documentElement.clientWidth > BUBBLE_WIDTH_PX + WINDOW_MARGIN_PX * 2;\n};\n\n/**\n * Finn vertikal plassering av pilen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @returns \"Top\" for pilen i px\n */\nconst getArrowTopxPx = (controllerSize: DOMRect): number => controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - ARROW_VERTICAL_OFFSET_PX;\n\n/**\n * Finn horisontal plassering av pilen i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowLeftPx = (controllerSize: DOMRect): number => getControllerLeftCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn horisontal plassering av pilen\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowRightPx = (controllerSize: DOMRect): number => getControllerRightCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns Beste mulige plassering av hjelpeboblen\n */\nconst getBubblePosition = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): BubblePosition => {\n  const horizontalPosition = getHorizontalPosition(controllerSize, bubbleSize);\n  const verticalPosition = getVerticalPosition(controllerSize, bubbleSize, variant);\n\n  if (horizontalPosition === 'left') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'leftabove';\n    }\n    return 'leftbelow';\n  }\n\n  if (horizontalPosition === 'right') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'rightabove';\n    }\n    return 'rightbelow';\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return 'floatingabove';\n  }\n\n  return 'floatingbelow';\n};\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer hjelpeboblen riktig\n */\nexport const getBubbleStyle = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): CSSProperties => {\n  const bubblePosition = getBubblePosition(controllerSize, bubbleSize, variant);\n  const bubbleWidth = !getBubbleFitsInWindow() ? getBubbleWidth() : undefined;\n\n  if (bubblePosition === 'leftabove') {\n    return {\n      left: WINDOW_MARGIN_PX,\n      top: getBubbleAbovePx(controllerSize, bubbleSize),\n      width: bubbleWidth,\n    };\n  }\n  if (bubblePosition === 'leftbelow') {\n    return { left: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightabove') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightbelow') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  if (bubblePosition === 'floatingbelow') {\n    return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n};\n\n/**\n * Finn riktig plassering av pilen\n * @param bubbleStyle CSSProperties for hjelpeboblen\n * @param controllerSize DOMRect for kontrolleren\n * @param verticalPosition Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer pilen riktig\n */\nexport const getArrowStyle = (\n  bubbleStyle: CSSProperties,\n  controllerSize: DOMRect,\n  verticalPosition: keyof typeof PopOverVariant\n): CSSProperties => {\n  const leftPx = getArrowLeftPx(controllerSize);\n  const rightPx = getArrowRightPx(controllerSize);\n  const minLeftPx = (bubbleStyle.left as number) + ARROW_HORIZONTAL_MARGIN_PX;\n  const minRightPx = (bubbleStyle.right as number) + ARROW_HORIZONTAL_MARGIN_PX;\n\n  if (bubbleStyle.right) {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return {\n        right: rightPx > minRightPx ? rightPx : minRightPx,\n        top: getArrowTopxPx(controllerSize),\n      };\n    }\n\n    return {\n      right: rightPx > minRightPx ? rightPx : minRightPx,\n      top: controllerSize.bottom,\n    };\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return {\n      left: leftPx > minLeftPx ? leftPx : minLeftPx,\n      top: getArrowTopxPx(controllerSize),\n    };\n  }\n\n  return {\n    left: leftPx > minLeftPx ? leftPx : minLeftPx,\n    top: controllerSize.bottom,\n  };\n};\n","import { useRef } from 'react';\n\nimport {\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  FloatingArrow,\n  arrow,\n  hide,\n  FloatingFocusManager,\n  useMergeRefs,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\n\nimport { PopOverVariant } from './utils';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport type PopOverRole = 'tooltip' | 'dialog' | 'group';\n\nexport type PopOverPlacement = 'top' | 'bottom';\n\nexport interface PopOverProps {\n  /** Sets aria-label of the bubble. If role is set to dialog ariaLabel or ariaLabelledById MUST be set! */\n  ariaLabel?: string;\n  /** Sets aria-labelledby of the bubble. If role is set to dialog ariaLabel or ariaLabelledById MUST be set! */\n  ariaLabelledById?: string;\n  /** Id of the PopOver */\n  id?: string;\n  /** Content shown inside PopOver. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n  children: React.ReactNode;\n  /** Ref for the element the PopOver is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement | null>;\n  /** Show the popover. Only applies when role=tooltip. Default: false. */\n  show?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** @deprecated Adds custom classes to the arrow element. */\n  arrowClassName?: string;\n  /** @deprecated use placement instead. Determines the placement of the popover. Default: automatic positioning. */\n  variant?: keyof typeof PopOverVariant;\n  /** Sets the placement of the popover relative to the trigger if there is space, otherwise automatic. */\n  placement?: PopOverPlacement;\n  /** Sets role of the PopOver element */\n  role?: PopOverRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Overrides the default z-index of PopOver */\n  zIndex?: number;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLDivElement | SVGSVGElement | HTMLElement | null>;\n}\n\nconst PopOver: React.FC<PopOverProps> = props => {\n  const {\n    ariaLabel,\n    ariaLabelledById,\n    id,\n    children,\n    controllerRef,\n    show = false,\n    className = '',\n    variant = PopOverVariant.positionautomatic,\n    role = 'dialog',\n    testId,\n    zIndex = ZIndex.PopOver,\n    placement,\n    ref,\n  } = props;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n  const placementProp = placement ?? (variant === PopOverVariant.positionabove ? 'top' : 'bottom');\n\n  const arrowRef = useRef(null);\n  const { refs, floatingStyles, context, middlewareData } = useFloating({\n    middleware: [offset(10), flip(), shift({ padding: 8 }), hide(), arrow({ element: arrowRef })],\n    placement: placementProp,\n    whileElementsMounted: autoUpdate,\n    elements: {\n      reference: controllerRef.current,\n    },\n  });\n\n  const click = useClick(context);\n  const dismiss = useDismiss(context);\n\n  const { getFloatingProps } = useInteractions([click, dismiss]);\n\n  const isVisible = show && !middlewareData.hide?.referenceHidden;\n\n  const mergedRef = useMergeRefs<HTMLElement | SVGSVGElement>([refs.setFloating, ref]);\n\n  return (\n    <FloatingFocusManager context={context} modal={false}>\n      <div\n        id={id}\n        ref={mergedRef}\n        style={{ ...floatingStyles, visibility: isVisible ? 'visible' : 'hidden', zIndex: zIndex }}\n        className={classNames(styles.popover, className)}\n        {...getFloatingProps()}\n        role={role}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.PopOver}\n        {...ariaLabelAttributes}\n      >\n        {children}\n        <FloatingArrow\n          ref={arrowRef}\n          className={styles['popover__arrow']}\n          context={context}\n          fill={'var(--core-color-white)'}\n          stroke={'var(--color-base-border-dark)'}\n          strokeWidth={1}\n        />\n      </div>\n    </FloatingFocusManager>\n  );\n};\n\nPopOver.displayName = 'PopOver';\n\nexport default PopOver;\n","import PopOver from './PopOver';\nexport { PopOverVariant } from './utils';\nexport * from './PopOver';\nexport default PopOver;\n"],"mappings":";;;;;;;;AAEA,IAAY,iBAAL,yBAAA,gBAAA;CACL,eAAA,uBAAA;CACA,eAAA,mBAAA;CACA,eAAA,mBAAA;;AACF,EAAA,CAAA,CAAA;;;ACsDA,IAAM,WAAkC,UAAS;CAC/C,MAAM,EACJ,WACA,kBACA,IACA,UACA,eACA,OAAO,OACP,YAAY,IACZ,UAAU,eAAe,mBACzB,OAAO,UACP,QACA,SAAS,OAAO,SAChB,WACA,QACE;CAEJ,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAW,IAAI;CAAiB,CAAC;CAE7F,MAAM,gBAAgB,cAAc,YAAY,eAAe,gBAAgB,QAAQ;CAEvF,MAAM,WAAW,OAAO,IAAI;CAC5B,MAAM,EAAE,MAAM,gBAAgB,SAAS,mBAAmB,YAAY;EACpE,YAAY;GAAC,OAAO,EAAE;GAAG,KAAK;GAAG,MAAM,EAAE,SAAS,EAAE,CAAC;GAAG,KAAK;GAAG,MAAM,EAAE,SAAS,SAAS,CAAC;EAAC;EAC5F,WAAW;EACX,sBAAsB;EACtB,UAAU,EACR,WAAW,cAAc,QAC3B;CACF,CAAC;CAED,MAAM,QAAQ,SAAS,OAAO;CAC9B,MAAM,UAAU,WAAW,OAAO;CAElC,MAAM,EAAE,qBAAqB,gBAAgB,CAAC,OAAO,OAAO,CAAC;CAE7D,MAAM,YAAY,QAAQ,CAAC,eAAe,MAAM;CAEhD,MAAM,YAAY,aAA0C,CAAC,KAAK,aAAa,GAAG,CAAC;CAEnF,OACE,oBAAC,sBAAD;EAA+B;EAAS,OAAO;EAC7C,UAAA,qBAAC,OAAD;GACM;GACJ,KAAK;GACL,OAAO;IAAE,GAAG;IAAgB,YAAY,YAAY,YAAY;IAAkB;GAAO;GACzF,WAAW,WAAW,OAAO,SAAS,SAAS;GAC/C,GAAI,iBAAiB;GACf;GACN,eAAa;GACb,oBAAkB,YAAY;GAC9B,GAAI;GATN,UAAA,CAWG,UACD,oBAAC,eAAD;IACE,KAAK;IACL,WAAW,OAAO;IACT;IACT,MAAM;IACN,QAAQ;IACR,aAAa;GACd,CAAA,CACE;;CACe,CAAA;AAE1B;AAEA,QAAQ,cAAc;;;AC5HtB,IAAA,kBAAe"}
+{"version":3,"file":"PopOver.js","names":[],"sources":["../src/components/PopOver/utils.ts","../src/components/PopOver/PopOver.tsx","../src/components/PopOver/index.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nexport enum PopOverVariant {\n  positionautomatic = 'positionautomatic',\n  positionbelow = 'positionbelow',\n  positionabove = 'positionabove',\n}\n\ntype HorizontalPosition = 'left' | 'right' | 'floating';\ntype BubblePosition = 'leftabove' | 'leftbelow' | 'rightabove' | 'rightbelow' | 'floatingabove' | 'floatingbelow';\n\n/** Bredde på hjelpeboble */\nconst BUBBLE_WIDTH_PX = 373;\n/** Hjelpeboblen skal holde avstand til venstre/høyre kant på vinduet */\nconst WINDOW_MARGIN_PX = 12;\n/** Vertikal avstand fra hjelpeboble til kontroller */\nconst BUBBLE_VERTICAL_OFFSET_PX = 16;\n/** Høyde/bredde på pil */\nconst ARROW_WIDTH_PX = 20;\n/** Avstand fra pil til hjelpeboble */\nconst ARROW_VERTICAL_OFFSET_PX = 4;\n/** Pilen skal holde avstand til venstre/høyre kant av hjelpeboblen */\nconst ARROW_HORIZONTAL_MARGIN_PX = 12;\n\n/**\n * Beregn om hjelpeboblen skal vises over eller under kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under/automatisk)\n * @returns Om hjelpeboblen skal vises over eller under\n */\nexport const getVerticalPosition = (\n  controllerSize: DOMRect,\n  bubbleSize: DOMRect,\n  variant: keyof typeof PopOverVariant\n): keyof typeof PopOverVariant => {\n  if (variant !== PopOverVariant.positionautomatic) {\n    return variant;\n  }\n  if (controllerSize.top > bubbleSize.height + BUBBLE_VERTICAL_OFFSET_PX) {\n    return PopOverVariant.positionabove;\n  } else {\n    return PopOverVariant.positionbelow;\n  }\n};\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerLeftCenterPx = (controllerSize: DOMRect): number => controllerSize.left + controllerSize.width / 2;\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til høyre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerRightCenterPx = (controllerSize: DOMRect): number =>\n  document.documentElement.clientWidth - controllerSize.right + controllerSize.width / 2;\n\n/**\n * Finn venstre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Venstre kant av hjelpeboblen i px\n */\nconst getBubbleLeftPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const controllerHorizontalCenterPx = getControllerLeftCenterPx(controllerSize);\n\n  return controllerHorizontalCenterPx - bubbleSize.width / 2;\n};\n\n/**\n * Finn høyre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Høyre kant av hjelpeboblen i px\n */\nconst getBubbleRightPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx + bubbleSize.width;\n};\n\n/**\n * Sjekk om venstre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom venstre kant er innenfor vinduet\n */\nconst getBubbleLeftVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx > WINDOW_MARGIN_PX;\n};\n\n/**\n * Sjekk om høyre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom høyre kant er innenfor vinduet\n */\nconst getBubbleRightIsVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleRightPx = getBubbleRightPx(controllerSize, bubbleSize);\n\n  return bubbleRightPx < document.documentElement.clientWidth - WINDOW_MARGIN_PX;\n};\n\n/**\n * Finn riktig horisontal plassering til hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns left, right eller floating\n */\nconst getHorizontalPosition = (controllerSize: DOMRect, bubbleSize: DOMRect): HorizontalPosition => {\n  if (!getBubbleRightIsVisible(controllerSize, bubbleSize)) {\n    return 'right';\n  }\n  if (!getBubbleLeftVisible(controllerSize, bubbleSize)) {\n    return 'left';\n  }\n\n  return 'floating';\n};\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleAbovePx = (controllerSize: DOMRect, bubbleSize: DOMRect): number =>\n  controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - bubbleSize.height;\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises under\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleBelowPx = (controllerSize: DOMRect): number => controllerSize.bottom + BUBBLE_VERTICAL_OFFSET_PX;\n\n/**\n * Finn maks bredde på hjelpeboblen i forhold til vinduet\n * @returns Bredde på hjelpeboblen i px\n */\nconst getBubbleWidth = (): number => document.documentElement.clientWidth - WINDOW_MARGIN_PX * 2;\n\n/**\n * Sjekk om hjelpeboblen har plass i vinduet\n * @returns true dersom det er plass til hjelpeboblen i vinduet\n */\nconst getBubbleFitsInWindow = (): boolean => {\n  return document.documentElement.clientWidth > BUBBLE_WIDTH_PX + WINDOW_MARGIN_PX * 2;\n};\n\n/**\n * Finn vertikal plassering av pilen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @returns \"Top\" for pilen i px\n */\nconst getArrowTopxPx = (controllerSize: DOMRect): number => controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - ARROW_VERTICAL_OFFSET_PX;\n\n/**\n * Finn horisontal plassering av pilen i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowLeftPx = (controllerSize: DOMRect): number => getControllerLeftCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn horisontal plassering av pilen\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowRightPx = (controllerSize: DOMRect): number => getControllerRightCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns Beste mulige plassering av hjelpeboblen\n */\nconst getBubblePosition = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): BubblePosition => {\n  const horizontalPosition = getHorizontalPosition(controllerSize, bubbleSize);\n  const verticalPosition = getVerticalPosition(controllerSize, bubbleSize, variant);\n\n  if (horizontalPosition === 'left') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'leftabove';\n    }\n    return 'leftbelow';\n  }\n\n  if (horizontalPosition === 'right') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'rightabove';\n    }\n    return 'rightbelow';\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return 'floatingabove';\n  }\n\n  return 'floatingbelow';\n};\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer hjelpeboblen riktig\n */\nexport const getBubbleStyle = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): CSSProperties => {\n  const bubblePosition = getBubblePosition(controllerSize, bubbleSize, variant);\n  const bubbleWidth = !getBubbleFitsInWindow() ? getBubbleWidth() : undefined;\n\n  if (bubblePosition === 'leftabove') {\n    return {\n      left: WINDOW_MARGIN_PX,\n      top: getBubbleAbovePx(controllerSize, bubbleSize),\n      width: bubbleWidth,\n    };\n  }\n  if (bubblePosition === 'leftbelow') {\n    return { left: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightabove') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightbelow') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  if (bubblePosition === 'floatingbelow') {\n    return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n};\n\n/**\n * Finn riktig plassering av pilen\n * @param bubbleStyle CSSProperties for hjelpeboblen\n * @param controllerSize DOMRect for kontrolleren\n * @param verticalPosition Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer pilen riktig\n */\nexport const getArrowStyle = (\n  bubbleStyle: CSSProperties,\n  controllerSize: DOMRect,\n  verticalPosition: keyof typeof PopOverVariant\n): CSSProperties => {\n  const leftPx = getArrowLeftPx(controllerSize);\n  const rightPx = getArrowRightPx(controllerSize);\n  const minLeftPx = (bubbleStyle.left as number) + ARROW_HORIZONTAL_MARGIN_PX;\n  const minRightPx = (bubbleStyle.right as number) + ARROW_HORIZONTAL_MARGIN_PX;\n\n  if (bubbleStyle.right) {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return {\n        right: rightPx > minRightPx ? rightPx : minRightPx,\n        top: getArrowTopxPx(controllerSize),\n      };\n    }\n\n    return {\n      right: rightPx > minRightPx ? rightPx : minRightPx,\n      top: controllerSize.bottom,\n    };\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return {\n      left: leftPx > minLeftPx ? leftPx : minLeftPx,\n      top: getArrowTopxPx(controllerSize),\n    };\n  }\n\n  return {\n    left: leftPx > minLeftPx ? leftPx : minLeftPx,\n    top: controllerSize.bottom,\n  };\n};\n","import { useRef } from 'react';\n\nimport {\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  FloatingArrow,\n  arrow,\n  hide,\n  FloatingFocusManager,\n  useMergeRefs,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\n\nimport { PopOverVariant } from './utils';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport type PopOverRole = 'tooltip' | 'dialog' | 'group';\n\nexport type PopOverPlacement = 'top' | 'bottom';\n\nexport interface PopOverProps {\n  /** Sets aria-label of the bubble. If role is set to dialog ariaLabel or ariaLabelledById MUST be set! */\n  ariaLabel?: string;\n  /** Sets aria-labelledby of the bubble. If role is set to dialog ariaLabel or ariaLabelledById MUST be set! */\n  ariaLabelledById?: string;\n  /** Id of the PopOver */\n  id?: string;\n  /** Content shown inside PopOver. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n  children: React.ReactNode;\n  /** Ref for the element the PopOver is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement | null>;\n  /** Show the popover. Only applies when role=tooltip. Default: false. */\n  show?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** @deprecated Adds custom classes to the arrow element. */\n  arrowClassName?: string;\n  /** @deprecated use placement instead. Determines the placement of the popover. Default: automatic positioning. */\n  variant?: keyof typeof PopOverVariant;\n  /** Sets the placement of the popover relative to the trigger if there is space, otherwise automatic. */\n  placement?: PopOverPlacement;\n  /** Sets role of the PopOver element */\n  role?: PopOverRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Overrides the default z-index of PopOver */\n  zIndex?: number;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLDivElement | SVGSVGElement | HTMLElement | null>;\n}\n\nconst PopOver: React.FC<PopOverProps> = props => {\n  const {\n    ariaLabel,\n    ariaLabelledById,\n    id,\n    children,\n    controllerRef,\n    show = false,\n    className = '',\n    variant = PopOverVariant.positionautomatic,\n    role = 'dialog',\n    testId,\n    zIndex = ZIndex.PopOver,\n    placement,\n    ref,\n  } = props;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n  const placementProp = placement ?? (variant === PopOverVariant.positionabove ? 'top' : 'bottom');\n\n  const arrowRef = useRef(null);\n  const { refs, floatingStyles, context } = useFloating({\n    middleware: [offset(10), flip(), shift({ padding: 8 }), hide(), arrow({ element: arrowRef })],\n    placement: placementProp,\n    whileElementsMounted: autoUpdate,\n    elements: {\n      reference: controllerRef.current,\n    },\n  });\n\n  const click = useClick(context);\n  const dismiss = useDismiss(context);\n\n  const { getFloatingProps } = useInteractions([click, dismiss]);\n\n  const mergedRef = useMergeRefs<HTMLElement | SVGSVGElement>([refs.setFloating, ref]);\n\n  return (\n    <FloatingFocusManager context={context} modal={false}>\n      <div\n        id={id}\n        ref={mergedRef}\n        style={{ ...floatingStyles, visibility: show ? 'visible' : 'hidden', zIndex: zIndex }}\n        className={classNames(styles.popover, className)}\n        {...getFloatingProps()}\n        role={role}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.PopOver}\n        {...ariaLabelAttributes}\n      >\n        {children}\n        <FloatingArrow\n          ref={arrowRef}\n          className={styles['popover__arrow']}\n          context={context}\n          fill={'var(--core-color-white)'}\n          stroke={'var(--color-base-border-dark)'}\n          strokeWidth={1}\n        />\n      </div>\n    </FloatingFocusManager>\n  );\n};\n\nPopOver.displayName = 'PopOver';\n\nexport default PopOver;\n","import PopOver from './PopOver';\nexport { PopOverVariant } from './utils';\nexport * from './PopOver';\nexport default PopOver;\n"],"mappings":";;;;;;;;AAEA,IAAY,iBAAL,yBAAA,gBAAA;CACL,eAAA,uBAAA;CACA,eAAA,mBAAA;CACA,eAAA,mBAAA;;AACF,EAAA,CAAA,CAAA;;;ACsDA,IAAM,WAAkC,UAAS;CAC/C,MAAM,EACJ,WACA,kBACA,IACA,UACA,eACA,OAAO,OACP,YAAY,IACZ,UAAU,eAAe,mBACzB,OAAO,UACP,QACA,SAAS,OAAO,SAChB,WACA,QACE;CAEJ,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAW,IAAI;CAAiB,CAAC;CAE7F,MAAM,gBAAgB,cAAc,YAAY,eAAe,gBAAgB,QAAQ;CAEvF,MAAM,WAAW,OAAO,IAAI;CAC5B,MAAM,EAAE,MAAM,gBAAgB,YAAY,YAAY;EACpD,YAAY;GAAC,OAAO,EAAE;GAAG,KAAK;GAAG,MAAM,EAAE,SAAS,EAAE,CAAC;GAAG,KAAK;GAAG,MAAM,EAAE,SAAS,SAAS,CAAC;EAAC;EAC5F,WAAW;EACX,sBAAsB;EACtB,UAAU,EACR,WAAW,cAAc,QAC3B;CACF,CAAC;CAED,MAAM,QAAQ,SAAS,OAAO;CAC9B,MAAM,UAAU,WAAW,OAAO;CAElC,MAAM,EAAE,qBAAqB,gBAAgB,CAAC,OAAO,OAAO,CAAC;CAE7D,MAAM,YAAY,aAA0C,CAAC,KAAK,aAAa,GAAG,CAAC;CAEnF,OACE,oBAAC,sBAAD;EAA+B;EAAS,OAAO;EAC7C,UAAA,qBAAC,OAAD;GACM;GACJ,KAAK;GACL,OAAO;IAAE,GAAG;IAAgB,YAAY,OAAO,YAAY;IAAkB;GAAO;GACpF,WAAW,WAAW,OAAO,SAAS,SAAS;GAC/C,GAAI,iBAAiB;GACf;GACN,eAAa;GACb,oBAAkB,YAAY;GAC9B,GAAI;GATN,UAAA,CAWG,UACD,oBAAC,eAAD;IACE,KAAK;IACL,WAAW,OAAO;IACT;IACT,MAAM;IACN,QAAQ;IACR,aAAa;GACd,CAAA,CACE;;CACe,CAAA;AAE1B;AAEA,QAAQ,cAAc;;;AC1HtB,IAAA,kBAAe"}

package/lib/Radio.js

@@ -70,8 +70,6 @@ var Radio = (props) => {
 				inputId,
 				onColor,
 				labelClassName: radioLabelClasses,
-				sublabelWrapperClassName: radioStyles["radio-sublabel-wrapper"],
-				large: isLarge,
 				afterLabelChildrenClassName: radioStyles["radio-afterlabelchildren-wrapper"]
 			})
 		})

package/lib/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":[],"sources":["../src/components/Radio/Radio.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport RadioMarker from './RadioMarker/RadioMarker';\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label/utils';\n\nimport radioStyles from './styles.module.scss';\n\nexport interface RadioProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radio - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radio */\n  inputId?: string;\n  /** Changes the visuals of the radio */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the radio. Large version only works when used inside a FormGroup wrapper. */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radio - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the input element */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nexport const Radio: React.FC<RadioProps> = props => {\n  const {\n    className,\n    defaultChecked,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    errorTextId: errorTextIdProp,\n    error = !!errorText,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ref,\n    ...rest\n  } = props;\n  const invalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const onGrey = onColor === FormOnColor.ongrey;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onCherry = onColor === FormOnColor.oninvalid;\n  const isLarge = size === FormSize.large;\n\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n\n  const radioWrapperClasses = classNames(radioStyles['radio-wrapper'], {\n    [radioStyles['radio-wrapper__large']]: isLarge,\n    [radioStyles['radio-wrapper__large--invalid']]: isLarge && onCherry,\n    [radioStyles['radio-wrapper__large--on-blueberry']]: isLarge && onBlueberry,\n  });\n  const radioLabelClasses = classNames(\n    radioStyles['radio-label'],\n    {\n      [radioStyles['radio-label--disabled']]: disabled,\n      [radioStyles['radio-label--on-dark']]: onDark,\n      [radioStyles['radio-label--invalid']]: invalid,\n      [radioStyles['radio-label__large']]: isLarge,\n      [radioStyles['radio-label__large--disabled']]: isLarge && disabled,\n      [radioStyles['radio-label__large--on-grey']]: isLarge && onGrey,\n      [radioStyles['radio-label__large--on-blueberry']]: isLarge && onBlueberry,\n      [radioStyles['radio-label__large--invalid']]: isLarge && onCherry,\n    },\n    labelClassNames\n  );\n  const radioClasses = classNames(radioStyles['radio'], className);\n\n  const getLabelContent = (): React.ReactNode => (\n    <span className={radioStyles['radio__marker-wrapper']}>\n      <input\n        {...rest}\n        id={inputId}\n        name={name}\n        className={radioClasses}\n        type=\"radio\"\n        disabled={disabled}\n        value={value}\n        ref={ref}\n        defaultChecked={defaultChecked}\n        aria-describedby={getAriaDescribedBy(props, errorTextId)}\n        required={required}\n        onChange={onChange}\n      />\n      <RadioMarker disabled={disabled} error={invalid} onColor={onColor} size={size} />\n    </span>\n  );\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Radio} className={radioWrapperClasses}>\n        {renderLabelAsParent({\n          label: label,\n          children: getLabelContent(),\n          inputId: inputId,\n          onColor: onColor as FormOnColor,\n          labelClassName: radioLabelClasses,\n          sublabelWrapperClassName: radioStyles['radio-sublabel-wrapper'],\n          large: isLarge,\n          afterLabelChildrenClassName: radioStyles['radio-afterlabelchildren-wrapper'],\n        })}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nRadio.displayName = 'Radio';\n\nexport default Radio;\n"],"mappings":";;;;;;;;;;;AA6CA,IAAa,SAA8B,UAAS;CAClD,MAAM,EACJ,WACA,gBACA,UACA,UACA,OACA,UAAU,KAAK,GACf,UAAU,YAAY,SACtB,OAAO,SACP,MACA,WACA,aAAa,iBACb,QAAQ,CAAC,CAAC,WACV,uBACA,QAAQ,aAAa,KAAK,GAC1B,QACA,UACA,iBACA,KACA,GAAG,SACD;CACJ,MAAM,UAAU,SAAS,YAAY,YAAY;CACjD,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,cAAc,YAAY,YAAY;CAC5C,MAAM,WAAW,YAAY,YAAY;CACzC,MAAM,UAAU,SAAS,SAAS;CAElC,MAAM,cAAc,kBAAkB,eAAe;CAErD,MAAM,sBAAsB,WAAW,YAAY,kBAAkB;GAClE,YAAY,0BAA0B;GACtC,YAAY,mCAAmC,WAAW;GAC1D,YAAY,wCAAwC,WAAW;CAClE,CAAC;CACD,MAAM,oBAAoB,WACxB,YAAY,gBACZ;GACG,YAAY,2BAA2B;GACvC,YAAY,0BAA0B;GACtC,YAAY,0BAA0B;GACtC,YAAY,wBAAwB;GACpC,YAAY,kCAAkC,WAAW;GACzD,YAAY,iCAAiC,WAAW;GACxD,YAAY,sCAAsC,WAAW;GAC7D,YAAY,iCAAiC,WAAW;CAC3D,GACA,eACF;CACA,MAAM,eAAe,WAAW,YAAY,UAAU,SAAS;CAE/D,MAAM,wBACJ,qBAAC,QAAD;EAAM,WAAW,YAAY;EAA7B,UAAA,CACE,oBAAC,SAAD;GACE,GAAI;GACJ,IAAI;GACE;GACN,WAAW;GACX,MAAK;GACK;GACH;GACF;GACW;GAChB,oBAAkB,mBAAmB,OAAO,WAAW;GAC7C;GACA;EACX,CAAA,GACD,oBAAC,aAAD;GAAuB;GAAU,OAAO;GAAkB;GAAe;EAAO,CAAA,CAC5E;;CAGR,OACE,oBAAC,sBAAD;EAAc,WAAW;EAAkC;EAAwB;EACjF,UAAA,oBAAC,OAAD;GAAK,eAAa;GAAQ,oBAAkB,YAAY;GAAO,WAAW;GACvE,UAAA,oBAAoB;IACZ;IACP,UAAU,gBAAgB;IACjB;IACA;IACT,gBAAgB;IAChB,0BAA0B,YAAY;IACtC,OAAO;IACP,6BAA6B,YAAY;GAC3C,CAAC;EACE,CAAA;CACO,CAAA;AAElB;AAEA,MAAM,cAAc"}
+{"version":3,"file":"Radio.js","names":[],"sources":["../src/components/Radio/Radio.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport RadioMarker from './RadioMarker/RadioMarker';\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label/utils';\n\nimport radioStyles from './styles.module.scss';\n\nexport interface RadioProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radio - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radio */\n  inputId?: string;\n  /** Changes the visuals of the radio */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the radio. Large version only works when used inside a FormGroup wrapper. */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radio - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the input element */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nexport const Radio: React.FC<RadioProps> = props => {\n  const {\n    className,\n    defaultChecked,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    errorTextId: errorTextIdProp,\n    error = !!errorText,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ref,\n    ...rest\n  } = props;\n  const invalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const onGrey = onColor === FormOnColor.ongrey;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onCherry = onColor === FormOnColor.oninvalid;\n  const isLarge = size === FormSize.large;\n\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n\n  const radioWrapperClasses = classNames(radioStyles['radio-wrapper'], {\n    [radioStyles['radio-wrapper__large']]: isLarge,\n    [radioStyles['radio-wrapper__large--invalid']]: isLarge && onCherry,\n    [radioStyles['radio-wrapper__large--on-blueberry']]: isLarge && onBlueberry,\n  });\n  const radioLabelClasses = classNames(\n    radioStyles['radio-label'],\n    {\n      [radioStyles['radio-label--disabled']]: disabled,\n      [radioStyles['radio-label--on-dark']]: onDark,\n      [radioStyles['radio-label--invalid']]: invalid,\n      [radioStyles['radio-label__large']]: isLarge,\n      [radioStyles['radio-label__large--disabled']]: isLarge && disabled,\n      [radioStyles['radio-label__large--on-grey']]: isLarge && onGrey,\n      [radioStyles['radio-label__large--on-blueberry']]: isLarge && onBlueberry,\n      [radioStyles['radio-label__large--invalid']]: isLarge && onCherry,\n    },\n    labelClassNames\n  );\n  const radioClasses = classNames(radioStyles['radio'], className);\n\n  const getLabelContent = (): React.ReactNode => (\n    <span className={radioStyles['radio__marker-wrapper']}>\n      <input\n        {...rest}\n        id={inputId}\n        name={name}\n        className={radioClasses}\n        type=\"radio\"\n        disabled={disabled}\n        value={value}\n        ref={ref}\n        defaultChecked={defaultChecked}\n        aria-describedby={getAriaDescribedBy(props, errorTextId)}\n        required={required}\n        onChange={onChange}\n      />\n      <RadioMarker disabled={disabled} error={invalid} onColor={onColor} size={size} />\n    </span>\n  );\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Radio} className={radioWrapperClasses}>\n        {renderLabelAsParent({\n          label: label,\n          children: getLabelContent(),\n          inputId: inputId,\n          onColor: onColor as FormOnColor,\n          labelClassName: radioLabelClasses,\n          afterLabelChildrenClassName: radioStyles['radio-afterlabelchildren-wrapper'],\n        })}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nRadio.displayName = 'Radio';\n\nexport default Radio;\n"],"mappings":";;;;;;;;;;;AA6CA,IAAa,SAA8B,UAAS;CAClD,MAAM,EACJ,WACA,gBACA,UACA,UACA,OACA,UAAU,KAAK,GACf,UAAU,YAAY,SACtB,OAAO,SACP,MACA,WACA,aAAa,iBACb,QAAQ,CAAC,CAAC,WACV,uBACA,QAAQ,aAAa,KAAK,GAC1B,QACA,UACA,iBACA,KACA,GAAG,SACD;CACJ,MAAM,UAAU,SAAS,YAAY,YAAY;CACjD,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,cAAc,YAAY,YAAY;CAC5C,MAAM,WAAW,YAAY,YAAY;CACzC,MAAM,UAAU,SAAS,SAAS;CAElC,MAAM,cAAc,kBAAkB,eAAe;CAErD,MAAM,sBAAsB,WAAW,YAAY,kBAAkB;GAClE,YAAY,0BAA0B;GACtC,YAAY,mCAAmC,WAAW;GAC1D,YAAY,wCAAwC,WAAW;CAClE,CAAC;CACD,MAAM,oBAAoB,WACxB,YAAY,gBACZ;GACG,YAAY,2BAA2B;GACvC,YAAY,0BAA0B;GACtC,YAAY,0BAA0B;GACtC,YAAY,wBAAwB;GACpC,YAAY,kCAAkC,WAAW;GACzD,YAAY,iCAAiC,WAAW;GACxD,YAAY,sCAAsC,WAAW;GAC7D,YAAY,iCAAiC,WAAW;CAC3D,GACA,eACF;CACA,MAAM,eAAe,WAAW,YAAY,UAAU,SAAS;CAE/D,MAAM,wBACJ,qBAAC,QAAD;EAAM,WAAW,YAAY;EAA7B,UAAA,CACE,oBAAC,SAAD;GACE,GAAI;GACJ,IAAI;GACE;GACN,WAAW;GACX,MAAK;GACK;GACH;GACF;GACW;GAChB,oBAAkB,mBAAmB,OAAO,WAAW;GAC7C;GACA;EACX,CAAA,GACD,oBAAC,aAAD;GAAuB;GAAU,OAAO;GAAkB;GAAe;EAAO,CAAA,CAC5E;;CAGR,OACE,oBAAC,sBAAD;EAAc,WAAW;EAAkC;EAAwB;EACjF,UAAA,oBAAC,OAAD;GAAK,eAAa;GAAQ,oBAAkB,YAAY;GAAO,WAAW;GACvE,UAAA,oBAAoB;IACZ;IACP,UAAU,gBAAgB;IACjB;IACA;IACT,gBAAgB;IAChB,6BAA6B,YAAY;GAC3C,CAAC;EACE,CAAA;CACO,CAAA;AAElB;AAEA,MAAM,cAAc"}

package/lib/components/Button/Button.d.ts

@@ -5,7 +5,7 @@ export type ButtonVariant = 'fill' | 'outline' | 'borderless';
 export type ButtonSize = 'normal' | 'large';
 export type ButtonOnColor = 'onlight' | 'ondark';
 export type ButtonTags = 'button' | 'a';
-export type ButtonArrows = 'icon' | 'accessibility-character';
+export type ButtonArrows = 'icon' | 'inline-accessible-right' | 'inline-accessible-up' | 'inline-accessible-down' | 'accessibility-character';
 export type ButtonTextPosition = 'left' | 'centered';
 export interface ButtonProps extends Omit<HTMLButtonProps, 'onClick' | 'type'>, Omit<HTMLAnchorProps, 'onClick'>, AriaAttributes {
     /** Sets the aria-label of the button, use when the button only includes an icon */

package/lib/components/Button/styles.module.scss

@@ -463,10 +463,6 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     }
   }
 
-  &__right-unicode-arrow {
-    white-space: pre;
-  }
-
   /* stylelint-disable-next-line */
   &--outline &__text,
   &--borderless &__text {

package/lib/components/Button/styles.module.scss.d.ts

@@ -6,7 +6,6 @@ export type Styles = {
   'button__left-icon': string;
   'button__only-icon': string;
   'button__right-icon': string;
-  'button__right-unicode-arrow': string;
   button__text: string;
   'button__text--centered': string;
   'button__text--ellipsis': string;

package/lib/components/Checkbox/styles.module.scss

@@ -4,6 +4,7 @@
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/screen-reader' as *;
 @use '../../scss/breakpoints' as breakpoints;
+@use '../Label/styles.module' as label;
 
 $padding-clickable-area-top-bottom: 7px;
 $padding-clickable-area-left: 8px;
@@ -131,6 +132,10 @@ $padding-clickable-area-left: 8px;
       }
     }
 
+    &--checked:not(#{&}--on-invalid, #{&}--disabled) {
+      @include label.on-dark-tokens;
+    }
+
     &--checked#{&}--focus {
       color: palette.$blueberry900;
       background-color: palette.$blueberry500;
@@ -194,11 +199,6 @@ $padding-clickable-area-left: 8px;
   }
 }
 
-.checkbox-sublabel-wrapper {
-  margin-top: -$padding-clickable-area-top-bottom;
-  padding-left: calc(2.8rem + $padding-clickable-area-left);
-}
-
 .checkbox-afterlabelchildren-wrapper {
   padding-top: $padding-clickable-area-top-bottom;
 }

package/lib/components/Checkbox/styles.module.scss.d.ts

@@ -1,4 +1,5 @@
 export type Styles = {
+  'after-label-children': string;
   checkbox: string;
   'checkbox__marker-wrapper': string;
   'checkbox-afterlabelchildren-wrapper': string;
@@ -21,9 +22,19 @@ export type Styles = {
   'checkbox-label--disabled': string;
   'checkbox-label--large': string;
   'checkbox-label--on-dark': string;
-  'checkbox-sublabel-wrapper': string;
   'checkbox-wrapper': string;
   'checkbox-wrapper--large': string;
+  label: string;
+  label__texts: string;
+  'label--on-dark': string;
+  'label--subdued': string;
+  'label-content-wrapper': string;
+  'label-wrapper': string;
+  'label-wrapper--after-label-children': string;
+  'label-wrapper--no-bottom-margin': string;
+  sublabel: string;
+  'sublabel--on-dark': string;
+  'sublabel--subdued': string;
 };
 
 export type ClassNames = keyof Styles;

package/lib/components/Drawer/DrawerHeaderContent.module.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../../scss/breakpoints' as breakpoints;
 
 .header-content {
@@ -18,7 +19,15 @@
     align-self: flex-start;
     align-items: center;
     justify-content: flex-start;
-    margin-top: 0.5rem;
+    margin: var(--core-space-2xs) 0 0 var(--core-space-3xs);
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, xs)) {
+      margin-left: var(--core-space-2xs);
+    }
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      margin-left: var(--core-space-xs);
+    }
 
     &--centered {
       position: relative;

package/lib/components/Drawer/styles.module.scss

@@ -81,10 +81,14 @@
     }
 
     &--padding-extra {
-      padding: var(--core-space-xs) var(--core-space-xs) var(--core-space-xs) var(--core-space-s);
+      padding: var(--core-space-xs) var(--core-space-4xs) var(--core-space-xs) var(--core-space-4xs);
+
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, xs)) {
+        padding: var(--core-space-2xs);
+      }
 
       @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-        padding: var(--core-space-xs) var(--core-space-xs) var(--core-space-xs) var(--core-space-m);
+        padding: var(--core-space-xs);
       }
     }
 

package/lib/components/Expander/styles.module.scss.d.ts

@@ -6,7 +6,6 @@ export type Styles = {
   'button__left-icon': string;
   'button__only-icon': string;
   'button__right-icon': string;
-  'button__right-unicode-arrow': string;
   button__text: string;
   'button__text--centered': string;
   'button__text--ellipsis': string;

package/lib/components/Label/Label.d.ts

@@ -39,6 +39,8 @@ export interface LabelProps {
     testId?: string;
     /** Gives a custom classname to the afterLabelChildren wrapper. Used in checkbox and radiobutton */
     afterLabelChildrenClassName?: string;
+    /** Renders formFieldTag, sublabel and statusDot inside the label element, underneath the label texts. Used by Checkbox and Radio. */
+    sublabelInsideLabel?: boolean;
 }
 declare const Label: FunctionComponent<LabelProps>;
 export default Label;

package/lib/components/Label/styles.module.scss

@@ -5,6 +5,16 @@
 @use '../../scss/font-mixins' as fonts;
 @use '../../scss/breakpoints' as breakpoints;
 
+// Re-maps text and status dot tokens so sublabel and statusDot stay readable on the dark background of a checked large Radio/Checkbox.
+@mixin on-dark-tokens {
+  --color-base-subdued-text-dark: var(--color-base-text-ondark);
+  --component-statusdot-graphics-kiwi-onlight: var(--component-statusdot-graphics-kiwi-ondark);
+  --component-statusdot-graphics-banana-onlight: var(--component-statusdot-graphics-banana-ondark);
+  --component-statusdot-graphics-cherry-onlight: var(--component-statusdot-graphics-cherry-ondark);
+  --component-statusdot-graphics-blueberry-onlight: var(--component-statusdot-graphics-blueberry-ondark);
+  --component-statusdot-graphics-neutral-onlight: var(--component-statusdot-graphics-neutral-ondark);
+}
+
 .label-wrapper {
   margin-bottom: spacers.getSpacer(2xs);
   line-height: font-settings.$lineheight-size-xs;
@@ -44,6 +54,7 @@
   }
 
   &__texts {
+    display: block;
     min-width: 0;
   }
 }
@@ -51,8 +62,13 @@
 .sublabel {
   @include fonts.sublabel;
 
+  display: block;
   color: var(--color-base-subdued-text-dark);
 
+  & + & {
+    margin-top: var(--core-space-3xs);
+  }
+
   &--subdued {
     @include fonts.sublabel-subdued;
   }

package/lib/components/Label/utils.d.ts

@@ -18,7 +18,6 @@ interface RenderLabelAsParentProps {
     labelClassName?: string;
     labelTextClassName?: string;
     sublabelWrapperClassName?: string;
-    large?: boolean;
     markup?: LabelTags;
     afterLabelChildrenClassName?: string;
 }

package/lib/components/Modal/index.js

@@ -8,9 +8,9 @@ import { getAriaLabelAttributes } from "../../utils/accessibility.js";
 import useFocusTrap from "../../hooks/useFocusTrap.js";
 import { useIsVisible } from "../../hooks/useIsVisible.js";
 import { t as Close_default } from "../../Close.js";
+import { t as Title } from "../../Title.js";
 import { useReturnFocusOnUnmount } from "../../hooks/useReturnFocusOnUnmount.js";
 import { disableBodyScroll, enableBodyScroll } from "../../utils/scroll.js";
-import { t as Title } from "../../Title.js";
 import AlertSignFill from "../Icons/AlertSignFill.js";
 import AlertSignStroke from "../Icons/AlertSignStroke.js";
 import CheckOutline from "../Icons/CheckOutline.js";

package/lib/components/Panel/styles.module.scss.d.ts

@@ -6,7 +6,6 @@ export type Styles = {
   'button__left-icon': string;
   'button__only-icon': string;
   'button__right-icon': string;
-  'button__right-unicode-arrow': string;
   button__text: string;
   'button__text--centered': string;
   'button__text--ellipsis': string;

package/lib/components/Radio/styles.module.scss

@@ -3,6 +3,7 @@
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/breakpoints' as breakpoints;
 @use '../../scss/screen-reader' as *;
+@use '../Label/styles.module' as label;
 
 $padding-clickable-area-top-bottom: 8px;
 $padding-clickable-area-left: 8px;
@@ -145,13 +146,17 @@ $padding-clickable-area-left: 8px;
 
   &__large:has(input:checked) {
     background-color: palette.$blueberry500;
-    color: palette.$white;
+    color: var(--color-base-text-ondark);
 
     &:hover {
       background-color: palette.$blueberry600;
     }
   }
 
+  &__large:has(input:checked):not(#{&}__large--invalid, #{&}__large--disabled) {
+    @include label.on-dark-tokens;
+  }
+
   &__large#{&}__large--disabled {
     color: palette.$neutral700;
     background-color: palette.$neutral50;
@@ -180,11 +185,6 @@ $padding-clickable-area-left: 8px;
   margin-right: var(--core-space-s);
 }
 
-.radio-sublabel-wrapper {
-  margin-top: -$padding-clickable-area-top-bottom;
-  padding-left: calc(2.8rem + $padding-clickable-area-left);
-}
-
 .radio-afterlabelchildren-wrapper {
   padding-top: $padding-clickable-area-top-bottom;
 }

package/lib/components/Radio/styles.module.scss.d.ts

@@ -1,4 +1,13 @@
 export type Styles = {
+  'after-label-children': string;
+  label: string;
+  label__texts: string;
+  'label--on-dark': string;
+  'label--subdued': string;
+  'label-content-wrapper': string;
+  'label-wrapper': string;
+  'label-wrapper--after-label-children': string;
+  'label-wrapper--no-bottom-margin': string;
   radio: string;
   'radio__marker-wrapper': string;
   'radio-afterlabelchildren-wrapper': string;
@@ -12,11 +21,13 @@ export type Styles = {
   'radio-label--disabled': string;
   'radio-label--invalid': string;
   'radio-label--on-dark': string;
-  'radio-sublabel-wrapper': string;
   'radio-wrapper': string;
   'radio-wrapper__large': string;
   'radio-wrapper__large--invalid': string;
   'radio-wrapper__large--on-blueberry': string;
+  sublabel: string;
+  'sublabel--on-dark': string;
+  'sublabel--subdued': string;
 };
 
 export type ClassNames = keyof Styles;

package/lib/utils2.js

@@ -41,7 +41,7 @@ var Sublabel = ({ children, className, id, onColor, sublabelTexts, testId }) =>
 };
 //#endregion
 //#region src/components/Label/Label.tsx
-var Label = ({ afterLabelChildren, children, className, formFieldTag, htmlFor, htmlMarkup = "label", labelClassName, labelTextClassName, labelId, labelTexts, onColor = FormOnColor.onwhite, statusDot, sublabel, sublabelWrapperClassName, testId, afterLabelChildrenClassName }) => {
+var Label = ({ afterLabelChildren, children, className, formFieldTag, htmlFor, htmlMarkup = "label", labelClassName, labelTextClassName, labelId, labelTexts, onColor = FormOnColor.onwhite, statusDot, sublabel, sublabelWrapperClassName, testId, afterLabelChildrenClassName, sublabelInsideLabel }) => {
 	const hasChildren = children && typeof children !== "undefined";
 	const labelWrapperClasses = classNames(styles["label-wrapper"], { [styles["label-wrapper--no-bottom-margin"]]: hasChildren }, className);
 	const mainLabelWrapperClasses = classNames({ [styles["label-wrapper--after-label-children"]]: afterLabelChildren });
@@ -60,11 +60,20 @@ var Label = ({ afterLabelChildren, children, className, formFieldTag, htmlFor, h
 			}, index);
 		});
 	};
+	const CustomTag = htmlMarkup;
+	const renderSublabels = () => (sublabel || statusDot || formFieldTag) && /* @__PURE__ */ jsxs("div", {
+		className: sublabelWrapperClassName,
+		children: [
+			formFieldTag && isComponent(formFieldTag, FormFieldTag_default) && React.cloneElement(formFieldTag),
+			sublabel && isComponent(sublabel, Sublabel) && React.cloneElement(sublabel, { onColor }),
+			statusDot && isComponent(statusDot, StatusDot_default) && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Spacer_default, { size: "3xs" }), React.cloneElement(statusDot, { onColor: onColor === FormOnColor.ondark ? "ondark" : "onwhite" })] })
+		]
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: labelWrapperClasses,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: mainLabelWrapperClasses,
-			children: [/* @__PURE__ */ jsx(htmlMarkup, {
+			children: [/* @__PURE__ */ jsx(CustomTag, {
 				className: labelClassName,
 				id: labelId,
 				htmlFor,
@@ -72,23 +81,16 @@ var Label = ({ afterLabelChildren, children, className, formFieldTag, htmlFor, h
 				"data-analyticsid": AnalyticsId.Label,
 				children: /* @__PURE__ */ jsxs("span", {
 					className: styles["label-content-wrapper"],
-					children: [children, /* @__PURE__ */ jsx("span", {
+					children: [children, /* @__PURE__ */ jsxs("span", {
 						className: styles.label__texts,
-						children: mapLabels()
+						children: [mapLabels(), sublabelInsideLabel && renderSublabels()]
 					})]
 				})
 			}), afterLabelChildren && /* @__PURE__ */ jsx("div", {
 				className: afterLabelChildrenClasses,
 				children: afterLabelChildren
 			})]
-		}), (sublabel || statusDot || formFieldTag) && /* @__PURE__ */ jsxs("div", {
-			className: sublabelWrapperClassName,
-			children: [
-				formFieldTag && isComponent(formFieldTag, FormFieldTag_default) && React.cloneElement(formFieldTag),
-				sublabel && isComponent(sublabel, Sublabel) && React.cloneElement(sublabel, { onColor }),
-				statusDot && isComponent(statusDot, StatusDot_default) && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Spacer_default, { size: "3xs" }), React.cloneElement(statusDot, { onColor: onColor === FormOnColor.ondark ? "ondark" : "onwhite" })] })
-			]
-		})]
+		}), !sublabelInsideLabel && renderSublabels()]
 	});
 };
 //#endregion
@@ -125,8 +127,9 @@ var renderLabelAsParent = (props) => {
 		labelTextClassName: props.labelTextClassName,
 		htmlMarkup: props.markup || "label",
 		sublabelWrapperClassName: props.sublabelWrapperClassName,
-		sublabel: props.large ? void 0 : props.label.props.sublabel,
-		statusDot: props.large ? void 0 : props.label.props.statusDot,
+		sublabelInsideLabel: true,
+		sublabel: props.label.props.sublabel,
+		statusDot: props.label.props.statusDot,
 		afterLabelChildrenClassName: props.afterLabelChildrenClassName
 	}) : typeof props.label === "string" && /* @__PURE__ */ jsx(Label, {
 		labelTexts: [{
@@ -139,6 +142,7 @@ var renderLabelAsParent = (props) => {
 		labelClassName: props.labelClassName,
 		labelTextClassName: props.labelTextClassName,
 		sublabelWrapperClassName: props.sublabelWrapperClassName,
+		sublabelInsideLabel: true,
 		afterLabelChildrenClassName: props.afterLabelChildrenClassName,
 		children: props.children
 	}) });

package/lib/utils2.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils2.js","names":[],"sources":["../src/components/Label/SubLabel.tsx","../src/components/Label/Label.tsx","../src/components/Label/utils.tsx"],"sourcesContent":["import cn from 'classnames';\n\nimport type { LabelText } from './Label';\n\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport Spacer from '../Spacer';\n\nimport styles from './styles.module.scss';\n\nexport interface SublabelProps {\n  /** Sets the content of the Sublabel */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** id that is placed on the wrapper */\n  id: string;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: FormOnColor;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  sublabelTexts?: LabelText[];\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Sublabel: React.FC<SublabelProps> = ({ children, className, id, onColor, sublabelTexts, testId }) => {\n  const mapSublabels = (hideFromScreenReader?: boolean): React.ReactNode => {\n    return (\n      sublabelTexts &&\n      sublabelTexts.map((sublabelText, index) => {\n        const labelClasses = cn(styles.label, styles['sublabel'], {\n          [styles['sublabel--subdued']]: sublabelText.type === 'subdued',\n          [styles['sublabel--on-dark']]: onColor === FormOnColor.ondark,\n        });\n        return (\n          hideFromScreenReader === sublabelText.hideFromScreenReader && (\n            <span className={labelClasses} key={index}>\n              {sublabelText.text}\n            </span>\n          )\n        );\n      })\n    );\n  };\n\n  const subLabels = mapSublabels();\n  const ariaHiddenSublabels = mapSublabels(true);\n\n  return (\n    <>\n      <Spacer size={'3xs'} />\n      {(subLabels || children) && (\n        <div className={className} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Sublabel}>\n          {subLabels}\n          {children}\n        </div>\n      )}\n      {ariaHiddenSublabels && (\n        <div className={className} data-testid={testId}>\n          {ariaHiddenSublabels}\n        </div>\n      )}\n    </>\n  );\n};\n","import type { FunctionComponent } from 'react';\nimport React from 'react';\n\nimport cn from 'classnames';\n\nimport type { SublabelProps } from './SubLabel';\nimport type { FormFieldTagProps } from '../FormFieldTag';\nimport type { StatusDotProps } from '../StatusDot';\n\nimport { Sublabel } from './SubLabel';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport FormFieldTag from '../FormFieldTag';\nimport Spacer from '../Spacer';\nimport StatusDot from '../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type LabelText = {\n  hideFromScreenReader?: boolean;\n  text: string;\n  type?: 'normal' | 'subdued';\n};\n\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'label' | 'p' | 'legend';\n\nexport interface LabelProps {\n  /** Component shown after label - discourage use of this */\n  afterLabelChildren?: React.ReactNode;\n  /** Sets the content of the Label */\n  children?: React.ReactNode;\n  /** Sets a tag that describes whether the form field is required or optional */\n  formFieldTag?: React.ReactNode;\n  /** Adds custom classes to the label tag. */\n  labelClassName?: string;\n  /** Adds custom classes to the label text. */\n  labelTextClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Id that is put on the \"for\" attribute of the label */\n  htmlFor?: string;\n  /** Changes the underlying element of the label */\n  htmlMarkup?: LabelTags;\n  /** Id som plasseres på <label/> */\n  labelId?: string;\n  /** Array of main label strings. Can be of type semibold or normal */\n  labelTexts?: LabelText[];\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: keyof typeof FormOnColor;\n  /** StatusDot placed underneath the last sublabel */\n  statusDot?: React.ReactNode;\n  /** Sublabel component */\n  sublabel?: React.ReactNode;\n  /** Adds custom classes to the div wrapping the sublabels. */\n  sublabelWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Gives a custom classname to the afterLabelChildren wrapper. Used in checkbox and radiobutton */\n  afterLabelChildrenClassName?: string;\n}\n\nconst Label: FunctionComponent<LabelProps> = ({\n  afterLabelChildren,\n  children,\n  className,\n  formFieldTag,\n  htmlFor,\n  htmlMarkup = 'label',\n  labelClassName,\n  labelTextClassName,\n  labelId,\n  labelTexts,\n  onColor = FormOnColor.onwhite,\n  statusDot,\n  sublabel,\n  sublabelWrapperClassName,\n  testId,\n  afterLabelChildrenClassName,\n}) => {\n  const hasChildren = children && typeof children !== 'undefined';\n  const labelWrapperClasses = cn(styles['label-wrapper'], { [styles['label-wrapper--no-bottom-margin']]: hasChildren }, className);\n  const mainLabelWrapperClasses = cn({\n    [styles['label-wrapper--after-label-children']]: afterLabelChildren,\n  });\n  const afterLabelChildrenClasses = cn(styles['after-label-children'], afterLabelChildrenClassName);\n\n  const mapLabels = (): React.ReactNode => {\n    if (typeof labelTexts === 'undefined') return null;\n\n    return labelTexts.map((labelText, index) => {\n      const labelClasses = cn(\n        styles.label,\n        {\n          [styles['label--subdued']]: labelText.type === 'subdued',\n          [styles['label--on-dark']]: onColor === FormOnColor.ondark,\n        },\n        labelTextClassName\n      );\n      return (\n        <span aria-hidden={labelText.hideFromScreenReader} className={labelClasses} key={index}>\n          {labelText.text}\n        </span>\n      );\n    });\n  };\n  const CustomTag = htmlMarkup;\n\n  return (\n    <div className={labelWrapperClasses}>\n      <div className={mainLabelWrapperClasses}>\n        <CustomTag className={labelClassName} id={labelId} htmlFor={htmlFor} data-testid={testId} data-analyticsid={AnalyticsId.Label}>\n          <span className={styles['label-content-wrapper']}>\n            {children}\n            <span className={styles.label__texts}>{mapLabels()}</span>\n          </span>\n        </CustomTag>\n        {afterLabelChildren && <div className={afterLabelChildrenClasses}>{afterLabelChildren}</div>}\n      </div>\n      {(sublabel || statusDot || formFieldTag) && (\n        <div className={sublabelWrapperClassName}>\n          {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n          {sublabel &&\n            isComponent<SublabelProps>(sublabel, Sublabel) &&\n            React.cloneElement(sublabel, {\n              onColor: onColor as FormOnColor,\n            })}\n          {statusDot && isComponent<StatusDotProps>(statusDot, StatusDot) && (\n            <>\n              <Spacer size={'3xs'} />\n              {React.cloneElement(statusDot, {\n                onColor: onColor === FormOnColor.ondark ? 'ondark' : 'onwhite',\n              })}\n            </>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Label;\n","import React from 'react';\n\nimport cn from 'classnames';\n\nimport type { LabelProps, LabelTags } from './Label';\nimport type { FormOnColor } from '../../constants';\n\nimport Label from './Label';\nimport { isComponent } from '../../utils/component';\n\nexport const getLabelText = (label: React.ReactNode): string => {\n  let allLabelText = '';\n\n  if (isComponent<LabelProps>(label, Label)) {\n    label.props.labelTexts?.forEach(labelText => {\n      allLabelText += !labelText.hideFromScreenReader ? labelText.text : '';\n    });\n  }\n\n  return allLabelText;\n};\n\ninterface RenderLabelProps {\n  label: React.ReactNode;\n  inputId: string;\n  onColor: FormOnColor;\n  markup?: LabelTags;\n  className?: string;\n}\n\nexport const renderLabel = (props: RenderLabelProps): React.ReactNode => {\n  return (\n    <>\n      {props.label && isComponent<LabelProps>(props.label, Label)\n        ? React.cloneElement(props.label, {\n            htmlFor: props.inputId,\n            htmlMarkup: props.markup || 'label',\n            onColor: props.onColor,\n            className: props.className,\n          })\n        : typeof props.label === 'string' && (\n            <Label\n              labelTexts={[{ text: props.label, type: 'normal' }]}\n              htmlFor={props.inputId}\n              onColor={props.onColor}\n              className={props.className}\n            />\n          )}\n    </>\n  );\n};\n\ninterface RenderLabelAsParentProps {\n  label: React.ReactNode;\n  children: React.ReactNode;\n  inputId: string;\n  onColor: FormOnColor;\n  labelClassName?: string;\n  labelTextClassName?: string;\n  sublabelWrapperClassName?: string;\n  large?: boolean;\n  markup?: LabelTags;\n  afterLabelChildrenClassName?: string;\n}\n\nexport const renderLabelAsParent = (props: RenderLabelAsParentProps): React.ReactNode => {\n  return (\n    <>\n      {props.label && isComponent<LabelProps>(props.label, Label)\n        ? React.cloneElement(props.label, {\n            htmlFor: props.inputId,\n            onColor: props.onColor,\n            children: props.children,\n            labelClassName: cn(props.labelClassName, props.label.props.labelClassName),\n            labelTextClassName: props.labelTextClassName,\n            htmlMarkup: props.markup || 'label',\n            sublabelWrapperClassName: props.sublabelWrapperClassName,\n            sublabel: props.large ? undefined : props.label.props.sublabel,\n            statusDot: props.large ? undefined : props.label.props.statusDot,\n            afterLabelChildrenClassName: props.afterLabelChildrenClassName,\n          })\n        : typeof props.label === 'string' && (\n            <Label\n              labelTexts={[{ text: props.label, type: 'subdued' }]}\n              htmlFor={props.inputId}\n              onColor={props.onColor}\n              htmlMarkup={props.markup || 'label'}\n              labelClassName={props.labelClassName}\n              labelTextClassName={props.labelTextClassName}\n              sublabelWrapperClassName={props.sublabelWrapperClassName}\n              afterLabelChildrenClassName={props.afterLabelChildrenClassName}\n            >\n              {props.children}\n            </Label>\n          )}\n    </>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"utils2.js","names":[],"sources":["../src/components/Label/SubLabel.tsx","../src/components/Label/Label.tsx","../src/components/Label/utils.tsx"],"sourcesContent":["import cn from 'classnames';\n\nimport type { LabelText } from './Label';\n\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport Spacer from '../Spacer';\n\nimport styles from './styles.module.scss';\n\nexport interface SublabelProps {\n  /** Sets the content of the Sublabel */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** id that is placed on the wrapper */\n  id: string;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: FormOnColor;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  sublabelTexts?: LabelText[];\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Sublabel: React.FC<SublabelProps> = ({ children, className, id, onColor, sublabelTexts, testId }) => {\n  const mapSublabels = (hideFromScreenReader?: boolean): React.ReactNode => {\n    return (\n      sublabelTexts &&\n      sublabelTexts.map((sublabelText, index) => {\n        const labelClasses = cn(styles.label, styles['sublabel'], {\n          [styles['sublabel--subdued']]: sublabelText.type === 'subdued',\n          [styles['sublabel--on-dark']]: onColor === FormOnColor.ondark,\n        });\n        return (\n          hideFromScreenReader === sublabelText.hideFromScreenReader && (\n            <span className={labelClasses} key={index}>\n              {sublabelText.text}\n            </span>\n          )\n        );\n      })\n    );\n  };\n\n  const subLabels = mapSublabels();\n  const ariaHiddenSublabels = mapSublabels(true);\n\n  return (\n    <>\n      <Spacer size={'3xs'} />\n      {(subLabels || children) && (\n        <div className={className} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Sublabel}>\n          {subLabels}\n          {children}\n        </div>\n      )}\n      {ariaHiddenSublabels && (\n        <div className={className} data-testid={testId}>\n          {ariaHiddenSublabels}\n        </div>\n      )}\n    </>\n  );\n};\n","import type { FunctionComponent } from 'react';\nimport React from 'react';\n\nimport cn from 'classnames';\n\nimport type { SublabelProps } from './SubLabel';\nimport type { FormFieldTagProps } from '../FormFieldTag';\nimport type { StatusDotProps } from '../StatusDot';\n\nimport { Sublabel } from './SubLabel';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport FormFieldTag from '../FormFieldTag';\nimport Spacer from '../Spacer';\nimport StatusDot from '../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type LabelText = {\n  hideFromScreenReader?: boolean;\n  text: string;\n  type?: 'normal' | 'subdued';\n};\n\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'label' | 'p' | 'legend';\n\nexport interface LabelProps {\n  /** Component shown after label - discourage use of this */\n  afterLabelChildren?: React.ReactNode;\n  /** Sets the content of the Label */\n  children?: React.ReactNode;\n  /** Sets a tag that describes whether the form field is required or optional */\n  formFieldTag?: React.ReactNode;\n  /** Adds custom classes to the label tag. */\n  labelClassName?: string;\n  /** Adds custom classes to the label text. */\n  labelTextClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Id that is put on the \"for\" attribute of the label */\n  htmlFor?: string;\n  /** Changes the underlying element of the label */\n  htmlMarkup?: LabelTags;\n  /** Id som plasseres på <label/> */\n  labelId?: string;\n  /** Array of main label strings. Can be of type semibold or normal */\n  labelTexts?: LabelText[];\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: keyof typeof FormOnColor;\n  /** StatusDot placed underneath the last sublabel */\n  statusDot?: React.ReactNode;\n  /** Sublabel component */\n  sublabel?: React.ReactNode;\n  /** Adds custom classes to the div wrapping the sublabels. */\n  sublabelWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Gives a custom classname to the afterLabelChildren wrapper. Used in checkbox and radiobutton */\n  afterLabelChildrenClassName?: string;\n  /** Renders formFieldTag, sublabel and statusDot inside the label element, underneath the label texts. Used by Checkbox and Radio. */\n  sublabelInsideLabel?: boolean;\n}\n\nconst Label: FunctionComponent<LabelProps> = ({\n  afterLabelChildren,\n  children,\n  className,\n  formFieldTag,\n  htmlFor,\n  htmlMarkup = 'label',\n  labelClassName,\n  labelTextClassName,\n  labelId,\n  labelTexts,\n  onColor = FormOnColor.onwhite,\n  statusDot,\n  sublabel,\n  sublabelWrapperClassName,\n  testId,\n  afterLabelChildrenClassName,\n  sublabelInsideLabel,\n}) => {\n  const hasChildren = children && typeof children !== 'undefined';\n  const labelWrapperClasses = cn(styles['label-wrapper'], { [styles['label-wrapper--no-bottom-margin']]: hasChildren }, className);\n  const mainLabelWrapperClasses = cn({\n    [styles['label-wrapper--after-label-children']]: afterLabelChildren,\n  });\n  const afterLabelChildrenClasses = cn(styles['after-label-children'], afterLabelChildrenClassName);\n\n  const mapLabels = (): React.ReactNode => {\n    if (typeof labelTexts === 'undefined') return null;\n\n    return labelTexts.map((labelText, index) => {\n      const labelClasses = cn(\n        styles.label,\n        {\n          [styles['label--subdued']]: labelText.type === 'subdued',\n          [styles['label--on-dark']]: onColor === FormOnColor.ondark,\n        },\n        labelTextClassName\n      );\n      return (\n        <span aria-hidden={labelText.hideFromScreenReader} className={labelClasses} key={index}>\n          {labelText.text}\n        </span>\n      );\n    });\n  };\n  const CustomTag = htmlMarkup;\n\n  const renderSublabels = (): React.ReactNode =>\n    (sublabel || statusDot || formFieldTag) && (\n      <div className={sublabelWrapperClassName}>\n        {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n        {sublabel &&\n          isComponent<SublabelProps>(sublabel, Sublabel) &&\n          React.cloneElement(sublabel, {\n            onColor: onColor as FormOnColor,\n          })}\n        {statusDot && isComponent<StatusDotProps>(statusDot, StatusDot) && (\n          <>\n            <Spacer size={'3xs'} />\n            {React.cloneElement(statusDot, {\n              onColor: onColor === FormOnColor.ondark ? 'ondark' : 'onwhite',\n            })}\n          </>\n        )}\n      </div>\n    );\n\n  return (\n    <div className={labelWrapperClasses}>\n      <div className={mainLabelWrapperClasses}>\n        <CustomTag className={labelClassName} id={labelId} htmlFor={htmlFor} data-testid={testId} data-analyticsid={AnalyticsId.Label}>\n          <span className={styles['label-content-wrapper']}>\n            {children}\n            <span className={styles.label__texts}>\n              {mapLabels()}\n              {sublabelInsideLabel && renderSublabels()}\n            </span>\n          </span>\n        </CustomTag>\n        {afterLabelChildren && <div className={afterLabelChildrenClasses}>{afterLabelChildren}</div>}\n      </div>\n      {!sublabelInsideLabel && renderSublabels()}\n    </div>\n  );\n};\n\nexport default Label;\n","import React from 'react';\n\nimport cn from 'classnames';\n\nimport type { LabelProps, LabelTags } from './Label';\nimport type { FormOnColor } from '../../constants';\n\nimport Label from './Label';\nimport { isComponent } from '../../utils/component';\n\nexport const getLabelText = (label: React.ReactNode): string => {\n  let allLabelText = '';\n\n  if (isComponent<LabelProps>(label, Label)) {\n    label.props.labelTexts?.forEach(labelText => {\n      allLabelText += !labelText.hideFromScreenReader ? labelText.text : '';\n    });\n  }\n\n  return allLabelText;\n};\n\ninterface RenderLabelProps {\n  label: React.ReactNode;\n  inputId: string;\n  onColor: FormOnColor;\n  markup?: LabelTags;\n  className?: string;\n}\n\nexport const renderLabel = (props: RenderLabelProps): React.ReactNode => {\n  return (\n    <>\n      {props.label && isComponent<LabelProps>(props.label, Label)\n        ? React.cloneElement(props.label, {\n            htmlFor: props.inputId,\n            htmlMarkup: props.markup || 'label',\n            onColor: props.onColor,\n            className: props.className,\n          })\n        : typeof props.label === 'string' && (\n            <Label\n              labelTexts={[{ text: props.label, type: 'normal' }]}\n              htmlFor={props.inputId}\n              onColor={props.onColor}\n              className={props.className}\n            />\n          )}\n    </>\n  );\n};\n\ninterface RenderLabelAsParentProps {\n  label: React.ReactNode;\n  children: React.ReactNode;\n  inputId: string;\n  onColor: FormOnColor;\n  labelClassName?: string;\n  labelTextClassName?: string;\n  sublabelWrapperClassName?: string;\n  markup?: LabelTags;\n  afterLabelChildrenClassName?: string;\n}\n\nexport const renderLabelAsParent = (props: RenderLabelAsParentProps): React.ReactNode => {\n  return (\n    <>\n      {props.label && isComponent<LabelProps>(props.label, Label)\n        ? React.cloneElement(props.label, {\n            htmlFor: props.inputId,\n            onColor: props.onColor,\n            children: props.children,\n            labelClassName: cn(props.labelClassName, props.label.props.labelClassName),\n            labelTextClassName: props.labelTextClassName,\n            htmlMarkup: props.markup || 'label',\n            sublabelWrapperClassName: props.sublabelWrapperClassName,\n            sublabelInsideLabel: true,\n            sublabel: props.label.props.sublabel,\n            statusDot: props.label.props.statusDot,\n            afterLabelChildrenClassName: props.afterLabelChildrenClassName,\n          })\n        : typeof props.label === 'string' && (\n            <Label\n              labelTexts={[{ text: props.label, type: 'subdued' }]}\n              htmlFor={props.inputId}\n              onColor={props.onColor}\n              htmlMarkup={props.markup || 'label'}\n              labelClassName={props.labelClassName}\n              labelTextClassName={props.labelTextClassName}\n              sublabelWrapperClassName={props.sublabelWrapperClassName}\n              sublabelInsideLabel\n              afterLabelChildrenClassName={props.afterLabelChildrenClassName}\n            >\n              {props.children}\n            </Label>\n          )}\n    </>\n  );\n};\n"],"mappings":"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"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@helsenorge/designsystem-react",
   "sideEffects": false,
   "private": false,
-  "version": "16.1.0",
+  "version": "16.2.0",
   "description": "The official design system for Helsenorge built with React.",
   "repository": {
     "type": "git",