@helsenorge/designsystem-react 8.5.0 → 8.5.1

package/AnchorLink.js

@@ -0,0 +1,60 @@
+import { jsxs as l, Fragment as m, jsx as r } from "react/jsx-runtime";
+import I from "react";
+import N from "classnames";
+import { AnalyticsId as g, IconSize as C } from "./constants.js";
+import { useHover as x } from "./hooks/useHover.js";
+import { getColor as h } from "./theme/currys/color.js";
+import { I as R } from "./Icon.js";
+import _ from "./components/Icons/ArrowUpRight.js";
+import o from "./components/AnchorLink/styles.module.scss";
+const U = I.forwardRef((p, d) => {
+  const { id: f, href: k, children: b, className: u, target: e = "_self", htmlMarkup: n = "a", onClick: v, testId: y } = p, t = e === "_blank", { hoverRef: s, isHovered: A } = x(
+    d
+  ), a = N(o.anchorlink, u), c = {
+    id: f,
+    "data-testid": y,
+    "data-analyticsid": g.AnchorLink,
+    onClick: v
+  }, i = () => /* @__PURE__ */ l(m, { children: [
+    b,
+    t && /* @__PURE__ */ r(
+      R,
+      {
+        className: o.anchorlink__icon,
+        svgIcon: _,
+        color: h("blueberry", 600),
+        hoverColor: h("blueberry", 700),
+        size: C.XSmall,
+        isHovered: A
+      }
+    )
+  ] });
+  return /* @__PURE__ */ l(m, { children: [
+    n === "a" && /* @__PURE__ */ r(
+      "a",
+      {
+        href: k,
+        target: e,
+        className: a,
+        rel: t ? "noopener noreferrer" : void 0,
+        ref: s,
+        ...c,
+        children: i()
+      }
+    ),
+    n === "button" && /* @__PURE__ */ r(
+      "button",
+      {
+        type: "button",
+        className: o["anchorlink-wrapper"],
+        ref: s,
+        ...c,
+        children: /* @__PURE__ */ r("span", { className: a, children: i() })
+      }
+    )
+  ] });
+});
+export {
+  U as A
+};
+//# sourceMappingURL=AnchorLink.js.map

