@helsenorge/designsystem-react 9.0.0 → 9.1.0

package/Avatar.js

@@ -1,34 +1,35 @@
 import { jsx as m } from "react/jsx-runtime";
-import p from "react";
-import v from "classnames";
-import { AnalyticsId as u, IconSize as b } from "./constants.js";
+import v from "react";
+import u from "classnames";
+import { AnalyticsId as b, IconSize as x } from "./constants.js";
 import { palette as o } from "./theme/palette.js";
-import { I as x } from "./Icon.js";
-import I from "./components/Icons/Check.js";
+import { I } from "./Icon.js";
+import y from "./components/Icons/Check.js";
 import a from "./components/Avatar/styles.module.scss";
 var A = /* @__PURE__ */ ((r) => (r.xsmall = "xsmall", r.small = "small", r))(A || {});
-const C = p.forwardRef(function(c, n) {
-  const { children: t, className: i = "", selected: l = !1, variant: s = "normal", size: e = "small", testId: d } = c, f = t.charAt(0).toLocaleUpperCase() + t.substring(1, 2);
+const j = v.forwardRef(function(c, i) {
+  const { children: t, className: n = "", selected: l = !1, variant: s = "normal", type: d = "normal", size: e = "small", testId: p } = c, f = t.charAt(0).toLocaleUpperCase() + t.substring(1, 2);
   return /* @__PURE__ */ m(
     "span",
     {
-      className: v(
+      className: u(
         a.avatar,
         l && a["avatar--selected"],
         s === "black" && a["avatar--black"],
+        d === "circle" && a["avatar--circle"],
         e === "xsmall" && a["avatar--xsmall"],
         e === "small" && a["avatar--small"],
-        i
+        n
       ),
-      ref: n,
-      "data-testid": d,
-      "data-analyticsid": u.Avatar,
-      children: l ? /* @__PURE__ */ m(x, { svgIcon: I, size: b.Small, color: s === "black" ? o.neutral900 : o.blueberry600 }) : f
+      ref: i,
+      "data-testid": p,
+      "data-analyticsid": b.Avatar,
+      children: l ? /* @__PURE__ */ m(I, { svgIcon: y, size: x.Small, color: s === "black" ? o.neutral900 : o.blueberry600 }) : f
     }
   );
 });
 export {
-  C as A,
+  j as A,
   A as a
 };
 //# sourceMappingURL=Avatar.js.map

package/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { palette } from '../../theme/palette';\nimport Icon, { IconSize } from '../Icon';\nimport Check from '../Icons/Check';\n\nimport styles from './styles.module.scss';\n\nexport enum AvatarSize {\n  xsmall = 'xsmall',\n  small = 'small',\n}\n\nexport interface AvatarProps {\n  /** Name to display in the avatar. Will be truncated to the first two characters. */\n  children: string;\n  /** Displays a check icon to indicated the selected state. */\n  selected?: boolean;\n  /** background and color will be determined on variant. */\n  variant?: 'normal' | 'black';\n  /** Avatar size. Default: small */\n  size?: keyof typeof AvatarSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\nexport type AvatarType = React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLElement>>;\nconst Avatar: AvatarType = React.forwardRef(function AvatarForwardedRef(props: AvatarProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { children, className = '', selected = false, variant = 'normal', size = AvatarSize.small, testId } = props;\n  const truncatedName = children.charAt(0).toLocaleUpperCase() + children.substring(1, 2);\n  return (\n    <span\n      className={cn(\n        styles.avatar,\n        selected && styles['avatar--selected'],\n        variant === 'black' && styles['avatar--black'],\n        size === AvatarSize.xsmall && styles['avatar--xsmall'],\n        size === AvatarSize.small && styles['avatar--small'],\n        className\n      )}\n      ref={ref}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Avatar}\n    >\n      {selected ? (\n        <Icon svgIcon={Check} size={IconSize.Small} color={variant === 'black' ? palette.neutral900 : palette.blueberry600} />\n      ) : (\n        truncatedName\n      )}\n    </span>\n  );\n});\n\nexport default Avatar;\n"],"names":["AvatarSize","Avatar","React","props","ref","children","className","selected","variant","size","testId","truncatedName","jsx","cn","styles","AnalyticsId","Icon","Check","IconSize","palette"],"mappings":";;;;;;;;AAWY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA;AAoBZ,MAAMC,IAAqBC,EAAM,WAAW,SAA4BC,GAAoBC,GAAsC;AAC1H,QAAA,EAAE,UAAAC,GAAU,WAAAC,IAAY,IAAI,UAAAC,IAAW,IAAO,SAAAC,IAAU,UAAU,MAAAC,IAAO,SAAkB,QAAAC,EAAA,IAAWP,GACtGQ,IAAgBN,EAAS,OAAO,CAAC,EAAE,kBAAsB,IAAAA,EAAS,UAAU,GAAG,CAAC;AAEpF,SAAA,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAAA,QACTC,EAAO;AAAA,QACPP,KAAYO,EAAO,kBAAkB;AAAA,QACrCN,MAAY,WAAWM,EAAO,eAAe;AAAA,QAC7CL,MAAS,YAAqBK,EAAO,gBAAgB;AAAA,QACrDL,MAAS,WAAoBK,EAAO,eAAe;AAAA,QACnDR;AAAA,MACF;AAAA,MACA,KAAAF;AAAA,MACA,eAAaM;AAAA,MACb,oBAAkBK,EAAY;AAAA,MAE7B,UACCR,IAAA,gBAAAK,EAACI,GAAK,EAAA,SAASC,GAAO,MAAMC,EAAS,OAAO,OAAOV,MAAY,UAAUW,EAAQ,aAAaA,EAAQ,aAAc,CAAA,IAEpHR;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}
+{"version":3,"file":"Avatar.js","sources":["../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { palette } from '../../theme/palette';\nimport Icon, { IconSize } from '../Icon';\nimport Check from '../Icons/Check';\n\nimport styles from './styles.module.scss';\n\nexport enum AvatarSize {\n  xsmall = 'xsmall',\n  small = 'small',\n}\n\nexport interface AvatarProps {\n  /** Name to display in the avatar. Will be truncated to the first two characters. */\n  children: string;\n  /** Displays a check icon to indicated the selected state. */\n  selected?: boolean;\n  /** background and color will be determined on variant. */\n  variant?: 'normal' | 'black';\n  /** @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 */\n  type?: 'normal' | 'circle';\n  /** Avatar size. Default: small */\n  size?: keyof typeof AvatarSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\nexport type AvatarType = React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLElement>>;\nconst Avatar: AvatarType = React.forwardRef(function AvatarForwardedRef(props: AvatarProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { children, className = '', selected = false, variant = 'normal', type = 'normal', size = AvatarSize.small, testId } = props;\n  const truncatedName = children.charAt(0).toLocaleUpperCase() + children.substring(1, 2);\n  return (\n    <span\n      className={cn(\n        styles.avatar,\n        selected && styles['avatar--selected'],\n        variant === 'black' && styles['avatar--black'],\n        type === 'circle' && styles['avatar--circle'],\n        size === AvatarSize.xsmall && styles['avatar--xsmall'],\n        size === AvatarSize.small && styles['avatar--small'],\n        className\n      )}\n      ref={ref}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Avatar}\n    >\n      {selected ? (\n        <Icon svgIcon={Check} size={IconSize.Small} color={variant === 'black' ? palette.neutral900 : palette.blueberry600} />\n      ) : (\n        truncatedName\n      )}\n    </span>\n  );\n});\n\nexport default Avatar;\n"],"names":["AvatarSize","Avatar","React","props","ref","children","className","selected","variant","type","size","testId","truncatedName","jsx","cn","styles","AnalyticsId","Icon","Check","IconSize","palette"],"mappings":";;;;;;;;AAWY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA;AAsBZ,MAAMC,IAAqBC,EAAM,WAAW,SAA4BC,GAAoBC,GAAsC;AAChI,QAAM,EAAE,UAAAC,GAAU,WAAAC,IAAY,IAAI,UAAAC,IAAW,IAAO,SAAAC,IAAU,UAAU,MAAAC,IAAO,UAAU,MAAAC,IAAO,SAAkB,QAAAC,MAAWR,GACvHS,IAAgBP,EAAS,OAAO,CAAC,EAAE,kBAAsB,IAAAA,EAAS,UAAU,GAAG,CAAC;AAEpF,SAAA,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAAA,QACTC,EAAO;AAAA,QACPR,KAAYQ,EAAO,kBAAkB;AAAA,QACrCP,MAAY,WAAWO,EAAO,eAAe;AAAA,QAC7CN,MAAS,YAAYM,EAAO,gBAAgB;AAAA,QAC5CL,MAAS,YAAqBK,EAAO,gBAAgB;AAAA,QACrDL,MAAS,WAAoBK,EAAO,eAAe;AAAA,QACnDT;AAAA,MACF;AAAA,MACA,KAAAF;AAAA,MACA,eAAaO;AAAA,MACb,oBAAkBK,EAAY;AAAA,MAE7B,UACCT,IAAA,gBAAAM,EAACI,GAAK,EAAA,SAASC,GAAO,MAAMC,EAAS,OAAO,OAAOX,MAAY,UAAUY,EAAQ,aAAaA,EAAQ,aAAc,CAAA,IAEpHR;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

package/Button.js

@@ -1,20 +1,20 @@
-import { jsxs as N, Fragment as ut, jsx as a } from "react/jsx-runtime";
-import x, { useRef as dt, useEffect as bt } from "react";
+import { jsxs as k, Fragment as dt, jsx as a } from "react/jsx-runtime";
+import x, { useRef as bt, useEffect as pt } from "react";
 import m from "classnames";
-import { I as pt } from "./Icon.js";
+import { I as mt } from "./Icon.js";
 import { AnalyticsId as X, IconSize as B } from "./constants.js";
-import { useBreakpoint as mt } from "./hooks/useBreakpoint.js";
+import { useBreakpoint as ft } from "./hooks/useBreakpoint.js";
 import { useHover as $ } from "./hooks/useHover.js";
-import { useIcons as ft } from "./hooks/useIcons.js";
+import { useIcons as ht } from "./hooks/useIcons.js";
 import { getColor as u } from "./theme/currys/color.js";
-import { breakpoints as ht } from "./theme/grid.js";
-import { isTest as gt, isProd as _t } from "./utils/environment.js";
-import wt from "./components/Icons/ArrowRight.js";
+import { breakpoints as gt } from "./theme/grid.js";
+import { isTest as _t, isProd as wt } from "./utils/environment.js";
+import Ct from "./components/Icons/ArrowRight.js";
 import t from "./components/Button/styles.module.scss";
-const It = (o, r, n, f, e, g) => g && n ? !e || o ? u("neutral", r ? 500 : 700) : u("white") : n ? !e || o ? u("neutral", 500) : `${u("white")}b3` : o && !e || !o && e ? "white" : f === "normal" ? u("blueberry", 600) : u("cherry", 500), R = (o, r) => r && o ? B.Small : o ? B.Medium : B.XSmall, Ct = (o, r, n) => {
+const It = (o, r, n, f, e, g) => g && n ? !e || o ? u("neutral", r ? 500 : 700) : u("white") : n ? !e || o ? u("neutral", 500) : `${u("white")}b3` : o && !e || !o && e ? "white" : f === "normal" ? u("blueberry", 600) : u("cherry", 500), R = (o, r) => r && o ? B.Small : o ? B.Medium : B.XSmall, yt = (o, r, n) => {
   if (n && o && (r === void 0 || r === ""))
     throw new Error("Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav");
-}, jt = x.forwardRef(function(r, n) {
+}, Lt = x.forwardRef(function(r, n) {
   const {
     ariaLabel: f,
     id: e,
@@ -26,31 +26,32 @@ const It = (o, r, n, f, e, g) => g && n ? !e || o ? u("neutral", r ? 500 : 700)
     disabled: i = !1,
     ellipsis: S = !1,
     fluid: w = !1,
-    htmlMarkup: I = "button",
+    htmlMarkup: C = "button",
     onColor: J = "onlight",
     onBlur: z,
     onClick: U,
     size: K = "medium",
-    variant: C = "fill",
+    variant: I = "fill",
     href: Q,
     tabIndex: F,
     testId: H,
     target: P,
     type: Y = "button",
-    textPosition: Z = "left",
+    textClassName: Z,
+    textPosition: E = "left",
     ...j
-  } = r, [d, b, L] = ft(x.Children.toArray(g)), { hoverRef: M, isHovered: E } = I === "button" ? $(n) : $(n), tt = dt(null), s = !!(d || b) && !L, T = d && (b || _) && !s, y = J === "ondark", h = mt() < ht.md, V = A === "destructive" && !i, ot = C === "outline", c = C === "borderless", W = It(C === "fill", c, i, A, y, h), v = _ === "icon" && !c, p = K === "large" && !V && !c, rt = _ === "accessibility-character" && !w && !d && !b && !v && c, nt = { ...j }, D = m(
+  } = r, [d, b, L] = ht(x.Children.toArray(g)), { hoverRef: M, isHovered: tt } = C === "button" ? $(n) : $(n), ot = bt(null), s = !!(d || b) && !L, T = d && (b || _) && !s, y = J === "ondark", h = ft() < gt.md, V = A === "destructive" && !i, rt = I === "outline", l = I === "borderless", W = It(I === "fill", l, i, A, y, h), v = _ === "icon" && !l, p = K === "large" && !V && !l, nt = _ === "accessibility-character" && !w && !d && !b && !v && l, et = { ...j }, D = m(
     t["button-wrapper"],
     { [t["button-wrapper--fluid"]]: w || S },
     q
-  ), et = m(
+  ), st = m(
     t.button,
     {
       [t["button--destructive"]]: V,
       [t["button--normal"]]: !p,
       [t["button--large"]]: p,
-      [t["button--outline"]]: ot,
-      [t["button--borderless"]]: c,
+      [t["button--outline"]]: rt,
+      [t["button--borderless"]]: l,
       [t["button--left-icon"]]: d && !s,
       [t["button--right-icon"]]: b && !s,
       [t["button--both-icons"]]: T,
@@ -59,35 +60,39 @@ const It = (o, r, n, f, e, g) => g && n ? !e || o ? u("neutral", r ? 500 : 700)
       [t["button--on-dark"]]: y
     },
     G
-  ), st = m(t.button__text, {
-    [t["button__text--ellipsis"]]: S,
-    [t["button__text--centered"]]: w && Z === "centered"
-  }), at = m(t.diagonal, {
+  ), at = m(
+    t.button__text,
+    {
+      [t["button__text--ellipsis"]]: S,
+      [t["button__text--centered"]]: w && E === "centered"
+    },
+    Z
+  ), it = m(t.diagonal, {
     [t["diagonal--on-dark"]]: y
   });
-  bt(() => {
-    Ct(s, f, !gt() && !_t());
+  pt(() => {
+    yt(s, f, !_t() && !wt());
   }, []);
-  const k = (l, ct, lt) => l ? x.cloneElement(l, {
+  const N = (c, ct, ut) => c ? x.cloneElement(c, {
     size: ct,
-    color: l != null && l.props.color && !i ? l.props.color : W,
-    isHovered: !i && E,
-    className: lt
-  }) : null, it = () => /* @__PURE__ */ N("span", { className: st, ref: tt, children: [
-    i && c && /* @__PURE__ */ a("span", { className: at, children: /* @__PURE__ */ a("span", { className: t.diagonal__line }) }),
+    color: c != null && c.props.color && !i ? c.props.color : W,
+    isHovered: !i && tt,
+    className: ut
+  }) : null, lt = () => /* @__PURE__ */ k("span", { className: at, ref: ot, children: [
+    i && l && /* @__PURE__ */ a("span", { className: it, children: /* @__PURE__ */ a("span", { className: t.diagonal__line }) }),
     /* @__PURE__ */ a("span", { children: s ? f : L })
-  ] }), O = () => /* @__PURE__ */ N("span", { className: et, children: [
-    k(d, R(p, h), s ? void 0 : t["button__left-icon"]),
-    it(),
-    v ? k(
-      /* @__PURE__ */ a(pt, { svgIcon: wt }),
+  ] }), O = () => /* @__PURE__ */ k("span", { className: st, children: [
+    N(d, R(p, h), s ? void 0 : t["button__left-icon"]),
+    lt(),
+    v ? N(
+      /* @__PURE__ */ a(mt, { svgIcon: Ct }),
       R(p, h),
       m(t.button__arrow, { [t["button__arrow--both-icons"]]: T })
-    ) : k(b, R(p, h), t["button__right-icon"]),
-    rt && /* @__PURE__ */ a("span", { style: { color: W }, className: t["button__right-unicode-arrow"], "aria-hidden": !0, children: "  →" })
+    ) : N(b, R(p, h), t["button__right-icon"]),
+    nt && /* @__PURE__ */ a("span", { style: { color: W }, className: t["button__right-unicode-arrow"], "aria-hidden": !0, children: "  →" })
   ] });
-  return /* @__PURE__ */ N(ut, { children: [
-    I === "button" && /* @__PURE__ */ a(
+  return /* @__PURE__ */ k(dt, { children: [
+    C === "button" && /* @__PURE__ */ a(
       "button",
       {
         id: e,
@@ -100,11 +105,11 @@ const It = (o, r, n, f, e, g) => g && n ? !e || o ? u("neutral", r ? 500 : 700)
         ref: M,
         tabIndex: F,
         type: Y,
-        ...nt,
+        ...et,
         children: O()
       }
     ),
-    I === "a" && /* @__PURE__ */ a(
+    C === "a" && /* @__PURE__ */ a(
       "a",
       {
         id: e,
@@ -125,6 +130,6 @@ const It = (o, r, n, f, e, g) => g && n ? !e || o ? u("neutral", r ? 500 : 700)
   ] });
 });
 export {
-  jt as B
+  Lt as B
 };
 //# sourceMappingURL=Button.js.map

package/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import React, { AriaAttributes, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from './../Icon';\nimport { HTMLButtonProps, HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { BaseIconElement, useIcons } from '../../hooks/useIcons';\nimport { getColor } from '../../theme/currys/color';\nimport { breakpoints } from '../../theme/grid';\nimport { isTest, isProd } from '../../utils/environment';\nimport ArrowRight from '../Icons/ArrowRight';\n\nimport buttonStyles from './styles.module.scss';\n\nexport type ButtonConcept = 'normal' | 'destructive';\nexport type ButtonVariant = 'fill' | 'outline' | 'borderless';\nexport type ButtonSize = 'medium' | 'large';\nexport type ButtonOnColor = 'onlight' | 'ondark';\nexport type ButtonTags = 'button' | 'a';\nexport type ButtonArrows = 'icon' | 'accessibility-character';\nexport type ButtonTextPosition = 'left' | 'centered';\n\nexport interface ButtonProps extends HTMLButtonProps, HTMLAnchorProps, AriaAttributes {\n  /** Sets the aria-label of the button, use when the button only includes an icon */\n  ariaLabel?: string;\n  /** Gives a unique id to the button */\n  id?: string;\n  /** Sets the content of the button. */\n  children: React.ReactNode;\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Enables an arrow icon to the right inside the button (Not available in borderless variant) */\n  arrow?: ButtonArrows;\n  /** Changes the intent of the button. Mostly changes the color profile. */\n  concept?: ButtonConcept;\n  /** Disables text wrapping and enables ellipsis. */\n  ellipsis?: boolean;\n  /** Makes the button scale to full width of its parent element. */\n  fluid?: boolean;\n  /** Changes the underlying element of the button. */\n  htmlMarkup?: ButtonTags;\n  /** Changes the button colors for different backgrounds. */\n  onColor?: ButtonOnColor;\n  /** Function that is called when the Button loses focus */\n  onBlur?: () => void;\n  /** Function that is called when clicked */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<{}> | React.KeyboardEvent<HTMLUListElement> | null) => void;\n  /** Changes the button colors for different backgrounds. (Large not available in borderless variant) */\n  size?: ButtonSize;\n  /** Changes the visual representation of the button. */\n  variant?: ButtonVariant;\n  /** Specifies the focus order relative to the other buttons or controls on the page  */\n  tabIndex?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the position of the text in the button - only applies when button is fluid */\n  textPosition?: ButtonTextPosition;\n  /** Button type. Default: button */\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n}\n\nconst getIconColor = (\n  fill: boolean,\n  borderless: boolean,\n  disabled: boolean,\n  concept: ButtonConcept,\n  ondark: boolean,\n  mobile: boolean\n): string => {\n  if (mobile && disabled) {\n    return !ondark || fill ? getColor('neutral', !borderless ? 700 : 500) : getColor('white');\n  }\n  if (disabled) {\n    return !ondark || fill ? getColor('neutral', 500) : `${getColor('white')}b3`;\n  }\n  if ((fill && !ondark) || (!fill && ondark)) {\n    return 'white';\n  }\n\n  return concept === 'normal' ? getColor('blueberry', 600) : getColor('cherry', 500);\n};\nconst getLargeIconSize = (large: boolean, mobile: boolean): IconSize => {\n  if (mobile && large) return IconSize.Small;\n  if (large) return IconSize.Medium;\n  return IconSize.XSmall;\n};\n\nconst checkOnlyIconAria = (onlyIcon: boolean, ariaLabel: string | undefined, devEnv: boolean): void => {\n  if (devEnv && onlyIcon && (ariaLabel === undefined || ariaLabel === '')) {\n    throw new Error('Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav');\n  }\n};\n\nconst Button = React.forwardRef(function ButtonForwardedRef(\n  props: ButtonProps,\n  ref: React.ForwardedRef<HTMLButtonElement | HTMLAnchorElement>\n) {\n  const {\n    ariaLabel,\n    id,\n    children,\n    wrapperClassName,\n    className,\n    arrow,\n    concept = 'normal',\n    disabled = false,\n    ellipsis = false,\n    fluid = false,\n    htmlMarkup = 'button',\n    onColor = 'onlight',\n    onBlur,\n    onClick,\n    size = 'medium',\n    variant = 'fill',\n    href,\n    tabIndex,\n    testId,\n    target,\n    type = 'button',\n    textPosition = 'left',\n    ...restProps\n  } = props;\n\n  const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));\n  const { hoverRef, isHovered } =\n    htmlMarkup === 'button'\n      ? useHover<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>)\n      : useHover<HTMLAnchorElement>(ref as React.RefObject<HTMLAnchorElement>);\n  const buttonContentRef = useRef<HTMLDivElement>(null);\n  const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;\n  const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;\n  const onDark = onColor === 'ondark';\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\n  const destructive = concept === 'destructive' && !disabled;\n  const outlineVariant = variant === 'outline';\n  const borderlessVariant = variant === 'borderless';\n  const iconColor = getIconColor(variant === 'fill', borderlessVariant, disabled, concept, onDark, mobile);\n  const hasArrow = arrow === 'icon' && !borderlessVariant;\n  const large = size === 'large' && !destructive && !borderlessVariant;\n  const hasUURightArrow = arrow === 'accessibility-character' && !fluid && !leftIcon && !rightIcon && !hasArrow && borderlessVariant;\n  const rest = { ...restProps };\n\n  const buttonWrapperClasses = classNames(\n    buttonStyles['button-wrapper'],\n    { [buttonStyles['button-wrapper--fluid']]: fluid || ellipsis },\n    wrapperClassName\n  );\n  const buttonClasses = classNames(\n    buttonStyles.button,\n    {\n      [buttonStyles['button--destructive']]: destructive,\n      [buttonStyles['button--normal']]: !large,\n      [buttonStyles['button--large']]: large,\n      [buttonStyles['button--outline']]: outlineVariant,\n      [buttonStyles['button--borderless']]: borderlessVariant,\n      [buttonStyles['button--left-icon']]: leftIcon && !onlyIcon,\n      [buttonStyles['button--right-icon']]: rightIcon && !onlyIcon,\n      [buttonStyles['button--both-icons']]: bothIcons,\n      [buttonStyles['button--only-icon']]: onlyIcon,\n      [buttonStyles['button--arrow']]: hasArrow,\n      [buttonStyles['button--on-dark']]: onDark,\n    },\n    className\n  );\n  const buttonTextClasses = classNames(buttonStyles['button__text'], {\n    [buttonStyles['button__text--ellipsis']]: ellipsis,\n    [buttonStyles['button__text--centered']]: fluid && textPosition === 'centered',\n  });\n  const diagonalClasses = classNames(buttonStyles['diagonal'], {\n    [buttonStyles['diagonal--on-dark']]: onDark,\n  });\n\n  useEffect(() => {\n    checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());\n  }, []);\n\n  const renderIcon = (iconElement: BaseIconElement | null, iconSize: number, iconClassName?: string): BaseIconElement | null => {\n    return iconElement\n      ? React.cloneElement(iconElement, {\n          size: iconSize,\n          color: iconElement?.props.color && !disabled ? iconElement.props.color : iconColor,\n          isHovered: !disabled && isHovered,\n          className: iconClassName,\n        })\n      : null;\n  };\n\n  const renderButtonContent = (): JSX.Element => {\n    return (\n      <span className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <span className={diagonalClasses}>\n            <span className={buttonStyles['diagonal__line']} />\n          </span>\n        )}\n        <span>{onlyIcon ? ariaLabel : restChildren}</span>\n      </span>\n    );\n  };\n\n  const renderbuttonContentWrapper = (): JSX.Element => (\n    <span className={buttonClasses}>\n      {renderIcon(leftIcon, getLargeIconSize(large, mobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n      {renderButtonContent()}\n      {hasArrow\n        ? renderIcon(\n            <Icon svgIcon={ArrowRight} />,\n            getLargeIconSize(large, mobile),\n            classNames(buttonStyles['button__arrow'], { [buttonStyles['button__arrow--both-icons']]: bothIcons })\n          )\n        : renderIcon(rightIcon, getLargeIconSize(large, mobile), buttonStyles['button__right-icon'])}\n      {hasUURightArrow && (\n        <span style={{ color: iconColor }} className={buttonStyles['button__right-unicode-arrow']} aria-hidden>\n          {'  →'}\n        </span>\n      )}\n    </span>\n  );\n\n  return (\n    <>\n      {htmlMarkup === 'button' && (\n        <button\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          disabled={disabled}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          ref={hoverRef as React.ForwardedRef<HTMLButtonElement>}\n          tabIndex={tabIndex}\n          type={type}\n          {...rest}\n        >\n          {renderbuttonContentWrapper()}\n        </button>\n      )}\n      {htmlMarkup === 'a' && (\n        <a\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          href={href}\n          target={target}\n          rel={target === '_blank' ? 'noopener noreferrer' : props.rel}\n          ref={hoverRef as React.ForwardedRef<HTMLAnchorElement>}\n          tabIndex={tabIndex}\n          {...restProps}\n        >\n          {renderbuttonContentWrapper()}\n        </a>\n      )}\n    </>\n  );\n});\n\nexport default Button;\n"],"names":["getIconColor","fill","borderless","disabled","concept","ondark","mobile","getColor","getLargeIconSize","large","IconSize","checkOnlyIconAria","onlyIcon","ariaLabel","devEnv","Button","React","props","ref","id","children","wrapperClassName","className","arrow","ellipsis","fluid","htmlMarkup","onColor","onBlur","onClick","size","variant","href","tabIndex","testId","target","type","textPosition","restProps","leftIcon","rightIcon","restChildren","useIcons","hoverRef","isHovered","useHover","buttonContentRef","useRef","bothIcons","onDark","useBreakpoint","breakpoints","destructive","outlineVariant","borderlessVariant","iconColor","hasArrow","hasUURightArrow","rest","buttonWrapperClasses","classNames","buttonStyles","buttonClasses","buttonTextClasses","diagonalClasses","useEffect","isTest","isProd","renderIcon","iconElement","iconSize","iconClassName","renderButtonContent","jsxs","jsx","renderbuttonContentWrapper","Icon","ArrowRight","Fragment","AnalyticsId"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import React, { AriaAttributes, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from './../Icon';\nimport { HTMLButtonProps, HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { BaseIconElement, useIcons } from '../../hooks/useIcons';\nimport { getColor } from '../../theme/currys/color';\nimport { breakpoints } from '../../theme/grid';\nimport { isTest, isProd } from '../../utils/environment';\nimport ArrowRight from '../Icons/ArrowRight';\n\nimport buttonStyles from './styles.module.scss';\n\nexport type ButtonConcept = 'normal' | 'destructive';\nexport type ButtonVariant = 'fill' | 'outline' | 'borderless';\nexport type ButtonSize = 'medium' | 'large';\nexport type ButtonOnColor = 'onlight' | 'ondark';\nexport type ButtonTags = 'button' | 'a';\nexport type ButtonArrows = 'icon' | 'accessibility-character';\nexport type ButtonTextPosition = 'left' | 'centered';\n\nexport interface ButtonProps extends HTMLButtonProps, HTMLAnchorProps, AriaAttributes {\n  /** Sets the aria-label of the button, use when the button only includes an icon */\n  ariaLabel?: string;\n  /** Gives a unique id to the button */\n  id?: string;\n  /** Sets the content of the button. */\n  children: React.ReactNode;\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Enables an arrow icon to the right inside the button (Not available in borderless variant) */\n  arrow?: ButtonArrows;\n  /** Changes the intent of the button. Mostly changes the color profile. */\n  concept?: ButtonConcept;\n  /** Disables text wrapping and enables ellipsis. */\n  ellipsis?: boolean;\n  /** Makes the button scale to full width of its parent element. */\n  fluid?: boolean;\n  /** Changes the underlying element of the button. */\n  htmlMarkup?: ButtonTags;\n  /** Changes the button colors for different backgrounds. */\n  onColor?: ButtonOnColor;\n  /** Function that is called when the Button loses focus */\n  onBlur?: () => void;\n  /** Function that is called when clicked */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<{}> | React.KeyboardEvent<HTMLUListElement> | null) => void;\n  /** Changes the button colors for different backgrounds. (Large not available in borderless variant) */\n  size?: ButtonSize;\n  /** Changes the visual representation of the button. */\n  variant?: ButtonVariant;\n  /** Specifies the focus order relative to the other buttons or controls on the page  */\n  tabIndex?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Adds custom classes to the text */\n  textClassName?: string;\n  /** Sets the position of the text in the button - only applies when button is fluid */\n  textPosition?: ButtonTextPosition;\n  /** Button type. Default: button */\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n}\n\nconst getIconColor = (\n  fill: boolean,\n  borderless: boolean,\n  disabled: boolean,\n  concept: ButtonConcept,\n  ondark: boolean,\n  mobile: boolean\n): string => {\n  if (mobile && disabled) {\n    return !ondark || fill ? getColor('neutral', !borderless ? 700 : 500) : getColor('white');\n  }\n  if (disabled) {\n    return !ondark || fill ? getColor('neutral', 500) : `${getColor('white')}b3`;\n  }\n  if ((fill && !ondark) || (!fill && ondark)) {\n    return 'white';\n  }\n\n  return concept === 'normal' ? getColor('blueberry', 600) : getColor('cherry', 500);\n};\nconst getLargeIconSize = (large: boolean, mobile: boolean): IconSize => {\n  if (mobile && large) return IconSize.Small;\n  if (large) return IconSize.Medium;\n  return IconSize.XSmall;\n};\n\nconst checkOnlyIconAria = (onlyIcon: boolean, ariaLabel: string | undefined, devEnv: boolean): void => {\n  if (devEnv && onlyIcon && (ariaLabel === undefined || ariaLabel === '')) {\n    throw new Error('Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav');\n  }\n};\n\nconst Button = React.forwardRef(function ButtonForwardedRef(\n  props: ButtonProps,\n  ref: React.ForwardedRef<HTMLButtonElement | HTMLAnchorElement>\n) {\n  const {\n    ariaLabel,\n    id,\n    children,\n    wrapperClassName,\n    className,\n    arrow,\n    concept = 'normal',\n    disabled = false,\n    ellipsis = false,\n    fluid = false,\n    htmlMarkup = 'button',\n    onColor = 'onlight',\n    onBlur,\n    onClick,\n    size = 'medium',\n    variant = 'fill',\n    href,\n    tabIndex,\n    testId,\n    target,\n    type = 'button',\n    textClassName,\n    textPosition = 'left',\n    ...restProps\n  } = props;\n\n  const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));\n  const { hoverRef, isHovered } =\n    htmlMarkup === 'button'\n      ? useHover<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>)\n      : useHover<HTMLAnchorElement>(ref as React.RefObject<HTMLAnchorElement>);\n  const buttonContentRef = useRef<HTMLDivElement>(null);\n  const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;\n  const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;\n  const onDark = onColor === 'ondark';\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\n  const destructive = concept === 'destructive' && !disabled;\n  const outlineVariant = variant === 'outline';\n  const borderlessVariant = variant === 'borderless';\n  const iconColor = getIconColor(variant === 'fill', borderlessVariant, disabled, concept, onDark, mobile);\n  const hasArrow = arrow === 'icon' && !borderlessVariant;\n  const large = size === 'large' && !destructive && !borderlessVariant;\n  const hasUURightArrow = arrow === 'accessibility-character' && !fluid && !leftIcon && !rightIcon && !hasArrow && borderlessVariant;\n  const rest = { ...restProps };\n\n  const buttonWrapperClasses = classNames(\n    buttonStyles['button-wrapper'],\n    { [buttonStyles['button-wrapper--fluid']]: fluid || ellipsis },\n    wrapperClassName\n  );\n  const buttonClasses = classNames(\n    buttonStyles.button,\n    {\n      [buttonStyles['button--destructive']]: destructive,\n      [buttonStyles['button--normal']]: !large,\n      [buttonStyles['button--large']]: large,\n      [buttonStyles['button--outline']]: outlineVariant,\n      [buttonStyles['button--borderless']]: borderlessVariant,\n      [buttonStyles['button--left-icon']]: leftIcon && !onlyIcon,\n      [buttonStyles['button--right-icon']]: rightIcon && !onlyIcon,\n      [buttonStyles['button--both-icons']]: bothIcons,\n      [buttonStyles['button--only-icon']]: onlyIcon,\n      [buttonStyles['button--arrow']]: hasArrow,\n      [buttonStyles['button--on-dark']]: onDark,\n    },\n    className\n  );\n  const buttonTextClasses = classNames(\n    buttonStyles['button__text'],\n    {\n      [buttonStyles['button__text--ellipsis']]: ellipsis,\n      [buttonStyles['button__text--centered']]: fluid && textPosition === 'centered',\n    },\n    textClassName\n  );\n  const diagonalClasses = classNames(buttonStyles['diagonal'], {\n    [buttonStyles['diagonal--on-dark']]: onDark,\n  });\n\n  useEffect(() => {\n    checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());\n  }, []);\n\n  const renderIcon = (iconElement: BaseIconElement | null, iconSize: number, iconClassName?: string): BaseIconElement | null => {\n    return iconElement\n      ? React.cloneElement(iconElement, {\n          size: iconSize,\n          color: iconElement?.props.color && !disabled ? iconElement.props.color : iconColor,\n          isHovered: !disabled && isHovered,\n          className: iconClassName,\n        })\n      : null;\n  };\n\n  const renderButtonContent = (): JSX.Element => {\n    return (\n      <span className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <span className={diagonalClasses}>\n            <span className={buttonStyles['diagonal__line']} />\n          </span>\n        )}\n        <span>{onlyIcon ? ariaLabel : restChildren}</span>\n      </span>\n    );\n  };\n\n  const renderbuttonContentWrapper = (): JSX.Element => (\n    <span className={buttonClasses}>\n      {renderIcon(leftIcon, getLargeIconSize(large, mobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n      {renderButtonContent()}\n      {hasArrow\n        ? renderIcon(\n            <Icon svgIcon={ArrowRight} />,\n            getLargeIconSize(large, mobile),\n            classNames(buttonStyles['button__arrow'], { [buttonStyles['button__arrow--both-icons']]: bothIcons })\n          )\n        : renderIcon(rightIcon, getLargeIconSize(large, mobile), buttonStyles['button__right-icon'])}\n      {hasUURightArrow && (\n        <span style={{ color: iconColor }} className={buttonStyles['button__right-unicode-arrow']} aria-hidden>\n          {'  →'}\n        </span>\n      )}\n    </span>\n  );\n\n  return (\n    <>\n      {htmlMarkup === 'button' && (\n        <button\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          disabled={disabled}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          ref={hoverRef as React.ForwardedRef<HTMLButtonElement>}\n          tabIndex={tabIndex}\n          type={type}\n          {...rest}\n        >\n          {renderbuttonContentWrapper()}\n        </button>\n      )}\n      {htmlMarkup === 'a' && (\n        <a\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          href={href}\n          target={target}\n          rel={target === '_blank' ? 'noopener noreferrer' : props.rel}\n          ref={hoverRef as React.ForwardedRef<HTMLAnchorElement>}\n          tabIndex={tabIndex}\n          {...restProps}\n        >\n          {renderbuttonContentWrapper()}\n        </a>\n      )}\n    </>\n  );\n});\n\nexport default Button;\n"],"names":["getIconColor","fill","borderless","disabled","concept","ondark","mobile","getColor","getLargeIconSize","large","IconSize","checkOnlyIconAria","onlyIcon","ariaLabel","devEnv","Button","React","props","ref","id","children","wrapperClassName","className","arrow","ellipsis","fluid","htmlMarkup","onColor","onBlur","onClick","size","variant","href","tabIndex","testId","target","type","textClassName","textPosition","restProps","leftIcon","rightIcon","restChildren","useIcons","hoverRef","isHovered","useHover","buttonContentRef","useRef","bothIcons","onDark","useBreakpoint","breakpoints","destructive","outlineVariant","borderlessVariant","iconColor","hasArrow","hasUURightArrow","rest","buttonWrapperClasses","classNames","buttonStyles","buttonClasses","buttonTextClasses","diagonalClasses","useEffect","isTest","isProd","renderIcon","iconElement","iconSize","iconClassName","renderButtonContent","jsxs","jsx","renderbuttonContentWrapper","Icon","ArrowRight","Fragment","AnalyticsId"],"mappings":"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"}

package/CHANGELOG.md

@@ -1,3 +1,50 @@
+## [9.0.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv8.8.0&targetVersion=GTv9.0.0) (2024-11-05)
+
+## 9.0.0-beta.3 (2024-10-29)
+
+## 9.0.0-beta.2 (2024-10-29)
+
+## 9.0.0-beta.1 (2024-10-25)
+
+### Features
+
+- legg til invalidFormatErrorMessage som parameter i valideringsfunksjoner
+  ([2270650](https://github.com/helsenorge/designsystem/commit/22706507750a5968d9998b5430430b8de3b75683)), closes
+  [#333981](https://github.com/helsenorge/designsystem/issues/333981)
+- **slider:** legger til validering, og ref og endre signatur til onchange
+  ([5d5148a](https://github.com/helsenorge/designsystem/commit/5d5148ae5833c463f4bb7069ee704bc44d44d30f)), closes
+  [#329653](https://github.com/helsenorge/designsystem/issues/329653)
+
+## 9.0.0-beta.0 (2024-10-17)
+
+### Features
+
+- endre fra mode til oncolor ([3491c74](https://github.com/helsenorge/designsystem/commit/3491c7438b743e4e05d78ddd130a5f3797b5b55a)), closes
+  [#331833](https://github.com/helsenorge/designsystem/issues/331833)
+- validate gir skjema komponenter spacing
+  ([c984428](https://github.com/helsenorge/designsystem/commit/c98442817d8f4a799e7c1d6a473dd215148ca7cd)), closes
+  [#331167](https://github.com/helsenorge/designsystem/issues/331167)
+- **expanderlist:** fjern sticky mulighet
+  ([c0b7df9](https://github.com/helsenorge/designsystem/commit/c0b7df9eeb186f74de16b9e7d7f11601e0e5794b)), closes
+  [#332677](https://github.com/helsenorge/designsystem/issues/332677)
+- **expanderlist:** nytt design ([eb4d0f3](https://github.com/helsenorge/designsystem/commit/eb4d0f36d53401764033678dd571a10b481227e4)),
+  closes [#332677](https://github.com/helsenorge/designsystem/issues/332677)
+- **sharingstatus:** fjern fargevalg blueberry og banana
+  ([26db632](https://github.com/helsenorge/designsystem/commit/26db6326baeae2f7868d34b5a085c76a022e9345)), closes
+  [#328894](https://github.com/helsenorge/designsystem/issues/328894)
+- **tabs:** designendringer for mobiltilpasning
+  ([8ba1309](https://github.com/helsenorge/designsystem/commit/8ba13094a038b3077c07c870e1cb46ace0597f85)), closes
+  [#331142](https://github.com/helsenorge/designsystem/issues/331142)
+
+### Bug Fixes
+
+- ikke vis fadeout om siste tab er valgt
+  ([f0fe5a9](https://github.com/helsenorge/designsystem/commit/f0fe5a9ee1d928a0ae093bbed0909c3bce951498)), closes
+  [#331142](https://github.com/helsenorge/designsystem/issues/331142)
+- **dropdown:** import av feil oncolor
+  ([f305cae](https://github.com/helsenorge/designsystem/commit/f305caea3c7cdcf4d312bc0f3b6af1d839a0aaca)), closes
+  [#331833](https://github.com/helsenorge/designsystem/issues/331833)
+
 ## [8.8.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv8.7.0&targetVersion=GTv8.8.0) (2024-11-04)
 
 ### Features
@@ -1815,12 +1862,12 @@ Dette er fordi vi skal kunne dynamisk importere alt som ligger i Icons, så da b
 
 ### Bug Fixes
 
-- økt kontrast på understreking av lenker
-  ([50b7fa4](https://github.com/helsenorge/designsystem/commit/50b7fa47fb44cb7d75fb877bd53e2309b35e1e21)), closes
-  [#229049](https://github.com/helsenorge/designsystem/issues/229049)
 - panel har avstand fra tittel til badge
   ([09034c4](https://github.com/helsenorge/designsystem/commit/09034c4844408c7cfe8f65d7a1a0d82a7828c2ef)), closes
   [#282359](https://github.com/helsenorge/designsystem/issues/282359)
+- økt kontrast på understreking av lenker
+  ([50b7fa4](https://github.com/helsenorge/designsystem/commit/50b7fa47fb44cb7d75fb877bd53e2309b35e1e21)), closes
+  [#229049](https://github.com/helsenorge/designsystem/issues/229049)
 
 ## [1.2.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv1.2.1&targetVersion=GTv1.2.2) (2022-08-31)
 

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":";;;;;;;;;;;;;AAkBY,IAAAA,sBAAAA,OACVA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA;AAoCZ,MAAMC,KAAoC,CAASC,MAAA;AAC3C,QAAA;AAAA,IACJ,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,SAASC;AAAA,IACT,UAAAC,IAAW;AAAA,IACX,cAAAC,IAAe;AAAA,IACf,QAAAC,IAAS;AAAA,IACT,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,0BAAAC,IAA2B;AAAA,IAC3B,QAAAC,IAASC,EAAO;AAAA,EACd,IAAAd,GACE,CAACe,GAAYC,CAAa,IAAIC,EAAUV,GAAUI,CAAQ,GAC1DO,IAAcC,EAAuB,IAAI,GACzCC,IAAaD,EAA0B,IAAI,GAC3C,EAAE,WAAAE,EAAA,IAAcC,EAASF,CAAU,GACnC,EAAE,iBAAAG,GAAiB,iBAAAC,GAAiB,cAAAC,GAAc,cAAAC,MAAiBC,EAAUT,GAAaE,CAAU,GAEpGQ,IAAWnB,KAAUM,KAAcQ,GAEnCM,IAAgB,CAACC,MACpB,gBAAAC,EAAA,QAAA,EAAK,WAAWC,EAAWC,EAAO,gBAAmBA,EAAO,mBAAmBH,CAAK,EAAE,CAAC,GACtF,UAAC,gBAAAC,EAAAG,GAAA,EAAK,SAASnB,IAAaoB,IAAYC,GAAa,MAAMC,EAAS,QAAQ,WAAAhB,EAAsB,CAAA,EACpG,CAAA,GAGIiB,IAAmBN;AAAA,IACvBC,EAAO;AAAA,IACP9B,MAAS,WAAsB8B,EAAO,sBAAsB9B,CAAI,EAAE;AAAA,IAClEA,MAAS,WAAsB8B,EAAO,sBAAsB7B,KAAS,SAAS,EAAE;AAAA,IAChFD,MAAS,WAAsBG,KAAQ2B,EAAO,yBAAyB;AAAA,IACvElB,KAAckB,EAAO,6BAA6B;AAAA,IAClDL,KAAY,CAACJ,KAAmBS,EAAO,2BAA2B;AAAA,EAAA,GAG9DM,IAAgB,MACpB,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAWF;AAAA,MACX,OAAO;AAAA,QACL,QAAQjB,KAAaO,IAAWf,IAAS;AAAA,QACzC,OAAOe,KAAYF,IAAe,GAAGA,CAAY,OAAO;AAAA,MAC1D;AAAA,MACA,iBAAeX;AAAA,MACf,KAAKK;AAAA,MACL,SAAS,MAAYJ,EAAc,CAACD,CAAU;AAAA,MAC9C,eAAaL;AAAA,MACb,oBAAkB+B,EAAY;AAAA,MAE7B,UAAA;AAAA,QAAStC,MAAA,WAAsB0B,EAAc,MAAM;AAAA,QACnDvB,KACC,gBAAAyB,EAAC,QAAK,EAAA,WAAWC,EAAWC,EAAO,gBAAmBA,EAAO,sBAAsB,CAAC,GACjF,UAAA,OAAO3B,KAAS,WACf,gBAAAyB,EAACW,GAAS,EAAA,UAAUpC,GAAM,MAAM+B,EAAS,QAAQ,WAAAhB,GAAsB,IAEvE,gBAAAU,EAACG,GAAK,EAAA,SAAS5B,GAAM,MAAM+B,EAAS,QAAQ,WAAAhB,EAAsB,CAAA,GAEtE;AAAA,QAEDpB;AAAA,QACAE,MAAS,WAAsB0B,EAAc,OAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAInDc,IAAkBX;AAAA,IACtBC,EAAO;AAAA,IACPlB,KAAckB,EAAO,4BAA4B;AAAA,IACjDL,KAAY,CAACJ,KAAmBS,EAAO,0BAA0B;AAAA,EAAA,GAG7DW,IAAe,MACnB,gBAAAJ;AAAA,IAACK;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,WAAWF;AAAA,MACX,iBAAe5B;AAAA,MACf,KAAKK;AAAA,MACL,SAAS,MAAYJ,EAAc,CAACD,CAAU;AAAA,MAC9C,QAAAL;AAAA,MACA,oBAAkB+B,EAAY;AAAA,MAE9B,UAAA;AAAA,QAAA,gBAAAV,EAACG,KAAK,SAASnB,IAAaoB,IAAYC,GAAa,MAAMC,EAAS,QAAQ;AAAA,QAC3EpC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAIC6C,IAAgB,MAAuB;AACvC,QAAA,CAAClC,KAA4B,CAACG;AACzB,aAAA;AAGT,UAAMgC,IAAmBf;AAAA,MACvBC,EAAO;AAAA,MACPA,EAAO,sBAAsB9B,CAAI,EAAE;AAAA,MACnCA,MAAS,WAAsB8B,EAAO,sBAAsB7B,KAAS,SAAS,EAAE;AAAA,MAChFD,MAAS,WAAsBG,KAAQ2B,EAAO,yBAAyB;AAAA,MACvElB,KAAckB,EAAO,6BAA6B;AAAA,MAClD9B,MAAS,WAAsB,CAACK,KAAgByB,EAAO,gCAAgC;AAAA,MACvF5B;AAAA,IAAA;AAGF,WAAQ,gBAAA0B,EAAA,OAAA,EAAI,WAAWgB,GAAmB,UAAA7C,EAAS,CAAA;AAAA,EAAA;AAInD,SAAA,gBAAAsC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWP,EAAO;AAAA,MAClB,KAAKf;AAAA,MACL,OAAO,EAAE,YAAYU,KAAYH,IAAe,GAAGA,CAAY,OAAO,OAAU;AAAA,MAE/E,UAAA;AAAA,QAAStB,MAAA,UAAqBoC,EAAc,IAAIK,EAAa;AAAA,QAC7DE,EAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGrB;"}
+{"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/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/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 */

package/components/Button/styles.module.scss

@@ -4,6 +4,7 @@
 @import '../../scss/palette';
 @import '../../scss/font-settings';
 @import '../../scss/screen-reader';
+@import '../../scss/supernova/styles/colors';
 
 $dark-mode-disabled-transparrent: #ffffffb3;
 $with-icons: // icon-class, size-class, padding-left, padding-right, padding-left desktop, padding-right desktop, svg-margin-left, svg-margin-right, svg-margin-left desktop, svg-margin-right desktop
@@ -20,6 +21,18 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   'both-icons' 'normal' getSpacer(xs) getSpacer(xs) getSpacer(xs) getSpacer(xs) 0 0 0 0,
   'both-icons' 'large' getSpacer(xs) getSpacer(xs) getSpacer(xs) getSpacer(xs) 0 0 0 0;
 
+// Brukes til å aktivere hover styling uten at button hovres
+@mixin outline-borderless-hover {
+  @include outline-borderless-background(
+    var(--color-action-background-transparent-onlight-hover),
+    var(--color-action-background-transparent-onlight-hover)
+  );
+}
+
+@mixin outline-borderless-text-hover {
+  @include text-color(var(--color-action-text-onlight-hover), var(--color-action-text-onlight-hover));
+}
+
 @mixin focus-shadow {
   box-shadow: 0 0 0 getSpacer(3xs) $black;
 }
@@ -28,11 +41,11 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   box-shadow: 0 0 0 getSpacer(3xs) $white;
 }
 
-@mixin outline-borderless($background-color) {
-  background-color: transparent;
+@mixin outline-borderless-background($background-color, $hover-background-color) {
+  background-color: $background-color;
 
   &:hover {
-    background-color: $background-color;
+    background-color: $hover-background-color;
   }
 
   :disabled > & {
@@ -57,9 +70,13 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   }
 }
 
-@mixin outline-text($color) {
+@mixin text-color($color, $hover-color) {
   color: $color;
 
+  :hover > & {
+    color: $hover-color;
+  }
+
   :disabled > & {
     @media (min-width: map.get($grid-breakpoints, md)) {
       color: $neutral700;
@@ -67,14 +84,6 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   }
 }
 
-@mixin borderless-text($color) {
-  color: $color;
-
-  :disabled > & {
-    color: $neutral700;
-  }
-}
-
 @mixin fill-on-dark($background-color) {
   background-color: $white;
 
@@ -113,7 +122,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 
 @mixin on-dark {
   &--on-dark {
-    @include fill-on-dark($blueberry50);
+    @include fill-on-dark(var(--color-action-background-ondark-hover));
   }
   &--on-dark#{&}--destructive {
     @include fill-on-dark($cherry50);
@@ -272,11 +281,11 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 
   &--outline,
   &--borderless {
-    @include outline-borderless(rgba(18, 111, 135, 0.1));
+    @include outline-borderless-background(transparent, var(--color-action-background-transparent-onlight-hover));
   }
   &--outline#{&}--destructive,
   &--borderless#{&}--destructive {
-    @include outline-borderless($cherry50);
+    @include outline-borderless-background(transparent, $cherry50);
   }
 
   &--outline {
@@ -341,19 +350,13 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   }
 
   /* stylelint-disable-next-line */
-  &--outline &__text {
-    @include outline-text($blueberry600);
-  }
-  &--outline#{&}--destructive &__text {
-    @include outline-text($cherry600);
-  }
-
-  /* stylelint-disable-next-line */
+  &--outline &__text,
   &--borderless &__text {
-    @include borderless-text($blueberry600);
+    @include text-color(var(--color-action-text-onlight), var(--color-action-text-onlight-hover));
   }
+  &--outline#{&}--destructive &__text,
   &--borderless#{&}--destructive &__text {
-    @include borderless-text($cherry600);
+    @include text-color($cherry600, $cherry700);
   }
 
   /* stylelint-disable-next-line */

package/components/Expander/styles.module.scss

@@ -5,6 +5,7 @@
 @import '../../scss/palette';
 @import '../../scss/font-settings';
 @import '../../scss/supernova/styles/colors';
+@import '../Button/styles.module';
 
 .expander {
   position: initial;
@@ -37,15 +38,15 @@
     padding-right: getSpacer(s);
     text-align: left;
 
-    &:hover {
-      background-color: var(--color-action-background-transparent-onlight-hover);
-    }
-
     &--expanded {
-      background-color: var(--color-action-background-transparent-onlight-hover);
+      @include outline-borderless-hover;
     }
   }
 
+  &__button &__button__text {
+    @include outline-borderless-text-hover;
+  }
+
   &__trigger {
     $trigger: &;
 

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

@@ -1,6 +1,35 @@
 export type Styles = {
+  button: string;
+  button__arrow: string;
+  'button__arrow--both-icons': string;
+  'button__both-icons': string;
+  'button__left-icon': string;
+  'button__only-icon': string;
+  'button__right-icon': string;
+  'button__right-unicode-arrow': string;
+  button__text: string;
+  'button__text--centered': string;
+  'button__text--ellipsis': string;
+  'button--arrow': string;
+  'button--arrow--both-icons': string;
+  'button--borderless': string;
+  'button--both-icons': string;
+  'button--destructive': string;
+  'button--large': string;
+  'button--left-icon': string;
+  'button--normal': string;
+  'button--on-dark': string;
+  'button--only-icon': string;
+  'button--outline': string;
+  'button--right-icon': string;
+  'button-wrapper': string;
+  'button-wrapper--fluid': string;
+  diagonal: string;
+  diagonal__line: string;
+  'diagonal--on-dark': string;
   expander: string;
   expander__button: string;
+  expander__button__text: string;
   'expander__button--expanded': string;
   'expander__button--sticky': string;
   expander__content: string;

package/components/HelpPanel/index.js

@@ -1,24 +1,20 @@
-import { jsx as p } from "react/jsx-runtime";
-import t from "classnames";
-import { H as n } from "../../HighlightPanel.js";
-import i from "../Icons/HandWaving.js";
-import a from "./styles.module.scss";
-const N = ({ className: e, testId: s, size: l, children: o, title: r }) => {
-  const m = t(a["help-panel"], e);
-  return /* @__PURE__ */ p(
-    n,
-    {
-      className: m,
-      contentWrapperClassName: a["help-panel"],
-      testId: s,
-      size: l,
-      svgIcon: i,
-      title: r,
-      children: o
-    }
-  );
-};
+import { jsx as n } from "react/jsx-runtime";
+import { H as p } from "../../HighlightPanel.js";
+import l from "../Icons/HandWaving.js";
+import m from "./styles.module.scss";
+const H = ({ className: r, testId: e, size: o, children: t, title: a }) => /* @__PURE__ */ n(
+  p,
+  {
+    className: r,
+    contentWrapperClassName: m["help-panel"],
+    testId: e,
+    size: o,
+    svgIcon: l,
+    title: a,
+    children: t
+  }
+);
 export {
-  N as default
+  H as default
 };
 //# sourceMappingURL=index.js.map

package/components/HelpPanel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/HelpPanel/HelpPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport HighlightPanel, { HighlightPanelSize } from '../HighlightPanel';\nimport HandWaving from '../Icons/HandWaving';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightPanelSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets title if needed */\n  title?: string;\n}\n\nconst HelpPanel: React.FC<HelpPanelProps> = ({ className, testId, size, children, title }) => {\n  const helpPanelClassName = classNames(styles['help-panel'], className);\n\n  return (\n    <HighlightPanel\n      className={helpPanelClassName}\n      contentWrapperClassName={styles['help-panel']}\n      testId={testId}\n      size={size}\n      svgIcon={HandWaving}\n      title={title}\n    >\n      {children}\n    </HighlightPanel>\n  );\n};\n\nexport default HelpPanel;\n"],"names":["HelpPanel","className","testId","size","children","title","helpPanelClassName","classNames","styles","jsx","HighlightPanel","HandWaving"],"mappings":";;;;;AAsBM,MAAAA,IAAsC,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,MAAAC,GAAM,UAAAC,GAAU,OAAAC,QAAY;AAC5F,QAAMC,IAAqBC,EAAWC,EAAO,YAAY,GAAGP,CAAS;AAGnE,SAAA,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWJ;AAAA,MACX,yBAAyBE,EAAO,YAAY;AAAA,MAC5C,QAAAN;AAAA,MACA,MAAAC;AAAA,MACA,SAASQ;AAAA,MACT,OAAAN;AAAA,MAEC,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/HelpPanel/HelpPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport HighlightPanel, { HighlightPanelSize } from '../HighlightPanel';\nimport HandWaving from '../Icons/HandWaving';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightPanelSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets title if needed */\n  title?: string;\n}\n\nconst HelpPanel: React.FC<HelpPanelProps> = ({ className, testId, size, children, title }) => {\n  return (\n    <HighlightPanel\n      className={className}\n      contentWrapperClassName={styles['help-panel']}\n      testId={testId}\n      size={size}\n      svgIcon={HandWaving}\n      title={title}\n    >\n      {children}\n    </HighlightPanel>\n  );\n};\n\nexport default HelpPanel;\n"],"names":["HelpPanel","className","testId","size","children","title","jsx","HighlightPanel","styles","HandWaving"],"mappings":";;;;AAoBM,MAAAA,IAAsC,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,MAAAC,GAAM,UAAAC,GAAU,OAAAC,QAE9E,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,WAAAN;AAAA,IACA,yBAAyBO,EAAO,YAAY;AAAA,IAC5C,QAAAN;AAAA,IACA,MAAAC;AAAA,IACA,SAASM;AAAA,IACT,OAAAJ;AAAA,IAEC,UAAAD;AAAA,EAAA;AAAA;"}

package/components/Slider/Slider.d.ts

@@ -4,7 +4,7 @@ export type SliderStep = {
     label?: number | string;
     emojiUniCode?: string;
 };
-export interface SliderProps extends ErrorWrapperClassNameProps, Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'onChange' | 'onBlur'> {
+export interface SliderProps extends ErrorWrapperClassNameProps, Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'onChange' | 'onBlur'> {
     /** Activates Error style for the input */
     error?: boolean;
     /** Error text to show above the component */

package/components/Tabs/Tabs.d.ts

@@ -13,6 +13,8 @@ export interface TabsProps {
     className?: string;
     /** Sets the color of the tabs. Default: white */
     color?: TabsColors;
+    /** Sets wether the component should use the container-breakout class. Default: true */
+    containerBreakout?: boolean;
     /** Sets the background color of the tabs. Can only be used when the color is set to white. Default: onwhite */
     onColor?: TabsOnColor;
     /** Whether the tab list should be sticky */

package/components/Tabs/index.js

@@ -1,63 +1,65 @@
-import { jsxs as y, jsx as d } from "react/jsx-runtime";
-import b, { useState as i, useRef as v, useEffect as A } from "react";
-import S from "classnames";
-import { a as H, T as J } from "../../TabList.js";
-import { T as K } from "../../TabPanel.js";
-import { isMobileUA as O } from "../../utils/mobile.js";
+import { jsxs as A, jsx as d } from "react/jsx-runtime";
+import b, { useState as i, useRef as v, useEffect as N } from "react";
+import w from "classnames";
+import { a as J, T as K } from "../../TabList.js";
+import { T as O } from "../../TabPanel.js";
+import Q from "../../scss/layout.module.scss";
+import { isMobileUA as V } from "../../utils/mobile.js";
 import m from "./styles.module.scss";
-const Q = 75, V = ({
-  activeTab: E,
+const W = 75, Y = ({
+  activeTab: L,
   children: c,
-  className: M,
+  className: S,
   color: l = "white",
-  onColor: N = "onwhite",
-  sticky: g = !0,
+  containerBreakout: g = !0,
+  onColor: M = "onwhite",
+  sticky: k = !0,
   testId: D,
-  touchBehaviour: L = "none"
+  touchBehaviour: X = "none"
 }) => {
-  const X = E !== void 0, [P, U] = i(0), [u, j] = i(0), [h, k] = i(0), [F, s] = i(0), [I, f] = i(null), C = O(), n = v(null), r = v(null), $ = v(null);
+  const y = L !== void 0, [P, U] = i(0), [u, j] = i(0), [h, F] = i(0), [I, s] = i(0), [$, f] = i(null), C = V(), n = v(null), r = v(null), q = v(null);
   let R = "onwhite";
-  l === "white" && (R = N);
+  l === "white" && (R = M);
   const p = (e, o) => {
-    X || (U(e), e > o ? (s(0), z()) : e < o && (s(0), q()));
-  }, q = () => {
-    C && f("right");
+    y || (U(e), e > o ? (s(0), G()) : e < o && (s(0), z()));
   }, z = () => {
-    C && f("left");
+    C && f("right");
   }, G = () => {
+    C && f("left");
+  }, H = () => {
     f(null);
-  }, t = X ? E : P;
-  return A(() => {
+  }, t = y ? L : P;
+  return N(() => {
     const e = (a) => {
       j(a.touches[0].clientX);
     }, o = (a) => {
-      k(a.touches[0].clientX);
+      F(a.touches[0].clientX);
       const T = a.touches[0].clientX - u;
       t === 0 && T > 0 || t === b.Children.count(c) - 1 && T < 0 ? s(0) : s(T);
     }, x = () => {
-      Math.abs(h - u) >= Q && (h > u ? p(Math.max(0, t - 1), t) : p(Math.min(b.Children.count(c) - 1, t + 1), t)), s(0);
+      Math.abs(h - u) >= W && (h > u ? p(Math.max(0, t - 1), t) : p(Math.min(b.Children.count(c) - 1, t + 1), t)), s(0);
     };
-    return L === "swipe" && n.current && (n.current.addEventListener("touchstart", e), n.current.addEventListener("touchmove", o), n.current.addEventListener("touchend", x)), () => {
+    return X === "swipe" && n.current && (n.current.addEventListener("touchstart", e), n.current.addEventListener("touchmove", o), n.current.addEventListener("touchend", x)), () => {
       n.current && (n.current.removeEventListener("touchstart", e), n.current.removeEventListener("touchmove", o), n.current.removeEventListener("touchend", x));
     };
-  }, [L, u, h, t]), A(() => {
+  }, [X, u, h, t]), N(() => {
     const e = () => {
-      G();
+      H();
     };
     return r.current && r.current.addEventListener("animationend", e), () => {
       r.current && r.current.removeEventListener("animationend", e);
     };
-  }, []), /* @__PURE__ */ y("div", { className: M, "data-testid": D, children: [
-    /* @__PURE__ */ y(
+  }, []), /* @__PURE__ */ A("div", { className: w(S, g && Q["container-breakout"]), "data-testid": D, children: [
+    /* @__PURE__ */ A(
       "div",
       {
-        ref: $,
-        className: S(m["tab-list-wrapper"], {
-          [m["tab-list-wrapper--sticky"]]: g
+        ref: q,
+        className: w(m["tab-list-wrapper"], {
+          [m["tab-list-wrapper--sticky"]]: k
         }),
         children: [
           /* @__PURE__ */ d(
-            J,
+            K,
             {
               onTabListClick: (e) => p(e, t),
               selectedTab: t,
@@ -66,17 +68,17 @@ const Q = 75, V = ({
               children: c
             }
           ),
-          /* @__PURE__ */ d("div", { className: S(m["panel-wrapper"], m[`panel-wrapper--${l}`]) })
+          /* @__PURE__ */ d("div", { className: w(m["panel-wrapper"], m[`panel-wrapper--${l}`]) })
         ]
       }
     ),
-    /* @__PURE__ */ d("div", { ref: n, style: { marginTop: "-50px" }, children: /* @__PURE__ */ d(K, { ref: r, color: l, isFirst: t == 0, translateX: F, animate: I, children: b.Children.toArray(c)[t] }) })
+    /* @__PURE__ */ d("div", { ref: n, style: { marginTop: "-50px" }, children: /* @__PURE__ */ d(O, { ref: r, color: l, isFirst: t == 0, translateX: I, animate: $, children: b.Children.toArray(c)[t] }) })
   ] });
-}, w = V;
-w.displayName = "Tabs";
-w.Tab = H;
-w.Tab.displayName = "Tabs.Tab";
+}, E = Y;
+E.displayName = "Tabs";
+E.Tab = J;
+E.Tab.displayName = "Tabs.Tab";
 export {
-  w as default
+  E as default
 };
 //# sourceMappingURL=index.js.map

package/components/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport { PaletteNames } from '../../theme/palette';\nimport { isMobileUA } from '../../utils/mobile';\n\nimport styles from './styles.module.scss';\n\nexport type { TabProps } from './Tab';\nexport type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;\nexport type TabsOnColor = 'onblueberry' | 'onneutral' | 'onwhite';\nexport type TabsTouchBehaviour = 'swipe' | 'none';\n\nexport interface TabsProps {\n  children?: React.ReactNode;\n  /** Controlled state for Tabs component */\n  activeTab?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the color of the tabs. Default: white */\n  color?: TabsColors;\n  /** Sets the background color of the tabs. Can only be used when the color is set to white. Default: onwhite */\n  onColor?: TabsOnColor;\n  /** Whether the tab list should be sticky */\n  sticky?: boolean;\n  /** Determines how Tabs respons to touch events. */\n  touchBehaviour?: TabsTouchBehaviour;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst swipeDistanceThreshold = 75;\n\nconst TabsRoot: React.FC<TabsProps> = ({\n  activeTab,\n  children,\n  className,\n  color = 'white',\n  onColor = 'onwhite',\n  sticky = true,\n  testId,\n  touchBehaviour = 'none',\n}) => {\n  const isControlled = activeTab !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(0);\n  const [touchStartX, setTouchStartX] = useState(0);\n  const [touchEndX, setTouchEndX] = useState(0);\n  const [translateX, setTranslateX] = useState(0);\n  const [panelAnimation, setPanelAnimation] = useState<'left' | 'right' | null>(null);\n  const mobile = isMobileUA();\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabPanelRef = useRef<HTMLDivElement>(null);\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  let onColorUsed: TabsOnColor = 'onwhite';\n  if (color === 'white') {\n    onColorUsed = onColor;\n  }\n\n  const onValueChange = (newValue: number, oldValue: number): void => {\n    if (!isControlled) {\n      setUncontrolledValue(newValue);\n      if (newValue > oldValue) {\n        // make sure that the translateX is reset so the animation does not go outside the screen\n        setTranslateX(0);\n        onLeftSwipe();\n      } else if (newValue < oldValue) {\n        // make sure that the translateX is reset so the animation does not go outside the screen\n        setTranslateX(0);\n        onRightSwipe();\n      }\n    }\n  };\n\n  const onRightSwipe = (): void => {\n    mobile && setPanelAnimation('right');\n  };\n\n  const onLeftSwipe = (): void => {\n    mobile && setPanelAnimation('left');\n  };\n\n  const resetAnimation = (): void => {\n    setPanelAnimation(null);\n  };\n\n  const activeTabIndex = isControlled ? activeTab : uncontrolledValue;\n\n  useEffect(() => {\n    const handleTouchStart = (event: TouchEvent): void => {\n      setTouchStartX(event.touches[0].clientX);\n    };\n\n    const handleTouchMove = (event: TouchEvent): void => {\n      setTouchEndX(event.touches[0].clientX);\n      const newTranslateX = event.touches[0].clientX - touchStartX;\n\n      if (activeTabIndex === 0 && newTranslateX > 0) {\n        setTranslateX(0);\n      } else if (activeTabIndex === React.Children.count(children) - 1 && newTranslateX < 0) {\n        setTranslateX(0);\n      } else {\n        setTranslateX(newTranslateX);\n      }\n    };\n\n    const handleTouchEnd = (): void => {\n      const swipeDistance = Math.abs(touchEndX - touchStartX);\n      if (swipeDistance >= swipeDistanceThreshold) {\n        if (touchEndX > touchStartX) {\n          // User swiped right\n          onValueChange(Math.max(0, activeTabIndex - 1), activeTabIndex);\n        } else {\n          // User swiped left\n          onValueChange(Math.min(React.Children.count(children) - 1, activeTabIndex + 1), activeTabIndex);\n        }\n      }\n      setTranslateX(0);\n    };\n\n    if (touchBehaviour === 'swipe' && tabsRef.current) {\n      tabsRef.current.addEventListener('touchstart', handleTouchStart);\n      tabsRef.current.addEventListener('touchmove', handleTouchMove);\n      tabsRef.current.addEventListener('touchend', handleTouchEnd);\n    }\n    return () => {\n      if (tabsRef.current) {\n        tabsRef.current.removeEventListener('touchstart', handleTouchStart);\n        tabsRef.current.removeEventListener('touchmove', handleTouchMove);\n        tabsRef.current.removeEventListener('touchend', handleTouchEnd);\n      }\n    };\n  }, [touchBehaviour, touchStartX, touchEndX, activeTabIndex]);\n\n  useEffect(() => {\n    const handleAnimationEnd = (): void => {\n      resetAnimation();\n    };\n\n    if (tabPanelRef.current) {\n      tabPanelRef.current.addEventListener('animationend', handleAnimationEnd);\n    }\n\n    return () => {\n      if (tabPanelRef.current) {\n        tabPanelRef.current.removeEventListener('animationend', handleAnimationEnd);\n      }\n    };\n  }, []);\n\n  return (\n    <div className={className} data-testid={testId}>\n      <div\n        ref={tabListRef}\n        className={classNames(styles['tab-list-wrapper'], {\n          [styles['tab-list-wrapper--sticky']]: sticky,\n        })}\n      >\n        <TabList\n          onTabListClick={(index: number) => onValueChange(index, activeTabIndex)}\n          selectedTab={activeTabIndex}\n          color={color}\n          onColor={onColorUsed}\n        >\n          {children}\n        </TabList>\n        <div className={classNames(styles['panel-wrapper'], styles[`panel-wrapper--${color}`])}></div>\n      </div>\n      <div ref={tabsRef} style={{ marginTop: '-50px' }}>\n        <TabPanel ref={tabPanelRef} color={color} isFirst={activeTabIndex == 0} translateX={translateX} animate={panelAnimation}>\n          {React.Children.toArray(children)[activeTabIndex]}\n        </TabPanel>\n      </div>\n    </div>\n  );\n};\n\ntype TabsComponent = typeof TabsRoot & {\n  Tab: typeof Tab;\n};\nconst Tabs = TabsRoot as TabsComponent;\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n"],"names":["swipeDistanceThreshold","TabsRoot","activeTab","children","className","color","onColor","sticky","testId","touchBehaviour","isControlled","uncontrolledValue","setUncontrolledValue","useState","touchStartX","setTouchStartX","touchEndX","setTouchEndX","translateX","setTranslateX","panelAnimation","setPanelAnimation","mobile","isMobileUA","tabsRef","useRef","tabPanelRef","tabListRef","onColorUsed","onValueChange","newValue","oldValue","onLeftSwipe","onRightSwipe","resetAnimation","activeTabIndex","useEffect","handleTouchStart","event","handleTouchMove","newTranslateX","React","handleTouchEnd","handleAnimationEnd","jsxs","classNames","styles","jsx","TabList","index","TabPanel","Tabs","Tab"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport designsystemlayout from '../../scss/layout.module.scss';\nimport { PaletteNames } from '../../theme/palette';\nimport { isMobileUA } from '../../utils/mobile';\n\nimport styles from './styles.module.scss';\n\nexport type { TabProps } from './Tab';\nexport type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;\nexport type TabsOnColor = 'onblueberry' | 'onneutral' | 'onwhite';\nexport type TabsTouchBehaviour = 'swipe' | 'none';\n\nexport interface TabsProps {\n  children?: React.ReactNode;\n  /** Controlled state for Tabs component */\n  activeTab?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the color of the tabs. Default: white */\n  color?: TabsColors;\n  /** Sets wether the component should use the container-breakout class. Default: true */\n  containerBreakout?: boolean;\n  /** Sets the background color of the tabs. Can only be used when the color is set to white. Default: onwhite */\n  onColor?: TabsOnColor;\n  /** Whether the tab list should be sticky */\n  sticky?: boolean;\n  /** Determines how Tabs respons to touch events. */\n  touchBehaviour?: TabsTouchBehaviour;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst swipeDistanceThreshold = 75;\n\nconst TabsRoot: React.FC<TabsProps> = ({\n  activeTab,\n  children,\n  className,\n  color = 'white',\n  containerBreakout = true,\n  onColor = 'onwhite',\n  sticky = true,\n  testId,\n  touchBehaviour = 'none',\n}) => {\n  const isControlled = activeTab !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(0);\n  const [touchStartX, setTouchStartX] = useState(0);\n  const [touchEndX, setTouchEndX] = useState(0);\n  const [translateX, setTranslateX] = useState(0);\n  const [panelAnimation, setPanelAnimation] = useState<'left' | 'right' | null>(null);\n  const mobile = isMobileUA();\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabPanelRef = useRef<HTMLDivElement>(null);\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  let onColorUsed: TabsOnColor = 'onwhite';\n  if (color === 'white') {\n    onColorUsed = onColor;\n  }\n\n  const onValueChange = (newValue: number, oldValue: number): void => {\n    if (!isControlled) {\n      setUncontrolledValue(newValue);\n      if (newValue > oldValue) {\n        // make sure that the translateX is reset so the animation does not go outside the screen\n        setTranslateX(0);\n        onLeftSwipe();\n      } else if (newValue < oldValue) {\n        // make sure that the translateX is reset so the animation does not go outside the screen\n        setTranslateX(0);\n        onRightSwipe();\n      }\n    }\n  };\n\n  const onRightSwipe = (): void => {\n    mobile && setPanelAnimation('right');\n  };\n\n  const onLeftSwipe = (): void => {\n    mobile && setPanelAnimation('left');\n  };\n\n  const resetAnimation = (): void => {\n    setPanelAnimation(null);\n  };\n\n  const activeTabIndex = isControlled ? activeTab : uncontrolledValue;\n\n  useEffect(() => {\n    const handleTouchStart = (event: TouchEvent): void => {\n      setTouchStartX(event.touches[0].clientX);\n    };\n\n    const handleTouchMove = (event: TouchEvent): void => {\n      setTouchEndX(event.touches[0].clientX);\n      const newTranslateX = event.touches[0].clientX - touchStartX;\n\n      if (activeTabIndex === 0 && newTranslateX > 0) {\n        setTranslateX(0);\n      } else if (activeTabIndex === React.Children.count(children) - 1 && newTranslateX < 0) {\n        setTranslateX(0);\n      } else {\n        setTranslateX(newTranslateX);\n      }\n    };\n\n    const handleTouchEnd = (): void => {\n      const swipeDistance = Math.abs(touchEndX - touchStartX);\n      if (swipeDistance >= swipeDistanceThreshold) {\n        if (touchEndX > touchStartX) {\n          // User swiped right\n          onValueChange(Math.max(0, activeTabIndex - 1), activeTabIndex);\n        } else {\n          // User swiped left\n          onValueChange(Math.min(React.Children.count(children) - 1, activeTabIndex + 1), activeTabIndex);\n        }\n      }\n      setTranslateX(0);\n    };\n\n    if (touchBehaviour === 'swipe' && tabsRef.current) {\n      tabsRef.current.addEventListener('touchstart', handleTouchStart);\n      tabsRef.current.addEventListener('touchmove', handleTouchMove);\n      tabsRef.current.addEventListener('touchend', handleTouchEnd);\n    }\n    return () => {\n      if (tabsRef.current) {\n        tabsRef.current.removeEventListener('touchstart', handleTouchStart);\n        tabsRef.current.removeEventListener('touchmove', handleTouchMove);\n        tabsRef.current.removeEventListener('touchend', handleTouchEnd);\n      }\n    };\n  }, [touchBehaviour, touchStartX, touchEndX, activeTabIndex]);\n\n  useEffect(() => {\n    const handleAnimationEnd = (): void => {\n      resetAnimation();\n    };\n\n    if (tabPanelRef.current) {\n      tabPanelRef.current.addEventListener('animationend', handleAnimationEnd);\n    }\n\n    return () => {\n      if (tabPanelRef.current) {\n        tabPanelRef.current.removeEventListener('animationend', handleAnimationEnd);\n      }\n    };\n  }, []);\n\n  return (\n    <div className={classNames(className, containerBreakout && designsystemlayout['container-breakout'])} data-testid={testId}>\n      <div\n        ref={tabListRef}\n        className={classNames(styles['tab-list-wrapper'], {\n          [styles['tab-list-wrapper--sticky']]: sticky,\n        })}\n      >\n        <TabList\n          onTabListClick={(index: number) => onValueChange(index, activeTabIndex)}\n          selectedTab={activeTabIndex}\n          color={color}\n          onColor={onColorUsed}\n        >\n          {children}\n        </TabList>\n        <div className={classNames(styles['panel-wrapper'], styles[`panel-wrapper--${color}`])}></div>\n      </div>\n      <div ref={tabsRef} style={{ marginTop: '-50px' }}>\n        <TabPanel ref={tabPanelRef} color={color} isFirst={activeTabIndex == 0} translateX={translateX} animate={panelAnimation}>\n          {React.Children.toArray(children)[activeTabIndex]}\n        </TabPanel>\n      </div>\n    </div>\n  );\n};\n\ntype TabsComponent = typeof TabsRoot & {\n  Tab: typeof Tab;\n};\nconst Tabs = TabsRoot as TabsComponent;\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n"],"names":["swipeDistanceThreshold","TabsRoot","activeTab","children","className","color","containerBreakout","onColor","sticky","testId","touchBehaviour","isControlled","uncontrolledValue","setUncontrolledValue","useState","touchStartX","setTouchStartX","touchEndX","setTouchEndX","translateX","setTranslateX","panelAnimation","setPanelAnimation","mobile","isMobileUA","tabsRef","useRef","tabPanelRef","tabListRef","onColorUsed","onValueChange","newValue","oldValue","onLeftSwipe","onRightSwipe","resetAnimation","activeTabIndex","useEffect","handleTouchStart","event","handleTouchMove","newTranslateX","React","handleTouchEnd","handleAnimationEnd","jsxs","classNames","designsystemlayout","styles","jsx","TabList","index","TabPanel","Tabs","Tab"],"mappings":"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"}

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/helsenorge/designsystem.git"
   },
   "homepage": "https://helsenorge.design",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "author": "Helsenorge",
   "license": "MIT",
   "dependencies": {

package/scss/layout.module.scss

@@ -0,0 +1,14 @@
+@import './breakpoints';
+
+/*
+Denne filen er ment til å importeres som en css module:
+import designsystemlayout from './scss/layout.scss'
+<div className={designsystemlayout['container-breakout']}></div>
+*/
+
+.container-breakout {
+  // This is a copy of how bootstrap's row class sets margins inside a container
+  // https://github.com/twbs/bootstrap/blob/e5643aaa89eb67327a5b4abe7db976f0ea276b70/scss/mixins/_grid.scss#L16C1-L17C30
+  margin-right: -$grid-gutter-width * 0.5;
+  margin-left: -$grid-gutter-width * 0.5;
+}

package/scss/layout.module.scss.d.ts

@@ -0,0 +1,9 @@
+export type Styles = {
+  'container-breakout': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;