@helsenorge/designsystem-react 7.13.4 → 8.0.1

package/components/NotificationPanel/NotificationPanel.js

@@ -1,5 +1,5 @@
 import t from "react";
-import c from "classnames";
+import l from "classnames";
 import { AnalyticsId as R, IconSize as C } from "../../constants.js";
 import { useUuid as T } from "../../hooks/useUuid.js";
 import { getColor as F } from "../../theme/currys/color.js";
@@ -8,19 +8,19 @@ import $ from "../Badge/NotificationBadge.js";
 import H from "../Close/Close.js";
 import M from "../Expander/Expander.js";
 import e from "../NotificationPanel/styles.module.scss";
-const U = ({ fluid: r, children: s }) => {
-  if (r) {
-    const i = c(e["fluid-wrapper"]);
-    return /* @__PURE__ */ t.createElement("div", { className: i }, s);
+const U = ({ fluid: c, children: r }) => {
+  if (c) {
+    const i = l(e["fluid-wrapper"]);
+    return /* @__PURE__ */ t.createElement("div", { className: i }, r);
   }
-  return s;
-}, Z = t.forwardRef((r, s) => {
+  return r;
+}, Z = t.forwardRef((c, r) => {
   const {
     children: i,
-    variant: o = "info",
+    variant: s = "info",
     dismissable: m = !1,
     onClick: E,
-    expanderChildren: l,
+    expanderChildren: o,
     expanderButtonText: d,
     expanderButtonClosedText: f,
     expanderOpenFromStart: N = !1,
@@ -33,17 +33,17 @@ const U = ({ fluid: r, children: s }) => {
     labelId: S,
     role: g,
     testId: w
-  } = r, p = T(S), A = () => {
-    const b = a === "outline", k = c(e["notification-panel__content"]), y = c(e["notification-panel__label"], {
-      [e["notification-panel__label--no-content"]]: !i && !l,
+  } = c, p = T(S), A = () => {
+    const b = a === "outline", k = l(e["notification-panel__content"]), y = l(e["notification-panel__label"], {
+      [e["notification-panel__label--no-content"]]: !i && !o,
       [e["notification-panel__label--compact"]]: !!a,
       [e["notification-panel__label--outline"]]: b
-    }), z = c(e["notification-panel__children"], {
+    }), z = l(e["notification-panel__children"], {
       [e["notification-panel__children--with-label"]]: n,
-      [e["notification-panel__children--expander-no-label"]]: l && !n,
+      [e["notification-panel__children--expander-no-label"]]: o && !n,
       [e["notification-panel__children--outline"]]: b
     }), O = h, [x, P] = t.useState(N);
-    return /* @__PURE__ */ t.createElement("div", { className: k, id: n ? void 0 : p }, n && /* @__PURE__ */ t.createElement(O, { className: y, id: p }, n), i && /* @__PURE__ */ t.createElement("div", { className: z }, i), l && d && f && !a && /* @__PURE__ */ t.createElement(
+    return /* @__PURE__ */ t.createElement("div", { className: k, id: n ? void 0 : p }, n && /* @__PURE__ */ t.createElement(O, { className: y, id: p }, n), i && /* @__PURE__ */ t.createElement("div", { className: z }, i), o && d && f && !a && /* @__PURE__ */ t.createElement(
       M,
       {
         title: x ? d : f,
@@ -51,25 +51,25 @@ const U = ({ fluid: r, children: s }) => {
         expanded: x,
         testId: "expand"
       },
-      l
+      o
     ));
-  }, B = c(
+  }, B = l(
     e["notification-panel"],
-    e[`notification-panel--${o}`],
+    e[`notification-panel--${s}`],
     u && e[`notification-panel--${u}`],
     {
       [e["notification-panel--compact"]]: !!a,
       [e["notification-panel--compact--basic"]]: a === "basic",
       [e["notification-panel--compact--outline"]]: a === "outline",
-      [e["notification-panel--with-content"]]: l || n && i,
+      [e["notification-panel--with-content"]]: o || n && i,
       [e["notification-panel--dismissable"]]: m
     },
     I
-  ), _ = g || (o === "alert" || o === "error") && "alert" || void 0, L = _ ? V({ label: n, id: p }) : void 0;
+  ), _ = g || s === "error" && "alert" || void 0, L = _ ? V({ label: n, id: p }) : void 0;
   return /* @__PURE__ */ t.createElement(U, { fluid: v }, /* @__PURE__ */ t.createElement(
     "div",
     {
-      ref: s,
+      ref: r,
       role: _,
       "data-testid": w,
       "data-analyticsid": R.NotificationPanel,
@@ -79,12 +79,12 @@ const U = ({ fluid: r, children: s }) => {
     /* @__PURE__ */ t.createElement(
       $,
       {
-        variant: o == "alert" ? "error" : o,
+        variant: s,
         size: a ? C.XSmall : C.Small,
         className: e["notification-panel__icon"]
       }
     ),
-    m && /* @__PURE__ */ t.createElement("span", { className: e["notification-panel__close"] }, /* @__PURE__ */ t.createElement(H, { ariaLabel: r.ariaLabelCloseBtn, onClick: E, color: F("black") })),
+    m && /* @__PURE__ */ t.createElement("span", { className: e["notification-panel__close"] }, /* @__PURE__ */ t.createElement(H, { ariaLabel: c.ariaLabelCloseBtn, onClick: E, color: F("black") })),
     A()
   ));
 });

package/components/NotificationPanel/NotificationPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationPanel.js","sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport NotificationBadge from '../Badge/NotificationBadge';\nimport Close from '../Close';\nimport Expander from '../Expander';\n\nimport styles from './styles.module.scss';\n\nexport type NotificationPanelVariants = 'info' | 'warn' | 'alert' | 'error' | 'success';\nexport type NotificationCompactVariants = 'basic' | 'outline';\nexport type NotificationPanelSizes = 'small' | 'medium' | 'large';\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span';\n\nexport interface NotificationPanelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds inner child elements. */\n  children?: React.ReactNode;\n  /** Adds inner expander elements. */\n  expanderChildren?: React.ReactNode;\n  /** Text for expanderButton. */\n  expanderButtonText?: string;\n  /** Text for expanderButton when closed. */\n  expanderButtonClosedText?: string;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Changes the visual representation of the notification panel. */\n  variant?: NotificationPanelVariants;\n  /** Makes the panel more compact. Available in basic and outline. */\n  compactVariant?: NotificationCompactVariants;\n  /** Sets a fixed size for the content container. */\n  size?: NotificationPanelSizes;\n  /** Used in combination with dismissiable property to close the notification panel. */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Toggles the close button in the top right corner. */\n  dismissable?: boolean;\n  /** Enables a fluid outer container that spans the entire width of parent. */\n  fluid?: boolean;\n  /** Sets a label for the notification panel. */\n  label?: string;\n  /** Changes the underlying element of the label. */\n  labelHtmlMarkup?: LabelTags;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Custom id for the label */\n  labelId?: string;\n  /** Custom role for the panel. Default is no role. If variant is alert or crisis, the aria role will be set to \"alert\" unless the role-prop is also set. */\n  role?: 'region' | 'alert';\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ntype WrapFluidProps = Pick<NotificationPanelProps, 'fluid'> & {\n  children: React.ReactElement;\n};\n\nconst FluidWrapper: React.FC<WrapFluidProps> = ({ fluid, children }) => {\n  if (fluid) {\n    const fluidClasses = classNames(styles['fluid-wrapper']);\n\n    return <div className={fluidClasses}>{children}</div>;\n  }\n  return children;\n};\n\nconst NotificationPanel = React.forwardRef<HTMLDivElement, NotificationPanelProps>((props, ref) => {\n  const {\n    children,\n    variant = 'info',\n    dismissable = false,\n    onClick,\n    expanderChildren,\n    expanderButtonText,\n    expanderButtonClosedText,\n    expanderOpenFromStart = false,\n    compactVariant,\n    label,\n    labelHtmlMarkup = 'h1',\n    fluid = false,\n    size,\n    className,\n    labelId,\n    role,\n    testId,\n  } = props;\n  const uuid = useUuid(labelId);\n  const renderContent = (): JSX.Element => {\n    const outlineVariant = compactVariant === 'outline';\n    const contentClasses = classNames(styles['notification-panel__content']);\n    const labelClasses = classNames(styles['notification-panel__label'], {\n      [styles['notification-panel__label--no-content']]: !children && !expanderChildren,\n      [styles['notification-panel__label--compact']]: !!compactVariant,\n      [styles['notification-panel__label--outline']]: outlineVariant,\n    });\n    const childrenClasses = classNames(styles['notification-panel__children'], {\n      [styles['notification-panel__children--with-label']]: label,\n      [styles['notification-panel__children--expander-no-label']]: expanderChildren && !label,\n      [styles['notification-panel__children--outline']]: outlineVariant,\n    });\n    const CustomTag = labelHtmlMarkup;\n\n    const [expanderOpen, setExpanderOpen] = React.useState(expanderOpenFromStart);\n    return (\n      <div className={contentClasses} id={!label ? uuid : undefined}>\n        {label && (\n          <CustomTag className={labelClasses} id={uuid}>\n            {label}\n          </CustomTag>\n        )}\n        {children && <div className={childrenClasses}>{children}</div>}\n        {expanderChildren && expanderButtonText && expanderButtonClosedText && !compactVariant && (\n          <Expander\n            title={expanderOpen ? expanderButtonText : expanderButtonClosedText}\n            onExpand={setExpanderOpen}\n            expanded={expanderOpen}\n            testId=\"expand\"\n          >\n            {expanderChildren}\n          </Expander>\n        )}\n      </div>\n    );\n  };\n\n  const notificationPanelClasses = classNames(\n    styles['notification-panel'],\n    styles[`notification-panel--${variant}`],\n    size && styles[`notification-panel--${size}`],\n    {\n      [styles['notification-panel--compact']]: !!compactVariant,\n      [styles['notification-panel--compact--basic']]: compactVariant === 'basic',\n      [styles['notification-panel--compact--outline']]: compactVariant === 'outline',\n      [styles['notification-panel--with-content']]: expanderChildren || (label && children),\n      [styles['notification-panel--dismissable']]: dismissable,\n    },\n    className\n  );\n\n  const ariaRole = role || ((variant === 'alert' || variant === 'error') && 'alert') || undefined;\n  const ariaLabelAttributes = ariaRole ? getAriaLabelAttributes({ label, id: uuid }) : undefined;\n\n  return (\n    <FluidWrapper fluid={fluid}>\n      <div\n        ref={ref}\n        role={ariaRole}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.NotificationPanel}\n        className={notificationPanelClasses}\n        {...ariaLabelAttributes}\n      >\n        <NotificationBadge\n          variant={variant == 'alert' ? 'error' : variant}\n          size={compactVariant ? IconSize.XSmall : IconSize.Small}\n          className={styles['notification-panel__icon']}\n        />\n        {dismissable && (\n          <span className={styles['notification-panel__close']}>\n            <Close ariaLabel={props.ariaLabelCloseBtn} onClick={onClick} color={getColor('black')} />\n          </span>\n        )}\n        {renderContent()}\n      </div>\n    </FluidWrapper>\n  );\n});\n\nexport default NotificationPanel;\n"],"names":["FluidWrapper","fluid","children","fluidClasses","classNames","styles","React","NotificationPanel","props","ref","variant","dismissable","onClick","expanderChildren","expanderButtonText","expanderButtonClosedText","expanderOpenFromStart","compactVariant","label","labelHtmlMarkup","size","className","labelId","role","testId","uuid","useUuid","renderContent","outlineVariant","contentClasses","labelClasses","childrenClasses","CustomTag","expanderOpen","setExpanderOpen","Expander","notificationPanelClasses","ariaRole","ariaLabelAttributes","getAriaLabelAttributes","AnalyticsId","NotificationBadge","IconSize","Close","getColor"],"mappings":"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"}
+{"version":3,"file":"NotificationPanel.js","sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport NotificationBadge from '../Badge/NotificationBadge';\nimport Close from '../Close';\nimport Expander from '../Expander';\n\nimport styles from './styles.module.scss';\n\nexport type NotificationPanelVariants = 'info' | 'warn' | 'error' | 'success';\nexport type NotificationCompactVariants = 'basic' | 'outline';\nexport type NotificationPanelSizes = 'small' | 'medium' | 'large';\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span';\n\nexport interface NotificationPanelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds inner child elements. */\n  children?: React.ReactNode;\n  /** Adds inner expander elements. */\n  expanderChildren?: React.ReactNode;\n  /** Text for expanderButton. */\n  expanderButtonText?: string;\n  /** Text for expanderButton when closed. */\n  expanderButtonClosedText?: string;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Changes the visual representation of the notification panel. */\n  variant?: NotificationPanelVariants;\n  /** Makes the panel more compact. Available in basic and outline. */\n  compactVariant?: NotificationCompactVariants;\n  /** Sets a fixed size for the content container. */\n  size?: NotificationPanelSizes;\n  /** Used in combination with dismissiable property to close the notification panel. */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Toggles the close button in the top right corner. */\n  dismissable?: boolean;\n  /** Enables a fluid outer container that spans the entire width of parent. */\n  fluid?: boolean;\n  /** Sets a label for the notification panel. */\n  label?: string;\n  /** Changes the underlying element of the label. */\n  labelHtmlMarkup?: LabelTags;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Custom id for the label */\n  labelId?: string;\n  /** Custom role for the panel. Default is no role. If variant is alert or crisis, the aria role will be set to \"alert\" unless the role-prop is also set. */\n  role?: 'region' | 'alert';\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ntype WrapFluidProps = Pick<NotificationPanelProps, 'fluid'> & {\n  children: React.ReactElement;\n};\n\nconst FluidWrapper: React.FC<WrapFluidProps> = ({ fluid, children }) => {\n  if (fluid) {\n    const fluidClasses = classNames(styles['fluid-wrapper']);\n\n    return <div className={fluidClasses}>{children}</div>;\n  }\n  return children;\n};\n\nconst NotificationPanel = React.forwardRef<HTMLDivElement, NotificationPanelProps>((props, ref) => {\n  const {\n    children,\n    variant = 'info',\n    dismissable = false,\n    onClick,\n    expanderChildren,\n    expanderButtonText,\n    expanderButtonClosedText,\n    expanderOpenFromStart = false,\n    compactVariant,\n    label,\n    labelHtmlMarkup = 'h1',\n    fluid = false,\n    size,\n    className,\n    labelId,\n    role,\n    testId,\n  } = props;\n  const uuid = useUuid(labelId);\n  const renderContent = (): JSX.Element => {\n    const outlineVariant = compactVariant === 'outline';\n    const contentClasses = classNames(styles['notification-panel__content']);\n    const labelClasses = classNames(styles['notification-panel__label'], {\n      [styles['notification-panel__label--no-content']]: !children && !expanderChildren,\n      [styles['notification-panel__label--compact']]: !!compactVariant,\n      [styles['notification-panel__label--outline']]: outlineVariant,\n    });\n    const childrenClasses = classNames(styles['notification-panel__children'], {\n      [styles['notification-panel__children--with-label']]: label,\n      [styles['notification-panel__children--expander-no-label']]: expanderChildren && !label,\n      [styles['notification-panel__children--outline']]: outlineVariant,\n    });\n    const CustomTag = labelHtmlMarkup;\n\n    const [expanderOpen, setExpanderOpen] = React.useState(expanderOpenFromStart);\n    return (\n      <div className={contentClasses} id={!label ? uuid : undefined}>\n        {label && (\n          <CustomTag className={labelClasses} id={uuid}>\n            {label}\n          </CustomTag>\n        )}\n        {children && <div className={childrenClasses}>{children}</div>}\n        {expanderChildren && expanderButtonText && expanderButtonClosedText && !compactVariant && (\n          <Expander\n            title={expanderOpen ? expanderButtonText : expanderButtonClosedText}\n            onExpand={setExpanderOpen}\n            expanded={expanderOpen}\n            testId=\"expand\"\n          >\n            {expanderChildren}\n          </Expander>\n        )}\n      </div>\n    );\n  };\n\n  const notificationPanelClasses = classNames(\n    styles['notification-panel'],\n    styles[`notification-panel--${variant}`],\n    size && styles[`notification-panel--${size}`],\n    {\n      [styles['notification-panel--compact']]: !!compactVariant,\n      [styles['notification-panel--compact--basic']]: compactVariant === 'basic',\n      [styles['notification-panel--compact--outline']]: compactVariant === 'outline',\n      [styles['notification-panel--with-content']]: expanderChildren || (label && children),\n      [styles['notification-panel--dismissable']]: dismissable,\n    },\n    className\n  );\n\n  const ariaRole = role || (variant === 'error' && 'alert') || undefined;\n  const ariaLabelAttributes = ariaRole ? getAriaLabelAttributes({ label, id: uuid }) : undefined;\n\n  return (\n    <FluidWrapper fluid={fluid}>\n      <div\n        ref={ref}\n        role={ariaRole}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.NotificationPanel}\n        className={notificationPanelClasses}\n        {...ariaLabelAttributes}\n      >\n        <NotificationBadge\n          variant={variant}\n          size={compactVariant ? IconSize.XSmall : IconSize.Small}\n          className={styles['notification-panel__icon']}\n        />\n        {dismissable && (\n          <span className={styles['notification-panel__close']}>\n            <Close ariaLabel={props.ariaLabelCloseBtn} onClick={onClick} color={getColor('black')} />\n          </span>\n        )}\n        {renderContent()}\n      </div>\n    </FluidWrapper>\n  );\n});\n\nexport default NotificationPanel;\n"],"names":["FluidWrapper","fluid","children","fluidClasses","classNames","styles","React","NotificationPanel","props","ref","variant","dismissable","onClick","expanderChildren","expanderButtonText","expanderButtonClosedText","expanderOpenFromStart","compactVariant","label","labelHtmlMarkup","size","className","labelId","role","testId","uuid","useUuid","renderContent","outlineVariant","contentClasses","labelClasses","childrenClasses","CustomTag","expanderOpen","setExpanderOpen","Expander","notificationPanelClasses","ariaRole","ariaLabelAttributes","getAriaLabelAttributes","AnalyticsId","NotificationBadge","IconSize","Close","getColor"],"mappings":"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"}

package/components/NotificationPanel/styles.module.scss

@@ -84,20 +84,6 @@
     border: none;
   }
 
-  &--alert {
-    border: 0.125rem solid $cherry700;
-    background-color: $cherry50;
-  }
-
-  &--alert#{&}--compact {
-    box-shadow: none;
-    background-color: transparent;
-  }
-
-  &--alert#{&}--compact--basic {
-    border: none;
-  }
-
   &--error {
     border: 0.125rem solid $cherry700;
     background-color: $cherry50;

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

@@ -15,7 +15,6 @@ export type Styles = {
   'notification-panel__label--compact': string;
   'notification-panel__label--no-content': string;
   'notification-panel__label--outline': string;
-  'notification-panel--alert': string;
   'notification-panel--compact': string;
   'notification-panel--compact--basic': string;
   'notification-panel--compact--outline': string;

package/components/RadioButton/RadioButton.js

@@ -1,48 +1,49 @@
-import p, { useState as U } from "react";
-import l from "classnames";
-import { FormMode as i, FormSize as q, AnalyticsId as W } from "../../constants.js";
-import { usePseudoClasses as G } from "../../hooks/usePseudoClasses.js";
-import { useUuid as H } from "../../hooks/useUuid.js";
-import { getAriaDescribedBy as J } from "../../utils/accessibility.js";
-import { isMutableRefObject as K, mergeRefs as Q } from "../../utils/refs.js";
-import { uuid as V } from "../../utils/uuid.js";
+import c, { useState as P } from "react";
+import m from "classnames";
+import { FormMode as i, FormSize as U, AnalyticsId as W } from "../../constants.js";
+import { usePseudoClasses as q } from "../../hooks/usePseudoClasses.js";
+import { useUuid as G } from "../../hooks/useUuid.js";
+import { getAriaDescribedBy as H } from "../../utils/accessibility.js";
+import { isMutableRefObject as J, mergeRefs as K } from "../../utils/refs.js";
+import { uuid as Q } from "../../utils/uuid.js";
+import { ErrorWrapper as V } from "../ErrorWrapper/ErrorWrapper.js";
 import { getLabelText as X, renderLabelAsParent as Y } from "../Label/Label.js";
 import e from "../RadioButton/styles.module.scss";
-const se = (s, o, a, b) => {
-  const n = o === "oninvalid", t = s === b;
-  return l({
+const be = (l, o, a, s) => {
+  const n = o === "oninvalid", t = l === s;
+  return m({
     [e["radio-button-label__large--on-grey"]]: a && o === "ongrey" && !t,
     [e["radio-button-label__large--on-blueberry"]]: o === "onblueberry" && !t && a,
     [e["radio-button-label__large--selected"]]: a && t && !n,
     [e["radio-button-label__large--selected-invalid"]]: a && t && n
   });
-}, Z = p.forwardRef((s, o) => {
+}, Z = c.forwardRef((l, o) => {
   const {
     className: a,
-    defaultChecked: b = !1,
+    defaultChecked: s = !1,
     onChange: n,
     disabled: t,
     label: f,
-    inputId: _ = V(),
+    inputId: p = Q(),
     mode: d = i.onwhite,
-    name: v = _,
+    name: v = p,
     size: w,
-    errorText: u,
-    error: k = !!u,
+    errorText: _,
+    error: k = !!_,
     errorTextId: B,
     value: R = X(f),
-    testId: N,
+    testId: x,
     required: L,
-    labelClassNames: x,
+    labelClassNames: N,
     ...I
-  } = s, g = k || d === i.oninvalid, y = d === i.ondark, h = d === i.onblueberry, S = d === i.oninvalid, r = w === q.large, [T, A] = U(b), { refObject: E, isFocused: c } = G(K(o) ? o : null), F = Q([o, E]), C = H(B), j = l(e["radio-button-wrapper"], {
-    [e["radio-button-wrapper--with-error"]]: u,
+  } = l, g = k || d === i.oninvalid, y = d === i.ondark, h = d === i.onblueberry, T = d === i.oninvalid, r = w === U.large, [E, A] = P(s), { refObject: F, isFocused: b } = q(J(o) ? o : null), S = K([o, F]), C = G(B), j = m(e["radio-button-wrapper"], {
+    [e["radio-button-wrapper--with-error"]]: _,
     [e["radio-button-wrapper__large"]]: r,
-    [e["radio-button-wrapper__large--focused"]]: r && c,
-    [e["radio-button-wrapper__large--selected"]]: r && T && c,
-    [e["radio-button-wrapper__large--invalid"]]: r && S && c,
-    [e["radio-button-wrapper__large--on-blueberry"]]: r && h && c
-  }), z = l(
+    [e["radio-button-wrapper__large--focused"]]: r && b,
+    [e["radio-button-wrapper__large--selected"]]: r && E && b,
+    [e["radio-button-wrapper__large--invalid"]]: r && T && b,
+    [e["radio-button-wrapper__large--on-blueberry"]]: r && h && b
+  }), z = m(
     e["radio-button-label"],
     {
       [e["radio-button-label--disabled"]]: t,
@@ -51,8 +52,8 @@ const se = (s, o, a, b) => {
       [e["radio-button-label__large"]]: r,
       [e["radio-button-label__large--disabled"]]: r && t
     },
-    x
-  ), D = l(
+    N
+  ), D = m(
     e["radio-button"],
     {
       [e["radio-button--on-dark"]]: y,
@@ -64,40 +65,40 @@ const se = (s, o, a, b) => {
       [e["radio-button__large--invalid"]]: r && g
     },
     a
-  ), M = l(e["radio-button-errors"]), O = (m) => {
-    A(m.target.checked), n && n(m);
-  }, P = () => /* @__PURE__ */ p.createElement(
+  ), M = (u) => {
+    A(u.target.checked), n && n(u);
+  }, O = () => /* @__PURE__ */ c.createElement(
     "input",
     {
-      id: _,
+      id: p,
       name: v,
       className: D,
       type: "radio",
       disabled: t,
       value: R,
-      ref: F,
-      defaultChecked: b,
-      "aria-describedby": J(s, C),
+      ref: S,
+      defaultChecked: s,
+      "aria-describedby": H(l, C),
       required: L,
       ...I,
-      onChange: (m) => O(m)
+      onChange: (u) => M(u)
     }
   );
-  return /* @__PURE__ */ p.createElement("div", { "data-testid": N, "data-analyticsid": W.RadioButton, className: j }, u && /* @__PURE__ */ p.createElement("p", { className: M, id: C }, u), Y(
+  return /* @__PURE__ */ c.createElement(V, { errorText: _, errorTextId: C }, /* @__PURE__ */ c.createElement("div", { "data-testid": x, "data-analyticsid": W.RadioButton, className: j }, Y(
     f,
-    P(),
-    _,
+    O(),
+    p,
     d,
     z,
     void 0,
     e["radiobutton-sublabel-wrapper"],
     r
-  ));
+  )));
 });
 Z.displayName = "RadioButton";
 export {
   Z as RadioButton,
   Z as default,
-  se as getRadioLabelClasses
+  be as getRadioLabelClasses
 };
 //# sourceMappingURL=RadioButton.js.map

package/components/RadioButton/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'aria-describedby' | 'name' | 'value' | 'disabled' | 'defaultChecked' | 'required' | 'onChange'\n  > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the radioButton */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getRadioLabelClasses = (radioId: string, mode: FormMode, large: boolean, checkedRadioId?: string): string | undefined => {\n  const onCherry = mode === 'oninvalid';\n  const checked = radioId === checkedRadioId;\n\n  return classNames({\n    [radioButtonStyles['radio-button-label__large--on-grey']]: large && mode === 'ongrey' && !checked,\n    [radioButtonStyles['radio-button-label__large--on-blueberry']]: mode === 'onblueberry' && !checked && large,\n    [radioButtonStyles['radio-button-label__large--selected']]: large && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__large--selected-invalid']]: large && checked && onCherry,\n  });\n};\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked = false,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    mode = FormMode.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ...rest\n  } = props;\n  const invalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const onCherry = mode === FormMode.oninvalid;\n  const isLarge = size === FormSize.large;\n  const [checked, changeChecked] = useState<boolean>(defaultChecked);\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n  const errorTextUuid = useUuid(errorTextId);\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper--with-error']]: errorText,\n    [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n    [radioButtonStyles['radio-button-wrapper__large--focused']]: isLarge && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(\n    radioButtonStyles['radio-button-label'],\n    {\n      [radioButtonStyles['radio-button-label--disabled']]: disabled,\n      [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n      [radioButtonStyles['radio-button-label--invalid']]: invalid,\n      [radioButtonStyles['radio-button-label__large']]: isLarge,\n      [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n    },\n    labelClassNames\n  );\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__large']]: isLarge,\n      [radioButtonStyles['radio-button__large--disabled']]: isLarge && disabled,\n      [radioButtonStyles['radio-button__large--invalid']]: isLarge && invalid,\n    },\n    className\n  );\n  const errorStyles = classNames(radioButtonStyles['radio-button-errors']);\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(e.target.checked);\n    onChange && onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\n      id={inputId}\n      name={name}\n      className={radioButtonClasses}\n      type=\"radio\"\n      disabled={disabled}\n      value={value}\n      ref={mergedRefs}\n      defaultChecked={defaultChecked}\n      aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n      required={required}\n      {...rest}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n      {errorText && (\n        <p className={errorStyles} id={errorTextUuid}>\n          {errorText}\n        </p>\n      )}\n      {renderLabelAsParent(\n        label,\n        getLabelContent(),\n        inputId,\n        mode as FormMode,\n        radioButtonLabelClasses,\n        undefined,\n        radioButtonStyles['radiobutton-sublabel-wrapper'],\n        isLarge\n      )}\n    </div>\n  );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"names":["getRadioLabelClasses","radioId","mode","large","checkedRadioId","onCherry","checked","classNames","radioButtonStyles","RadioButton","React","props","ref","className","defaultChecked","onChange","disabled","label","inputId","uuid","FormMode","name","size","errorText","error","errorTextId","value","getLabelText","testId","required","labelClassNames","rest","invalid","onDark","onBlueberry","isLarge","FormSize","changeChecked","useState","refObject","isFocused","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","errorTextUuid","useUuid","radioButtonWrapperClasses","radioButtonLabelClasses","radioButtonClasses","errorStyles","change","e","getLabelContent","getAriaDescribedBy","AnalyticsId","renderLabelAsParent"],"mappings":"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"}
+{"version":3,"file":"RadioButton.js","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'aria-describedby' | 'name' | 'value' | 'disabled' | 'defaultChecked' | 'required' | 'onChange'\n  > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the radioButton */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getRadioLabelClasses = (radioId: string, mode: FormMode, large: boolean, checkedRadioId?: string): string | undefined => {\n  const onCherry = mode === 'oninvalid';\n  const checked = radioId === checkedRadioId;\n\n  return classNames({\n    [radioButtonStyles['radio-button-label__large--on-grey']]: large && mode === 'ongrey' && !checked,\n    [radioButtonStyles['radio-button-label__large--on-blueberry']]: mode === 'onblueberry' && !checked && large,\n    [radioButtonStyles['radio-button-label__large--selected']]: large && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__large--selected-invalid']]: large && checked && onCherry,\n  });\n};\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked = false,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    mode = FormMode.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ...rest\n  } = props;\n  const invalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const onCherry = mode === FormMode.oninvalid;\n  const isLarge = size === FormSize.large;\n  const [checked, changeChecked] = useState<boolean>(defaultChecked);\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n  const errorTextUuid = useUuid(errorTextId);\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper--with-error']]: errorText,\n    [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n    [radioButtonStyles['radio-button-wrapper__large--focused']]: isLarge && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(\n    radioButtonStyles['radio-button-label'],\n    {\n      [radioButtonStyles['radio-button-label--disabled']]: disabled,\n      [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n      [radioButtonStyles['radio-button-label--invalid']]: invalid,\n      [radioButtonStyles['radio-button-label__large']]: isLarge,\n      [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n    },\n    labelClassNames\n  );\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__large']]: isLarge,\n      [radioButtonStyles['radio-button__large--disabled']]: isLarge && disabled,\n      [radioButtonStyles['radio-button__large--invalid']]: isLarge && invalid,\n    },\n    className\n  );\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(e.target.checked);\n    onChange && onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\n      id={inputId}\n      name={name}\n      className={radioButtonClasses}\n      type=\"radio\"\n      disabled={disabled}\n      value={value}\n      ref={mergedRefs}\n      defaultChecked={defaultChecked}\n      aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n      required={required}\n      {...rest}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <ErrorWrapper errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n        {renderLabelAsParent(\n          label,\n          getLabelContent(),\n          inputId,\n          mode as FormMode,\n          radioButtonLabelClasses,\n          undefined,\n          radioButtonStyles['radiobutton-sublabel-wrapper'],\n          isLarge\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"names":["getRadioLabelClasses","radioId","mode","large","checkedRadioId","onCherry","checked","classNames","radioButtonStyles","RadioButton","React","props","ref","className","defaultChecked","onChange","disabled","label","inputId","uuid","FormMode","name","size","errorText","error","errorTextId","value","getLabelText","testId","required","labelClassNames","rest","invalid","onDark","onBlueberry","isLarge","FormSize","changeChecked","useState","refObject","isFocused","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","errorTextUuid","useUuid","radioButtonWrapperClasses","radioButtonLabelClasses","radioButtonClasses","change","e","getLabelContent","getAriaDescribedBy","ErrorWrapper","AnalyticsId","renderLabelAsParent"],"mappings":";;;;;;;;;;;AA0CO,MAAMA,KAAuB,CAACC,GAAiBC,GAAgBC,GAAgBC,MAAgD;AACpI,QAAMC,IAAWH,MAAS,aACpBI,IAAUL,MAAYG;AAE5B,SAAOG,EAAW;AAAA,IAChB,CAACC,EAAkB,oCAAoC,CAAC,GAAGL,KAASD,MAAS,YAAY,CAACI;AAAA,IAC1F,CAACE,EAAkB,yCAAyC,CAAC,GAAGN,MAAS,iBAAiB,CAACI,KAAWH;AAAA,IACtG,CAACK,EAAkB,qCAAqC,CAAC,GAAGL,KAASG,KAAW,CAACD;AAAA,IACjF,CAACG,EAAkB,6CAA6C,CAAC,GAAGL,KAASG,KAAWD;AAAA,EAAA,CACzF;AACH,GAEaI,IAAcC,EAAM,WAAW,CAACC,GAAyBC,MAAqC;AACnG,QAAA;AAAA,IACJ,WAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC,IAAUC,EAAK;AAAA,IACf,MAAAjB,IAAOkB,EAAS;AAAA,IAChB,MAAAC,IAAOH;AAAA,IACP,MAAAI;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC,IAAQ,CAAC,CAACD;AAAA,IACV,aAAAE;AAAA,IACA,OAAAC,IAAQC,EAAaV,CAAK;AAAA,IAC1B,QAAAW;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAApB,GACEqB,IAAUR,KAAStB,MAASkB,EAAS,WACrCa,IAAS/B,MAASkB,EAAS,QAC3Bc,IAAchC,MAASkB,EAAS,aAChCf,IAAWH,MAASkB,EAAS,WAC7Be,IAAUb,MAASc,EAAS,OAC5B,CAAC9B,GAAS+B,CAAa,IAAIC,EAAkBxB,CAAc,GAC3D,EAAE,WAAAyB,GAAW,WAAAC,EAAU,IAAIC,EAAmCC,EAAmB9B,CAAG,IAAIA,IAAM,IAAI,GAClG+B,IAAaC,EAAU,CAAChC,GAAK2B,CAAS,CAAC,GACvCM,IAAgBC,EAAQrB,CAAW,GAEnCsB,IAA4BxC,EAAWC,EAAkB,sBAAsB,GAAG;AAAA,IACtF,CAACA,EAAkB,kCAAkC,CAAC,GAAGe;AAAA,IACzD,CAACf,EAAkB,6BAA6B,CAAC,GAAG2B;AAAA,IACpD,CAAC3B,EAAkB,sCAAsC,CAAC,GAAG2B,KAAWK;AAAA,IACxE,CAAChC,EAAkB,uCAAuC,CAAC,GAAG2B,KAAW7B,KAAWkC;AAAA,IACpF,CAAChC,EAAkB,sCAAsC,CAAC,GAAG2B,KAAW9B,KAAYmC;AAAA,IACpF,CAAChC,EAAkB,2CAA2C,CAAC,GAAG2B,KAAWD,KAAeM;AAAA,EAAA,CAC7F,GACKQ,IAA0BzC;AAAA,IAC9BC,EAAkB,oBAAoB;AAAA,IACtC;AAAA,MACE,CAACA,EAAkB,8BAA8B,CAAC,GAAGQ;AAAA,MACrD,CAACR,EAAkB,6BAA6B,CAAC,GAAGyB;AAAA,MACpD,CAACzB,EAAkB,6BAA6B,CAAC,GAAGwB;AAAA,MACpD,CAACxB,EAAkB,2BAA2B,CAAC,GAAG2B;AAAA,MAClD,CAAC3B,EAAkB,qCAAqC,CAAC,GAAG2B,KAAWnB;AAAA,IACzE;AAAA,IACAc;AAAA,EAAA,GAEImB,IAAqB1C;AAAA,IACzBC,EAAkB,cAAc;AAAA,IAChC;AAAA,MACE,CAACA,EAAkB,uBAAuB,CAAC,GAAGyB;AAAA,MAC9C,CAACzB,EAAkB,wBAAwB,CAAC,GAAGQ;AAAA,MAC/C,CAACR,EAAkB,4BAA4B,CAAC,GAAG0B;AAAA,MACnD,CAAC1B,EAAkB,uBAAuB,CAAC,GAAGwB;AAAA,MAC9C,CAACxB,EAAkB,qBAAqB,CAAC,GAAG2B;AAAA,MAC5C,CAAC3B,EAAkB,+BAA+B,CAAC,GAAG2B,KAAWnB;AAAA,MACjE,CAACR,EAAkB,8BAA8B,CAAC,GAAG2B,KAAWH;AAAA,IAClE;AAAA,IACAnB;AAAA,EAAA,GAGIqC,IAAS,CAACC,MAAiD;AACjD,IAAAd,EAAAc,EAAE,OAAO,OAAO,GAC9BpC,KAAYA,EAASoC,CAAC;AAAA,EAAA,GAGlBC,IAAkB,MACtB1C,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAIQ;AAAA,MACJ,MAAAG;AAAA,MACA,WAAW4B;AAAA,MACX,MAAK;AAAA,MACL,UAAAjC;AAAA,MACA,OAAAU;AAAA,MACA,KAAKiB;AAAA,MACL,gBAAA7B;AAAA,MACA,oBAAkBuC,EAAmB1C,GAAOkC,CAAa;AAAA,MACzD,UAAAhB;AAAA,MACC,GAAGE;AAAA,MACJ,UAAU,CAACoB,MAAYD,EAAOC,CAAC;AAAA,IAAA;AAAA,EAAA;AAInC,SACGzC,gBAAAA,EAAA,cAAA4C,GAAA,EAAa,WAAA/B,GAAsB,aAAasB,EAC/C,GAAAnC,gBAAAA,EAAA,cAAC,OAAI,EAAA,eAAakB,GAAQ,oBAAkB2B,EAAY,aAAa,WAAWR,EAC7E,GAAAS;AAAA,IACCvC;AAAA,IACAmC,EAAgB;AAAA,IAChBlC;AAAA,IACAhB;AAAA,IACA8C;AAAA,IACA;AAAA,IACAxC,EAAkB,8BAA8B;AAAA,IAChD2B;AAAA,EAEJ,CAAA,CACF;AAEJ,CAAC;AAED1B,EAAY,cAAc;"}

package/components/RadioButton/styles.module.scss

@@ -1,9 +1,20 @@
 @use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
 @import '../../scss/spacers';
 @import '../../scss/breakpoints';
 @import '../../scss/palette';
 @import '../../scss/font-settings';
 
+@mixin dashed-border() {
+  box-shadow: none;
+
+  $encoded-color: string.slice(meta.inspect($neutral600), 2);
+
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%23#{$encoded-color}' stroke-width='4' stroke-dasharray='0.5, 7' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
+  border-radius: 100px;
+}
+
 .radio-button-errors {
   font-size: $font-size-sm;
   font-weight: 600;
@@ -13,7 +24,6 @@
 
 .radio-button-wrapper {
   cursor: pointer;
-  margin: getSpacer(s) 0;
 
   &--with-error {
     padding: getSpacer(s) getSpacer(2xs) getSpacer(m);
@@ -50,14 +60,6 @@
   }
 }
 
-.radio-button-wrapper:first-of-type {
-  margin-top: 0;
-}
-
-.radio-button-wrapper:last-of-type {
-  margin-bottom: 0;
-}
-
 .radio-button-label {
   display: flex;
   align-items: flex-start;
@@ -130,17 +132,6 @@
     }
   }
 
-  &__large#{&}__large--disabled {
-    background-color: $neutral50;
-
-    &:hover {
-      background-color: $neutral50;
-    }
-
-    &:focus {
-      background-color: $neutral50;
-    }
-  }
   &__large#{&}__large--on-grey {
     background-color: $white;
 
@@ -174,6 +165,19 @@
     }
   }
 
+  &__large#{&}__large--disabled {
+    color: $neutral700;
+    background-color: $neutral50;
+
+    &:hover {
+      background-color: $neutral50;
+    }
+
+    &:focus {
+      background-color: $neutral50;
+    }
+  }
+
   @media (min-width: map.get($grid-breakpoints, md)) {
     &__large {
       padding: 1.68rem getSpacer(l);
@@ -290,16 +294,18 @@
 
   &--disabled {
     cursor: default;
-    color: $neutral600;
-    background-color: $neutral50;
+
+    @include dashed-border;
+
+    background-color: transparent;
 
     &:hover {
-      box-shadow: 0 0 0 getSpacer(4xs);
-      background-color: $neutral50;
+      box-shadow: none;
+      background-color: transparent;
     }
 
     :hover > & {
-      background-color: $neutral50;
+      background-color: transparent;
     }
 
     &:active {
@@ -336,16 +342,14 @@
     background-color: $blueberry200;
   }
 
-  &--disabled:checked::before {
-    box-shadow: 0 0 0 0;
-    background-color: $neutral400;
-    color: $neutral600;
-  }
-
   &--invalid:checked::before {
     background-color: $cherry600;
   }
 
+  &--disabled:checked::before {
+    background-color: transparent;
+  }
+
   &__large {
     &:checked {
       outline: none;
@@ -402,12 +406,14 @@
     }
 
     &--disabled {
-      &:hover {
-        box-shadow: 0 0 0 getSpacer(4xs);
+      &:hover,
+      &:focus,
+      &:checked:hover {
+        box-shadow: none;
       }
 
-      &:focus {
-        box-shadow: 0 0 0 getSpacer(4xs);
+      &:checked::before {
+        background-color: $neutral600;
       }
     }
   }

package/components/ServiceMessage/ServiceMessage.js

@@ -15,72 +15,72 @@ import U from "../Icons/ChevronUp.js";
 import B from "../Icons/Forward.js";
 import j from "../Icons/X.js";
 import s from "../ServiceMessage/styles.module.scss";
-const F = ({ label: c, variant: t, id: m, hasExpander: r, isExpanded: l, dismissable: v, onExpand: i, onDismiss: _, closeBtnText: n }) => {
-  const d = z(), { isHovered: a, hoverRef: g } = u(), o = d < L.lg ? E.XSmall : E.Small, N = r ? "button" : "span", f = p(
+const F = ({ label: o, variant: c, id: m, hasExpander: r, isExpanded: i, dismissable: v, onExpand: l, onDismiss: _, closeBtnText: n }) => {
+  const d = z(), { isHovered: a, hoverRef: g } = u(), t = d < 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: f, ref: g }, /* @__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(y, { variant: t == "alert" ? "error" : t, size: o, isHovered: a }), /* @__PURE__ */ e.createElement("h1", { className: s["service-message__title"], id: m }, /* @__PURE__ */ e.createElement(
+  return /* @__PURE__ */ e.createElement("div", { className: f, ref: g }, /* @__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(y, { variant: c, size: t, isHovered: a }), /* @__PURE__ */ e.createElement("h1", { className: s["service-message__title"], id: m }, /* @__PURE__ */ e.createElement(
     N,
     {
       className: s["service-message__toggle"],
-      onClick: r ? i : void 0,
-      "aria-expanded": r ? l : void 0
+      onClick: r ? l : void 0,
+      "aria-expanded": r ? i : void 0
     },
-    c
-  )), r && /* @__PURE__ */ e.createElement(C, { size: o, svgIcon: l ? U : M, isHovered: a }), !r && v && /* @__PURE__ */ e.createElement(A, { onClick: _, ariaLabel: n, className: s["service-message__close"] }))))));
-}, $ = ({ info: c, extraInfo: t, urlTitle: m, url: r, target: l, dismissable: v, closeBtnText: i, onDismiss: _ }) => {
-  const { hoverRef: n, isHovered: d } = u(), { hoverRef: a, isHovered: g } = 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: l }, m, /* @__PURE__ */ e.createElement(C, { size: E.XSmall, svgIcon: B, color: H("blueberry", 700), isHovered: d })), v && /* @__PURE__ */ e.createElement(
+    o
+  )), r && /* @__PURE__ */ e.createElement(C, { size: t, svgIcon: i ? U : M, isHovered: a }), !r && v && /* @__PURE__ */ e.createElement(A, { onClick: _, ariaLabel: n, className: s["service-message__close"] }))))));
+}, $ = ({ info: o, extraInfo: c, urlTitle: m, url: r, target: i, dismissable: v, closeBtnText: l, onDismiss: _ }) => {
+  const { hoverRef: n, isHovered: d } = u(), { hoverRef: a, isHovered: g } = u(), t = 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"] }, o && /* @__PURE__ */ e.createElement("p", { className: s["service-message__info"] }, o), c && /* @__PURE__ */ e.createElement("p", { className: p(s["service-message__info"], s["service-message__info--extra"]) }, c), /* @__PURE__ */ e.createElement("div", { className: s["service-message__actions"] }, t && /* @__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: d })), v && /* @__PURE__ */ e.createElement(
     "button",
     {
       ref: a,
       className: p(s["service-message__action"], s["service-message__action--close"]),
-      "aria-label": i,
+      "aria-label": l,
       onClick: _
     },
-    i,
+    l,
     /* @__PURE__ */ e.createElement(C, { size: E.XSmall, svgIcon: j, color: H("blueberry", 700), isHovered: g })
   ))))));
 }, ae = ({
-  label: c,
-  dismissable: t = !0,
+  label: o,
+  dismissable: c = !0,
   onDismiss: m,
   info: r,
-  extraInfo: l,
+  extraInfo: i,
   urlTitle: v,
-  url: i,
+  url: l,
   target: _ = "_self",
   closeBtnText: n = "fjern melding",
   expanderOpenFromStart: d = !1,
   variant: a = "error",
   testId: g
 }) => {
-  const [o, N] = h(d), f = w(), b = !!r || !!l, R = a === "alert" || a === "error" ? "alert" : "region", S = X({ label: c, id: f }), k = () => {
-    b && N(!o);
+  const [t, N] = h(d), f = w(), b = !!r || !!i, R = a === "error" ? "alert" : "region", S = X({ label: o, id: f }), k = () => {
+    b && N(!t);
   }, I = p(s["service-message"], s[`service-message--${a}`]);
   return /* @__PURE__ */ e.createElement("div", { className: I, role: R, ...S, "data-testid": g }, /* @__PURE__ */ e.createElement(
     F,
     {
-      label: c,
+      label: o,
       variant: a,
       id: f,
       hasExpander: b,
-      isExpanded: o,
-      dismissable: t,
+      isExpanded: t,
+      dismissable: c,
       onExpand: k,
       onDismiss: m,
       closeBtnText: n
     }
-  ), b && o && /* @__PURE__ */ e.createElement(
+  ), b && t && /* @__PURE__ */ e.createElement(
     $,
     {
       info: r,
-      extraInfo: l,
+      extraInfo: i,
       urlTitle: v,
-      url: i,
+      url: l,
       target: _,
-      dismissable: t,
+      dismissable: c,
       onDismiss: m,
       closeBtnText: n
     }