package/AnchorLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnchorLink.js","sources":["../src/components/AnchorLink/AnchorLink.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { getColor } from '../../theme/currys';\nimport Icon, { IconSize } from '../Icon';\nimport ArrowUpRight from '../Icons/ArrowUpRight';\n\nimport AnchorLinkStyles from './styles.module.scss';\n\nexport type AnchorLinkTargets = '_self' | '_blank' | '_parent';\n\nexport type AnchorLinkTags = 'a' | 'button';\n\nexport type AnchorLinkOnClickEvent =\n  | React.MouseEvent<HTMLElement, MouseEvent>\n  | React.FormEvent<{}>\n  | React.KeyboardEvent<HTMLUListElement>\n  | null;\n\nexport interface AnchorLinkProps {\n  /** Sets the content of the <a> tag */\n  children: React.ReactNode;\n  /** URL to link to */\n  href?: string;\n  /** Gives a unique id to the anchor-link :) */\n  id?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the target type of the <a> tag. _blank adds an arrow icon at the end of the link */\n  target?: AnchorLinkTargets;\n  /** HTML markup for anchor link. Default: a */\n  htmlMarkup?: AnchorLinkTags;\n  /** Function that is called when clicked */\n  onClick?: (e?: AnchorLinkOnClickEvent) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst AnchorLink = React.forwardRef<HTMLAnchorElement | HTMLButtonElement, AnchorLinkProps>((props, ref) => {\n  const { id, href, children, className, target = '_self', htmlMarkup = 'a', onClick, testId } = props;\n  const external = target === '_blank';\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement | HTMLAnchorElement>(\n    ref as React.RefObject<HTMLButtonElement | HTMLAnchorElement>\n  );\n  const anchorClasses = classNames(AnchorLinkStyles.anchorlink, className);\n\n  const commonProps = {\n    id,\n    ['data-testid']: testId,\n    ['data-analyticsid']: AnalyticsId.AnchorLink,\n    onClick,\n  };\n\n  const renderContent = () => (\n    <>\n      {children}\n      {external && (\n        <Icon\n          className={AnchorLinkStyles.anchorlink__icon}\n          svgIcon={ArrowUpRight}\n          color={getColor('blueberry', 600)}\n          hoverColor={getColor('blueberry', 700)}\n          size={IconSize.XSmall}\n          isHovered={isHovered}\n        />\n      )}\n    </>\n  );\n\n  return (\n    <>\n      {htmlMarkup === 'a' && (\n        <a\n          href={href}\n          target={target}\n          className={anchorClasses}\n          rel={external ? 'noopener noreferrer' : undefined}\n          ref={hoverRef as React.RefObject<HTMLAnchorElement>}\n          {...commonProps}\n        >\n          {renderContent()}\n        </a>\n      )}\n      {htmlMarkup === 'button' && (\n        <button\n          type=\"button\"\n          className={AnchorLinkStyles['anchorlink-wrapper']}\n          ref={hoverRef as React.RefObject<HTMLButtonElement>}\n          {...commonProps}\n        >\n          <span className={anchorClasses}>{renderContent()}</span>\n        </button>\n      )}\n    </>\n  );\n});\n\nexport default AnchorLink;\n"],"names":["AnchorLink","React","props","ref","id","href","children","className","target","htmlMarkup","onClick","testId","external","hoverRef","isHovered","useHover","anchorClasses","classNames","AnchorLinkStyles","commonProps","AnalyticsId","renderContent","jsxs","Fragment","jsx","Icon","ArrowUpRight","getColor","IconSize"],"mappings":";;;;;;;;;AAyCA,MAAMA,IAAaC,EAAM,WAAmE,CAACC,GAAOC,MAAQ;AACpG,QAAA,EAAE,IAAAC,GAAI,MAAAC,GAAM,UAAAC,GAAU,WAAAC,GAAW,QAAAC,IAAS,SAAS,YAAAC,IAAa,KAAK,SAAAC,GAAS,QAAAC,EAAA,IAAWT,GACzFU,IAAWJ,MAAW,UACtB,EAAE,UAAAK,GAAU,WAAAC,EAAA,IAAcC;AAAA,IAC9BZ;AAAA,EAAA,GAEIa,IAAgBC,EAAWC,EAAiB,YAAYX,CAAS,GAEjEY,IAAc;AAAA,IAClB,IAAAf;AAAA,IACC,eAAgBO;AAAA,IAChB,oBAAqBS,EAAY;AAAA,IAClC,SAAAV;AAAA,EAAA,GAGIW,IAAgB,MAEjB,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAAjB;AAAA,IACAM,KACC,gBAAAY;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAWP,EAAiB;AAAA,QAC5B,SAASQ;AAAA,QACT,OAAOC,EAAS,aAAa,GAAG;AAAA,QAChC,YAAYA,EAAS,aAAa,GAAG;AAAA,QACrC,MAAMC,EAAS;AAAA,QACf,WAAAd;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ,EAAA,CAAA;AAGF,SAEK,gBAAAQ,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAAd,MAAe,OACd,gBAAAe;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAAnB;AAAA,QACA,QAAAG;AAAA,QACA,WAAWQ;AAAA,QACX,KAAKJ,IAAW,wBAAwB;AAAA,QACxC,KAAKC;AAAA,QACJ,GAAGM;AAAA,QAEH,UAAcE,EAAA;AAAA,MAAA;AAAA,IACjB;AAAA,IAEDZ,MAAe,YACd,gBAAAe;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAWN,EAAiB,oBAAoB;AAAA,QAChD,KAAKL;AAAA,QACJ,GAAGM;AAAA,QAEJ,UAAC,gBAAAK,EAAA,QAAA,EAAK,WAAWR,GAAgB,eAAgB;AAAA,MAAA;AAAA,IACnD;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;"}

package/Avatar.js

@@ -0,0 +1,34 @@
+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 { palette as o } from "./theme/palette.js";
+import { I as x } from "./Icon.js";
+import I 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);
+  return /* @__PURE__ */ m(
+    "span",
+    {
+      className: v(
+        a.avatar,
+        l && a["avatar--selected"],
+        s === "black" && a["avatar--black"],
+        e === "xsmall" && a["avatar--xsmall"],
+        e === "small" && a["avatar--small"],
+        i
+      ),
+      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
+    }
+  );
+});
+export {
+  C as A,
+  A as a
+};
+//# sourceMappingURL=Avatar.js.map

package/Avatar.js.map

@@ -0,0 +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;"}

package/Badge.js

@@ -0,0 +1,31 @@
+import { jsx as o } from "react/jsx-runtime";
+import f from "react";
+import b from "classnames";
+import { N as g } from "./NotificationBadge.js";
+import { IconSize as y, AnalyticsId as s } from "./constants.js";
+import a from "./components/Badge/styles.module.scss";
+const S = f.forwardRef(function(d, n) {
+  const { children: c, className: r = "", color: e = "blueberry", testId: t, type: l = "string", notificationVariant: i = "info" } = d, m = b(
+    a.badge,
+    {
+      [a["badge--blueberry"]]: e === "blueberry",
+      [a["badge--cherry"]]: e === "cherry",
+      [a["badge--neutral"]]: e === "neutral"
+    },
+    r
+  );
+  return l === "notification" && i !== void 0 ? /* @__PURE__ */ o(
+    g,
+    {
+      variant: i,
+      size: y.XSmall,
+      className: r,
+      testId: t,
+      "data-analyticsid": s.Badge
+    }
+  ) : /* @__PURE__ */ o("span", { className: m, ref: n, "data-testid": t, "data-analyticsid": s.Badge, children: c });
+});
+export {
+  S as B
+};
+//# sourceMappingURL=Badge.js.map

package/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sources":["../src/components/Badge/Badge.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport NotificationBadge, { BadgeNotificationVariant } from './NotificationBadge';\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\n\nimport badgeStyles from './styles.module.scss';\n\nexport type BadgeColors = Extract<PaletteNames, 'blueberry' | 'cherry' | 'neutral'>;\nexport type BadgeChildren = string | number;\nexport type BadgeVariant = 'string' | 'notification';\n\nexport interface BadgeProps {\n  /** Sets the content of the badge. */\n  children?: BadgeChildren;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the badge background color. */\n  color?: BadgeColors;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Changes the type of the badge. Default: string */\n  type?: BadgeVariant;\n  /** Type of notification badge. Only works if type is 'notification'. */\n  notificationVariant?: BadgeNotificationVariant;\n}\n\nexport type BadgeType = React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLElement>>;\nconst Badge: BadgeType = React.forwardRef(function BadgeForwardedRef(props: BadgeProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { children, className = '', color = 'blueberry', testId, type = 'string', notificationVariant = 'info' } = props;\n  const badgeClasses = classNames(\n    badgeStyles.badge,\n    {\n      [badgeStyles['badge--blueberry']]: color === 'blueberry',\n      [badgeStyles['badge--cherry']]: color === 'cherry',\n      [badgeStyles['badge--neutral']]: color === 'neutral',\n    },\n    className\n  );\n\n  if (type === 'notification' && notificationVariant !== undefined) {\n    return (\n      <NotificationBadge\n        variant={notificationVariant}\n        size={IconSize.XSmall}\n        className={className}\n        testId={testId}\n        data-analyticsid={AnalyticsId.Badge}\n      />\n    );\n  }\n\n  return (\n    <span className={badgeClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Badge}>\n      {children}\n    </span>\n  );\n});\n\nexport default Badge;\n"],"names":["Badge","React","props","ref","children","className","color","testId","type","notificationVariant","badgeClasses","classNames","badgeStyles","jsx","NotificationBadge","IconSize","AnalyticsId"],"mappings":";;;;;;AA8BA,MAAMA,IAAmBC,EAAM,WAAW,SAA2BC,GAAmBC,GAAsC;AACtH,QAAA,EAAE,UAAAC,GAAU,WAAAC,IAAY,IAAI,OAAAC,IAAQ,aAAa,QAAAC,GAAQ,MAAAC,IAAO,UAAU,qBAAAC,IAAsB,OAAA,IAAWP,GAC3GQ,IAAeC;AAAA,IACnBC,EAAY;AAAA,IACZ;AAAA,MACE,CAACA,EAAY,kBAAkB,CAAC,GAAGN,MAAU;AAAA,MAC7C,CAACM,EAAY,eAAe,CAAC,GAAGN,MAAU;AAAA,MAC1C,CAACM,EAAY,gBAAgB,CAAC,GAAGN,MAAU;AAAA,IAC7C;AAAA,IACAD;AAAA,EAAA;AAGE,SAAAG,MAAS,kBAAkBC,MAAwB,SAEnD,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAASL;AAAA,MACT,MAAMM,EAAS;AAAA,MACf,WAAAV;AAAA,MACA,QAAAE;AAAA,MACA,oBAAkBS,EAAY;AAAA,IAAA;AAAA,EAAA,IAMlC,gBAAAH,EAAC,QAAK,EAAA,WAAWH,GAAc,KAAAP,GAAU,eAAaI,GAAQ,oBAAkBS,EAAY,OACzF,UAAAZ,EACH,CAAA;AAEJ,CAAC;"}

package/Button.js

@@ -0,0 +1,130 @@
+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 m from "classnames";
+import { I as pt } from "./Icon.js";
+import { AnalyticsId as X, IconSize as B } from "./constants.js";
+import { useBreakpoint as mt } from "./hooks/useBreakpoint.js";
+import { useHover as $ } from "./hooks/useHover.js";
+import { useIcons as ft } 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 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, 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) {
+  const {
+    ariaLabel: f,
+    id: e,
+    children: g,
+    wrapperClassName: q,
+    className: G,
+    arrow: _,
+    concept: A = "normal",
+    disabled: i = !1,
+    ellipsis: S = !1,
+    fluid: w = !1,
+    htmlMarkup: I = "button",
+    mode: J = "onlight",
+    onBlur: z,
+    onClick: U,
+    size: K = "medium",
+    variant: y = "fill",
+    href: Q,
+    tabIndex: F,
+    testId: H,
+    target: P,
+    type: Y = "button",
+    textPosition: Z = "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, C = J === "ondark", h = mt() < ht.md, V = A === "destructive" && !i, ot = y === "outline", c = y === "borderless", W = It(y === "fill", c, i, A, C, h), v = _ === "icon" && !c, p = K === "large" && !V && !c, rt = _ === "accessibility-character" && !w && !d && !b && !v && c, nt = { ...j }, D = m(
+    t["button-wrapper"],
+    { [t["button-wrapper--fluid"]]: w || S },
+    q
+  ), et = 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--left-icon"]]: d && !s,
+      [t["button--right-icon"]]: b && !s,
+      [t["button--both-icons"]]: T,
+      [t["button--only-icon"]]: s,
+      [t["button--arrow"]]: v,
+      [t["button--on-dark"]]: C
+    },
+    G
+  ), st = m(t.button__text, {
+    [t["button__text--ellipsis"]]: S,
+    [t["button__text--centered"]]: w && Z === "centered"
+  }), at = m(t.diagonal, {
+    [t["diagonal--on-dark"]]: C
+  });
+  bt(() => {
+    yt(s, f, !gt() && !_t());
+  }, []);
+  const k = (l, ct, lt) => l ? x.cloneElement(l, {
+    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 }) }),
+    /* @__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 }),
+      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: "  →" })
+  ] });
+  return /* @__PURE__ */ N(ut, { children: [
+    I === "button" && /* @__PURE__ */ a(
+      "button",
+      {
+        id: e,
+        onBlur: z,
+        onClick: U,
+        disabled: i,
+        "data-testid": H,
+        "data-analyticsid": X.Button,
+        className: D,
+        ref: M,
+        tabIndex: F,
+        type: Y,
+        ...nt,
+        children: O()
+      }
+    ),
+    I === "a" && /* @__PURE__ */ a(
+      "a",
+      {
+        id: e,
+        onBlur: z,
+        onClick: U,
+        "data-testid": H,
+        "data-analyticsid": X.Button,
+        className: D,
+        href: Q,
+        target: P,
+        rel: P === "_blank" ? "noopener noreferrer" : r.rel,
+        ref: M,
+        tabIndex: F,
+        ...j,
+        children: O()
+      }
+    )
+  ] });
+});
+export {
+  jt as B
+};
+//# sourceMappingURL=Button.js.map

