@helsenorge/designsystem-react 11.0.0-beta.3 → 11.0.0

package/Panel.js

@@ -0,0 +1,207 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default from "react";
+import classNames from "classnames";
+import { B as Button } from "./Button.js";
+import { I as Icon } from "./Icon.js";
+import { IconSize } from "./constants.js";
+import { P as PanelTitle } from "./PanelTitle.js";
+import ChevronDown from "./components/Icons/ChevronDown.js";
+import ChevronRight from "./components/Icons/ChevronRight.js";
+import ChevronUp from "./components/Icons/ChevronUp.js";
+import styles from "./components/Panel/styles.module.scss";
+var PanelLayout = /* @__PURE__ */ ((PanelLayout2) => {
+  PanelLayout2["vertical"] = "vertical";
+  PanelLayout2["horizontal"] = "horizontal";
+  PanelLayout2["combined"] = "combined";
+  PanelLayout2["bAsRightCol"] = "bAsRightCol";
+  return PanelLayout2;
+})(PanelLayout || {});
+var PanelVariant = /* @__PURE__ */ ((PanelVariant2) => {
+  PanelVariant2["fill"] = "fill";
+  PanelVariant2["line"] = "line";
+  PanelVariant2["outline"] = "outline";
+  return PanelVariant2;
+})(PanelVariant || {});
+var PanelStacking = /* @__PURE__ */ ((PanelStacking2) => {
+  PanelStacking2["default"] = "default";
+  PanelStacking2["bFirst"] = "bFirst";
+  return PanelStacking2;
+})(PanelStacking || {});
+var PanelStatus = /* @__PURE__ */ ((PanelStatus2) => {
+  PanelStatus2["none"] = "none";
+  PanelStatus2["new"] = "new";
+  PanelStatus2["error"] = "error";
+  PanelStatus2["draft"] = "draft";
+  return PanelStatus2;
+})(PanelStatus || {});
+const ExpandButton = ({ onClick, isExpanded }) => {
+  const buttonClassName = classNames(styles["expander__button"], isExpanded && styles["expander__button--expanded"]);
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant: "borderless",
+      textClassName: styles["expander__button__text"],
+      wrapperClassName: buttonClassName,
+      "aria-expanded": isExpanded,
+      onClick,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { svgIcon: isExpanded ? ChevronUp : ChevronDown, size: IconSize.XSmall }),
+        /* @__PURE__ */ jsx("span", { children: isExpanded ? "Skjul detaljer" : "Se detaljer" })
+      ]
+    }
+  );
+};
+const Panel = ({
+  layout = "vertical",
+  variant = "fill",
+  color = "neutral",
+  stacking = "default",
+  testId,
+  children,
+  status = "none",
+  buttonBottomOnClick,
+  buttonBottomText,
+  className
+}) => {
+  const [preContainer, setPreContainer] = React__default.useState([]);
+  const [title, setTitle] = React__default.useState([]);
+  const [content, setContent] = React__default.useState([]);
+  const [expandableContent, setExpandableContent] = React__default.useState([]);
+  const [hasIcon, setHasIcon] = React__default.useState(false);
+  const [isExpanded, setIsExpanded] = React__default.useState(false);
+  const panelRef = React__default.useRef(null);
+  const expandedContentRef = React__default.useRef(null);
+  const defaultScroll = 100;
+  React__default.useEffect(() => {
+    let localHasIcon = false;
+    const newPreContainer = [];
+    const newTitle = [];
+    const newContent = [];
+    const newExpandableContent = [];
+    React__default.Children.forEach(children, (child) => {
+      if (React__default.isValidElement(child)) {
+        if (child.type === PreContainer) {
+          newPreContainer.push(child);
+        } else if (child.type === PanelTitle) {
+          newTitle.push(child);
+          if (child.props.icon) {
+            localHasIcon = true;
+          }
+        } else if (child.type === A || child.type === B || child.type === C) {
+          newContent.push(child);
+        } else if (child.type === ExpandedContent) {
+          newExpandableContent.push(child);
+        }
+      }
+    });
+    setPreContainer(newPreContainer);
+    setTitle(newTitle);
+    setContent(newContent);
+    setExpandableContent(newExpandableContent);
+    setHasIcon(localHasIcon);
+  }, [children]);
+  React__default.useEffect(() => {
+    if (isExpanded) {
+      if (panelRef.current && expandedContentRef.current) {
+        const panelRect = panelRef.current.getBoundingClientRect();
+        const expandedContentRect = expandedContentRef.current.getBoundingClientRect();
+        const scrollAmount = Math.min(defaultScroll, panelRect.top - 20);
+        if (scrollAmount > 0 && expandedContentRect.bottom > window.innerHeight) {
+          const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+          if (prefersReducedMotion) {
+            return;
+          }
+          window.scrollBy({
+            top: scrollAmount,
+            behavior: "smooth"
+          });
+        }
+      }
+    }
+  }, [isExpanded]);
+  const colorScheme = variant === "fill" ? color : "white";
+  const outerClassnames = classNames(className, {
+    [styles["panel__border--outline--outer"]]: variant === "outline",
+    [styles["panel__border--line"]]: variant === "line",
+    [styles["panel__border--fill--neutral"]]: variant === "fill" && colorScheme === "neutral"
+  });
+  const panelClassnames = classNames(styles["panel"], styles[`panel--${colorScheme}`], styles["panel--status"], {
+    [styles["panel--line"]]: variant === "line",
+    [styles["panel--new"]]: status === "new",
+    [styles["panel--draft"]]: status === "draft",
+    [styles["panel--error"]]: status === "error",
+    [styles["panel--icon"]]: hasIcon
+  });
+  const contentContainerLayout = classNames(styles["panel__content"], styles[`panel__content--${layout}`], {
+    [styles[`panel__content--b-first`]]: stacking === "bFirst"
+    /* bFirst */
+  });
+  const expanderBorderLayout = classNames({
+    [styles["panel__expander__border--expanded"]]: isExpanded && status === "none",
+    [styles[`panel__expander__border--not-expanded--${colorScheme}`]]: !isExpanded && status === "none",
+    [styles[`panel__expander__border--not-expanded--line`]]: !isExpanded && status === "none" && variant === "line"
+    /* line */
+  });
+  return expandableContent.length > 0 ? /* @__PURE__ */ jsx("div", { className: outerClassnames, children: /* @__PURE__ */ jsx("div", { className: classNames({
+    [styles["panel__border--outline--inner"]]: variant === "outline"
+    /* outline */
+  }), children: /* @__PURE__ */ jsx("div", { className: expanderBorderLayout, children: /* @__PURE__ */ jsxs("div", { className: panelClassnames, "data-testid": testId, ref: panelRef, children: [
+    preContainer,
+    title,
+    /* @__PURE__ */ jsx("div", { className: contentContainerLayout, children: content }),
+    /* @__PURE__ */ jsx(ExpandButton, { onClick: () => setIsExpanded(!isExpanded), isExpanded }),
+    isExpanded && /* @__PURE__ */ jsxs("div", { ref: expandedContentRef, children: [
+      /* @__PURE__ */ jsx("div", { className: styles["panel__expander__separator"] }),
+      expandableContent
+    ] })
+  ] }) }) }) }) : /* @__PURE__ */ jsx("div", { className: outerClassnames, children: /* @__PURE__ */ jsx("div", { className: classNames({
+    [styles["panel__border--outline--inner"]]: variant === "outline"
+    /* outline */
+  }), children: /* @__PURE__ */ jsxs("div", { className: panelClassnames, "data-testid": testId, ref: panelRef, children: [
+    preContainer,
+    title,
+    /* @__PURE__ */ jsx("div", { className: contentContainerLayout, children: content }),
+    buttonBottomText && buttonBottomOnClick && /* @__PURE__ */ jsx("div", { className: styles["panel__button-bottom"], children: /* @__PURE__ */ jsxs(Button, { variant: "borderless", type: "button", size: "medium", onClick: buttonBottomOnClick, children: [
+      buttonBottomText,
+      /* @__PURE__ */ jsx(Icon, { svgIcon: ChevronRight, size: IconSize.XSmall })
+    ] }) })
+  ] }) }) });
+};
+const PreContainer = ({ children }) => {
+  return /* @__PURE__ */ jsx("div", { className: styles["panel__pre-container"], children });
+};
+const A = ({ children }) => {
+  const styling = classNames(styles["panel__content__item"], styles["panel__content__item--a"]);
+  return /* @__PURE__ */ jsx("div", { className: styling, children });
+};
+const B = ({ children }) => {
+  const styling = classNames(styles["panel__content__item"], styles["panel__content__item--b"]);
+  return /* @__PURE__ */ jsx("div", { className: styling, children });
+};
+const C = ({ children }) => {
+  const styling = classNames(styles["panel__content__item"], styles["panel__content__item--c"]);
+  return /* @__PURE__ */ jsx("div", { className: styling, children });
+};
+const ExpandedContent = ({ children }) => {
+  const styling = classNames(styles["panel__expander__content"]);
+  return /* @__PURE__ */ jsx("div", { className: styling, children });
+};
+Panel.PreContainer = PreContainer;
+Panel.Title = PanelTitle;
+Panel.A = A;
+Panel.B = B;
+Panel.C = C;
+Panel.ExpandedContent = ExpandedContent;
+export {
+  A,
+  B,
+  C,
+  ExpandedContent as E,
+  Panel as P,
+  PanelLayout as a,
+  PanelVariant as b,
+  PanelStacking as c,
+  PanelStatus as d,
+  PreContainer as e
+};
+//# sourceMappingURL=Panel.js.map

