@helsenorge/designsystem-react 7.0.0 → 7.1.0

package/components/Dropdown/Dropdown.js

@@ -1,56 +1,55 @@
-import r, { useRef as g, useState as X } from "react";
+import r, { useRef as f, useState as X } from "react";
 import k from "classnames";
 import { theme as C } from "../../theme/index.js";
 import "../../hooks/useBreakpoint.js";
 import { useHover as Z } from "../../hooks/useHover.js";
-import { useSize as j } from "../../hooks/useSize.js";
-import { useToggle as q } from "../../hooks/useToggle.js";
-import { useKeyboardEvent as F } from "../../hooks/useKeyboardEvent.js";
-import { useOutsideEvent as G } from "../../hooks/useOutsideEvent.js";
-import { useUuid as _ } from "../../hooks/useUuid.js";
-import { ZIndex as J, KeyboardEventKey as n, AnalyticsId as Q, IconSize as Y } from "../../constants.js";
-import { mergeRefs as M } from "../../utils/refs.js";
-import ee from "../Button/Button.js";
-import { Icon as oe } from "../Icon/Icon.js";
-import re from "../Icons/PlusSmall.js";
-import o from "./styles.module.scss";
-var te = /* @__PURE__ */ ((d) => (d.onwhite = "onwhite", d.ongrey = "ongrey", d.onblueberry = "onblueberry", d.oncherry = "oncherry", d))(te || {});
-const ne = (d) => {
+import { useToggle as j } from "../../hooks/useToggle.js";
+import { useKeyboardEvent as q } from "../../hooks/useKeyboardEvent.js";
+import { useOutsideEvent as F } from "../../hooks/useOutsideEvent.js";
+import { useUuid as g } from "../../hooks/useUuid.js";
+import { ZIndex as G, KeyboardEventKey as n, AnalyticsId as J, IconSize as Q } from "../../constants.js";
+import { mergeRefs as W } from "../../utils/refs.js";
+import Y from "../Button/Button.js";
+import { Icon as M } from "../Icon/Icon.js";
+import ee from "../Icons/PlusSmall.js";
+import o from "../Dropdown/styles.module.scss";
+var oe = /* @__PURE__ */ ((d) => (d.onwhite = "onwhite", d.ongrey = "ongrey", d.onblueberry = "onblueberry", d.oncherry = "oncherry", d))(oe || {});
+const re = (d) => {
   const {
     label: R,
-    placeholder: $,
-    closeText: A = "Lukk",
-    noCloseButton: H = !1,
-    onToggle: K,
-    open: O = !1,
-    children: y,
+    placeholder: A,
+    closeText: H = "Lukk",
+    noCloseButton: K = !1,
+    onToggle: O,
+    open: $ = !1,
+    children: _,
     mode: c = "onwhite",
     transparent: S = !1,
-    fluid: b = !1,
+    fluid: y = !1,
     testId: z,
     disabled: i,
-    zIndex: D = J.PopOver
-  } = d, p = g(null), w = g(null), { hoverRef: m, isHovered: L } = Z(), { value: l, toggleValue: h } = q(!i && O, K), a = g(r.Children.map(y, () => r.createRef())), [u, P] = X(), { width: T } = j(m) || {}, E = _(), I = _(), x = _(), v = () => {
+    zIndex: D = G.PopOver
+  } = d, p = f(null), b = f(null), { hoverRef: w, isHovered: L } = Z(), { value: l, toggleValue: h } = j(!i && $, O), a = f(r.Children.map(_, () => r.createRef())), [u, P] = X(), E = g(), I = g(), x = g(), v = () => {
     var e;
-    h(), (e = w.current) == null || e.focus();
-  }, f = () => {
+    h(), (e = b.current) == null || e.focus();
+  }, m = () => {
     var e;
-    h(), (e = m.current) == null || e.focus();
+    h(), (e = w.current) == null || e.focus();
   };
-  F(p, (e) => {
+  q(p, (e) => {
     var N;
     if (e.preventDefault(), !a.current)
       return;
     if (l) {
       if (e.key === n.Escape && l) {
-        f();
+        m();
         return;
       }
     } else {
       v();
       return;
     }
-    const t = a.current.findIndex((W) => W.current === e.target);
+    const t = a.current.findIndex((V) => V.current === e.target);
     let s = t;
     e.key === n.Home ? s = 0 : e.key === n.End ? s = a.current.length - 1 : e.key === n.ArrowDown && t < a.current.length - 1 ? s = t + 1 : e.key === n.ArrowUp && t > 0 ? s = t - 1 : e.key === n.Enter && t !== -1 && (s = t), s !== -1 && ((N = a.current[s].current) == null || N.focus(), P(s));
   }, [
@@ -60,8 +59,8 @@ const ne = (d) => {
     n.Enter,
     n.Escape,
     n.Home
-  ]), G(p, () => l && f());
-  const U = k(
+  ]), F(p, () => l && m());
+  const T = k(
     o.dropdown__toggle,
     !i && {
       [o["dropdown__toggle--on-white"]]: c === "onwhite",
@@ -69,36 +68,36 @@ const ne = (d) => {
       [o["dropdown__toggle--on-blueberry"]]: c === "onblueberry",
       [o["dropdown__toggle--on-cherry"]]: c === "oncherry",
       [o["dropdown__toggle--transparent"]]: S,
-      [o["dropdown__toggle--fluid"]]: b,
+      [o["dropdown__toggle--fluid"]]: y,
       [o["dropdown__toggle--open"]]: l
     }
-  ), B = k(o.dropdown__content, l && o["dropdown__content--open"]), V = r.Children.map(y, (e, t) => /* @__PURE__ */ r.createElement("li", { className: o.dropdown__input, role: "option", id: `${x}-${t}`, "aria-selected": t === u }, r.isValidElement(e) && a.current && a.current[t] ? r.cloneElement(e, { ref: M([e.props.ref, a.current[t]]) }) : e));
+  ), U = k(o.dropdown__content, l && o["dropdown__content--open"]), B = r.Children.map(_, (e, t) => /* @__PURE__ */ r.createElement("li", { className: o.dropdown__input, role: "option", id: `${x}-${t}`, "aria-selected": t === u }, r.isValidElement(e) && a.current && a.current[t] ? r.cloneElement(e, { ref: W([e.props.ref, a.current[t]]) }) : e));
   return /* @__PURE__ */ r.createElement("div", { className: o.dropdown, ref: p }, /* @__PURE__ */ r.createElement("span", { id: E, className: o.dropdown__label }, R), /* @__PURE__ */ r.createElement(
     "button",
     {
       type: "button",
       onClick: () => !l && v(),
-      className: U,
-      ref: m,
+      className: T,
+      ref: w,
       "data-testid": z,
-      "data-analyticsid": Q.Dropdown,
+      "data-analyticsid": J.Dropdown,
       disabled: i,
       "aria-labelledby": I,
       "aria-haspopup": "listbox",
       "aria-expanded": l
     },
-    /* @__PURE__ */ r.createElement("span", { id: I, className: o.dropdown__toggle__label }, $),
+    /* @__PURE__ */ r.createElement("span", { id: I, className: o.dropdown__toggle__label }, A),
     /* @__PURE__ */ r.createElement(
-      oe,
+      M,
       {
         color: i ? C.palette.neutral700 : C.palette.blueberry600,
-        svgIcon: re,
+        svgIcon: ee,
         className: o.dropdown__icon,
         isHovered: !i && L,
-        size: Y.XSmall
+        size: Q.XSmall
       }
     )
-  ), /* @__PURE__ */ r.createElement("div", { className: B, style: { width: b ? "100%" : `${T}px`, zIndex: D } }, /* @__PURE__ */ r.createElement(
+  ), /* @__PURE__ */ r.createElement("div", { className: U, style: { width: y ? "100%" : "auto", zIndex: D } }, /* @__PURE__ */ r.createElement(
     "ul",
     {
       className: o.dropdown__options,
@@ -106,13 +105,13 @@ const ne = (d) => {
       "aria-labelledby": E,
       tabIndex: -1,
       "aria-activedescendant": typeof u < "u" ? `${x}-${u}` : void 0,
-      ref: w
+      ref: b
     },
-    V
-  ), !H && /* @__PURE__ */ r.createElement("div", { className: o.dropdown__close }, /* @__PURE__ */ r.createElement(ee, { onClick: f, fluid: !0, "aria-expanded": l }, A))));
-}, Ie = ne;
+    B
+  ), !K && /* @__PURE__ */ r.createElement("div", { className: o.dropdown__close }, /* @__PURE__ */ r.createElement(Y, { onClick: m, fluid: !0, "aria-expanded": l }, H))));
+}, we = re;
 export {
-  te as DropdownMode,
-  Ie as default
+  oe as DropdownMode,
+  we as default
 };
 //# sourceMappingURL=Dropdown.js.map

package/components/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport {\n  AnalyticsId,\n  IconSize,\n  KeyboardEventKey,\n  ZIndex,\n  theme,\n  useHover,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useSize,\n  useToggle,\n  useUuid,\n} from '../..';\nimport { mergeRefs } from '../../utils/refs';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport PlusSmall from '../Icons/PlusSmall';\n\nimport styles from './styles.module.scss';\n\nexport enum DropdownMode {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  oncherry = 'oncherry',\n}\n\nexport interface DropdownProps {\n  /** Label for dropdown. Synlig for skjermlesere.  */\n  label: string;\n  /** Tekst på knappen som åpner dropdownen */\n  placeholder: string;\n  /** Sets the dropdown content */\n  children: React.ReactNode;\n  /** Close button text */\n  closeText?: string;\n  /** No close button */\n  noCloseButton?: boolean;\n  /** Called when dropdown is open/closed. */\n  onToggle?: (isOpen: boolean) => void;\n  /** Om dropdown er åpen */\n  open?: boolean;\n  /** Changes the visuals of the dropdown */\n  mode?: keyof typeof DropdownMode;\n  /** Makes the background transparent */\n  transparent?: boolean;\n  /** Makes the background transparent */\n  fluid?: boolean;\n  /** Makes the dropdown disabled */\n  disabled?: boolean;\n  /** Sets the data-testid attribute on the dropdown button. */\n  testId?: string;\n  /** Overrides the default z-index of the DropDownContent */\n  zIndex?: number;\n}\n\nconst Dropdown: React.FC<DropdownProps> = props => {\n  const {\n    label,\n    placeholder,\n    closeText = 'Lukk',\n    noCloseButton = false,\n    onToggle,\n    open = false,\n    children,\n    mode = DropdownMode.onwhite,\n    transparent = false,\n    fluid = false,\n    testId,\n    disabled,\n    zIndex = ZIndex.PopOver,\n  } = props;\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const optionsRef = useRef<HTMLUListElement>(null);\n  const { hoverRef: buttonRef, isHovered } = useHover<HTMLButtonElement>();\n  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n  const inputRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n  const [currentIndex, setCurrentIndex] = useState<number>();\n  const { width: buttonWidth } = useSize(buttonRef) || {};\n  const labelId = useUuid();\n  const toggleLabelId = useUuid();\n  const optionIdPrefix = useUuid();\n\n  const handleOpen = (): void => {\n    toggleIsOpen();\n    optionsRef.current?.focus();\n  };\n\n  const handleClose = (): void => {\n    toggleIsOpen();\n    buttonRef.current?.focus();\n  };\n\n  const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n    event.preventDefault();\n\n    if (!inputRefList.current) {\n      return;\n    }\n\n    if (!isOpen) {\n      handleOpen();\n      return;\n    } else if (event.key === KeyboardEventKey.Escape && isOpen) {\n      handleClose();\n      return;\n    }\n\n    const index = inputRefList.current.findIndex(x => x.current === event.target);\n    let nextIndex = index;\n\n    if (event.key === KeyboardEventKey.Home) {\n      nextIndex = 0;\n    } else if (event.key === KeyboardEventKey.End) {\n      nextIndex = inputRefList.current.length - 1;\n    } else if (event.key === KeyboardEventKey.ArrowDown && index < inputRefList.current.length - 1) {\n      nextIndex = index + 1;\n    } else if (event.key === KeyboardEventKey.ArrowUp && index > 0) {\n      nextIndex = index - 1;\n    } else if (event.key === KeyboardEventKey.Enter && index !== -1) {\n      nextIndex = index;\n    }\n    if (nextIndex !== -1) {\n      inputRefList.current[nextIndex].current?.focus();\n      setCurrentIndex(nextIndex);\n    }\n  };\n\n  useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n    KeyboardEventKey.ArrowDown,\n    KeyboardEventKey.ArrowUp,\n    KeyboardEventKey.End,\n    KeyboardEventKey.Enter,\n    KeyboardEventKey.Escape,\n    KeyboardEventKey.Home,\n  ]);\n\n  useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n  const toggleClasses = classNames(\n    styles.dropdown__toggle,\n    !disabled && {\n      [styles['dropdown__toggle--on-white']]: mode === DropdownMode.onwhite,\n      [styles['dropdown__toggle--on-grey']]: mode === DropdownMode.ongrey,\n      [styles['dropdown__toggle--on-blueberry']]: mode === DropdownMode.onblueberry,\n      [styles['dropdown__toggle--on-cherry']]: mode === DropdownMode.oncherry,\n      [styles['dropdown__toggle--transparent']]: transparent,\n      [styles['dropdown__toggle--fluid']]: fluid,\n      [styles['dropdown__toggle--open']]: isOpen,\n    }\n  );\n\n  const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n\n  const renderChildren = React.Children.map(children, (child, index) => (\n    <li className={styles.dropdown__input} role=\"option\" id={`${optionIdPrefix}-${index}`} aria-selected={index === currentIndex}>\n      {React.isValidElement(child) && inputRefList.current && inputRefList.current[index]\n        ? React.cloneElement(child as React.ReactElement, { ref: mergeRefs([child.props.ref, inputRefList.current[index]]) })\n        : child}\n    </li>\n  ));\n\n  return (\n    <div className={styles.dropdown} ref={dropdownRef}>\n      <span id={labelId} className={styles.dropdown__label}>\n        {label}\n      </span>\n      <button\n        type=\"button\"\n        onClick={(): false | void => !isOpen && handleOpen()}\n        className={toggleClasses}\n        ref={buttonRef}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Dropdown}\n        disabled={disabled}\n        aria-labelledby={toggleLabelId}\n        aria-haspopup=\"listbox\"\n        aria-expanded={isOpen}\n      >\n        <span id={toggleLabelId} className={styles.dropdown__toggle__label}>\n          {placeholder}\n        </span>\n        <Icon\n          color={disabled ? theme.palette.neutral700 : theme.palette.blueberry600}\n          svgIcon={PlusSmall}\n          className={styles.dropdown__icon}\n          isHovered={!disabled && isHovered}\n          size={IconSize.XSmall}\n        />\n      </button>\n      <div className={contentClasses} style={{ width: fluid ? '100%' : `${buttonWidth}px`, zIndex: zIndex }}>\n        <ul\n          className={styles.dropdown__options}\n          role=\"listbox\"\n          aria-labelledby={labelId}\n          tabIndex={-1}\n          aria-activedescendant={typeof currentIndex !== 'undefined' ? `${optionIdPrefix}-${currentIndex}` : undefined}\n          ref={optionsRef}\n        >\n          {renderChildren}\n        </ul>\n        {!noCloseButton && (\n          <div className={styles.dropdown__close}>\n            <Button onClick={handleClose} fluid aria-expanded={isOpen}>\n              {closeText}\n            </Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Dropdown;\n"],"names":["DropdownMode","Dropdown","props","label","placeholder","closeText","noCloseButton","onToggle","open","children","mode","transparent","fluid","testId","disabled","zIndex","ZIndex","dropdownRef","useRef","optionsRef","buttonRef","isHovered","useHover","isOpen","toggleIsOpen","useToggle","inputRefList","React","currentIndex","setCurrentIndex","useState","buttonWidth","useSize","labelId","useUuid","toggleLabelId","optionIdPrefix","handleOpen","_a","handleClose","useKeyboardEvent","event","KeyboardEventKey","index","x","nextIndex","useOutsideEvent","toggleClasses","classNames","styles","contentClasses","renderChildren","child","mergeRefs","AnalyticsId","Icon","theme","PlusSmall","IconSize","Button","Dropdown$1"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport {\n  AnalyticsId,\n  IconSize,\n  KeyboardEventKey,\n  ZIndex,\n  theme,\n  useHover,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useToggle,\n  useUuid,\n} from '../..';\nimport { mergeRefs } from '../../utils/refs';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport PlusSmall from '../Icons/PlusSmall';\n\nimport styles from './styles.module.scss';\n\nexport enum DropdownMode {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  oncherry = 'oncherry',\n}\n\nexport interface DropdownProps {\n  /** Label for dropdown. Visible for screen readers  */\n  label: string;\n  /** Text on the trigger button that opens the dropdown */\n  placeholder: string;\n  /** Sets the dropdown content */\n  children: React.ReactNode;\n  /** Close button text */\n  closeText?: string;\n  /** No close button */\n  noCloseButton?: boolean;\n  /** Called when dropdown is open/closed */\n  onToggle?: (isOpen: boolean) => void;\n  /** Whether the dropdown is open or not */\n  open?: boolean;\n  /** Changes the visuals of the dropdown */\n  mode?: keyof typeof DropdownMode;\n  /** Makes the background of the trigger transparent */\n  transparent?: boolean;\n  /** Makes the width of the full component adjust to its parent */\n  fluid?: boolean;\n  /** Makes the dropdown disabled */\n  disabled?: boolean;\n  /** Sets the data-testid attribute on the dropdown button */\n  testId?: string;\n  /** Overrides the default z-index of the DropDownContent */\n  zIndex?: number;\n}\n\nconst Dropdown: React.FC<DropdownProps> = props => {\n  const {\n    label,\n    placeholder,\n    closeText = 'Lukk',\n    noCloseButton = false,\n    onToggle,\n    open = false,\n    children,\n    mode = DropdownMode.onwhite,\n    transparent = false,\n    fluid = false,\n    testId,\n    disabled,\n    zIndex = ZIndex.PopOver,\n  } = props;\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const optionsRef = useRef<HTMLUListElement>(null);\n  const { hoverRef: buttonRef, isHovered } = useHover<HTMLButtonElement>();\n  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n  const inputRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n  const [currentIndex, setCurrentIndex] = useState<number>();\n  const labelId = useUuid();\n  const toggleLabelId = useUuid();\n  const optionIdPrefix = useUuid();\n\n  const handleOpen = (): void => {\n    toggleIsOpen();\n    optionsRef.current?.focus();\n  };\n\n  const handleClose = (): void => {\n    toggleIsOpen();\n    buttonRef.current?.focus();\n  };\n\n  const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n    event.preventDefault();\n\n    if (!inputRefList.current) {\n      return;\n    }\n\n    if (!isOpen) {\n      handleOpen();\n      return;\n    } else if (event.key === KeyboardEventKey.Escape && isOpen) {\n      handleClose();\n      return;\n    }\n\n    const index = inputRefList.current.findIndex(x => x.current === event.target);\n    let nextIndex = index;\n\n    if (event.key === KeyboardEventKey.Home) {\n      nextIndex = 0;\n    } else if (event.key === KeyboardEventKey.End) {\n      nextIndex = inputRefList.current.length - 1;\n    } else if (event.key === KeyboardEventKey.ArrowDown && index < inputRefList.current.length - 1) {\n      nextIndex = index + 1;\n    } else if (event.key === KeyboardEventKey.ArrowUp && index > 0) {\n      nextIndex = index - 1;\n    } else if (event.key === KeyboardEventKey.Enter && index !== -1) {\n      nextIndex = index;\n    }\n    if (nextIndex !== -1) {\n      inputRefList.current[nextIndex].current?.focus();\n      setCurrentIndex(nextIndex);\n    }\n  };\n\n  useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n    KeyboardEventKey.ArrowDown,\n    KeyboardEventKey.ArrowUp,\n    KeyboardEventKey.End,\n    KeyboardEventKey.Enter,\n    KeyboardEventKey.Escape,\n    KeyboardEventKey.Home,\n  ]);\n\n  useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n  const toggleClasses = classNames(\n    styles.dropdown__toggle,\n    !disabled && {\n      [styles['dropdown__toggle--on-white']]: mode === DropdownMode.onwhite,\n      [styles['dropdown__toggle--on-grey']]: mode === DropdownMode.ongrey,\n      [styles['dropdown__toggle--on-blueberry']]: mode === DropdownMode.onblueberry,\n      [styles['dropdown__toggle--on-cherry']]: mode === DropdownMode.oncherry,\n      [styles['dropdown__toggle--transparent']]: transparent,\n      [styles['dropdown__toggle--fluid']]: fluid,\n      [styles['dropdown__toggle--open']]: isOpen,\n    }\n  );\n\n  const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n\n  const renderChildren = React.Children.map(children, (child, index) => (\n    <li className={styles.dropdown__input} role=\"option\" id={`${optionIdPrefix}-${index}`} aria-selected={index === currentIndex}>\n      {React.isValidElement(child) && inputRefList.current && inputRefList.current[index]\n        ? React.cloneElement(child as React.ReactElement, { ref: mergeRefs([child.props.ref, inputRefList.current[index]]) })\n        : child}\n    </li>\n  ));\n\n  return (\n    <div className={styles.dropdown} ref={dropdownRef}>\n      <span id={labelId} className={styles.dropdown__label}>\n        {label}\n      </span>\n      <button\n        type=\"button\"\n        onClick={(): false | void => !isOpen && handleOpen()}\n        className={toggleClasses}\n        ref={buttonRef}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Dropdown}\n        disabled={disabled}\n        aria-labelledby={toggleLabelId}\n        aria-haspopup=\"listbox\"\n        aria-expanded={isOpen}\n      >\n        <span id={toggleLabelId} className={styles.dropdown__toggle__label}>\n          {placeholder}\n        </span>\n        <Icon\n          color={disabled ? theme.palette.neutral700 : theme.palette.blueberry600}\n          svgIcon={PlusSmall}\n          className={styles.dropdown__icon}\n          isHovered={!disabled && isHovered}\n          size={IconSize.XSmall}\n        />\n      </button>\n      <div className={contentClasses} style={{ width: fluid ? '100%' : `auto`, zIndex: zIndex }}>\n        <ul\n          className={styles.dropdown__options}\n          role=\"listbox\"\n          aria-labelledby={labelId}\n          tabIndex={-1}\n          aria-activedescendant={typeof currentIndex !== 'undefined' ? `${optionIdPrefix}-${currentIndex}` : undefined}\n          ref={optionsRef}\n        >\n          {renderChildren}\n        </ul>\n        {!noCloseButton && (\n          <div className={styles.dropdown__close}>\n            <Button onClick={handleClose} fluid aria-expanded={isOpen}>\n              {closeText}\n            </Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Dropdown;\n"],"names":["DropdownMode","Dropdown","props","label","placeholder","closeText","noCloseButton","onToggle","open","children","mode","transparent","fluid","testId","disabled","zIndex","ZIndex","dropdownRef","useRef","optionsRef","buttonRef","isHovered","useHover","isOpen","toggleIsOpen","useToggle","inputRefList","React","currentIndex","setCurrentIndex","useState","labelId","useUuid","toggleLabelId","optionIdPrefix","handleOpen","_a","handleClose","useKeyboardEvent","event","KeyboardEventKey","index","x","nextIndex","useOutsideEvent","toggleClasses","classNames","styles","contentClasses","renderChildren","child","mergeRefs","AnalyticsId","Icon","theme","PlusSmall","IconSize","Button","Dropdown$1"],"mappings":"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"}