package/Button.js.map

@@ -0,0 +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 ButtonMode = '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  mode?: ButtonMode;\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    mode = '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 = mode === '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","mode","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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"}

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+## 8.6.0-beta.1 (2024-09-24)
+
+## 8.6.0-beta.0 (2024-09-24)
+
+### Bug Fixes
+
+- progressbar leses opp av skjermlesere
+  ([550e7ac](https://github.com/helsenorge/designsystem/commit/550e7acfbb4687d946f36a7dad9e284614aee6a4)), closes
+  [#328018](https://github.com/helsenorge/designsystem/issues/328018)
+
+## [8.5.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv8.4.0&targetVersion=GTv8.5.0) (2024-09-23)
+
+### Features
+
+- nytt komponent toggle ([76f1da5](https://github.com/helsenorge/designsystem/commit/76f1da5c077db4bc62a45007d72f65053e5310cc)), closes
+  [#308151](https://github.com/helsenorge/designsystem/issues/308151)
+
+## [8.4.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv8.3.0&targetVersion=GTv8.4.0) (2024-09-13)
+
+### Features
+
+- **radiobutton:** legg til prop for checked og gjør komponenten controlled
+  ([1c8ae22](https://github.com/helsenorge/designsystem/commit/1c8ae22e0f5d138f308a00ca29212ed04313ba9a)), closes
+  [#331953](https://github.com/helsenorge/designsystem/issues/331953)
+
 ## [8.3.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv8.2.1&targetVersion=GTv8.3.0) (2024-09-09)
 
 ### Features
@@ -1758,12 +1783,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/Checkbox.js

@@ -0,0 +1,113 @@
+import { jsx as s, jsxs as G, Fragment as H } from "react/jsx-runtime";
+import X, { useState as J, useEffect as K } from "react";
+import b from "classnames";
+import { FormMode as i, FormSize as Q, AnalyticsId as V, IconSize as Y } from "./constants.js";
+import { usePseudoClasses as Z } from "./hooks/usePseudoClasses.js";
+import { useUuid as $ } from "./hooks/useUuid.js";
+import { getColor as _ } from "./theme/currys/color.js";
+import { getAriaDescribedBy as ee } from "./utils/accessibility.js";
+import { isMutableRefObject as re, mergeRefs as ce } from "./utils/refs.js";
+import { u as oe } from "./uuid.js";
+import { E as ae } from "./ErrorWrapper.js";
+import { I as le } from "./Icon.js";
+import ie from "./components/Icons/Check.js";
+import { g as ne, r as se } from "./Label.js";
+import e from "./components/Checkbox/styles.module.scss";
+const be = X.forwardRef((x, h) => {
+  const {
+    className: I,
+    checked: d = !1,
+    disabled: a,
+    label: m,
+    inputId: p = oe(),
+    mode: l = i.onwhite,
+    name: N = p,
+    size: T,
+    errorText: k,
+    error: g = !!k,
+    errorTextId: R,
+    value: S = ne(m),
+    testId: j,
+    required: z,
+    onChange: u,
+    ...F
+  } = x, [c, f] = J(d), w = $(R), C = l === i.onwhite, y = l === i.ongrey, v = l === i.onblueberry, o = g || l === i.oninvalid, n = l === i.ondark, r = T === Q.large, { refObject: L, isFocused: W } = Z(re(h) ? h : null), A = ce([h, L]), E = b({
+    [e["checkbox-wrapper--with-error"]]: k,
+    [e["checkbox-wrapper--large"]]: r
+  }), B = b(e["checkbox-label"], {
+    [e["checkbox-label--disabled"]]: a,
+    [e["checkbox-label--on-dark"]]: n,
+    [e["checkbox-label--large"]]: r,
+    [e["checkbox-label__large--checked"]]: r && c,
+    [e["checkbox-label__large--focus"]]: r && W,
+    [e["checkbox-label__large--on-white"]]: r && C,
+    [e["checkbox-label__large--on-grey"]]: r && y,
+    [e["checkbox-label__large--on-blueberry"]]: r && v,
+    [e["checkbox-label__large--on-invalid"]]: r && o,
+    [e["checkbox-label__large--disabled"]]: r && a
+  }), D = b(e.checkbox, I), M = b(e["checkbox__icon-wrapper"], {
+    [e["checkbox__icon-wrapper--on-white"]]: C,
+    [e["checkbox__icon-wrapper--on-grey"]]: y,
+    [e["checkbox__icon-wrapper--on-invalid"]]: o,
+    [e["checkbox__icon-wrapper--disabled"]]: a,
+    [e["checkbox__icon-wrapper__regular--checked"]]: !r && c,
+    [e["checkbox__icon-wrapper__regular--invalid"]]: !r && c && o,
+    [e["checkbox__icon-wrapper__regular--on-dark"]]: !r && c && n,
+    [e["checkbox__icon-wrapper__large--checked"]]: r && c,
+    [e["checkbox__icon-wrapper__large--invalid"]]: r && o,
+    [e["checkbox__icon-wrapper--on-dark"]]: n,
+    [e["checkbox__icon-wrapper--on-blueberry"]]: v,
+    [e["checkbox__icon-wrapper--invalid"]]: o,
+    [e["checkbox__icon-wrapper__large--invalid"]]: r && c && o,
+    [e["checkbox__icon-wrapper__large--disabled"]]: a && r && c,
+    [e["checkbox__icon-wrapper__large--checked--invalid"]]: r && c && o,
+    [e["checkbox__icon-wrapper__large--checked--disabled"]]: a && r && c
+  }), O = b(e["checkbox-label__text"], {
+    [e["checkbox-label__text__large--checked"]]: r && c,
+    [e["checkbox-label__text__large--invalid"]]: r && c && o,
+    [e["checkbox-label__text--on-dark"]]: n,
+    [e["checkbox-label__text--disabled"]]: a
+  });
+  let t = _("white");
+  (n || r && c) && (t = _("blueberry", 900)), o && r && c && (t = _("white")), a && (t = _("neutral", 700)), K(() => {
+    f(d);
+  }, [d]);
+  const P = (q) => {
+    u && u(q), f(!c);
+  }, U = () => /* @__PURE__ */ G(H, { children: [
+    /* @__PURE__ */ s(
+      "input",
+      {
+        id: p,
+        name: N,
+        className: D,
+        type: "checkbox",
+        checked: c,
+        disabled: a,
+        value: S,
+        ref: A,
+        "aria-describedby": ee(x, w),
+        "aria-invalid": g,
+        required: z,
+        onChange: P,
+        ...F
+      }
+    ),
+    /* @__PURE__ */ s("span", { className: M, children: c && /* @__PURE__ */ s(le, { color: t, className: e.checkbox__icon, svgIcon: ie, size: Y.XSmall }) })
+  ] });
+  return /* @__PURE__ */ s(ae, { errorText: k, errorTextId: w, children: /* @__PURE__ */ s("div", { "data-testid": j, "data-analyticsid": V.Checkbox, className: E, children: se(
+    m,
+    U(),
+    p,
+    l,
+    B,
+    O,
+    e["checkbox-sublabel-wrapper"],
+    r
+  ) }) });
+});
+be.displayName = "Checkbox";
+export {
+  be as C
+};
+//# sourceMappingURL=Checkbox.js.map

package/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormSize, IconSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys/color';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport Check from '../Icons/Check';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport checkboxStyles from './styles.module.scss';\n\nexport interface CheckboxProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'required' | 'onChange'\n  > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the checkbox - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** input id of the checkbox */\n  inputId?: string;\n  /** Changes the visuals of the checkbox */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the checkbox */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Checkbox = React.forwardRef((props: CheckboxProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    checked = false,\n    disabled,\n    label,\n    inputId = uuid(),\n    mode = FormMode.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId,\n    value = getLabelText(label),\n    testId,\n    required,\n    onChange,\n    ...rest\n  } = props;\n  const [isChecked, setIsChecked] = useState(checked);\n  const errorTextUuid = useUuid(errorTextId);\n  const onWhite = mode === FormMode.onwhite;\n  const onGrey = mode === FormMode.ongrey;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const onInvalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const large = size === FormSize.large;\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const checkboxWrapperClasses = classNames({\n    [checkboxStyles['checkbox-wrapper--with-error']]: errorText,\n    [checkboxStyles['checkbox-wrapper--large']]: large,\n  });\n  const checkboxLabelClasses = classNames(checkboxStyles['checkbox-label'], {\n    [checkboxStyles['checkbox-label--disabled']]: disabled,\n    [checkboxStyles['checkbox-label--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label--large']]: large,\n    [checkboxStyles['checkbox-label__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__large--focus']]: large && isFocused,\n    [checkboxStyles['checkbox-label__large--on-white']]: large && onWhite,\n    [checkboxStyles['checkbox-label__large--on-grey']]: large && onGrey,\n    [checkboxStyles['checkbox-label__large--on-blueberry']]: large && onBlueberry,\n    [checkboxStyles['checkbox-label__large--on-invalid']]: large && onInvalid,\n    [checkboxStyles['checkbox-label__large--disabled']]: large && disabled,\n  });\n  const checkboxClasses = classNames(checkboxStyles.checkbox, className);\n  const checkboxIconWrapperClasses = classNames(checkboxStyles['checkbox__icon-wrapper'], {\n    [checkboxStyles['checkbox__icon-wrapper--on-white']]: onWhite,\n    [checkboxStyles['checkbox__icon-wrapper--on-grey']]: onGrey,\n    [checkboxStyles['checkbox__icon-wrapper--on-invalid']]: onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper--disabled']]: disabled,\n    [checkboxStyles['checkbox__icon-wrapper__regular--checked']]: !large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__regular--invalid']]: !large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__regular--on-dark']]: !large && isChecked && onDark,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__large--invalid']]: large && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper--on-dark']]: onDark,\n    [checkboxStyles['checkbox__icon-wrapper--on-blueberry']]: onBlueberry,\n    [checkboxStyles['checkbox__icon-wrapper--invalid']]: onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--disabled']]: disabled && large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked--disabled']]: disabled && large && isChecked,\n  });\n  const labelTextClasses = classNames(checkboxStyles['checkbox-label__text'], {\n    [checkboxStyles['checkbox-label__text__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__text__large--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox-label__text--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label__text--disabled']]: disabled,\n  });\n\n  let iconColor = getColor('white');\n  if (onDark || (large && isChecked)) iconColor = getColor('blueberry', 900);\n  if (onInvalid && large && isChecked) iconColor = getColor('white');\n  if (disabled) iconColor = getColor('neutral', 700);\n\n  useEffect(() => {\n    setIsChecked(checked);\n  }, [checked]);\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n\n    setIsChecked(!isChecked);\n  };\n\n  const getLabelContent = (): React.ReactNode => {\n    return (\n      <>\n        <input\n          id={inputId}\n          name={name}\n          className={checkboxClasses}\n          type=\"checkbox\"\n          checked={isChecked}\n          disabled={disabled}\n          value={value}\n          ref={mergedRefs}\n          aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n          aria-invalid={error}\n          required={required}\n          onChange={onChangeHandler}\n          {...rest}\n        />\n        <span className={checkboxIconWrapperClasses}>\n          {isChecked && <Icon color={iconColor} className={checkboxStyles['checkbox__icon']} svgIcon={Check} size={IconSize.XSmall} />}\n        </span>\n      </>\n    );\n  };\n\n  return (\n    <ErrorWrapper errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n        {renderLabelAsParent(\n          label,\n          getLabelContent(),\n          inputId,\n          mode as FormMode,\n          checkboxLabelClasses,\n          labelTextClasses,\n          checkboxStyles['checkbox-sublabel-wrapper'],\n          large\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":["Checkbox","React","props","ref","className","checked","disabled","label","inputId","uuid","mode","FormMode","name","size","errorText","error","errorTextId","value","getLabelText","testId","required","onChange","rest","isChecked","setIsChecked","useState","errorTextUuid","useUuid","onWhite","onGrey","onBlueberry","onInvalid","onDark","large","FormSize","refObject","isFocused","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","checkboxWrapperClasses","classNames","checkboxStyles","checkboxLabelClasses","checkboxClasses","checkboxIconWrapperClasses","labelTextClasses","iconColor","getColor","useEffect","onChangeHandler","e","getLabelContent","jsxs","Fragment","jsx","getAriaDescribedBy","Icon","Check","IconSize","ErrorWrapper","AnalyticsId","renderLabelAsParent"],"mappings":"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"}

package/Close.js

@@ -0,0 +1,31 @@
+import { jsx as r } from "react/jsx-runtime";
+import b from "react";
+import k from "classnames";
+import { AnalyticsId as y } from "./constants.js";
+import { useBreakpoint as C, Breakpoint as I } from "./hooks/useBreakpoint.js";
+import { useHover as R } from "./hooks/useHover.js";
+import { palette as v } from "./theme/palette.js";
+import { mergeRefs as x } from "./utils/refs.js";
+import { I as B } from "./Icon.js";
+import N from "./components/Icons/X.js";
+import e from "./components/Close/styles.module.scss";
+const D = b.forwardRef(function(t, s) {
+  const { small: o, testId: a, ariaLabel: m = "Lukk", onClick: i, className: l, color: c = v.blueberry600 } = t, n = C(), { hoverRef: f, isHovered: p } = R(), d = n === I.xs || o ? 38 : 48, u = k(e.close, { [e["close--small"]]: o }, l);
+  return /* @__PURE__ */ r(
+    "button",
+    {
+      ref: x([s, f]),
+      "data-testid": a,
+      "data-analyticsid": y.Close,
+      className: u,
+      "aria-label": m,
+      onClick: i,
+      type: "button",
+      children: /* @__PURE__ */ r(B, { svgIcon: N, color: c, size: d, isHovered: p })
+    }
+  );
+});
+export {
+  D as C
+};
+//# sourceMappingURL=Close.js.map

package/Close.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Close.js","sources":["../src/components/Close/Close.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { palette } from '../../theme/palette';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface CloseProps {\n  /** Keeps the icon small for all screen sizes */\n  small?: boolean;\n  /** Function is called when user clicks the button */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Gives color to the svg */\n  color?: string;\n}\n\nconst Close = React.forwardRef(function ButtonForwardedRef(props: CloseProps, ref: React.ForwardedRef<HTMLButtonElement>) {\n  const { small, testId, ariaLabel = 'Lukk', onClick, className, color = palette.blueberry600 } = props;\n  const breakpoint = useBreakpoint();\n  const { hoverRef, isHovered } = useHover();\n\n  const iconSize = breakpoint === Breakpoint.xs || small ? 38 : 48;\n\n  const closeClasses = classNames(styles.close, { [styles['close--small']]: small }, className);\n\n  return (\n    <button\n      ref={mergeRefs([ref, hoverRef])}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Close}\n      className={closeClasses}\n      aria-label={ariaLabel}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <Icon svgIcon={X} color={color} size={iconSize} isHovered={isHovered} />\n    </button>\n  );\n});\n\nexport default Close;\n"],"names":["Close","React","props","ref","small","testId","ariaLabel","onClick","className","color","palette","breakpoint","useBreakpoint","hoverRef","isHovered","useHover","iconSize","Breakpoint","closeClasses","classNames","styles","jsx","mergeRefs","AnalyticsId","Icon","X"],"mappings":";;;;;;;;;;;AA6BA,MAAMA,IAAQC,EAAM,WAAW,SAA4BC,GAAmBC,GAA4C;AAClH,QAAA,EAAE,OAAAC,GAAO,QAAAC,GAAQ,WAAAC,IAAY,QAAQ,SAAAC,GAAS,WAAAC,GAAW,OAAAC,IAAQC,EAAQ,aAAA,IAAiBR,GAC1FS,IAAaC,KACb,EAAE,UAAAC,GAAU,WAAAC,EAAU,IAAIC,EAAS,GAEnCC,IAAWL,MAAeM,EAAW,MAAMb,IAAQ,KAAK,IAExDc,IAAeC,EAAWC,EAAO,OAAO,EAAE,CAACA,EAAO,cAAc,CAAC,GAAGhB,EAAM,GAAGI,CAAS;AAG1F,SAAA,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKC,EAAU,CAACnB,GAAKU,CAAQ,CAAC;AAAA,MAC9B,eAAaR;AAAA,MACb,oBAAkBkB,EAAY;AAAA,MAC9B,WAAWL;AAAA,MACX,cAAYZ;AAAA,MACZ,SAAAC;AAAA,MACA,MAAK;AAAA,MAEL,4BAACiB,GAAK,EAAA,SAASC,GAAG,OAAAhB,GAAc,MAAMO,GAAU,WAAAF,GAAsB;AAAA,IAAA;AAAA,EAAA;AAG5E,CAAC;"}

