@helsenorge/designsystem-react 13.0.0 → 13.1.0

package/lib/components/ServiceMessage/index.js

@@ -1,3 +1,5 @@
+import "../../uuid.js";
+import "../../environment.js";
 import { a as IconSize } from "../../constants2.js";
 import { t as usePseudoClasses } from "../../usePseudoClasses.js";
 import { t as breakpoints } from "../../grid.js";
@@ -9,30 +11,78 @@ import "../../spacing.js";
 import "../../currys.js";
 import "../../refs.js";
 import { t as Icon_default } from "../../Icon.js";
+import "../../Check.js";
+import "../../Avatar.js";
 import "../../CheckFill.js";
 import "../../ErrorSignFill.js";
 import "../../InfoSignFill.js";
 import "../../TriangleX.js";
 import { t as NotificationBadge_default } from "../../NotificationBadge.js";
+import "../../Badge.js";
+import "../../_rolldown_dynamic_import_helper.js";
+import "../../useIsServerSide.js";
+import "../../LazyIcon.js";
+import "../../component.js";
 import { n as useBreakpoint } from "../../useBreakpoint.js";
 import "../../useIsMobileBreakpoint.js";
 import { n as getAriaLabelAttributes } from "../../accessibility.js";
+import "../../Spacer.js";
+import "../../useElementList.js";
+import "../../useFocusableElements.js";
+import "../../useFocusToggle.js";
+import "../../focus.js";
+import "../../useFocusTrap.js";
+import "../../useIntersectionObserver.js";
+import "../../useIsVisible.js";
+import "../../debounce.js";
+import "../../useLayoutEvent.js";
+import "../../usePrevious.js";
+import "../../useSize.js";
+import "../../useResizeObserver.js";
+import "../../useToggle.js";
+import "../../useKeyboardEvent.js";
+import "../../useOutsideEvent.js";
+import "../../mobile.js";
+import "../../src.js";
+import "../../StatusDot.js";
 import { t as X_default } from "../../X.js";
 import { t as Close_default } from "../../Close.js";
 import { t as ChevronDown_default } from "../../ChevronDown.js";
 import { t as ChevronUp_default } from "../../ChevronUp.js";
