@helsenorge/designsystem-react 7.6.0 → 7.8.0

package/components/NotificationPanel/styles.module.scss.d.ts

@@ -20,6 +20,7 @@ export type Styles = {
   'notification-panel--compact--basic': string;
   'notification-panel--compact--outline': string;
   'notification-panel--dismissable': string;
+  'notification-panel--error': string;
   'notification-panel--info': string;
   'notification-panel--large': string;
   'notification-panel--medium': string;

package/components/ServiceMessage/ServiceMessage.js

@@ -1,101 +1,92 @@
-import e, { useState as R } from "react";
-import u from "classnames";
-import { useBreakpoint as w } from "../../hooks/useBreakpoint.js";
-import { useHover as h } from "../../hooks/useHover.js";
-import { useUuid as y } from "../../hooks/useUuid.js";
-import { getColor as I } from "../../theme/currys/color.js";
-import { breakpoints as M } from "../../theme/grid.js";
-import { palette as t } from "../../theme/palette.js";
-import { getAriaLabelAttributes as X } from "../../utils/accessibility.js";
-import F from "../Close/Close.js";
-import { Icon as n } from "../Icon/Icon.js";
-import { IconSize as N } from "../../constants.js";
-import L from "../Icons/CheckFill.js";
+import e, { useState as h } from "react";
+import p from "classnames";
+import { useBreakpoint as z } from "../../hooks/useBreakpoint.js";
+import { useHover as u } from "../../hooks/useHover.js";
+import { useUuid as w } from "../../hooks/useUuid.js";
+import { getColor as H } from "../../theme/currys/color.js";
+import { breakpoints as L } from "../../theme/grid.js";
+import { getAriaLabelAttributes as M } from "../../utils/accessibility.js";
+import X from "../Badge/NotificationBadge.js";
+import y from "../Close/Close.js";
+import { Icon as C } from "../Icon/Icon.js";
+import { IconSize as E } from "../../constants.js";
 import A from "../Icons/ChevronDown.js";
 import U from "../Icons/ChevronUp.js";
-import $ from "../Icons/ErrorSignFill.js";
-import j from "../Icons/Forward.js";
-import B from "../Icons/InfoSignFill.js";
-import q from "../Icons/TriangleX.js";
-import D from "../Icons/X.js";
-import r from "../ServiceMessage/styles.module.scss";
-const G = ({ label: c, variant: l, id: m, hasExpander: s, isExpanded: i, dismissable: g, onExpand: v, onDismiss: f, closeBtnText: _ }) => {
-  const d = w(), { isHovered: o, hoverRef: p } = h(), a = d < M.lg ? N.XSmall : N.Small, C = {
-    info: /* @__PURE__ */ e.createElement(n, { svgIcon: B, color: t.blueberry700, hoverColor: t.blueberry700, size: a, isHovered: o }),
-    warn: /* @__PURE__ */ e.createElement(n, { svgIcon: $, color: t.banana700, hoverColor: t.banana700, size: a, isHovered: o }),
-    alert: /* @__PURE__ */ e.createElement(n, { svgIcon: q, color: t.cherry700, hoverColor: t.cherry700, size: a, isHovered: o }),
-    success: /* @__PURE__ */ e.createElement(n, { svgIcon: L, color: t.kiwi900, hoverColor: t.kiwi900, size: a, isHovered: o })
-  }, b = s ? "button" : "span", E = u(
-    r["service-message__label-container"],
-    s && r["service-message__label-container--has-expander"]
+import B from "../Icons/Forward.js";
+import $ from "../Icons/X.js";
+import s from "../ServiceMessage/styles.module.scss";
+const j = ({ label: c, variant: t, id: m, hasExpander: r, isExpanded: i, dismissable: v, onExpand: l, onDismiss: _, closeBtnText: n }) => {
+  const g = z(), { isHovered: a, hoverRef: d } = u(), o = g < L.lg ? E.XSmall : E.Small, N = r ? "button" : "span", f = p(
+    s["service-message__label-container"],
+    r && s["service-message__label-container--has-expander"]
   );
-  return /* @__PURE__ */ e.createElement("div", { className: E, ref: p }, /* @__PURE__ */ e.createElement("div", { className: r["service-message__container"] }, /* @__PURE__ */ e.createElement("div", { className: r["service-message__row"] }, /* @__PURE__ */ e.createElement("div", { className: r["service-message__col"] }, /* @__PURE__ */ e.createElement("div", { className: r["service-message__label"] }, C[l], /* @__PURE__ */ e.createElement("h1", { className: r["service-message__title"], id: m }, /* @__PURE__ */ e.createElement(
-    b,
+  return /* @__PURE__ */ e.createElement("div", { className: f, ref: d }, /* @__PURE__ */ e.createElement("div", { className: s["service-message__container"] }, /* @__PURE__ */ e.createElement("div", { className: s["service-message__row"] }, /* @__PURE__ */ e.createElement("div", { className: s["service-message__col"] }, /* @__PURE__ */ e.createElement("div", { className: s["service-message__label"] }, /* @__PURE__ */ e.createElement(X, { variant: t == "alert" ? "error" : t, size: o, isHovered: a }), /* @__PURE__ */ e.createElement("h1", { className: s["service-message__title"], id: m }, /* @__PURE__ */ e.createElement(
+    N,
     {
-      className: r["service-message__toggle"],
-      onClick: s ? v : void 0,
-      "aria-expanded": s ? i : void 0
+      className: s["service-message__toggle"],
+      onClick: r ? l : void 0,
+      "aria-expanded": r ? i : void 0
     },
     c
-  )), s && /* @__PURE__ */ e.createElement(n, { size: a, svgIcon: i ? U : A, isHovered: o }), !s && g && /* @__PURE__ */ e.createElement(F, { onClick: f, ariaLabel: _, className: r["service-message__close"] }))))));
-}, J = ({ info: c, extraInfo: l, urlTitle: m, url: s, target: i, dismissable: g, closeBtnText: v, onDismiss: f }) => {
-  const { hoverRef: _, isHovered: d } = h(), { hoverRef: o, isHovered: p } = h(), a = s && m;
-  return /* @__PURE__ */ e.createElement("div", { className: r["service-message__container"] }, /* @__PURE__ */ e.createElement("div", { className: r["service-message__row"] }, /* @__PURE__ */ e.createElement("div", { className: r["service-message__col"] }, /* @__PURE__ */ e.createElement("div", { className: r["service-message__content"] }, c && /* @__PURE__ */ e.createElement("p", { className: r["service-message__info"] }, c), l && /* @__PURE__ */ e.createElement("p", { className: u(r["service-message__info"], r["service-message__info--extra"]) }, l), /* @__PURE__ */ e.createElement("div", { className: r["service-message__actions"] }, a && /* @__PURE__ */ e.createElement("a", { className: r["service-message__action"], href: s, ref: _, target: i }, m, /* @__PURE__ */ e.createElement(n, { size: N.XSmall, svgIcon: j, color: I("blueberry", 700), isHovered: d })), g && /* @__PURE__ */ e.createElement(
+  )), r && /* @__PURE__ */ e.createElement(C, { size: o, svgIcon: i ? U : A, isHovered: a }), !r && v && /* @__PURE__ */ e.createElement(y, { onClick: _, ariaLabel: n, className: s["service-message__close"] }))))));
+}, F = ({ info: c, extraInfo: t, urlTitle: m, url: r, target: i, dismissable: v, closeBtnText: l, onDismiss: _ }) => {
+  const { hoverRef: n, isHovered: g } = u(), { hoverRef: a, isHovered: d } = u(), o = r && m;
+  return /* @__PURE__ */ e.createElement("div", { className: s["service-message__container"] }, /* @__PURE__ */ e.createElement("div", { className: s["service-message__row"] }, /* @__PURE__ */ e.createElement("div", { className: s["service-message__col"] }, /* @__PURE__ */ e.createElement("div", { className: s["service-message__content"] }, c && /* @__PURE__ */ e.createElement("p", { className: s["service-message__info"] }, c), t && /* @__PURE__ */ e.createElement("p", { className: p(s["service-message__info"], s["service-message__info--extra"]) }, t), /* @__PURE__ */ e.createElement("div", { className: s["service-message__actions"] }, o && /* @__PURE__ */ e.createElement("a", { className: s["service-message__action"], href: r, ref: n, target: i }, m, /* @__PURE__ */ e.createElement(C, { size: E.XSmall, svgIcon: B, color: H("blueberry", 700), isHovered: g })), v && /* @__PURE__ */ e.createElement(
     "button",
     {
-      ref: o,
-      className: u(r["service-message__action"], r["service-message__action--close"]),
-      "aria-label": v,
-      onClick: f
+      ref: a,
+      className: p(s["service-message__action"], s["service-message__action--close"]),
+      "aria-label": l,
+      onClick: _
     },
-    v,
-    /* @__PURE__ */ e.createElement(n, { size: N.XSmall, svgIcon: D, color: I("blueberry", 700), isHovered: p })
+    l,
+    /* @__PURE__ */ e.createElement(C, { size: E.XSmall, svgIcon: $, color: H("blueberry", 700), isHovered: d })
   ))))));
-}, K = ({
+}, q = ({
   label: c,
-  dismissable: l = !0,
+  dismissable: t = !0,
   onDismiss: m,
-  info: s,
+  info: r,
   extraInfo: i,
-  urlTitle: g,
-  url: v,
-  target: f = "_self",
-  closeBtnText: _ = "fjern melding",
-  expanderOpenFromStart: d = !1,
-  variant: o = "alert",
-  testId: p
+  urlTitle: v,
+  url: l,
+  target: _ = "_self",
+  closeBtnText: n = "fjern melding",
+  expanderOpenFromStart: g = !1,
+  variant: a = "error",
+  testId: d
 }) => {
-  const [a, C] = R(d), b = y(), E = !!s || !!i, S = o === "alert" ? "alert" : "region", k = X({ label: c, id: b }), z = () => {
-    E && C(!a);
-  }, H = u(r["service-message"], r[`service-message--${o}`]);
-  return /* @__PURE__ */ e.createElement("div", { className: H, role: S, ...k, "data-testid": p }, /* @__PURE__ */ e.createElement(
-    G,
+  const [o, N] = h(g), f = w(), b = !!r || !!i, S = a === "alert" || a === "error" ? "alert" : "region", R = M({ label: c, id: f }), k = () => {
+    b && N(!o);
+  }, I = p(s["service-message"], s[`service-message--${a}`]);
+  return /* @__PURE__ */ e.createElement("div", { className: I, role: S, ...R, "data-testid": d }, /* @__PURE__ */ e.createElement(
+    j,
     {
       label: c,
-      variant: o,
-      id: b,
-      hasExpander: E,
-      isExpanded: a,
-      dismissable: l,
-      onExpand: z,
+      variant: a,
+      id: f,
+      hasExpander: b,
+      isExpanded: o,
+      dismissable: t,
+      onExpand: k,
       onDismiss: m,
-      closeBtnText: _
+      closeBtnText: n
     }
-  ), E && a && /* @__PURE__ */ e.createElement(
-    J,
+  ), b && o && /* @__PURE__ */ e.createElement(
+    F,
     {
-      info: s,
+      info: r,
       extraInfo: i,
-      urlTitle: g,
-      url: v,
-      target: f,
-      dismissable: l,
+      urlTitle: v,
+      url: l,
+      target: _,
+      dismissable: t,
       onDismiss: m,
-      closeBtnText: _
+      closeBtnText: n
     }
   ));
-}, _e = K;
+}, te = q;
 export {
-  _e as default
+  te as default
 };
 //# sourceMappingURL=ServiceMessage.js.map

package/components/ServiceMessage/ServiceMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ServiceMessage.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 { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { AnchorLinkTargets } from '../AnchorLink';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport CheckFill from '../Icons/CheckFill';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport ErrorSignFill from '../Icons/ErrorSignFill';\nimport Forward from '../Icons/Forward';\nimport InfoSignFill from '../Icons/InfoSignFill';\nimport TriangleX from '../Icons/TriangleX';\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 variantToIconMap = {\n    info: (\n      <Icon svgIcon={InfoSignFill} color={palette.blueberry700} hoverColor={palette.blueberry700} size={iconSize} isHovered={isHovered} />\n    ),\n    warn: <Icon svgIcon={ErrorSignFill} color={palette.banana700} hoverColor={palette.banana700} size={iconSize} isHovered={isHovered} />,\n    alert: <Icon svgIcon={TriangleX} color={palette.cherry700} hoverColor={palette.cherry700} size={iconSize} isHovered={isHovered} />,\n    success: <Icon svgIcon={CheckFill} color={palette.kiwi900} hoverColor={palette.kiwi900} size={iconSize} isHovered={isHovered} />,\n  };\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              {variantToIconMap[variant]}\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 = 'alert',\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 === 'alert' ? '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","variantToIconMap","React","Icon","InfoSignFill","palette","ErrorSignFill","TriangleX","CheckFill","CustomTag","labelContainerClasses","classNames","styles","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","ServiceMessage$1"],"mappings":"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"}
+{"version":3,"file":"ServiceMessage.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 == 'alert' ? 'error' : 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 === 'alert' || 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","React","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","ServiceMessage$1"],"mappings":"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"}

package/components/ServiceMessage/ServiceMessage.stories.d.ts

@@ -21,7 +21,7 @@ declare const meta: {
         url: string;
         target: "_parent";
         closeBtnText: string;
-        variant: "alert";
+        variant: "error";
         testId: string;
     };
     argTypes: {

package/components/ServiceMessage/styles.module.scss

@@ -67,6 +67,19 @@
     }
   }
 
+  &--error {
+    background-color: $cherry50;
+
+    &:hover {
+      background-color: rgba-to-rgb(rgba($cherry500, 0.1), $cherry50);
+    }
+
+    &#{$servicemessage},
+    &#{$servicemessage}__label-container {
+      border-color: $cherry700;
+    }
+  }
+
   &__container {
     @include make-container;
     @include make-container-max-widths;

package/components/ServiceMessage/styles.module.scss.d.ts

@@ -16,6 +16,7 @@ export type Styles = {
   'service-message__title': string;
   'service-message__toggle': string;
   'service-message--alert': string;
+  'service-message--error': string;
   'service-message--info': string;
   'service-message--success': string;
   'service-message--warn': string;

package/components/Tabs/Tab.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { SvgIcon } from '../Icon';
+import { IconName } from '../Icons/IconNames';
+export interface TabProps {
+    /** Sets the tab panel content */
+    children?: React.ReactNode;
+    /** Optional icon on the tab */
+    icon?: SvgIcon | IconName;
+    /** Called when tab is selected */
+    onTabClick?: (index: number) => void;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Title on the tab */
+    title?: string;
+}
+declare const Tab: React.FC<TabProps>;
+export default Tab;

package/components/Tabs/Tab.js

@@ -0,0 +1,6 @@
+import e from "react";
+const a = (t) => /* @__PURE__ */ e.createElement(e.Fragment, null, t.children ?? null), n = a;
+export {
+  n as default
+};
+//# sourceMappingURL=Tab.js.map

package/components/Tabs/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.js","sources":["../../../src/components/Tabs/Tab.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\n\nexport interface TabProps {\n  /** Sets the tab panel content */\n  children?: React.ReactNode;\n  /** Optional icon on the tab */\n  icon?: SvgIcon | IconName;\n  /** Called when tab is selected */\n  onTabClick?: (index: number) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Title on the tab */\n  title?: string;\n}\n\nconst Tab: React.FC<TabProps> = props => {\n  return <>{props.children ?? null}</>;\n};\n\nexport default Tab;\n"],"names":["Tab","props","React","Tab$1"],"mappings":";AAkBA,MAAMA,IAA0B,CAASC,MAChCC,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAGD,EAAM,YAAY,IAAK,GAGnCE,IAAeH;"}

package/components/Tabs/TabList/TabList.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { TabsColors, TabsType } from '../Tabs';
+interface TabListProps {
+    children: React.ReactNode;
+    onTabListClick: (index: number) => void;
+    selectedTab: number;
+    color?: TabsColors;
+    type?: TabsType;
+}
+declare const TabList: React.FC<TabListProps>;
+export default TabList;

package/components/Tabs/TabList/TabList.js

@@ -0,0 +1,51 @@
+import t, { useRef as p } from "react";
+import u from "classnames";
+import { useRovingFocus as N } from "../../../hooks/useRovingFocus.js";
+import { palette as s } from "../../../theme/palette.js";
+import { isComponent as $ } from "../../../utils/component.js";
+import { uuid as L } from "../../../utils/uuid.js";
+import { Icon as S } from "../../Icon/Icon.js";
+import { IconSize as _ } from "../../../constants.js";
+import g from "../../LazyIcon/LazyIcon.js";
+import v from "../Tab.js";
+import e from "../../Tabs/TabList/styles.module.scss";
+const X = (d) => {
+  const { selectedTab: C, onTabListClick: i, children: n, color: k = "white", type: y = "normal" } = d, c = p(null), l = p(t.Children.map(n, () => t.createRef()));
+  N(i, l, c, !0);
+  const R = u(e["tab-list"], e[`tab-list--${y}`]), E = L();
+  return /* @__PURE__ */ t.createElement("ul", { className: R, ref: c, role: "tablist", "aria-orientation": "horizontal" }, t.Children.map(n, (m, o) => {
+    if ($(m, v)) {
+      const r = o === C, { title: b, onTabClick: f, icon: a, testId: T } = m.props, h = () => {
+        f && f(o), i(o);
+      }, z = u(e["tab-list__tab"], e[`tab-list__tab--${k}`], {
+        [e["tab-list__tab--selected"]]: r,
+        [e["tab-list__tab--first"]]: o == 0
+      }), I = l.current && l.current[o];
+      return /* @__PURE__ */ t.createElement("li", { role: "presentation" }, /* @__PURE__ */ t.createElement(
+        "button",
+        {
+          role: "tab",
+          "aria-selected": r,
+          onClick: h,
+          className: z,
+          key: `${b}-${E}`,
+          "data-testid": T,
+          ref: I
+        },
+        /* @__PURE__ */ t.createElement("span", { className: e["tab-list__tab__title-and-icon"] }, a && (typeof a == "string" ? /* @__PURE__ */ t.createElement(
+          g,
+          {
+            iconName: a,
+            size: _.XSmall,
+            color: r ? s.black : s.blueberry500
+          }
+        ) : /* @__PURE__ */ t.createElement(S, { svgIcon: a, size: _.XSmall, color: r ? s.black : s.blueberry500 })), b)
+      ));
+    }
+    return null;
+  }));
+}, M = X;
+export {
+  M as default
+};
+//# sourceMappingURL=TabList.js.map

package/components/Tabs/TabList/TabList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.js","sources":["../../../../src/components/Tabs/TabList/TabList.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useRovingFocus } from '../../../hooks/useRovingFocus';\nimport { palette } from '../../../theme/palette';\nimport { isComponent } from '../../../utils/component';\nimport uuid from '../../../utils/uuid';\nimport Icon, { IconSize } from '../../Icon';\nimport { IconName } from '../../Icons/IconNames';\nimport LazyIcon from '../../LazyIcon';\nimport Tab from '../Tab';\nimport { TabsColors, TabsType } from '../Tabs';\n\nimport styles from './styles.module.scss';\ninterface TabListProps {\n  children: React.ReactNode;\n  onTabListClick: (index: number) => void;\n  selectedTab: number;\n  color?: TabsColors;\n  type?: TabsType;\n}\n\nconst TabList: React.FC<TabListProps> = props => {\n  const { selectedTab, onTabListClick, children, color = 'white', type = 'normal' } = props;\n\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const tabRefs = useRef(React.Children.map(children, () => React.createRef<HTMLButtonElement>()));\n  useRovingFocus(onTabListClick, tabRefs, listRef, true);\n\n  const tablistClasses = classNames(styles['tab-list'], styles[`tab-list--${type}`]);\n\n  const id = uuid();\n\n  return (\n    <ul className={tablistClasses} ref={listRef} role=\"tablist\" aria-orientation=\"horizontal\">\n      {React.Children.map(children, (child, index) => {\n        if (isComponent(child, Tab)) {\n          const isSelected = index === selectedTab;\n          const { title, onTabClick, icon, testId } = child.props;\n          const handleClick = (): void => {\n            onTabClick && onTabClick(index);\n            onTabListClick(index);\n          };\n          const tabButtonClasses = classNames(styles['tab-list__tab'], styles[`tab-list__tab--${color}`], {\n            [styles['tab-list__tab--selected']]: isSelected,\n            [styles['tab-list__tab--first']]: index == 0,\n          });\n\n          const currentRef = tabRefs.current && tabRefs.current[index];\n\n          return (\n            <li role=\"presentation\">\n              <button\n                role=\"tab\"\n                aria-selected={isSelected}\n                onClick={handleClick}\n                className={tabButtonClasses}\n                key={`${title}-${id}`}\n                data-testid={testId}\n                ref={currentRef as React.RefObject<HTMLButtonElement>}\n              >\n                <span className={styles['tab-list__tab__title-and-icon']}>\n                  {icon &&\n                    (typeof icon === 'string' ? (\n                      <LazyIcon\n                        iconName={icon as IconName}\n                        size={IconSize.XSmall}\n                        color={isSelected ? palette[`black`] : palette['blueberry500']}\n                      />\n                    ) : (\n                      <Icon svgIcon={icon} size={IconSize.XSmall} color={isSelected ? palette[`black`] : palette['blueberry500']} />\n                    ))}\n                  {title}\n                </span>\n              </button>\n            </li>\n          );\n        }\n        return null;\n      })}\n    </ul>\n  );\n};\n\nexport default TabList;\n"],"names":["TabList","props","selectedTab","onTabListClick","children","color","type","listRef","useRef","tabRefs","React","useRovingFocus","tablistClasses","classNames","styles","id","uuid","child","index","isComponent","Tab","isSelected","title","onTabClick","icon","testId","handleClick","tabButtonClasses","currentRef","LazyIcon","IconSize","palette","Icon","TabList$1"],"mappings":";;;;;;;;;;;AAuBA,MAAMA,IAAkC,CAASC,MAAA;AACzC,QAAA,EAAE,aAAAC,GAAa,gBAAAC,GAAgB,UAAAC,GAAU,OAAAC,IAAQ,SAAS,MAAAC,IAAO,SAAa,IAAAL,GAE9EM,IAAUC,EAAyB,IAAI,GAEvCC,IAAUD,EAAOE,EAAM,SAAS,IAAIN,GAAU,MAAMM,EAAM,UAA8B,CAAA,CAAC;AAChF,EAAAC,EAAAR,GAAgBM,GAASF,GAAS,EAAI;AAE/C,QAAAK,IAAiBC,EAAWC,EAAO,UAAU,GAAGA,EAAO,aAAaR,CAAI,EAAE,CAAC,GAE3ES,IAAKC;AAEX,yCACG,MAAG,EAAA,WAAWJ,GAAgB,KAAKL,GAAS,MAAK,WAAU,oBAAiB,aAAA,GAC1EG,EAAM,SAAS,IAAIN,GAAU,CAACa,GAAOC,MAAU;AAC1C,QAAAC,EAAYF,GAAOG,CAAG,GAAG;AAC3B,YAAMC,IAAaH,MAAUhB,GACvB,EAAE,OAAAoB,GAAO,YAAAC,GAAY,MAAAC,GAAM,QAAAC,MAAWR,EAAM,OAC5CS,IAAc,MAAY;AAC9B,QAAAH,KAAcA,EAAWL,CAAK,GAC9Bf,EAAee,CAAK;AAAA,MAAA,GAEhBS,IAAmBd,EAAWC,EAAO,eAAe,GAAGA,EAAO,kBAAkBT,CAAK,EAAE,GAAG;AAAA,QAC9F,CAACS,EAAO,yBAAyB,CAAC,GAAGO;AAAA,QACrC,CAACP,EAAO,sBAAsB,CAAC,GAAGI,KAAS;AAAA,MAAA,CAC5C,GAEKU,IAAanB,EAAQ,WAAWA,EAAQ,QAAQS,CAAK;AAGzD,aAAAR,gBAAAA,EAAA,cAAC,MAAG,EAAA,MAAK,eACP,GAAAA,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,iBAAeW;AAAA,UACf,SAASK;AAAA,UACT,WAAWC;AAAA,UACX,KAAK,GAAGL,CAAK,IAAIP,CAAE;AAAA,UACnB,eAAaU;AAAA,UACb,KAAKG;AAAA,QAAA;AAAA,QAELlB,gBAAAA,EAAA,cAAC,UAAK,WAAWI,EAAO,+BAA+B,EACpD,GAAAU,MACE,OAAOA,KAAS,WACfd,gBAAAA,EAAA;AAAA,UAACmB;AAAA,UAAA;AAAA,YACC,UAAUL;AAAA,YACV,MAAMM,EAAS;AAAA,YACf,OAAOT,IAAaU,EAAQ,QAAWA,EAAQ;AAAA,UAAc;AAAA,QAAA,IAG9DrB,gBAAAA,EAAA,cAAAsB,GAAA,EAAK,SAASR,GAAM,MAAMM,EAAS,QAAQ,OAAOT,IAAaU,EAAQ,QAAWA,EAAQ,aAAc,CAAG,IAE/GT,CACH;AAAA,MAAA,CAEJ;AAAA,IAEJ;AACO,WAAA;AAAA,EACR,CAAA,CACH;AAEJ,GAEAW,IAAejC;"}

package/components/Tabs/TabList/index.d.ts

@@ -0,0 +1,3 @@
+import TabList from './TabList';
+export * from './TabList';
+export default TabList;

package/components/Tabs/TabList/index.js

@@ -0,0 +1,5 @@
+import a from "./TabList.js";
+export {
+  a as default
+};
+//# sourceMappingURL=index.js.map

package/components/Tabs/TabList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/Tabs/TabList/styles.module.scss

@@ -0,0 +1,109 @@
+@import '../../../scss/supernova/styles/colors';
+
+.tab-list {
+  $tab-list: &;
+  $colors: 'blueberry', 'neutral', 'white';
+
+  display: flex;
+  flex-direction: row;
+  gap: 0.25rem;
+  list-style-type: none;
+  white-space: nowrap;
+  overflow-x: initial;
+  overflow-y: initial;
+  height: 3rem;
+  z-index: 0;
+  margin: 0;
+  margin-bottom: -1px;
+
+  &__tab {
+    display: flex;
+    align-items: start;
+    background-color: transparent;
+    height: 3rem;
+    text-align: start;
+    font-size: 1.25rem;
+    text-decoration: none;
+    padding: 0.5rem 1.5rem;
+    color: var(--color-action-text-onlight);
+    border: 1px solid var(--color-action-border-onlight);
+    border-bottom: 0;
+    border-radius: 0.5rem 0.5rem 0 0;
+    position: relative;
+    z-index: 0;
+
+    @each $color in $colors {
+      &--#{$color} {
+        background-color: var(--color-base-background-#{$color});
+      }
+    }
+
+    &--selected {
+      overflow: visible;
+      z-index: 2;
+      border-color: var(--color-action-border-onlight-focus);
+      color: var(--color-base-text-onlight);
+      background-color: var(--color-base-background-white);
+    }
+
+    &__title-and-icon {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      gap: 0.5rem;
+      height: 2rem;
+    }
+  }
+
+  &--normal {
+    padding-left: 1rem;
+  }
+
+  &--framed {
+    padding-left: 0;
+
+    #{$tab-list}__tab {
+      background-color: var(--color-base-background-white);
+
+      &--first {
+        // This is in order to look nice when the first tab is not selected
+        height: 3.5rem;
+      }
+
+      &--selected {
+        height: 3rem;
+      }
+    }
+
+    @each $color in $colors {
+      .tab-list__tab--selected#{$tab-list}__tab--#{$color} {
+        background-color: var(--color-base-background-#{$color});
+      }
+    }
+  }
+
+  // Because the button states should be the same for all types
+  .tab-list__tab {
+    &:hover {
+      background-color: var(--color-action-background-ondark-hover);
+
+      &#{$tab-list}__tab--blueberry {
+        background-color: var(--color-action-background-ondark-selected);
+      }
+    }
+
+    &:active {
+      background-color: var(--color-action-background-ondark-selected);
+
+      &#{$tab-list}__tab--blueberry {
+        background-color: var(--color-action-background-ondark-hoverselected);
+      }
+    }
+
+    &:focus-visible {
+      background-color: var(--color-base-background-blueberry);
+      outline: 4px solid var(--color-action-border-onlight-focus);
+      outline-offset: -4px;
+    }
+  }
+}

package/components/Tabs/TabList/styles.module.scss.d.ts

@@ -0,0 +1,18 @@
+export type Styles = {
+  'tab-list': string;
+  'tab-list__tab': string;
+  'tab-list__tab__title-and-icon': string;
+  'tab-list__tab--blueberry': string;
+  'tab-list__tab--first': string;
+  'tab-list__tab--neutral': string;
+  'tab-list__tab--selected': string;
+  'tab-list__tab--white': string;
+  'tab-list--framed': string;
+  'tab-list--normal': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/Tabs/TabPanel/TabPanel.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TabsColors, TabsType } from '../Tabs';
+interface TabPanelProps {
+    color?: TabsColors;
+    type?: TabsType;
+    isFirst?: boolean;
+}
+declare const TabPanel: React.FC<TabPanelProps>;
+export default TabPanel;

package/components/Tabs/TabPanel/TabPanel.js

@@ -0,0 +1,13 @@
+import r from "react";
+import o from "classnames";
+import a from "../../Tabs/TabPanel/styles.module.scss";
+const m = ({ children: e, color: t = "white", type: l = "normal", isFirst: s = !1 }) => {
+  const n = o(a["tab-panel"], a[`tab-panel--${t}`], a[`tab-panel--${l}`], {
+    [a["tab-panel--first"]]: s
+  });
+  return /* @__PURE__ */ r.createElement("div", { className: n }, e);
+}, f = m;
+export {
+  f as default
+};
+//# sourceMappingURL=TabPanel.js.map

package/components/Tabs/TabPanel/TabPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanel.js","sources":["../../../../src/components/Tabs/TabPanel/TabPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { TabsColors, TabsType } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabPanelProps {\n  color?: TabsColors;\n  type?: TabsType;\n  isFirst?: boolean;\n}\n\nconst TabPanel: React.FC<TabPanelProps> = ({ children, color = 'white', type = 'normal', isFirst = false }) => {\n  const tabPanelClasses = classNames(styles['tab-panel'], styles[`tab-panel--${color}`], styles[`tab-panel--${type}`], {\n    [styles['tab-panel--first']]: isFirst,\n  });\n  return <div className={tabPanelClasses}>{children}</div>;\n};\n\nexport default TabPanel;\n"],"names":["TabPanel","children","color","type","isFirst","tabPanelClasses","classNames","styles","React","TabPanel$1"],"mappings":";;;AAcA,MAAMA,IAAoC,CAAC,EAAE,UAAAC,GAAU,OAAAC,IAAQ,SAAS,MAAAC,IAAO,UAAU,SAAAC,IAAU,SAAY;AAC7G,QAAMC,IAAkBC,EAAWC,EAAO,WAAW,GAAGA,EAAO,cAAcL,CAAK,EAAE,GAAGK,EAAO,cAAcJ,CAAI,EAAE,GAAG;AAAA,IACnH,CAACI,EAAO,kBAAkB,CAAC,GAAGH;AAAA,EAAA,CAC/B;AACD,SAAQI,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWH,EAAA,GAAkBJ,CAAS;AACpD,GAEAQ,IAAeT;"}

package/components/Tabs/TabPanel/index.d.ts

@@ -0,0 +1,3 @@
+import TabPanel from './TabPanel';
+export * from './TabPanel';
+export default TabPanel;

package/components/Tabs/TabPanel/index.js

@@ -0,0 +1,5 @@
+import e from "./TabPanel.js";
+export {
+  e as default
+};
+//# sourceMappingURL=index.js.map

package/components/Tabs/TabPanel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/Tabs/TabPanel/styles.module.scss

@@ -0,0 +1,37 @@
+@use 'sass:map';
+@import '../../../scss/spacers';
+@import '../../../scss/palette';
+@import '../../../scss/font-settings';
+@import '../../../scss/breakpoints';
+@import '../../../scss/supernova/styles/colors';
+
+.tab-panel {
+  $tab-panel: &;
+
+  border-top: 1px solid var(--color-action-border-onlight-focus);
+  padding: 2rem;
+  position: relative;
+  z-index: 1;
+
+  $colors: 'blueberry', 'neutral', 'white';
+
+  &--normal {
+    padding: 0;
+  }
+
+  &--framed {
+    padding: 2rem;
+    border: 1px solid var(--color-action-border-onlight-focus);
+    border-radius: 0.5rem;
+
+    &#{$tab-panel}--first {
+      border-radius: 0 0.5rem 0.5rem;
+    }
+
+    @each $color in $colors {
+      &#{$tab-panel}--#{$color} {
+        background-color: var(--color-base-background-#{$color});
+      }
+    }
+  }
+}