package/components/Dropdown/Dropdown.stories.d.ts

@@ -9,6 +9,10 @@ declare const meta: {
             description: {
                 component: string;
             };
+            story: {
+                inline: boolean;
+                iframeHeight: string;
+            };
         };
     };
     args: {

package/components/Duolist/Duolist.js

@@ -2,7 +2,7 @@ import t from "react";
 import u from "classnames";
 import { AnalyticsId as F } from "../../constants.js";
 import x from "../Spacer/Spacer.js";
-import o from "./styles.module.scss";
+import o from "../Duolist/styles.module.scss";
 const D = (c) => {
   const { format: s = "formatted", boldColumn: a = s === "non-formatted" ? "none" : "first", description: d, separator: r = ": ", term: l } = c, p = a === "first", f = a === "second", e = s === "non-formatted", _ = u(o.duolist__dt, {
     [o["duolist__dt--bold"]]: p,

package/components/EmptyState/EmptyState.js

@@ -2,7 +2,7 @@ import e from "react";
 import a from "./NobodyHome.js";
 import { AnalyticsId as m } from "../../constants.js";
 import l from "../Title/Title.js";
-import r from "./styles.module.scss";
+import r from "../EmptyState/styles.module.scss";
 const i = (t) => /* @__PURE__ */ e.createElement("div", { className: r.emptystate, "data-testid": t.testId, "data-analyticsid": m.EmptyState }, /* @__PURE__ */ e.createElement(a, null), /* @__PURE__ */ e.createElement(l, { appearance: "title3", htmlMarkup: t.titleHtmlMarkup || "h2" }, t.children)), s = i;
 export {
   s as default

package/components/EmptyState/NobodyHome.js

@@ -1,5 +1,5 @@
 import * as C from "react";
-import e from "./styles.module.scss";
+import e from "../EmptyState/styles.module.scss";
 const t = () => /* @__PURE__ */ C.createElement(
   "svg",
   {

package/components/ErrorWrapper/ErrorWrapper.js

@@ -1,6 +1,6 @@
 import t from "react";
 import o from "classnames";
-import e from "./styles.module.scss";
+import e from "../ErrorWrapper/styles.module.scss";
 const s = (r) => {
   const a = o(e["error-wrapper"], r.errorText && e["error-wrapper--with-error"], r.className);
   return /* @__PURE__ */ t.createElement("div", { className: a, "data-testid": r.testId }, r.errorText && /* @__PURE__ */ t.createElement("p", { className: e["error-wrapper__errors"], id: r.errorTextId }, r.errorText), r.children);

package/components/Expander/Expander.js

@@ -9,7 +9,7 @@ import { Icon as _ } from "../Icon/Icon.js";
 import b from "../Icons/ChevronDown.js";
 import h from "../Icons/ChevronUp.js";
 import F from "../LazyIcon/LazyIcon.js";
-import e from "./styles.module.scss";
+import e from "../Expander/styles.module.scss";
 var G = /* @__PURE__ */ ((s) => (s.small = "small", s.large = "large", s))(G || {});
 const J = (s) => {
   const {

package/components/ExpanderHierarchy/Expander.js

@@ -4,7 +4,7 @@ import x from "./ExpanderButton.js";
 import E from "./ExpanderHierarchy.js";
 import { getHeadingTag as _ } from "./utils.js";
 import { isComponent as l } from "../../utils/component.js";
-import r from "./expander.module.scss";
+import r from "../ExpanderHierarchy/expander.module.scss";
 const u = ({
   title: m,
   htmlMarkup: a = "h2",

package/components/ExpanderHierarchy/ExpanderButton.js

@@ -6,7 +6,7 @@ import { useHover as y } from "../../hooks/useHover.js";
 import { Icon as I } from "../Icon/Icon.js";
 import N from "../Icons/ChevronDown.js";
 import H from "../Icons/ChevronUp.js";
-import e from "./expander.module.scss";
+import e from "../ExpanderHierarchy/expander.module.scss";
 const g = ({ htmlMarkup: s = "h2", level: t = 1, print: r, expanded: d, onExpand: p, children: i, testId: c }) => {
   const { hoverRef: m, isHovered: _ } = y(), [n, x] = w(d, p), l = () => {
     x(!n);

package/components/ExpanderHierarchy/ExpanderHierarchy.js

@@ -3,7 +3,7 @@ import c from "classnames";
 import n from "./Expander.js";
 import { AnalyticsId as h } from "../../constants.js";
 import { isComponent as x } from "../../utils/component.js";
-import t from "./styles.module.scss";
+import t from "../ExpanderHierarchy/styles.module.scss";
 const o = ({
   htmlMarkup: s = "h2",
   level: r = 1,

package/components/ExpanderList/ExpanderList.js

@@ -10,7 +10,7 @@ import { isElementInViewport as J } from "../../utils/viewport.js";
 import K from "../Icons/ChevronDown.js";
 import Q from "../Icons/ChevronUp.js";
 import { renderListHeader as X } from "../ListHeader/ListHeader.js";
-import r from "./styles.module.scss";
+import r from "../ExpanderList/styles.module.scss";
 const W = s.forwardRef((l, g) => {
   const {
     id: x,

package/components/FormGroup/FormGroup.js

@@ -11,7 +11,7 @@ import q, { getRadioLabelClasses as J } from "../RadioButton/RadioButton.js";
 import K from "../Select/Select.js";
 import O from "../Textarea/Textarea.js";
 import P from "../Title/Title.js";
-import p from "./styles.module.scss";
+import p from "../FormGroup/styles.module.scss";
 const f = r.forwardRef((t, F) => {
   const {
     className: G,

package/components/FormLayout/FormLayout.js

@@ -1,7 +1,7 @@
 import r from "react";
 import i from "classnames";
 import { FormSize as p, AnalyticsId as v } from "../../constants.js";
-import t from "./styles.module.scss";
+import t from "../FormLayout/styles.module.scss";
 var w = /* @__PURE__ */ ((e) => (e.one = "one", e.two = "two", e.three = "three", e.four = "four", e.five = "five", e))(w || {});
 const m = r.forwardRef((e, s) => {
   const { maxColumns: o = "one", colMinWidth: c = 300, size: f, className: n, mapHelper: a } = e, d = { "--min-col-width": `${c}px` }, u = i(

package/components/GridExample/GridExample.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
-export declare const GridExample: React.FC;
+type GridLayout = 'helsenorge' | 'padding' | 'none';
+interface GridExampleProps {
+    gridLayout: GridLayout;
+}
+export declare const GridExample: React.FC<GridExampleProps>;
 export default GridExample;

package/components/GridExample/GridExample.js

@@ -1,7 +1,11 @@
 import e from "react";
-const t = ({ children: a }) => /* @__PURE__ */ e.createElement("div", { className: "container py-5" }, /* @__PURE__ */ e.createElement("div", { className: "row" }, /* @__PURE__ */ e.createElement("div", { className: "col" }, a))), l = t;
+import { isSupernova as r } from "../../docs/index.js";
+const m = ({ gridLayout: t, children: a }) => {
+  const n = r() || t === "padding";
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, n && /* @__PURE__ */ e.createElement("div", { style: { padding: "0.5rem" } }, a), t === "helsenorge" && /* @__PURE__ */ e.createElement("div", { className: "container py-5" }, /* @__PURE__ */ e.createElement("div", { className: "row" }, /* @__PURE__ */ e.createElement("div", { className: "col" }, a))), t === "none" && a);
+}, c = m;
 export {
-  t as GridExample,
-  l as default
+  m as GridExample,
+  c as default
 };
 //# sourceMappingURL=GridExample.js.map

package/components/GridExample/GridExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridExample.js","sources":["../../../src/components/GridExample/GridExample.tsx"],"sourcesContent":["import React from 'react';\n\nexport const GridExample: React.FC = ({ children }) => (\n  <div className=\"container py-5\">\n    <div className=\"row\">\n      <div className=\"col\">{children}</div>\n    </div>\n  </div>\n);\n\nexport default GridExample;\n"],"names":["GridExample","children","React","GridExample$1"],"mappings":";AAEO,MAAMA,IAAwB,CAAC,EAAE,UAAAC,EACtC,MAAAC,gBAAAA,EAAA,cAAC,SAAI,WAAU,iBAAA,mCACZ,OAAI,EAAA,WAAU,SACZA,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,SAAOD,CAAS,CACjC,CACF,GAGFE,IAAeH;"}
+{"version":3,"file":"GridExample.js","sources":["../../../src/components/GridExample/GridExample.tsx"],"sourcesContent":["import React from 'react';\n\nimport { isSupernova } from '../../docs';\n\ntype GridLayout = 'helsenorge' | 'padding' | 'none';\ninterface GridExampleProps {\n  gridLayout: GridLayout;\n}\n\nexport const GridExample: React.FC<GridExampleProps> = ({ gridLayout, children }) => {\n  const returnWithPadding = isSupernova() || gridLayout === 'padding';\n\n  return (\n    <>\n      {returnWithPadding && <div style={{ padding: '0.5rem' }}>{children}</div>}\n      {gridLayout === 'helsenorge' && (\n        <div className=\"container py-5\">\n          <div className=\"row\">\n            <div className=\"col\">{children}</div>\n          </div>\n        </div>\n      )}\n      {gridLayout === 'none' && children}\n    </>\n  );\n};\n\nexport default GridExample;\n"],"names":["GridExample","gridLayout","children","returnWithPadding","isSupernova","React","GridExample$1"],"mappings":";;AASO,MAAMA,IAA0C,CAAC,EAAE,YAAAC,GAAY,UAAAC,QAAe;AAC7E,QAAAC,IAAoBC,OAAiBH,MAAe;AAE1D,SAEKI,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAAF,KAAsBE,gBAAAA,EAAA,cAAA,OAAA,EAAI,OAAO,EAAE,SAAS,SAAA,KAAaH,CAAS,GAClED,MAAe,gBACbI,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,oBACZA,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,MAAA,mCACZ,OAAI,EAAA,WAAU,MAAO,GAAAH,CAAS,CACjC,CACF,GAEDD,MAAe,UAAUC,CAC5B;AAEJ,GAEAI,IAAeN;"}

package/components/HelpBubble/HelpBubble.js

@@ -4,7 +4,7 @@ import { AnalyticsId as L } from "../../constants.js";
 import w from "../AnchorLink/AnchorLink.js";
 import A from "../Close/Close.js";
 import I, { PopOverVariant as R } from "../PopOver/PopOver.js";
-import t from "./styles.module.scss";
+import t from "../HelpBubble/styles.module.scss";
 const M = R, b = e.forwardRef((m, u) => {
   const {
     children: p,

package/components/HelpBubble/HelpBubble.stories.d.ts

@@ -8,6 +8,10 @@ declare const meta: {
             description: {
                 component: string;
             };
+            story: {
+                inline: boolean;
+                iframeHeight: string;
+            };
         };
     };
     args: {

package/components/HelpPanel/HelpPanel.js

@@ -2,7 +2,7 @@ import m from "react";
 import n from "classnames";
 import p from "../HighlightBox/HighlightBox.js";
 import c from "../Icons/HandWaving.js";
-import e from "./styles.module.scss";
+import e from "../HelpPanel/styles.module.scss";
 const i = ({ className: a, testId: l, size: t, children: o, title: r }) => {
   const s = n(e["help-panel"], a);
   return /* @__PURE__ */ m.createElement(

package/components/HelpQuestion/HelpQuestion.js

@@ -4,7 +4,7 @@ import { AnalyticsId as c } from "../../constants.js";
 import { usePseudoClasses as d } from "../../hooks/usePseudoClasses.js";
 import { mergeRefs as y } from "../../utils/refs.js";
 import H from "../Trigger/Trigger.js";
-import s from "./styles.module.scss";
+import s from "../HelpQuestion/styles.module.scss";
 const a = t.forwardRef(
   ({ children: o, selected: e = !1, className: r, onClick: i, testId: m }, l) => {
     const { isHovered: n, refObject: p } = d(), f = u(s.helpquestion, e && s["helpquestion--selected"], r);

package/components/HighlightBox/HighlightBox.js

@@ -6,7 +6,7 @@ import { AnalyticsId as p, IconSize as N } from "../../constants.js";
 import { Icon as C } from "../Icon/Icon.js";
 import B from "../LazyIcon/LazyIcon.js";
 import W from "../Title/Title.js";
-import t from "./styles.module.scss";
+import t from "../HighlightBox/styles.module.scss";
 var z = /* @__PURE__ */ ((i) => (i.medium = "medium", i.large = "large", i.fluid = "fluid", i))(z || {});
 const u = ({ className: i, size: r, children: s }) => /* @__PURE__ */ e.createElement("div", { className: i, "data-testid": "highlightbox-wrapper" }, /* @__PURE__ */ e.createElement("div", { className: t.highlightbox__row }, /* @__PURE__ */ e.createElement("div", { className: l(t.highlightbox__col, r === "medium" && t["highlightbox__col--offset"]) }, s))), x = (i) => {
   const { children: r, className: s } = i, a = l(t["highlightbox__content-wrapper"], s);

package/components/HorizontalScroll/HorizontalScroll.js

@@ -2,7 +2,7 @@ import r, { useRef as e } from "react";
 import i from "classnames";
 import { useIsVisible as c } from "../../hooks/useIsVisible.js";
 import { useSize as g } from "../../hooks/useSize.js";
-import o from "./styles.module.scss";
+import o from "../HorizontalScroll/styles.module.scss";
 const d = "3px", p = ({ children: m, childWidth: _, testId: f, ...l }) => {
   const t = e(null), a = e(null), s = e(null), h = c(a, 1, { root: t == null ? void 0 : t.current, rootMargin: d }, !0), u = c(s, 1, { root: t == null ? void 0 : t.current, rootMargin: d }, !0), { width: v = 0 } = g(t) || {}, z = _ > v, b = i(o.horizontalscroll__viewport, z && o["horizontalscroll__viewport--overflow"]), n = l["aria-label"] || l["aria-labelledby"];
   return /* @__PURE__ */ r.createElement("div", { className: o.horizontalscroll, "data-testid": f }, /* @__PURE__ */ r.createElement(

package/components/Input/Input.js

@@ -9,7 +9,7 @@ import { Icon as Ie } from "../Icon/Icon.js";
 import { renderLabel as Ne } from "../Label/Label.js";
 import Re from "../LazyIcon/LazyIcon.js";
 import We from "../MaxCharacters/MaxCharacters.js";
-import t from "./styles.module.scss";
+import t from "../Input/styles.module.scss";
 var Se = /* @__PURE__ */ ((e) => (e.text = "text", e.number = "number", e.email = "email", e.password = "password", e.search = "search", e.tel = "tel", e.url = "url", e.date = "date", e.time = "time", e))(Se || {});
 const ze = (e, s, p) => {
   const i = s ? "1.5rem" : "2rem", f = s ? `${p}px` : "0px";

package/components/Label/Label.js

@@ -5,7 +5,7 @@ import { AnalyticsId as k, FormMode as b } from "../../constants.js";
 import { isComponent as l } from "../../utils/component.js";
 import S from "../Spacer/Spacer.js";
 import _ from "../StatusDot/StatusDot.js";
-import n from "./styles.module.scss";
+import n from "../Label/styles.module.scss";
 const $ = (e) => {
   let r = "";
   return l(e, o) && e.props.labelTexts.forEach((a) => {

package/components/Label/SubLabel.js

@@ -2,7 +2,7 @@ import e from "react";
 import u from "classnames";
 import { AnalyticsId as f, FormMode as S } from "../../constants.js";
 import y from "../Spacer/Spacer.js";
-import a from "./styles.module.scss";
+import a from "../Label/styles.module.scss";
 const _ = ({ className: r, id: d, mode: i, sublabelTexts: l, testId: m }) => {
   const o = (c) => l && l.map((t, b) => {
     const p = u(a.label, a["label--sublabel"], {

package/components/LinkList/LinkList.js

@@ -4,7 +4,7 @@ import { AnalyticsId as b } from "../../constants.js";
 import { useHover as w } from "../../hooks/useHover.js";
 import y from "../Icons/ChevronRight.js";
 import { renderListHeader as R } from "../ListHeader/ListHeader.js";
-import t from "./styles.module.scss";
+import t from "../LinkList/styles.module.scss";
 const p = e.forwardRef((L, l) => {
   const {
     children: s,

package/components/List/List.js

@@ -1,7 +1,7 @@
 import l from "react";
 import n from "classnames";
 import { AnalyticsId as d } from "../../constants.js";
-import t from "./styles.module.scss";
+import t from "../List/styles.module.scss";
 const u = ({ children: s }) => /* @__PURE__ */ l.createElement("li", { className: t.list__item }, s), a = ({ children: s, className: i, testId: m, variant: e = "bullet", margin: o }) => {
   const c = ["numbered", "alphabetical"].includes(e) ? "ol" : "ul", r = n(t.list, t[`list--${e}`], o && t["list--margin"], i);
   return /* @__PURE__ */ l.createElement(c, { className: r, "data-testid": m, "data-analyticsid": d.List }, s);

package/components/ListHeader/ListHeader.js

@@ -7,7 +7,7 @@ import $, { AvatarSize as B } from "../Avatar/Avatar.js";
 import R from "../Badge/Badge.js";
 import { Icon as p } from "../Icon/Icon.js";
 import { IconSize as C } from "../../constants.js";
-import t from "./styles.module.scss";
+import t from "../ListHeader/styles.module.scss";
 const K = (m, f, _, i, c, o) => {
   if (u(m, E))
     return r.cloneElement(m, {

package/components/ListHeader/ListHeaderText/ListHeaderText.js

@@ -1,7 +1,7 @@
 import e from "react";
 import s from "classnames";
 import _ from "../../StatusDot/StatusDot.js";
-import t from "../styles.module.scss";
+import t from "../../ListHeader/styles.module.scss";
 const l = (m) => {
   const {
     firstText: n,

package/components/Loader/Loader.js

@@ -2,7 +2,7 @@ import r, { useState as C, useRef as R, useEffect as S } from "react";
 import c from "classnames";
 import { AnalyticsId as D } from "../../constants.js";
 import { uuid as z } from "../../utils/uuid.js";
-import e from "./styles.module.scss";
+import e from "../Loader/styles.module.scss";
 var A = /* @__PURE__ */ ((t) => (t.screen = "screen", t.parent = "parent", t))(A || {});
 const B = (t) => {
   const {

package/components/MaxCharacters/MaxCharacters.js

@@ -1,7 +1,7 @@
 import l from "react";
 import n from "classnames";
 import { FormMode as f } from "../../constants.js";
-import a from "./styles.module.scss";
+import a from "../MaxCharacters/styles.module.scss";
 const d = ({ maxCharacters: r, maxText: t, length: e, mode: s, maxWidth: c }) => {
   const o = e / r, m = n(a["max-characters"], {
     [a["max-characters--on-dark"]]: s === f.ondark,

package/components/Modal/Modal.js

@@ -13,7 +13,7 @@ import K from "../Icons/AlertSignStroke.js";
 import O from "../Icons/CheckOutline.js";
 import D from "../Portal/index.js";
 import M from "../Title/Title.js";
-import a from "./styles.module.scss";
+import a from "../Modal/styles.module.scss";
 var V = /* @__PURE__ */ ((e) => (e.normal = "normal", e.warning = "warning", e.error = "error", e.success = "success", e.image = "image", e))(V || {}), Z = /* @__PURE__ */ ((e) => (e.large = "large", e.medium = "medium", e))(Z || {});
 const j = {
   variant: "normal",

package/components/Modal/Modal.stories.d.ts

@@ -20,6 +20,10 @@ declare const meta: {
             description: {
                 component: string;
             };
+            story: {
+                inline: boolean;
+                iframeHeight: string;
+            };
             page: () => React.JSX.Element;
         };
     };

package/components/NotificationPanel/DetailButton/DetailButton.js

@@ -7,7 +7,7 @@ import v from "../../Button/Button.js";
 import { Icon as x } from "../../Icon/Icon.js";
 import E from "../../Icons/ChevronDown.js";
 import I from "../../Icons/ChevronUp.js";
-import a from "./styles.module.scss";
+import a from "../../NotificationPanel/DetailButton/styles.module.scss";
 const T = ({ content: i, buttonText: r, buttonClosedText: s, expanderOpenFromStart: c }) => {
   const [t, l] = f(c), o = t ? r : s, m = u(), p = b({
     label: o,

package/components/NotificationPanel/NotificationPanel.js

@@ -12,7 +12,7 @@ import D from "../Icons/CheckFill.js";
 import M from "../Icons/ErrorSignFill.js";
 import O from "../Icons/InfoSignFill.js";
 import U from "../Icons/TriangleX.js";
-import e from "./styles.module.scss";
+import e from "../NotificationPanel/styles.module.scss";
 const V = ({ fluid: s, children: m }) => {
   if (s) {
     const l = c(e["fluid-wrapper"]);

package/components/Panel/Panel.js

@@ -16,7 +16,7 @@ import _e from "../Icons/ChevronUp.js";
 import Ee from "../Icons/Pencil.js";
 import fe from "../Icons/Watch.js";
 import ye from "../Title/Title.js";
-import e from "./styles.module.scss";
+import e from "../Panel/styles.module.scss";
 var ve = /* @__PURE__ */ ((a) => (a.normal = "normal", a.new = "new", a.error = "error", a.draft = "draft", a))(ve || {}), be = /* @__PURE__ */ ((a) => (a.fill = "fill", a.white = "white", a.stroke = "stroke", a.line = "line", a))(be || {}), Ce = /* @__PURE__ */ ((a) => (a.layout1 = "layout1", a.layout2 = "layout2", a.layout3a = "layout3a", a.layout3b = "layout3b", a.layout3c = "layout3c", a))(Ce || {});
 const S = ({ status: a, statusMessage: n }) => {
   const m = () => a === "error" ? { color: W.cherry500, svgIcon: me } : { color: W.black, svgIcon: Ee }, s = r(e["status-message"], {

package/components/PanelList/PanelList.js

@@ -2,7 +2,7 @@ import t from "react";
 import c from "classnames";
 import { AnalyticsId as p } from "../../constants.js";
 import f, { PanelVariant as o } from "../Panel/Panel.js";
-import P from "./styles.module.scss";
+import P from "../PanelList/styles.module.scss";
 const u = (a) => t.isValidElement(a) && a.type === f, y = t.forwardRef(function(s, l) {
   const { testId: i, children: m, variant: n = o.fill } = s, d = (e, r) => t.cloneElement(e, {
     variant: n,