package/Panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.js","sources":["../src/components/Panel/Panel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { PaletteNames } from '../../theme/palette';\nimport Button from '../Button';\nimport Icon, { IconSize } from '../Icon';\nimport PanelTitle, { PanelTitleProps } from './PanelTitle';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronRight from '../Icons/ChevronRight';\nimport ChevronUp from '../Icons/ChevronUp';\n\nimport styles from './styles.module.scss';\n\nexport enum PanelLayout {\n  vertical = 'vertical',\n  horizontal = 'horizontal',\n  combined = 'combined',\n  bAsRightCol = 'bAsRightCol',\n}\n\nexport type PanelColors = Extract<PaletteNames, 'white' | 'neutral'>;\n\nexport enum PanelVariant {\n  fill = 'fill',\n  line = 'line',\n  outline = 'outline',\n}\n\nexport enum PanelStacking {\n  default = 'default',\n  bFirst = 'bFirst',\n}\n\nexport enum PanelStatus {\n  none = 'none',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport interface PanelProps {\n  /** Sets the text on the bottom call to action button */\n  buttonBottomText?: string;\n  /** Sets the action on the bottom call to action button */\n  buttonBottomOnClick?: () => void;\n  /** Sets the layout and order of the content boxes */\n  layout?: PanelLayout;\n  /** Sets the visual variant of panel */\n  variant?: PanelVariant;\n  /** Sets the color for panel if it has variant fill */\n  color?: PanelColors;\n  /** Sets classes on the outermost container of the panel */\n  className?: string;\n  /** Sets the stacking order of the content boxes */\n  stacking?: PanelStacking;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Children elements to be rendered inside the panel */\n  children?: React.ReactNode;\n  /** Displays a status on the left side: default normal */\n  status?: PanelStatus;\n}\n\nconst ExpandButton = ({ onClick, isExpanded }: { onClick: () => void; isExpanded: boolean | undefined }): React.JSX.Element => {\n  const buttonClassName = classNames(styles['expander__button'], isExpanded && styles['expander__button--expanded']);\n\n  return (\n    <Button\n      variant=\"borderless\"\n      textClassName={styles['expander__button__text']}\n      wrapperClassName={buttonClassName}\n      aria-expanded={isExpanded}\n      onClick={onClick}\n    >\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n      {/* @todo: språk på knapp */}\n      <span>{isExpanded ? 'Skjul detaljer' : 'Se detaljer'}</span>\n    </Button>\n  );\n};\n\nconst Panel: React.FC<PanelProps> & {\n  PreContainer: React.FC<ContentProps>;\n  Title: React.FC<PanelTitleProps>;\n  A: React.FC<ContentProps>;\n  B: React.FC<ContentProps>;\n  C: React.FC<ContentProps>;\n  ExpandedContent: React.FC<ContentProps>;\n} = ({\n  layout = PanelLayout.vertical,\n  variant = PanelVariant.fill,\n  color = 'neutral',\n  stacking = PanelStacking.default,\n  testId,\n  children,\n  status = PanelStatus.none,\n  buttonBottomOnClick,\n  buttonBottomText,\n  className,\n}: PanelProps) => {\n  const [preContainer, setPreContainer] = React.useState<React.ReactNode[]>([]);\n  const [title, setTitle] = React.useState<React.ReactNode[]>([]);\n  const [content, setContent] = React.useState<React.ReactNode[]>([]);\n  const [expandableContent, setExpandableContent] = React.useState<React.ReactNode[]>([]);\n  const [hasIcon, setHasIcon] = React.useState(false);\n  const [isExpanded, setIsExpanded] = React.useState(false);\n  const panelRef = React.useRef<HTMLDivElement>(null);\n  const expandedContentRef = React.useRef<HTMLDivElement>(null);\n  const defaultScroll = 100;\n\n  React.useEffect(() => {\n    let localHasIcon = false;\n    const newPreContainer: React.ReactNode[] = [];\n    const newTitle: React.ReactNode[] = [];\n    const newContent: React.ReactNode[] = [];\n    const newExpandableContent: React.ReactNode[] = [];\n\n    React.Children.forEach(children, child => {\n      if (React.isValidElement(child)) {\n        if (child.type === PreContainer) {\n          newPreContainer.push(child);\n        } else if (child.type === PanelTitle) {\n          newTitle.push(child);\n          if (child.props.icon) {\n            localHasIcon = true;\n          }\n        } else if (child.type === A || child.type === B || child.type === C) {\n          newContent.push(child);\n        } else if (child.type === ExpandedContent) {\n          newExpandableContent.push(child);\n        }\n      }\n    });\n\n    setPreContainer(newPreContainer);\n    setTitle(newTitle);\n    setContent(newContent);\n    setExpandableContent(newExpandableContent);\n    setHasIcon(localHasIcon);\n  }, [children]);\n\n  React.useEffect(() => {\n    // Scroller oppover når expanded content åpnes\n    if (isExpanded) {\n      if (panelRef.current && expandedContentRef.current) {\n        const panelRect = panelRef.current.getBoundingClientRect();\n        const expandedContentRect = expandedContentRef.current.getBoundingClientRect();\n\n        const scrollAmount = Math.min(defaultScroll, panelRect.top - 20);\n\n        // Scroller kun oppover, og kun dersom expandedContent havner utenfor skjermen når åpnet\n        if (scrollAmount > 0 && expandedContentRect.bottom > window.innerHeight) {\n          const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n          if (prefersReducedMotion) {\n            return;\n          }\n          window.scrollBy({\n            top: scrollAmount,\n            behavior: 'smooth',\n          });\n        }\n      }\n    }\n  }, [isExpanded]);\n\n  const colorScheme = variant === PanelVariant.fill ? color : 'white';\n\n  const outerClassnames = classNames(className, {\n    [styles['panel__border--outline--outer']]: variant === PanelVariant.outline,\n    [styles['panel__border--line']]: variant === PanelVariant.line,\n    [styles['panel__border--fill--neutral']]: variant === PanelVariant.fill && colorScheme === 'neutral',\n  });\n  const panelClassnames = classNames(styles['panel'], styles[`panel--${colorScheme}`], styles['panel--status'], {\n    [styles['panel--line']]: variant === PanelVariant.line,\n    [styles['panel--new']]: status === PanelStatus.new,\n    [styles['panel--draft']]: status === PanelStatus.draft,\n    [styles['panel--error']]: status === PanelStatus.error,\n    [styles['panel--icon']]: hasIcon,\n  });\n  const contentContainerLayout = classNames(styles['panel__content'], styles[`panel__content--${layout}`], {\n    [styles[`panel__content--b-first`]]: stacking === PanelStacking.bFirst,\n  });\n  const expanderBorderLayout = classNames({\n    [styles['panel__expander__border--expanded']]: isExpanded && status === PanelStatus.none,\n    [styles[`panel__expander__border--not-expanded--${colorScheme}`]]: !isExpanded && status === PanelStatus.none,\n    [styles[`panel__expander__border--not-expanded--line`]]: !isExpanded && status === PanelStatus.none && variant === PanelVariant.line,\n  });\n\n  return expandableContent.length > 0 ? (\n    <div className={outerClassnames}>\n      <div className={classNames({ [styles['panel__border--outline--inner']]: variant === PanelVariant.outline })}>\n        <div className={expanderBorderLayout}>\n          <div className={panelClassnames} data-testid={testId} ref={panelRef}>\n            {preContainer}\n            {title}\n            <div className={contentContainerLayout}>{content}</div>\n            <ExpandButton onClick={() => setIsExpanded(!isExpanded)} isExpanded={isExpanded} />\n            {isExpanded && (\n              <div ref={expandedContentRef}>\n                <div className={styles['panel__expander__separator']} />\n                {expandableContent}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  ) : (\n    <div className={outerClassnames}>\n      <div className={classNames({ [styles['panel__border--outline--inner']]: variant === PanelVariant.outline })}>\n        <div className={panelClassnames} data-testid={testId} ref={panelRef}>\n          {preContainer}\n          {title}\n          <div className={contentContainerLayout}>{content}</div>\n          {buttonBottomText && buttonBottomOnClick && (\n            <div className={styles['panel__button-bottom']}>\n              <Button variant=\"borderless\" type=\"button\" size=\"medium\" onClick={buttonBottomOnClick}>\n                {buttonBottomText}\n                <Icon svgIcon={ChevronRight} size={IconSize.XSmall} />\n              </Button>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport interface ContentProps {\n  /** Children elements to be rendered inside the content box */\n  children?: React.ReactNode;\n}\n\nexport const PreContainer: React.FC<ContentProps> = ({ children }) => {\n  return <div className={styles['panel__pre-container']}>{children}</div>;\n};\n\nexport const A: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__content__item'], styles['panel__content__item--a']);\n  return <div className={styling}>{children}</div>;\n};\n\nexport const B: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__content__item'], styles['panel__content__item--b']);\n  return <div className={styling}>{children}</div>;\n};\n\nexport const C: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__content__item'], styles['panel__content__item--c']);\n  return <div className={styling}>{children}</div>;\n};\n\nexport const ExpandedContent: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__expander__content']);\n  return <div className={styling}>{children}</div>;\n};\n\nPanel.PreContainer = PreContainer;\nPanel.Title = PanelTitle;\nPanel.A = A;\nPanel.B = B;\nPanel.C = C;\nPanel.ExpandedContent = ExpandedContent;\n\nexport default Panel;\n"],"names":["PanelLayout","PanelVariant","PanelStacking","PanelStatus","React"],"mappings":"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"}

package/PanelTitle.js

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { T as Title } from "./Title.js";
+import styles from "./components/Panel/PanelTitle/styles.module.scss";
+const PanelTitle = (props) => {
+  const { testId, icon, badge, title, titleMarkup = "h3" } = props;
+  return /* @__PURE__ */ jsxs("div", { className: classNames(styles["paneltitle"], { [styles["paneltitle--has-icon"]]: icon }), "data-testid": testId, children: [
+    icon && /* @__PURE__ */ jsx("div", { className: styles["paneltitle__icon"], children: icon }),
+    title && /* @__PURE__ */ jsxs("div", { className: styles["paneltitle__title"], children: [
+      /* @__PURE__ */ jsx(Title, { appearance: "title3", htmlMarkup: titleMarkup, children: title }),
+      badge && /* @__PURE__ */ jsx("div", { className: styles["paneltitle__badge"], children: badge })
+    ] })
+  ] });
+};
+export {
+  PanelTitle as P
+};
+//# sourceMappingURL=PanelTitle.js.map

package/PanelTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelTitle.js","sources":["../src/components/Panel/PanelTitle/PanelTitle.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Title from '../../Title';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelTitleProps {\n  /** Badge displayed in title */\n  badge?: React.ReactNode;\n  /** Icon displayed in title. Only IconSize Small is supported */\n  icon?: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Title text */\n  title: string;\n  /** Title HTML markup */\n  titleMarkup?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n}\n\nconst PanelTitle: React.FC<PanelTitleProps> = (props: PanelTitleProps) => {\n  const { testId, icon, badge, title, titleMarkup = 'h3' } = props;\n  return (\n    <div className={classNames(styles['paneltitle'], { [styles['paneltitle--has-icon']]: icon })} data-testid={testId}>\n      {icon && <div className={styles['paneltitle__icon']}>{icon}</div>}\n      {title && (\n        <div className={styles['paneltitle__title']}>\n          <Title appearance=\"title3\" htmlMarkup={titleMarkup}>\n            {title}\n          </Title>\n          {badge && <div className={styles['paneltitle__badge']}>{badge}</div>}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default PanelTitle;\n"],"names":[],"mappings":";;;;AAqBM,MAAA,aAAwC,CAAC,UAA2B;AACxE,QAAM,EAAE,QAAQ,MAAM,OAAO,OAAO,cAAc,SAAS;AAC3D,8BACG,OAAI,EAAA,WAAW,WAAW,OAAO,YAAY,GAAG,EAAE,CAAC,OAAO,sBAAsB,CAAC,GAAG,MAAM,GAAG,eAAa,QACxG,UAAA;AAAA,IAAA,4BAAS,OAAI,EAAA,WAAW,OAAO,kBAAkB,GAAI,UAAK,MAAA;AAAA,IAC1D,SACE,qBAAA,OAAA,EAAI,WAAW,OAAO,mBAAmB,GACxC,UAAA;AAAA,MAAA,oBAAC,OAAM,EAAA,YAAW,UAAS,YAAY,aACpC,UACH,OAAA;AAAA,MACC,SAAU,oBAAA,OAAA,EAAI,WAAW,OAAO,mBAAmB,GAAI,UAAM,MAAA,CAAA;AAAA,IAAA,EAChE,CAAA;AAAA,EAAA,GAEJ;AAEJ;"}

package/StatusDot.js

@@ -81,7 +81,9 @@ const StatusDotIcon = ({ onColor, variant = "info" }) => {
 const StatusDot = (props) => {
   const { id, onColor = StatusDotOnColor.onwhite, variant = "info", text, className, testId } = props;
   const statusDotClasses = classNames(styles["statusdot"], className);
-  const labelClasses = classNames(onColor === StatusDotOnColor.ondark && styles["statusdot__label--on-dark"]);
+  const labelClasses = classNames(styles["statusdot__label"], {
+    [styles["statusdot__label--on-dark"]]: onColor === StatusDotOnColor.ondark
+  });
   return /* @__PURE__ */ jsxs("span", { id, className: statusDotClasses, "data-testid": testId, "data-analyticsid": AnalyticsId.StatusDot, children: [
     /* @__PURE__ */ jsx("span", { className: styles["statusdot__dot"], "data-testid": testId + "-dot", children: /* @__PURE__ */ jsx(StatusDotIcon, { onColor, variant }) }),
     /* @__PURE__ */ jsx("span", { className: labelClasses, children: text })

package/StatusDot.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.js","sources":["../src/components/StatusDot/StatusDot.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../..';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport { LazyIcon } from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport enum StatusDotOnColor {\n  onwhite = FormOnColor.onwhite,\n  ondark = FormOnColor.ondark,\n}\n\nexport enum StatusDotVariant {\n  success = 'success',\n  inprocess = 'inprocess',\n  exception = 'exception',\n  unknown = 'unknown',\n  inspected = 'inspected',\n  cancelled = 'cancelled',\n  alert = 'alert',\n  transparent = 'transparent',\n  info = 'info',\n  group = 'group',\n  recurring = 'recurring',\n  noaccess = 'noaccess',\n  draft = 'draft',\n  hidden = 'hidden',\n  login = 'login',\n  attachment = 'attachment',\n}\n\nexport interface StatusDotIconProps {\n  /** Defines the color of the icon */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** The variant defines style formatting and what icon to use */\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ onColor, variant = 'info' }) => {\n  const color = onColor === StatusDotOnColor.ondark ? getColor('white') : getColor('black');\n  const iconProps = {\n    color,\n    size: IconSize.XXSmall,\n    onColor,\n    className: classNames({\n      [styles[`statusdot__dot--${variant}`]]: typeof variant !== 'undefined',\n      [styles['statusdot__dot--on-dark']]: onColor === StatusDotOnColor.ondark,\n    }),\n  };\n\n  switch (variant) {\n    case StatusDotVariant.success:\n      return <LazyIcon {...iconProps} iconName={'DotSuccess'} />;\n    case StatusDotVariant.inprocess:\n      return <LazyIcon {...iconProps} iconName={'DotHalfDisc'} />;\n    case StatusDotVariant.exception:\n      return <LazyIcon {...iconProps} iconName={'DotWarningTriangle'} />;\n    case StatusDotVariant.unknown:\n      return <LazyIcon {...iconProps} iconName={'DotQuestionMark'} />;\n    case StatusDotVariant.inspected:\n      return <LazyIcon {...iconProps} iconName={'DotLookingGlass'} />;\n    case StatusDotVariant.cancelled:\n      return <LazyIcon {...iconProps} iconName={'DotCancelled'} />;\n    case StatusDotVariant.alert:\n      return <LazyIcon {...iconProps} iconName={'DotAlert'} />;\n    case StatusDotVariant.transparent:\n      return <LazyIcon {...iconProps} iconName={'DotTransparent'} />;\n    case StatusDotVariant.info:\n      return <LazyIcon {...iconProps} iconName={'DotInfo'} />;\n    case StatusDotVariant.group:\n      return <LazyIcon {...iconProps} iconName={'Group'} />;\n    case StatusDotVariant.recurring:\n      return <LazyIcon {...iconProps} iconName={'Change'} />;\n    case StatusDotVariant.noaccess:\n      return <LazyIcon {...iconProps} iconName={'NoAccess'} />;\n    case StatusDotVariant.draft:\n      return <LazyIcon {...iconProps} iconName={'Pencil'} />;\n    case StatusDotVariant.hidden:\n      return <LazyIcon {...iconProps} iconName={'NoEye'} />;\n    case StatusDotVariant.login:\n      return <LazyIcon {...iconProps} iconName={'Login'} />;\n    case StatusDotVariant.attachment:\n      return <LazyIcon {...iconProps} iconName={'Attachment'} />;\n  }\n\n  return null;\n};\n\nexport interface StatusDotProps {\n  /** id that is placed on the wrapper */\n  id?: string;\n  /** Defines the color mode, onwhite, ondark etc. */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst StatusDot: React.FC<StatusDotProps> = props => {\n  const { id, onColor = StatusDotOnColor.onwhite, variant = StatusDotVariant.info, text, className, testId } = props;\n\n  const statusDotClasses = classNames(styles['statusdot'], className);\n  const labelClasses = classNames(onColor === StatusDotOnColor.ondark && styles['statusdot__label--on-dark']);\n\n  return (\n    <span id={id} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={styles['statusdot__dot']} data-testid={testId + '-dot'}>\n        <StatusDotIcon onColor={onColor} variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </span>\n  );\n};\n\nexport default StatusDot;\n"],"names":["StatusDotOnColor","StatusDotVariant"],"mappings":"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"}
+{"version":3,"file":"StatusDot.js","sources":["../src/components/StatusDot/StatusDot.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../..';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport { LazyIcon } from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport enum StatusDotOnColor {\n  onwhite = FormOnColor.onwhite,\n  ondark = FormOnColor.ondark,\n}\n\nexport enum StatusDotVariant {\n  success = 'success',\n  inprocess = 'inprocess',\n  exception = 'exception',\n  unknown = 'unknown',\n  inspected = 'inspected',\n  cancelled = 'cancelled',\n  alert = 'alert',\n  transparent = 'transparent',\n  info = 'info',\n  group = 'group',\n  recurring = 'recurring',\n  noaccess = 'noaccess',\n  draft = 'draft',\n  hidden = 'hidden',\n  login = 'login',\n  attachment = 'attachment',\n}\n\nexport interface StatusDotIconProps {\n  /** Defines the color of the icon */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** The variant defines style formatting and what icon to use */\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ onColor, variant = 'info' }) => {\n  const color = onColor === StatusDotOnColor.ondark ? getColor('white') : getColor('black');\n  const iconProps = {\n    color,\n    size: IconSize.XXSmall,\n    onColor,\n    className: classNames({\n      [styles[`statusdot__dot--${variant}`]]: typeof variant !== 'undefined',\n      [styles['statusdot__dot--on-dark']]: onColor === StatusDotOnColor.ondark,\n    }),\n  };\n\n  switch (variant) {\n    case StatusDotVariant.success:\n      return <LazyIcon {...iconProps} iconName={'DotSuccess'} />;\n    case StatusDotVariant.inprocess:\n      return <LazyIcon {...iconProps} iconName={'DotHalfDisc'} />;\n    case StatusDotVariant.exception:\n      return <LazyIcon {...iconProps} iconName={'DotWarningTriangle'} />;\n    case StatusDotVariant.unknown:\n      return <LazyIcon {...iconProps} iconName={'DotQuestionMark'} />;\n    case StatusDotVariant.inspected:\n      return <LazyIcon {...iconProps} iconName={'DotLookingGlass'} />;\n    case StatusDotVariant.cancelled:\n      return <LazyIcon {...iconProps} iconName={'DotCancelled'} />;\n    case StatusDotVariant.alert:\n      return <LazyIcon {...iconProps} iconName={'DotAlert'} />;\n    case StatusDotVariant.transparent:\n      return <LazyIcon {...iconProps} iconName={'DotTransparent'} />;\n    case StatusDotVariant.info:\n      return <LazyIcon {...iconProps} iconName={'DotInfo'} />;\n    case StatusDotVariant.group:\n      return <LazyIcon {...iconProps} iconName={'Group'} />;\n    case StatusDotVariant.recurring:\n      return <LazyIcon {...iconProps} iconName={'Change'} />;\n    case StatusDotVariant.noaccess:\n      return <LazyIcon {...iconProps} iconName={'NoAccess'} />;\n    case StatusDotVariant.draft:\n      return <LazyIcon {...iconProps} iconName={'Pencil'} />;\n    case StatusDotVariant.hidden:\n      return <LazyIcon {...iconProps} iconName={'NoEye'} />;\n    case StatusDotVariant.login:\n      return <LazyIcon {...iconProps} iconName={'Login'} />;\n    case StatusDotVariant.attachment:\n      return <LazyIcon {...iconProps} iconName={'Attachment'} />;\n  }\n\n  return null;\n};\n\nexport interface StatusDotProps {\n  /** id that is placed on the wrapper */\n  id?: string;\n  /** Defines the color mode, onwhite, ondark etc. */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst StatusDot: React.FC<StatusDotProps> = props => {\n  const { id, onColor = StatusDotOnColor.onwhite, variant = StatusDotVariant.info, text, className, testId } = props;\n\n  const statusDotClasses = classNames(styles['statusdot'], className);\n  const labelClasses = classNames(styles['statusdot__label'], {\n    [styles['statusdot__label--on-dark']]: onColor === StatusDotOnColor.ondark,\n  });\n\n  return (\n    <span id={id} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={styles['statusdot__dot']} data-testid={testId + '-dot'}>\n        <StatusDotIcon onColor={onColor} variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </span>\n  );\n};\n\nexport default StatusDot;\n"],"names":["StatusDotOnColor","StatusDotVariant"],"mappings":"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"}

package/components/Drawer/index.js

@@ -236,7 +236,7 @@ const InnerDrawer = (props) => {
     title,
     titleHtmlMarkup = "h3",
     titleId = uuid(),
-    zIndex = ZIndex.Modal
+    zIndex = ZIndex.OverlayScreen
   } = props;
   const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledBy, fallbackId: titleId });
   const overlayRef = useRef(null);

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.Modal,\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 { 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]}

package/components/Dropdown/Dropdown.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { HNDesignsystemDropdown } from '../../resources/Resources';
 export declare enum DropdownOnColor {
     onwhite = "onwhite",
     ongrey = "ongrey",
@@ -12,7 +13,7 @@ export interface DropdownProps {
     placeholder: string;
     /** Sets the dropdown content */
     children: React.ReactNode;
-    /** Close button text */
+    /** @deprecated Close button text */
     closeText?: string;
     /** Minimum width for the dropdown in pixels. Does not affect trigger button */
     dropdownMinWidth?: number;
@@ -34,6 +35,8 @@ export interface DropdownProps {
     testId?: string;
     /** Overrides the default z-index of the DropDownContent */
     zIndex?: number;
+    /** Resources for component */
+    resources?: Partial<HNDesignsystemDropdown>;
 }
 declare const Dropdown: React.FC<DropdownProps>;
 export default Dropdown;

package/components/Dropdown/index.js

@@ -8,8 +8,9 @@ import { useToggle } from "../../hooks/useToggle.js";
 import { useKeyboardEvent } from "../../hooks/useKeyboardEvent.js";
 import { useOutsideEvent } from "../../hooks/useOutsideEvent.js";
 import { useUuid } from "../../hooks/useUuid.js";
-import { ZIndex, KeyboardEventKey, AnalyticsId, IconSize } from "../../constants.js";
+import { LanguageLocales, ZIndex, KeyboardEventKey, AnalyticsId, IconSize } from "../../constants.js";
 import { isComponent } from "../../utils/component.js";
+import { useLanguage } from "../../utils/language.js";
 import { mergeRefs } from "../../utils/refs.js";
 import { B as Button } from "../../Button.js";
 import { C as Checkbox } from "../../Checkbox.js";
@@ -17,6 +18,23 @@ import { I as Icon } from "../../Icon.js";
 import PlusSmall from "../Icons/PlusSmall.js";
 import { R as RadioButton } from "../../RadioButton.js";
 import styles from "./styles.module.scss";
+const closeText$1 = "Close";
+const enGB = {
+  closeText: closeText$1
+};
+const closeText = "Lukk";
+const nbNO = {
+  closeText
+};
+const getResources = (language) => {
+  switch (language) {
+    case LanguageLocales.ENGLISH:
+      return enGB;
+    case LanguageLocales.NORWEGIAN:
+    default:
+      return nbNO;
+  }
+};
 var DropdownOnColor = /* @__PURE__ */ ((DropdownOnColor2) => {
   DropdownOnColor2["onwhite"] = "onwhite";
   DropdownOnColor2["ongrey"] = "ongrey";
@@ -28,7 +46,6 @@ const Dropdown = (props) => {
   const {
     label,
     placeholder,
-    closeText = "Lukk",
     noCloseButton = false,
     onToggle,
     dropdownMinWidth,
@@ -39,7 +56,8 @@ const Dropdown = (props) => {
     fluid = false,
     testId,
     disabled,
-    zIndex = ZIndex.PopOver
+    zIndex = ZIndex.PopOver,
+    resources
   } = props;
   const dropdownRef = useRef(null);
   const optionsRef = useRef(null);
@@ -51,6 +69,13 @@ const Dropdown = (props) => {
   const labelId = useUuid();
   const toggleLabelId = useUuid();
   const optionIdPrefix = useUuid();
+  const { language } = useLanguage(LanguageLocales.NORWEGIAN);
+  const defaultResources = getResources(language);
+  const mergedResources = {
+    ...defaultResources,
+    ...resources,
+    closeText: props.closeText ?? (resources == null ? void 0 : resources.closeText) ?? defaultResources.closeText
+  };
   const handleOpen = (isKeyboard) => {
     openedByKeyboard.current = isKeyboard;
     toggleIsOpen();
@@ -76,13 +101,14 @@ const Dropdown = (props) => {
     if (!inputRefList.current) {
       return;
     }
+    if (event.key === KeyboardEventKey.Escape) {
+      if (isOpen) handleClose();
+      return;
+    }
     if (!isOpen) {
       handleOpen(true);
       event.preventDefault();
       return;
-    } else if (event.key === KeyboardEventKey.Escape && isOpen) {
-      handleClose();
-      return;
     }
     const index = inputRefList.current.findIndex((x) => x.current === event.target);
     let nextIndex = index;
@@ -136,7 +162,7 @@ const Dropdown = (props) => {
       "button",
       {
         type: "button",
-        onClick: () => !isOpen && handleOpen(false),
+        onClick: () => handleOpen(false),
         className: toggleClasses,
         ref: buttonRef,
         "data-testid": testId,
@@ -173,7 +199,7 @@ const Dropdown = (props) => {
           children: renderChildren
         }
       ),
-      !noCloseButton && /* @__PURE__ */ jsx("div", { className: styles.dropdown__close, children: /* @__PURE__ */ jsx(Button, { onClick: handleClose, "aria-expanded": isOpen, children: closeText }) })
+      !noCloseButton && /* @__PURE__ */ jsx("div", { className: styles.dropdown__close, children: /* @__PURE__ */ jsx(Button, { onClick: handleClose, "aria-expanded": isOpen, children: mergedResources.closeText }) })
     ] })
   ] });
 };