+import "../../Duolist.js";
+import "../../Highlighter.js";
+import "../../ElementHeaderText.js";
+import "../../StatusDotList.js";
+import { i as renderElementHeader } from "../../ElementHeader.js";
 import { t as Forward_default } from "../../Forward.js";
 import React, { useId, useState } from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
 var Label = ({ label, variant, id, hasExpander, isExpanded, dismissable, onExpand, onDismiss, closeBtnText }) => {
 	const breakpoint = useBreakpoint();
 	const { isHovered, refObject } = usePseudoClasses();
 	const iconSize = breakpoint < breakpoints.lg ? IconSize.XSmall : IconSize.Small;
-	const CustomTag = hasExpander ? "button" : "span";
+	const labelContainerClasses = classNames(styles["service-message__label-container"], styles[`service-message__label-container--${variant}`], hasExpander && styles[`service-message__label-container--has-expander`]);
+	const elementHeader = renderElementHeader(label, {
+		titleHtmlMarkup: "span",
+		isHovered,
+		size: "compact",
+		parentType: "expanderlist",
+		chevronIcon: hasExpander ? isExpanded ? ChevronUp_default : ChevronDown_default : void 0,
+		icon: /* @__PURE__ */ jsx(NotificationBadge_default, {
+			variant,
+			size: iconSize,
+			isHovered: hasExpander && isHovered
+		}),
+		closeButton: !hasExpander && dismissable ? /* @__PURE__ */ jsx(Close_default, {
+			onClick: onDismiss,
+			ariaLabel: closeBtnText,
+			className: styles["service-message__close"]
+		}) : void 0
+	});
 	return /* @__PURE__ */ jsx("div", {
-		className: cn(styles["service-message__label-container"], hasExpander && styles[`service-message__label-container--has-expander`]),
+		className: labelContainerClasses,
 		ref: refObject,
 		children: /* @__PURE__ */ jsx("div", {
 			className: styles["service-message__container"],
@@ -40,35 +90,23 @@ var Label = ({ label, variant, id, hasExpander, isExpanded, dismissable, onExpan
 				className: styles["service-message__row"],
 				children: /* @__PURE__ */ jsx("div", {
 					className: styles["service-message__col"],
-					children: /* @__PURE__ */ jsxs("div", {
+					children: /* @__PURE__ */ jsx("div", {
 						className: styles["service-message__label"],
-						children: [
-							/* @__PURE__ */ jsx(NotificationBadge_default, {
-								variant,
-								size: iconSize,
-								isHovered
-							}),
-							/* @__PURE__ */ jsx("h1", {
-								className: styles["service-message__title"],
-								id,
-								children: /* @__PURE__ */ jsx(CustomTag, {
-									className: styles["service-message__toggle"],
-									onClick: hasExpander ? onExpand : void 0,
-									"aria-expanded": hasExpander ? isExpanded : void 0,
-									children: label
-								})
-							}),
-							hasExpander && /* @__PURE__ */ jsx(Icon_default, {
-								size: iconSize,
-								svgIcon: isExpanded ? ChevronUp_default : ChevronDown_default,
-								isHovered
-							}),
-							!hasExpander && dismissable && /* @__PURE__ */ jsx(Close_default, {
-								onClick: onDismiss,
-								ariaLabel: closeBtnText,
-								className: styles["service-message__close"]
+						children: hasExpander ? /* @__PURE__ */ jsx("h1", {
+							className: styles["service-message__title"],
+							id,
+							children: /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: styles["service-message__toggle"],
+								onClick: onExpand,
+								"aria-expanded": isExpanded,
+								children: elementHeader
 							})
-						]
+						}) : /* @__PURE__ */ jsx("h1", {
+							className: styles["service-message__title"],
+							id,
+							children: elementHeader
+						})
 					})
 				})
 			})
@@ -93,7 +131,7 @@ var Content = ({ info, extraInfo, urlTitle, url, target, dismissable, closeBtnTe
 							children: info
 						}),
 						extraInfo && /* @__PURE__ */ jsx("p", {
-							className: cn(styles["service-message__info"], styles["service-message__info--extra"]),
+							className: classNames(styles["service-message__info"], styles["service-message__info--extra"]),
 							children: extraInfo
 						}),
 						/* @__PURE__ */ jsxs("div", {
@@ -111,7 +149,7 @@ var Content = ({ info, extraInfo, urlTitle, url, target, dismissable, closeBtnTe
 								})]
 							}), dismissable && /* @__PURE__ */ jsxs("button", {
 								ref: closeButtonRef,
-								className: cn(styles["service-message__action"], styles["service-message__action--close"]),
+								className: classNames(styles["service-message__action"], styles["service-message__action--close"]),
 								"aria-label": closeBtnText,
 								onClick: onDismiss,
 								children: [closeBtnText, /* @__PURE__ */ jsx(Icon_default, {
@@ -141,7 +179,7 @@ var ServiceMessage = ({ label, dismissable = true, onDismiss, info, extraInfo, u
 		if (hasExpander) setIsExpanded(!isExpanded);
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn(styles["service-message"], styles[`service-message--${variant}`]),
+		className: classNames(styles["service-message"], styles[`service-message--${variant}`]),
 		role: ariaRole,
 		...ariaLabelAttributes,
 		"data-testid": testId,

package/lib/components/ServiceMessage/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Label: React.FC<LabelProps>","Content: React.FC<ContentProps>","ServiceMessage: React.FC<ServiceMessageProps>"],"sources":["../../../src/components/ServiceMessage/ServiceMessage.tsx","../../../src/components/ServiceMessage/index.ts"],"sourcesContent":["import React, { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\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, refObject } = usePseudoClasses<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={refObject}>\n      <div className={styles['service-message__container']}>\n        <div className={styles['service-message__row']}>\n          <div className={styles['service-message__col']}>\n            <div className={styles['service-message__label']}>\n              <NotificationBadge variant={variant} size={iconSize} isHovered={isHovered} />\n              <h1 className={styles['service-message__title']} id={id}>\n                <CustomTag\n                  className={styles['service-message__toggle']}\n                  onClick={hasExpander ? onExpand : undefined}\n                  aria-expanded={hasExpander ? isExpanded : undefined}\n                >\n                  {label}\n                </CustomTag>\n              </h1>\n              {hasExpander && <Icon size={iconSize} svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} />}\n              {!hasExpander && dismissable && (\n                <Close onClick={onDismiss} ariaLabel={closeBtnText} className={styles['service-message__close']} />\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\ninterface ContentProps {\n  info?: string;\n  extraInfo?: string;\n  urlTitle?: string;\n  url?: string;\n  target?: AnchorLinkTargets;\n  dismissable: boolean;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Content: React.FC<ContentProps> = ({ info, extraInfo, urlTitle, url, target, dismissable, closeBtnText, onDismiss }) => {\n  const { refObject: readMoreRef, isHovered: readMoreHoverRefIsHovered } = usePseudoClasses<HTMLAnchorElement>();\n  const { refObject: closeButtonRef, isHovered: closeButtonIsHovered } = usePseudoClasses<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 = useId();\n  const hasExpander = !!info || !!extraInfo;\n\n  const ariaRole = variant === 'error' ? 'alert' : 'region';\n  const ariaLabelAttributes = getAriaLabelAttributes({ label, id: labelId });\n\n  const handleClick = (): void => {\n    if (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","import ServiceMessage from './ServiceMessage';\nexport * from './ServiceMessage';\nexport default ServiceMessage;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Label: React.FC<LabelProps>","Content: React.FC<ContentProps>","ServiceMessage: React.FC<ServiceMessageProps>"],"sources":["../../../src/components/ServiceMessage/ServiceMessage.tsx","../../../src/components/ServiceMessage/index.ts"],"sourcesContent":["import React, { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\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 { renderElementHeader } from '../ElementHeader/ElementHeader';\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, refObject } = usePseudoClasses<HTMLDivElement>();\n\n  const iconSize = breakpoint < breakpoints.lg ? IconSize.XSmall : IconSize.Small;\n  const labelContainerClasses = classNames(\n    styles['service-message__label-container'],\n    styles[`service-message__label-container--${variant}`],\n    hasExpander && styles[`service-message__label-container--has-expander`]\n  );\n\n  const elementHeader = renderElementHeader(label, {\n    titleHtmlMarkup: 'span',\n    isHovered,\n    size: 'compact',\n    parentType: 'expanderlist',\n    chevronIcon: hasExpander ? (isExpanded ? ChevronUp : ChevronDown) : undefined,\n    icon: <NotificationBadge variant={variant} size={iconSize} isHovered={hasExpander && isHovered} />,\n    closeButton:\n      !hasExpander && dismissable ? (\n        <Close onClick={onDismiss} ariaLabel={closeBtnText} className={styles['service-message__close']} />\n      ) : undefined,\n  });\n\n  return (\n    <div className={labelContainerClasses} ref={refObject}>\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              {hasExpander ? (\n                <h1 className={styles['service-message__title']} id={id}>\n                  <button type=\"button\" className={styles['service-message__toggle']} onClick={onExpand} aria-expanded={isExpanded}>\n                    {elementHeader}\n                  </button>\n                </h1>\n              ) : (\n                <h1 className={styles['service-message__title']} id={id}>\n                  {elementHeader}\n                </h1>\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 { refObject: readMoreRef, isHovered: readMoreHoverRefIsHovered } = usePseudoClasses<HTMLAnchorElement>();\n  const { refObject: closeButtonRef, isHovered: closeButtonIsHovered } = usePseudoClasses<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 = useId();\n  const hasExpander = !!info || !!extraInfo;\n\n  const ariaRole = variant === 'error' ? 'alert' : 'region';\n  const ariaLabelAttributes = getAriaLabelAttributes({ label, id: labelId });\n\n  const handleClick = (): void => {\n    if (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","import ServiceMessage from './ServiceMessage';\nexport * from './ServiceMessage';\nexport default ServiceMessage;\n"],"mappings":"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"}

package/lib/components/ServiceMessage/styles.module.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
-@use '../../scss/spacers' as spacers;
-@use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
+@import '../../scss/supernova/styles/colors.css';
+@import '../../scss/supernova/styles/spacers.css';
 @import '../../scss/breakpoints';
 @import '../../scss/grid';
 
@@ -16,57 +16,45 @@
   }
 
   &--success {
-    background-color: palette.$kiwi50;
-
-    &:hover {
-      background-color: rgba-to-rgb(rgba(palette.$kiwi500, 0.1), palette.$kiwi50);
-    }
+    background-color: var(--color-notification-background-success);
 
     &#{$servicemessage},
     &#{$servicemessage}__label-container {
-      border-color: palette.$kiwi900;
+      border-color: var(--color-notification-border-success);
     }
   }
 
   &--info {
-    background-color: palette.$blueberry50;
-
-    &:hover {
-      background-color: rgba-to-rgb(rgba(palette.$blueberry500, 0.1), palette.$blueberry50);
-    }
+    background-color: var(--color-notification-background-info);
 
     &#{$servicemessage},
     &#{$servicemessage}__label-container {
-      border-color: palette.$blueberry700;
+      border-color: var(--color-notification-border-info);
     }
   }
 
   &--warn {
-    background-color: palette.$banana50;
-
-    &:hover {
-      background-color: rgba-to-rgb(rgba(palette.$banana500, 0.1), palette.$banana50);
-    }
+    background-color: var(--color-notification-background-warning);
 
     &#{$servicemessage},
     &#{$servicemessage}__label-container {
-      border-color: palette.$banana700;
+      border-color: var(--color-notification-border-warning);
     }
   }
 
   &--error {
-    background-color: palette.$cherry50;
-
-    &:hover {
-      background-color: rgba-to-rgb(rgba(palette.$cherry500, 0.1), palette.$cherry50);
-    }
+    background-color: var(--color-notification-background-error);
 
     &#{$servicemessage},
     &#{$servicemessage}__label-container {
-      border-color: palette.$cherry700;
+      border-color: var(--color-notification-border-error);
     }
   }
 
+  &__icon {
+    fill: var(--color-action-graphics-onlight);
+  }
+
   &__container {
     @include make-container;
     @include make-container-max-widths;
@@ -83,16 +71,53 @@
 
   &__label-container {
     position: relative;
-    padding-top: spacers.getSpacer(3xs);
-    padding-bottom: spacers.getSpacer(3xs);
 
-    @media (min-width: map.get($grid-breakpoints, lg)) {
-      padding-top: spacers.getSpacer(2xs);
-      padding-bottom: spacers.getSpacer(2xs);
+    &--has-expander {
+      cursor: pointer;
     }
 
     &--has-expander:has(:focus-visible) {
-      box-shadow: inset 0 0 0 2px palette.$black;
+      box-shadow: inset 0 0 0 4px var(--color-action-border-onlight-focus);
+    }
+
+    &--info#{&}--has-expander {
+      &:hover {
+        background-color: var(--color-notification-background-info-hover);
+      }
+
+      &:active {
+        background-color: var(--color-notification-background-info-active);
+      }
+    }
+
+    &--success#{&}--has-expander {
+      &:hover {
+        background-color: var(--color-notification-background-success-hover);
+      }
+
+      &:active {
+        background-color: var(--color-notification-background-success-active);
+      }
+    }
+
+    &--warn#{&}--has-expander {
+      &:hover {
+        background-color: var(--color-notification-background-warning-hover);
+      }
+
+      &:active {
+        background-color: var(--color-notification-background-warning-active);
+      }
+    }
+
+    &--error#{&}--has-expander {
+      &:hover {
+        background-color: var(--color-notification-background-error-hover);
+      }
+
+      &:active {
+        background-color: var(--color-notification-background-error-active);
+      }
     }
   }
 
@@ -100,18 +125,20 @@
     display: flex;
     width: 100%;
     align-items: center;
-    gap: spacers.getSpacer(2xs);
+    gap: var(--core-space-2xs);
 
     @media (min-width: map.get($grid-breakpoints, md)) {
-      gap: spacers.getSpacer(m);
+      gap: var(--core-space-m);
     }
   }
 
   &__title {
+    display: flex;
     width: 100%;
     font-weight: 700;
     font-size: font-settings.$font-size-xs;
-    line-height: 1.25rem;
+    line-height: inherit;
+    margin: 0;
 
     @media (min-width: map.get($grid-breakpoints, md)) {
       font-size: font-settings.$font-size-sm;
@@ -120,6 +147,8 @@
 
   &__toggle {
     all: unset;
+    width: 100%;
+    box-sizing: border-box;
 
     // Triks for at hele labelen skal trigge klikk på knappen
     &::after {
@@ -127,24 +156,26 @@
       content: '';
       position: absolute;
     }
+
+    &:focus-visible {
+      outline: none !important;
+    }
   }
 
   &__content {
-    margin-left: calc(38px + spacers.getSpacer(2xs));
-    margin-right: calc(38px + spacers.getSpacer(2xs));
-    padding-top: spacers.getSpacer(xs);
-    padding-bottom: spacers.getSpacer(xs);
+    margin-left: 3.375rem;
+    margin-right: 3.375rem;
+    padding-top: var(--core-space-3xs);
+    padding-bottom: var(--core-space-2xs);
 
     @media (min-width: map.get($grid-breakpoints, md)) {
-      margin-left: calc(38px + spacers.getSpacer(m));
-      margin-right: calc(38px + spacers.getSpacer(m));
+      margin-left: 4.375rem;
+      margin-right: 4.375rem;
     }
 
     @media (min-width: map.get($grid-breakpoints, lg)) {
-      margin-left: calc(48px + spacers.getSpacer(m));
-      margin-right: calc(48px + spacers.getSpacer(m));
-      padding-top: spacers.getSpacer(2xs);
-      padding-bottom: spacers.getSpacer(s);
+      margin-left: 4rem;
+      margin-right: 4rem;
     }
   }
 
@@ -154,17 +185,16 @@
     margin: 0;
 
     @media (min-width: map.get($grid-breakpoints, lg)) {
-      margin-top: spacers.getSpacer(xs);
       line-height: 1.625rem;
       font-size: font-settings.$font-size-sm;
     }
 
     &--extra {
       font-size: 0.875rem;
-      margin-top: spacers.getSpacer(2xs);
+      margin-top: var(--core-space-2xs);
 
       @media (min-width: map.get($grid-breakpoints, lg)) {
-        margin-top: spacers.getSpacer(xs);
+        margin-top: var(--core-space-xs);
         font-size: font-settings.$font-size-xs;
         line-height: font-settings.$lineheight-size-xs;
       }
@@ -175,32 +205,33 @@
     display: flex;
     justify-content: space-between;
     flex-flow: column wrap;
-    gap: spacers.getSpacer(2xs);
-    margin-top: spacers.getSpacer(2xs);
+    gap: var(--core-space-2xs);
+    margin-top: var(--core-space-2xs);
 
     @media (min-width: map.get($grid-breakpoints, sm)) {
       flex-direction: row;
     }
 
     @media (min-width: map.get($grid-breakpoints, lg)) {
-      margin-top: spacers.getSpacer(s);
+      margin-top: var(--core-space-s);
     }
   }
 
   &__action {
+    cursor: pointer;
     display: flex;
     align-items: center;
     border: none;
     width: fit-content;
-    color: palette.$blueberry700;
+    color: var(--color-action-text-onlight);
     font-weight: 600;
     font-size: font-settings.$font-size-xs;
     line-height: 1.25rem;
     background-color: transparent;
     text-decoration: none;
-    padding: 0.5rem;
-    margin-left: -0.5rem;
-    gap: spacers.getSpacer(xs);
+    padding: var(--core-space-xs);
+    margin-left: calc(var(--core-space-xs) * -1);
+    gap: var(--core-space-xs);
 
     &:hover,
     &:active {
@@ -208,7 +239,7 @@
     }
 
     &:focus-visible {
-      box-shadow: 0 0 0 2px palette.$black;
+      box-shadow: 0 0 0 4px var(--color-action-border-onlight-focus);
       background-color: transparent;
       border: 0;
       outline: none;

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

@@ -7,11 +7,16 @@ export type Styles = {
   'service-message__col': string;
   'service-message__container': string;
   'service-message__content': string;
+  'service-message__icon': string;
   'service-message__info': string;
   'service-message__info--extra': string;
   'service-message__label': string;
   'service-message__label-container': string;
+  'service-message__label-container--error': string;
   'service-message__label-container--has-expander': string;
+  'service-message__label-container--info': string;
+  'service-message__label-container--success': string;
+  'service-message__label-container--warn': string;
   'service-message__row': string;
   'service-message__title': string;
   'service-message__toggle': string;

package/lib/components/SharingStatus/index.js

@@ -2,14 +2,14 @@ import { a as IconSize, n as AnalyticsId } from "../../constants2.js";
 import { t as palette } from "../../palette.js";
 import { t as Icon_default } from "../../Icon.js";
 import React from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
 var SharingStatus = (props) => {
 	const { color = "neutral", icon, children, className, testId, wrapText } = props;
-	const sharingStatusClasses = cn(styles["sharing-status"], className);
-	const dotClasses = cn(styles["sharing-status__dot"], styles[`sharing-status__dot--${color}`]);
-	const labelClasses = cn(styles["sharing-status__label"], styles[`sharing-status__label--${color}`], { [styles["sharing-status__label--wrap"]]: wrapText });
+	const sharingStatusClasses = classNames(styles["sharing-status"], className);
+	const dotClasses = classNames(styles["sharing-status__dot"], styles[`sharing-status__dot--${color}`]);
+	const labelClasses = classNames(styles["sharing-status__label"], styles[`sharing-status__label--${color}`], { [styles["sharing-status__label--wrap"]]: wrapText });
 	return /* @__PURE__ */ jsxs("span", {
 		className: sharingStatusClasses,
 		"data-testid": testId,

package/lib/components/SharingStatus/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["SharingStatus: React.FC<SharingStatusProps>"],"sources":["../../../src/components/SharingStatus/SharingStatus.tsx","../../../src/components/SharingStatus/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { PaletteNames, palette } from '../../theme/palette';\nimport Icon, { SvgIcon } from '../Icon';\n\nimport styles from './styles.module.scss';\n\nexport type SharingStatusColor = Extract<PaletteNames, 'kiwi' | 'cherry' | 'neutral'>;\n\nexport interface SharingStatusProps {\n  /** Color choices represent variants of sharingstatus */\n  color?: SharingStatusColor;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Icon to be displayed next to the sharingstatus */\n  icon: SvgIcon;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the text placed to the right of the sharingstatus */\n  children: string;\n  /** turn on and off word wrapping */\n  wrapText?: boolean;\n}\n\nconst SharingStatus: React.FC<SharingStatusProps> = props => {\n  const { color = 'neutral', icon, children, className, testId, wrapText } = props;\n\n  const sharingStatusClasses = classNames(styles['sharing-status'], className);\n  const dotClasses = classNames(styles['sharing-status__dot'], styles[`sharing-status__dot--${color}`]);\n  const labelClasses = classNames(styles['sharing-status__label'], styles[`sharing-status__label--${color}`], {\n    [styles['sharing-status__label--wrap']]: wrapText,\n  });\n\n  return (\n    <span className={sharingStatusClasses} data-testid={testId} data-analyticsid={AnalyticsId.SharingStatus}>\n      <span className={dotClasses}>\n        <Icon color={palette.white} svgIcon={icon} size={IconSize.XXSmall} />\n      </span>\n      <span className={labelClasses}>{children}</span>\n    </span>\n  );\n};\n\nexport default SharingStatus;\n","import SharingStatus from './SharingStatus';\nexport * from './SharingStatus';\nexport default SharingStatus;\n"],"mappings":";;;;;;;AA2BA,IAAMA,iBAA8C,UAAS;CAC3D,MAAM,EAAE,QAAQ,WAAW,MAAM,UAAU,WAAW,QAAQ,aAAa;CAE3E,MAAM,uBAAuB,GAAW,OAAO,mBAAmB,UAAU;CAC5E,MAAM,aAAa,GAAW,OAAO,wBAAwB,OAAO,wBAAwB,SAAS;CACrG,MAAM,eAAe,GAAW,OAAO,0BAA0B,OAAO,0BAA0B,UAAU,GACzG,OAAO,iCAAiC,UAC1C,CAAC;AAEF,QACE,qBAAC,QAAA;EAAK,WAAW;EAAsB,eAAa;EAAQ,oBAAkB,YAAY;aACxF,oBAAC,QAAA;GAAK,WAAW;aACf,oBAAC,cAAA;IAAK,OAAO,QAAQ;IAAO,SAAS;IAAM,MAAM,SAAS;KAAW;IAChE,EACP,oBAAC,QAAA;GAAK,WAAW;GAAe;IAAgB,CAAA;GAC3C;;ACxCX,IAAA,wBD4Ce"}
+{"version":3,"file":"index.js","names":["SharingStatus: React.FC<SharingStatusProps>"],"sources":["../../../src/components/SharingStatus/SharingStatus.tsx","../../../src/components/SharingStatus/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { PaletteNames, palette } from '../../theme/palette';\nimport Icon, { SvgIcon } from '../Icon';\n\nimport styles from './styles.module.scss';\n\nexport type SharingStatusColor = Extract<PaletteNames, 'kiwi' | 'cherry' | 'neutral'>;\n\nexport interface SharingStatusProps {\n  /** Color choices represent variants of sharingstatus */\n  color?: SharingStatusColor;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Icon to be displayed next to the sharingstatus */\n  icon: SvgIcon;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the text placed to the right of the sharingstatus */\n  children: string;\n  /** turn on and off word wrapping */\n  wrapText?: boolean;\n}\n\nconst SharingStatus: React.FC<SharingStatusProps> = props => {\n  const { color = 'neutral', icon, children, className, testId, wrapText } = props;\n\n  const sharingStatusClasses = classNames(styles['sharing-status'], className);\n  const dotClasses = classNames(styles['sharing-status__dot'], styles[`sharing-status__dot--${color}`]);\n  const labelClasses = classNames(styles['sharing-status__label'], styles[`sharing-status__label--${color}`], {\n    [styles['sharing-status__label--wrap']]: wrapText,\n  });\n\n  return (\n    <span className={sharingStatusClasses} data-testid={testId} data-analyticsid={AnalyticsId.SharingStatus}>\n      <span className={dotClasses}>\n        <Icon color={palette.white} svgIcon={icon} size={IconSize.XXSmall} />\n      </span>\n      <span className={labelClasses}>{children}</span>\n    </span>\n  );\n};\n\nexport default SharingStatus;\n","import SharingStatus from './SharingStatus';\nexport * from './SharingStatus';\nexport default SharingStatus;\n"],"mappings":";;;;;;;AA2BA,IAAMA,iBAA8C,UAAS;CAC3D,MAAM,EAAE,QAAQ,WAAW,MAAM,UAAU,WAAW,QAAQ,aAAa;CAE3E,MAAM,uBAAuB,WAAW,OAAO,mBAAmB,UAAU;CAC5E,MAAM,aAAa,WAAW,OAAO,wBAAwB,OAAO,wBAAwB,SAAS;CACrG,MAAM,eAAe,WAAW,OAAO,0BAA0B,OAAO,0BAA0B,UAAU,GACzG,OAAO,iCAAiC,UAC1C,CAAC;AAEF,QACE,qBAAC,QAAA;EAAK,WAAW;EAAsB,eAAa;EAAQ,oBAAkB,YAAY;aACxF,oBAAC,QAAA;GAAK,WAAW;aACf,oBAAC,cAAA;IAAK,OAAO,QAAQ;IAAO,SAAS;IAAM,MAAM,SAAS;KAAW;IAChE,EACP,oBAAC,QAAA;GAAK,WAAW;GAAe;IAAgB,CAAA;GAC3C;;ACxCX,IAAA,wBD4Ce"}

package/lib/components/Step/index.js

@@ -1,7 +1,7 @@
 import { n as AnalyticsId } from "../../constants2.js";
 import { t as StepButtons_default } from "../../StepButtons.js";
 import React from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
 var Step = ({ stepper, children, className, contentClassName, backButton, forwardButton, additionalButtons, cancelButton, stickyButtons = false, testId }) => {
@@ -16,7 +16,7 @@ var Step = ({ stepper, children, className, contentClassName, backButton, forwar
 				children: stepper
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: cn(styles.step__content, contentClassName),
+				className: classNames(styles.step__content, contentClassName),
 				children
 			}),
 			hasNavigation && /* @__PURE__ */ jsx(StepButtons_default, {

package/lib/components/Step/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Step: React.FC<StepProps>"],"sources":["../../../src/components/Step/Step.tsx","../../../src/components/Step/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { ButtonProps } from '../Button';\nimport StepButtons from '../StepButtons';\nimport { StepperProps } from '../Stepper';\n\nimport styles from './styles.module.scss';\n\nexport interface StepProps {\n  /** Stepper viser fremdriften */\n  stepper?: React.ReactElement<StepperProps>;\n  /** Innhold i steget */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the content element. */\n  contentClassName?: string;\n  /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n  backButton?: React.ReactElement<ButtonProps>;\n  /** Knapp for å gå videre. Vises med \"fill\" variant. */\n  forwardButton?: React.ReactElement<ButtonProps>;\n  /** Ekstra knapper. Valgfritt utseende. */\n  additionalButtons?: React.ReactElement<ButtonProps>[];\n  /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n  cancelButton?: React.ReactElement<ButtonProps>;\n  /** Knappene vil vises sticky nederst på skjermen dersom innholdet i Step tar mer plass enn vinduet. Default: false  */\n  stickyButtons?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Step: React.FC<StepProps> = ({\n  stepper,\n  children,\n  className,\n  contentClassName,\n  backButton,\n  forwardButton,\n  additionalButtons,\n  cancelButton,\n  stickyButtons = false,\n  testId,\n}) => {\n  const hasNavigation = backButton || forwardButton || additionalButtons || cancelButton;\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.Step} className={className}>\n      {stepper && <div className={styles.step__stepper}>{stepper}</div>}\n      <div className={classNames(styles.step__content, contentClassName)}>{children}</div>\n      {hasNavigation && (\n        <StepButtons\n          backButton={backButton}\n          forwardButton={forwardButton}\n          additionalButtons={additionalButtons}\n          cancelButton={cancelButton}\n          sticky={stickyButtons}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default Step;\n","import Step from './Step';\nexport * from './Step';\nexport default Step;\n"],"mappings":";;;;;;AAkCA,IAAMA,QAA6B,EACjC,SACA,UACA,WACA,kBACA,YACA,eACA,mBACA,cACA,gBAAgB,OAChB,aACI;CACJ,MAAM,gBAAgB,cAAc,iBAAiB,qBAAqB;AAE1E,QACE,qBAAC,OAAA;EAAI,eAAa;EAAQ,oBAAkB,YAAY;EAAiB;;GACtE,WAAW,oBAAC,OAAA;IAAI,WAAW,OAAO;cAAgB;KAAc;GACjE,oBAAC,OAAA;IAAI,WAAW,GAAW,OAAO,eAAe,iBAAiB;IAAG;KAAe;GACnF,iBACC,oBAAC,qBAAA;IACa;IACG;IACI;IACL;IACd,QAAQ;KACR;;GAEA;;AC3DV,IAAA,eD+De"}
+{"version":3,"file":"index.js","names":["Step: React.FC<StepProps>"],"sources":["../../../src/components/Step/Step.tsx","../../../src/components/Step/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { ButtonProps } from '../Button';\nimport StepButtons from '../StepButtons';\nimport { StepperProps } from '../Stepper';\n\nimport styles from './styles.module.scss';\n\nexport interface StepProps {\n  /** Stepper viser fremdriften */\n  stepper?: React.ReactElement<StepperProps>;\n  /** Innhold i steget */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the content element. */\n  contentClassName?: string;\n  /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n  backButton?: React.ReactElement<ButtonProps>;\n  /** Knapp for å gå videre. Vises med \"fill\" variant. */\n  forwardButton?: React.ReactElement<ButtonProps>;\n  /** Ekstra knapper. Valgfritt utseende. */\n  additionalButtons?: React.ReactElement<ButtonProps>[];\n  /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n  cancelButton?: React.ReactElement<ButtonProps>;\n  /** Knappene vil vises sticky nederst på skjermen dersom innholdet i Step tar mer plass enn vinduet. Default: false  */\n  stickyButtons?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Step: React.FC<StepProps> = ({\n  stepper,\n  children,\n  className,\n  contentClassName,\n  backButton,\n  forwardButton,\n  additionalButtons,\n  cancelButton,\n  stickyButtons = false,\n  testId,\n}) => {\n  const hasNavigation = backButton || forwardButton || additionalButtons || cancelButton;\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.Step} className={className}>\n      {stepper && <div className={styles.step__stepper}>{stepper}</div>}\n      <div className={classNames(styles.step__content, contentClassName)}>{children}</div>\n      {hasNavigation && (\n        <StepButtons\n          backButton={backButton}\n          forwardButton={forwardButton}\n          additionalButtons={additionalButtons}\n          cancelButton={cancelButton}\n          sticky={stickyButtons}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default Step;\n","import Step from './Step';\nexport * from './Step';\nexport default Step;\n"],"mappings":";;;;;;AAkCA,IAAMA,QAA6B,EACjC,SACA,UACA,WACA,kBACA,YACA,eACA,mBACA,cACA,gBAAgB,OAChB,aACI;CACJ,MAAM,gBAAgB,cAAc,iBAAiB,qBAAqB;AAE1E,QACE,qBAAC,OAAA;EAAI,eAAa;EAAQ,oBAAkB,YAAY;EAAiB;;GACtE,WAAW,oBAAC,OAAA;IAAI,WAAW,OAAO;cAAgB;KAAc;GACjE,oBAAC,OAAA;IAAI,WAAW,WAAW,OAAO,eAAe,iBAAiB;IAAG;KAAe;GACnF,iBACC,oBAAC,qBAAA;IACa;IACG;IACI;IACL;IACd,QAAQ;KACR;;GAEA;;AC3DV,IAAA,eD+De"}

package/lib/components/Stepper/index.js

@@ -3,7 +3,7 @@ import { n as getAriaLabelAttributes } from "../../accessibility.js";
 import "../../debounce.js";
 import { t as useSize } from "../../useSize.js";
 import React, { useRef } from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
 var MARKER_DOT_MIN_DISTANCE_PX = 4;
@@ -29,7 +29,7 @@ const getValidatedProps = (value, min, max) => {
 };
 var Dot = ({ index, completed, distanceBetweenDots, position }) => {
 	return /* @__PURE__ */ jsx("span", {
-		className: cn(styles.stepper__dot, completed && styles["stepper__dot--completed"], position && styles[`stepper__dot--${position}`]),
+		className: classNames(styles.stepper__dot, completed && styles["stepper__dot--completed"], position && styles[`stepper__dot--${position}`]),
 		style: !position && typeof index !== "undefined" && typeof distanceBetweenDots !== "undefined" ? { left: `${index * distanceBetweenDots + 8}px` } : void 0,
 		"data-testid": "dot"
 	});