@helsenorge/designsystem-react 11.0.0 → 11.1.0

package/Button.js

@@ -3,11 +3,10 @@ import React__default, { useRef, useEffect } from "react";
 import classNames from "classnames";
 import { I as Icon } from "./Icon.js";
 import { AnalyticsId, IconSize } from "./constants.js";
-import { useBreakpoint } from "./hooks/useBreakpoint.js";
 import { useHover } from "./hooks/useHover.js";
 import { useIcons } from "./hooks/useIcons.js";
+import { useIsMobileBreakpoint } from "./hooks/useIsMobileBreakpoint.js";
 import { getColor } from "./theme/currys/color.js";
-import { breakpoints } from "./theme/grid.js";
 import { isTest, isProd } from "./utils/environment.js";
 import ArrowRight from "./components/Icons/ArrowRight.js";
 import buttonStyles from "./components/Button/styles.module.scss";
@@ -66,12 +65,11 @@ const Button = React__default.forwardRef(function ButtonForwardedRef(props, ref)
   const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;
   const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;
   const onDark = onColor === "ondark";
-  const breakpoint = useBreakpoint();
-  const mobile = breakpoint < breakpoints.md;
+  const isMobile = useIsMobileBreakpoint();
   const destructive = concept === "destructive" && !disabled;
   const outlineVariant = variant === "outline";
   const borderlessVariant = variant === "borderless";
-  const iconColor = getIconColor(variant === "fill", borderlessVariant, disabled, concept, onDark, mobile);
+  const iconColor = getIconColor(variant === "fill", borderlessVariant, disabled, concept, onDark, isMobile);
   const hasArrow = arrow === "icon" && !borderlessVariant;
   const large = size === "large" && !destructive && !borderlessVariant;
   const hasUURightArrow = arrow === "accessibility-character" && !fluid && !leftIcon && !rightIcon && !hasArrow && borderlessVariant;
@@ -127,13 +125,13 @@ const Button = React__default.forwardRef(function ButtonForwardedRef(props, ref)
     ] });
   };
   const renderbuttonContentWrapper = () => /* @__PURE__ */ jsxs("span", { className: buttonClasses, children: [
-    renderIcon(leftIcon, getLargeIconSize(large, mobile), !onlyIcon ? buttonStyles["button__left-icon"] : void 0),
+    renderIcon(leftIcon, getLargeIconSize(large, isMobile), !onlyIcon ? buttonStyles["button__left-icon"] : void 0),
     renderButtonContent(),
     hasArrow ? renderIcon(
       /* @__PURE__ */ jsx(Icon, { svgIcon: ArrowRight }),
-      getLargeIconSize(large, mobile),
+      getLargeIconSize(large, isMobile),
       classNames(buttonStyles["button__arrow"], { [buttonStyles["button__arrow--both-icons"]]: bothIcons })
-    ) : renderIcon(rightIcon, getLargeIconSize(large, mobile), buttonStyles["button__right-icon"]),
+    ) : renderIcon(rightIcon, getLargeIconSize(large, isMobile), buttonStyles["button__right-icon"]),
     hasUURightArrow && /* @__PURE__ */ jsx("span", { style: { color: iconColor }, className: buttonStyles["button__right-unicode-arrow"], "aria-hidden": true, children: "  →" })
   ] });
   return /* @__PURE__ */ jsxs(Fragment, { children: [

package/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import React, { AriaAttributes, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from './../Icon';\nimport { HTMLButtonProps, HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { BaseIconElement, useIcons } from '../../hooks/useIcons';\nimport { getColor } from '../../theme/currys/color';\nimport { breakpoints } from '../../theme/grid';\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 = 'medium' | '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 HTMLButtonProps, HTMLAnchorProps, 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?: (e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<{}> | React.KeyboardEvent<HTMLUListElement> | null) => 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}\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 getLargeIconSize = (large: boolean, mobile: boolean): IconSize => {\n  if (mobile && large) return IconSize.Small;\n  if (large) return IconSize.Medium;\n  return IconSize.XSmall;\n};\n\nconst checkOnlyIconAria = (onlyIcon: boolean, ariaLabel: string | undefined, devEnv: boolean): void => {\n  if (devEnv && onlyIcon && (ariaLabel === undefined || ariaLabel === '')) {\n    throw new Error('Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav');\n  }\n};\n\nconst Button = React.forwardRef(function ButtonForwardedRef(\n  props: ButtonProps,\n  ref: React.ForwardedRef<HTMLButtonElement | HTMLAnchorElement>\n) {\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 = 'medium',\n    variant = 'fill',\n    href,\n    tabIndex,\n    testId,\n    target,\n    type = 'button',\n    textClassName,\n    textPosition = 'left',\n    ...restProps\n  } = props;\n\n  const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));\n  const { hoverRef, isHovered } =\n    htmlMarkup === 'button'\n      ? useHover<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>)\n      : useHover<HTMLAnchorElement>(ref as React.RefObject<HTMLAnchorElement>);\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 breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\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, mobile);\n  const hasArrow = arrow === 'icon' && !borderlessVariant;\n  const large = size === 'large' && !destructive && !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']]: large,\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 = (): JSX.Element => {\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 = (): JSX.Element => (\n    <span className={buttonClasses}>\n      {renderIcon(leftIcon, getLargeIconSize(large, mobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n      {renderButtonContent()}\n      {hasArrow\n        ? renderIcon(\n            <Icon svgIcon={ArrowRight} />,\n            getLargeIconSize(large, mobile),\n            classNames(buttonStyles['button__arrow'], { [buttonStyles['button__arrow--both-icons']]: bothIcons })\n          )\n        : renderIcon(rightIcon, getLargeIconSize(large, mobile), 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  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={hoverRef as React.ForwardedRef<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={hoverRef as React.ForwardedRef<HTMLAnchorElement>}\n          tabIndex={tabIndex}\n          {...restProps}\n        >\n          {renderbuttonContentWrapper()}\n        </a>\n      )}\n    </>\n  );\n});\n\nexport default Button;\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import React, { AriaAttributes, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from './../Icon';\nimport { HTMLButtonProps, HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { BaseIconElement, useIcons } from '../../hooks/useIcons';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\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 = 'medium' | '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 HTMLButtonProps, HTMLAnchorProps, 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?: (e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<{}> | React.KeyboardEvent<HTMLUListElement> | null) => 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}\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 getLargeIconSize = (large: boolean, mobile: boolean): IconSize => {\n  if (mobile && large) return IconSize.Small;\n  if (large) return IconSize.Medium;\n  return IconSize.XSmall;\n};\n\nconst checkOnlyIconAria = (onlyIcon: boolean, ariaLabel: string | undefined, devEnv: boolean): void => {\n  if (devEnv && onlyIcon && (ariaLabel === undefined || ariaLabel === '')) {\n    throw new Error('Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav');\n  }\n};\n\nconst Button = React.forwardRef(function ButtonForwardedRef(\n  props: ButtonProps,\n  ref: React.ForwardedRef<HTMLButtonElement | HTMLAnchorElement>\n) {\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 = 'medium',\n    variant = 'fill',\n    href,\n    tabIndex,\n    testId,\n    target,\n    type = 'button',\n    textClassName,\n    textPosition = 'left',\n    ...restProps\n  } = props;\n\n  const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));\n  const { hoverRef, isHovered } =\n    htmlMarkup === 'button'\n      ? useHover<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>)\n      : useHover<HTMLAnchorElement>(ref as React.RefObject<HTMLAnchorElement>);\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 && !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']]: large,\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 = (): JSX.Element => {\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 = (): JSX.Element => (\n    <span className={buttonClasses}>\n      {renderIcon(leftIcon, getLargeIconSize(large, isMobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n      {renderButtonContent()}\n      {hasArrow\n        ? renderIcon(\n            <Icon svgIcon={ArrowRight} />,\n            getLargeIconSize(large, isMobile),\n            classNames(buttonStyles['button__arrow'], { [buttonStyles['button__arrow--both-icons']]: bothIcons })\n          )\n        : renderIcon(rightIcon, getLargeIconSize(large, isMobile), 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  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={hoverRef as React.ForwardedRef<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={hoverRef as React.ForwardedRef<HTMLAnchorElement>}\n          tabIndex={tabIndex}\n          {...restProps}\n        >\n          {renderbuttonContentWrapper()}\n        </a>\n      )}\n    </>\n  );\n});\n\nexport default Button;\n"],"names":["React"],"mappings":"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"}

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [11.1.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv11.0.0&targetVersion=GTv11.1.0) (2025-05-09)
+
+
+### Features
+
+*  ny hook useismobilebreakpoint ([a5db7ed](https://github.com/helsenorge/designsystem/commit/a5db7ed8753af15ea29e459c2d5032b43e813856)), closes [#351338](https://github.com/helsenorge/designsystem/issues/351338)
+*  spacers tokens lagt til ([40b77e4](https://github.com/helsenorge/designsystem/commit/40b77e4626971621f6645e61df2636249463c2f7)), closes [#347154](https://github.com/helsenorge/designsystem/issues/347154)
+* **drawer:**  mulighet til å skru av lukkekryss ([f486bee](https://github.com/helsenorge/designsystem/commit/f486bee62d3709e2c4b9f39d6ce9e770c4010cc4)), closes [#351292](https://github.com/helsenorge/designsystem/issues/351292)
+* **modal:**  footercontent prop legges til for å kunne gi egne cta buttons ([f5b0519](https://github.com/helsenorge/designsystem/commit/f5b051917081f6f7d8be44ff33679ace6a6e02da)), closes [#350943](https://github.com/helsenorge/designsystem/issues/350943)
+
+
+### Bug Fixes
+
+* **lightbox:**  fiks problem med store knapper på ios ([91481f6](https://github.com/helsenorge/designsystem/commit/91481f64ad0982f579558407658747eae5a5a30e)), closes [#331056](https://github.com/helsenorge/designsystem/issues/331056)
+* **lightbox:**  scrollbar vises ikke med lightbox åpen ([3953140](https://github.com/helsenorge/designsystem/commit/3953140a0e1411edc18161eff7e1e727933cb3c3)), closes [#350843](https://github.com/helsenorge/designsystem/issues/350843)
+
 ## [11.0.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv10.8.0&targetVersion=GTv11.0.0) (2025-04-29)
 
 

package/components/Drawer/Drawer.d.ts

@@ -26,6 +26,8 @@ export interface InnerDrawerProps {
     footerContent?: React.ReactNode;
     /** Main content of the drawer */
     children?: React.ReactNode;
+    /** Hides the close button */
+    noCloseButton?: boolean;
     /** Primary CTA callback */
     onPrimaryAction?: () => void;
     /** Text for primary CTA button if you want a default CTA button rendered (instead of `footerContent`) */

package/components/Drawer/index.js

@@ -3,12 +3,11 @@ import * as React from "react";
 import { createContext, useId, useRef, useContext, useInsertionEffect, useCallback, useMemo, useEffect, Children, isValidElement, useLayoutEffect, useState } from "react";
 import classNames from "classnames";
 import { ZIndex, KeyboardEventKey, AnalyticsId } from "../../constants.js";
-import { useBreakpoint } from "../../hooks/useBreakpoint.js";
 import { useFocusTrap } from "../../hooks/useFocusTrap.js";
+import { useIsMobileBreakpoint } from "../../hooks/useIsMobileBreakpoint.js";
 import { useKeyboardEvent } from "../../hooks/useKeyboardEvent.js";
 import { useOutsideEvent } from "../../hooks/useOutsideEvent.js";
 import { useReturnFocusOnUnmount } from "../../hooks/useReturnFocusOnUnmount.js";
-import { breakpoints } from "../../theme/grid.js";
 import { getAriaLabelAttributes } from "../../utils/accessibility.js";
 import { u as uuid } from "../../uuid.js";
 import { B as Button } from "../../Button.js";
@@ -242,8 +241,7 @@ const InnerDrawer = (props) => {
   const overlayRef = useRef(null);
   const containerRef = useRef(null);
   const contentRef = useRef(null);
-  const breakpoint = useBreakpoint();
-  const isMobile = breakpoint < breakpoints.md;
+  const isMobile = useIsMobileBreakpoint();
   const [scope, animate] = useAnimate();
   const [isPresent, safeToRemove] = usePresence();
   const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;
@@ -323,7 +321,7 @@ const InnerDrawer = (props) => {
           /* @__PURE__ */ jsxs("div", { className: styles.drawer__container__inner, children: [
             /* @__PURE__ */ jsxs("div", { className: styles.drawer__header, children: [
               /* @__PURE__ */ jsx(Title, { id: ariaLabelAttributes == null ? void 0 : ariaLabelAttributes["aria-labelledby"], htmlMarkup: titleHtmlMarkup, appearance: "title3", children: title }),
-              /* @__PURE__ */ jsx(Close, { ariaLabel: ariaLabelCloseBtn, onClick: onRequestClose, small: isMobile })
+              !props.noCloseButton && /* @__PURE__ */ jsx(Close, { ariaLabel: ariaLabelCloseBtn, onClick: onRequestClose, small: isMobile })
             ] }),
             /* @__PURE__ */ jsx(
               "div",

package/components/Drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../node_modules/motion/dist/es/framer-motion/dist/es/context/LayoutGroupContext.mjs","../../../../../node_modules/motion/dist/es/framer-motion/dist/es/context/PresenceContext.mjs","../../../../../node_modules/motion/dist/es/framer-motion/dist/es/context/MotionConfigContext.mjs","../../../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs","../../../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs","../../../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs","../../../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/utils.mjs","../../../../../node_modules/motion/dist/es/framer-motion/dist/es/utils/use-isomorphic-effect.mjs","../../../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/index.mjs","../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["\"use client\";\nimport { createContext } from 'react';\n\nconst LayoutGroupContext = createContext({});\n\nexport { LayoutGroupContext };\n","\"use client\";\nimport { createContext } from 'react';\n\n/**\n * @public\n */\nconst PresenceContext = createContext(null);\n\nexport { PresenceContext };\n","\"use client\";\nimport { createContext } from 'react';\n\n/**\n * @public\n */\nconst MotionConfigContext = createContext({\n    transformPagePoint: (p) => p,\n    isStatic: false,\n    reducedMotion: \"never\",\n});\n\nexport { MotionConfigContext };\n","\"use client\";\nimport { jsx } from 'react/jsx-runtime';\nimport * as React from 'react';\nimport { useId, useRef, useContext, useInsertionEffect } from 'react';\nimport { MotionConfigContext } from '../../context/MotionConfigContext.mjs';\n\n/**\n * Measurement functionality has to be within a separate component\n * to leverage snapshot lifecycle.\n */\nclass PopChildMeasure extends React.Component {\n    getSnapshotBeforeUpdate(prevProps) {\n        const element = this.props.childRef.current;\n        if (element && prevProps.isPresent && !this.props.isPresent) {\n            const size = this.props.sizeRef.current;\n            size.height = element.offsetHeight || 0;\n            size.width = element.offsetWidth || 0;\n            size.top = element.offsetTop;\n            size.left = element.offsetLeft;\n        }\n        return null;\n    }\n    /**\n     * Required with getSnapshotBeforeUpdate to stop React complaining.\n     */\n    componentDidUpdate() { }\n    render() {\n        return this.props.children;\n    }\n}\nfunction PopChild({ children, isPresent }) {\n    const id = useId();\n    const ref = useRef(null);\n    const size = useRef({\n        width: 0,\n        height: 0,\n        top: 0,\n        left: 0,\n    });\n    const { nonce } = useContext(MotionConfigContext);\n    /**\n     * We create and inject a style block so we can apply this explicit\n     * sizing in a non-destructive manner by just deleting the style block.\n     *\n     * We can't apply size via render as the measurement happens\n     * in getSnapshotBeforeUpdate (post-render), likewise if we apply the\n     * styles directly on the DOM node, we might be overwriting\n     * styles set via the style prop.\n     */\n    useInsertionEffect(() => {\n        const { width, height, top, left } = size.current;\n        if (isPresent || !ref.current || !width || !height)\n            return;\n        ref.current.dataset.motionPopId = id;\n        const style = document.createElement(\"style\");\n        if (nonce)\n            style.nonce = nonce;\n        document.head.appendChild(style);\n        if (style.sheet) {\n            style.sheet.insertRule(`\n          [data-motion-pop-id=\"${id}\"] {\n            position: absolute !important;\n            width: ${width}px !important;\n            height: ${height}px !important;\n            top: ${top}px !important;\n            left: ${left}px !important;\n          }\n        `);\n        }\n        return () => {\n            document.head.removeChild(style);\n        };\n    }, [isPresent]);\n    return (jsx(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size, children: React.cloneElement(children, { ref }) }));\n}\n\nexport { PopChild };\n","\"use client\";\nimport { jsx } from 'react/jsx-runtime';\nimport * as React from 'react';\nimport { useId, useCallback, useMemo } from 'react';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\nimport { useConstant } from '../../utils/use-constant.mjs';\nimport { PopChild } from './PopChild.mjs';\n\nconst PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, }) => {\n    const presenceChildren = useConstant(newChildrenMap);\n    const id = useId();\n    const memoizedOnExitComplete = useCallback((childId) => {\n        presenceChildren.set(childId, true);\n        for (const isComplete of presenceChildren.values()) {\n            if (!isComplete)\n                return; // can stop searching when any is incomplete\n        }\n        onExitComplete && onExitComplete();\n    }, [presenceChildren, onExitComplete]);\n    const context = useMemo(() => ({\n        id,\n        initial,\n        isPresent,\n        custom,\n        onExitComplete: memoizedOnExitComplete,\n        register: (childId) => {\n            presenceChildren.set(childId, false);\n            return () => presenceChildren.delete(childId);\n        },\n    }), \n    /**\n     * If the presence of a child affects the layout of the components around it,\n     * we want to make a new context value to ensure they get re-rendered\n     * so they can detect that layout change.\n     */\n    presenceAffectsLayout\n        ? [Math.random(), memoizedOnExitComplete]\n        : [isPresent, memoizedOnExitComplete]);\n    useMemo(() => {\n        presenceChildren.forEach((_, key) => presenceChildren.set(key, false));\n    }, [isPresent]);\n    /**\n     * If there's no `motion` components to fire exit animations, we want to remove this\n     * component immediately.\n     */\n    React.useEffect(() => {\n        !isPresent &&\n            !presenceChildren.size &&\n            onExitComplete &&\n            onExitComplete();\n    }, [isPresent]);\n    if (mode === \"popLayout\") {\n        children = jsx(PopChild, { isPresent: isPresent, children: children });\n    }\n    return (jsx(PresenceContext.Provider, { value: context, children: children }));\n};\nfunction newChildrenMap() {\n    return new Map();\n}\n\nexport { PresenceChild };\n","import { useContext, useId, useEffect, useCallback } from 'react';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\n\n/**\n * When a component is the child of `AnimatePresence`, it can use `usePresence`\n * to access information about whether it's still present in the React tree.\n *\n * ```jsx\n * import { usePresence } from \"framer-motion\"\n *\n * export const Component = () => {\n *   const [isPresent, safeToRemove] = usePresence()\n *\n *   useEffect(() => {\n *     !isPresent && setTimeout(safeToRemove, 1000)\n *   }, [isPresent])\n *\n *   return <div />\n * }\n * ```\n *\n * If `isPresent` is `false`, it means that a component has been removed the tree, but\n * `AnimatePresence` won't really remove it until `safeToRemove` has been called.\n *\n * @public\n */\nfunction usePresence(subscribe = true) {\n    const context = useContext(PresenceContext);\n    if (context === null)\n        return [true, null];\n    const { isPresent, onExitComplete, register } = context;\n    // It's safe to call the following hooks conditionally (after an early return) because the context will always\n    // either be null or non-null for the lifespan of the component.\n    const id = useId();\n    useEffect(() => {\n        if (subscribe)\n            register(id);\n    }, [subscribe]);\n    const safeToRemove = useCallback(() => subscribe && onExitComplete && onExitComplete(id), [id, onExitComplete, subscribe]);\n    return !isPresent && onExitComplete ? [false, safeToRemove] : [true];\n}\n/**\n * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.\n * There is no `safeToRemove` function.\n *\n * ```jsx\n * import { useIsPresent } from \"framer-motion\"\n *\n * export const Component = () => {\n *   const isPresent = useIsPresent()\n *\n *   useEffect(() => {\n *     !isPresent && console.log(\"I've been removed!\")\n *   }, [isPresent])\n *\n *   return <div />\n * }\n * ```\n *\n * @public\n */\nfunction useIsPresent() {\n    return isPresent(useContext(PresenceContext));\n}\nfunction isPresent(context) {\n    return context === null ? true : context.isPresent;\n}\n\nexport { isPresent, useIsPresent, usePresence };\n","import { Children, isValidElement } from 'react';\n\nconst getChildKey = (child) => child.key || \"\";\nfunction onlyElements(children) {\n    const filtered = [];\n    // We use forEach here instead of map as map mutates the component key by preprending `.$`\n    Children.forEach(children, (child) => {\n        if (isValidElement(child))\n            filtered.push(child);\n    });\n    return filtered;\n}\n\nexport { getChildKey, onlyElements };\n","import { useLayoutEffect, useEffect } from 'react';\nimport { isBrowser } from './is-browser.mjs';\n\nconst useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;\n\nexport { useIsomorphicLayoutEffect };\n","\"use client\";\nimport { jsx, Fragment } from 'react/jsx-runtime';\nimport { useMemo, useRef, useState, useContext } from 'react';\nimport { LayoutGroupContext } from '../../context/LayoutGroupContext.mjs';\nimport { useConstant } from '../../utils/use-constant.mjs';\nimport { PresenceChild } from './PresenceChild.mjs';\nimport { usePresence } from './use-presence.mjs';\nimport { onlyElements, getChildKey } from './utils.mjs';\nimport { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';\n\n/**\n * `AnimatePresence` enables the animation of components that have been removed from the tree.\n *\n * When adding/removing more than a single child, every child **must** be given a unique `key` prop.\n *\n * Any `motion` components that have an `exit` property defined will animate out when removed from\n * the tree.\n *\n * ```jsx\n * import { motion, AnimatePresence } from 'framer-motion'\n *\n * export const Items = ({ items }) => (\n *   <AnimatePresence>\n *     {items.map(item => (\n *       <motion.div\n *         key={item.id}\n *         initial={{ opacity: 0 }}\n *         animate={{ opacity: 1 }}\n *         exit={{ opacity: 0 }}\n *       />\n *     ))}\n *   </AnimatePresence>\n * )\n * ```\n *\n * You can sequence exit animations throughout a tree using variants.\n *\n * If a child contains multiple `motion` components with `exit` props, it will only unmount the child\n * once all `motion` components have finished animating out. Likewise, any components using\n * `usePresence` all need to call `safeToRemove`.\n *\n * @public\n */\nconst AnimatePresence = ({ children, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = \"sync\", propagate = false, }) => {\n    const [isParentPresent, safeToRemove] = usePresence(propagate);\n    /**\n     * Filter any children that aren't ReactElements. We can only track components\n     * between renders with a props.key.\n     */\n    const presentChildren = useMemo(() => onlyElements(children), [children]);\n    /**\n     * Track the keys of the currently rendered children. This is used to\n     * determine which children are exiting.\n     */\n    const presentKeys = propagate && !isParentPresent ? [] : presentChildren.map(getChildKey);\n    /**\n     * If `initial={false}` we only want to pass this to components in the first render.\n     */\n    const isInitialRender = useRef(true);\n    /**\n     * A ref containing the currently present children. When all exit animations\n     * are complete, we use this to re-render the component with the latest children\n     * *committed* rather than the latest children *rendered*.\n     */\n    const pendingPresentChildren = useRef(presentChildren);\n    /**\n     * Track which exiting children have finished animating out.\n     */\n    const exitComplete = useConstant(() => new Map());\n    /**\n     * Save children to render as React state. To ensure this component is concurrent-safe,\n     * we check for exiting children via an effect.\n     */\n    const [diffedChildren, setDiffedChildren] = useState(presentChildren);\n    const [renderedChildren, setRenderedChildren] = useState(presentChildren);\n    useIsomorphicLayoutEffect(() => {\n        isInitialRender.current = false;\n        pendingPresentChildren.current = presentChildren;\n        /**\n         * Update complete status of exiting children.\n         */\n        for (let i = 0; i < renderedChildren.length; i++) {\n            const key = getChildKey(renderedChildren[i]);\n            if (!presentKeys.includes(key)) {\n                if (exitComplete.get(key) !== true) {\n                    exitComplete.set(key, false);\n                }\n            }\n            else {\n                exitComplete.delete(key);\n            }\n        }\n    }, [renderedChildren, presentKeys.length, presentKeys.join(\"-\")]);\n    const exitingChildren = [];\n    if (presentChildren !== diffedChildren) {\n        let nextChildren = [...presentChildren];\n        /**\n         * Loop through all the currently rendered components and decide which\n         * are exiting.\n         */\n        for (let i = 0; i < renderedChildren.length; i++) {\n            const child = renderedChildren[i];\n            const key = getChildKey(child);\n            if (!presentKeys.includes(key)) {\n                nextChildren.splice(i, 0, child);\n                exitingChildren.push(child);\n            }\n        }\n        /**\n         * If we're in \"wait\" mode, and we have exiting children, we want to\n         * only render these until they've all exited.\n         */\n        if (mode === \"wait\" && exitingChildren.length) {\n            nextChildren = exitingChildren;\n        }\n        setRenderedChildren(onlyElements(nextChildren));\n        setDiffedChildren(presentChildren);\n        /**\n         * Early return to ensure once we've set state with the latest diffed\n         * children, we can immediately re-render.\n         */\n        return;\n    }\n    if (process.env.NODE_ENV !== \"production\" &&\n        mode === \"wait\" &&\n        renderedChildren.length > 1) {\n        console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to \"wait\". This will lead to odd visual behaviour.`);\n    }\n    /**\n     * If we've been provided a forceRender function by the LayoutGroupContext,\n     * we can use it to force a re-render amongst all surrounding components once\n     * all components have finished animating out.\n     */\n    const { forceRender } = useContext(LayoutGroupContext);\n    return (jsx(Fragment, { children: renderedChildren.map((child) => {\n            const key = getChildKey(child);\n            const isPresent = propagate && !isParentPresent\n                ? false\n                : presentChildren === renderedChildren ||\n                    presentKeys.includes(key);\n            const onExit = () => {\n                if (exitComplete.has(key)) {\n                    exitComplete.set(key, true);\n                }\n                else {\n                    return;\n                }\n                let isEveryExitComplete = true;\n                exitComplete.forEach((isExitComplete) => {\n                    if (!isExitComplete)\n                        isEveryExitComplete = false;\n                });\n                if (isEveryExitComplete) {\n                    forceRender === null || forceRender === void 0 ? void 0 : forceRender();\n                    setRenderedChildren(pendingPresentChildren.current);\n                    propagate && (safeToRemove === null || safeToRemove === void 0 ? void 0 : safeToRemove());\n                    onExitComplete && onExitComplete();\n                }\n            };\n            return (jsx(PresenceChild, { isPresent: isPresent, initial: !isInitialRender.current || initial\n                    ? undefined\n                    : false, custom: isPresent ? undefined : custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode, onExitComplete: isPresent ? undefined : onExit, children: child }, key));\n        }) }));\n};\n\nexport { AnimatePresence };\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { AnimatePresence, useAnimate, usePresence } from 'motion/react';\n\nimport { AnalyticsId, KeyboardEventKey, ZIndex } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useKeyboardEvent } from '../../hooks/useKeyboardEvent';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { breakpoints } from '../../theme/grid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport uuid from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\ntype DesktopDirections = 'left' | 'right';\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  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Direction of the drawer on desktop. Default: left */\n  desktopDirection?: DesktopDirections;\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  /** 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}\n\nconst Drawer: React.FC<DrawerProps> = props => {\n  const { isOpen, ...rest } = props;\n\n  return <AnimatePresence>{isOpen && <InnerDrawer {...rest} />}</AnimatePresence>;\n};\n\nconst InnerDrawer: React.FC<InnerDrawerProps> = props => {\n  const {\n    ariaLabel,\n    ariaLabelledBy,\n    ariaLabelCloseBtn,\n    children,\n    desktopDirection = 'left',\n    footerContent,\n    onPrimaryAction,\n    onRequestClose,\n    onSecondaryAction,\n    primaryActionText,\n    secondaryActionText,\n    title,\n    titleHtmlMarkup = 'h3',\n    titleId = uuid(),\n    zIndex = ZIndex.OverlayScreen,\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  const breakpoint = useBreakpoint();\n  const isMobile = breakpoint < breakpoints.md;\n  const [scope, animate] = useAnimate();\n  const [isPresent, safeToRemove] = usePresence();\n  const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;\n\n  useFocusTrap(containerRef, true);\n  useReturnFocusOnUnmount(containerRef);\n  useOutsideEvent(containerRef, () => {\n    onRequestClose && onRequestClose();\n  });\n  useKeyboardEvent(containerRef, () => onRequestClose && onRequestClose(), [KeyboardEventKey.Escape]);\n\n  useEffect(() => {\n    containerRef.current?.focus();\n  }, []);\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  useEffect(() => {}, [isPresent]);\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            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            safeToRemove && safeToRemove();\n          },\n        }\n      );\n    }\n  };\n\n  const handleCTA = (callback?: () => void): void => {\n    if (callback) {\n      callback();\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={styles.drawer__header}>\n            <Title id={ariaLabelAttributes?.['aria-labelledby']} htmlMarkup={titleHtmlMarkup} appearance=\"title3\">\n              {title}\n            </Title>\n            <Close ariaLabel={ariaLabelCloseBtn} onClick={onRequestClose} small={isMobile} />\n          </div>\n          <div\n            className={styles.drawer__content}\n            tabIndex={contentIsScrollable ? 0 : undefined}\n            role={contentIsScrollable ? 'region' : undefined}\n            {...(contentIsScrollable ? ariaLabelAttributes : {})}\n            ref={contentRef}\n          >\n            {children}\n          </div>\n        </div>\n        <div className={styles.drawer__footer}>\n          {footerContent ? (\n            footerContent\n          ) : (\n            <>\n              {primaryActionText && <Button onClick={() => handleCTA(onPrimaryAction)}>{primaryActionText}</Button>}\n              {secondaryActionText && (\n                <Button variant=\"borderless\" onClick={() => handleCTA(onSecondaryAction)}>\n                  {secondaryActionText}\n                </Button>\n              )}\n            </>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default Drawer;\n"],"names":[],"mappings":"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","x_google_ignoreList":[0,1,2,3,4,5,6,7,8]}
+{"version":3,"file":"index.js","sources":["../../../../../node_modules/motion/dist/es/framer-motion/dist/es/context/LayoutGroupContext.mjs","../../../../../node_modules/motion/dist/es/framer-motion/dist/es/context/PresenceContext.mjs","../../../../../node_modules/motion/dist/es/framer-motion/dist/es/context/MotionConfigContext.mjs","../../../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs","../../../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs","../../../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs","../../../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/utils.mjs","../../../../../node_modules/motion/dist/es/framer-motion/dist/es/utils/use-isomorphic-effect.mjs","../../../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/index.mjs","../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["\"use client\";\nimport { createContext } from 'react';\n\nconst LayoutGroupContext = createContext({});\n\nexport { LayoutGroupContext };\n","\"use client\";\nimport { createContext } from 'react';\n\n/**\n * @public\n */\nconst PresenceContext = createContext(null);\n\nexport { PresenceContext };\n","\"use client\";\nimport { createContext } from 'react';\n\n/**\n * @public\n */\nconst MotionConfigContext = createContext({\n    transformPagePoint: (p) => p,\n    isStatic: false,\n    reducedMotion: \"never\",\n});\n\nexport { MotionConfigContext };\n","\"use client\";\nimport { jsx } from 'react/jsx-runtime';\nimport * as React from 'react';\nimport { useId, useRef, useContext, useInsertionEffect } from 'react';\nimport { MotionConfigContext } from '../../context/MotionConfigContext.mjs';\n\n/**\n * Measurement functionality has to be within a separate component\n * to leverage snapshot lifecycle.\n */\nclass PopChildMeasure extends React.Component {\n    getSnapshotBeforeUpdate(prevProps) {\n        const element = this.props.childRef.current;\n        if (element && prevProps.isPresent && !this.props.isPresent) {\n            const size = this.props.sizeRef.current;\n            size.height = element.offsetHeight || 0;\n            size.width = element.offsetWidth || 0;\n            size.top = element.offsetTop;\n            size.left = element.offsetLeft;\n        }\n        return null;\n    }\n    /**\n     * Required with getSnapshotBeforeUpdate to stop React complaining.\n     */\n    componentDidUpdate() { }\n    render() {\n        return this.props.children;\n    }\n}\nfunction PopChild({ children, isPresent }) {\n    const id = useId();\n    const ref = useRef(null);\n    const size = useRef({\n        width: 0,\n        height: 0,\n        top: 0,\n        left: 0,\n    });\n    const { nonce } = useContext(MotionConfigContext);\n    /**\n     * We create and inject a style block so we can apply this explicit\n     * sizing in a non-destructive manner by just deleting the style block.\n     *\n     * We can't apply size via render as the measurement happens\n     * in getSnapshotBeforeUpdate (post-render), likewise if we apply the\n     * styles directly on the DOM node, we might be overwriting\n     * styles set via the style prop.\n     */\n    useInsertionEffect(() => {\n        const { width, height, top, left } = size.current;\n        if (isPresent || !ref.current || !width || !height)\n            return;\n        ref.current.dataset.motionPopId = id;\n        const style = document.createElement(\"style\");\n        if (nonce)\n            style.nonce = nonce;\n        document.head.appendChild(style);\n        if (style.sheet) {\n            style.sheet.insertRule(`\n          [data-motion-pop-id=\"${id}\"] {\n            position: absolute !important;\n            width: ${width}px !important;\n            height: ${height}px !important;\n            top: ${top}px !important;\n            left: ${left}px !important;\n          }\n        `);\n        }\n        return () => {\n            document.head.removeChild(style);\n        };\n    }, [isPresent]);\n    return (jsx(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size, children: React.cloneElement(children, { ref }) }));\n}\n\nexport { PopChild };\n","\"use client\";\nimport { jsx } from 'react/jsx-runtime';\nimport * as React from 'react';\nimport { useId, useCallback, useMemo } from 'react';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\nimport { useConstant } from '../../utils/use-constant.mjs';\nimport { PopChild } from './PopChild.mjs';\n\nconst PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, }) => {\n    const presenceChildren = useConstant(newChildrenMap);\n    const id = useId();\n    const memoizedOnExitComplete = useCallback((childId) => {\n        presenceChildren.set(childId, true);\n        for (const isComplete of presenceChildren.values()) {\n            if (!isComplete)\n                return; // can stop searching when any is incomplete\n        }\n        onExitComplete && onExitComplete();\n    }, [presenceChildren, onExitComplete]);\n    const context = useMemo(() => ({\n        id,\n        initial,\n        isPresent,\n        custom,\n        onExitComplete: memoizedOnExitComplete,\n        register: (childId) => {\n            presenceChildren.set(childId, false);\n            return () => presenceChildren.delete(childId);\n        },\n    }), \n    /**\n     * If the presence of a child affects the layout of the components around it,\n     * we want to make a new context value to ensure they get re-rendered\n     * so they can detect that layout change.\n     */\n    presenceAffectsLayout\n        ? [Math.random(), memoizedOnExitComplete]\n        : [isPresent, memoizedOnExitComplete]);\n    useMemo(() => {\n        presenceChildren.forEach((_, key) => presenceChildren.set(key, false));\n    }, [isPresent]);\n    /**\n     * If there's no `motion` components to fire exit animations, we want to remove this\n     * component immediately.\n     */\n    React.useEffect(() => {\n        !isPresent &&\n            !presenceChildren.size &&\n            onExitComplete &&\n            onExitComplete();\n    }, [isPresent]);\n    if (mode === \"popLayout\") {\n        children = jsx(PopChild, { isPresent: isPresent, children: children });\n    }\n    return (jsx(PresenceContext.Provider, { value: context, children: children }));\n};\nfunction newChildrenMap() {\n    return new Map();\n}\n\nexport { PresenceChild };\n","import { useContext, useId, useEffect, useCallback } from 'react';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\n\n/**\n * When a component is the child of `AnimatePresence`, it can use `usePresence`\n * to access information about whether it's still present in the React tree.\n *\n * ```jsx\n * import { usePresence } from \"framer-motion\"\n *\n * export const Component = () => {\n *   const [isPresent, safeToRemove] = usePresence()\n *\n *   useEffect(() => {\n *     !isPresent && setTimeout(safeToRemove, 1000)\n *   }, [isPresent])\n *\n *   return <div />\n * }\n * ```\n *\n * If `isPresent` is `false`, it means that a component has been removed the tree, but\n * `AnimatePresence` won't really remove it until `safeToRemove` has been called.\n *\n * @public\n */\nfunction usePresence(subscribe = true) {\n    const context = useContext(PresenceContext);\n    if (context === null)\n        return [true, null];\n    const { isPresent, onExitComplete, register } = context;\n    // It's safe to call the following hooks conditionally (after an early return) because the context will always\n    // either be null or non-null for the lifespan of the component.\n    const id = useId();\n    useEffect(() => {\n        if (subscribe)\n            register(id);\n    }, [subscribe]);\n    const safeToRemove = useCallback(() => subscribe && onExitComplete && onExitComplete(id), [id, onExitComplete, subscribe]);\n    return !isPresent && onExitComplete ? [false, safeToRemove] : [true];\n}\n/**\n * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.\n * There is no `safeToRemove` function.\n *\n * ```jsx\n * import { useIsPresent } from \"framer-motion\"\n *\n * export const Component = () => {\n *   const isPresent = useIsPresent()\n *\n *   useEffect(() => {\n *     !isPresent && console.log(\"I've been removed!\")\n *   }, [isPresent])\n *\n *   return <div />\n * }\n * ```\n *\n * @public\n */\nfunction useIsPresent() {\n    return isPresent(useContext(PresenceContext));\n}\nfunction isPresent(context) {\n    return context === null ? true : context.isPresent;\n}\n\nexport { isPresent, useIsPresent, usePresence };\n","import { Children, isValidElement } from 'react';\n\nconst getChildKey = (child) => child.key || \"\";\nfunction onlyElements(children) {\n    const filtered = [];\n    // We use forEach here instead of map as map mutates the component key by preprending `.$`\n    Children.forEach(children, (child) => {\n        if (isValidElement(child))\n            filtered.push(child);\n    });\n    return filtered;\n}\n\nexport { getChildKey, onlyElements };\n","import { useLayoutEffect, useEffect } from 'react';\nimport { isBrowser } from './is-browser.mjs';\n\nconst useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;\n\nexport { useIsomorphicLayoutEffect };\n","\"use client\";\nimport { jsx, Fragment } from 'react/jsx-runtime';\nimport { useMemo, useRef, useState, useContext } from 'react';\nimport { LayoutGroupContext } from '../../context/LayoutGroupContext.mjs';\nimport { useConstant } from '../../utils/use-constant.mjs';\nimport { PresenceChild } from './PresenceChild.mjs';\nimport { usePresence } from './use-presence.mjs';\nimport { onlyElements, getChildKey } from './utils.mjs';\nimport { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';\n\n/**\n * `AnimatePresence` enables the animation of components that have been removed from the tree.\n *\n * When adding/removing more than a single child, every child **must** be given a unique `key` prop.\n *\n * Any `motion` components that have an `exit` property defined will animate out when removed from\n * the tree.\n *\n * ```jsx\n * import { motion, AnimatePresence } from 'framer-motion'\n *\n * export const Items = ({ items }) => (\n *   <AnimatePresence>\n *     {items.map(item => (\n *       <motion.div\n *         key={item.id}\n *         initial={{ opacity: 0 }}\n *         animate={{ opacity: 1 }}\n *         exit={{ opacity: 0 }}\n *       />\n *     ))}\n *   </AnimatePresence>\n * )\n * ```\n *\n * You can sequence exit animations throughout a tree using variants.\n *\n * If a child contains multiple `motion` components with `exit` props, it will only unmount the child\n * once all `motion` components have finished animating out. Likewise, any components using\n * `usePresence` all need to call `safeToRemove`.\n *\n * @public\n */\nconst AnimatePresence = ({ children, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = \"sync\", propagate = false, }) => {\n    const [isParentPresent, safeToRemove] = usePresence(propagate);\n    /**\n     * Filter any children that aren't ReactElements. We can only track components\n     * between renders with a props.key.\n     */\n    const presentChildren = useMemo(() => onlyElements(children), [children]);\n    /**\n     * Track the keys of the currently rendered children. This is used to\n     * determine which children are exiting.\n     */\n    const presentKeys = propagate && !isParentPresent ? [] : presentChildren.map(getChildKey);\n    /**\n     * If `initial={false}` we only want to pass this to components in the first render.\n     */\n    const isInitialRender = useRef(true);\n    /**\n     * A ref containing the currently present children. When all exit animations\n     * are complete, we use this to re-render the component with the latest children\n     * *committed* rather than the latest children *rendered*.\n     */\n    const pendingPresentChildren = useRef(presentChildren);\n    /**\n     * Track which exiting children have finished animating out.\n     */\n    const exitComplete = useConstant(() => new Map());\n    /**\n     * Save children to render as React state. To ensure this component is concurrent-safe,\n     * we check for exiting children via an effect.\n     */\n    const [diffedChildren, setDiffedChildren] = useState(presentChildren);\n    const [renderedChildren, setRenderedChildren] = useState(presentChildren);\n    useIsomorphicLayoutEffect(() => {\n        isInitialRender.current = false;\n        pendingPresentChildren.current = presentChildren;\n        /**\n         * Update complete status of exiting children.\n         */\n        for (let i = 0; i < renderedChildren.length; i++) {\n            const key = getChildKey(renderedChildren[i]);\n            if (!presentKeys.includes(key)) {\n                if (exitComplete.get(key) !== true) {\n                    exitComplete.set(key, false);\n                }\n            }\n            else {\n                exitComplete.delete(key);\n            }\n        }\n    }, [renderedChildren, presentKeys.length, presentKeys.join(\"-\")]);\n    const exitingChildren = [];\n    if (presentChildren !== diffedChildren) {\n        let nextChildren = [...presentChildren];\n        /**\n         * Loop through all the currently rendered components and decide which\n         * are exiting.\n         */\n        for (let i = 0; i < renderedChildren.length; i++) {\n            const child = renderedChildren[i];\n            const key = getChildKey(child);\n            if (!presentKeys.includes(key)) {\n                nextChildren.splice(i, 0, child);\n                exitingChildren.push(child);\n            }\n        }\n        /**\n         * If we're in \"wait\" mode, and we have exiting children, we want to\n         * only render these until they've all exited.\n         */\n        if (mode === \"wait\" && exitingChildren.length) {\n            nextChildren = exitingChildren;\n        }\n        setRenderedChildren(onlyElements(nextChildren));\n        setDiffedChildren(presentChildren);\n        /**\n         * Early return to ensure once we've set state with the latest diffed\n         * children, we can immediately re-render.\n         */\n        return;\n    }\n    if (process.env.NODE_ENV !== \"production\" &&\n        mode === \"wait\" &&\n        renderedChildren.length > 1) {\n        console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to \"wait\". This will lead to odd visual behaviour.`);\n    }\n    /**\n     * If we've been provided a forceRender function by the LayoutGroupContext,\n     * we can use it to force a re-render amongst all surrounding components once\n     * all components have finished animating out.\n     */\n    const { forceRender } = useContext(LayoutGroupContext);\n    return (jsx(Fragment, { children: renderedChildren.map((child) => {\n            const key = getChildKey(child);\n            const isPresent = propagate && !isParentPresent\n                ? false\n                : presentChildren === renderedChildren ||\n                    presentKeys.includes(key);\n            const onExit = () => {\n                if (exitComplete.has(key)) {\n                    exitComplete.set(key, true);\n                }\n                else {\n                    return;\n                }\n                let isEveryExitComplete = true;\n                exitComplete.forEach((isExitComplete) => {\n                    if (!isExitComplete)\n                        isEveryExitComplete = false;\n                });\n                if (isEveryExitComplete) {\n                    forceRender === null || forceRender === void 0 ? void 0 : forceRender();\n                    setRenderedChildren(pendingPresentChildren.current);\n                    propagate && (safeToRemove === null || safeToRemove === void 0 ? void 0 : safeToRemove());\n                    onExitComplete && onExitComplete();\n                }\n            };\n            return (jsx(PresenceChild, { isPresent: isPresent, initial: !isInitialRender.current || initial\n                    ? undefined\n                    : false, custom: isPresent ? undefined : custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode, onExitComplete: isPresent ? undefined : onExit, children: child }, key));\n        }) }));\n};\n\nexport { AnimatePresence };\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { AnimatePresence, useAnimate, usePresence } from 'motion/react';\n\nimport { AnalyticsId, KeyboardEventKey, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useKeyboardEvent } from '../../hooks/useKeyboardEvent';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport uuid from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\ntype DesktopDirections = 'left' | 'right';\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  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Direction of the drawer on desktop. Default: left */\n  desktopDirection?: DesktopDirections;\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}\n\nconst Drawer: React.FC<DrawerProps> = props => {\n  const { isOpen, ...rest } = props;\n\n  return <AnimatePresence>{isOpen && <InnerDrawer {...rest} />}</AnimatePresence>;\n};\n\nconst InnerDrawer: React.FC<InnerDrawerProps> = props => {\n  const {\n    ariaLabel,\n    ariaLabelledBy,\n    ariaLabelCloseBtn,\n    children,\n    desktopDirection = 'left',\n    footerContent,\n    onPrimaryAction,\n    onRequestClose,\n    onSecondaryAction,\n    primaryActionText,\n    secondaryActionText,\n    title,\n    titleHtmlMarkup = 'h3',\n    titleId = uuid(),\n    zIndex = ZIndex.OverlayScreen,\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  const isMobile = useIsMobileBreakpoint();\n  const [scope, animate] = useAnimate();\n  const [isPresent, safeToRemove] = usePresence();\n  const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;\n\n  useFocusTrap(containerRef, true);\n  useReturnFocusOnUnmount(containerRef);\n  useOutsideEvent(containerRef, () => {\n    onRequestClose && onRequestClose();\n  });\n  useKeyboardEvent(containerRef, () => onRequestClose && onRequestClose(), [KeyboardEventKey.Escape]);\n\n  useEffect(() => {\n    containerRef.current?.focus();\n  }, []);\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  useEffect(() => {}, [isPresent]);\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            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            safeToRemove && safeToRemove();\n          },\n        }\n      );\n    }\n  };\n\n  const handleCTA = (callback?: () => void): void => {\n    if (callback) {\n      callback();\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={styles.drawer__header}>\n            <Title id={ariaLabelAttributes?.['aria-labelledby']} htmlMarkup={titleHtmlMarkup} appearance=\"title3\">\n              {title}\n            </Title>\n            {!props.noCloseButton && <Close ariaLabel={ariaLabelCloseBtn} onClick={onRequestClose} small={isMobile} />}\n          </div>\n          <div\n            className={styles.drawer__content}\n            tabIndex={contentIsScrollable ? 0 : undefined}\n            role={contentIsScrollable ? 'region' : undefined}\n            {...(contentIsScrollable ? ariaLabelAttributes : {})}\n            ref={contentRef}\n          >\n            {children}\n          </div>\n        </div>\n        <div className={styles.drawer__footer}>\n          {footerContent ? (\n            footerContent\n          ) : (\n            <>\n              {primaryActionText && <Button onClick={() => handleCTA(onPrimaryAction)}>{primaryActionText}</Button>}\n              {secondaryActionText && (\n                <Button variant=\"borderless\" onClick={() => handleCTA(onSecondaryAction)}>\n                  {secondaryActionText}\n                </Button>\n              )}\n            </>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default Drawer;\n"],"names":[],"mappings":"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","x_google_ignoreList":[0,1,2,3,4,5,6,7,8]}

package/components/Dropdown/index.js

@@ -23,8 +23,10 @@ const enGB = {
   closeText: closeText$1
 };
 const closeText = "Lukk";
+const testtest = "testtest";
 const nbNO = {
-  closeText
+  closeText,
+  testtest
 };
 const getResources = (language) => {
   switch (language) {

package/components/Dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Dropdown/resourceHelper.ts","../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Dropdown.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Dropdown.nb-NO.json';\nimport { HNDesignsystemDropdown } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDropdown => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport {\n  AnalyticsId,\n  IconSize,\n  KeyboardEventKey,\n  LanguageLocales,\n  ZIndex,\n  theme,\n  useHover,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useToggle,\n  useUuid,\n} from '../..';\nimport { HNDesignsystemDropdown } from '../../resources/Resources';\nimport { isComponent } from '../../utils/component';\nimport { useLanguage } from '../../utils/language';\nimport { mergeRefs } from '../../utils/refs';\nimport Button from '../Button';\nimport Checkbox, { CheckboxProps } from '../Checkbox';\nimport Icon from '../Icon';\nimport PlusSmall from '../Icons/PlusSmall';\nimport RadioButton, { RadioButtonProps } from '../RadioButton';\nimport { getResources } from './resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport enum DropdownOnColor {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  oncherry = 'oncherry',\n}\n\nexport interface DropdownProps {\n  /** Label for dropdown. Visible for screen readers  */\n  label: string;\n  /** Text on the trigger button that opens the dropdown */\n  placeholder: string;\n  /** Sets the dropdown content */\n  children: React.ReactNode;\n  /** @deprecated Close button text */\n  closeText?: string;\n  /** Minimum width for the dropdown in pixels. Does not affect trigger button */\n  dropdownMinWidth?: number;\n  /** No close button */\n  noCloseButton?: boolean;\n  /** Called when dropdown is open/closed */\n  onToggle?: (isOpen: boolean) => void;\n  /** Whether the dropdown is open or not */\n  open?: boolean;\n  /** Changes the visuals of the dropdown */\n  onColor?: keyof typeof DropdownOnColor;\n  /** Makes the background of the trigger transparent */\n  transparent?: boolean;\n  /** Makes the width of the full component adjust to its parent */\n  fluid?: boolean;\n  /** Makes the dropdown disabled */\n  disabled?: boolean;\n  /** Sets the data-testid attribute on the dropdown button */\n  testId?: string;\n  /** Overrides the default z-index of the DropDownContent */\n  zIndex?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemDropdown>;\n}\n\nconst Dropdown: React.FC<DropdownProps> = props => {\n  const {\n    label,\n    placeholder,\n    noCloseButton = false,\n    onToggle,\n    dropdownMinWidth,\n    open = false,\n    children,\n    onColor = DropdownOnColor.onwhite,\n    transparent = false,\n    fluid = false,\n    testId,\n    disabled,\n    zIndex = ZIndex.PopOver,\n    resources,\n  } = props;\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const optionsRef = useRef<HTMLUListElement>(null);\n  const { hoverRef: buttonRef, isHovered } = useHover<HTMLButtonElement>();\n  const openedByKeyboard = useRef<boolean>(false);\n  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n  const inputRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n  const [currentIndex, setCurrentIndex] = useState<number>();\n  const labelId = useUuid();\n  const toggleLabelId = useUuid();\n  const optionIdPrefix = useUuid();\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemDropdown = {\n    ...defaultResources,\n    ...resources,\n    closeText: props.closeText ?? resources?.closeText ?? defaultResources.closeText,\n  };\n\n  const handleOpen = (isKeyboard: boolean): void => {\n    openedByKeyboard.current = isKeyboard;\n    toggleIsOpen();\n  };\n\n  const handleClose = (): void => {\n    toggleIsOpen();\n    buttonRef.current?.focus();\n  };\n\n  useEffect(() => {\n    if (isOpen && openedByKeyboard.current) {\n      inputRefList.current\n        ?.find((inputRef, index) => {\n          if (inputRef.current && !inputRef.current.hasAttribute('disabled')) {\n            setCurrentIndex(index);\n            return true;\n          }\n        })\n        ?.current?.focus();\n    }\n  }, [isOpen]);\n\n  const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n    if (!inputRefList.current) {\n      return;\n    }\n\n    if (event.key === KeyboardEventKey.Escape) {\n      if (isOpen) handleClose();\n      return;\n    }\n\n    if (!isOpen) {\n      handleOpen(true);\n      event.preventDefault();\n      return;\n    }\n\n    const index = inputRefList.current.findIndex(x => x.current === event.target);\n    let nextIndex = index;\n\n    if (event.key === KeyboardEventKey.Home) {\n      nextIndex = 0;\n    } else if (event.key === KeyboardEventKey.End) {\n      nextIndex = inputRefList.current.length - 1;\n    } else if (event.key === KeyboardEventKey.ArrowDown && index < inputRefList.current.length - 1) {\n      nextIndex = index + 1;\n    } else if (event.key === KeyboardEventKey.ArrowUp && index > 0) {\n      nextIndex = index - 1;\n    } else if (event.key === KeyboardEventKey.Enter && index !== -1) {\n      nextIndex = index;\n    }\n\n    if (nextIndex !== -1 && event.key !== KeyboardEventKey.Space) {\n      event.preventDefault();\n\n      inputRefList.current[nextIndex].current?.focus();\n      setCurrentIndex(nextIndex);\n    }\n  };\n\n  useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n    KeyboardEventKey.ArrowDown,\n    KeyboardEventKey.ArrowUp,\n    KeyboardEventKey.End,\n    KeyboardEventKey.Enter,\n    KeyboardEventKey.Escape,\n    KeyboardEventKey.Home,\n    KeyboardEventKey.Space,\n  ]);\n\n  useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n  const toggleClasses = classNames(\n    styles.dropdown__toggle,\n    !disabled && {\n      [styles['dropdown__toggle--on-white']]: onColor === DropdownOnColor.onwhite,\n      [styles['dropdown__toggle--on-grey']]: onColor === DropdownOnColor.ongrey,\n      [styles['dropdown__toggle--on-blueberry']]: onColor === DropdownOnColor.onblueberry,\n      [styles['dropdown__toggle--on-cherry']]: onColor === DropdownOnColor.oncherry,\n      [styles['dropdown__toggle--transparent']]: transparent,\n      [styles['dropdown__toggle--fluid']]: fluid,\n      [styles['dropdown__toggle--open']]: isOpen,\n    }\n  );\n\n  const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n\n  const renderChildren = React.Children.map(children, (child, index) => {\n    const role = isComponent<RadioButtonProps>(child, RadioButton)\n      ? 'menuitemradio'\n      : isComponent<CheckboxProps>(child, Checkbox)\n        ? 'menuitemcheckbox'\n        : 'menuitem';\n\n    return (\n      <li className={styles.dropdown__input} role={role} id={`${optionIdPrefix}-${index}`}>\n        {React.isValidElement(child) && inputRefList.current && inputRefList.current[index]\n          ? React.cloneElement(child as React.ReactElement, { ref: mergeRefs([child.props.ref, inputRefList.current[index]]) })\n          : child}\n      </li>\n    );\n  });\n\n  return (\n    <div className={styles.dropdown} ref={dropdownRef}>\n      <span id={labelId} className={styles.dropdown__label}>\n        {label}\n      </span>\n      <button\n        type=\"button\"\n        onClick={(): false | void => handleOpen(false)}\n        className={toggleClasses}\n        ref={buttonRef}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Dropdown}\n        disabled={disabled}\n        aria-labelledby={toggleLabelId}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen}\n      >\n        <span id={toggleLabelId} className={styles.dropdown__toggle__label}>\n          {placeholder}\n        </span>\n        <Icon\n          color={disabled ? theme.palette.neutral700 : theme.palette.blueberry600}\n          svgIcon={PlusSmall}\n          className={styles.dropdown__icon}\n          isHovered={!disabled && isHovered}\n          size={IconSize.XSmall}\n        />\n      </button>\n      <div className={contentClasses} style={{ width: fluid ? '100%' : `auto`, minWidth: dropdownMinWidth ?? 'auto', zIndex: zIndex }}>\n        <ul\n          className={styles.dropdown__options}\n          role=\"menu\"\n          aria-labelledby={labelId}\n          tabIndex={-1}\n          aria-activedescendant={typeof currentIndex !== 'undefined' ? `${optionIdPrefix}-${currentIndex}` : undefined}\n          ref={optionsRef}\n        >\n          {renderChildren}\n        </ul>\n        {!noCloseButton && (\n          <div className={styles.dropdown__close}>\n            <Button onClick={handleClose} aria-expanded={isOpen}>\n              {mergedResources.closeText}\n            </Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Dropdown;\n"],"names":["DropdownOnColor","React"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Dropdown/resourceHelper.ts","../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Dropdown.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Dropdown.nb-NO.json';\nimport { HNDesignsystemDropdown } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDropdown => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport {\n  AnalyticsId,\n  IconSize,\n  KeyboardEventKey,\n  LanguageLocales,\n  ZIndex,\n  theme,\n  useHover,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useToggle,\n  useUuid,\n} from '../..';\nimport { HNDesignsystemDropdown } from '../../resources/Resources';\nimport { isComponent } from '../../utils/component';\nimport { useLanguage } from '../../utils/language';\nimport { mergeRefs } from '../../utils/refs';\nimport Button from '../Button';\nimport Checkbox, { CheckboxProps } from '../Checkbox';\nimport Icon from '../Icon';\nimport PlusSmall from '../Icons/PlusSmall';\nimport RadioButton, { RadioButtonProps } from '../RadioButton';\nimport { getResources } from './resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport enum DropdownOnColor {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  oncherry = 'oncherry',\n}\n\nexport interface DropdownProps {\n  /** Label for dropdown. Visible for screen readers  */\n  label: string;\n  /** Text on the trigger button that opens the dropdown */\n  placeholder: string;\n  /** Sets the dropdown content */\n  children: React.ReactNode;\n  /** @deprecated Close button text */\n  closeText?: string;\n  /** Minimum width for the dropdown in pixels. Does not affect trigger button */\n  dropdownMinWidth?: number;\n  /** No close button */\n  noCloseButton?: boolean;\n  /** Called when dropdown is open/closed */\n  onToggle?: (isOpen: boolean) => void;\n  /** Whether the dropdown is open or not */\n  open?: boolean;\n  /** Changes the visuals of the dropdown */\n  onColor?: keyof typeof DropdownOnColor;\n  /** Makes the background of the trigger transparent */\n  transparent?: boolean;\n  /** Makes the width of the full component adjust to its parent */\n  fluid?: boolean;\n  /** Makes the dropdown disabled */\n  disabled?: boolean;\n  /** Sets the data-testid attribute on the dropdown button */\n  testId?: string;\n  /** Overrides the default z-index of the DropDownContent */\n  zIndex?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemDropdown>;\n}\n\nconst Dropdown: React.FC<DropdownProps> = props => {\n  const {\n    label,\n    placeholder,\n    noCloseButton = false,\n    onToggle,\n    dropdownMinWidth,\n    open = false,\n    children,\n    onColor = DropdownOnColor.onwhite,\n    transparent = false,\n    fluid = false,\n    testId,\n    disabled,\n    zIndex = ZIndex.PopOver,\n    resources,\n  } = props;\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const optionsRef = useRef<HTMLUListElement>(null);\n  const { hoverRef: buttonRef, isHovered } = useHover<HTMLButtonElement>();\n  const openedByKeyboard = useRef<boolean>(false);\n  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n  const inputRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n  const [currentIndex, setCurrentIndex] = useState<number>();\n  const labelId = useUuid();\n  const toggleLabelId = useUuid();\n  const optionIdPrefix = useUuid();\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemDropdown = {\n    ...defaultResources,\n    ...resources,\n    closeText: props.closeText ?? resources?.closeText ?? defaultResources.closeText,\n  };\n\n  const handleOpen = (isKeyboard: boolean): void => {\n    openedByKeyboard.current = isKeyboard;\n    toggleIsOpen();\n  };\n\n  const handleClose = (): void => {\n    toggleIsOpen();\n    buttonRef.current?.focus();\n  };\n\n  useEffect(() => {\n    if (isOpen && openedByKeyboard.current) {\n      inputRefList.current\n        ?.find((inputRef, index) => {\n          if (inputRef.current && !inputRef.current.hasAttribute('disabled')) {\n            setCurrentIndex(index);\n            return true;\n          }\n        })\n        ?.current?.focus();\n    }\n  }, [isOpen]);\n\n  const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n    if (!inputRefList.current) {\n      return;\n    }\n\n    if (event.key === KeyboardEventKey.Escape) {\n      if (isOpen) handleClose();\n      return;\n    }\n\n    if (!isOpen) {\n      handleOpen(true);\n      event.preventDefault();\n      return;\n    }\n\n    const index = inputRefList.current.findIndex(x => x.current === event.target);\n    let nextIndex = index;\n\n    if (event.key === KeyboardEventKey.Home) {\n      nextIndex = 0;\n    } else if (event.key === KeyboardEventKey.End) {\n      nextIndex = inputRefList.current.length - 1;\n    } else if (event.key === KeyboardEventKey.ArrowDown && index < inputRefList.current.length - 1) {\n      nextIndex = index + 1;\n    } else if (event.key === KeyboardEventKey.ArrowUp && index > 0) {\n      nextIndex = index - 1;\n    } else if (event.key === KeyboardEventKey.Enter && index !== -1) {\n      nextIndex = index;\n    }\n\n    if (nextIndex !== -1 && event.key !== KeyboardEventKey.Space) {\n      event.preventDefault();\n\n      inputRefList.current[nextIndex].current?.focus();\n      setCurrentIndex(nextIndex);\n    }\n  };\n\n  useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n    KeyboardEventKey.ArrowDown,\n    KeyboardEventKey.ArrowUp,\n    KeyboardEventKey.End,\n    KeyboardEventKey.Enter,\n    KeyboardEventKey.Escape,\n    KeyboardEventKey.Home,\n    KeyboardEventKey.Space,\n  ]);\n\n  useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n  const toggleClasses = classNames(\n    styles.dropdown__toggle,\n    !disabled && {\n      [styles['dropdown__toggle--on-white']]: onColor === DropdownOnColor.onwhite,\n      [styles['dropdown__toggle--on-grey']]: onColor === DropdownOnColor.ongrey,\n      [styles['dropdown__toggle--on-blueberry']]: onColor === DropdownOnColor.onblueberry,\n      [styles['dropdown__toggle--on-cherry']]: onColor === DropdownOnColor.oncherry,\n      [styles['dropdown__toggle--transparent']]: transparent,\n      [styles['dropdown__toggle--fluid']]: fluid,\n      [styles['dropdown__toggle--open']]: isOpen,\n    }\n  );\n\n  const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n\n  const renderChildren = React.Children.map(children, (child, index) => {\n    const role = isComponent<RadioButtonProps>(child, RadioButton)\n      ? 'menuitemradio'\n      : isComponent<CheckboxProps>(child, Checkbox)\n        ? 'menuitemcheckbox'\n        : 'menuitem';\n\n    return (\n      <li className={styles.dropdown__input} role={role} id={`${optionIdPrefix}-${index}`}>\n        {React.isValidElement(child) && inputRefList.current && inputRefList.current[index]\n          ? React.cloneElement(child as React.ReactElement, { ref: mergeRefs([child.props.ref, inputRefList.current[index]]) })\n          : child}\n      </li>\n    );\n  });\n\n  return (\n    <div className={styles.dropdown} ref={dropdownRef}>\n      <span id={labelId} className={styles.dropdown__label}>\n        {label}\n      </span>\n      <button\n        type=\"button\"\n        onClick={(): false | void => handleOpen(false)}\n        className={toggleClasses}\n        ref={buttonRef}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Dropdown}\n        disabled={disabled}\n        aria-labelledby={toggleLabelId}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen}\n      >\n        <span id={toggleLabelId} className={styles.dropdown__toggle__label}>\n          {placeholder}\n        </span>\n        <Icon\n          color={disabled ? theme.palette.neutral700 : theme.palette.blueberry600}\n          svgIcon={PlusSmall}\n          className={styles.dropdown__icon}\n          isHovered={!disabled && isHovered}\n          size={IconSize.XSmall}\n        />\n      </button>\n      <div className={contentClasses} style={{ width: fluid ? '100%' : `auto`, minWidth: dropdownMinWidth ?? 'auto', zIndex: zIndex }}>\n        <ul\n          className={styles.dropdown__options}\n          role=\"menu\"\n          aria-labelledby={labelId}\n          tabIndex={-1}\n          aria-activedescendant={typeof currentIndex !== 'undefined' ? `${optionIdPrefix}-${currentIndex}` : undefined}\n          ref={optionsRef}\n        >\n          {renderChildren}\n        </ul>\n        {!noCloseButton && (\n          <div className={styles.dropdown__close}>\n            <Button onClick={handleClose} aria-expanded={isOpen}>\n              {mergedResources.closeText}\n            </Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Dropdown;\n"],"names":["DropdownOnColor","React"],"mappings":"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"}

package/components/Modal/Modal.d.ts

@@ -17,6 +17,8 @@ export interface ModalProps {
     titleId?: string;
     /** Description of the modal. Will not render if the modal has children. */
     description?: string;
+    /** Optional footer content that can be rendered instead of default CTA(s) */
+    footerContent?: React.ReactNode;
     /** Changes the visual representation of the modal */
     variant?: keyof typeof ModalVariants;
     /** Change width of the modal (default: large) */

package/components/Modal/index.js

@@ -56,6 +56,7 @@ const getIcon = (variant, icon) => {
 const Modal = (props) => {
   var _a, _b;
   const {
+    footerContent,
     variant = "normal",
     primaryButtonText = "OK",
     titleId = uuid(),
@@ -87,7 +88,7 @@ const Modal = (props) => {
   }
   const imageView = variant === "image";
   const overlayRef = React__default.useRef(null);
-  const showActions = props.secondaryButtonText && ((_a = props.secondaryButtonText) == null ? void 0 : _a.length) > 0 || props.onSuccess;
+  const showActions = props.secondaryButtonText && ((_a = props.secondaryButtonText) == null ? void 0 : _a.length) > 0 || props.onSuccess || footerContent;
   const ariaLabelAttributes = getAriaLabelAttributes({ label: props.ariaLabel, id: props.ariaLabelledBy, fallbackId: titleId });
   useEffect(() => {
     const overlayElement = overlayRef.current;
@@ -184,8 +185,9 @@ const Modal = (props) => {
           }
         ),
         showActions && /* @__PURE__ */ jsxs("div", { className: classNames(styles["modal__call-to-action"], size && styles[`modal__call-to-action--${size}`]), children: [
-          props.onSuccess && /* @__PURE__ */ jsx(Button, { onClick: props.onSuccess, children: primaryButtonText }),
-          props.secondaryButtonText && ((_b = props.secondaryButtonText) == null ? void 0 : _b.length) > 0 && /* @__PURE__ */ jsx(Button, { variant: "borderless", onClick: props.onClose, children: props.secondaryButtonText })
+          props.onSuccess && primaryButtonText && /* @__PURE__ */ jsx(Button, { onClick: props.onSuccess, children: primaryButtonText }),
+          props.secondaryButtonText && ((_b = props.secondaryButtonText) == null ? void 0 : _b.length) > 0 && /* @__PURE__ */ jsx(Button, { variant: "borderless", onClick: props.onClose, children: props.secondaryButtonText }),
+          footerContent
         ] })
       ] }) })
     }

package/components/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { palette } from '../../theme/palette';\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 Icon, { IconSize } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport AlertSignStroke from '../Icons/AlertSignStroke';\nimport CheckOutline from '../Icons/CheckOutline';\nimport Portal from '../Portal';\nimport Title from '../Title/Title';\n\nimport styles from './styles.module.scss';\n\nexport enum ModalVariants {\n  normal = 'normal',\n  warning = 'warning',\n  error = 'error',\n  success = 'success',\n  image = 'image',\n}\n\nexport enum ModalSize {\n  large = 'large',\n  medium = 'medium',\n}\n\nexport interface ModalProps {\n  /** Title of the modal */\n  title: string;\n  /** id of the modal title */\n  titleId?: string;\n  /** Description of the modal. Will not render if the modal has children. */\n  description?: string;\n  /** Changes the visual representation of the modal */\n  variant?: keyof typeof ModalVariants;\n  /** Change width of the modal (default: large) */\n  size?: keyof typeof ModalSize;\n  /** Icon displayed in title */\n  icon?: React.ReactElement;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Primary button text */\n  primaryButtonText?: string;\n  /** Secondary button text */\n  secondaryButtonText?: string;\n  /** Sets the aria-label of the modal */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the modal */\n  ariaLabelledBy?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Alternative component to modal */\n  children?: React.ReactNode;\n  /** Component shown after title */\n  afterTitleChildren?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Customize the z-index of the modal */\n  zIndex?: number;\n  /** Function is called when user clicks primary button */\n  onSuccess?: () => void;\n  /** Function is called when user clicks secondary button, clicks escape or outside the modal */\n  onClose?: () => void;\n  /** When enabled the component will be rendered in the bottom of document.body */\n  printable?: boolean;\n  /** If disabled, clicking escape or outside the modal will not close it */\n  disableCloseEvents?: boolean;\n  /** Aria role used for the Modal. Default is dialog */\n  role?: 'dialog' | 'alertdialog';\n}\n\nconst getVariantIcon = (variant?: ModalProps['variant']): JSX.Element | null => {\n  if (variant === ModalVariants.error) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignFill} color={palette.cherry500} />;\n  } else if (variant === ModalVariants.warning) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignStroke} color={palette.black} />;\n  } else if (variant === ModalVariants.success) {\n    return <Icon size={IconSize.Small} svgIcon={CheckOutline} color={palette.kiwi900} />;\n  }\n  return null;\n};\n\nconst getIcon = (variant?: ModalProps['variant'], icon?: ModalProps['icon']): JSX.Element | null => {\n  const variantIcon = getVariantIcon(variant);\n  if (variantIcon) {\n    return <div className={styles.modal__iconWrapper}>{variantIcon}</div>;\n  }\n  if (icon) {\n    return (\n      <div className={styles.modal__iconWrapper}>\n        {React.cloneElement(icon, {\n          size: IconSize.Small,\n        })}\n      </div>\n    );\n  }\n  return null;\n};\n\nconst Modal: React.FC<ModalProps> = props => {\n  const {\n    variant = ModalVariants.normal,\n    primaryButtonText = 'OK',\n    titleId = uuid(),\n    className = '',\n    size = ModalSize.large,\n    zIndex = ZIndex.OverlayScreen,\n    role = 'dialog',\n  } = props;\n\n  const topContent = React.useRef<HTMLDivElement>(null);\n  const modalContentRef = React.useRef<HTMLDivElement>(null);\n  const dialogRef = React.useRef<HTMLDivElement>(null);\n  useFocusTrap(dialogRef, true);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContent = React.useRef<HTMLDivElement>(null);\n  const bottomContentVisible = useIsVisible(bottomContent);\n  const contentIsScrollable = modalContentRef.current && modalContentRef.current.scrollHeight > modalContentRef.current.clientHeight;\n  useReturnFocusOnUnmount(dialogRef);\n\n  function handleKeyboardEvent(e: KeyboardEvent): void {\n    if (e.key === 'Escape' && props.onClose) {\n      e.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function handleClickEvent(event: MouseEvent): void {\n    if (event.target && overlayRef.current === event.target && props.onClose) {\n      event.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  /* Displays a full window size modal with image */\n  const imageView = variant === ModalVariants.image;\n\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n\n  const showActions = (props.secondaryButtonText && props.secondaryButtonText?.length > 0) || props.onSuccess;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: props.ariaLabel, id: props.ariaLabelledBy, fallbackId: titleId });\n\n  useEffect(() => {\n    const overlayElement = overlayRef.current;\n    disableBodyScroll();\n    if (!props.disableCloseEvents && overlayElement) {\n      overlayElement.addEventListener('keydown', handleKeyboardEvent);\n      overlayElement.addEventListener('click', handleClickEvent);\n    }\n    return (): void => {\n      enableBodyScroll();\n      if (!props.disableCloseEvents && overlayElement) {\n        overlayElement.removeEventListener('keydown', handleKeyboardEvent);\n        overlayElement.removeEventListener('click', handleClickEvent);\n      }\n    };\n  }, [props.disableCloseEvents]);\n\n  useEffect(() => {\n    dialogRef.current?.focus();\n  }, []);\n\n  const dialogClasses = cn(\n    className,\n    styles.modal,\n    variant && styles[`modal--${variant}`],\n    size && styles[`modal--${size}`],\n    contentIsScrollable && !showActions && styles['modal--no-actions']\n  );\n\n  const titleClasses = cn({\n    [styles['modal__title--error']]: variant === ModalVariants.error,\n    [styles['modal__title--success']]: variant === ModalVariants.success,\n  });\n\n  const Component = (\n    <div data-testid=\"dialog-container\">\n      <div\n        ref={overlayRef}\n        className={styles['modal-overlay']}\n        data-testid={props.testId}\n        data-analyticsid={AnalyticsId.Modal}\n        style={{ zIndex }}\n      >\n        <div className={styles.align}>\n          <div className={dialogClasses} role={role} aria-modal=\"true\" tabIndex={-1} {...ariaLabelAttributes} ref={dialogRef}>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--top'], {\n                [styles['modal__shadow--show']]: !topContentVisible && contentIsScrollable,\n              })}\n            />\n            <div\n              className={cn(styles.modal__contentWrapper, {\n                [styles['modal__contentWrapper--image']]: imageView,\n              })}\n              tabIndex={contentIsScrollable ? 0 : undefined}\n              role={contentIsScrollable ? 'region' : undefined}\n              {...(contentIsScrollable ? ariaLabelAttributes : {})}\n              ref={modalContentRef}\n            >\n              {!props.noCloseButton && (\n                <div className={styles.modal__closeWrapper}>\n                  <div className={cn(styles.modal__closeWrapper__close)}>\n                    <Close onClick={props.onClose} ariaLabel={props.ariaLabelCloseBtn} />\n                  </div>\n                </div>\n              )}\n              <div\n                className={cn(size && styles[`modal__contentWrapper__scroll--${size}`], {\n                  [styles['modal__contentWrapper__scroll--image']]: imageView,\n                })}\n              >\n                <div ref={topContent} />\n                <div className={styles.modal__contentWrapper__title}>\n                  {getIcon(variant, props.icon)}\n                  <Title id={ariaLabelAttributes?.['aria-labelledby']} htmlMarkup=\"h3\" appearance=\"title3\" className={titleClasses}>\n                    {props.title}\n                  </Title>\n                  {props.afterTitleChildren && <div className={styles['modal__afterTitleChildren']}>{props.afterTitleChildren}</div>}\n                </div>\n                {imageView && (\n                  <div>\n                    <div className={styles['modal__contentWrapper__imageWrapper']}>{props.children}</div>\n                    <span className={styles['modal__contentWrapper__imageDescription']}>{props.description}</span>\n                  </div>\n                )}\n                {!imageView && props.children && <div>{props.children}</div>}\n                {!imageView && !props.children && <p className={styles.modal__description}>{props.description}</p>}\n                <div ref={bottomContent} />\n              </div>\n            </div>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--bottom'], {\n                [styles['modal__shadow--show']]: !bottomContentVisible && contentIsScrollable,\n              })}\n            />\n            {showActions && (\n              <div className={cn(styles['modal__call-to-action'], size && styles[`modal__call-to-action--${size}`])}>\n                {props.onSuccess && <Button onClick={props.onSuccess}>{primaryButtonText}</Button>}\n                {props.secondaryButtonText && props.secondaryButtonText?.length > 0 && (\n                  <Button variant=\"borderless\" onClick={props.onClose}>\n                    {props.secondaryButtonText}\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (props.printable) {\n    const printModal = 'print-modal';\n    return (\n      <Portal className={printModal} testId=\"print-modal\">\n        <style media=\"print\">{`body > *:not(.${printModal}) {display: none;}`}</style>\n        {Component}\n      </Portal>\n    );\n  }\n\n  return Component;\n};\n\nexport default Modal;\n"],"names":["ModalVariants","ModalSize","React","_a","cn"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { palette } from '../../theme/palette';\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 Icon, { IconSize } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport AlertSignStroke from '../Icons/AlertSignStroke';\nimport CheckOutline from '../Icons/CheckOutline';\nimport Portal from '../Portal';\nimport Title from '../Title/Title';\n\nimport styles from './styles.module.scss';\n\nexport enum ModalVariants {\n  normal = 'normal',\n  warning = 'warning',\n  error = 'error',\n  success = 'success',\n  image = 'image',\n}\n\nexport enum ModalSize {\n  large = 'large',\n  medium = 'medium',\n}\n\nexport interface ModalProps {\n  /** Title of the modal */\n  title: string;\n  /** id of the modal title */\n  titleId?: string;\n  /** Description of the modal. Will not render if the modal has children. */\n  description?: string;\n  /** Optional footer content that can be rendered instead of default CTA(s) */\n  footerContent?: React.ReactNode;\n  /** Changes the visual representation of the modal */\n  variant?: keyof typeof ModalVariants;\n  /** Change width of the modal (default: large) */\n  size?: keyof typeof ModalSize;\n  /** Icon displayed in title */\n  icon?: React.ReactElement;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Primary button text */\n  primaryButtonText?: string;\n  /** Secondary button text */\n  secondaryButtonText?: string;\n  /** Sets the aria-label of the modal */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the modal */\n  ariaLabelledBy?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Alternative component to modal */\n  children?: React.ReactNode;\n  /** Component shown after title */\n  afterTitleChildren?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Customize the z-index of the modal */\n  zIndex?: number;\n  /** Function is called when user clicks primary button */\n  onSuccess?: () => void;\n  /** Function is called when user clicks secondary button, clicks escape or outside the modal */\n  onClose?: () => void;\n  /** When enabled the component will be rendered in the bottom of document.body */\n  printable?: boolean;\n  /** If disabled, clicking escape or outside the modal will not close it */\n  disableCloseEvents?: boolean;\n  /** Aria role used for the Modal. Default is dialog */\n  role?: 'dialog' | 'alertdialog';\n}\n\nconst getVariantIcon = (variant?: ModalProps['variant']): JSX.Element | null => {\n  if (variant === ModalVariants.error) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignFill} color={palette.cherry500} />;\n  } else if (variant === ModalVariants.warning) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignStroke} color={palette.black} />;\n  } else if (variant === ModalVariants.success) {\n    return <Icon size={IconSize.Small} svgIcon={CheckOutline} color={palette.kiwi900} />;\n  }\n  return null;\n};\n\nconst getIcon = (variant?: ModalProps['variant'], icon?: ModalProps['icon']): JSX.Element | null => {\n  const variantIcon = getVariantIcon(variant);\n  if (variantIcon) {\n    return <div className={styles.modal__iconWrapper}>{variantIcon}</div>;\n  }\n  if (icon) {\n    return (\n      <div className={styles.modal__iconWrapper}>\n        {React.cloneElement(icon, {\n          size: IconSize.Small,\n        })}\n      </div>\n    );\n  }\n  return null;\n};\n\nconst Modal: React.FC<ModalProps> = props => {\n  const {\n    footerContent,\n    variant = ModalVariants.normal,\n    primaryButtonText = 'OK',\n    titleId = uuid(),\n    className = '',\n    size = ModalSize.large,\n    zIndex = ZIndex.OverlayScreen,\n    role = 'dialog',\n  } = props;\n\n  const topContent = React.useRef<HTMLDivElement>(null);\n  const modalContentRef = React.useRef<HTMLDivElement>(null);\n  const dialogRef = React.useRef<HTMLDivElement>(null);\n  useFocusTrap(dialogRef, true);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContent = React.useRef<HTMLDivElement>(null);\n  const bottomContentVisible = useIsVisible(bottomContent);\n  const contentIsScrollable = modalContentRef.current && modalContentRef.current.scrollHeight > modalContentRef.current.clientHeight;\n  useReturnFocusOnUnmount(dialogRef);\n\n  function handleKeyboardEvent(e: KeyboardEvent): void {\n    if (e.key === 'Escape' && props.onClose) {\n      e.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function handleClickEvent(event: MouseEvent): void {\n    if (event.target && overlayRef.current === event.target && props.onClose) {\n      event.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  /* Displays a full window size modal with image */\n  const imageView = variant === ModalVariants.image;\n\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n\n  const showActions = (props.secondaryButtonText && props.secondaryButtonText?.length > 0) || props.onSuccess || footerContent;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: props.ariaLabel, id: props.ariaLabelledBy, fallbackId: titleId });\n\n  useEffect(() => {\n    const overlayElement = overlayRef.current;\n    disableBodyScroll();\n    if (!props.disableCloseEvents && overlayElement) {\n      overlayElement.addEventListener('keydown', handleKeyboardEvent);\n      overlayElement.addEventListener('click', handleClickEvent);\n    }\n    return (): void => {\n      enableBodyScroll();\n      if (!props.disableCloseEvents && overlayElement) {\n        overlayElement.removeEventListener('keydown', handleKeyboardEvent);\n        overlayElement.removeEventListener('click', handleClickEvent);\n      }\n    };\n  }, [props.disableCloseEvents]);\n\n  useEffect(() => {\n    dialogRef.current?.focus();\n  }, []);\n\n  const dialogClasses = cn(\n    className,\n    styles.modal,\n    variant && styles[`modal--${variant}`],\n    size && styles[`modal--${size}`],\n    contentIsScrollable && !showActions && styles['modal--no-actions']\n  );\n\n  const titleClasses = cn({\n    [styles['modal__title--error']]: variant === ModalVariants.error,\n    [styles['modal__title--success']]: variant === ModalVariants.success,\n  });\n\n  const Component = (\n    <div data-testid=\"dialog-container\">\n      <div\n        ref={overlayRef}\n        className={styles['modal-overlay']}\n        data-testid={props.testId}\n        data-analyticsid={AnalyticsId.Modal}\n        style={{ zIndex }}\n      >\n        <div className={styles.align}>\n          <div className={dialogClasses} role={role} aria-modal=\"true\" tabIndex={-1} {...ariaLabelAttributes} ref={dialogRef}>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--top'], {\n                [styles['modal__shadow--show']]: !topContentVisible && contentIsScrollable,\n              })}\n            />\n            <div\n              className={cn(styles.modal__contentWrapper, {\n                [styles['modal__contentWrapper--image']]: imageView,\n              })}\n              tabIndex={contentIsScrollable ? 0 : undefined}\n              role={contentIsScrollable ? 'region' : undefined}\n              {...(contentIsScrollable ? ariaLabelAttributes : {})}\n              ref={modalContentRef}\n            >\n              {!props.noCloseButton && (\n                <div className={styles.modal__closeWrapper}>\n                  <div className={cn(styles.modal__closeWrapper__close)}>\n                    <Close onClick={props.onClose} ariaLabel={props.ariaLabelCloseBtn} />\n                  </div>\n                </div>\n              )}\n              <div\n                className={cn(size && styles[`modal__contentWrapper__scroll--${size}`], {\n                  [styles['modal__contentWrapper__scroll--image']]: imageView,\n                })}\n              >\n                <div ref={topContent} />\n                <div className={styles.modal__contentWrapper__title}>\n                  {getIcon(variant, props.icon)}\n                  <Title id={ariaLabelAttributes?.['aria-labelledby']} htmlMarkup=\"h3\" appearance=\"title3\" className={titleClasses}>\n                    {props.title}\n                  </Title>\n                  {props.afterTitleChildren && <div className={styles['modal__afterTitleChildren']}>{props.afterTitleChildren}</div>}\n                </div>\n                {imageView && (\n                  <div>\n                    <div className={styles['modal__contentWrapper__imageWrapper']}>{props.children}</div>\n                    <span className={styles['modal__contentWrapper__imageDescription']}>{props.description}</span>\n                  </div>\n                )}\n                {!imageView && props.children && <div>{props.children}</div>}\n                {!imageView && !props.children && <p className={styles.modal__description}>{props.description}</p>}\n                <div ref={bottomContent} />\n              </div>\n            </div>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--bottom'], {\n                [styles['modal__shadow--show']]: !bottomContentVisible && contentIsScrollable,\n              })}\n            />\n            {showActions && (\n              <div className={cn(styles['modal__call-to-action'], size && styles[`modal__call-to-action--${size}`])}>\n                {props.onSuccess && primaryButtonText && <Button onClick={props.onSuccess}>{primaryButtonText}</Button>}\n                {props.secondaryButtonText && props.secondaryButtonText?.length > 0 && (\n                  <Button variant=\"borderless\" onClick={props.onClose}>\n                    {props.secondaryButtonText}\n                  </Button>\n                )}\n                {footerContent}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (props.printable) {\n    const printModal = 'print-modal';\n    return (\n      <Portal className={printModal} testId=\"print-modal\">\n        <style media=\"print\">{`body > *:not(.${printModal}) {display: none;}`}</style>\n        {Component}\n      </Portal>\n    );\n  }\n\n  return Component;\n};\n\nexport default Modal;\n"],"names":["ModalVariants","ModalSize","React","_a","cn"],"mappings":"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"}

package/components/Modal/styles.module.scss

@@ -3,6 +3,7 @@
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/spacers.css';
 
 .modal-overlay {
   background: rgb(51 51 51 / 75%);
@@ -252,10 +253,7 @@
 
   &__call-to-action {
     display: flex;
-
-    button:first-of-type {
-      margin-right: 24px;
-    }
+    gap: var(--core-space-m);
 
     &--large {
       padding: spacers.getSpacer(l) spacers.getSpacer(m) 0;

package/components/PopMenu/index.js

@@ -2,11 +2,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import React__default, { useRef, useState } from "react";
 import classNames from "classnames";
 import { IconSize, AnalyticsId } from "../../constants.js";
-import { useBreakpoint } from "../../hooks/useBreakpoint.js";
 import { useHover } from "../../hooks/useHover.js";
+import { useIsMobileBreakpoint } from "../../hooks/useIsMobileBreakpoint.js";
 import { useOutsideEvent } from "../../hooks/useOutsideEvent.js";
 import { getColor } from "../../theme/currys/color.js";
-import { breakpoints } from "../../theme/grid.js";
 import { isComponent } from "../../utils/component.js";
 import { I as Icon } from "../../Icon.js";
 import VerticalDots from "../Icons/VerticalDots.js";
@@ -50,13 +49,12 @@ const PopMenu = (props) => {
   const buttonClasses = classNames(styles["pop-menu-button"], {
     [styles[`pop-menu-button--${popMenuVariant}`]]: popMenuVariant
   });
-  const breakpoint = useBreakpoint();
-  const mobile = breakpoint < breakpoints.md;
+  const isMobile = useIsMobileBreakpoint();
   useOutsideEvent(outerRef, () => {
     setIsOpen(false);
   });
   const { isHovered: triggerButtonIsHovered } = useHover(triggerButtonRef);
-  const mobileIconSize = mobile ? IconSize.XSmall : IconSize.Small;
+  const mobileIconSize = isMobile ? IconSize.XSmall : IconSize.Small;
   const handleClick = (cb) => {
     setIsOpen(false);
     cb && cb();

package/components/PopMenu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/PopMenu/PopMenu.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { isComponent } from '../../utils/component';\nimport Icon, { SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport VerticalDots from '../Icons/VerticalDots';\nimport X from '../Icons/X';\nimport LazyIcon from '../LazyIcon';\nimport LinkList, { LinkListProps, LinkProps } from '../LinkList';\nimport PopOver from '../PopOver';\n\nimport styles from './styles.module.scss';\n\nexport enum PopMenuVariant {\n  onWhite = 'on-white',\n  onGray = 'on-gray',\n  onBlueberry = 'on-blueberry',\n}\n\nexport enum PopMenuLabelPosition {\n  right = 'right',\n  left = 'left',\n}\n\nexport interface PopMenuProps {\n  /** Content shown inside PopOver. Can only be a LinkList */\n  children: React.ReactElement<LinkListProps>;\n  /** Adds custom classes to the popover element. */\n  popOverClassName?: string;\n  /** Adds custom classes to the element. */\n  popMenuClassName?: string;\n  /** Changes responsive design for the trigger buttons. */\n  popMenuVariant?: PopMenuVariant;\n  /** Sets the data-testid attribute for the button that opens. */\n  openButtonTestId?: string;\n  /** Sets the data-testid attribute for the button that closes. */\n  closeButtonTestId?: string;\n  /** Sets the data-testid attribute for the popover. */\n  popOverTestId?: string;\n  /** Sets the arial-label attribute for the openButton. */\n  openButtonAriaLabel?: string;\n  /** Sets the arial-label attribute for the closeButton. */\n  closeButtonAriaLabel?: string;\n  /** Sets the icon on the trigger button. */\n  svgIcon?: SvgIcon | IconName;\n  /** Optional text next to the trigger button. */\n  labelText?: string;\n  /** Placement of the label text relative to the trigger button. */\n  labelTextPosition?: PopMenuLabelPosition;\n}\n\nexport const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {\n  const triggerButtonRef = useRef<HTMLButtonElement>(null);\n  const iconRef = useRef<HTMLDivElement>(null);\n  const popOverRef = useRef<HTMLDivElement>(null);\n  const outerRef = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const {\n    children,\n    popOverClassName,\n    popMenuClassName,\n    openButtonTestId,\n    closeButtonTestId,\n    popOverTestId,\n    popMenuVariant = PopMenuVariant.onWhite,\n    openButtonAriaLabel,\n    closeButtonAriaLabel,\n    svgIcon,\n    labelText,\n    labelTextPosition = PopMenuLabelPosition.right,\n  } = props;\n  const buttonClasses = classNames(styles['pop-menu-button'], {\n    [styles[`pop-menu-button--${popMenuVariant}`]]: popMenuVariant,\n  });\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\n\n  useOutsideEvent(outerRef, () => {\n    setIsOpen(false);\n  });\n\n  const { isHovered: triggerButtonIsHovered } = useHover(triggerButtonRef);\n  const mobileIconSize = mobile ? IconSize.XSmall : IconSize.Small;\n\n  const handleClick = (cb?: () => void): void => {\n    setIsOpen(false);\n    cb && cb();\n  };\n\n  const renderChildren = (): React.ReactElement | undefined => {\n    if (isComponent<LinkListProps>(children, LinkList)) {\n      return (\n        <PopOver\n          testId={popOverTestId}\n          className={classNames(styles['pop-menu__pop-over'], popOverClassName)}\n          arrowClassName={styles['pop-menu__pop-over-arrow']}\n          controllerRef={iconRef}\n          popOverRef={popOverRef}\n        >\n          {React.Children.map(children, child =>\n            React.cloneElement(child, {\n              children: React.Children.map(child.props.children, child =>\n                isComponent<LinkProps>(child, LinkList.Link)\n                  ? React.cloneElement(child, {\n                      onClick: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) =>\n                        handleClick(() => child.props.onClick && child.props.onClick(event)),\n                    })\n                  : child\n              ),\n            })\n          )}\n        </PopOver>\n      );\n    }\n  };\n\n  const toggleOpenOnClick = (e?: React.MouseEvent<HTMLElement, MouseEvent>): void => {\n    e && e.stopPropagation();\n    setIsOpen(!isOpen);\n  };\n\n  const iconComponent =\n    svgIcon && typeof svgIcon === 'string' ? (\n      <LazyIcon iconName={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n    ) : (\n      svgIcon && <Icon svgIcon={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n    );\n\n  const openIcon = svgIcon ? (\n    iconComponent\n  ) : (\n    <Icon svgIcon={svgIcon ?? VerticalDots} color={getColor('black')} size={mobileIconSize} isHovered={triggerButtonIsHovered} />\n  );\n\n  const closeIcon = <Icon svgIcon={X} color={getColor('black')} size={mobileIconSize} isHovered={triggerButtonIsHovered} />;\n\n  const triggerButton = (\n    <button\n      ref={triggerButtonRef}\n      data-testid={isOpen ? closeButtonTestId : openButtonTestId}\n      className={buttonClasses}\n      aria-label={isOpen ? closeButtonAriaLabel : openButtonAriaLabel}\n      aria-expanded={isOpen}\n      onClick={toggleOpenOnClick}\n      type=\"button\"\n    >\n      {labelText && labelTextPosition == PopMenuLabelPosition.left && <span>{labelText}</span>}\n      {<div ref={iconRef}>{isOpen ? closeIcon : openIcon}</div>}\n      {labelText && labelTextPosition == PopMenuLabelPosition.right && <span>{labelText}</span>}\n    </button>\n  );\n\n  return (\n    <div ref={outerRef} className={classNames(styles['pop-menu-button'], popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>\n      {triggerButton}\n      {isOpen && renderChildren()}\n    </div>\n  );\n};\n\nexport default PopMenu;\n"],"names":["PopMenuVariant","PopMenuLabelPosition","React","child"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/PopMenu/PopMenu.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { getColor } from '../../theme/currys';\nimport { isComponent } from '../../utils/component';\nimport Icon, { SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport VerticalDots from '../Icons/VerticalDots';\nimport X from '../Icons/X';\nimport LazyIcon from '../LazyIcon';\nimport LinkList, { LinkListProps, LinkProps } from '../LinkList';\nimport PopOver from '../PopOver';\n\nimport styles from './styles.module.scss';\n\nexport enum PopMenuVariant {\n  onWhite = 'on-white',\n  onGray = 'on-gray',\n  onBlueberry = 'on-blueberry',\n}\n\nexport enum PopMenuLabelPosition {\n  right = 'right',\n  left = 'left',\n}\n\nexport interface PopMenuProps {\n  /** Content shown inside PopOver. Can only be a LinkList */\n  children: React.ReactElement<LinkListProps>;\n  /** Adds custom classes to the popover element. */\n  popOverClassName?: string;\n  /** Adds custom classes to the element. */\n  popMenuClassName?: string;\n  /** Changes responsive design for the trigger buttons. */\n  popMenuVariant?: PopMenuVariant;\n  /** Sets the data-testid attribute for the button that opens. */\n  openButtonTestId?: string;\n  /** Sets the data-testid attribute for the button that closes. */\n  closeButtonTestId?: string;\n  /** Sets the data-testid attribute for the popover. */\n  popOverTestId?: string;\n  /** Sets the arial-label attribute for the openButton. */\n  openButtonAriaLabel?: string;\n  /** Sets the arial-label attribute for the closeButton. */\n  closeButtonAriaLabel?: string;\n  /** Sets the icon on the trigger button. */\n  svgIcon?: SvgIcon | IconName;\n  /** Optional text next to the trigger button. */\n  labelText?: string;\n  /** Placement of the label text relative to the trigger button. */\n  labelTextPosition?: PopMenuLabelPosition;\n}\n\nexport const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {\n  const triggerButtonRef = useRef<HTMLButtonElement>(null);\n  const iconRef = useRef<HTMLDivElement>(null);\n  const popOverRef = useRef<HTMLDivElement>(null);\n  const outerRef = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const {\n    children,\n    popOverClassName,\n    popMenuClassName,\n    openButtonTestId,\n    closeButtonTestId,\n    popOverTestId,\n    popMenuVariant = PopMenuVariant.onWhite,\n    openButtonAriaLabel,\n    closeButtonAriaLabel,\n    svgIcon,\n    labelText,\n    labelTextPosition = PopMenuLabelPosition.right,\n  } = props;\n  const buttonClasses = classNames(styles['pop-menu-button'], {\n    [styles[`pop-menu-button--${popMenuVariant}`]]: popMenuVariant,\n  });\n  const isMobile = useIsMobileBreakpoint();\n\n  useOutsideEvent(outerRef, () => {\n    setIsOpen(false);\n  });\n\n  const { isHovered: triggerButtonIsHovered } = useHover(triggerButtonRef);\n  const mobileIconSize = isMobile ? IconSize.XSmall : IconSize.Small;\n\n  const handleClick = (cb?: () => void): void => {\n    setIsOpen(false);\n    cb && cb();\n  };\n\n  const renderChildren = (): React.ReactElement | undefined => {\n    if (isComponent<LinkListProps>(children, LinkList)) {\n      return (\n        <PopOver\n          testId={popOverTestId}\n          className={classNames(styles['pop-menu__pop-over'], popOverClassName)}\n          arrowClassName={styles['pop-menu__pop-over-arrow']}\n          controllerRef={iconRef}\n          popOverRef={popOverRef}\n        >\n          {React.Children.map(children, child =>\n            React.cloneElement(child, {\n              children: React.Children.map(child.props.children, child =>\n                isComponent<LinkProps>(child, LinkList.Link)\n                  ? React.cloneElement(child, {\n                      onClick: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) =>\n                        handleClick(() => child.props.onClick && child.props.onClick(event)),\n                    })\n                  : child\n              ),\n            })\n          )}\n        </PopOver>\n      );\n    }\n  };\n\n  const toggleOpenOnClick = (e?: React.MouseEvent<HTMLElement, MouseEvent>): void => {\n    e && e.stopPropagation();\n    setIsOpen(!isOpen);\n  };\n\n  const iconComponent =\n    svgIcon && typeof svgIcon === 'string' ? (\n      <LazyIcon iconName={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n    ) : (\n      svgIcon && <Icon svgIcon={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n    );\n\n  const openIcon = svgIcon ? (\n    iconComponent\n  ) : (\n    <Icon svgIcon={svgIcon ?? VerticalDots} color={getColor('black')} size={mobileIconSize} isHovered={triggerButtonIsHovered} />\n  );\n\n  const closeIcon = <Icon svgIcon={X} color={getColor('black')} size={mobileIconSize} isHovered={triggerButtonIsHovered} />;\n\n  const triggerButton = (\n    <button\n      ref={triggerButtonRef}\n      data-testid={isOpen ? closeButtonTestId : openButtonTestId}\n      className={buttonClasses}\n      aria-label={isOpen ? closeButtonAriaLabel : openButtonAriaLabel}\n      aria-expanded={isOpen}\n      onClick={toggleOpenOnClick}\n      type=\"button\"\n    >\n      {labelText && labelTextPosition == PopMenuLabelPosition.left && <span>{labelText}</span>}\n      {<div ref={iconRef}>{isOpen ? closeIcon : openIcon}</div>}\n      {labelText && labelTextPosition == PopMenuLabelPosition.right && <span>{labelText}</span>}\n    </button>\n  );\n\n  return (\n    <div ref={outerRef} className={classNames(styles['pop-menu-button'], popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>\n      {triggerButton}\n      {isOpen && renderChildren()}\n    </div>\n  );\n};\n\nexport default PopMenu;\n"],"names":["PopMenuVariant","PopMenuLabelPosition","React","child"],"mappings":";;;;;;;;;;;;;;;;AAoBY,IAAA,mCAAAA,oBAAL;AACLA,kBAAA,SAAU,IAAA;AACVA,kBAAA,QAAS,IAAA;AACTA,kBAAA,aAAc,IAAA;AAHJA,SAAAA;AAAA,GAAA,kBAAA,CAAA,CAAA;AAMA,IAAA,yCAAAC,0BAAL;AACLA,wBAAA,OAAQ,IAAA;AACRA,wBAAA,MAAO,IAAA;AAFGA,SAAAA;AAAA,GAAA,wBAAA,CAAA,CAAA;AAgCC,MAAA,UAAkC,CAAC,UAAwB;AAChE,QAAA,mBAAmB,OAA0B,IAAI;AACjD,QAAA,UAAU,OAAuB,IAAI;AACrC,QAAA,aAAa,OAAuB,IAAI;AACxC,QAAA,WAAW,OAAuB,IAAI;AAC5C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AACpC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA;AAAA,EAAA,IAClB;AACJ,QAAM,gBAAgB,WAAW,OAAO,iBAAiB,GAAG;AAAA,IAC1D,CAAC,OAAO,oBAAoB,cAAc,EAAE,CAAC,GAAG;AAAA,EAAA,CACjD;AACD,QAAM,WAAW,sBAAsB;AAEvC,kBAAgB,UAAU,MAAM;AAC9B,cAAU,KAAK;AAAA,EAAA,CAChB;AAED,QAAM,EAAE,WAAW,2BAA2B,SAAS,gBAAgB;AACvE,QAAM,iBAAiB,WAAW,SAAS,SAAS,SAAS;AAEvD,QAAA,cAAc,CAAC,OAA0B;AAC7C,cAAU,KAAK;AACf,UAAM,GAAG;AAAA,EACX;AAEA,QAAM,iBAAiB,MAAsC;AACvD,QAAA,YAA2B,UAAU,QAAQ,GAAG;AAEhD,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,QAAQ;AAAA,UACR,WAAW,WAAW,OAAO,oBAAoB,GAAG,gBAAgB;AAAA,UACpE,gBAAgB,OAAO,0BAA0B;AAAA,UACjD,eAAe;AAAA,UACf;AAAA,UAEC,yBAAM,SAAS;AAAA,YAAI;AAAA,YAAU,CAAA,UAC5BC,eAAM,aAAa,OAAO;AAAA,cACxB,UAAUA,eAAM,SAAS;AAAA,gBAAI,MAAM,MAAM;AAAA,gBAAU,CAAAC,WACjD,YAAuBA,QAAO,SAAS,IAAI,IACvCD,eAAM,aAAaC,QAAO;AAAA,kBACxB,SAAS,CAAC,UACR,YAAY,MAAMA,OAAM,MAAM,WAAWA,OAAM,MAAM,QAAQ,KAAK,CAAC;AAAA,gBAAA,CACtE,IACDA;AAAAA,cAAA;AAAA,YAEP,CAAA;AAAA,UAAA;AAAA,QACH;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AAEM,QAAA,oBAAoB,CAAC,MAAwD;AACjF,SAAK,EAAE,gBAAgB;AACvB,cAAU,CAAC,MAAM;AAAA,EACnB;AAEM,QAAA,gBACJ,WAAW,OAAO,YAAY,WAC3B,oBAAA,UAAA,EAAS,UAAU,SAAS,MAAM,SAAS,QAAQ,WAAW,wBAAwB,IAEvF,WAAY,oBAAA,MAAA,EAAK,SAAkB,MAAM,SAAS,QAAQ,WAAW,uBAAwB,CAAA;AAGjG,QAAM,WAAW,UACf,gBAEA,oBAAC,QAAK,SAAS,WAAW,cAAc,OAAO,SAAS,OAAO,GAAG,MAAM,gBAAgB,WAAW,wBAAwB;AAG7H,QAAM,YAAY,oBAAC,MAAK,EAAA,SAAS,GAAG,OAAO,SAAS,OAAO,GAAG,MAAM,gBAAgB,WAAW,uBAAwB,CAAA;AAEvH,QAAM,gBACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,eAAa,SAAS,oBAAoB;AAAA,MAC1C,WAAW;AAAA,MACX,cAAY,SAAS,uBAAuB;AAAA,MAC5C,iBAAe;AAAA,MACf,SAAS;AAAA,MACT,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAA,aAAa,qBAAqB,UAA8B,oBAAA,QAAA,EAAM,UAAU,WAAA;AAAA,4BAC/E,OAAI,EAAA,KAAK,SAAU,UAAA,SAAS,YAAY,UAAS;AAAA,QAClD,aAAa,qBAAqB,WAA8B,oBAAC,UAAM,UAAU,UAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACpF;AAGF,SACG,qBAAA,OAAA,EAAI,KAAK,UAAU,WAAW,WAAW,OAAO,iBAAiB,GAAG,gBAAgB,GAAG,oBAAkB,YAAY,SACnH,UAAA;AAAA,IAAA;AAAA,IACA,UAAU,eAAe;AAAA,EAAA,GAC5B;AAEJ;"}

package/designsystem-react.css

@@ -1,6 +1,12 @@
 /* stylelint-disable color-hex-length */
+/* stylelint-disable comment-empty-line-before */
+/* stylelint-disable scss/operator-no-unspaced */
+
+/**
+ * This file was generated automatically by Supernova.io and should not be changed manually.
+ * To modify the format or content of this file, please contact your design system team. 
+ */
 
-/* This file was generated by Supernova and should not be changed manually */
 :root {
   --core-color-black: #000000;
   --core-color-white: #ffffff;

package/hooks/useIsMobileBreakpoint.d.ts

@@ -0,0 +1 @@
+export declare const useIsMobileBreakpoint: () => boolean;

package/hooks/useIsMobileBreakpoint.js

@@ -0,0 +1,10 @@
+import { useBreakpoint } from "./useBreakpoint.js";
+import { breakpoints } from "../theme/grid.js";
+const useIsMobileBreakpoint = () => {
+  const breakpoint = useBreakpoint();
+  return breakpoint < breakpoints.md;
+};
+export {
+  useIsMobileBreakpoint
+};
+//# sourceMappingURL=useIsMobileBreakpoint.js.map

package/hooks/useIsMobileBreakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsMobileBreakpoint.js","sources":["../../src/hooks/useIsMobileBreakpoint.ts"],"sourcesContent":["import { useBreakpoint } from './useBreakpoint';\nimport { breakpoints } from '../theme/grid';\n\nexport const useIsMobileBreakpoint = (): boolean => {\n  const breakpoint = useBreakpoint();\n  return breakpoint < breakpoints.md;\n};\n"],"names":[],"mappings":";;AAGO,MAAM,wBAAwB,MAAe;AAClD,QAAM,aAAa,cAAc;AACjC,SAAO,aAAa,YAAY;AAClC;"}

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/helsenorge/designsystem.git"
   },
   "homepage": "https://helsenorge.design",
-  "version": "11.0.0",
+  "version": "11.1.0",
   "author": "Helsenorge",
   "license": "MIT",
   "dependencies": {

package/resources/HN.Designsystem.Dropdown.nb-NO.json.d.ts

@@ -1,5 +1,6 @@
 declare const _default: {
-  "closeText": "Lukk"
+  "closeText": "Lukk",
+  "testtest": "testtest"
 }
 ;
 

package/scss/supernova/index.css

@@ -1,3 +1,4 @@
-/* This file was generated by Supernova and should not be changed manually */
-@import "./colors.css";
-@import "./typography.css";
+/* Base tokens */
+@import './styles/spacers.css';
+@import './styles/colors.css';
+@import './styles/typography.css';

package/scss/supernova/styles/colors.css

@@ -1,6 +1,12 @@
 /* stylelint-disable color-hex-length */
+/* stylelint-disable comment-empty-line-before */
+/* stylelint-disable scss/operator-no-unspaced */
+
+/**
+ * This file was generated automatically by Supernova.io and should not be changed manually.
+ * To modify the format or content of this file, please contact your design system team. 
+ */
 
-/* This file was generated by Supernova and should not be changed manually */
 :root {
   --core-color-black: #000000;
   --core-color-white: #ffffff;

package/scss/supernova/styles/spacers.css

@@ -0,0 +1,24 @@
+/* stylelint-disable color-hex-length */
+/* stylelint-disable comment-empty-line-before */
+/* stylelint-disable scss/operator-no-unspaced */
+
+/**
+ * This file was generated automatically by Supernova.io and should not be changed manually.
+ * To modify the format or content of this file, please contact your design system team. 
+ */
+
+:root {
+  --core-space-4xs: 0.125rem;
+  --core-space-3xs: 0.25rem;
+  --core-space-2xs: 0.5rem;
+  --core-space-xs: 0.75rem;
+  --core-space-s: 1rem;
+  --core-space-m: 1.5rem;
+  --core-space-l: 2rem;
+  --core-space-xl: 3rem;
+  --core-space-2xl: 4rem;
+  --core-space-3xl: 5rem;
+  --core-space-4xl: 6rem;
+  --core-space-5xl: 7rem;
+  --core-space-6xl: 8rem;
+}

package/scss/supernova/styles/typography.css

@@ -0,0 +1,111 @@
+/* stylelint-disable color-hex-length */
+/* stylelint-disable comment-empty-line-before */
+/* stylelint-disable scss/operator-no-unspaced */
+
+/**
+ * This file was generated automatically by Supernova.io and should not be changed manually.
+ * To modify the format or content of this file, please contact your design system team. 
+ */
+
+:root {
+
+  /* Hovedtittel H1 */
+  --desktop-h1-title1: 600 3rem/120% "Source Sans Pro";
+
+  /* Sekundærtittel H2 */
+  --desktop-h2-title2: 600 2rem/120% "Source Sans Pro";
+
+  /* Tertiærtittel H3 */
+  --desktop-h3-title3: 600 1.625rem/120% "Source Sans Pro";
+  --desktop-h4-title4: 600 1.375rem/130% "Source Sans Pro";
+  --desktop-h5-title5: 700 1.125rem/140% "Source Sans Pro";
+  --desktop-preamble: 400 1.5rem/130% "Source Sans Pro";
+  --desktop-legend: 600 1.5rem/130% "Source Sans Pro";
+  --desktop-label: 600 1.25rem/130% "Source Sans Pro";
+  --desktop-body: 400 1.25rem/150% "Source Sans Pro";
+
+  /* Display of condensed textual data, such as metadata or information that is useful, but perhaps not essential for the use of a service. */
+  --desktop-compact-data: 400 1.125rem/140% "Source Sans Pro";
+
+  /* Tekst i tabellceller. Mer kompakt enn brødtekst (body) */
+  --desktop-tablecell: 400 1.125rem/130% "Source Sans Pro";
+  --desktop-body-strong: 600 1.25rem/150% "Source Sans Pro";
+
+  /* Text inside input-fields, textarea fields and numeric steppers, etc. Not to be used as the Label for Radiogroup or Checkbox - use Label. */
+  --desktop-form-input: 400 1.25rem/140% "Source Sans Pro";
+
+  /* Bildetekst - plasseres nedenfor bilde eller figur */
+  --desktop-image-caption: 400 1rem/150% "Source Sans Pro";
+
+  /* Supply copyright information for images */
+  --desktop-image-credit: 400 0.75rem/130% "Source Sans Pro";
+
+  /* Vis status/tidskoder - lav linjehøyde for kompakt visning */
+  --desktop-status-time-stamp-time: 400 1.125rem/110% "Source Sans Pro";
+
+  /* Hovedtittel H1 */
+  --mobile-h1-title1: 600 2rem/120% "Source Sans Pro";
+
+  /* Sekundærtittel H2 */
+  --mobile-h2-title2: 600 1.625rem/120% "Source Sans Pro";
+
+  /* Tertiærtittel H3 */
+  --mobile-h3-title3: 600 1.375rem/136% "Source Sans Pro";
+  --mobile-h4-title4: 600 1.25rem/130% "Source Sans Pro";
+  --mobile-preamble: 400 1.25rem/130% "Source Sans Pro";
+  --mobile-legend: 600 1.125rem/130% "Source Sans Pro";
+  --mobile-label: 600 1.125rem/120% "Source Sans Pro";
+  --mobile-body: 400 1.125rem/150% "Source Sans Pro";
+
+  /* Tekst i tabellceller. Mer kompakt enn brødtekst (body) */
+  --mobile-tablecell: 400 1.125rem/128% "Source Sans Pro";
+
+  /* Text in Input and Textarea - widgets */
+  --mobile-form-input: 400 1.125rem/150% "Source Sans Pro";
+  --mobile-image-caption: 400 1rem/150% "Source Sans Pro";
+  --mobile-image-credit: 400 0.75rem/133% "Source Sans Pro";
+
+  /* Vis status/tidskoder - lav linjehøyde for kompakt visning */
+  --mobile-status-time-stamp-time: 400 1rem/110% "Source Sans Pro";
+  --mobile-h5-title5: 700 1rem/140% "Source Sans Pro";
+  --desktop-h6-title6: 700 1.125rem/140% "Source Sans Pro";
+  --desktop-label-subdued: 400 1.25rem/130% "Source Sans Pro";
+  --desktop-sublabel: 600 1.125rem/130% "Source Sans 3";
+  --desktop-sublabel-subdued: 400 1.125rem/130% "Source Sans 3";
+  --mobile-h6-title6: 700 1rem/140% "Source Sans Pro";
+  --mobile-label-subdued: 400 1.125rem/120% "Source Sans Pro";
+  --mobile-sublabel: 600 1rem/120% "Source Sans 3";
+
+  /* <label> */
+  --mobile-sublabel-subdued: 400 1rem/120% "Source Sans 3";
+  --mobile-body-strong: 600 1.125rem/150% "Source Sans Pro";
+  --mobile-compact-data: 400 1rem/150% "Source Sans Pro";
+
+  /* Name-value pairs as rendered by an HTML <DT>-tag */
+  --desktop-definitionlist-type: 600 1.25rem/130% "Source Sans Pro";
+
+  /* Data-value in Name-Value-pairs as rendered by a <DD>-tag (definition-data) */
+  --desktop-definition-list-data: 400 1.25rem/130% "Source Sans Pro";
+
+  /* Use for inherent "chunking" of text in hmtl lists <LI>, ie. bullet-lists and ordered lists. */
+  --desktop-textlist: 400 1.25rem/130% "Source Sans Pro";
+
+  /* Use for the Name part in name-value pairs, the equivalent of html <DT> */
+  --mobile-definitionlist-type: 600 1.125rem/120% "Source Sans Pro";
+  --mobile-definitionlist-data: 400 1.125rem/120% "Source Sans Pro";
+
+  /* Renders clumping in ordinary clumps */
+  --mobile-textlist: 400 1.125rem/120% "Source Sans Pro";
+
+  /* For use as body text in help components */
+  --desktop-help-text: 400 1.125rem/140% "Source Sans Pro";
+
+  /* For use in Help trigger components */
+  --desktop-help-trigger-text: 600 1.125rem/130% "Source Sans 3";
+
+  /* For use as body text in help components */
+  --mobile-help-text: 400 1rem/150% "Source Sans Pro";
+
+  /* For use in Help trigger components */
+  --mobile-help-trigger-text: 600 1rem/120% "Source Sans 3";
+}