package/ErrorBoundary.js

@@ -0,0 +1,35 @@
+import n from "react";
+const l = (t, e, o) => {
+  const r = t[e];
+  return r ? typeof r == "function" ? r() : Promise.resolve(r) : new Promise((i, s) => {
+    (typeof queueMicrotask == "function" ? queueMicrotask : setTimeout)(
+      s.bind(
+        null,
+        new Error(
+          "Unknown variable dynamic import: " + e + (e.split("/").length !== o ? ". Note that variables only represent file names one level deep." : "")
+        )
+      )
+    );
+  });
+};
+class p extends n.Component {
+  constructor(e) {
+    super(e), this.state = {
+      error: !1
+    };
+  }
+  componentDidCatch() {
+    this.setState({ error: !0 });
+  }
+  componentDidUpdate(e) {
+    e.reset !== this.props.reset && this.setState({ error: !1 });
+  }
+  render() {
+    return this.state.error ? this.props.fallback : this.props.children;
+  }
+}
+export {
+  p as E,
+  l as _
+};
+//# sourceMappingURL=ErrorBoundary.js.map

package/ErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.js","sources":["../src/components/LazyIcon/ErrorBoundary.tsx"],"sourcesContent":["import React from 'react';\n\ninterface ErrorBoundaryProps<T> {\n  fallback: React.ReactNode;\n  children: React.ReactNode;\n  reset: T;\n}\n\ninterface ErrorBoundaryState {\n  error: boolean;\n}\n\nclass ErrorBoundary<T> extends React.Component<ErrorBoundaryProps<T>, ErrorBoundaryState> {\n  constructor(props: ErrorBoundaryProps<T>) {\n    super(props);\n    this.state = {\n      error: false,\n    };\n  }\n\n  componentDidCatch(): void {\n    this.setState({ error: true });\n  }\n\n  componentDidUpdate(prevProps: Readonly<ErrorBoundaryProps<T>>): void {\n    if (prevProps.reset !== this.props.reset) {\n      this.setState({ error: false });\n    }\n  }\n\n  render(): React.ReactNode {\n    return this.state.error ? this.props.fallback : this.props.children;\n  }\n}\n\nexport default ErrorBoundary;\n"],"names":["ErrorBoundary","React","props","prevProps"],"mappings":";;;;;;;;;;;;;;AAYA,MAAMA,UAAyBC,EAAM,UAAqD;AAAA,EACxF,YAAYC,GAA8B;AACxC,UAAMA,CAAK,GACX,KAAK,QAAQ;AAAA,MACX,OAAO;AAAA,IAAA;AAAA,EAEX;AAAA,EAEA,oBAA0B;AACxB,SAAK,SAAS,EAAE,OAAO,GAAM,CAAA;AAAA,EAC/B;AAAA,EAEA,mBAAmBC,GAAkD;AACnE,IAAIA,EAAU,UAAU,KAAK,MAAM,SACjC,KAAK,SAAS,EAAE,OAAO,GAAO,CAAA;AAAA,EAElC;AAAA,EAEA,SAA0B;AACxB,WAAO,KAAK,MAAM,QAAQ,KAAK,MAAM,WAAW,KAAK,MAAM;AAAA,EAC7D;AACF;"}

