@helsenorge/designsystem-react 9.4.0 → 9.4.3

package/components/Select/Select.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { FormOnColor } from '../../constants';
 import { ErrorWrapperClassNameProps } from '../ErrorWrapper';
 type SelectConcept = 'normal' | 'transparent';

package/components/Select/index.d.ts

@@ -1,3 +1,3 @@
-import Select from './Select';
+import { default as Select } from './Select';
 export * from './Select';
 export default Select;

package/components/Select/index.js

@@ -1,6 +1,6 @@
-import { S as t } from "../../Select.js";
+import { S as Select } from "../../Select.js";
 export {
-  t as Select,
-  t as default
+  Select,
+  Select as default
 };
 //# sourceMappingURL=index.js.map

package/components/ServiceMessage/ServiceMessage.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { AnchorLinkTargets } from '../AnchorLink';
 import { NotificationPanelVariants } from '../NotificationPanel';
 export interface ServiceMessageProps {

package/components/ServiceMessage/index.d.ts

@@ -1,3 +1,3 @@
-import ServiceMessage from './ServiceMessage';
+import { default as ServiceMessage } from './ServiceMessage';
 export * from './ServiceMessage';
 export default ServiceMessage;

package/components/ServiceMessage/index.js

@@ -1,113 +1,127 @@
-import { jsxs as d, jsx as s } from "react/jsx-runtime";
-import { useState as w } from "react";
-import h from "classnames";
-import { useBreakpoint as L } from "../../hooks/useBreakpoint.js";
-import { useHover as C } from "../../hooks/useHover.js";
-import { useUuid as X } from "../../hooks/useUuid.js";
-import { getColor as I } from "../../theme/currys/color.js";
-import { breakpoints as j } from "../../theme/grid.js";
-import { getAriaLabelAttributes as y } from "../../utils/accessibility.js";
-import { N as A } from "../../NotificationBadge.js";
-import { C as M } from "../../Close.js";
-import { I as H } from "../../Icon.js";
-import { IconSize as N } from "../../constants.js";
-import U from "../Icons/ChevronDown.js";
-import B from "../Icons/ChevronUp.js";
-import F from "../Icons/Forward.js";
-import $ from "../Icons/X.js";
-import e from "./styles.module.scss";
-const q = ({ label: a, variant: c, id: l, hasExpander: r, isExpanded: m, dismissable: v, onExpand: t, onDismiss: _, closeBtnText: n }) => {
-  const g = L(), { isHovered: o, hoverRef: f } = C(), i = g < j.lg ? N.XSmall : N.Small, b = r ? "button" : "span", p = h(
-    e["service-message__label-container"],
-    r && e["service-message__label-container--has-expander"]
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import classNames from "classnames";
+import { useBreakpoint } from "../../hooks/useBreakpoint.js";
+import { useHover } from "../../hooks/useHover.js";
+import { useUuid } from "../../hooks/useUuid.js";
+import { getColor } from "../../theme/currys/color.js";
+import { breakpoints } from "../../theme/grid.js";
+import { getAriaLabelAttributes } from "../../utils/accessibility.js";
+import { N as NotificationBadge } from "../../NotificationBadge.js";
+import { C as Close } from "../../Close.js";
+import { I as Icon } from "../../Icon.js";
+import { IconSize } from "../../constants.js";
+import ChevronDown from "../Icons/ChevronDown.js";
+import ChevronUp from "../Icons/ChevronUp.js";
+import Forward from "../Icons/Forward.js";
+import X from "../Icons/X.js";
+import styles from "./styles.module.scss";
+const Label = ({ label, variant, id, hasExpander, isExpanded, dismissable, onExpand, onDismiss, closeBtnText }) => {
+  const breakpoint = useBreakpoint();
+  const { isHovered, hoverRef } = useHover();
+  const iconSize = breakpoint < breakpoints.lg ? IconSize.XSmall : IconSize.Small;
+  const CustomTag = hasExpander ? "button" : "span";
+  const labelContainerClasses = classNames(
+    styles["service-message__label-container"],
+    hasExpander && styles[`service-message__label-container--has-expander`]
   );
-  return /* @__PURE__ */ s("div", { className: p, ref: f, children: /* @__PURE__ */ s("div", { className: e["service-message__container"], children: /* @__PURE__ */ s("div", { className: e["service-message__row"], children: /* @__PURE__ */ s("div", { className: e["service-message__col"], children: /* @__PURE__ */ d("div", { className: e["service-message__label"], children: [
-    /* @__PURE__ */ s(A, { variant: c, size: i, isHovered: o }),
-    /* @__PURE__ */ s("h1", { className: e["service-message__title"], id: l, children: /* @__PURE__ */ s(
-      b,
+  return /* @__PURE__ */ jsx("div", { className: labelContainerClasses, ref: hoverRef, children: /* @__PURE__ */ jsx("div", { className: styles["service-message__container"], children: /* @__PURE__ */ jsx("div", { className: styles["service-message__row"], children: /* @__PURE__ */ jsx("div", { className: styles["service-message__col"], children: /* @__PURE__ */ jsxs("div", { className: styles["service-message__label"], children: [
+    /* @__PURE__ */ jsx(NotificationBadge, { variant, size: iconSize, isHovered }),
+    /* @__PURE__ */ jsx("h1", { className: styles["service-message__title"], id, children: /* @__PURE__ */ jsx(
+      CustomTag,
       {
-        className: e["service-message__toggle"],
-        onClick: r ? t : void 0,
-        "aria-expanded": r ? m : void 0,
-        children: a
+        className: styles["service-message__toggle"],
+        onClick: hasExpander ? onExpand : void 0,
+        "aria-expanded": hasExpander ? isExpanded : void 0,
+        children: label
       }
     ) }),
-    r && /* @__PURE__ */ s(H, { size: i, svgIcon: m ? B : U, isHovered: o }),
-    !r && v && /* @__PURE__ */ s(M, { onClick: _, ariaLabel: n, className: e["service-message__close"] })
+    hasExpander && /* @__PURE__ */ jsx(Icon, { size: iconSize, svgIcon: isExpanded ? ChevronUp : ChevronDown, isHovered }),
+    !hasExpander && dismissable && /* @__PURE__ */ jsx(Close, { onClick: onDismiss, ariaLabel: closeBtnText, className: styles["service-message__close"] })
   ] }) }) }) }) });
-}, x = ({ info: a, extraInfo: c, urlTitle: l, url: r, target: m, dismissable: v, closeBtnText: t, onDismiss: _ }) => {
-  const { hoverRef: n, isHovered: g } = C(), { hoverRef: o, isHovered: f } = C(), i = r && l;
-  return /* @__PURE__ */ s("div", { className: e["service-message__container"], children: /* @__PURE__ */ s("div", { className: e["service-message__row"], children: /* @__PURE__ */ s("div", { className: e["service-message__col"], children: /* @__PURE__ */ d("div", { className: e["service-message__content"], children: [
-    a && /* @__PURE__ */ s("p", { className: e["service-message__info"], children: a }),
-    c && /* @__PURE__ */ s("p", { className: h(e["service-message__info"], e["service-message__info--extra"]), children: c }),
-    /* @__PURE__ */ d("div", { className: e["service-message__actions"], children: [
-      i && /* @__PURE__ */ d("a", { className: e["service-message__action"], href: r, ref: n, target: m, children: [
-        l,
-        /* @__PURE__ */ s(H, { size: N.XSmall, svgIcon: F, color: I("blueberry", 700), isHovered: g })
+};
+const Content = ({ info, extraInfo, urlTitle, url, target, dismissable, closeBtnText, onDismiss }) => {
+  const { hoverRef: readMoreRef, isHovered: readMoreHoverRefIsHovered } = useHover();
+  const { hoverRef: closeButtonRef, isHovered: closeButtonIsHovered } = useHover();
+  const hasUrl = url && urlTitle;
+  return /* @__PURE__ */ jsx("div", { className: styles["service-message__container"], children: /* @__PURE__ */ jsx("div", { className: styles["service-message__row"], children: /* @__PURE__ */ jsx("div", { className: styles["service-message__col"], children: /* @__PURE__ */ jsxs("div", { className: styles["service-message__content"], children: [
+    info && /* @__PURE__ */ jsx("p", { className: styles["service-message__info"], children: info }),
+    extraInfo && /* @__PURE__ */ jsx("p", { className: classNames(styles["service-message__info"], styles["service-message__info--extra"]), children: extraInfo }),
+    /* @__PURE__ */ jsxs("div", { className: styles["service-message__actions"], children: [
+      hasUrl && /* @__PURE__ */ jsxs("a", { className: styles["service-message__action"], href: url, ref: readMoreRef, target, children: [
+        urlTitle,
+        /* @__PURE__ */ jsx(Icon, { size: IconSize.XSmall, svgIcon: Forward, color: getColor("blueberry", 700), isHovered: readMoreHoverRefIsHovered })
       ] }),
-      v && /* @__PURE__ */ d(
+      dismissable && /* @__PURE__ */ jsxs(
         "button",
         {
-          ref: o,
-          className: h(e["service-message__action"], e["service-message__action--close"]),
-          "aria-label": t,
-          onClick: _,
+          ref: closeButtonRef,
+          className: classNames(styles["service-message__action"], styles["service-message__action--close"]),
+          "aria-label": closeBtnText,
+          onClick: onDismiss,
           children: [
-            t,
-            /* @__PURE__ */ s(H, { size: N.XSmall, svgIcon: $, color: I("blueberry", 700), isHovered: f })
+            closeBtnText,
+            /* @__PURE__ */ jsx(Icon, { size: IconSize.XSmall, svgIcon: X, color: getColor("blueberry", 700), isHovered: closeButtonIsHovered })
           ]
         }
       )
     ] })
   ] }) }) }) });
-}, ae = ({
-  label: a,
-  dismissable: c = !0,
-  onDismiss: l,
-  info: r,
-  extraInfo: m,
-  urlTitle: v,
-  url: t,
-  target: _ = "_self",
-  closeBtnText: n = "fjern melding",
-  expanderOpenFromStart: g = !1,
-  variant: o = "error",
-  testId: f
+};
+const ServiceMessage = ({
+  label,
+  dismissable = true,
+  onDismiss,
+  info,
+  extraInfo,
+  urlTitle,
+  url,
+  target = "_self",
+  closeBtnText = "fjern melding",
+  expanderOpenFromStart = false,
+  variant = "error",
+  testId
 }) => {
-  const [i, b] = w(g), p = X(), u = !!r || !!m, S = o === "error" ? "alert" : "region", k = y({ label: a, id: p }), R = () => {
-    u && b(!i);
-  }, z = h(e["service-message"], e[`service-message--${o}`]);
-  return /* @__PURE__ */ d("div", { className: z, role: S, ...k, "data-testid": f, children: [
-    /* @__PURE__ */ s(
-      q,
+  const [isExpanded, setIsExpanded] = useState(expanderOpenFromStart);
+  const labelId = useUuid();
+  const hasExpander = !!info || !!extraInfo;
+  const ariaRole = variant === "error" ? "alert" : "region";
+  const ariaLabelAttributes = getAriaLabelAttributes({ label, id: labelId });
+  const handleClick = () => {
+    hasExpander && setIsExpanded(!isExpanded);
+  };
+  const classes = classNames(styles["service-message"], styles[`service-message--${variant}`]);
+  return /* @__PURE__ */ jsxs("div", { className: classes, role: ariaRole, ...ariaLabelAttributes, "data-testid": testId, children: [
+    /* @__PURE__ */ jsx(
+      Label,
       {
-        label: a,
-        variant: o,
-        id: p,
-        hasExpander: u,
-        isExpanded: i,
-        dismissable: c,
-        onExpand: R,
-        onDismiss: l,
-        closeBtnText: n
+        label,
+        variant,
+        id: labelId,
+        hasExpander,
+        isExpanded,
+        dismissable,
+        onExpand: handleClick,
+        onDismiss,
+        closeBtnText
       }
     ),
-    u && i && /* @__PURE__ */ s(
-      x,
+    hasExpander && isExpanded && /* @__PURE__ */ jsx(
+      Content,
       {
-        info: r,
-        extraInfo: m,
-        urlTitle: v,
-        url: t,
-        target: _,
-        dismissable: c,
-        onDismiss: l,
-        closeBtnText: n
+        info,
+        extraInfo,
+        urlTitle,
+        url,
+        target,
+        dismissable,
+        onDismiss,
+        closeBtnText
       }
     )
   ] });
 };
 export {
-  ae as default
+  ServiceMessage as default
 };
 //# sourceMappingURL=index.js.map

package/components/ServiceMessage/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/ServiceMessage/ServiceMessage.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { AnchorLinkTargets } from '../AnchorLink';\nimport NotificationBadge from '../Badge/NotificationBadge';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Forward from '../Icons/Forward';\nimport X from '../Icons/X';\nimport { NotificationPanelVariants } from '../NotificationPanel';\n\nimport styles from './styles.module.scss';\n\ninterface LabelProps {\n  label: string;\n  variant: NotificationPanelVariants;\n  id: string;\n  hasExpander: boolean;\n  isExpanded: boolean;\n  dismissable: boolean;\n  onExpand: () => void;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Label: React.FC<LabelProps> = ({ label, variant, id, hasExpander, isExpanded, dismissable, onExpand, onDismiss, closeBtnText }) => {\n  const breakpoint = useBreakpoint();\n  const { isHovered, hoverRef } = useHover<HTMLDivElement>();\n\n  const iconSize = breakpoint < breakpoints.lg ? IconSize.XSmall : IconSize.Small;\n  const CustomTag = hasExpander ? 'button' : 'span';\n\n  const labelContainerClasses = classNames(\n    styles['service-message__label-container'],\n    hasExpander && styles[`service-message__label-container--has-expander`]\n  );\n\n  return (\n    <div className={labelContainerClasses} ref={hoverRef}>\n      <div className={styles['service-message__container']}>\n        <div className={styles['service-message__row']}>\n          <div className={styles['service-message__col']}>\n            <div className={styles['service-message__label']}>\n              <NotificationBadge variant={variant} size={iconSize} isHovered={isHovered} />\n              <h1 className={styles['service-message__title']} id={id}>\n                <CustomTag\n                  className={styles['service-message__toggle']}\n                  onClick={hasExpander ? onExpand : undefined}\n                  aria-expanded={hasExpander ? isExpanded : undefined}\n                >\n                  {label}\n                </CustomTag>\n              </h1>\n              {hasExpander && <Icon size={iconSize} svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} />}\n              {!hasExpander && dismissable && (\n                <Close onClick={onDismiss} ariaLabel={closeBtnText} className={styles['service-message__close']} />\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\ninterface ContentProps {\n  info?: string;\n  extraInfo?: string;\n  urlTitle?: string;\n  url?: string;\n  target?: AnchorLinkTargets;\n  dismissable: boolean;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Content: React.FC<ContentProps> = ({ info, extraInfo, urlTitle, url, target, dismissable, closeBtnText, onDismiss }) => {\n  const { hoverRef: readMoreRef, isHovered: readMoreHoverRefIsHovered } = useHover<HTMLAnchorElement>();\n  const { hoverRef: closeButtonRef, isHovered: closeButtonIsHovered } = useHover<HTMLButtonElement>();\n\n  const hasUrl = url && urlTitle;\n\n  return (\n    <div className={styles['service-message__container']}>\n      <div className={styles['service-message__row']}>\n        <div className={styles['service-message__col']}>\n          <div className={styles['service-message__content']}>\n            {info && <p className={styles['service-message__info']}>{info}</p>}\n            {extraInfo && (\n              <p className={classNames(styles['service-message__info'], styles['service-message__info--extra'])}>{extraInfo}</p>\n            )}\n            <div className={styles['service-message__actions']}>\n              {hasUrl && (\n                <a className={styles['service-message__action']} href={url} ref={readMoreRef} target={target}>\n                  {urlTitle}\n                  <Icon size={IconSize.XSmall} svgIcon={Forward} color={getColor('blueberry', 700)} isHovered={readMoreHoverRefIsHovered} />\n                </a>\n              )}\n\n              {dismissable && (\n                <button\n                  ref={closeButtonRef}\n                  className={classNames(styles['service-message__action'], styles['service-message__action--close'])}\n                  aria-label={closeBtnText}\n                  onClick={onDismiss}\n                >\n                  {closeBtnText}\n                  <Icon size={IconSize.XSmall} svgIcon={X} color={getColor('blueberry', 700)} isHovered={closeButtonIsHovered} />\n                </button>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport interface ServiceMessageProps {\n  /** Sets a label for the notification panel. */\n  label: string;\n  /** String displayed in service-message when expanded */\n  info?: string;\n  /** String displayed in service-message when expanded, with a smaller font */\n  extraInfo?: string;\n  /** function that runs on dismiss */\n  onDismiss?: () => void;\n  /** Allows for dismiss to be an option, also for ServiceMessage with only label as content */\n  dismissable?: boolean;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Name that describes a url-link for the user*/\n  urlTitle?: string;\n  /** Url for further information*/\n  url?: string;\n  /** Sets target for the anchorlink to the url*/\n  target?: AnchorLinkTargets;\n  /** Text on close-button in service messages. */\n  closeBtnText?: string;\n  /** Changes the visual representation. */\n  variant?: NotificationPanelVariants;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst ServiceMessage: React.FC<ServiceMessageProps> = ({\n  label,\n  dismissable = true,\n  onDismiss,\n  info,\n  extraInfo,\n  urlTitle,\n  url,\n  target = '_self',\n  closeBtnText = 'fjern melding',\n  expanderOpenFromStart = false,\n  variant = 'error',\n  testId,\n}) => {\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanderOpenFromStart);\n\n  const labelId = useUuid();\n  const hasExpander = !!info || !!extraInfo;\n\n  const ariaRole = variant === 'error' ? 'alert' : 'region';\n  const ariaLabelAttributes = getAriaLabelAttributes({ label, id: labelId });\n\n  const handleClick = (): void => {\n    hasExpander && setIsExpanded(!isExpanded);\n  };\n\n  const classes = classNames(styles['service-message'], styles[`service-message--${variant}`]);\n\n  return (\n    <div className={classes} role={ariaRole} {...ariaLabelAttributes} data-testid={testId}>\n      <Label\n        label={label}\n        variant={variant}\n        id={labelId}\n        hasExpander={hasExpander}\n        isExpanded={isExpanded}\n        dismissable={dismissable}\n        onExpand={handleClick}\n        onDismiss={onDismiss}\n        closeBtnText={closeBtnText}\n      />\n      {hasExpander && isExpanded && (\n        <Content\n          info={info}\n          extraInfo={extraInfo}\n          urlTitle={urlTitle}\n          url={url}\n          target={target}\n          dismissable={dismissable}\n          onDismiss={onDismiss}\n          closeBtnText={closeBtnText}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default ServiceMessage;\n"],"names":["Label","label","variant","id","hasExpander","isExpanded","dismissable","onExpand","onDismiss","closeBtnText","breakpoint","useBreakpoint","isHovered","hoverRef","useHover","iconSize","breakpoints","IconSize","CustomTag","labelContainerClasses","classNames","styles","jsx","jsxs","NotificationBadge","Icon","ChevronUp","ChevronDown","Close","Content","info","extraInfo","urlTitle","url","target","readMoreRef","readMoreHoverRefIsHovered","closeButtonRef","closeButtonIsHovered","hasUrl","Forward","getColor","X","ServiceMessage","expanderOpenFromStart","testId","setIsExpanded","useState","labelId","useUuid","ariaRole","ariaLabelAttributes","getAriaLabelAttributes","handleClick","classes"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/ServiceMessage/ServiceMessage.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { AnchorLinkTargets } from '../AnchorLink';\nimport NotificationBadge from '../Badge/NotificationBadge';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Forward from '../Icons/Forward';\nimport X from '../Icons/X';\nimport { NotificationPanelVariants } from '../NotificationPanel';\n\nimport styles from './styles.module.scss';\n\ninterface LabelProps {\n  label: string;\n  variant: NotificationPanelVariants;\n  id: string;\n  hasExpander: boolean;\n  isExpanded: boolean;\n  dismissable: boolean;\n  onExpand: () => void;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Label: React.FC<LabelProps> = ({ label, variant, id, hasExpander, isExpanded, dismissable, onExpand, onDismiss, closeBtnText }) => {\n  const breakpoint = useBreakpoint();\n  const { isHovered, hoverRef } = useHover<HTMLDivElement>();\n\n  const iconSize = breakpoint < breakpoints.lg ? IconSize.XSmall : IconSize.Small;\n  const CustomTag = hasExpander ? 'button' : 'span';\n\n  const labelContainerClasses = classNames(\n    styles['service-message__label-container'],\n    hasExpander && styles[`service-message__label-container--has-expander`]\n  );\n\n  return (\n    <div className={labelContainerClasses} ref={hoverRef}>\n      <div className={styles['service-message__container']}>\n        <div className={styles['service-message__row']}>\n          <div className={styles['service-message__col']}>\n            <div className={styles['service-message__label']}>\n              <NotificationBadge variant={variant} size={iconSize} isHovered={isHovered} />\n              <h1 className={styles['service-message__title']} id={id}>\n                <CustomTag\n                  className={styles['service-message__toggle']}\n                  onClick={hasExpander ? onExpand : undefined}\n                  aria-expanded={hasExpander ? isExpanded : undefined}\n                >\n                  {label}\n                </CustomTag>\n              </h1>\n              {hasExpander && <Icon size={iconSize} svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} />}\n              {!hasExpander && dismissable && (\n                <Close onClick={onDismiss} ariaLabel={closeBtnText} className={styles['service-message__close']} />\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\ninterface ContentProps {\n  info?: string;\n  extraInfo?: string;\n  urlTitle?: string;\n  url?: string;\n  target?: AnchorLinkTargets;\n  dismissable: boolean;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Content: React.FC<ContentProps> = ({ info, extraInfo, urlTitle, url, target, dismissable, closeBtnText, onDismiss }) => {\n  const { hoverRef: readMoreRef, isHovered: readMoreHoverRefIsHovered } = useHover<HTMLAnchorElement>();\n  const { hoverRef: closeButtonRef, isHovered: closeButtonIsHovered } = useHover<HTMLButtonElement>();\n\n  const hasUrl = url && urlTitle;\n\n  return (\n    <div className={styles['service-message__container']}>\n      <div className={styles['service-message__row']}>\n        <div className={styles['service-message__col']}>\n          <div className={styles['service-message__content']}>\n            {info && <p className={styles['service-message__info']}>{info}</p>}\n            {extraInfo && (\n              <p className={classNames(styles['service-message__info'], styles['service-message__info--extra'])}>{extraInfo}</p>\n            )}\n            <div className={styles['service-message__actions']}>\n              {hasUrl && (\n                <a className={styles['service-message__action']} href={url} ref={readMoreRef} target={target}>\n                  {urlTitle}\n                  <Icon size={IconSize.XSmall} svgIcon={Forward} color={getColor('blueberry', 700)} isHovered={readMoreHoverRefIsHovered} />\n                </a>\n              )}\n\n              {dismissable && (\n                <button\n                  ref={closeButtonRef}\n                  className={classNames(styles['service-message__action'], styles['service-message__action--close'])}\n                  aria-label={closeBtnText}\n                  onClick={onDismiss}\n                >\n                  {closeBtnText}\n                  <Icon size={IconSize.XSmall} svgIcon={X} color={getColor('blueberry', 700)} isHovered={closeButtonIsHovered} />\n                </button>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport interface ServiceMessageProps {\n  /** Sets a label for the notification panel. */\n  label: string;\n  /** String displayed in service-message when expanded */\n  info?: string;\n  /** String displayed in service-message when expanded, with a smaller font */\n  extraInfo?: string;\n  /** function that runs on dismiss */\n  onDismiss?: () => void;\n  /** Allows for dismiss to be an option, also for ServiceMessage with only label as content */\n  dismissable?: boolean;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Name that describes a url-link for the user*/\n  urlTitle?: string;\n  /** Url for further information*/\n  url?: string;\n  /** Sets target for the anchorlink to the url*/\n  target?: AnchorLinkTargets;\n  /** Text on close-button in service messages. */\n  closeBtnText?: string;\n  /** Changes the visual representation. */\n  variant?: NotificationPanelVariants;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst ServiceMessage: React.FC<ServiceMessageProps> = ({\n  label,\n  dismissable = true,\n  onDismiss,\n  info,\n  extraInfo,\n  urlTitle,\n  url,\n  target = '_self',\n  closeBtnText = 'fjern melding',\n  expanderOpenFromStart = false,\n  variant = 'error',\n  testId,\n}) => {\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanderOpenFromStart);\n\n  const labelId = useUuid();\n  const hasExpander = !!info || !!extraInfo;\n\n  const ariaRole = variant === 'error' ? 'alert' : 'region';\n  const ariaLabelAttributes = getAriaLabelAttributes({ label, id: labelId });\n\n  const handleClick = (): void => {\n    hasExpander && setIsExpanded(!isExpanded);\n  };\n\n  const classes = classNames(styles['service-message'], styles[`service-message--${variant}`]);\n\n  return (\n    <div className={classes} role={ariaRole} {...ariaLabelAttributes} data-testid={testId}>\n      <Label\n        label={label}\n        variant={variant}\n        id={labelId}\n        hasExpander={hasExpander}\n        isExpanded={isExpanded}\n        dismissable={dismissable}\n        onExpand={handleClick}\n        onDismiss={onDismiss}\n        closeBtnText={closeBtnText}\n      />\n      {hasExpander && isExpanded && (\n        <Content\n          info={info}\n          extraInfo={extraInfo}\n          urlTitle={urlTitle}\n          url={url}\n          target={target}\n          dismissable={dismissable}\n          onDismiss={onDismiss}\n          closeBtnText={closeBtnText}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default ServiceMessage;\n"],"names":[],"mappings":"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"}

package/components/SharingStatus/SharingStatus.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { PaletteNames } from '../../theme/palette';
 import { SvgIcon } from '../Icon';
 export type SharingStatusColor = Extract<PaletteNames, 'kiwi' | 'cherry' | 'neutral'>;

package/components/SharingStatus/index.d.ts

@@ -1,3 +1,3 @@
-import SharingStatus from './SharingStatus';
+import { default as SharingStatus } from './SharingStatus';
 export * from './SharingStatus';
 export default SharingStatus;

package/components/SharingStatus/index.js

@@ -1,19 +1,22 @@
-import { jsxs as p, jsx as a } from "react/jsx-runtime";
-import t from "classnames";
-import { AnalyticsId as u, IconSize as g } from "../../constants.js";
-import { palette as _ } from "../../theme/palette.js";
-import { I as f } from "../../Icon.js";
-import s from "./styles.module.scss";
-const y = (l) => {
-  const { color: r = "neutral", icon: o, children: e, className: n, testId: i, wrapText: c } = l, m = t(s["sharing-status"], n), d = t(s["sharing-status__dot"], s[`sharing-status__dot--${r}`]), h = t(s["sharing-status__label"], s[`sharing-status__label--${r}`], {
-    [s["sharing-status__label--wrap"]]: c
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { AnalyticsId, IconSize } from "../../constants.js";
+import { palette } from "../../theme/palette.js";
+import { I as Icon } from "../../Icon.js";
+import styles from "./styles.module.scss";
+const SharingStatus = (props) => {
+  const { color = "neutral", icon, children, className, testId, wrapText } = props;
+  const sharingStatusClasses = classNames(styles["sharing-status"], className);
+  const dotClasses = classNames(styles["sharing-status__dot"], styles[`sharing-status__dot--${color}`]);
+  const labelClasses = classNames(styles["sharing-status__label"], styles[`sharing-status__label--${color}`], {
+    [styles["sharing-status__label--wrap"]]: wrapText
   });
-  return /* @__PURE__ */ p("span", { className: m, "data-testid": i, "data-analyticsid": u.SharingStatus, children: [
-    /* @__PURE__ */ a("span", { className: d, children: /* @__PURE__ */ a(f, { color: _.white, svgIcon: o, size: g.XXSmall }) }),
-    /* @__PURE__ */ a("span", { className: h, children: e })
+  return /* @__PURE__ */ jsxs("span", { className: sharingStatusClasses, "data-testid": testId, "data-analyticsid": AnalyticsId.SharingStatus, children: [
+    /* @__PURE__ */ jsx("span", { className: dotClasses, children: /* @__PURE__ */ jsx(Icon, { color: palette.white, svgIcon: icon, size: IconSize.XXSmall }) }),
+    /* @__PURE__ */ jsx("span", { className: labelClasses, children })
   ] });
 };
 export {
-  y as default
+  SharingStatus as default
 };
 //# sourceMappingURL=index.js.map

package/components/SharingStatus/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/SharingStatus/SharingStatus.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { PaletteNames, palette } from '../../theme/palette';\nimport Icon, { SvgIcon } from '../Icon';\n\nimport styles from './styles.module.scss';\n\nexport type SharingStatusColor = Extract<PaletteNames, 'kiwi' | 'cherry' | 'neutral'>;\n\nexport interface SharingStatusProps {\n  /** Color choices represent variants of sharingstatus */\n  color?: SharingStatusColor;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Icon to be displayed next to the sharingstatus */\n  icon: SvgIcon;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the text placed to the right of the sharingstatus */\n  children: string;\n  /** turn on and off word wrapping */\n  wrapText?: boolean;\n}\n\nconst SharingStatus: React.FC<SharingStatusProps> = props => {\n  const { color = 'neutral', icon, children, className, testId, wrapText } = props;\n\n  const sharingStatusClasses = classNames(styles['sharing-status'], className);\n  const dotClasses = classNames(styles['sharing-status__dot'], styles[`sharing-status__dot--${color}`]);\n  const labelClasses = classNames(styles['sharing-status__label'], styles[`sharing-status__label--${color}`], {\n    [styles['sharing-status__label--wrap']]: wrapText,\n  });\n\n  return (\n    <span className={sharingStatusClasses} data-testid={testId} data-analyticsid={AnalyticsId.SharingStatus}>\n      <span className={dotClasses}>\n        <Icon color={palette.white} svgIcon={icon} size={IconSize.XXSmall} />\n      </span>\n      <span className={labelClasses}>{children}</span>\n    </span>\n  );\n};\n\nexport default SharingStatus;\n"],"names":["SharingStatus","props","color","icon","children","className","testId","wrapText","sharingStatusClasses","classNames","styles","dotClasses","labelClasses","jsxs","AnalyticsId","jsx","Icon","palette","IconSize"],"mappings":";;;;;;AA2BA,MAAMA,IAA8C,CAASC,MAAA;AACrD,QAAA,EAAE,OAAAC,IAAQ,WAAW,MAAAC,GAAM,UAAAC,GAAU,WAAAC,GAAW,QAAAC,GAAQ,UAAAC,EAAa,IAAAN,GAErEO,IAAuBC,EAAWC,EAAO,gBAAgB,GAAGL,CAAS,GACrEM,IAAaF,EAAWC,EAAO,qBAAqB,GAAGA,EAAO,wBAAwBR,CAAK,EAAE,CAAC,GAC9FU,IAAeH,EAAWC,EAAO,uBAAuB,GAAGA,EAAO,0BAA0BR,CAAK,EAAE,GAAG;AAAA,IAC1G,CAACQ,EAAO,6BAA6B,CAAC,GAAGH;AAAA,EAAA,CAC1C;AAGC,SAAA,gBAAAM,EAAC,UAAK,WAAWL,GAAsB,eAAaF,GAAQ,oBAAkBQ,EAAY,eACxF,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAK,EAAA,WAAWJ,GACf,UAAA,gBAAAI,EAACC,GAAK,EAAA,OAAOC,EAAQ,OAAO,SAASd,GAAM,MAAMe,EAAS,QAAS,CAAA,GACrE;AAAA,IACC,gBAAAH,EAAA,QAAA,EAAK,WAAWH,GAAe,UAAAR,EAAS,CAAA;AAAA,EAC3C,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/SharingStatus/SharingStatus.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { PaletteNames, palette } from '../../theme/palette';\nimport Icon, { SvgIcon } from '../Icon';\n\nimport styles from './styles.module.scss';\n\nexport type SharingStatusColor = Extract<PaletteNames, 'kiwi' | 'cherry' | 'neutral'>;\n\nexport interface SharingStatusProps {\n  /** Color choices represent variants of sharingstatus */\n  color?: SharingStatusColor;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Icon to be displayed next to the sharingstatus */\n  icon: SvgIcon;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the text placed to the right of the sharingstatus */\n  children: string;\n  /** turn on and off word wrapping */\n  wrapText?: boolean;\n}\n\nconst SharingStatus: React.FC<SharingStatusProps> = props => {\n  const { color = 'neutral', icon, children, className, testId, wrapText } = props;\n\n  const sharingStatusClasses = classNames(styles['sharing-status'], className);\n  const dotClasses = classNames(styles['sharing-status__dot'], styles[`sharing-status__dot--${color}`]);\n  const labelClasses = classNames(styles['sharing-status__label'], styles[`sharing-status__label--${color}`], {\n    [styles['sharing-status__label--wrap']]: wrapText,\n  });\n\n  return (\n    <span className={sharingStatusClasses} data-testid={testId} data-analyticsid={AnalyticsId.SharingStatus}>\n      <span className={dotClasses}>\n        <Icon color={palette.white} svgIcon={icon} size={IconSize.XXSmall} />\n      </span>\n      <span className={labelClasses}>{children}</span>\n    </span>\n  );\n};\n\nexport default SharingStatus;\n"],"names":[],"mappings":";;;;;;AA2BA,MAAM,gBAA8C,CAAS,UAAA;AACrD,QAAA,EAAE,QAAQ,WAAW,MAAM,UAAU,WAAW,QAAQ,aAAa;AAE3E,QAAM,uBAAuB,WAAW,OAAO,gBAAgB,GAAG,SAAS;AACrE,QAAA,aAAa,WAAW,OAAO,qBAAqB,GAAG,OAAO,wBAAwB,KAAK,EAAE,CAAC;AAC9F,QAAA,eAAe,WAAW,OAAO,uBAAuB,GAAG,OAAO,0BAA0B,KAAK,EAAE,GAAG;AAAA,IAC1G,CAAC,OAAO,6BAA6B,CAAC,GAAG;AAAA,EAAA,CAC1C;AAGC,SAAA,qBAAC,UAAK,WAAW,sBAAsB,eAAa,QAAQ,oBAAkB,YAAY,eACxF,UAAA;AAAA,IAAA,oBAAC,QAAK,EAAA,WAAW,YACf,UAAA,oBAAC,MAAK,EAAA,OAAO,QAAQ,OAAO,SAAS,MAAM,MAAM,SAAS,QAAS,CAAA,GACrE;AAAA,IACC,oBAAA,QAAA,EAAK,WAAW,cAAe,SAAS,CAAA;AAAA,EAAA,GAC3C;AAEJ;"}

package/components/Slider/Slider.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { ErrorWrapperClassNameProps } from '../ErrorWrapper';
 export type SliderStep = {
     label?: number | string;

package/components/Slider/index.d.ts

@@ -1,3 +1,3 @@
-import Slider from './Slider';
+import { default as Slider } from './Slider';
 export * from './Slider';
 export default Slider;

package/components/Slider/index.js

@@ -1,6 +1,6 @@
-import { S as a } from "../../Slider.js";
+import { S as Slider } from "../../Slider.js";
 export {
-  a as Slider,
-  a as default
+  Slider,
+  Slider as default
 };
 //# sourceMappingURL=index.js.map

package/components/Spacer/Spacer.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { SpacerSizes } from './../../theme/spacers';
 export interface SpacerProps {
     /** Sets the size of the spacer. */

package/components/Spacer/index.d.ts

@@ -1,3 +1,3 @@
-import Spacer from './Spacer';
+import { default as Spacer } from './Spacer';
 export * from './Spacer';
 export default Spacer;

package/components/Spacer/index.js

@@ -1,5 +1,5 @@
-import { S as r } from "../../Spacer.js";
+import { S as Spacer } from "../../Spacer.js";
 export {
-  r as default
+  Spacer as default
 };
 //# sourceMappingURL=index.js.map

package/components/StatusDot/StatusDot.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 export declare enum StatusDotOnColor {
     onwhite = "onwhite",
     ondark = "ondark"

package/components/StatusDot/index.d.ts

@@ -1,3 +1,3 @@
-import StatusDot from './StatusDot';
+import { default as StatusDot } from './StatusDot';
 export * from './StatusDot';
 export default StatusDot;

package/components/StatusDot/index.js

@@ -1,8 +1,8 @@
-import { S as a } from "../../StatusDot.js";
-import { a as s, b as u } from "../../StatusDot.js";
+import { S as StatusDot } from "../../StatusDot.js";
+import { a, b } from "../../StatusDot.js";
 export {
-  s as StatusDotOnColor,
-  u as StatusDotVariant,
-  a as default
+  a as StatusDotOnColor,
+  b as StatusDotVariant,
+  StatusDot as default
 };
 //# sourceMappingURL=index.js.map

package/components/Step/Step.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { ButtonProps } from '../Button';
 import { StepperProps } from '../Stepper';
 export interface StepProps {

package/components/Step/index.d.ts

@@ -1,3 +1,3 @@
-import Step from './Step';
+import { default as Step } from './Step';
 export * from './Step';
 export default Step;

package/components/Step/index.js

@@ -1,34 +1,34 @@
-import { jsxs as l, jsx as s } from "react/jsx-runtime";
-import { AnalyticsId as f } from "../../constants.js";
-import { S as n } from "../../StepButtons.js";
-import m from "./styles.module.scss";
-const h = ({
-  stepper: t,
-  children: p,
-  backButton: e,
-  forwardButton: i,
-  additionalButtons: a,
-  cancelButton: r,
-  stickyButtons: d = !1,
-  testId: o
+import { jsxs, jsx } from "react/jsx-runtime";
+import { AnalyticsId } from "../../constants.js";
+import { S as StepButtons } from "../../StepButtons.js";
+import styles from "./styles.module.scss";
+const Step = ({
+  stepper,
+  children,
+  backButton,
+  forwardButton,
+  additionalButtons,
+  cancelButton,
+  stickyButtons = false,
+  testId
 }) => {
-  const c = e || i || a || r;
-  return /* @__PURE__ */ l("div", { "data-testid": o, "data-analyticsid": f.Step, children: [
-    t && /* @__PURE__ */ s("div", { className: m.step__stepper, children: t }),
-    /* @__PURE__ */ s("div", { className: m.step__content, children: p }),
-    c && /* @__PURE__ */ s(
-      n,
+  const hasNavigation = backButton || forwardButton || additionalButtons || cancelButton;
+  return /* @__PURE__ */ jsxs("div", { "data-testid": testId, "data-analyticsid": AnalyticsId.Step, children: [
+    stepper && /* @__PURE__ */ jsx("div", { className: styles.step__stepper, children: stepper }),
+    /* @__PURE__ */ jsx("div", { className: styles.step__content, children }),
+    hasNavigation && /* @__PURE__ */ jsx(
+      StepButtons,
       {
-        backButton: e,
-        forwardButton: i,
-        additionalButtons: a,
-        cancelButton: r,
-        sticky: d
+        backButton,
+        forwardButton,
+        additionalButtons,
+        cancelButton,
+        sticky: stickyButtons
       }
     )
   ] });
 };
 export {
-  h as default
+  Step as default
 };
 //# sourceMappingURL=index.js.map

package/components/Step/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Step/Step.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../constants';\nimport { ButtonProps } from '../Button';\nimport StepButtons from '../StepButtons';\nimport { StepperProps } from '../Stepper';\n\nimport styles from './styles.module.scss';\n\nexport interface StepProps {\n  /** Stepper viser fremdriften */\n  stepper?: React.ReactElement<StepperProps>;\n  /** Innhold i steget */\n  children: React.ReactNode;\n  /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n  backButton?: React.ReactElement<ButtonProps>;\n  /** Knapp for å gå videre. Vises med \"fill\" variant. */\n  forwardButton?: React.ReactElement<ButtonProps>;\n  /** Ekstra knapper. Valgfritt utseende. */\n  additionalButtons?: React.ReactElement<ButtonProps>[];\n  /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n  cancelButton?: React.ReactElement<ButtonProps>;\n  /** Knappene vil vises sticky nederst på skjermen dersom innholdet i Step tar mer plass enn vinduet. Default: false  */\n  stickyButtons?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Step: React.FC<StepProps> = ({\n  stepper,\n  children,\n  backButton,\n  forwardButton,\n  additionalButtons,\n  cancelButton,\n  stickyButtons = false,\n  testId,\n}) => {\n  const hasNavigation = backButton || forwardButton || additionalButtons || cancelButton;\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.Step}>\n      {stepper && <div className={styles.step__stepper}>{stepper}</div>}\n      <div className={styles.step__content}>{children}</div>\n      {hasNavigation && (\n        <StepButtons\n          backButton={backButton}\n          forwardButton={forwardButton}\n          additionalButtons={additionalButtons}\n          cancelButton={cancelButton}\n          sticky={stickyButtons}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default Step;\n"],"names":["Step","stepper","children","backButton","forwardButton","additionalButtons","cancelButton","stickyButtons","testId","hasNavigation","AnalyticsId","jsx","styles","StepButtons"],"mappings":";;;;AA4BA,MAAMA,IAA4B,CAAC;AAAA,EACjC,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,QAAAC;AACF,MAAM;AACE,QAAAC,IAAgBN,KAAcC,KAAiBC,KAAqBC;AAE1E,2BACG,OAAI,EAAA,eAAaE,GAAQ,oBAAkBE,EAAY,MACrD,UAAA;AAAA,IAAAT,KAAY,gBAAAU,EAAA,OAAA,EAAI,WAAWC,EAAO,eAAgB,UAAQX,GAAA;AAAA,IAC1D,gBAAAU,EAAA,OAAA,EAAI,WAAWC,EAAO,eAAgB,UAAAV,GAAS;AAAA,IAC/CO,KACC,gBAAAE;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,YAAAV;AAAA,QACA,eAAAC;AAAA,QACA,mBAAAC;AAAA,QACA,cAAAC;AAAA,QACA,QAAQC;AAAA,MAAA;AAAA,IACV;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Step/Step.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../constants';\nimport { ButtonProps } from '../Button';\nimport StepButtons from '../StepButtons';\nimport { StepperProps } from '../Stepper';\n\nimport styles from './styles.module.scss';\n\nexport interface StepProps {\n  /** Stepper viser fremdriften */\n  stepper?: React.ReactElement<StepperProps>;\n  /** Innhold i steget */\n  children: React.ReactNode;\n  /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n  backButton?: React.ReactElement<ButtonProps>;\n  /** Knapp for å gå videre. Vises med \"fill\" variant. */\n  forwardButton?: React.ReactElement<ButtonProps>;\n  /** Ekstra knapper. Valgfritt utseende. */\n  additionalButtons?: React.ReactElement<ButtonProps>[];\n  /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n  cancelButton?: React.ReactElement<ButtonProps>;\n  /** Knappene vil vises sticky nederst på skjermen dersom innholdet i Step tar mer plass enn vinduet. Default: false  */\n  stickyButtons?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Step: React.FC<StepProps> = ({\n  stepper,\n  children,\n  backButton,\n  forwardButton,\n  additionalButtons,\n  cancelButton,\n  stickyButtons = false,\n  testId,\n}) => {\n  const hasNavigation = backButton || forwardButton || additionalButtons || cancelButton;\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.Step}>\n      {stepper && <div className={styles.step__stepper}>{stepper}</div>}\n      <div className={styles.step__content}>{children}</div>\n      {hasNavigation && (\n        <StepButtons\n          backButton={backButton}\n          forwardButton={forwardButton}\n          additionalButtons={additionalButtons}\n          cancelButton={cancelButton}\n          sticky={stickyButtons}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default Step;\n"],"names":[],"mappings":";;;;AA4BA,MAAM,OAA4B,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AACF,MAAM;AACE,QAAA,gBAAgB,cAAc,iBAAiB,qBAAqB;AAE1E,8BACG,OAAI,EAAA,eAAa,QAAQ,oBAAkB,YAAY,MACrD,UAAA;AAAA,IAAA,WAAY,oBAAA,OAAA,EAAI,WAAW,OAAO,eAAgB,UAAQ,SAAA;AAAA,IAC1D,oBAAA,OAAA,EAAI,WAAW,OAAO,eAAgB,UAAS;AAAA,IAC/C,iBACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,QAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EACV,GAEJ;AAEJ;"}

package/components/StepButtons/StepButtons.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { ButtonProps } from '../Button';
 export interface StepButtonsProps {
     /** Knapp for å gå tilbake. Vises med "outline" variant. */

package/components/StepButtons/index.d.ts

@@ -1,3 +1,3 @@
-import StepButtons from './StepButtons';
+import { default as StepButtons } from './StepButtons';
 export * from './StepButtons';
 export default StepButtons;

package/components/StepButtons/index.js

@@ -1,6 +1,6 @@
-import { S as o } from "../../StepButtons.js";
+import { S as StepButtons } from "../../StepButtons.js";
 export {
-  o as StepButtons,
-  o as default
+  StepButtons,
+  StepButtons as default
 };
 //# sourceMappingURL=index.js.map

package/components/Stepper/Dot.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 interface DotProps {
     index?: number;
     completed: boolean;

package/components/Stepper/DotList.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 interface DotListProps {
     allowedValues: number[];
     currentValue: number;

package/components/Stepper/Stepper.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 export interface StepperProps {
     /**
      * Sets aria-label of the stepper. ariaLabel or ariaLabelledById MUST be set!