@helsenorge/designsystem-react 9.0.0 → 9.2.0

package/Expander.js

@@ -1,23 +1,23 @@
 import { jsxs as m, jsx as t } from "react/jsx-runtime";
 import { useRef as C } from "react";
-import i from "classnames";
-import { ZIndex as O, AnalyticsId as z, IconSize as c } from "./constants.js";
+import d from "classnames";
+import { ZIndex as O, AnalyticsId as b, IconSize as c } from "./constants.js";
 import { useExpand as U } from "./hooks/useExpand.js";
 import { useHover as Z } from "./hooks/useHover.js";
 import { useSticky as q } from "./hooks/useSticky.js";
 import { B as F } from "./Button.js";
 import { I as x } from "./Icon.js";
-import E from "./components/Icons/ChevronDown.js";
-import b from "./components/Icons/ChevronUp.js";
+import z from "./components/Icons/ChevronDown.js";
+import E from "./components/Icons/ChevronUp.js";
 import { L as G } from "./LazyIcon.js";
 import e from "./components/Expander/styles.module.scss";
 var J = /* @__PURE__ */ ((s) => (s.small = "small", s.large = "large", s))(J || {});
-const ie = (s) => {
+const de = (s) => {
   const {
-    title: g,
+    title: _,
     children: k,
     size: n = "small",
-    color: _,
+    color: g,
     contentClassNames: $,
     svgIcon: a,
     expanded: S = !1,
@@ -27,10 +27,10 @@ const ie = (s) => {
     onExpand: W,
     renderChildrenWhenClosed: X = !1,
     zIndex: B = O.ExpanderTrigger
-  } = s, [r, u] = U(S, W), v = C(null), d = C(null), { isHovered: l } = Z(d), { isOutsideWindow: H, isLeavingWindow: h, offsetHeight: y, contentWidth: I } = q(v, d), o = L && r && H, N = (p) => /* @__PURE__ */ t("span", { className: i(e.expander__icon, e[`expander__icon--${p}`]), children: /* @__PURE__ */ t(x, { svgIcon: r ? b : E, size: c.XSmall, isHovered: l }) }), R = i(
+  } = s, [r, u] = U(S, W), v = C(null), i = C(null), { isHovered: l } = Z(i), { isOutsideWindow: H, isLeavingWindow: h, offsetHeight: y, contentWidth: I } = q(v, i), o = L && r && H, N = (p) => /* @__PURE__ */ t("span", { className: d(e.expander__icon, e[`expander__icon--${p}`]), children: /* @__PURE__ */ t(x, { svgIcon: r ? E : z, size: c.XSmall, isHovered: l }) }), R = d(
     e.expander__trigger,
     n === "large" && e[`expander__trigger--${n}`],
-    n === "large" && e[`expander__trigger--${_ || "neutral"}`],
+    n === "large" && e[`expander__trigger--${g || "neutral"}`],
     n === "large" && a && e["expander__trigger--icon"],
     r && e["expander__trigger--expanded"],
     o && !h && e["expander__trigger--sticky"]
@@ -44,18 +44,18 @@ const ie = (s) => {
         width: o && I ? `${I}px` : void 0
       },
       "aria-expanded": r,
-      ref: d,
+      ref: i,
       onClick: () => u(!r),
       "data-testid": f,
-      "data-analyticsid": z.Expander,
+      "data-analyticsid": b.Expander,
       children: [
         n === "small" && N("left"),
-        a && /* @__PURE__ */ t("span", { className: i(e.expander__icon, e["expander__icon--left"]), children: typeof a == "string" ? /* @__PURE__ */ t(G, { iconName: a, size: c.XSmall, isHovered: l }) : /* @__PURE__ */ t(x, { svgIcon: a, size: c.XSmall, isHovered: l }) }),
-        g,
+        a && /* @__PURE__ */ t("span", { className: d(e.expander__icon, e["expander__icon--left"]), children: typeof a == "string" ? /* @__PURE__ */ t(G, { iconName: a, size: c.XSmall, isHovered: l }) : /* @__PURE__ */ t(x, { svgIcon: a, size: c.XSmall, isHovered: l }) }),
+        _,
         n === "large" && N("right")
       ]
     }
-  ), j = i(
+  ), j = d(
     e.expander__button,
     r && e["expander__button--expanded"],
     o && !h && e["expander__button--sticky"]
@@ -63,24 +63,25 @@ const ie = (s) => {
     F,
     {
       variant: "borderless",
+      textClassName: e.expander__button__text,
       className: j,
       "aria-expanded": r,
-      ref: d,
+      ref: i,
       onClick: () => u(!r),
       testId: f,
-      "data-analyticsid": z.Expander,
+      "data-analyticsid": b.Expander,
       children: [
-        /* @__PURE__ */ t(x, { svgIcon: r ? b : E, size: c.XSmall }),
-        g
+        /* @__PURE__ */ t(x, { svgIcon: r ? E : z, size: c.XSmall }),
+        _
       ]
     }
   ), D = () => {
     if (!X && !r)
       return null;
-    const p = i(
+    const p = d(
       e.expander__content,
       e[`expander__content--${n}`],
-      n === "large" && e[`expander__content--${_ || "neutral"}`],
+      n === "large" && e[`expander__content--${g || "neutral"}`],
       n === "large" && a && e["expander__content--icon"],
       r && e["expander__content--expanded"],
       n === "small" && !w && e["expander__content--nested-line"],
@@ -102,7 +103,7 @@ const ie = (s) => {
   );
 };
 export {
-  ie as E,
+  de as E,
   J as a
 };
 //# sourceMappingURL=Expander.js.map

package/Expander.js.map

@@ -1 +1 @@
-{"version":3,"file":"Expander.js","sources":["../src/components/Expander/Expander.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useHover } from '../../hooks/useHover';\nimport { useSticky } from '../../hooks/useSticky';\nimport { PaletteNames } from '../../theme/palette';\nimport Button from '../Button';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport enum ExpanderSize {\n  small = 'small',\n  large = 'large',\n}\n\nexport type ExpanderColors = Extract<PaletteNames, 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'white'>;\n\nexport interface ExpanderProps {\n  /** Sets the trigger title */\n  title: string;\n  /** Sets the expanded content */\n  children?: React.ReactNode;\n  /** Sets classnames on the content area */\n  contentClassNames?: string;\n  /** Sets the size of the expander. Default: ExpanderSize.small */\n  size?: ExpanderSize;\n  /** Sets the background of the expander. Requires size=ExpanderSize.large. */\n  color?: ExpanderColors;\n  /** Adds an icon to the expander trigger. Requires size=ExpanderSize.large. */\n  svgIcon?: SvgIcon | IconName;\n  /** Opens or closes the expander */\n  expanded?: boolean;\n  /** Removes border to the left of the content. Requires size=ExpanderSize.small. */\n  noNestedLine?: boolean;\n  /** Stick expander trigger to top of screen while scrolling down */\n  sticky?: boolean;\n  /** Called when expander is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n  /** Overrides the default z-index of the expander header */\n  zIndex?: number;\n}\n\nconst Expander: React.FC<ExpanderProps> = props => {\n  const {\n    title,\n    children,\n    size = ExpanderSize.small,\n    color,\n    contentClassNames,\n    svgIcon: icon,\n    expanded = false,\n    noNestedLine = false,\n    sticky = false,\n    testId,\n    onExpand,\n    renderChildrenWhenClosed = false,\n    zIndex = ZIndex.ExpanderTrigger,\n  } = props;\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const expanderRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = useHover(triggerRef);\n  const { isOutsideWindow, isLeavingWindow, offsetHeight, contentWidth } = useSticky(expanderRef, triggerRef);\n\n  const isSticky = sticky && isExpanded && isOutsideWindow;\n\n  const renderChevron = (align: 'left' | 'right'): React.ReactNode => (\n    <span className={classNames(styles['expander__icon'], styles[`expander__icon--${align}`])}>\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} isHovered={isHovered} />\n    </span>\n  );\n\n  const triggerClassName = classNames(\n    styles['expander__trigger'],\n    size === ExpanderSize.large && styles[`expander__trigger--${size}`],\n    size === ExpanderSize.large && styles[`expander__trigger--${color || 'neutral'}`],\n    size === ExpanderSize.large && icon && styles['expander__trigger--icon'],\n    isExpanded && styles['expander__trigger--expanded'],\n    isSticky && !isLeavingWindow && styles['expander__trigger--sticky']\n  );\n\n  const renderTrigger = (): React.ReactNode => (\n    <button\n      type=\"button\"\n      className={triggerClassName}\n      style={{\n        zIndex: isHovered || isSticky ? zIndex : undefined,\n        width: isSticky && contentWidth ? `${contentWidth}px` : undefined,\n      }}\n      aria-expanded={isExpanded}\n      ref={triggerRef}\n      onClick={(): void => setIsExpanded(!isExpanded)}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Expander}\n    >\n      {size === ExpanderSize.small && renderChevron('left')}\n      {icon && (\n        <span className={classNames(styles['expander__icon'], styles['expander__icon--left'])}>\n          {typeof icon === 'string' ? (\n            <LazyIcon iconName={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          ) : (\n            <Icon svgIcon={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          )}\n        </span>\n      )}\n      {title}\n      {size === ExpanderSize.large && renderChevron('right')}\n    </button>\n  );\n\n  const buttonClassName = classNames(\n    styles['expander__button'],\n    isExpanded && styles['expander__button--expanded'],\n    isSticky && !isLeavingWindow && styles['expander__button--sticky']\n  );\n\n  const renderButton = (): React.ReactNode => (\n    <Button\n      variant=\"borderless\"\n      className={buttonClassName}\n      aria-expanded={isExpanded}\n      ref={triggerRef}\n      onClick={(): void => setIsExpanded(!isExpanded)}\n      testId={testId}\n      data-analyticsid={AnalyticsId.Expander}\n    >\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n      {title}\n    </Button>\n  );\n\n  const renderContent = (): React.ReactNode => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const contentClassName = classNames(\n      styles['expander__content'],\n      styles[`expander__content--${size}`],\n      size === ExpanderSize.large && styles[`expander__content--${color || 'neutral'}`],\n      size === ExpanderSize.large && icon && styles['expander__content--icon'],\n      isExpanded && styles['expander__content--expanded'],\n      size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line'],\n      contentClassNames\n    );\n\n    return <div className={contentClassName}>{children}</div>;\n  };\n\n  return (\n    <div\n      className={styles['expander']}\n      ref={expanderRef}\n      style={{ paddingTop: isSticky && offsetHeight ? `${offsetHeight}px` : undefined }}\n    >\n      {size === ExpanderSize.large ? renderTrigger() : renderButton()}\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default Expander;\n"],"names":["ExpanderSize","Expander","props","title","children","size","color","contentClassNames","icon","expanded","noNestedLine","sticky","testId","onExpand","renderChildrenWhenClosed","zIndex","ZIndex","isExpanded","setIsExpanded","useExpand","expanderRef","useRef","triggerRef","isHovered","useHover","isOutsideWindow","isLeavingWindow","offsetHeight","contentWidth","useSticky","isSticky","renderChevron","align","jsx","classNames","styles","Icon","ChevronUp","ChevronDown","IconSize","triggerClassName","renderTrigger","jsxs","AnalyticsId","LazyIcon","buttonClassName","renderButton","Button","renderContent","contentClassName"],"mappings":"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"}
+{"version":3,"file":"Expander.js","sources":["../src/components/Expander/Expander.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useHover } from '../../hooks/useHover';\nimport { useSticky } from '../../hooks/useSticky';\nimport { PaletteNames } from '../../theme/palette';\nimport Button from '../Button';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport enum ExpanderSize {\n  small = 'small',\n  large = 'large',\n}\n\nexport type ExpanderColors = Extract<PaletteNames, 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'white'>;\n\nexport interface ExpanderProps {\n  /** Sets the trigger title */\n  title: string;\n  /** Sets the expanded content */\n  children?: React.ReactNode;\n  /** Sets classnames on the content area */\n  contentClassNames?: string;\n  /** Sets the size of the expander. Default: ExpanderSize.small */\n  size?: ExpanderSize;\n  /** Sets the background of the expander. Requires size=ExpanderSize.large. */\n  color?: ExpanderColors;\n  /** Adds an icon to the expander trigger. Requires size=ExpanderSize.large. */\n  svgIcon?: SvgIcon | IconName;\n  /** Opens or closes the expander */\n  expanded?: boolean;\n  /** Removes border to the left of the content. Requires size=ExpanderSize.small. */\n  noNestedLine?: boolean;\n  /** Stick expander trigger to top of screen while scrolling down */\n  sticky?: boolean;\n  /** Called when expander is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n  /** Overrides the default z-index of the expander header */\n  zIndex?: number;\n}\n\nconst Expander: React.FC<ExpanderProps> = props => {\n  const {\n    title,\n    children,\n    size = ExpanderSize.small,\n    color,\n    contentClassNames,\n    svgIcon: icon,\n    expanded = false,\n    noNestedLine = false,\n    sticky = false,\n    testId,\n    onExpand,\n    renderChildrenWhenClosed = false,\n    zIndex = ZIndex.ExpanderTrigger,\n  } = props;\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const expanderRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = useHover(triggerRef);\n  const { isOutsideWindow, isLeavingWindow, offsetHeight, contentWidth } = useSticky(expanderRef, triggerRef);\n\n  const isSticky = sticky && isExpanded && isOutsideWindow;\n\n  const renderChevron = (align: 'left' | 'right'): React.ReactNode => (\n    <span className={classNames(styles['expander__icon'], styles[`expander__icon--${align}`])}>\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} isHovered={isHovered} />\n    </span>\n  );\n\n  const triggerClassName = classNames(\n    styles['expander__trigger'],\n    size === ExpanderSize.large && styles[`expander__trigger--${size}`],\n    size === ExpanderSize.large && styles[`expander__trigger--${color || 'neutral'}`],\n    size === ExpanderSize.large && icon && styles['expander__trigger--icon'],\n    isExpanded && styles['expander__trigger--expanded'],\n    isSticky && !isLeavingWindow && styles['expander__trigger--sticky']\n  );\n\n  const renderTrigger = (): React.ReactNode => (\n    <button\n      type=\"button\"\n      className={triggerClassName}\n      style={{\n        zIndex: isHovered || isSticky ? zIndex : undefined,\n        width: isSticky && contentWidth ? `${contentWidth}px` : undefined,\n      }}\n      aria-expanded={isExpanded}\n      ref={triggerRef}\n      onClick={(): void => setIsExpanded(!isExpanded)}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Expander}\n    >\n      {size === ExpanderSize.small && renderChevron('left')}\n      {icon && (\n        <span className={classNames(styles['expander__icon'], styles['expander__icon--left'])}>\n          {typeof icon === 'string' ? (\n            <LazyIcon iconName={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          ) : (\n            <Icon svgIcon={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          )}\n        </span>\n      )}\n      {title}\n      {size === ExpanderSize.large && renderChevron('right')}\n    </button>\n  );\n\n  const buttonClassName = classNames(\n    styles['expander__button'],\n    isExpanded && styles['expander__button--expanded'],\n    isSticky && !isLeavingWindow && styles['expander__button--sticky']\n  );\n\n  const renderButton = (): React.ReactNode => (\n    <Button\n      variant=\"borderless\"\n      textClassName={styles['expander__button__text']}\n      className={buttonClassName}\n      aria-expanded={isExpanded}\n      ref={triggerRef}\n      onClick={(): void => setIsExpanded(!isExpanded)}\n      testId={testId}\n      data-analyticsid={AnalyticsId.Expander}\n    >\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n      {title}\n    </Button>\n  );\n\n  const renderContent = (): React.ReactNode => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const contentClassName = classNames(\n      styles['expander__content'],\n      styles[`expander__content--${size}`],\n      size === ExpanderSize.large && styles[`expander__content--${color || 'neutral'}`],\n      size === ExpanderSize.large && icon && styles['expander__content--icon'],\n      isExpanded && styles['expander__content--expanded'],\n      size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line'],\n      contentClassNames\n    );\n\n    return <div className={contentClassName}>{children}</div>;\n  };\n\n  return (\n    <div\n      className={styles['expander']}\n      ref={expanderRef}\n      style={{ paddingTop: isSticky && offsetHeight ? `${offsetHeight}px` : undefined }}\n    >\n      {size === ExpanderSize.large ? renderTrigger() : renderButton()}\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default Expander;\n"],"names":["ExpanderSize","Expander","props","title","children","size","color","contentClassNames","icon","expanded","noNestedLine","sticky","testId","onExpand","renderChildrenWhenClosed","zIndex","ZIndex","isExpanded","setIsExpanded","useExpand","expanderRef","useRef","triggerRef","isHovered","useHover","isOutsideWindow","isLeavingWindow","offsetHeight","contentWidth","useSticky","isSticky","renderChevron","align","jsx","classNames","styles","Icon","ChevronUp","ChevronDown","IconSize","triggerClassName","renderTrigger","jsxs","AnalyticsId","LazyIcon","buttonClassName","renderButton","Button","renderContent","contentClassName"],"mappings":"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"}

package/HighlightPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"HighlightPanel.js","sources":["../src/components/HighlightPanel/HighlightPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint, Breakpoint } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\nimport Icon, { SvgIcon, IconSize } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type HighlightPanelColors = Extract<PaletteNames, 'white' | 'neutral' | 'blueberry' | 'cherry'>;\n\nexport enum HighlightPanelSize {\n  medium = 'medium',\n  large = 'large',\n  fluid = 'fluid',\n}\n\nexport type HighlightPanelTags = Exclude<\n  keyof HTMLElementTagNameMap,\n  'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont' | 'search'\n>;\n\nexport interface HighlightPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the background color. Default: white */\n  color?: HighlightPanelColors;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightPanelSize;\n  /** Adds an icon to the highlightpanel. */\n  svgIcon?: SvgIcon | IconName;\n  /** Changes the underlying element. Default: div */\n  htmlMarkup?: HighlightPanelTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the content-wrapper */\n  contentWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Element that is set after the icon-element in the DOM, often a title-element */\n  title?: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n}\n\ninterface WrapperProps {\n  children?: React.ReactNode;\n  className: string;\n  size?: keyof typeof HighlightPanelSize;\n}\n\nconst Wrapper: React.FC<WrapperProps> = ({ className, size, children }) => (\n  <div className={className} data-testid={'highlightpanel-wrapper'}>\n    <div className={styles.highlightpanel__row}>\n      <div className={classNames(styles.highlightpanel__col, size === HighlightPanelSize.medium && styles['highlightpanel__col--offset'])}>\n        {children}\n      </div>\n    </div>\n  </div>\n);\n\ninterface ContentWrapperProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst ContentWrapper: React.FC<ContentWrapperProps> = props => {\n  const { children, className } = props;\n  const contentWrapperClasses = classNames(styles['highlightpanel__content-wrapper'], className);\n\n  return (\n    <div className={contentWrapperClasses}>\n      <div className={classNames(styles.highlightpanel__row)}>{children}</div>\n    </div>\n  );\n};\n\nconst HighlightPanel: React.FC<HighlightPanelProps> = props => {\n  const {\n    children,\n    color = 'white',\n    size = HighlightPanelSize.medium,\n    testId,\n    svgIcon,\n    htmlMarkup = 'div',\n    className,\n    contentWrapperClassName,\n    title,\n    titleHtmlMarkup = 'h2',\n  } = props;\n  const breakpoint = useBreakpoint();\n\n  const containerClassName = classNames(\n    styles[`highlightpanel--${color}`],\n    styles[`highlightpanel--${size}`],\n    svgIcon && styles['highlightpanel--has-icon'],\n    { container: size === 'medium' || size === 'large' },\n    className\n  );\n\n  const renderContent = () => {\n    if (svgIcon) {\n      const iconSize = size === HighlightPanelSize.large && breakpoint && breakpoint >= Breakpoint.md ? IconSize.Medium : IconSize.Small;\n\n      const titleElement = (\n        <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance=\"title4\">\n          {title}\n        </Title>\n      );\n\n      return (\n        <>\n          <div className={styles.highlightpanel__icon}>\n            {typeof svgIcon === 'string' ? <LazyIcon iconName={svgIcon} size={iconSize} /> : <Icon svgIcon={svgIcon} size={iconSize} />}\n            {title && <div className={styles['mobile']}>{titleElement}</div>}\n          </div>\n          <div className={styles.highlightpanel__content}>\n            {title && (\n              <div className={styles['desktop']} aria-hidden=\"true\">\n                {titleElement}\n              </div>\n            )}\n            {children}\n          </div>\n        </>\n      );\n    }\n\n    return children;\n  };\n\n  const CustomTag = htmlMarkup;\n\n  const contentWrapperClasses = classNames(styles['highlightpanel__content-wrapper'], contentWrapperClassName);\n\n  if (size === HighlightPanelSize.medium) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <CustomTag className={contentWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.HighlightPanel}>\n          {renderContent()}\n        </CustomTag>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.large && svgIcon) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightpanel__col, styles['highlightpanel__col--large-with-icon'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightPanel}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.large) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightpanel__col, styles['highlightpanel__col--offset'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightPanel}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.fluid) {\n    return (\n      <CustomTag className={containerClassName} data-testid={testId}>\n        {renderContent()}\n      </CustomTag>\n    );\n  }\n\n  return null;\n};\n\nexport default HighlightPanel;\n"],"names":["HighlightPanelSize","Wrapper","className","size","children","jsx","styles","classNames","ContentWrapper","props","contentWrapperClasses","HighlightPanel","color","testId","svgIcon","htmlMarkup","contentWrapperClassName","title","titleHtmlMarkup","breakpoint","useBreakpoint","containerClassName","renderContent","iconSize","Breakpoint","IconSize","titleElement","Title","jsxs","Fragment","LazyIcon","Icon","CustomTag","AnalyticsId"],"mappings":";;;;;;;;;;AAgBY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SAHEA,IAAAA,KAAA,CAAA,CAAA;AAwCZ,MAAMC,IAAkC,CAAC,EAAE,WAAAC,GAAW,MAAAC,GAAM,UAAAC,EAAA,MAC1D,gBAAAC,EAAC,OAAI,EAAA,WAAAH,GAAsB,eAAa,0BACtC,4BAAC,OAAI,EAAA,WAAWI,EAAO,qBACrB,UAAC,gBAAAD,EAAA,OAAA,EAAI,WAAWE,EAAWD,EAAO,qBAAqBH,MAAS,YAA6BG,EAAO,6BAA6B,CAAC,GAC/H,UAAAF,EAAA,CACH,GACF,EACF,CAAA,GAQII,IAAgD,CAASC,MAAA;AACvD,QAAA,EAAE,UAAAL,GAAU,WAAAF,EAAc,IAAAO,GAC1BC,IAAwBH,EAAWD,EAAO,iCAAiC,GAAGJ,CAAS;AAE7F,SACG,gBAAAG,EAAA,OAAA,EAAI,WAAWK,GACd,UAAC,gBAAAL,EAAA,OAAA,EAAI,WAAWE,EAAWD,EAAO,mBAAmB,GAAI,UAAAF,EAAA,CAAS,EACpE,CAAA;AAEJ,GAEMO,IAAgD,CAASF,MAAA;AACvD,QAAA;AAAA,IACJ,UAAAL;AAAA,IACA,OAAAQ,IAAQ;AAAA,IACR,MAAAT,IAAO;AAAA,IACP,QAAAU;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,WAAAb;AAAA,IACA,yBAAAc;AAAA,IACA,OAAAC;AAAA,IACA,iBAAAC,IAAkB;AAAA,EAChB,IAAAT,GACEU,IAAaC,KAEbC,IAAqBd;AAAA,IACzBD,EAAO,mBAAmBM,CAAK,EAAE;AAAA,IACjCN,EAAO,mBAAmBH,CAAI,EAAE;AAAA,IAChCW,KAAWR,EAAO,0BAA0B;AAAA,IAC5C,EAAE,WAAWH,MAAS,YAAYA,MAAS,QAAQ;AAAA,IACnDD;AAAA,EAAA,GAGIoB,IAAgB,MAAM;AAC1B,QAAIR,GAAS;AACL,YAAAS,IAAWpB,MAAS,WAA4BgB,KAAcA,KAAcK,EAAW,KAAKC,EAAS,SAASA,EAAS,OAEvHC,sBACHC,GAAM,EAAA,QAAO,WAAU,YAAYT,GAAiB,YAAW,UAC7D,UACHD,EAAA,CAAA;AAGF,aAEI,gBAAAW,EAAAC,GAAA,EAAA,UAAA;AAAA,QAAC,gBAAAD,EAAA,OAAA,EAAI,WAAWtB,EAAO,sBACpB,UAAA;AAAA,UAAA,OAAOQ,KAAY,WAAY,gBAAAT,EAAAyB,GAAA,EAAS,UAAUhB,GAAS,MAAMS,EAAU,CAAA,IAAK,gBAAAlB,EAAC0B,GAAK,EAAA,SAAAjB,GAAkB,MAAMS,GAAU;AAAA,UACxHN,KAAU,gBAAAZ,EAAA,OAAA,EAAI,WAAWC,EAAO,QAAY,UAAaoB,GAAA;AAAA,QAAA,GAC5D;AAAA,QACC,gBAAAE,EAAA,OAAA,EAAI,WAAWtB,EAAO,yBACpB,UAAA;AAAA,UACCW,KAAA,gBAAAZ,EAAC,SAAI,WAAWC,EAAO,SAAY,eAAY,QAC5C,UACHoB,EAAA,CAAA;AAAA,UAEDtB;AAAA,QAAA,GACH;AAAA,MACF,EAAA,CAAA;AAAA,IAEJ;AAEO,WAAAA;AAAA,EAAA,GAGH4B,IAAYjB,GAEZL,IAAwBH,EAAWD,EAAO,iCAAiC,GAAGU,CAAuB;AAE3G,SAAIb,MAAS,6BAERF,GAAQ,EAAA,WAAWoB,GAAoB,MAAAlB,GACtC,4BAAC6B,GAAU,EAAA,WAAWtB,GAAuB,eAAaG,GAAQ,oBAAkBoB,EAAY,gBAC7F,UAAAX,EAAA,GACH,EACF,CAAA,IAIAnB,MAAS,WAA4BW,IAErC,gBAAAT,EAACJ,KAAQ,WAAWoB,GAAoB,MAAAlB,GACtC,UAAC,gBAAAE,EAAAG,GAAA,EAAe,WAAWE,GACzB,UAAA,gBAAAL;AAAA,IAAC2B;AAAA,IAAA;AAAA,MACC,WAAWzB,EAAWD,EAAO,qBAAqBA,EAAO,sCAAsC,CAAC;AAAA,MAChG,eAAaO;AAAA,MACb,oBAAkBoB,EAAY;AAAA,MAE7B,UAAcX,EAAA;AAAA,IAAA;AAAA,EAAA,EAEnB,CAAA,EACF,CAAA,IAIAnB,MAAS,UAET,gBAAAE,EAACJ,KAAQ,WAAWoB,GAAoB,MAAAlB,GACtC,UAAC,gBAAAE,EAAAG,GAAA,EAAe,WAAWE,GACzB,UAAA,gBAAAL;AAAA,IAAC2B;AAAA,IAAA;AAAA,MACC,WAAWzB,EAAWD,EAAO,qBAAqBA,EAAO,6BAA6B,CAAC;AAAA,MACvF,eAAaO;AAAA,MACb,oBAAkBoB,EAAY;AAAA,MAE7B,UAAcX,EAAA;AAAA,IAAA;AAAA,EAAA,EAEnB,CAAA,EACF,CAAA,IAIAnB,MAAS,4BAER6B,GAAU,EAAA,WAAWX,GAAoB,eAAaR,GACpD,YACH,EAAA,CAAA,IAIG;AACT;"}
+{"version":3,"file":"HighlightPanel.js","sources":["../src/components/HighlightPanel/HighlightPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint, Breakpoint } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\nimport Icon, { SvgIcon, IconSize } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type HighlightPanelColors = Extract<PaletteNames, 'white' | 'neutral' | 'blueberry' | 'cherry'>;\n\nexport enum HighlightPanelSize {\n  medium = 'medium',\n  large = 'large',\n  fluid = 'fluid',\n}\n\nexport type HighlightPanelTags = Exclude<\n  keyof HTMLElementTagNameMap,\n  'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont' | 'search'\n>;\n\nexport interface HighlightPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the background color. Default: white */\n  color?: HighlightPanelColors;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightPanelSize;\n  /** Adds an icon to the highlightpanel. */\n  svgIcon?: SvgIcon | IconName;\n  /** Changes the underlying element. Default: div */\n  htmlMarkup?: HighlightPanelTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the content-wrapper. Not used for fluid size. */\n  contentWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Element that is set after the icon-element in the DOM, often a title-element */\n  title?: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n}\n\ninterface WrapperProps {\n  children?: React.ReactNode;\n  className: string;\n  size?: keyof typeof HighlightPanelSize;\n}\n\nconst Wrapper: React.FC<WrapperProps> = ({ className, size, children }) => (\n  <div className={className} data-testid={'highlightpanel-wrapper'}>\n    <div className={styles.highlightpanel__row}>\n      <div className={classNames(styles.highlightpanel__col, size === HighlightPanelSize.medium && styles['highlightpanel__col--offset'])}>\n        {children}\n      </div>\n    </div>\n  </div>\n);\n\ninterface ContentWrapperProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst ContentWrapper: React.FC<ContentWrapperProps> = props => {\n  const { children, className } = props;\n  const contentWrapperClasses = classNames(styles['highlightpanel__content-wrapper'], className);\n\n  return (\n    <div className={contentWrapperClasses}>\n      <div className={classNames(styles.highlightpanel__row)}>{children}</div>\n    </div>\n  );\n};\n\nconst HighlightPanel: React.FC<HighlightPanelProps> = props => {\n  const {\n    children,\n    color = 'white',\n    size = HighlightPanelSize.medium,\n    testId,\n    svgIcon,\n    htmlMarkup = 'div',\n    className,\n    contentWrapperClassName,\n    title,\n    titleHtmlMarkup = 'h2',\n  } = props;\n  const breakpoint = useBreakpoint();\n\n  const containerClassName = classNames(\n    styles[`highlightpanel--${color}`],\n    styles[`highlightpanel--${size}`],\n    svgIcon && styles['highlightpanel--has-icon'],\n    { container: size === 'medium' || size === 'large' },\n    className\n  );\n\n  const renderContent = () => {\n    if (svgIcon) {\n      const iconSize = size === HighlightPanelSize.large && breakpoint && breakpoint >= Breakpoint.md ? IconSize.Medium : IconSize.Small;\n\n      const titleElement = (\n        <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance=\"title4\">\n          {title}\n        </Title>\n      );\n\n      return (\n        <>\n          <div className={styles.highlightpanel__icon}>\n            {typeof svgIcon === 'string' ? <LazyIcon iconName={svgIcon} size={iconSize} /> : <Icon svgIcon={svgIcon} size={iconSize} />}\n            {title && <div className={styles['mobile']}>{titleElement}</div>}\n          </div>\n          <div className={styles.highlightpanel__content}>\n            {title && (\n              <div className={styles['desktop']} aria-hidden=\"true\">\n                {titleElement}\n              </div>\n            )}\n            {children}\n          </div>\n        </>\n      );\n    }\n\n    return children;\n  };\n\n  const CustomTag = htmlMarkup;\n\n  const contentWrapperClasses = classNames(styles['highlightpanel__content-wrapper'], contentWrapperClassName);\n\n  if (size === HighlightPanelSize.medium) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <CustomTag className={contentWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.HighlightPanel}>\n          {renderContent()}\n        </CustomTag>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.large && svgIcon) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightpanel__col, styles['highlightpanel__col--large-with-icon'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightPanel}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.large) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightpanel__col, styles['highlightpanel__col--offset'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightPanel}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.fluid) {\n    return (\n      <CustomTag className={containerClassName} data-testid={testId}>\n        {renderContent()}\n      </CustomTag>\n    );\n  }\n\n  return null;\n};\n\nexport default HighlightPanel;\n"],"names":["HighlightPanelSize","Wrapper","className","size","children","jsx","styles","classNames","ContentWrapper","props","contentWrapperClasses","HighlightPanel","color","testId","svgIcon","htmlMarkup","contentWrapperClassName","title","titleHtmlMarkup","breakpoint","useBreakpoint","containerClassName","renderContent","iconSize","Breakpoint","IconSize","titleElement","Title","jsxs","Fragment","LazyIcon","Icon","CustomTag","AnalyticsId"],"mappings":"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"}

package/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 { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\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  extends ErrorWrapperClassNameProps,\n    Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'onChange' | 'onBlur'> {\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\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  /** 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.forwardRef((props: SliderProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    title,\n    ariaLabel,\n    error,\n    errorText,\n    errorTextId,\n    errorWrapperClassName,\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    ...rest\n  } = props;\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 errorTextUuid = useUuid(errorTextId);\n  const titleId = useUuid();\n  const labelLeftId = useUuid();\n  const labelRightId = useUuid();\n  const trackRef = useRef<HTMLDivElement>(null);\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const largeStep = maxValue / 10;\n  const invalid = !!errorText || !!error;\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return (): void => {\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 (): void => {\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 (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    refObject.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    refObject.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  useEffect(() => {\n    if (selectedState && onChange) {\n      onChange({\n        target: {\n          name: props.name,\n          value: valueState,\n        },\n      } as unknown as React.ChangeEvent<HTMLInputElement>);\n    }\n  }, [valueState, selectedState]);\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    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <input\n        aria-valuetext={getAriaValueText()}\n        className={styles['sr-only-slider']}\n        disabled={disabled}\n        min={minValue}\n        max={maxValue}\n        onChange={onChange}\n        onKeyDown={handleKeyDown}\n        value={valueState}\n        ref={mergedRefs}\n        type=\"range\"\n        {...rest}\n        {...ariaLabelAttributes}\n      />\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          {/* Slider streken er klikkbar med mus/touch */}\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              className={classNames(styles.slider__marker, {\n                [styles['slider__marker--disabled']]: disabled,\n                [styles['slider__marker--selected']]: selectedState,\n                [styles['slider__marker--invalid']]: invalid,\n                [styles['slider__marker--focused']]: !disabled && isFocused,\n              })}\n              style={{\n                left: `${markerXPos}px`,\n              }}\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    </ErrorWrapper>\n  );\n});\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"names":["useSafeNumberValue","initial","min","max","value","setValue","useState","setSafeValue","newValue","useEffect","Slider","React","props","ref","title","ariaLabel","error","errorText","errorTextId","errorWrapperClassName","labelLeft","labelRight","disabled","onChange","steps","step","minValue","maxValue","selected","testId","rest","isMoving","setIsMoving","selectedState","setSelectedState","valueState","setValueState","errorTextUuid","useUuid","titleId","labelLeftId","labelRightId","trackRef","useRef","refObject","isFocused","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","trackWidth","useSize","largeStep","invalid","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","jsx","styles","renderSteps","_step","renderStepLabels","ErrorWrapper","jsxs","AnalyticsId","Title","classNames"],"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 { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\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  extends ErrorWrapperClassNameProps,\n    Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'onChange' | 'onBlur'> {\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\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  /** 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.forwardRef((props: SliderProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    title,\n    ariaLabel,\n    error,\n    errorText,\n    errorTextId,\n    errorWrapperClassName,\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    ...rest\n  } = props;\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 errorTextUuid = useUuid(errorTextId);\n  const titleId = useUuid();\n  const labelLeftId = useUuid();\n  const labelRightId = useUuid();\n  const trackRef = useRef<HTMLDivElement>(null);\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const largeStep = maxValue / 10;\n  const invalid = !!errorText || !!error;\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return (): void => {\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 (): void => {\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 (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    refObject.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    refObject.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  useEffect(() => {\n    if (selectedState && onChange) {\n      onChange({\n        target: {\n          name: props.name,\n          value: valueState,\n        },\n      } as unknown as React.ChangeEvent<HTMLInputElement>);\n    }\n  }, [valueState, selectedState]);\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    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <input\n        aria-valuetext={getAriaValueText()}\n        className={styles['sr-only-slider']}\n        disabled={disabled}\n        min={minValue}\n        max={maxValue}\n        onChange={onChange}\n        onKeyDown={handleKeyDown}\n        value={valueState}\n        ref={mergedRefs}\n        type=\"range\"\n        {...rest}\n        {...ariaLabelAttributes}\n      />\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          {/* Slider streken er klikkbar med mus/touch */}\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              className={classNames(styles.slider__marker, {\n                [styles['slider__marker--disabled']]: disabled,\n                [styles['slider__marker--selected']]: selectedState,\n                [styles['slider__marker--invalid']]: invalid,\n                [styles['slider__marker--focused']]: !disabled && isFocused,\n              })}\n              style={{\n                left: `${markerXPos}px`,\n              }}\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    </ErrorWrapper>\n  );\n});\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"names":["useSafeNumberValue","initial","min","max","value","setValue","useState","setSafeValue","newValue","useEffect","Slider","React","props","ref","title","ariaLabel","error","errorText","errorTextId","errorWrapperClassName","labelLeft","labelRight","disabled","onChange","steps","step","minValue","maxValue","selected","testId","rest","isMoving","setIsMoving","selectedState","setSelectedState","valueState","setValueState","errorTextUuid","useUuid","titleId","labelLeftId","labelRightId","trackRef","useRef","refObject","isFocused","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","trackWidth","useSize","largeStep","invalid","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","jsx","styles","renderSteps","_step","renderStepLabels","ErrorWrapper","jsxs","AnalyticsId","Title","classNames"],"mappings":"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"}

package/Textarea.js

@@ -1,31 +1,31 @@
-import { jsx as m, jsxs as te } from "react/jsx-runtime";
-import ae, { useState as A, useRef as oe, useEffect as B } from "react";
-import f from "classnames";
-import { FormOnColor as p, AnalyticsId as ne, AVERAGE_CHARACTER_WIDTH_PX as ie } from "./constants.js";
-import { useUuid as se } from "./hooks/useUuid.js";
-import { getAriaDescribedBy as ce } from "./utils/accessibility.js";
-import { u as de } from "./uuid.js";
-import { E as le } from "./ErrorWrapper.js";
-import { a as ue } from "./Label.js";
+import { jsx as m, jsxs as re } from "react/jsx-runtime";
+import te, { useState as A, useRef as ae, useEffect as B } from "react";
+import h from "classnames";
+import { FormOnColor as u, AnalyticsId as oe, AVERAGE_CHARACTER_WIDTH_PX as ne } from "./constants.js";
+import { useUuid as ie } from "./hooks/useUuid.js";
+import { getAriaDescribedBy as se } from "./utils/accessibility.js";
+import { u as ce } from "./uuid.js";
+import { E as de } from "./ErrorWrapper.js";
+import { a as le } from "./Label.js";
 import { M as me } from "./MaxCharacters.js";
 import r from "./components/Textarea/styles.module.scss";
-const pe = (a) => `calc(${a * ie}px + 2rem + 16px + 4px)`, he = ae.forwardRef((a, b) => {
+const ue = (a) => `calc(${a * ne}px + 2rem + 16px + 4px)`, pe = te.forwardRef((a, f) => {
   const {
     maxCharacters: o,
-    maxText: g,
-    width: C,
+    maxText: b,
+    width: g,
     testId: M,
-    defaultValue: i,
+    defaultValue: s,
     marginBottom: $,
     transparent: k,
-    onColor: n = p.onwhite,
+    onColor: n = u.onwhite,
     label: D,
-    textareaId: w = de(),
-    minRows: T = 3,
-    maxRows: s = 10,
-    grow: W,
+    textareaId: C = ce(),
+    minRows: w = 3,
+    maxRows: c = 10,
+    grow: T,
     error: L,
-    errorText: v,
+    errorText: W,
     errorTextId: S,
     errorWrapperClassName: j,
     autoFocus: F,
@@ -36,52 +36,50 @@ const pe = (a) => `calc(${a * ie}px + 2rem + 16px + 4px)`, he = ae.forwardRef((a
     readOnly: q,
     required: z,
     onChange: R,
-    value: c,
+    value: i,
     ...G
-  } = a, [P, E] = A(T), [h, d] = A(c || i || ""), l = oe(null), H = se(S);
+  } = a, [P, v] = A(w), [E, p] = A(i || s || ""), d = ae(null), H = ie(S);
   B(() => {
-    d(i || "");
-  }, [i]);
+    p(s || "");
+  }, [s]);
   const I = (e) => {
-    const u = e.rows;
-    e.rows = T;
+    const l = e.rows;
+    e.rows = w;
     const t = Math.floor((e.scrollHeight - 16) / 28);
-    t === u && (e.rows = t), t >= s && (e.rows = s, e.scrollTop = e.scrollHeight), t < s ? E(t) : E(s);
-  }, X = n === p.ondark, J = n === p.onblueberry, K = !!o && h.toString().length > o, N = n === p.oninvalid || !!v || !!L || K, Q = f(r.textarea, {
+    t === l && (e.rows = t), t >= c && (e.rows = c, e.scrollTop = e.scrollHeight), t < c ? v(t) : v(c);
+  }, X = n === u.ondark, J = n === u.onblueberry, K = !!o && E.toString().length > o, N = n === u.oninvalid || !!W || !!L || K, Q = h(r.textarea, {
     [r["textarea--gutterBottom"]]: $
-  }), Y = f(r["input-container"], {
+  }), Y = h(r["input-container"], {
     [r["input-container--transparent"]]: k,
     [r["input-container--on-blueberry"]]: J,
     [r["input-container--on-dark"]]: X,
     [r["input-container--invalid"]]: N,
     [r["input-container--disabled"]]: a.disabled
-  }), Z = f(r["input-container__input"], {
+  }), Z = h(r["input-container__input"], {
     [r["input-container__input--disabled"]]: a.disabled
   });
   B(() => {
-    var e, x, u;
-    if (c && d(c), W && ((e = l.current) != null && e.children) && ((x = l.current) != null && x.children[0])) {
-      const t = (u = l.current) == null ? void 0 : u.children[0];
+    var e, x, l;
+    if (i && p(i), T && ((e = d.current) != null && e.children) && ((x = d.current) != null && x.children[0])) {
+      const t = (l = d.current) == null ? void 0 : l.children[0];
       I(t);
     }
-  }, [c]);
+  }, [i]);
   const ee = (e) => {
-    W && I(e.target), d(e.target.value);
-  }, re = (e) => {
-    d(e.target.value), R && R(e), ee(e);
-  }, _ = C ? pe(C) : void 0;
-  return /* @__PURE__ */ m(le, { className: j, errorText: v, errorTextId: H, children: /* @__PURE__ */ te("div", { "data-testid": M, "data-analyticsid": ne.Textarea, className: Q, children: [
-    ue(D, w, n),
-    /* @__PURE__ */ m("div", { className: Y, ref: l, style: { maxWidth: _ }, children: /* @__PURE__ */ m(
+    p(e.target.value), R && R(e), T && I(e.target);
+  }, _ = g ? ue(g) : void 0;
+  return /* @__PURE__ */ m(de, { className: j, errorText: W, errorTextId: H, children: /* @__PURE__ */ re("div", { "data-testid": M, "data-analyticsid": oe.Textarea, className: Q, children: [
+    le(D, C, n),
+    /* @__PURE__ */ m("div", { className: Y, ref: d, style: { maxWidth: _ }, children: /* @__PURE__ */ m(
       "textarea",
       {
         ...G,
         rows: P,
-        defaultValue: i,
-        id: w,
+        defaultValue: s,
+        id: C,
         className: Z,
-        ref: b,
-        "aria-describedby": ce(a, H),
+        ref: f,
+        "aria-describedby": se(a, H),
         "aria-invalid": !!N,
         autoFocus: F,
         disabled: O,
@@ -90,24 +88,24 @@ const pe = (a) => `calc(${a * ie}px + 2rem + 16px + 4px)`, he = ae.forwardRef((a
         placeholder: V,
         readOnly: q,
         required: z,
-        onChange: re,
-        value: h
+        onChange: ee,
+        value: i
       }
     ) }),
     o && /* @__PURE__ */ m(
       me,
       {
         maxCharacters: o,
-        length: h.toString().length,
-        maxText: g,
+        length: E.toString().length,
+        maxText: b,
         onColor: n,
         maxWidth: _
       }
     )
   ] }) });
 });
-he.displayName = "Textarea";
+pe.displayName = "Textarea";
 export {
-  he as T
+  pe as T
 };
 //# sourceMappingURL=Textarea.js.map

package/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface TextareaProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLTextAreaElement>,\n      | 'aria-describedby'\n      | 'autoFocus'\n      | 'disabled'\n      | 'name'\n      | 'autoComplete'\n      | 'placeholder'\n      | 'readOnly'\n      | 'required'\n      | 'defaultValue'\n      | 'onChange'\n      | 'value'\n    > {\n  /** max character limit in textarea  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Width of textarea in characters (approximate) */\n  width?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** If true, the component will have a bottom margin. */\n  marginBottom?: boolean;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Changes the visuals of the textarea */\n  onColor?: keyof typeof FormOnColor;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** id of the textarea */\n  textareaId?: string;\n  /** max rows */\n  maxRows?: number;\n  /** min rows */\n  minRows?: number;\n  /** auto-grows until maxRows */\n  grow?: boolean;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n  const scrollbarWidth = '16px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea = React.forwardRef((props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) => {\n  const {\n    maxCharacters,\n    maxText,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    onColor = FormOnColor.onwhite,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    error,\n    errorText,\n    errorTextId,\n    errorWrapperClassName,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete = 'off',\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    value,\n    ...rest\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(value || defaultValue || '');\n  const referanse = useRef<HTMLDivElement>(null);\n  const errorTextUuid = useUuid(errorTextId);\n\n  useEffect(() => {\n    setTextareaInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const resizeHeight = (target: HTMLTextAreaElement): void => {\n    const textareaLineHeight = 28;\n\n    const previousRows = target.rows;\n    target.rows = minRows; // reset number of rows in textarea\n\n    const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n    if (currentRows === previousRows) {\n      target.rows = currentRows;\n    }\n\n    if (currentRows >= maxRows) {\n      target.rows = maxRows;\n      target.scrollTop = target.scrollHeight;\n    }\n\n    if (currentRows < maxRows) {\n      setRows(currentRows);\n    } else {\n      setRows(maxRows);\n    }\n  };\n\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n  const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const contentWrapperClass = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: transparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--disabled']]: props.disabled,\n  });\n\n  const textareaClass = cn(styles['input-container__input'], {\n    [styles[`input-container__input--disabled`]]: props.disabled,\n  });\n\n  useEffect(() => {\n    value && setTextareaInput(value);\n\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, [value]);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (grow) {\n      resizeHeight(e.target);\n    }\n    setTextareaInput(e.target.value);\n  };\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    setTextareaInput(e.target.value);\n\n    if (onChange) {\n      onChange(e);\n    }\n    handleChange(e);\n  };\n\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {renderLabel(label, textareaId, onColor as FormOnColor)}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            {...rest}\n            rows={rows}\n            defaultValue={defaultValue}\n            id={textareaId}\n            className={textareaClass}\n            ref={ref}\n            aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n            aria-invalid={!!onError}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n            onChange={onChangeHandler}\n            value={textareaInput}\n          />\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={textareaInput.toString().length}\n            maxText={maxText}\n            onColor={onColor}\n            maxWidth={maxWidth}\n          />\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n"],"names":["getTextareaMaxWidth","characters","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","maxCharacters","maxText","width","testId","defaultValue","gutterBottom","transparent","onColor","FormOnColor","label","textareaId","uuid","minRows","maxRows","grow","error","errorText","errorTextId","errorWrapperClassName","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","onChange","value","rest","rows","setRows","useState","textareaInput","setTextareaInput","referanse","useRef","errorTextUuid","useUuid","useEffect","resizeHeight","target","previousRows","currentRows","onDark","onBlueberry","maxCharactersExceeded","onError","textareaWrapperClass","cn","styles","contentWrapperClass","textareaClass","_a","_b","textarea","_c","handleChange","onChangeHandler","maxWidth","jsx","ErrorWrapper","jsxs","AnalyticsId","renderLabel","getAriaDescribedBy","MaxCharacters"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","sources":["../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface TextareaProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLTextAreaElement>,\n      | 'aria-describedby'\n      | 'autoFocus'\n      | 'disabled'\n      | 'name'\n      | 'autoComplete'\n      | 'placeholder'\n      | 'readOnly'\n      | 'required'\n      | 'defaultValue'\n      | 'onChange'\n      | 'value'\n    > {\n  /** max character limit in textarea  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Width of textarea in characters (approximate) */\n  width?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** If true, the component will have a bottom margin. */\n  marginBottom?: boolean;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Changes the visuals of the textarea */\n  onColor?: keyof typeof FormOnColor;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** id of the textarea */\n  textareaId?: string;\n  /** max rows */\n  maxRows?: number;\n  /** min rows */\n  minRows?: number;\n  /** auto-grows until maxRows */\n  grow?: boolean;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n  const scrollbarWidth = '16px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea = React.forwardRef((props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) => {\n  const {\n    maxCharacters,\n    maxText,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    onColor = FormOnColor.onwhite,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    error,\n    errorText,\n    errorTextId,\n    errorWrapperClassName,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete = 'off',\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    value,\n    ...rest\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(value || defaultValue || '');\n  const referanse = useRef<HTMLDivElement>(null);\n  const errorTextUuid = useUuid(errorTextId);\n\n  useEffect(() => {\n    setTextareaInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const resizeHeight = (target: HTMLTextAreaElement): void => {\n    const textareaLineHeight = 28;\n\n    const previousRows = target.rows;\n    target.rows = minRows; // reset number of rows in textarea\n\n    const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n    if (currentRows === previousRows) {\n      target.rows = currentRows;\n    }\n\n    if (currentRows >= maxRows) {\n      target.rows = maxRows;\n      target.scrollTop = target.scrollHeight;\n    }\n\n    if (currentRows < maxRows) {\n      setRows(currentRows);\n    } else {\n      setRows(maxRows);\n    }\n  };\n\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n  const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const contentWrapperClass = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: transparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--disabled']]: props.disabled,\n  });\n\n  const textareaClass = cn(styles['input-container__input'], {\n    [styles[`input-container__input--disabled`]]: props.disabled,\n  });\n\n  useEffect(() => {\n    value && setTextareaInput(value);\n\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, [value]);\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    setTextareaInput(e.target.value);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    if (grow) {\n      resizeHeight(e.target);\n    }\n  };\n\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {renderLabel(label, textareaId, onColor as FormOnColor)}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            {...rest}\n            rows={rows}\n            defaultValue={defaultValue}\n            id={textareaId}\n            className={textareaClass}\n            ref={ref}\n            aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n            aria-invalid={!!onError}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n            onChange={onChangeHandler}\n            value={value}\n          />\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={textareaInput.toString().length}\n            maxText={maxText}\n            onColor={onColor}\n            maxWidth={maxWidth}\n          />\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n"],"names":["getTextareaMaxWidth","characters","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","maxCharacters","maxText","width","testId","defaultValue","gutterBottom","transparent","onColor","FormOnColor","label","textareaId","uuid","minRows","maxRows","grow","error","errorText","errorTextId","errorWrapperClassName","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","onChange","value","rest","rows","setRows","useState","textareaInput","setTextareaInput","referanse","useRef","errorTextUuid","useUuid","useEffect","resizeHeight","target","previousRows","currentRows","onDark","onBlueberry","maxCharactersExceeded","onError","textareaWrapperClass","cn","styles","contentWrapperClass","textareaClass","_a","_b","textarea","_c","onChangeHandler","maxWidth","jsx","ErrorWrapper","jsxs","AnalyticsId","renderLabel","getAriaDescribedBy","MaxCharacters"],"mappings":"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"}

package/components/Avatar/Avatar.d.ts

@@ -10,6 +10,8 @@ export interface AvatarProps {
     selected?: boolean;
     /** background and color will be determined on variant. */
     variant?: 'normal' | 'black';
+    /** @deprecated Square or circle variant of avatar. The circle should only be used for representation of someone else. NB: This is temporary and will be renamed in v10 */
+    type?: 'normal' | 'circle';
     /** Avatar size. Default: small */
     size?: keyof typeof AvatarSize;
     /** Adds custom classes to the element. */

package/components/Avatar/styles.module.scss

@@ -9,6 +9,10 @@
   background-color: $blueberry500;
   color: $white;
 
+  &--circle {
+    border-radius: 50%;
+  }
+
   &--selected {
     background-color: transparent;
   }

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

@@ -1,6 +1,7 @@
 export type Styles = {
   avatar: string;
   'avatar--black': string;
+  'avatar--circle': string;
   'avatar--selected': string;
   'avatar--small': string;
   'avatar--xsmall': string;

package/components/Button/Button.d.ts

@@ -42,6 +42,8 @@ export interface ButtonProps extends HTMLButtonProps, HTMLAnchorProps, AriaAttri
     tabIndex?: number;
     /** Sets the data-testid attribute. */
     testId?: string;
+    /** Adds custom classes to the text */
+    textClassName?: string;
     /** Sets the position of the text in the button - only applies when button is fluid */
     textPosition?: ButtonTextPosition;
     /** Button type. Default: button */