package/ErrorWrapper.js

@@ -0,0 +1,14 @@
+import { jsxs as s, jsx as a } from "react/jsx-runtime";
+import o from "classnames";
+import e from "./components/ErrorWrapper/styles.module.scss";
+const d = (r) => {
+  const t = o(r.errorText && e["error-wrapper--with-error"], r.className);
+  return /* @__PURE__ */ s("div", { className: t, "data-testid": r.testId, children: [
+    r.errorText && /* @__PURE__ */ a("p", { className: e["error-wrapper__errors"], id: r.errorTextId, children: r.errorText }),
+    r.children
+  ] });
+};
+export {
+  d as E
+};
+//# sourceMappingURL=ErrorWrapper.js.map

package/ErrorWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorWrapper.js","sources":["../src/components/ErrorWrapper/ErrorWrapper.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport interface ErrorWrapperProps {\n  /** Form component */\n  children?: React.ReactNode;\n  /** Error message */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const ErrorWrapper: React.FC<ErrorWrapperProps> = props => {\n  const errorWrapperClasses = cn(props.errorText && styles[`error-wrapper--with-error`], props.className);\n\n  return (\n    <div className={errorWrapperClasses} data-testid={props.testId}>\n      {props.errorText && (\n        <p className={styles['error-wrapper__errors']} id={props.errorTextId}>\n          {props.errorText}\n        </p>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ErrorWrapper;\n"],"names":["ErrorWrapper","props","errorWrapperClasses","cn","styles","jsx"],"mappings":";;;AAmBO,MAAMA,IAA4C,CAASC,MAAA;AAC1D,QAAAC,IAAsBC,EAAGF,EAAM,aAAaG,EAAO,2BAA2B,GAAGH,EAAM,SAAS;AAEtG,2BACG,OAAI,EAAA,WAAWC,GAAqB,eAAaD,EAAM,QACrD,UAAA;AAAA,IAAMA,EAAA,aACJ,gBAAAI,EAAA,KAAA,EAAE,WAAWD,EAAO,uBAAuB,GAAG,IAAIH,EAAM,aACtD,UAAAA,EAAM,UACT,CAAA;AAAA,IAEDA,EAAM;AAAA,EACT,EAAA,CAAA;AAEJ;"}