@helsenorge/designsystem-react 11.2.0-beta.0 → 11.2.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,30 +1,78 @@
-## 11.2.0-beta.0 (2025-05-06)
-
-## 11.1.0-alpha.0 (2025-05-06)
-
-### Features
-
+## [11.2.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv11.1.0&targetVersion=GTv11.2.0) (2025-05-27)
+
+### Features
+
+- legg til active styling på nye komponenter
+  ([7e01e15](https://github.com/helsenorge/designsystem/commit/7e01e15f329985cc5fdf2a3b5430e68d0a793346)), closes
+  [#350468](https://github.com/helsenorge/designsystem/issues/350468) [#351362](https://github.com/helsenorge/designsystem/issues/351362)
+  [#351368](https://github.com/helsenorge/designsystem/issues/351368)
+- oppdaterte fargetokens ([e30d942](https://github.com/helsenorge/designsystem/commit/e30d942c4179c9ed18fe63deb9f89be435e9c08d)), closes
+  [#349793](https://github.com/helsenorge/designsystem/issues/349793)
+- **articleteaser:** ny komponent ([3431e82](https://github.com/helsenorge/designsystem/commit/3431e8219f0e95e75547cf78a8ed5467c3972de4)),
+  closes [#351362](https://github.com/helsenorge/designsystem/issues/351362)
+- **close:** legg til flere farger og bruk i helpdrawer
+  ([c442703](https://github.com/helsenorge/designsystem/commit/c442703d95c7bf490e21fadc380161f9a1d3d82f)), closes
+  [#352915](https://github.com/helsenorge/designsystem/issues/352915)
+- **helpdrawer:** lagt til komponent
+  ([0358d95](https://github.com/helsenorge/designsystem/commit/0358d9586727ba45ece5899c39a077d2682aa976)), closes
+  [#350492](https://github.com/helsenorge/designsystem/issues/350492)
+- **helpdrawer:** nytt komponent helpdrawer
+  ([4fbd27a](https://github.com/helsenorge/designsystem/commit/4fbd27a0278bce9a79ce43ffe8debb5b7b8067d0))
+- **helpdrawer:** nytt komponent helpdrawer"
+  ([e743080](https://github.com/helsenorge/designsystem/commit/e7430809193b1bc4b0ff26046ffb2822871967f5)), closes
+  [#350492](https://github.com/helsenorge/designsystem/issues/350492)
+- **helpteaser:** ny komponent ([806f2ab](https://github.com/helsenorge/designsystem/commit/806f2ab7eba0179a1592a4a92bcd56c020d3c6f7))
+- **icon:** nytt ikon toddler ([4d02bb4](https://github.com/helsenorge/designsystem/commit/4d02bb437340cc1cc8833a0b44badbdf119db43f)),
+  closes [#352079](https://github.com/helsenorge/designsystem/issues/352079)
+- **illustration:** nye illustrasjoner for småbarnsliv
+  ([855cc01](https://github.com/helsenorge/designsystem/commit/855cc013f9938a1e0d56e04581990a8d30ba64e1)), closes
+  [#353036](https://github.com/helsenorge/designsystem/issues/353036)
+- **infoteaser:** ny komponent ([8c35a84](https://github.com/helsenorge/designsystem/commit/8c35a84e94fc8e7344266ca8585a15bd2e93d2f8)),
+  closes [#351368](https://github.com/helsenorge/designsystem/issues/351368)
+- **panel:** legg til språkstøtte og ta i bruk tokens
+  ([3f21b2e](https://github.com/helsenorge/designsystem/commit/3f21b2e90041537c05e403b4237db7ffe07b5f40)), closes
+  [#349728](https://github.com/helsenorge/designsystem/issues/349728) [#349793](https://github.com/helsenorge/designsystem/issues/349793)
+
+### Bug Fixes
+
+- legg til manglende analytics id ([a11ea2c](https://github.com/helsenorge/designsystem/commit/a11ea2c1a21ddf7a4bb6aa2a0ca6d9edfa1f6582)),
+  closes [#351362](https://github.com/helsenorge/designsystem/issues/351362)
+- usebreakpoint bommer når flere breakpoints trigger samtidig
+  ([1dc454e](https://github.com/helsenorge/designsystem/commit/1dc454e94a73b8c82f45c86610986d4218cb9e9c)), closes
+  [#351338](https://github.com/helsenorge/designsystem/issues/351338)
+- **articleteaser:** kun vis fokus styling på focus-visible
+  ([83a0cfb](https://github.com/helsenorge/designsystem/commit/83a0cfb4b9e70614bb7bdff6313c424543fa60db))
+- **articleteaser:** tykkelse på fokus
+  ([bda2253](https://github.com/helsenorge/designsystem/commit/bda2253fe91a50ec6752557d3910c33ebbffb27b))
+- **icon:** fiks toddler ikon ([14883df](https://github.com/helsenorge/designsystem/commit/14883df7c20d291c2a92f8c2acd80d6ce460d0ff)),
+  closes [#352079](https://github.com/helsenorge/designsystem/issues/352079)
+- **infoteaser:** riktig focus tykkelse
+  ([5de4798](https://github.com/helsenorge/designsystem/commit/5de47982951f8f07be03215c1980c68e7762e617)), closes
+  [#351368](https://github.com/helsenorge/designsystem/issues/351368)
+
+## [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)
-- **helpbubble:** roles og fargetokens
-  ([24f1fcb](https://github.com/helsenorge/designsystem/commit/24f1fcbd11496da68849bb7e6ca656e1577571ee))
-- **helppanel:** ny border og spacing til tittel
-  ([b47870f](https://github.com/helsenorge/designsystem/commit/b47870ff5cb571d09adcc921bbfc7270e640dba0))
+- **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)
-- **popover:** bruk floating UI til å plassere popover
-  ([6e9d943](https://github.com/helsenorge/designsystem/commit/6e9d9437fbd6409ed80188bf84b21906fbc23889))
-- **typography:** nye stiler for help-text pg helt-trigger-text
-  ([9ee09ba](https://github.com/helsenorge/designsystem/commit/9ee09ba5d7815b81c9fd2910f00d667c1d01bfee)), closes
-  [#350872](https://github.com/helsenorge/designsystem/issues/350872)
 
 ### Bug Fixes
 
-- bredde på små skjermer ([148beea](https://github.com/helsenorge/designsystem/commit/148beeaeac4cc10060872715e780e6a5f1642c6a))
 - **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/Close.js

@@ -2,18 +2,24 @@ import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import classNames from "classnames";
 import { AnalyticsId } from "./constants.js";
-import { useBreakpoint, Breakpoint } from "./hooks/useBreakpoint.js";
 import { useHover } from "./hooks/useHover.js";
-import { palette } from "./theme/palette.js";
+import { useIsMobileBreakpoint } from "./hooks/useIsMobileBreakpoint.js";
 import { mergeRefs } from "./utils/refs.js";
 import { I as Icon } from "./Icon.js";
 import X from "./components/Icons/X.js";
 import styles from "./components/Close/styles.module.scss";
 const Close = React__default.forwardRef(function ButtonForwardedRef(props, ref) {
-  const { small, testId, ariaLabel = "Lukk", onClick, className, color = palette.blueberry600 } = props;
-  const breakpoint = useBreakpoint();
+  const { small, testId, ariaLabel = "Lukk", onClick, className, color = "blueberry" } = props;
   const { hoverRef, isHovered } = useHover();
-  const iconSize = breakpoint === Breakpoint.xs || small ? 38 : 48;
+  const iconSize = useIsMobileBreakpoint() || small ? 38 : 48;
+  let iconColor;
+  if (color === "black") {
+    iconColor = "black";
+  } else if (color === "plum") {
+    iconColor = "var(--core-color-plum-700)";
+  } else {
+    iconColor = "var(--color-action-graphics-onlight)";
+  }
   const closeClasses = classNames(styles.close, { [styles["close--small"]]: small }, className);
   return /* @__PURE__ */ jsx(
     "button",
@@ -25,7 +31,16 @@ const Close = React__default.forwardRef(function ButtonForwardedRef(props, ref)
       "aria-label": ariaLabel,
       onClick,
       type: "button",
-      children: /* @__PURE__ */ jsx(Icon, { svgIcon: X, color, size: iconSize, isHovered })
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: classNames(styles["close__inner-container"], {
+            [styles["close--small"]]: small,
+            [styles["close__inner-container--plum"]]: color == "plum"
+          }),
+          children: /* @__PURE__ */ jsx(Icon, { svgIcon: X, color: iconColor, size: iconSize, isHovered })
+        }
+      )
     }
   );
 });

package/Close.js.map

@@ -1 +1 @@
-{"version":3,"file":"Close.js","sources":["../src/components/Close/Close.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { palette } from '../../theme/palette';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface CloseProps {\n  /** Keeps the icon small for all screen sizes */\n  small?: boolean;\n  /** Function is called when user clicks the button */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Gives color to the svg */\n  color?: string;\n}\n\nconst Close = React.forwardRef(function ButtonForwardedRef(props: CloseProps, ref: React.ForwardedRef<HTMLButtonElement>) {\n  const { small, testId, ariaLabel = 'Lukk', onClick, className, color = palette.blueberry600 } = props;\n  const breakpoint = useBreakpoint();\n  const { hoverRef, isHovered } = useHover();\n\n  const iconSize = breakpoint === Breakpoint.xs || small ? 38 : 48;\n\n  const closeClasses = classNames(styles.close, { [styles['close--small']]: small }, className);\n\n  return (\n    <button\n      ref={mergeRefs([ref, hoverRef])}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Close}\n      className={closeClasses}\n      aria-label={ariaLabel}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <Icon svgIcon={X} color={color} size={iconSize} isHovered={isHovered} />\n    </button>\n  );\n});\n\nexport default Close;\n"],"names":["React"],"mappings":";;;;;;;;;;;AA6BA,MAAM,QAAQA,eAAM,WAAW,SAAS,mBAAmB,OAAmB,KAA4C;AAClH,QAAA,EAAE,OAAO,QAAQ,YAAY,QAAQ,SAAS,WAAW,QAAQ,QAAQ,aAAiB,IAAA;AAChG,QAAM,aAAa,cAAc;AACjC,QAAM,EAAE,UAAU,UAAU,IAAI,SAAS;AAEzC,QAAM,WAAW,eAAe,WAAW,MAAM,QAAQ,KAAK;AAE9D,QAAM,eAAe,WAAW,OAAO,OAAO,EAAE,CAAC,OAAO,cAAc,CAAC,GAAG,MAAM,GAAG,SAAS;AAG1F,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK,UAAU,CAAC,KAAK,QAAQ,CAAC;AAAA,MAC9B,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAC9B,WAAW;AAAA,MACX,cAAY;AAAA,MACZ;AAAA,MACA,MAAK;AAAA,MAEL,8BAAC,MAAK,EAAA,SAAS,GAAG,OAAc,MAAM,UAAU,UAAsB,CAAA;AAAA,IAAA;AAAA,EACxE;AAEJ,CAAC;"}
+{"version":3,"file":"Close.js","sources":["../src/components/Close/Close.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface CloseProps {\n  /** Keeps the icon small for all screen sizes */\n  small?: boolean;\n  /** Function is called when user clicks the button */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Gives color to the svg */\n  color?: 'blueberry' | 'black' | 'plum';\n}\n\nconst Close = React.forwardRef(function ButtonForwardedRef(props: CloseProps, ref: React.ForwardedRef<HTMLButtonElement>) {\n  const { small, testId, ariaLabel = 'Lukk', onClick, className, color = 'blueberry' } = props;\n  const { hoverRef, isHovered } = useHover();\n\n  const iconSize = useIsMobileBreakpoint() || small ? 38 : 48;\n\n  let iconColor;\n  if (color === 'black') {\n    iconColor = 'black';\n  } else if (color === 'plum') {\n    iconColor = 'var(--core-color-plum-700)';\n  } else {\n    iconColor = 'var(--color-action-graphics-onlight)';\n  }\n\n  const closeClasses = classNames(styles.close, { [styles['close--small']]: small }, className);\n\n  return (\n    <button\n      ref={mergeRefs([ref, hoverRef])}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Close}\n      className={closeClasses}\n      aria-label={ariaLabel}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <span\n        className={classNames(styles['close__inner-container'], {\n          [styles['close--small']]: small,\n          [styles['close__inner-container--plum']]: color == 'plum',\n        })}\n      >\n        <Icon svgIcon={X} color={iconColor} size={iconSize} isHovered={isHovered} />\n      </span>\n    </button>\n  );\n});\n\nexport default Close;\n"],"names":["React"],"mappings":";;;;;;;;;;AA4BA,MAAM,QAAQA,eAAM,WAAW,SAAS,mBAAmB,OAAmB,KAA4C;AAClH,QAAA,EAAE,OAAO,QAAQ,YAAY,QAAQ,SAAS,WAAW,QAAQ,YAAA,IAAgB;AACvF,QAAM,EAAE,UAAU,UAAU,IAAI,SAAS;AAEzC,QAAM,WAAW,sBAAA,KAA2B,QAAQ,KAAK;AAErD,MAAA;AACJ,MAAI,UAAU,SAAS;AACT,gBAAA;AAAA,EAAA,WACH,UAAU,QAAQ;AACf,gBAAA;AAAA,EAAA,OACP;AACO,gBAAA;AAAA,EAAA;AAGd,QAAM,eAAe,WAAW,OAAO,OAAO,EAAE,CAAC,OAAO,cAAc,CAAC,GAAG,MAAM,GAAG,SAAS;AAG1F,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK,UAAU,CAAC,KAAK,QAAQ,CAAC;AAAA,MAC9B,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAC9B,WAAW;AAAA,MACX,cAAY;AAAA,MACZ;AAAA,MACA,MAAK;AAAA,MAEL,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,WAAW,OAAO,wBAAwB,GAAG;AAAA,YACtD,CAAC,OAAO,cAAc,CAAC,GAAG;AAAA,YAC1B,CAAC,OAAO,8BAA8B,CAAC,GAAG,SAAS;AAAA,UAAA,CACpD;AAAA,UAED,UAAA,oBAAC,QAAK,SAAS,GAAG,OAAO,WAAW,MAAM,UAAU,UAAsB,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC5E;AAAA,EACF;AAEJ,CAAC;"}

package/Drawer.js

@@ -0,0 +1,362 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+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 { 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 { getAriaLabelAttributes } from "./utils/accessibility.js";
+import { u as uuid } from "./uuid.js";
+import { B as Button } from "./Button.js";
+import { C as Close } from "./Close.js";
+import { T as Title } from "./Title.js";
+import styles from "./components/Drawer/styles.module.scss";
+import { a as useConstant, i as isBrowser, u as useAnimate } from "./use-animate.js";
+const LayoutGroupContext = createContext({});
+const PresenceContext = createContext(null);
+const MotionConfigContext = createContext({
+  transformPagePoint: (p) => p,
+  isStatic: false,
+  reducedMotion: "never"
+});
+class PopChildMeasure extends React.Component {
+  getSnapshotBeforeUpdate(prevProps) {
+    const element = this.props.childRef.current;
+    if (element && prevProps.isPresent && !this.props.isPresent) {
+      const size = this.props.sizeRef.current;
+      size.height = element.offsetHeight || 0;
+      size.width = element.offsetWidth || 0;
+      size.top = element.offsetTop;
+      size.left = element.offsetLeft;
+    }
+    return null;
+  }
+  /**
+   * Required with getSnapshotBeforeUpdate to stop React complaining.
+   */
+  componentDidUpdate() {
+  }
+  render() {
+    return this.props.children;
+  }
+}
+function PopChild({ children, isPresent }) {
+  const id = useId();
+  const ref = useRef(null);
+  const size = useRef({
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0
+  });
+  const { nonce } = useContext(MotionConfigContext);
+  useInsertionEffect(() => {
+    const { width, height, top, left } = size.current;
+    if (isPresent || !ref.current || !width || !height)
+      return;
+    ref.current.dataset.motionPopId = id;
+    const style = document.createElement("style");
+    if (nonce)
+      style.nonce = nonce;
+    document.head.appendChild(style);
+    if (style.sheet) {
+      style.sheet.insertRule(`
+          [data-motion-pop-id="${id}"] {
+            position: absolute !important;
+            width: ${width}px !important;
+            height: ${height}px !important;
+            top: ${top}px !important;
+            left: ${left}px !important;
+          }
+        `);
+    }
+    return () => {
+      document.head.removeChild(style);
+    };
+  }, [isPresent]);
+  return jsx(PopChildMeasure, { isPresent, childRef: ref, sizeRef: size, children: React.cloneElement(children, { ref }) });
+}
+const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode }) => {
+  const presenceChildren = useConstant(newChildrenMap);
+  const id = useId();
+  const memoizedOnExitComplete = useCallback((childId) => {
+    presenceChildren.set(childId, true);
+    for (const isComplete of presenceChildren.values()) {
+      if (!isComplete)
+        return;
+    }
+    onExitComplete && onExitComplete();
+  }, [presenceChildren, onExitComplete]);
+  const context = useMemo(
+    () => ({
+      id,
+      initial,
+      isPresent,
+      custom,
+      onExitComplete: memoizedOnExitComplete,
+      register: (childId) => {
+        presenceChildren.set(childId, false);
+        return () => presenceChildren.delete(childId);
+      }
+    }),
+    /**
+     * If the presence of a child affects the layout of the components around it,
+     * we want to make a new context value to ensure they get re-rendered
+     * so they can detect that layout change.
+     */
+    presenceAffectsLayout ? [Math.random(), memoizedOnExitComplete] : [isPresent, memoizedOnExitComplete]
+  );
+  useMemo(() => {
+    presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
+  }, [isPresent]);
+  React.useEffect(() => {
+    !isPresent && !presenceChildren.size && onExitComplete && onExitComplete();
+  }, [isPresent]);
+  if (mode === "popLayout") {
+    children = jsx(PopChild, { isPresent, children });
+  }
+  return jsx(PresenceContext.Provider, { value: context, children });
+};
+function newChildrenMap() {
+  return /* @__PURE__ */ new Map();
+}
+function usePresence(subscribe = true) {
+  const context = useContext(PresenceContext);
+  if (context === null)
+    return [true, null];
+  const { isPresent, onExitComplete, register } = context;
+  const id = useId();
+  useEffect(() => {
+    if (subscribe)
+      register(id);
+  }, [subscribe]);
+  const safeToRemove = useCallback(() => subscribe && onExitComplete && onExitComplete(id), [id, onExitComplete, subscribe]);
+  return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
+}
+const getChildKey = (child) => child.key || "";
+function onlyElements(children) {
+  const filtered = [];
+  Children.forEach(children, (child) => {
+    if (isValidElement(child))
+      filtered.push(child);
+  });
+  return filtered;
+}
+const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
+const AnimatePresence = ({ children, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = "sync", propagate = false }) => {
+  const [isParentPresent, safeToRemove] = usePresence(propagate);
+  const presentChildren = useMemo(() => onlyElements(children), [children]);
+  const presentKeys = propagate && !isParentPresent ? [] : presentChildren.map(getChildKey);
+  const isInitialRender = useRef(true);
+  const pendingPresentChildren = useRef(presentChildren);
+  const exitComplete = useConstant(() => /* @__PURE__ */ new Map());
+  const [diffedChildren, setDiffedChildren] = useState(presentChildren);
+  const [renderedChildren, setRenderedChildren] = useState(presentChildren);
+  useIsomorphicLayoutEffect(() => {
+    isInitialRender.current = false;
+    pendingPresentChildren.current = presentChildren;
+    for (let i = 0; i < renderedChildren.length; i++) {
+      const key = getChildKey(renderedChildren[i]);
+      if (!presentKeys.includes(key)) {
+        if (exitComplete.get(key) !== true) {
+          exitComplete.set(key, false);
+        }
+      } else {
+        exitComplete.delete(key);
+      }
+    }
+  }, [renderedChildren, presentKeys.length, presentKeys.join("-")]);
+  const exitingChildren = [];
+  if (presentChildren !== diffedChildren) {
+    let nextChildren = [...presentChildren];
+    for (let i = 0; i < renderedChildren.length; i++) {
+      const child = renderedChildren[i];
+      const key = getChildKey(child);
+      if (!presentKeys.includes(key)) {
+        nextChildren.splice(i, 0, child);
+        exitingChildren.push(child);
+      }
+    }
+    if (mode === "wait" && exitingChildren.length) {
+      nextChildren = exitingChildren;
+    }
+    setRenderedChildren(onlyElements(nextChildren));
+    setDiffedChildren(presentChildren);
+    return;
+  }
+  if (process.env.NODE_ENV !== "production" && mode === "wait" && renderedChildren.length > 1) {
+    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.`);
+  }
+  const { forceRender } = useContext(LayoutGroupContext);
+  return jsx(Fragment, { children: renderedChildren.map((child) => {
+    const key = getChildKey(child);
+    const isPresent = propagate && !isParentPresent ? false : presentChildren === renderedChildren || presentKeys.includes(key);
+    const onExit = () => {
+      if (exitComplete.has(key)) {
+        exitComplete.set(key, true);
+      } else {
+        return;
+      }
+      let isEveryExitComplete = true;
+      exitComplete.forEach((isExitComplete) => {
+        if (!isExitComplete)
+          isEveryExitComplete = false;
+      });
+      if (isEveryExitComplete) {
+        forceRender === null || forceRender === void 0 ? void 0 : forceRender();
+        setRenderedChildren(pendingPresentChildren.current);
+        propagate && (safeToRemove === null || safeToRemove === void 0 ? void 0 : safeToRemove());
+        onExitComplete && onExitComplete();
+      }
+    };
+    return jsx(PresenceChild, { isPresent, initial: !isInitialRender.current || initial ? void 0 : false, custom: isPresent ? void 0 : custom, presenceAffectsLayout, mode, onExitComplete: isPresent ? void 0 : onExit, children: child }, key);
+  }) });
+};
+const Drawer = (props) => {
+  const { isOpen, ...rest } = props;
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(InnerDrawer, { ...rest }) });
+};
+const InnerDrawer = (props) => {
+  const {
+    ariaLabel,
+    ariaLabelledBy,
+    ariaLabelCloseBtn,
+    children,
+    closeColor = "blueberry",
+    desktopDirection = "left",
+    footerContent,
+    headerClasses,
+    onPrimaryAction,
+    onRequestClose,
+    onSecondaryAction,
+    primaryActionText,
+    secondaryActionText,
+    title,
+    titleHtmlMarkup = "h3",
+    titleId = uuid(),
+    zIndex = ZIndex.OverlayScreen
+  } = props;
+  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledBy, fallbackId: titleId });
+  const overlayRef = useRef(null);
+  const containerRef = useRef(null);
+  const contentRef = useRef(null);
+  const isMobile = useIsMobileBreakpoint();
+  const [scope, animate] = useAnimate();
+  const [isPresent, safeToRemove] = usePresence();
+  const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;
+  const headerStyling = classNames(styles.drawer__header, headerClasses);
+  const hasFooterContent = typeof footerContent !== "undefined" && footerContent || onPrimaryAction || onSecondaryAction;
+  useFocusTrap(containerRef, true);
+  useReturnFocusOnUnmount(containerRef);
+  useOutsideEvent(containerRef, () => {
+    onRequestClose && onRequestClose();
+  });
+  useKeyboardEvent(containerRef, () => onRequestClose && onRequestClose(), [KeyboardEventKey.Escape]);
+  useEffect(() => {
+    var _a;
+    (_a = containerRef.current) == null ? void 0 : _a.focus();
+  }, []);
+  useEffect(() => {
+    if (!overlayRef.current || !containerRef.current) return;
+    if (!isPresent) {
+      closeDrawer();
+      return;
+    }
+    if (isMobile) {
+      animate(containerRef.current, { y: "0" }, { duration: 0.3, ease: "easeInOut" });
+    } else {
+      animate(containerRef.current, { x: "0" }, { duration: 0.3, ease: "easeInOut" });
+    }
+    animate(overlayRef.current, { opacity: 1, pointerEvents: "auto" }, { duration: 0.3, ease: "easeInOut" });
+  }, [isPresent]);
+  useEffect(() => {
+  }, [isPresent]);
+  const closeDrawer = () => {
+    if (!overlayRef.current || !containerRef.current) return;
+    animate(overlayRef.current, { opacity: 0, pointerEvents: "none" }, { duration: 0.3, ease: "easeInOut" });
+    if (isMobile) {
+      animate(
+        containerRef.current,
+        { y: "100%" },
+        {
+          duration: 0.3,
+          ease: "easeInOut",
+          onComplete: () => {
+            safeToRemove && safeToRemove();
+          }
+        }
+      );
+    } else {
+      animate(
+        containerRef.current,
+        { x: desktopDirection === "left" ? "-100%" : "100%" },
+        {
+          duration: 0.3,
+          ease: "easeInOut",
+          onComplete: () => {
+            safeToRemove && safeToRemove();
+          }
+        }
+      );
+    }
+  };
+  const handleCTA = (callback) => {
+    if (callback) {
+      callback();
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: styles.drawer, ref: scope, style: { zIndex }, "data-analyticsid": AnalyticsId.Drawer, children: [
+    /* @__PURE__ */ jsx("div", { className: styles.drawer__overlay, ref: overlayRef, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classNames(styles.drawer__container, {
+          [styles["drawer__container--right"]]: desktopDirection === "right"
+        }),
+        ref: containerRef,
+        role: "dialog",
+        "aria-modal": "true",
+        tabIndex: -1,
+        ...ariaLabelAttributes,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.drawer__container__inner, children: [
+            /* @__PURE__ */ jsxs("div", { className: headerStyling, children: [
+              /* @__PURE__ */ jsx(Title, { id: ariaLabelAttributes == null ? void 0 : ariaLabelAttributes["aria-labelledby"], htmlMarkup: titleHtmlMarkup, appearance: "title3", children: title }),
+              !props.noCloseButton && /* @__PURE__ */ jsx(
+                Close,
+                {
+                  ariaLabel: ariaLabelCloseBtn,
+                  color: closeColor,
+                  onClick: onRequestClose,
+                  className: styles["drawer__header__close-button"]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: styles.drawer__content,
+                tabIndex: contentIsScrollable ? 0 : void 0,
+                role: contentIsScrollable ? "region" : void 0,
+                ...contentIsScrollable ? ariaLabelAttributes : {},
+                ref: contentRef,
+                children
+              }
+            )
+          ] }),
+          hasFooterContent && /* @__PURE__ */ jsx("div", { className: styles.drawer__footer, children: footerContent ? footerContent : /* @__PURE__ */ jsxs(Fragment, { children: [
+            onPrimaryAction && /* @__PURE__ */ jsx(Button, { onClick: () => handleCTA(onPrimaryAction), children: primaryActionText }),
+            onSecondaryAction && /* @__PURE__ */ jsx(Button, { variant: "borderless", onClick: () => handleCTA(onSecondaryAction), children: secondaryActionText })
+          ] }) })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  Drawer as D
+};
+//# sourceMappingURL=Drawer.js.map