@helsenorge/designsystem-react 7.12.0 → 7.13.0

package/components/ServiceMessage/ServiceMessage.js.map

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

package/components/ServiceMessage/styles.module.scss

@@ -99,7 +99,7 @@
     padding-top: getSpacer(3xs);
     padding-bottom: getSpacer(3xs);
 
-    @media (min-width: map-get($grid-breakpoints, lg)) {
+    @media (min-width: map.get($grid-breakpoints, lg)) {
       padding-top: getSpacer(2xs);
       padding-bottom: getSpacer(2xs);
     }
@@ -115,7 +115,7 @@
     align-items: center;
     gap: getSpacer(2xs);
 
-    @media (min-width: map-get($grid-breakpoints, md)) {
+    @media (min-width: map.get($grid-breakpoints, md)) {
       gap: getSpacer(m);
     }
   }
@@ -126,7 +126,7 @@
     font-size: $font-size-xs;
     line-height: 1.25rem;
 
-    @media (min-width: map-get($grid-breakpoints, md)) {
+    @media (min-width: map.get($grid-breakpoints, md)) {
       font-size: $font-size-sm;
     }
   }
@@ -148,12 +148,12 @@
     padding-top: getSpacer(xs);
     padding-bottom: getSpacer(xs);
 
-    @media (min-width: map-get($grid-breakpoints, md)) {
+    @media (min-width: map.get($grid-breakpoints, md)) {
       margin-left: calc(38px + getSpacer(m));
       margin-right: calc(38px + getSpacer(m));
     }
 
-    @media (min-width: map-get($grid-breakpoints, lg)) {
+    @media (min-width: map.get($grid-breakpoints, lg)) {
       margin-left: calc(48px + getSpacer(m));
       margin-right: calc(48px + getSpacer(m));
       padding-top: getSpacer(2xs);
@@ -166,7 +166,7 @@
     line-height: 1.25rem;
     margin: 0;
 
-    @media (min-width: map-get($grid-breakpoints, lg)) {
+    @media (min-width: map.get($grid-breakpoints, lg)) {
       margin-top: getSpacer(xs);
       line-height: 1.625rem;
       font-size: $font-size-sm;
@@ -176,7 +176,7 @@
       font-size: 0.875rem;
       margin-top: getSpacer(2xs);
 
-      @media (min-width: map-get($grid-breakpoints, lg)) {
+      @media (min-width: map.get($grid-breakpoints, lg)) {
         margin-top: getSpacer(xs);
         font-size: $font-size-xs;
         line-height: $lineheight-size-xs;
@@ -191,11 +191,11 @@
     gap: getSpacer(2xs);
     margin-top: getSpacer(2xs);
 
-    @media (min-width: map-get($grid-breakpoints, sm)) {
+    @media (min-width: map.get($grid-breakpoints, sm)) {
       flex-direction: row;
     }
 
-    @media (min-width: map-get($grid-breakpoints, lg)) {
+    @media (min-width: map.get($grid-breakpoints, lg)) {
       margin-top: getSpacer(s);
     }
   }
@@ -228,7 +228,7 @@
     }
 
     &--close {
-      @media (min-width: map-get($grid-breakpoints, lg)) {
+      @media (min-width: map.get($grid-breakpoints, lg)) {
         margin-left: auto;
       }
     }

package/components/SharingStatus/SharingStatus.js

@@ -1,16 +1,16 @@
 import t from "react";
 import a from "classnames";
-import { AnalyticsId as d, IconSize as h } from "../../constants.js";
-import { palette as _ } from "../../theme/palette.js";
+import { AnalyticsId as d, IconSize as _ } from "../../constants.js";
+import { palette as h } from "../../theme/palette.js";
 import { Icon as g } from "../Icon/Icon.js";
 import s from "../SharingStatus/styles.module.scss";
-const S = (r) => {
-  const { color: e = "blueberry", icon: l, children: n, className: o, testId: c, wrapText: i } = r, m = a(s["sharing-status"], o), u = a(s["sharing-status__dot"], s[`sharing-status__dot--${e}`]), p = a(s["sharing-status__label"], s[`sharing-status__label--${e}`], {
+const E = (r) => {
+  const { color: e = "blueberry", icon: l, children: n, className: o, testId: c, wrapText: i } = r, m = a(s["sharing-status"], o), p = a(s["sharing-status__dot"], s[`sharing-status__dot--${e}`]), u = a(s["sharing-status__label"], s[`sharing-status__label--${e}`], {
     [s["sharing-status__label--wrap"]]: i
   });
-  return /* @__PURE__ */ t.createElement("span", { className: m, "data-testid": c, "data-analyticsid": d.SharingStatus }, /* @__PURE__ */ t.createElement("span", { className: u }, /* @__PURE__ */ t.createElement(g, { color: _.white, svgIcon: l, size: h.XXSmall })), /* @__PURE__ */ t.createElement("span", { className: p }, n));
-}, w = S;
+  return /* @__PURE__ */ t.createElement("span", { className: m, "data-testid": c, "data-analyticsid": d.SharingStatus }, /* @__PURE__ */ t.createElement("span", { className: p }, /* @__PURE__ */ t.createElement(g, { color: h.white, svgIcon: l, size: _.XXSmall })), /* @__PURE__ */ t.createElement("span", { className: u }, n));
+};
 export {
-  w as default
+  E as default
 };
 //# sourceMappingURL=SharingStatus.js.map

package/components/SharingStatus/SharingStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"SharingStatus.js","sources":["../../../src/components/SharingStatus/SharingStatus.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { PaletteNames, palette } from '../../theme/palette';\nimport Icon, { SvgIcon } from '../Icon';\n\nimport styles from './styles.module.scss';\n\nexport type SharingStatusColor = Extract<PaletteNames, 'kiwi' | 'cherry' | 'neutral' | 'blueberry' | 'banana'>;\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 = 'blueberry', icon, children, className, testId, wrapText } = props;\n\n  const sharingStatusClasses = classNames(styles['sharing-status'], className);\n  const dotClasses = classNames(styles['sharing-status__dot'], styles[`sharing-status__dot--${color}`]);\n  const labelClasses = classNames(styles['sharing-status__label'], styles[`sharing-status__label--${color}`], {\n    [styles['sharing-status__label--wrap']]: wrapText,\n  });\n\n  return (\n    <span className={sharingStatusClasses} data-testid={testId} data-analyticsid={AnalyticsId.SharingStatus}>\n      <span className={dotClasses}>\n        <Icon color={palette.white} svgIcon={icon} size={IconSize.XXSmall} />\n      </span>\n      <span className={labelClasses}>{children}</span>\n    </span>\n  );\n};\n\nexport default SharingStatus;\n"],"names":["SharingStatus","props","color","icon","children","className","testId","wrapText","sharingStatusClasses","classNames","styles","dotClasses","labelClasses","React","AnalyticsId","Icon","palette","IconSize","SharingStatus$1"],"mappings":";;;;;;AA2BA,MAAMA,IAA8C,CAASC,MAAA;AACrD,QAAA,EAAE,OAAAC,IAAQ,aAAa,MAAAC,GAAM,UAAAC,GAAU,WAAAC,GAAW,QAAAC,GAAQ,UAAAC,EAAa,IAAAN,GAEvEO,IAAuBC,EAAWC,EAAO,gBAAgB,GAAGL,CAAS,GACrEM,IAAaF,EAAWC,EAAO,qBAAqB,GAAGA,EAAO,wBAAwBR,CAAK,EAAE,CAAC,GAC9FU,IAAeH,EAAWC,EAAO,uBAAuB,GAAGA,EAAO,0BAA0BR,CAAK,EAAE,GAAG;AAAA,IAC1G,CAACQ,EAAO,6BAA6B,CAAC,GAAGH;AAAA,EAAA,CAC1C;AAED,SACGM,gBAAAA,EAAA,cAAA,QAAA,EAAK,WAAWL,GAAsB,eAAaF,GAAQ,oBAAkBQ,EAAY,cACxF,GAAAD,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAWF,KACdE,gBAAAA,EAAA,cAAAE,GAAA,EAAK,OAAOC,EAAQ,OAAO,SAASb,GAAM,MAAMc,EAAS,QAAA,CAAS,CACrE,GACCJ,gBAAAA,EAAA,cAAA,QAAA,EAAK,WAAWD,EAAA,GAAeR,CAAS,CAC3C;AAEJ,GAEAc,IAAelB;"}
+{"version":3,"file":"SharingStatus.js","sources":["../../../src/components/SharingStatus/SharingStatus.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { PaletteNames, palette } from '../../theme/palette';\nimport Icon, { SvgIcon } from '../Icon';\n\nimport styles from './styles.module.scss';\n\nexport type SharingStatusColor = Extract<PaletteNames, 'kiwi' | 'cherry' | 'neutral' | 'blueberry' | 'banana'>;\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 = 'blueberry', icon, children, className, testId, wrapText } = props;\n\n  const sharingStatusClasses = classNames(styles['sharing-status'], className);\n  const dotClasses = classNames(styles['sharing-status__dot'], styles[`sharing-status__dot--${color}`]);\n  const labelClasses = classNames(styles['sharing-status__label'], styles[`sharing-status__label--${color}`], {\n    [styles['sharing-status__label--wrap']]: wrapText,\n  });\n\n  return (\n    <span className={sharingStatusClasses} data-testid={testId} data-analyticsid={AnalyticsId.SharingStatus}>\n      <span className={dotClasses}>\n        <Icon color={palette.white} svgIcon={icon} size={IconSize.XXSmall} />\n      </span>\n      <span className={labelClasses}>{children}</span>\n    </span>\n  );\n};\n\nexport default SharingStatus;\n"],"names":["SharingStatus","props","color","icon","children","className","testId","wrapText","sharingStatusClasses","classNames","styles","dotClasses","labelClasses","React","AnalyticsId","Icon","palette","IconSize"],"mappings":";;;;;;AA2BA,MAAMA,IAA8C,CAASC,MAAA;AACrD,QAAA,EAAE,OAAAC,IAAQ,aAAa,MAAAC,GAAM,UAAAC,GAAU,WAAAC,GAAW,QAAAC,GAAQ,UAAAC,EAAa,IAAAN,GAEvEO,IAAuBC,EAAWC,EAAO,gBAAgB,GAAGL,CAAS,GACrEM,IAAaF,EAAWC,EAAO,qBAAqB,GAAGA,EAAO,wBAAwBR,CAAK,EAAE,CAAC,GAC9FU,IAAeH,EAAWC,EAAO,uBAAuB,GAAGA,EAAO,0BAA0BR,CAAK,EAAE,GAAG;AAAA,IAC1G,CAACQ,EAAO,6BAA6B,CAAC,GAAGH;AAAA,EAAA,CAC1C;AAED,SACGM,gBAAAA,EAAA,cAAA,QAAA,EAAK,WAAWL,GAAsB,eAAaF,GAAQ,oBAAkBQ,EAAY,cACxF,GAAAD,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAWF,KACdE,gBAAAA,EAAA,cAAAE,GAAA,EAAK,OAAOC,EAAQ,OAAO,SAASb,GAAM,MAAMc,EAAS,QAAA,CAAS,CACrE,GACCJ,gBAAAA,EAAA,cAAA,QAAA,EAAK,WAAWD,EAAA,GAAeR,CAAS,CAC3C;AAEJ;"}

package/components/Slider/Slider.js

@@ -4,7 +4,7 @@ import { AnalyticsId as Z } from "../../constants.js";
 import { useSize as x } from "../../hooks/useSize.js";
 import { useUuid as C } from "../../hooks/useUuid.js";
 import { getAriaLabelAttributes as V } from "../../utils/accessibility.js";
-import ee from "../Title/Title.js";
+import { Title as ee } from "../Title/Title.js";
 import n from "../Slider/styles.module.scss";
 const te = (s, k, f) => {
   const [_, o] = D(s), p = (r) => {
@@ -13,7 +13,7 @@ const te = (s, k, f) => {
   return v(() => {
     p(s);
   }, [k, f]), [_, p];
-}, re = ({
+}, fe = ({
   title: s,
   ariaLabel: k,
   labelLeft: f,
@@ -32,7 +32,7 @@ const te = (s, k, f) => {
     typeof m > "u" ? (d - i) / 2 + i : m,
     i,
     d
-  ), h = C(), N = C(), b = C(), P = z(null), j = z(null), { width: $ } = x(P) || { width: 0 }, B = d / 10;
+  ), h = C(), N = C(), b = C(), P = z(null), j = z(null), { width: B } = x(P) || { width: 0 }, X = d / 10;
   v(() => {
     const t = () => {
       U(!1);
@@ -41,16 +41,16 @@ const te = (s, k, f) => {
       document.removeEventListener("pointerup", t);
     };
   }, []);
-  const X = (t) => {
+  const $ = (t) => {
     var T;
-    const e = ((T = P.current) == null ? void 0 : T.getBoundingClientRect().x) ?? 0, l = (t - e) / $, E = d - i;
+    const e = ((T = P.current) == null ? void 0 : T.getBoundingClientRect().x) ?? 0, l = (t - e) / B, E = d - i;
     let S = l * E + i;
     return S = Math.round(S / g) * g, S = Math.max(i, Math.min(d, S)), S;
   };
   v(() => {
     const t = (e) => {
       if (!o && L) {
-        const l = X(e.clientX);
+        const l = $(e.clientX);
         u(l);
       }
     };
@@ -67,8 +67,7 @@ const te = (s, k, f) => {
   const A = () => {
     y === !1 && R(!0);
   }, H = (t) => {
-    if (o)
-      return;
+    if (o) return;
     let e = !1;
     switch (t.key) {
       case "ArrowLeft":
@@ -76,14 +75,14 @@ const te = (s, k, f) => {
         u(c - g), e = !0;
         break;
       case "PageDown":
-        u(c - B), e = !0;
+        u(c - X), e = !0;
         break;
       case "ArrowRight":
       case "ArrowUp":
         u(c + g), e = !0;
         break;
       case "PageUp":
-        u(c + B), e = !0;
+        u(c + X), e = !0;
         break;
       case "Home":
         u(i), e = !0;
@@ -95,14 +94,13 @@ const te = (s, k, f) => {
     e && (A(), t.preventDefault(), t.stopPropagation());
   }, O = (t) => {
     var l;
-    if (o)
-      return;
-    const e = X(t.clientX);
+    if (o) return;
+    const e = $(t.clientX);
     u(e), (l = j.current) == null || l.focus();
   }, W = (t) => {
     var e;
     o || (U(!0), A(), t.preventDefault(), t.stopPropagation(), (e = j.current) == null || e.focus());
-  }, q = d !== i ? $ / (d - i) * (c - i) : 0, F = () => {
+  }, q = d !== i ? B / (d - i) * (c - i) : 0, F = () => {
     const t = r ? Math.round((c - i) / g) : null;
     if (r && t !== null && t >= 0 && t < r.length) {
       const e = r[t], l = e.emojiUniCode, E = typeof e.label < "u" ? e.label.toString() : void 0;
@@ -172,9 +170,9 @@ const te = (s, k, f) => {
       }
     )
   ), Y()), (f || _) && /* @__PURE__ */ a.createElement("span", { className: n.slider__options }, /* @__PURE__ */ a.createElement("span", { id: N }, f), /* @__PURE__ */ a.createElement("span", { id: b }, _)));
-}, me = re;
+};
 export {
-  re as Slider,
-  me as default
+  fe as Slider,
+  fe as default
 };
 //# sourceMappingURL=Slider.js.map

package/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n  const [value, setValue] = useState(initial);\n\n  const setSafeValue = (newValue: number): void => {\n    if (newValue > max) {\n      setValue(max);\n    } else if (newValue < min) {\n      setValue(min);\n    } else {\n      setValue(newValue);\n    }\n  };\n\n  useEffect(() => {\n    setSafeValue(initial);\n  }, [min, max]);\n\n  return [value, setSafeValue];\n};\n\nexport type SliderStep = {\n  label?: number | string;\n  emojiUniCode?: string;\n};\n\nexport interface SliderProps {\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tSets aria-label of the slider. */\n  ariaLabel?: string;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Sets the minimum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  minValue?: number;\n  /** Sets the maximum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  maxValue?: number;\n  /** Function to be called when the value state has changed. */\n  onChange?: (value: number) => void;\n  /** If set to false will only trigger onChange once a user interaction has been made, updates to this prop will be taken into account - true by default */\n  selected?: boolean;\n  /** Sets the steps data for the slider */\n  steps?: SliderStep[];\n  /** Sets the step to move per point in the slider */\n  step?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the value of the slider */\n  value?: number;\n}\n\nexport const Slider: React.FC<SliderProps> = ({\n  title,\n  ariaLabel,\n  labelLeft,\n  labelRight,\n  disabled = false,\n  onChange,\n  steps,\n  step = 1,\n  minValue = 0,\n  maxValue = steps ? steps.length - 1 : 100,\n  selected = true,\n  testId,\n  value,\n}) => {\n  const [isMoving, setIsMoving] = useState(false);\n  const [selectedState, setSelectedState] = useState(typeof value === 'undefined' ? selected : true);\n  const [valueState, setValueState] = useSafeNumberValue(\n    typeof value === 'undefined' ? (maxValue - minValue) / 2 + minValue : value,\n    minValue,\n    maxValue\n  );\n\n  const titleId = useUuid();\n  const labelLeftId = useUuid();\n  const labelRightId = useUuid();\n  const trackRef = useRef<HTMLDivElement>(null);\n  const markerRef = useRef<HTMLDivElement>(null);\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const largeStep = maxValue / 10;\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return () => {\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, []);\n\n  const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n    const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n    // Calculate the normalized position (0 to 1) of the marker along the track\n    const normalizedPosition = (markerPosition - trackPosition) / trackWidth;\n    const valueRange = maxValue - minValue;\n    // Calculate the value without considering the step\n    let value = normalizedPosition * valueRange + minValue;\n    // Adjust the value to account for the step increment\n    const stepCount = Math.round(value / step);\n    value = stepCount * step;\n    value = Math.max(minValue, Math.min(maxValue, value));\n\n    return value;\n  };\n\n  useEffect(() => {\n    const handlePointerMove = (e: PointerEvent): void => {\n      if (!disabled && isMoving) {\n        const newValue = getValueBasedOnMarkerPosition(e.clientX);\n        setValueState(newValue);\n      }\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n\n    return () => {\n      document.removeEventListener('pointermove', handlePointerMove);\n    };\n  }, [isMoving]);\n\n  useEffect(() => {\n    if (value !== valueState && typeof value !== 'undefined') {\n      handleSelected();\n      setValueState(value);\n    }\n  }, [value]);\n\n  useEffect(() => {\n    if (!disabled && selectedState && onChange) {\n      onChange(valueState);\n    }\n  }, [valueState, selectedState]);\n\n  useEffect(() => {\n    if (typeof value === 'undefined' && selected !== selectedState) {\n      setSelectedState(selected);\n    }\n  }, [selected]);\n\n  const handleSelected = (): void => {\n    if (selectedState === false) {\n      setSelectedState(true);\n    }\n  };\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    let flag = false;\n\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        setValueState(valueState - step);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValueState(valueState - largeStep);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValueState(valueState + step);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValueState(valueState + largeStep);\n        flag = true;\n        break;\n      case 'Home':\n        setValueState(minValue);\n        flag = true;\n        break;\n      case 'End':\n        setValueState(maxValue);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\n      handleSelected();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    const newValue = getValueBasedOnMarkerPosition(e.clientX);\n    setValueState(newValue);\n    markerRef.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    setIsMoving(true);\n    handleSelected();\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    markerRef.current?.focus();\n  };\n\n  const markerXPos = maxValue !== minValue ? (trackWidth / (maxValue - minValue)) * (valueState - minValue) : 0;\n\n  const getAriaValueText = (): string | undefined => {\n    const stepIndex = steps ? Math.round((valueState - minValue) / step) : null;\n\n    if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {\n      const step = steps[stepIndex];\n      const emojiCode = step.emojiUniCode;\n      const label = typeof step.label !== 'undefined' ? step.label.toString() : undefined;\n\n      return emojiCode && label ? `${emojiCode} ${label}` : emojiCode || label;\n    }\n\n    return undefined;\n  };\n\n  const getAriaLabeledById = (): string | undefined => {\n    if (title && labelLeft && labelRight) {\n      return [titleId, labelLeftId, labelRightId].join(' ');\n    }\n    if (title && labelLeft) {\n      return [titleId, labelLeftId].join(' ');\n    }\n    if (title && labelRight) {\n      return [titleId, labelRightId].join(' ');\n    }\n    if (title) {\n      return titleId;\n    }\n  };\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: ariaLabel,\n    id: getAriaLabeledById(),\n    prefer: 'label',\n  });\n\n  const getXPositionStyling = (index: number, stepsLength: number): { left: string } => {\n    return { left: `${(index / (stepsLength - 1)) * 100}%` };\n  };\n\n  const renderEmojies = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__emoji-container']}>\n        {steps?.map((step, index) => {\n          return (\n            step.emojiUniCode && (\n              <div\n                aria-hidden={true}\n                key={'emoji' + index}\n                className={styles['slider__emoji']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.emojiUniCode}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  const renderSteps = (): React.ReactNode => {\n    return steps?.map((_step, index) => {\n      return <div key={'step' + index} className={styles['slider__track__step']} style={getXPositionStyling(index, steps.length)} />;\n    });\n  };\n\n  const renderStepLabels = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__value-container']}>\n        {steps?.map((step, index) => {\n          return (\n            typeof step.label !== 'undefined' && (\n              <div\n                aria-hidden={true}\n                key={'label' + index}\n                className={styles['slider__value']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.label}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n      {title && (\n        <Title className={styles['slider__title']} htmlMarkup={'h3'} margin={0} appearance={'title3'} id={titleId}>\n          {title}\n        </Title>\n      )}\n      <div className={styles['slider__content-container']}>\n        {renderEmojies()}\n        {/* Komponenten er tilgjengelig for mus/keyboard gjennom bruk av slideren */}\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n        <div\n          ref={trackRef}\n          className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n          onClick={handleTrackClick}\n          onPointerDown={handlePointerDown}\n        >\n          <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])}>{renderSteps()}</div>\n          <div\n            role={disabled ? undefined : 'slider'}\n            ref={markerRef}\n            className={classNames(styles.slider__marker, {\n              [styles['slider__marker--disabled']]: disabled,\n              [styles['slider__marker--selected']]: selectedState,\n            })}\n            style={{\n              left: `${markerXPos}px`,\n            }}\n            onKeyDown={handleKeyDown}\n            aria-valuenow={valueState}\n            aria-valuetext={getAriaValueText()}\n            aria-valuemin={minValue}\n            aria-valuemax={maxValue}\n            tabIndex={disabled ? undefined : 0}\n            aria-disabled={disabled}\n            {...ariaLabelAttributes}\n          />\n        </div>\n        {renderStepLabels()}\n      </div>\n      {(labelLeft || labelRight) && (\n        <span className={styles.slider__options}>\n          <span id={labelLeftId}>{labelLeft}</span>\n          <span id={labelRightId}>{labelRight}</span>\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport default Slider;\n"],"names":["useSafeNumberValue","initial","min","max","value","setValue","useState","setSafeValue","newValue","useEffect","Slider","title","ariaLabel","labelLeft","labelRight","disabled","onChange","steps","step","minValue","maxValue","selected","testId","isMoving","setIsMoving","selectedState","setSelectedState","valueState","setValueState","titleId","useUuid","labelLeftId","labelRightId","trackRef","useRef","markerRef","trackWidth","useSize","largeStep","handlePointerUp","getValueBasedOnMarkerPosition","markerPosition","trackPosition","_a","normalizedPosition","valueRange","handlePointerMove","handleSelected","handleKeyDown","e","flag","handleTrackClick","handlePointerDown","markerXPos","getAriaValueText","stepIndex","emojiCode","label","ariaLabelAttributes","getAriaLabelAttributes","getXPositionStyling","index","stepsLength","renderEmojies","React","styles","renderSteps","_step","renderStepLabels","AnalyticsId","Title","classNames","Slider$1"],"mappings":"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"}
+{"version":3,"file":"Slider.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n  const [value, setValue] = useState(initial);\n\n  const setSafeValue = (newValue: number): void => {\n    if (newValue > max) {\n      setValue(max);\n    } else if (newValue < min) {\n      setValue(min);\n    } else {\n      setValue(newValue);\n    }\n  };\n\n  useEffect(() => {\n    setSafeValue(initial);\n  }, [min, max]);\n\n  return [value, setSafeValue];\n};\n\nexport type SliderStep = {\n  label?: number | string;\n  emojiUniCode?: string;\n};\n\nexport interface SliderProps {\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tSets aria-label of the slider. */\n  ariaLabel?: string;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Sets the minimum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  minValue?: number;\n  /** Sets the maximum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  maxValue?: number;\n  /** Function to be called when the value state has changed. */\n  onChange?: (value: number) => void;\n  /** If set to false will only trigger onChange once a user interaction has been made, updates to this prop will be taken into account - true by default */\n  selected?: boolean;\n  /** Sets the steps data for the slider */\n  steps?: SliderStep[];\n  /** Sets the step to move per point in the slider */\n  step?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the value of the slider */\n  value?: number;\n}\n\nexport const Slider: React.FC<SliderProps> = ({\n  title,\n  ariaLabel,\n  labelLeft,\n  labelRight,\n  disabled = false,\n  onChange,\n  steps,\n  step = 1,\n  minValue = 0,\n  maxValue = steps ? steps.length - 1 : 100,\n  selected = true,\n  testId,\n  value,\n}) => {\n  const [isMoving, setIsMoving] = useState(false);\n  const [selectedState, setSelectedState] = useState(typeof value === 'undefined' ? selected : true);\n  const [valueState, setValueState] = useSafeNumberValue(\n    typeof value === 'undefined' ? (maxValue - minValue) / 2 + minValue : value,\n    minValue,\n    maxValue\n  );\n\n  const titleId = useUuid();\n  const labelLeftId = useUuid();\n  const labelRightId = useUuid();\n  const trackRef = useRef<HTMLDivElement>(null);\n  const markerRef = useRef<HTMLDivElement>(null);\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const largeStep = maxValue / 10;\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return () => {\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, []);\n\n  const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n    const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n    // Calculate the normalized position (0 to 1) of the marker along the track\n    const normalizedPosition = (markerPosition - trackPosition) / trackWidth;\n    const valueRange = maxValue - minValue;\n    // Calculate the value without considering the step\n    let value = normalizedPosition * valueRange + minValue;\n    // Adjust the value to account for the step increment\n    const stepCount = Math.round(value / step);\n    value = stepCount * step;\n    value = Math.max(minValue, Math.min(maxValue, value));\n\n    return value;\n  };\n\n  useEffect(() => {\n    const handlePointerMove = (e: PointerEvent): void => {\n      if (!disabled && isMoving) {\n        const newValue = getValueBasedOnMarkerPosition(e.clientX);\n        setValueState(newValue);\n      }\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n\n    return () => {\n      document.removeEventListener('pointermove', handlePointerMove);\n    };\n  }, [isMoving]);\n\n  useEffect(() => {\n    if (value !== valueState && typeof value !== 'undefined') {\n      handleSelected();\n      setValueState(value);\n    }\n  }, [value]);\n\n  useEffect(() => {\n    if (!disabled && selectedState && onChange) {\n      onChange(valueState);\n    }\n  }, [valueState, selectedState]);\n\n  useEffect(() => {\n    if (typeof value === 'undefined' && selected !== selectedState) {\n      setSelectedState(selected);\n    }\n  }, [selected]);\n\n  const handleSelected = (): void => {\n    if (selectedState === false) {\n      setSelectedState(true);\n    }\n  };\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    let flag = false;\n\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        setValueState(valueState - step);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValueState(valueState - largeStep);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValueState(valueState + step);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValueState(valueState + largeStep);\n        flag = true;\n        break;\n      case 'Home':\n        setValueState(minValue);\n        flag = true;\n        break;\n      case 'End':\n        setValueState(maxValue);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\n      handleSelected();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    const newValue = getValueBasedOnMarkerPosition(e.clientX);\n    setValueState(newValue);\n    markerRef.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    setIsMoving(true);\n    handleSelected();\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    markerRef.current?.focus();\n  };\n\n  const markerXPos = maxValue !== minValue ? (trackWidth / (maxValue - minValue)) * (valueState - minValue) : 0;\n\n  const getAriaValueText = (): string | undefined => {\n    const stepIndex = steps ? Math.round((valueState - minValue) / step) : null;\n\n    if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {\n      const step = steps[stepIndex];\n      const emojiCode = step.emojiUniCode;\n      const label = typeof step.label !== 'undefined' ? step.label.toString() : undefined;\n\n      return emojiCode && label ? `${emojiCode} ${label}` : emojiCode || label;\n    }\n\n    return undefined;\n  };\n\n  const getAriaLabeledById = (): string | undefined => {\n    if (title && labelLeft && labelRight) {\n      return [titleId, labelLeftId, labelRightId].join(' ');\n    }\n    if (title && labelLeft) {\n      return [titleId, labelLeftId].join(' ');\n    }\n    if (title && labelRight) {\n      return [titleId, labelRightId].join(' ');\n    }\n    if (title) {\n      return titleId;\n    }\n  };\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: ariaLabel,\n    id: getAriaLabeledById(),\n    prefer: 'label',\n  });\n\n  const getXPositionStyling = (index: number, stepsLength: number): { left: string } => {\n    return { left: `${(index / (stepsLength - 1)) * 100}%` };\n  };\n\n  const renderEmojies = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__emoji-container']}>\n        {steps?.map((step, index) => {\n          return (\n            step.emojiUniCode && (\n              <div\n                aria-hidden={true}\n                key={'emoji' + index}\n                className={styles['slider__emoji']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.emojiUniCode}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  const renderSteps = (): React.ReactNode => {\n    return steps?.map((_step, index) => {\n      return <div key={'step' + index} className={styles['slider__track__step']} style={getXPositionStyling(index, steps.length)} />;\n    });\n  };\n\n  const renderStepLabels = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__value-container']}>\n        {steps?.map((step, index) => {\n          return (\n            typeof step.label !== 'undefined' && (\n              <div\n                aria-hidden={true}\n                key={'label' + index}\n                className={styles['slider__value']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.label}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n      {title && (\n        <Title className={styles['slider__title']} htmlMarkup={'h3'} margin={0} appearance={'title3'} id={titleId}>\n          {title}\n        </Title>\n      )}\n      <div className={styles['slider__content-container']}>\n        {renderEmojies()}\n        {/* Komponenten er tilgjengelig for mus/keyboard gjennom bruk av slideren */}\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n        <div\n          ref={trackRef}\n          className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n          onClick={handleTrackClick}\n          onPointerDown={handlePointerDown}\n        >\n          <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])}>{renderSteps()}</div>\n          <div\n            role={disabled ? undefined : 'slider'}\n            ref={markerRef}\n            className={classNames(styles.slider__marker, {\n              [styles['slider__marker--disabled']]: disabled,\n              [styles['slider__marker--selected']]: selectedState,\n            })}\n            style={{\n              left: `${markerXPos}px`,\n            }}\n            onKeyDown={handleKeyDown}\n            aria-valuenow={valueState}\n            aria-valuetext={getAriaValueText()}\n            aria-valuemin={minValue}\n            aria-valuemax={maxValue}\n            tabIndex={disabled ? undefined : 0}\n            aria-disabled={disabled}\n            {...ariaLabelAttributes}\n          />\n        </div>\n        {renderStepLabels()}\n      </div>\n      {(labelLeft || labelRight) && (\n        <span className={styles.slider__options}>\n          <span id={labelLeftId}>{labelLeft}</span>\n          <span id={labelRightId}>{labelRight}</span>\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport default Slider;\n"],"names":["useSafeNumberValue","initial","min","max","value","setValue","useState","setSafeValue","newValue","useEffect","Slider","title","ariaLabel","labelLeft","labelRight","disabled","onChange","steps","step","minValue","maxValue","selected","testId","isMoving","setIsMoving","selectedState","setSelectedState","valueState","setValueState","titleId","useUuid","labelLeftId","labelRightId","trackRef","useRef","markerRef","trackWidth","useSize","largeStep","handlePointerUp","getValueBasedOnMarkerPosition","markerPosition","trackPosition","_a","normalizedPosition","valueRange","handlePointerMove","handleSelected","handleKeyDown","e","flag","handleTrackClick","handlePointerDown","markerXPos","getAriaValueText","stepIndex","emojiCode","label","ariaLabelAttributes","getAriaLabelAttributes","getXPositionStyling","index","stepsLength","renderEmojies","React","styles","renderSteps","_step","renderStepLabels","AnalyticsId","Title","classNames"],"mappings":";;;;;;;;AAYA,MAAMA,KAAqB,CAACC,GAAiBC,GAAaC,MAAmD;AAC3G,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAASL,CAAO,GAEpCM,IAAe,CAACC,MAA2B;AAC/C,IAAIA,IAAWL,IACbE,EAASF,CAAG,IACHK,IAAWN,IACpBG,EAASH,CAAG,IAEZG,EAASG,CAAQ;AAAA,EACnB;AAGF,SAAAC,EAAU,MAAM;AACd,IAAAF,EAAaN,CAAO;AAAA,EAAA,GACnB,CAACC,GAAKC,CAAG,CAAC,GAEN,CAACC,GAAOG,CAAY;AAC7B,GAoCaG,KAAgC,CAAC;AAAA,EAC5C,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAWH,IAAQA,EAAM,SAAS,IAAI;AAAA,EACtC,UAAAI,IAAW;AAAA,EACX,QAAAC;AAAA,EACA,OAAAlB;AACF,MAAM;AACJ,QAAM,CAACmB,GAAUC,CAAW,IAAIlB,EAAS,EAAK,GACxC,CAACmB,GAAeC,CAAgB,IAAIpB,EAAS,OAAOF,IAAU,MAAciB,IAAW,EAAI,GAC3F,CAACM,GAAYC,CAAa,IAAI5B;AAAA,IAClC,OAAOI,IAAU,OAAegB,IAAWD,KAAY,IAAIA,IAAWf;AAAA,IACtEe;AAAA,IACAC;AAAA,EAAA,GAGIS,IAAUC,KACVC,IAAcD,KACdE,IAAeF,KACfG,IAAWC,EAAuB,IAAI,GACtCC,IAAYD,EAAuB,IAAI,GACvC,EAAE,OAAOE,MAAeC,EAAQJ,CAAQ,KAAK,EAAE,OAAO,KACtDK,IAAYlB,IAAW;AAE7B,EAAAX,EAAU,MAAM;AACd,UAAM8B,IAAkB,MAAY;AAClC,MAAAf,EAAY,EAAK;AAAA,IAAA;AAGV,oBAAA,iBAAiB,aAAae,CAAe,GAE/C,MAAM;AACF,eAAA,oBAAoB,aAAaA,CAAe;AAAA,IAAA;AAAA,EAE7D,GAAG,CAAE,CAAA;AAEC,QAAAC,IAAgC,CAACC,MAAmC;;AACxE,UAAMC,MAAgBC,IAAAV,EAAS,YAAT,gBAAAU,EAAkB,wBAAwB,MAAK,GAG/DC,KAAsBH,IAAiBC,KAAiBN,GACxDS,IAAazB,IAAWD;AAE1Bf,QAAAA,IAAQwC,IAAqBC,IAAa1B;AAG9Cf,WAAAA,IADkB,KAAK,MAAMA,IAAQc,CAAI,IACrBA,GACpBd,IAAQ,KAAK,IAAIe,GAAU,KAAK,IAAIC,GAAUhB,CAAK,CAAC,GAE7CA;AAAAA,EAAA;AAGT,EAAAK,EAAU,MAAM;AACR,UAAAqC,IAAoB,CAAC,MAA0B;AAC/C,UAAA,CAAC/B,KAAYQ,GAAU;AACnB,cAAAf,IAAWgC,EAA8B,EAAE,OAAO;AACxD,QAAAZ,EAAcpB,CAAQ;AAAA,MACxB;AAAA,IAAA;AAGO,oBAAA,iBAAiB,eAAesC,CAAiB,GAEnD,MAAM;AACF,eAAA,oBAAoB,eAAeA,CAAiB;AAAA,IAAA;AAAA,EAC/D,GACC,CAACvB,CAAQ,CAAC,GAEbd,EAAU,MAAM;AACd,IAAIL,MAAUuB,KAAc,OAAOvB,IAAU,QAC5B2C,KACfnB,EAAcxB,CAAK;AAAA,EACrB,GACC,CAACA,CAAK,CAAC,GAEVK,EAAU,MAAM;AACV,IAAA,CAACM,KAAYU,KAAiBT,KAChCA,EAASW,CAAU;AAAA,EACrB,GACC,CAACA,GAAYF,CAAa,CAAC,GAE9BhB,EAAU,MAAM;AACd,IAAI,OAAOL,IAAU,OAAeiB,MAAaI,KAC/CC,EAAiBL,CAAQ;AAAA,EAC3B,GACC,CAACA,CAAQ,CAAC;AAEb,QAAM0B,IAAiB,MAAY;AACjC,IAAItB,MAAkB,MACpBC,EAAiB,EAAI;AAAA,EACvB,GAGIsB,IAA4D,CAAKC,MAAA;AACrE,QAAIlC,EAAU;AAEd,QAAImC,IAAO;AAEX,YAAQD,EAAE,KAAK;AAAA,MACb,KAAK;AAAA,MACL,KAAK;AACH,QAAArB,EAAcD,IAAaT,CAAI,GACxBgC,IAAA;AACP;AAAA,MACF,KAAK;AACH,QAAAtB,EAAcD,IAAaW,CAAS,GAC7BY,IAAA;AACP;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AACH,QAAAtB,EAAcD,IAAaT,CAAI,GACxBgC,IAAA;AACP;AAAA,MACF,KAAK;AACH,QAAAtB,EAAcD,IAAaW,CAAS,GAC7BY,IAAA;AACP;AAAA,MACF,KAAK;AACH,QAAAtB,EAAcT,CAAQ,GACf+B,IAAA;AACP;AAAA,MACF,KAAK;AACH,QAAAtB,EAAcR,CAAQ,GACf8B,IAAA;AACP;AAAA,IAGJ;AAEA,IAAIA,MACaH,KACfE,EAAE,eAAe,GACjBA,EAAE,gBAAgB;AAAA,EACpB,GAGIE,IAA4D,CAAKF,MAAA;;AACrE,QAAIlC,EAAU;AAER,UAAAP,IAAWgC,EAA8BS,EAAE,OAAO;AACxD,IAAArB,EAAcpB,CAAQ,IACtBmC,IAAAR,EAAU,YAAV,QAAAQ,EAAmB;AAAA,EAAM,GAGrBS,IAA+D,CAAKH,MAAA;;AACxE,IAAIlC,MAEJS,EAAY,EAAI,GACDuB,KAEfE,EAAE,eAAe,GACjBA,EAAE,gBAAgB,IAElBN,IAAAR,EAAU,YAAV,QAAAQ,EAAmB;AAAA,EAAM,GAGrBU,IAAajC,MAAaD,IAAYiB,KAAchB,IAAWD,MAAcQ,IAAaR,KAAY,GAEtGmC,IAAmB,MAA0B;AACjD,UAAMC,IAAYtC,IAAQ,KAAK,OAAOU,IAAaR,KAAYD,CAAI,IAAI;AAEvE,QAAID,KAASsC,MAAc,QAAQA,KAAa,KAAKA,IAAYtC,EAAM,QAAQ;AACvEC,YAAAA,IAAOD,EAAMsC,CAAS,GACtBC,IAAYtC,EAAK,cACjBuC,IAAQ,OAAOvC,EAAK,QAAU,MAAcA,EAAK,MAAM,aAAa;AAE1E,aAAOsC,KAAaC,IAAQ,GAAGD,CAAS,IAAIC,CAAK,KAAKD,KAAaC;AAAA,IACrE;AAAA,EAEO,GAkBHC,IAAsBC,EAAuB;AAAA,IACjD,OAAO/C;AAAA,IACP,KAjByB,MAA0B;AAC/C,UAAAD,KAASE,KAAaC;AACxB,eAAO,CAACe,GAASE,GAAaC,CAAY,EAAE,KAAK,GAAG;AAEtD,UAAIrB,KAASE;AACX,eAAO,CAACgB,GAASE,CAAW,EAAE,KAAK,GAAG;AAExC,UAAIpB,KAASG;AACX,eAAO,CAACe,GAASG,CAAY,EAAE,KAAK,GAAG;AAEzC,UAAIrB;AACK,eAAAkB;AAAA,IACT,GAKuB;AAAA,IACvB,QAAQ;AAAA,EAAA,CACT,GAEK+B,IAAsB,CAACC,GAAeC,OACnC,EAAE,MAAM,GAAID,KAASC,IAAc,KAAM,GAAG,QAG/CC,IAAgB,MAElBC,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAWC,EAAO,yBAAyB,KAC7ChD,KAAA,gBAAAA,EAAO,IAAI,CAACC,GAAM2C,MAEf3C,EAAK,gBACH8C,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAa;AAAA,MACb,KAAK,UAAUH;AAAA,MACf,WAAWI,EAAO;AAAA,MAClB,OAAOL,EAAoBC,GAAO5C,EAAM,MAAM;AAAA,IAAA;AAAA,IAE7CC,EAAK;AAAA,EAAA,EAKhB,GAIEgD,IAAc,MACXjD,KAAA,gBAAAA,EAAO,IAAI,CAACkD,GAAON,MAChBG,gBAAAA,EAAA,cAAA,OAAA,EAAI,KAAK,SAASH,GAAO,WAAWI,EAAO,qBAAwB,OAAOL,EAAoBC,GAAO5C,EAAM,MAAM,EAAG,CAAA,IAI1HmD,IAAmB,MAErBJ,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAWC,EAAO,yBAAyB,KAC7ChD,KAAA,gBAAAA,EAAO,IAAI,CAACC,GAAM2C,MAEf,OAAO3C,EAAK,QAAU,OACpB8C,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAa;AAAA,MACb,KAAK,UAAUH;AAAA,MACf,WAAWI,EAAO;AAAA,MAClB,OAAOL,EAAoBC,GAAO5C,EAAM,MAAM;AAAA,IAAA;AAAA,IAE7CC,EAAK;AAAA,EAAA,EAKhB;AAIJ,SACG8C,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWC,EAAO,QAAQ,eAAa3C,GAAQ,oBAAkB+C,EAAY,UAC/E1D,KACCqD,gBAAAA,EAAA,cAACM,IAAM,EAAA,WAAWL,EAAO,eAAkB,YAAY,MAAM,QAAQ,GAAG,YAAY,UAAU,IAAIpC,EAC/F,GAAAlB,CACH,GAEFqD,gBAAAA,EAAA,cAAC,SAAI,WAAWC,EAAO,2BAA2B,KAC/CF,KAGDC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK/B;AAAA,MACL,WAAWsC,EAAWN,EAAO,uBAAuB,GAAGlD,KAAYkD,EAAO,iCAAiC,CAAC;AAAA,MAC5G,SAASd;AAAA,MACT,eAAeC;AAAA,IAAA;AAAA,IAEdY,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWO,EAAWN,EAAO,eAAelD,KAAYkD,EAAO,yBAAyB,CAAC,EAAI,GAAAC,EAAA,CAAc;AAAA,IAChHF,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAMjD,IAAW,SAAY;AAAA,QAC7B,KAAKoB;AAAA,QACL,WAAWoC,EAAWN,EAAO,gBAAgB;AAAA,UAC3C,CAACA,EAAO,0BAA0B,CAAC,GAAGlD;AAAA,UACtC,CAACkD,EAAO,0BAA0B,CAAC,GAAGxC;AAAA,QAAA,CACvC;AAAA,QACD,OAAO;AAAA,UACL,MAAM,GAAG4B,CAAU;AAAA,QACrB;AAAA,QACA,WAAWL;AAAA,QACX,iBAAerB;AAAA,QACf,kBAAgB2B,EAAiB;AAAA,QACjC,iBAAenC;AAAA,QACf,iBAAeC;AAAA,QACf,UAAUL,IAAW,SAAY;AAAA,QACjC,iBAAeA;AAAA,QACd,GAAG2C;AAAA,MAAA;AAAA,IACN;AAAA,EACF,GACCU,GACH,IACEvD,KAAaC,MACbkD,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAWC,EAAO,gBAAA,mCACrB,QAAK,EAAA,IAAIlC,EAAc,GAAAlB,CAAU,GAClCmD,gBAAAA,EAAA,cAAC,UAAK,IAAIhC,EAAA,GAAelB,CAAW,CACtC,CAEJ;AAEJ;"}

package/components/Slider/index.js

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

package/components/Slider/index.js.map

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

package/components/Spacer/Spacer.js

@@ -2,8 +2,8 @@ import e from "react";
 import x from "classnames";
 import { AnalyticsId as o } from "../../constants.js";
 import s from "../Spacer/styles.module.scss";
-const m = e.forwardRef(function(r, c) {
-  const { size: a = "s", className: p, testId: t } = r, l = x(
+const u = e.forwardRef(function(r, c) {
+  const { size: a = "s", className: p, testId: l } = r, t = x(
     s.spacer,
     {
       [s["spacer--4xs"]]: a === "4xs",
@@ -22,8 +22,8 @@ const m = e.forwardRef(function(r, c) {
     },
     p
   );
-  return /* @__PURE__ */ e.createElement("span", { className: l, ref: c, "data-testid": t, "data-analyticsid": o.Spacer });
-}), u = m;
+  return /* @__PURE__ */ e.createElement("span", { className: t, ref: c, "data-testid": l, "data-analyticsid": o.Spacer });
+});
 export {
   u as default
 };

package/components/Spacer/Spacer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spacer.js","sources":["../../../src/components/Spacer/Spacer.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { SpacerSizes } from './../../theme/spacers';\nimport { AnalyticsId } from '../../constants';\n\nimport spacerStyles from './styles.module.scss';\n\nexport interface SpacerProps {\n  /** Sets the size of the spacer. */\n  size?: SpacerSizes;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Spacer = React.forwardRef(function SpacerForwardedRef(props: SpacerProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { size = 's', className, testId } = props;\n  const spacerClasses = classNames(\n    spacerStyles.spacer,\n    {\n      [spacerStyles['spacer--4xs']]: size === '4xs',\n      [spacerStyles['spacer--3xs']]: size === '3xs',\n      [spacerStyles['spacer--2xs']]: size === '2xs',\n      [spacerStyles['spacer--xs']]: size === 'xs',\n      [spacerStyles['spacer--s']]: size === 's',\n      [spacerStyles['spacer--m']]: size === 'm',\n      [spacerStyles['spacer--l']]: size === 'l',\n      [spacerStyles['spacer--xl']]: size === 'xl',\n      [spacerStyles['spacer--2xl']]: size === '2xl',\n      [spacerStyles['spacer--3xl']]: size === '3xl',\n      [spacerStyles['spacer--4xl']]: size === '4xl',\n      [spacerStyles['spacer--5xl']]: size === '5xl',\n      [spacerStyles['spacer--6xl']]: size === '6xl',\n    },\n    className\n  );\n\n  return <span className={spacerClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Spacer}></span>;\n});\n\nexport default Spacer;\n"],"names":["Spacer","React","props","ref","size","className","testId","spacerClasses","classNames","spacerStyles","AnalyticsId","Spacer$1"],"mappings":";;;;AAkBA,MAAMA,IAASC,EAAM,WAAW,SAA4BC,GAAoBC,GAAsC;AACpH,QAAM,EAAE,MAAAC,IAAO,KAAK,WAAAC,GAAW,QAAAC,MAAWJ,GACpCK,IAAgBC;AAAA,IACpBC,EAAa;AAAA,IACb;AAAA,MACE,CAACA,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,YAAY,CAAC,GAAGL,MAAS;AAAA,MACvC,CAACK,EAAa,WAAW,CAAC,GAAGL,MAAS;AAAA,MACtC,CAACK,EAAa,WAAW,CAAC,GAAGL,MAAS;AAAA,MACtC,CAACK,EAAa,WAAW,CAAC,GAAGL,MAAS;AAAA,MACtC,CAACK,EAAa,YAAY,CAAC,GAAGL,MAAS;AAAA,MACvC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,IAC1C;AAAA,IACAC;AAAA,EAAA;AAGK,SAAAJ,gBAAAA,EAAA,cAAC,UAAK,WAAWM,GAAe,KAAAJ,GAAU,eAAaG,GAAQ,oBAAkBI,EAAY,OAAQ,CAAA;AAC9G,CAAC,GAEDC,IAAeX;"}
+{"version":3,"file":"Spacer.js","sources":["../../../src/components/Spacer/Spacer.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { SpacerSizes } from './../../theme/spacers';\nimport { AnalyticsId } from '../../constants';\n\nimport spacerStyles from './styles.module.scss';\n\nexport interface SpacerProps {\n  /** Sets the size of the spacer. */\n  size?: SpacerSizes;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Spacer = React.forwardRef(function SpacerForwardedRef(props: SpacerProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { size = 's', className, testId } = props;\n  const spacerClasses = classNames(\n    spacerStyles.spacer,\n    {\n      [spacerStyles['spacer--4xs']]: size === '4xs',\n      [spacerStyles['spacer--3xs']]: size === '3xs',\n      [spacerStyles['spacer--2xs']]: size === '2xs',\n      [spacerStyles['spacer--xs']]: size === 'xs',\n      [spacerStyles['spacer--s']]: size === 's',\n      [spacerStyles['spacer--m']]: size === 'm',\n      [spacerStyles['spacer--l']]: size === 'l',\n      [spacerStyles['spacer--xl']]: size === 'xl',\n      [spacerStyles['spacer--2xl']]: size === '2xl',\n      [spacerStyles['spacer--3xl']]: size === '3xl',\n      [spacerStyles['spacer--4xl']]: size === '4xl',\n      [spacerStyles['spacer--5xl']]: size === '5xl',\n      [spacerStyles['spacer--6xl']]: size === '6xl',\n    },\n    className\n  );\n\n  return <span className={spacerClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Spacer}></span>;\n});\n\nexport default Spacer;\n"],"names":["Spacer","React","props","ref","size","className","testId","spacerClasses","classNames","spacerStyles","AnalyticsId"],"mappings":";;;;AAkBA,MAAMA,IAASC,EAAM,WAAW,SAA4BC,GAAoBC,GAAsC;AACpH,QAAM,EAAE,MAAAC,IAAO,KAAK,WAAAC,GAAW,QAAAC,MAAWJ,GACpCK,IAAgBC;AAAA,IACpBC,EAAa;AAAA,IACb;AAAA,MACE,CAACA,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,YAAY,CAAC,GAAGL,MAAS;AAAA,MACvC,CAACK,EAAa,WAAW,CAAC,GAAGL,MAAS;AAAA,MACtC,CAACK,EAAa,WAAW,CAAC,GAAGL,MAAS;AAAA,MACtC,CAACK,EAAa,WAAW,CAAC,GAAGL,MAAS;AAAA,MACtC,CAACK,EAAa,YAAY,CAAC,GAAGL,MAAS;AAAA,MACvC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,IAC1C;AAAA,IACAC;AAAA,EAAA;AAGK,SAAAJ,gBAAAA,EAAA,cAAC,UAAK,WAAWM,GAAe,KAAAJ,GAAU,eAAaG,GAAQ,oBAAkBI,EAAY,OAAQ,CAAA;AAC9G,CAAC;"}

package/components/StatusDot/StatusDot.js

@@ -2,25 +2,25 @@ import t from "react";
 import n from "classnames";
 import "../../theme/grid.js";
 import "../../hooks/useBreakpoint.js";
-import { AnalyticsId as h, IconSize as r } from "../../constants.js";
+import { AnalyticsId as h, IconSize as s } from "../../constants.js";
 import { getColor as I } from "../../theme/currys/color.js";
 import { Icon as c } from "../Icon/Icon.js";
 import E from "../Icons/Attachment.js";
 import X from "../Icons/Group.js";
 import v from "../Icons/NoAccess.js";
 import N from "../Icons/Undo.js";
-import s from "../StatusDot/styles.module.scss";
+import r from "../StatusDot/styles.module.scss";
 var w = /* @__PURE__ */ ((e) => (e.onwhite = "onwhite", e.ondark = "ondark", e))(w || {}), z = /* @__PURE__ */ ((e) => (e.info = "info", e.warning = "warning", e.alert = "alert", e.cancelled = "cancelled", e.active = "active", e.transparent = "transparent", e.recurring = "recurring", e.group = "group", e.noaccess = "noaccess", e.attachment = "attachment", e))(z || {});
-const C = ({ variant: e }) => e === "recurring" ? /* @__PURE__ */ t.createElement(c, { size: r.XXSmall, svgIcon: N }) : e === "group" ? /* @__PURE__ */ t.createElement(c, { size: r.XXSmall, svgIcon: X }) : e === "noaccess" ? /* @__PURE__ */ t.createElement(c, { size: r.XXSmall, svgIcon: v, color: I("cherry", 600) }) : e === "attachment" ? /* @__PURE__ */ t.createElement(c, { size: r.XXSmall, svgIcon: E }) : null, k = (e) => {
-  const { id: l, mode: m = "onwhite", variant: o = "info", text: i, className: d, testId: p } = e, a = o === "recurring" || o === "group" || o === "noaccess" || o === "attachment", u = o === "cancelled", f = n(s.statusdot, u && s["statusdot--cancelled"], d), g = n(s.statusdot__dot, a ? s["statusdot__dot--icon"] : s[`statusdot__dot--${o}`]), _ = n(
-    a && s["statusdot__label--icon"],
-    m === "ondark" && s["statusdot__label--on-dark"]
+const C = ({ variant: e }) => e === "recurring" ? /* @__PURE__ */ t.createElement(c, { size: s.XXSmall, svgIcon: N }) : e === "group" ? /* @__PURE__ */ t.createElement(c, { size: s.XXSmall, svgIcon: X }) : e === "noaccess" ? /* @__PURE__ */ t.createElement(c, { size: s.XXSmall, svgIcon: v, color: I("cherry", 600) }) : e === "attachment" ? /* @__PURE__ */ t.createElement(c, { size: s.XXSmall, svgIcon: E }) : null, F = (e) => {
+  const { id: l, mode: m = "onwhite", variant: o = "info", text: i, className: d, testId: p } = e, a = o === "recurring" || o === "group" || o === "noaccess" || o === "attachment", u = o === "cancelled", f = n(r.statusdot, u && r["statusdot--cancelled"], d), g = n(r.statusdot__dot, a ? r["statusdot__dot--icon"] : r[`statusdot__dot--${o}`]), _ = n(
+    a && r["statusdot__label--icon"],
+    m === "ondark" && r["statusdot__label--on-dark"]
   );
   return /* @__PURE__ */ t.createElement("span", { id: l, className: f, "data-testid": p, "data-analyticsid": h.StatusDot }, /* @__PURE__ */ t.createElement("span", { className: g }, /* @__PURE__ */ t.createElement(C, { variant: o })), /* @__PURE__ */ t.createElement("span", { className: _ }, i));
-}, H = k;
+};
 export {
   w as StatusDotModes,
   z as StatusDotVariant,
-  H as default
+  F as default
 };
 //# sourceMappingURL=StatusDot.js.map

package/components/StatusDot/StatusDot.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.js","sources":["../../../src/components/StatusDot/StatusDot.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport { Icon } from '../Icon';\nimport Attachment from '../Icons/Attachment';\nimport Group from '../Icons/Group';\nimport NoAccess from '../Icons/NoAccess';\nimport Undo from '../Icons/Undo';\n\nimport styles from './styles.module.scss';\n\nexport enum StatusDotModes {\n  onwhite = 'onwhite',\n  ondark = 'ondark',\n}\n\nexport enum StatusDotVariant {\n  info = 'info',\n  warning = 'warning',\n  alert = 'alert',\n  cancelled = 'cancelled',\n  active = 'active',\n  transparent = 'transparent',\n  recurring = 'recurring',\n  group = 'group',\n  noaccess = 'noaccess',\n  attachment = 'attachment',\n}\n\nexport interface StatusDotIconProps {\n  /** The variant defines style formatting and what icon to use */\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ variant }) => {\n  if (variant === StatusDotVariant.recurring) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Undo} />;\n  } else if (variant === StatusDotVariant.group) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Group} />;\n  } else if (variant === StatusDotVariant.noaccess) {\n    return <Icon size={IconSize.XXSmall} svgIcon={NoAccess} color={getColor('cherry', 600)} />;\n  } else if (variant === StatusDotVariant.attachment) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Attachment} />;\n  }\n\n  return null;\n};\n\nexport interface StatusDotProps {\n  /** id that is placed on the wrapper */\n  id?: string;\n  /** Defines the color mode, onwhite, ondark etc. */\n  mode?: keyof typeof StatusDotModes;\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst StatusDot: React.FC<StatusDotProps> = props => {\n  const { id, mode = StatusDotModes.onwhite, variant = StatusDotVariant.info, text, className, testId } = props;\n\n  const hasIcon =\n    variant === StatusDotVariant.recurring ||\n    variant === StatusDotVariant.group ||\n    variant === StatusDotVariant.noaccess ||\n    variant === StatusDotVariant.attachment;\n\n  const isCancelled = variant === StatusDotVariant.cancelled;\n\n  const statusDotClasses = classNames(styles['statusdot'], isCancelled && styles['statusdot--cancelled'], className);\n  const dotClasses = classNames(styles['statusdot__dot'], hasIcon ? styles[`statusdot__dot--icon`] : styles[`statusdot__dot--${variant}`]);\n  const labelClasses = classNames(\n    hasIcon && styles['statusdot__label--icon'],\n    mode === StatusDotModes.ondark && styles['statusdot__label--on-dark']\n  );\n\n  return (\n    <span id={id} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={dotClasses}>\n        <StatusDotIcon variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </span>\n  );\n};\n\nexport default StatusDot;\n"],"names":["StatusDotModes","StatusDotVariant","StatusDotIcon","variant","Icon","IconSize","Undo","Group","React","NoAccess","getColor","Attachment","StatusDot","props","id","mode","text","className","testId","hasIcon","isCancelled","statusDotClasses","classNames","styles","dotClasses","labelClasses","AnalyticsId","StatusDot$1"],"mappings":";;;;;;;;;;;;AAeY,IAAAA,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,SAAS,UAFCA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,UAAU,WACVA,EAAA,QAAQ,SACRA,EAAA,YAAY,aACZA,EAAA,SAAS,UACTA,EAAA,cAAc,eACdA,EAAA,YAAY,aACZA,EAAA,QAAQ,SACRA,EAAA,WAAW,YACXA,EAAA,aAAa,cAVHA,IAAAA,KAAA,CAAA,CAAA;AAkBZ,MAAMC,IAA8C,CAAC,EAAE,SAAAC,QACjDA,MAAY,8CACNC,GAAK,EAAA,MAAMC,EAAS,SAAS,SAASC,EAAM,CAAA,IAC3CH,MAAY,0CACbC,GAAK,EAAA,MAAMC,EAAS,SAAS,SAASE,EAAO,CAAA,IAC5CJ,MAAY,aACdK,gBAAAA,EAAA,cAACJ,GAAK,EAAA,MAAMC,EAAS,SAAS,SAASI,GAAU,OAAOC,EAAS,UAAU,GAAG,EAAG,CAAA,IAC/EP,MAAY,+CACbC,GAAK,EAAA,MAAMC,EAAS,SAAS,SAASM,EAAY,CAAA,IAGrD,MAkBHC,IAAsC,CAASC,MAAA;AAC7C,QAAA,EAAE,IAAAC,GAAI,MAAAC,IAAO,WAAwB,SAAAZ,IAAU,QAAuB,MAAAa,GAAM,WAAAC,GAAW,QAAAC,EAAW,IAAAL,GAElGM,IACJhB,MAAY,eACZA,MAAY,WACZA,MAAY,cACZA,MAAY,cAERiB,IAAcjB,MAAY,aAE1BkB,IAAmBC,EAAWC,EAAO,WAAcH,KAAeG,EAAO,sBAAsB,GAAGN,CAAS,GAC3GO,IAAaF,EAAWC,EAAO,gBAAmBJ,IAAUI,EAAO,sBAAsB,IAAIA,EAAO,mBAAmBpB,CAAO,EAAE,CAAC,GACjIsB,IAAeH;AAAA,IACnBH,KAAWI,EAAO,wBAAwB;AAAA,IAC1CR,MAAS,YAAyBQ,EAAO,2BAA2B;AAAA,EAAA;AAIpE,SAAAf,gBAAAA,EAAA,cAAC,QAAK,EAAA,IAAAM,GAAQ,WAAWO,GAAkB,eAAaH,GAAQ,oBAAkBQ,EAAY,UAAA,GAC3FlB,gBAAAA,EAAA,cAAA,QAAA,EAAK,WAAWgB,EACf,GAAAhB,gBAAAA,EAAA,cAACN,GAAc,EAAA,SAAAC,EAAA,CAAkB,CACnC,mCACC,QAAK,EAAA,WAAWsB,EAAe,GAAAT,CAAK,CACvC;AAEJ,GAEAW,IAAef;"}
+{"version":3,"file":"StatusDot.js","sources":["../../../src/components/StatusDot/StatusDot.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport { Icon } from '../Icon';\nimport Attachment from '../Icons/Attachment';\nimport Group from '../Icons/Group';\nimport NoAccess from '../Icons/NoAccess';\nimport Undo from '../Icons/Undo';\n\nimport styles from './styles.module.scss';\n\nexport enum StatusDotModes {\n  onwhite = 'onwhite',\n  ondark = 'ondark',\n}\n\nexport enum StatusDotVariant {\n  info = 'info',\n  warning = 'warning',\n  alert = 'alert',\n  cancelled = 'cancelled',\n  active = 'active',\n  transparent = 'transparent',\n  recurring = 'recurring',\n  group = 'group',\n  noaccess = 'noaccess',\n  attachment = 'attachment',\n}\n\nexport interface StatusDotIconProps {\n  /** The variant defines style formatting and what icon to use */\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ variant }) => {\n  if (variant === StatusDotVariant.recurring) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Undo} />;\n  } else if (variant === StatusDotVariant.group) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Group} />;\n  } else if (variant === StatusDotVariant.noaccess) {\n    return <Icon size={IconSize.XXSmall} svgIcon={NoAccess} color={getColor('cherry', 600)} />;\n  } else if (variant === StatusDotVariant.attachment) {\n    return <Icon size={IconSize.XXSmall} svgIcon={Attachment} />;\n  }\n\n  return null;\n};\n\nexport interface StatusDotProps {\n  /** id that is placed on the wrapper */\n  id?: string;\n  /** Defines the color mode, onwhite, ondark etc. */\n  mode?: keyof typeof StatusDotModes;\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst StatusDot: React.FC<StatusDotProps> = props => {\n  const { id, mode = StatusDotModes.onwhite, variant = StatusDotVariant.info, text, className, testId } = props;\n\n  const hasIcon =\n    variant === StatusDotVariant.recurring ||\n    variant === StatusDotVariant.group ||\n    variant === StatusDotVariant.noaccess ||\n    variant === StatusDotVariant.attachment;\n\n  const isCancelled = variant === StatusDotVariant.cancelled;\n\n  const statusDotClasses = classNames(styles['statusdot'], isCancelled && styles['statusdot--cancelled'], className);\n  const dotClasses = classNames(styles['statusdot__dot'], hasIcon ? styles[`statusdot__dot--icon`] : styles[`statusdot__dot--${variant}`]);\n  const labelClasses = classNames(\n    hasIcon && styles['statusdot__label--icon'],\n    mode === StatusDotModes.ondark && styles['statusdot__label--on-dark']\n  );\n\n  return (\n    <span id={id} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={dotClasses}>\n        <StatusDotIcon variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </span>\n  );\n};\n\nexport default StatusDot;\n"],"names":["StatusDotModes","StatusDotVariant","StatusDotIcon","variant","Icon","IconSize","Undo","Group","React","NoAccess","getColor","Attachment","StatusDot","props","id","mode","text","className","testId","hasIcon","isCancelled","statusDotClasses","classNames","styles","dotClasses","labelClasses","AnalyticsId"],"mappings":";;;;;;;;;;;;AAeY,IAAAA,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,SAAS,UAFCA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,UAAU,WACVA,EAAA,QAAQ,SACRA,EAAA,YAAY,aACZA,EAAA,SAAS,UACTA,EAAA,cAAc,eACdA,EAAA,YAAY,aACZA,EAAA,QAAQ,SACRA,EAAA,WAAW,YACXA,EAAA,aAAa,cAVHA,IAAAA,KAAA,CAAA,CAAA;AAkBZ,MAAMC,IAA8C,CAAC,EAAE,SAAAC,QACjDA,MAAY,8CACNC,GAAK,EAAA,MAAMC,EAAS,SAAS,SAASC,EAAM,CAAA,IAC3CH,MAAY,0CACbC,GAAK,EAAA,MAAMC,EAAS,SAAS,SAASE,EAAO,CAAA,IAC5CJ,MAAY,aACdK,gBAAAA,EAAA,cAACJ,GAAK,EAAA,MAAMC,EAAS,SAAS,SAASI,GAAU,OAAOC,EAAS,UAAU,GAAG,EAAG,CAAA,IAC/EP,MAAY,+CACbC,GAAK,EAAA,MAAMC,EAAS,SAAS,SAASM,EAAY,CAAA,IAGrD,MAkBHC,IAAsC,CAASC,MAAA;AAC7C,QAAA,EAAE,IAAAC,GAAI,MAAAC,IAAO,WAAwB,SAAAZ,IAAU,QAAuB,MAAAa,GAAM,WAAAC,GAAW,QAAAC,EAAW,IAAAL,GAElGM,IACJhB,MAAY,eACZA,MAAY,WACZA,MAAY,cACZA,MAAY,cAERiB,IAAcjB,MAAY,aAE1BkB,IAAmBC,EAAWC,EAAO,WAAcH,KAAeG,EAAO,sBAAsB,GAAGN,CAAS,GAC3GO,IAAaF,EAAWC,EAAO,gBAAmBJ,IAAUI,EAAO,sBAAsB,IAAIA,EAAO,mBAAmBpB,CAAO,EAAE,CAAC,GACjIsB,IAAeH;AAAA,IACnBH,KAAWI,EAAO,wBAAwB;AAAA,IAC1CR,MAAS,YAAyBQ,EAAO,2BAA2B;AAAA,EAAA;AAIpE,SAAAf,gBAAAA,EAAA,cAAC,QAAK,EAAA,IAAAM,GAAQ,WAAWO,GAAkB,eAAaH,GAAQ,oBAAkBQ,EAAY,UAAA,GAC3FlB,gBAAAA,EAAA,cAAA,QAAA,EAAK,WAAWgB,EACf,GAAAhB,gBAAAA,EAAA,cAACN,GAAc,EAAA,SAAAC,EAAA,CAAkB,CACnC,mCACC,QAAK,EAAA,WAAWsB,EAAe,GAAAT,CAAK,CACvC;AAEJ;"}

package/components/Step/Step.js

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

package/components/Step/Step.js.map

@@ -1 +1 @@
-{"version":3,"file":"Step.js","sources":["../../../src/components/Step/Step.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../constants';\nimport { ButtonProps } from '../Button';\nimport StepButtons from '../StepButtons';\nimport { StepperProps } from '../Stepper';\n\nimport styles from './styles.module.scss';\n\nexport interface StepProps {\n  /** Stepper viser fremdriften */\n  stepper?: React.ReactElement<StepperProps>;\n  /** Innhold i steget */\n  children: React.ReactNode;\n  /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n  backButton?: React.ReactElement<ButtonProps>;\n  /** Knapp for å gå videre. Vises med \"fill\" variant. */\n  forwardButton?: React.ReactElement<ButtonProps>;\n  /** Ekstra knapper. Valgfritt utseende. */\n  additionalButtons?: React.ReactElement<ButtonProps>[];\n  /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n  cancelButton?: React.ReactElement<ButtonProps>;\n  /** Knappene vil vises sticky nederst på skjermen dersom innholdet i Step tar mer plass enn vinduet. Default: false  */\n  stickyButtons?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Step: React.FC<StepProps> = ({\n  stepper,\n  children,\n  backButton,\n  forwardButton,\n  additionalButtons,\n  cancelButton,\n  stickyButtons = false,\n  testId,\n}) => {\n  const hasNavigation = backButton || forwardButton || additionalButtons || cancelButton;\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.Step}>\n      {stepper && <div className={styles.step__stepper}>{stepper}</div>}\n      <div className={styles.step__content}>{children}</div>\n      {hasNavigation && (\n        <StepButtons\n          backButton={backButton}\n          forwardButton={forwardButton}\n          additionalButtons={additionalButtons}\n          cancelButton={cancelButton}\n          sticky={stickyButtons}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default Step;\n"],"names":["Step","stepper","children","backButton","forwardButton","additionalButtons","cancelButton","stickyButtons","testId","hasNavigation","React","AnalyticsId","styles","StepButtons","Step$1"],"mappings":";;;;AA4BA,MAAMA,IAA4B,CAAC;AAAA,EACjC,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,QAAAC;AACF,MAAM;AACE,QAAAC,IAAgBN,KAAcC,KAAiBC,KAAqBC;AAGxE,SAAAI,gBAAAA,EAAA,cAAC,SAAI,eAAaF,GAAQ,oBAAkBG,EAAY,KAAA,GACrDV,KAAWS,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAWE,EAAO,cAAgB,GAAAX,CAAQ,GAC1DS,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWE,EAAO,cAAA,GAAgBV,CAAS,GAC/CO,KACCC,gBAAAA,EAAA;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,YAAAV;AAAA,MACA,eAAAC;AAAA,MACA,mBAAAC;AAAA,MACA,cAAAC;AAAA,MACA,QAAQC;AAAA,IAAA;AAAA,EAAA,CAGd;AAEJ,GAEAO,IAAed;"}
+{"version":3,"file":"Step.js","sources":["../../../src/components/Step/Step.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../constants';\nimport { ButtonProps } from '../Button';\nimport StepButtons from '../StepButtons';\nimport { StepperProps } from '../Stepper';\n\nimport styles from './styles.module.scss';\n\nexport interface StepProps {\n  /** Stepper viser fremdriften */\n  stepper?: React.ReactElement<StepperProps>;\n  /** Innhold i steget */\n  children: React.ReactNode;\n  /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n  backButton?: React.ReactElement<ButtonProps>;\n  /** Knapp for å gå videre. Vises med \"fill\" variant. */\n  forwardButton?: React.ReactElement<ButtonProps>;\n  /** Ekstra knapper. Valgfritt utseende. */\n  additionalButtons?: React.ReactElement<ButtonProps>[];\n  /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n  cancelButton?: React.ReactElement<ButtonProps>;\n  /** Knappene vil vises sticky nederst på skjermen dersom innholdet i Step tar mer plass enn vinduet. Default: false  */\n  stickyButtons?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Step: React.FC<StepProps> = ({\n  stepper,\n  children,\n  backButton,\n  forwardButton,\n  additionalButtons,\n  cancelButton,\n  stickyButtons = false,\n  testId,\n}) => {\n  const hasNavigation = backButton || forwardButton || additionalButtons || cancelButton;\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.Step}>\n      {stepper && <div className={styles.step__stepper}>{stepper}</div>}\n      <div className={styles.step__content}>{children}</div>\n      {hasNavigation && (\n        <StepButtons\n          backButton={backButton}\n          forwardButton={forwardButton}\n          additionalButtons={additionalButtons}\n          cancelButton={cancelButton}\n          sticky={stickyButtons}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default Step;\n"],"names":["Step","stepper","children","backButton","forwardButton","additionalButtons","cancelButton","stickyButtons","testId","hasNavigation","React","AnalyticsId","styles","StepButtons"],"mappings":";;;;AA4BA,MAAMA,IAA4B,CAAC;AAAA,EACjC,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,QAAAC;AACF,MAAM;AACE,QAAAC,IAAgBN,KAAcC,KAAiBC,KAAqBC;AAGxE,SAAAI,gBAAAA,EAAA,cAAC,SAAI,eAAaF,GAAQ,oBAAkBG,EAAY,KAAA,GACrDV,KAAWS,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAWE,EAAO,cAAgB,GAAAX,CAAQ,GAC1DS,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWE,EAAO,cAAA,GAAgBV,CAAS,GAC/CO,KACCC,gBAAAA,EAAA;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,YAAAV;AAAA,MACA,eAAAC;AAAA,MACA,mBAAAC;AAAA,MACA,cAAAC;AAAA,MACA,QAAQC;AAAA,IAAA;AAAA,EAAA,CAGd;AAEJ;"}

package/components/StepButtons/StepButtons.js

@@ -2,7 +2,7 @@ import e from "react";
 import n from "classnames";
 import { AnalyticsId as m } from "../../constants.js";
 import t from "../StepButtons/styles.module.scss";
-const p = (r) => {
+const f = (r) => {
   const { backButton: s, forwardButton: a, additionalButtons: o, cancelButton: l, sticky: u = !1, testId: i } = r, c = n(t.stepbuttons, u && t["stepbuttons--has-sticky-buttons"]);
   return s || a || o || l ? /* @__PURE__ */ e.createElement("div", { className: c, "data-testid": i, "data-analyticsid": m.StepButtons }, (s || a) && /* @__PURE__ */ e.createElement("div", { className: t.stepbuttons__buttons }, s && e.cloneElement(s, {
     variant: "outline",
@@ -13,9 +13,9 @@ const p = (r) => {
   })), o && /* @__PURE__ */ e.createElement("div", { className: n(t.stepbuttons__buttons, t["stepbuttons__buttons--additional"]) }, o), l && /* @__PURE__ */ e.createElement("div", { className: t.stepbuttons__buttons }, e.cloneElement(l, {
     variant: "borderless"
   }))) : null;
-}, v = p;
+};
 export {
-  p as StepButtons,
-  v as default
+  f as StepButtons,
+  f as default
 };
 //# sourceMappingURL=StepButtons.js.map