@helsenorge/designsystem-react 10.0.2 → 10.2.0

package/AnchorLink.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import classNames from "classnames";
 import { AnalyticsId, IconSize } from "./constants.js";
 import { useHover } from "./hooks/useHover.js";
@@ -7,7 +7,7 @@ import { getColor } from "./theme/currys/color.js";
 import { I as Icon } from "./Icon.js";
 import ArrowUpRight from "./components/Icons/ArrowUpRight.js";
 import AnchorLinkStyles from "./components/AnchorLink/styles.module.scss";
-const AnchorLink = React.forwardRef((props, ref) => {
+const AnchorLink = React__default.forwardRef((props, ref) => {
   const { id, href, children, className, target = "_self", htmlMarkup = "a", onClick, testId } = props;
   const external = target === "_blank";
   const { hoverRef, isHovered } = useHover(

package/AnchorLink.js.map

@@ -1 +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":[],"mappings":";;;;;;;;;AAyCA,MAAM,aAAa,MAAM,WAAmE,CAAC,OAAO,QAAQ;AACpG,QAAA,EAAE,IAAI,MAAM,UAAU,WAAW,SAAS,SAAS,aAAa,KAAK,SAAS,OAAW,IAAA;AAC/F,QAAM,WAAW,WAAW;AACtB,QAAA,EAAE,UAAU,UAAA,IAAc;AAAA,IAC9B;AAAA,EACF;AACA,QAAM,gBAAgB,WAAW,iBAAiB,YAAY,SAAS;AAEvE,QAAM,cAAc;AAAA,IAClB;AAAA,IACA,CAAC,aAAa,GAAG;AAAA,IACjB,CAAC,kBAAkB,GAAG,YAAY;AAAA,IAClC;AAAA,EACF;AAEM,QAAA,gBAAgB,MAEjB,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,IACA,YACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,iBAAiB;AAAA,QAC5B,SAAS;AAAA,QACT,OAAO,SAAS,aAAa,GAAG;AAAA,QAChC,YAAY,SAAS,aAAa,GAAG;AAAA,QACrC,MAAM,SAAS;AAAA,QACf;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GAEJ;AAGF,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,eAAe,OACd;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX,KAAK,WAAW,wBAAwB;AAAA,QACxC,KAAK;AAAA,QACJ,GAAG;AAAA,QAEH,UAAc,cAAA;AAAA,MAAA;AAAA,IACjB;AAAA,IAED,eAAe,YACd;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,iBAAiB,oBAAoB;AAAA,QAChD,KAAK;AAAA,QACJ,GAAG;AAAA,QAEJ,UAAC,oBAAA,QAAA,EAAK,WAAW,eAAgB,0BAAgB,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACnD,GAEJ;AAEJ,CAAC;"}
+{"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":["React"],"mappings":";;;;;;;;;AAyCA,MAAM,aAAaA,eAAM,WAAmE,CAAC,OAAO,QAAQ;AACpG,QAAA,EAAE,IAAI,MAAM,UAAU,WAAW,SAAS,SAAS,aAAa,KAAK,SAAS,OAAW,IAAA;AAC/F,QAAM,WAAW,WAAW;AACtB,QAAA,EAAE,UAAU,UAAA,IAAc;AAAA,IAC9B;AAAA,EACF;AACA,QAAM,gBAAgB,WAAW,iBAAiB,YAAY,SAAS;AAEvE,QAAM,cAAc;AAAA,IAClB;AAAA,IACA,CAAC,aAAa,GAAG;AAAA,IACjB,CAAC,kBAAkB,GAAG,YAAY;AAAA,IAClC;AAAA,EACF;AAEM,QAAA,gBAAgB,MAEjB,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,IACA,YACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,iBAAiB;AAAA,QAC5B,SAAS;AAAA,QACT,OAAO,SAAS,aAAa,GAAG;AAAA,QAChC,YAAY,SAAS,aAAa,GAAG;AAAA,QACrC,MAAM,SAAS;AAAA,QACf;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GAEJ;AAGF,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,eAAe,OACd;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX,KAAK,WAAW,wBAAwB;AAAA,QACxC,KAAK;AAAA,QACJ,GAAG;AAAA,QAEH,UAAc,cAAA;AAAA,MAAA;AAAA,IACjB;AAAA,IAED,eAAe,YACd;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,iBAAiB,oBAAoB;AAAA,QAChD,KAAK;AAAA,QACJ,GAAG;AAAA,QAEJ,UAAC,oBAAA,QAAA,EAAK,WAAW,eAAgB,0BAAgB,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACnD,GAEJ;AAEJ,CAAC;"}

package/Avatar.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import classNames from "classnames";
 import { AnalyticsId, IconSize } from "./constants.js";
 import { palette } from "./theme/palette.js";
@@ -11,7 +11,7 @@ var AvatarSize = /* @__PURE__ */ ((AvatarSize2) => {
   AvatarSize2["small"] = "small";
   return AvatarSize2;
 })(AvatarSize || {});
-const Avatar = React.forwardRef(function AvatarForwardedRef(props, ref) {
+const Avatar = React__default.forwardRef(function AvatarForwardedRef(props, ref) {
   const { children, className = "", selected = false, color = "blueberry", variant = "square", size = "small", testId } = props;
   const truncatedName = children.charAt(0).toLocaleUpperCase() + children.substring(1, 2);
   return /* @__PURE__ */ jsx(

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  /** Sets blue or black color on avatar. */\n  color?: 'blueberry' | 'black';\n  /** 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  variant?: 'square' | '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, color = 'blueberry', variant = 'square', 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        color === 'black' && styles['avatar--black'],\n        variant === '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={color === 'black' ? palette.neutral900 : palette.blueberry600} />\n      ) : (\n        truncatedName\n      )}\n    </span>\n  );\n});\n\nexport default Avatar;\n"],"names":["AvatarSize","cn"],"mappings":";;;;;;;;AAWY,IAAA,+BAAAA,gBAAL;AACLA,cAAA,QAAS,IAAA;AACTA,cAAA,OAAQ,IAAA;AAFEA,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AAsBZ,MAAM,SAAqB,MAAM,WAAW,SAAS,mBAAmB,OAAoB,KAAsC;AAChI,QAAM,EAAE,UAAU,YAAY,IAAI,WAAW,OAAO,QAAQ,aAAa,UAAU,UAAU,OAAO,SAAkB,OAAW,IAAA;AAC3H,QAAA,gBAAgB,SAAS,OAAO,CAAC,EAAE,kBAAsB,IAAA,SAAS,UAAU,GAAG,CAAC;AAEpF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAAA,QACT,OAAO;AAAA,QACP,YAAY,OAAO,kBAAkB;AAAA,QACrC,UAAU,WAAW,OAAO,eAAe;AAAA,QAC3C,YAAY,YAAY,OAAO,gBAAgB;AAAA,QAC/C,SAAS,YAAqB,OAAO,gBAAgB;AAAA,QACrD,SAAS,WAAoB,OAAO,eAAe;AAAA,QACnD;AAAA,MACF;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAE7B,UACC,WAAA,oBAAC,MAAK,EAAA,SAAS,OAAO,MAAM,SAAS,OAAO,OAAO,UAAU,UAAU,QAAQ,aAAa,QAAQ,cAAc,IAElH;AAAA,IAAA;AAAA,EAEJ;AAEJ,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  /** Sets blue or black color on avatar. */\n  color?: 'blueberry' | 'black';\n  /** 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  variant?: 'square' | '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, color = 'blueberry', variant = 'square', 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        color === 'black' && styles['avatar--black'],\n        variant === '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={color === 'black' ? palette.neutral900 : palette.blueberry600} />\n      ) : (\n        truncatedName\n      )}\n    </span>\n  );\n});\n\nexport default Avatar;\n"],"names":["AvatarSize","React","cn"],"mappings":";;;;;;;;AAWY,IAAA,+BAAAA,gBAAL;AACLA,cAAA,QAAS,IAAA;AACTA,cAAA,OAAQ,IAAA;AAFEA,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AAsBZ,MAAM,SAAqBC,eAAM,WAAW,SAAS,mBAAmB,OAAoB,KAAsC;AAChI,QAAM,EAAE,UAAU,YAAY,IAAI,WAAW,OAAO,QAAQ,aAAa,UAAU,UAAU,OAAO,SAAkB,OAAW,IAAA;AAC3H,QAAA,gBAAgB,SAAS,OAAO,CAAC,EAAE,kBAAsB,IAAA,SAAS,UAAU,GAAG,CAAC;AAEpF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAAA,QACT,OAAO;AAAA,QACP,YAAY,OAAO,kBAAkB;AAAA,QACrC,UAAU,WAAW,OAAO,eAAe;AAAA,QAC3C,YAAY,YAAY,OAAO,gBAAgB;AAAA,QAC/C,SAAS,YAAqB,OAAO,gBAAgB;AAAA,QACrD,SAAS,WAAoB,OAAO,eAAe;AAAA,QACnD;AAAA,MACF;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAE7B,UACC,WAAA,oBAAC,MAAK,EAAA,SAAS,OAAO,MAAM,SAAS,OAAO,OAAO,UAAU,UAAU,QAAQ,aAAa,QAAQ,cAAc,IAElH;AAAA,IAAA;AAAA,EAEJ;AAEJ,CAAC;"}

package/Badge.js

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import classNames from "classnames";
 import { N as NotificationBadge } from "./NotificationBadge.js";
-import { IconSize, AnalyticsId } from "./constants.js";
+import { AnalyticsId, IconSize } from "./constants.js";
 import badgeStyles from "./components/Badge/styles.module.scss";
-const Badge = React.forwardRef(function BadgeForwardedRef(props, ref) {
+const Badge = React__default.forwardRef(function BadgeForwardedRef(props, ref) {
   const { children, className = "", color = "blueberry", testId, type = "string", notificationVariant = "info" } = props;
   const badgeClasses = classNames(
     badgeStyles.badge,

package/Badge.js.map

@@ -1 +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":[],"mappings":";;;;;;AA8BA,MAAM,QAAmB,MAAM,WAAW,SAAS,kBAAkB,OAAmB,KAAsC;AACtH,QAAA,EAAE,UAAU,YAAY,IAAI,QAAQ,aAAa,QAAQ,OAAO,UAAU,sBAAsB,OAAW,IAAA;AACjH,QAAM,eAAe;AAAA,IACnB,YAAY;AAAA,IACZ;AAAA,MACE,CAAC,YAAY,kBAAkB,CAAC,GAAG,UAAU;AAAA,MAC7C,CAAC,YAAY,eAAe,CAAC,GAAG,UAAU;AAAA,MAC1C,CAAC,YAAY,gBAAgB,CAAC,GAAG,UAAU;AAAA,IAC7C;AAAA,IACA;AAAA,EACF;AAEI,MAAA,SAAS,kBAAkB,wBAAwB,QAAW;AAE9D,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,MAAM,SAAS;AAAA,QACf;AAAA,QACA;AAAA,QACA,oBAAkB,YAAY;AAAA,MAAA;AAAA,IAChC;AAAA,EAAA;AAKF,SAAA,oBAAC,QAAK,EAAA,WAAW,cAAc,KAAU,eAAa,QAAQ,oBAAkB,YAAY,OACzF,SACH,CAAA;AAEJ,CAAC;"}
+{"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":["React"],"mappings":";;;;;;AA8BA,MAAM,QAAmBA,eAAM,WAAW,SAAS,kBAAkB,OAAmB,KAAsC;AACtH,QAAA,EAAE,UAAU,YAAY,IAAI,QAAQ,aAAa,QAAQ,OAAO,UAAU,sBAAsB,OAAW,IAAA;AACjH,QAAM,eAAe;AAAA,IACnB,YAAY;AAAA,IACZ;AAAA,MACE,CAAC,YAAY,kBAAkB,CAAC,GAAG,UAAU;AAAA,MAC7C,CAAC,YAAY,eAAe,CAAC,GAAG,UAAU;AAAA,MAC1C,CAAC,YAAY,gBAAgB,CAAC,GAAG,UAAU;AAAA,IAC7C;AAAA,IACA;AAAA,EACF;AAEI,MAAA,SAAS,kBAAkB,wBAAwB,QAAW;AAE9D,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,MAAM,SAAS;AAAA,QACf;AAAA,QACA;AAAA,QACA,oBAAkB,YAAY;AAAA,MAAA;AAAA,IAChC;AAAA,EAAA;AAKF,SAAA,oBAAC,QAAK,EAAA,WAAW,cAAc,KAAU,eAAa,QAAQ,oBAAkB,YAAY,OACzF,SACH,CAAA;AAEJ,CAAC;"}

package/Button.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import React, { useRef, useEffect } from "react";
+import React__default, { useRef, useEffect } from "react";
 import classNames from "classnames";
 import { I as Icon } from "./Icon.js";
 import { AnalyticsId, IconSize } from "./constants.js";
@@ -33,7 +33,7 @@ const checkOnlyIconAria = (onlyIcon, ariaLabel, devEnv) => {
     throw new Error("Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav");
   }
 };
-const Button = React.forwardRef(function ButtonForwardedRef(props, ref) {
+const Button = React__default.forwardRef(function ButtonForwardedRef(props, ref) {
   const {
     ariaLabel,
     id,
@@ -60,7 +60,7 @@ const Button = React.forwardRef(function ButtonForwardedRef(props, ref) {
     textPosition = "left",
     ...restProps
   } = props;
-  const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));
+  const [leftIcon, rightIcon, restChildren] = useIcons(React__default.Children.toArray(children));
   const { hoverRef, isHovered } = htmlMarkup === "button" ? useHover(ref) : useHover(ref);
   const buttonContentRef = useRef(null);
   const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;
@@ -113,7 +113,7 @@ const Button = React.forwardRef(function ButtonForwardedRef(props, ref) {
     checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());
   }, []);
   const renderIcon = (iconElement, iconSize, iconClassName) => {
-    return iconElement ? React.cloneElement(iconElement, {
+    return iconElement ? React__default.cloneElement(iconElement, {
       size: iconSize,
       color: (iconElement == null ? void 0 : iconElement.props.color) && !disabled ? iconElement.props.color : iconColor,
       isHovered: iconElement.props.isHovered === void 0 ? !disabled && isHovered : iconElement.props.isHovered,

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  /** 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: iconElement.props.isHovered === undefined ? !disabled && isHovered : iconElement.props.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":[],"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: iconElement.props.isHovered === undefined ? !disabled && isHovered : iconElement.props.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":["React"],"mappings":"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"}

package/CHANGELOG.md

@@ -1,3 +1,41 @@
+## [10.1.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv10.0.3&targetVersion=GTv10.1.0) (2025-02-11)
+
+### Features
+
+- **datepicker:** fjerner focus trap
+  ([7ede104](https://github.com/helsenorge/designsystem/commit/7ede10473aab37ca64daa397ae7f9b6d09d1f4d1)), closes
+  [#343482](https://github.com/helsenorge/designsystem/issues/343482)
+- **tabs:** lagt til zindex prop ([bad5bfd](https://github.com/helsenorge/designsystem/commit/bad5bfd0cd8e1c718a537ed46461793bac0fea64)),
+  closes [#343835](https://github.com/helsenorge/designsystem/issues/343835)
+
+### Bug Fixes
+
+- **datepicker:** popup lukker seg riktig ved tabbing
+  ([49792c5](https://github.com/helsenorge/designsystem/commit/49792c5df3a976219ab437914a84607e9d84313c)), closes
+  [#343482](https://github.com/helsenorge/designsystem/issues/343482)
+- **stickynote:** initialiser høyde i microweb
+  ([cf0ca27](https://github.com/helsenorge/designsystem/commit/cf0ca272318e8b3d0055f0685fe54ade513535e6)), closes
+  [#344200](https://github.com/helsenorge/designsystem/issues/344200)
+
+## [10.0.3](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv10.0.2&targetVersion=GTv10.0.3) (2025-01-30)
+
+### Bug Fixes
+
+- **datepicker:** locale setter tekst språk igjen
+  ([921efcb](https://github.com/helsenorge/designsystem/commit/921efcb9040a2d790e965a009b28b3b4b3593a9b)), closes
+  [#343367](https://github.com/helsenorge/designsystem/issues/343367)
+
+## [10.0.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv10.0.1&targetVersion=GTv10.0.2) (2025-01-29)
+
+### Bug Fixes
+
+- hvis icon har hover prop skal denne ikke overstyres
+  ([f4956aa](https://github.com/helsenorge/designsystem/commit/f4956aacf26d462b2ffccc24fbce5b0946bd6de4)), closes
+  [#336117](https://github.com/helsenorge/designsystem/issues/336117)
+- **listheader:** title margin resettes riktig
+  ([1b50bc0](https://github.com/helsenorge/designsystem/commit/1b50bc0e3229b2d351b2df17b79798dfd95a9fb8)), closes
+  [#343414](https://github.com/helsenorge/designsystem/issues/343414)
+
 ## [10.0.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv10.0.0&targetVersion=GTv10.0.1) (2025-01-28)
 
 ### Bug Fixes

package/Checkbox.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React, { useState, useEffect } from "react";
+import React__default, { useState, useEffect } from "react";
 import classNames from "classnames";
 import { FormOnColor, FormSize, AnalyticsId, IconSize } from "./constants.js";
 import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
@@ -13,7 +13,7 @@ import { I as Icon } from "./Icon.js";
 import Check from "./components/Icons/Check.js";
 import { g as getLabelText, r as renderLabelAsParent } from "./Label.js";
 import checkboxStyles from "./components/Checkbox/styles.module.scss";
-const Checkbox = React.forwardRef((props, ref) => {
+const Checkbox = React__default.forwardRef((props, ref) => {
   const {
     className,
     checked = false,

package/Checkbox.js.map

@@ -1 +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, FormOnColor, 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, { ErrorWrapperClassNameProps } 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 ErrorWrapperClassNameProps,\n    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  onColor?: keyof typeof FormOnColor;\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    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId,\n    errorWrapperClassName,\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 = onColor === FormOnColor.onwhite;\n  const onGrey = onColor === FormOnColor.ongrey;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onInvalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.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--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 className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n        {renderLabelAsParent(\n          label,\n          getLabelContent(),\n          inputId,\n          onColor as FormOnColor,\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":[],"mappings":"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"}
+{"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, FormOnColor, 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, { ErrorWrapperClassNameProps } 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 ErrorWrapperClassNameProps,\n    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  onColor?: keyof typeof FormOnColor;\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    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId,\n    errorWrapperClassName,\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 = onColor === FormOnColor.onwhite;\n  const onGrey = onColor === FormOnColor.ongrey;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onInvalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.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--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 className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n        {renderLabelAsParent(\n          label,\n          getLabelContent(),\n          inputId,\n          onColor as FormOnColor,\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":["React"],"mappings":";;;;;;;;;;;;;;;AA4CO,MAAM,WAAWA,eAAM,WAAW,CAAC,OAAsB,QAAqC;AAC7F,QAAA;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,UAAU,KAAK;AAAA,IACf,UAAU,YAAY;AAAA,IACtB,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,QAAQ,CAAC,CAAC;AAAA,IACV;AAAA,IACA;AAAA,IACA,QAAQ,aAAa,KAAK;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AACJ,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,OAAO;AAC5C,QAAA,gBAAgB,QAAQ,WAAW;AACnC,QAAA,UAAU,YAAY,YAAY;AAClC,QAAA,SAAS,YAAY,YAAY;AACjC,QAAA,cAAc,YAAY,YAAY;AACtC,QAAA,YAAY,SAAS,YAAY,YAAY;AAC7C,QAAA,SAAS,YAAY,YAAY;AACjC,QAAA,QAAQ,SAAS,SAAS;AAC1B,QAAA,EAAE,WAAW,cAAc,iBAAmC,mBAAmB,GAAG,IAAI,MAAM,IAAI;AACxG,QAAM,aAAa,UAAU,CAAC,KAAK,SAAS,CAAC;AAE7C,QAAM,yBAAyB,WAAW;AAAA,IACxC,CAAC,eAAe,yBAAyB,CAAC,GAAG;AAAA,EAAA,CAC9C;AACD,QAAM,uBAAuB,WAAW,eAAe,gBAAgB,GAAG;AAAA,IACxE,CAAC,eAAe,0BAA0B,CAAC,GAAG;AAAA,IAC9C,CAAC,eAAe,yBAAyB,CAAC,GAAG;AAAA,IAC7C,CAAC,eAAe,uBAAuB,CAAC,GAAG;AAAA,IAC3C,CAAC,eAAe,gCAAgC,CAAC,GAAG,SAAS;AAAA,IAC7D,CAAC,eAAe,8BAA8B,CAAC,GAAG,SAAS;AAAA,IAC3D,CAAC,eAAe,iCAAiC,CAAC,GAAG,SAAS;AAAA,IAC9D,CAAC,eAAe,gCAAgC,CAAC,GAAG,SAAS;AAAA,IAC7D,CAAC,eAAe,qCAAqC,CAAC,GAAG,SAAS;AAAA,IAClE,CAAC,eAAe,mCAAmC,CAAC,GAAG,SAAS;AAAA,IAChE,CAAC,eAAe,iCAAiC,CAAC,GAAG,SAAS;AAAA,EAAA,CAC/D;AACD,QAAM,kBAAkB,WAAW,eAAe,UAAU,SAAS;AACrE,QAAM,6BAA6B,WAAW,eAAe,wBAAwB,GAAG;AAAA,IACtF,CAAC,eAAe,kCAAkC,CAAC,GAAG;AAAA,IACtD,CAAC,eAAe,iCAAiC,CAAC,GAAG;AAAA,IACrD,CAAC,eAAe,oCAAoC,CAAC,GAAG;AAAA,IACxD,CAAC,eAAe,kCAAkC,CAAC,GAAG;AAAA,IACtD,CAAC,eAAe,0CAA0C,CAAC,GAAG,CAAC,SAAS;AAAA,IACxE,CAAC,eAAe,0CAA0C,CAAC,GAAG,CAAC,SAAS,aAAa;AAAA,IACrF,CAAC,eAAe,0CAA0C,CAAC,GAAG,CAAC,SAAS,aAAa;AAAA,IACrF,CAAC,eAAe,wCAAwC,CAAC,GAAG,SAAS;AAAA,IACrE,CAAC,eAAe,wCAAwC,CAAC,GAAG,SAAS;AAAA,IACrE,CAAC,eAAe,iCAAiC,CAAC,GAAG;AAAA,IACrD,CAAC,eAAe,sCAAsC,CAAC,GAAG;AAAA,IAC1D,CAAC,eAAe,iCAAiC,CAAC,GAAG;AAAA,IACrD,CAAC,eAAe,wCAAwC,CAAC,GAAG,SAAS,aAAa;AAAA,IAClF,CAAC,eAAe,yCAAyC,CAAC,GAAG,YAAY,SAAS;AAAA,IAClF,CAAC,eAAe,iDAAiD,CAAC,GAAG,SAAS,aAAa;AAAA,IAC3F,CAAC,eAAe,kDAAkD,CAAC,GAAG,YAAY,SAAS;AAAA,EAAA,CAC5F;AACD,QAAM,mBAAmB,WAAW,eAAe,sBAAsB,GAAG;AAAA,IAC1E,CAAC,eAAe,sCAAsC,CAAC,GAAG,SAAS;AAAA,IACnE,CAAC,eAAe,sCAAsC,CAAC,GAAG,SAAS,aAAa;AAAA,IAChF,CAAC,eAAe,+BAA+B,CAAC,GAAG;AAAA,IACnD,CAAC,eAAe,gCAAgC,CAAC,GAAG;AAAA,EAAA,CACrD;AAEG,MAAA,YAAY,SAAS,OAAO;AAChC,MAAI,UAAW,SAAS,UAAwB,aAAA,SAAS,aAAa,GAAG;AACzE,MAAI,aAAa,SAAS,UAAW,aAAY,SAAS,OAAO;AACjE,MAAI,SAAU,aAAY,SAAS,WAAW,GAAG;AAEjD,YAAU,MAAM;AACd,iBAAa,OAAO;AAAA,EAAA,GACnB,CAAC,OAAO,CAAC;AAEN,QAAA,kBAAkB,CAAC,MAAiD;AACxE,QAAI,UAAU;AACZ,eAAS,CAAC;AAAA,IAAA;AAGZ,iBAAa,CAAC,SAAS;AAAA,EACzB;AAEA,QAAM,kBAAkB,MAAuB;AAC7C,WAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,UACJ;AAAA,UACA,WAAW;AAAA,UACX,MAAK;AAAA,UACL,SAAS;AAAA,UACT;AAAA,UACA;AAAA,UACA,KAAK;AAAA,UACL,oBAAkB,mBAAmB,OAAO,aAAa;AAAA,UACzD,gBAAc;AAAA,UACd;AAAA,UACA,UAAU;AAAA,UACT,GAAG;AAAA,QAAA;AAAA,MACN;AAAA,0BACC,QAAK,EAAA,WAAW,4BACd,UAAa,aAAA,oBAAC,QAAK,OAAO,WAAW,WAAW,eAAe,gBAAgB,GAAG,SAAS,OAAO,MAAM,SAAS,QAAQ,EAC5H,CAAA;AAAA,IAAA,GACF;AAAA,EAEJ;AAEA,SACG,oBAAA,cAAA,EAAa,WAAW,uBAAuB,WAAsB,aAAa,eACjF,UAAC,oBAAA,OAAA,EAAI,eAAa,QAAQ,oBAAkB,YAAY,UAAU,WAAW,wBAC1E,UAAA;AAAA,IACC;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,2BAA2B;AAAA,IAC1C;AAAA,KAEJ,EACF,CAAA;AAEJ,CAAC;AAED,SAAS,cAAc;"}

package/Close.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import classNames from "classnames";
 import { AnalyticsId } from "./constants.js";
 import { useBreakpoint, Breakpoint } from "./hooks/useBreakpoint.js";
@@ -9,7 +9,7 @@ import { mergeRefs } from "./utils/refs.js";
 import { I as Icon } from "./Icon.js";
 import X from "./components/Icons/X.js";
 import styles from "./components/Close/styles.module.scss";
-const Close = React.forwardRef(function ButtonForwardedRef(props, ref) {
+const Close = React__default.forwardRef(function ButtonForwardedRef(props, ref) {
   const { small, testId, ariaLabel = "Lukk", onClick, className, color = palette.blueberry600 } = props;
   const breakpoint = useBreakpoint();
   const { hoverRef, isHovered } = useHover();

package/Close.js.map

@@ -1 +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":[],"mappings":";;;;;;;;;;;AA6BA,MAAM,QAAQ,MAAM,WAAW,SAAS,mBAAmB,OAAmB,KAA4C;AAClH,QAAA,EAAE,OAAO,QAAQ,YAAY,QAAQ,SAAS,WAAW,QAAQ,QAAQ,aAAiB,IAAA;AAChG,QAAM,aAAa,cAAc;AACjC,QAAM,EAAE,UAAU,UAAU,IAAI,SAAS;AAEzC,QAAM,WAAW,eAAe,WAAW,MAAM,QAAQ,KAAK;AAE9D,QAAM,eAAe,WAAW,OAAO,OAAO,EAAE,CAAC,OAAO,cAAc,CAAC,GAAG,MAAM,GAAG,SAAS;AAG1F,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK,UAAU,CAAC,KAAK,QAAQ,CAAC;AAAA,MAC9B,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAC9B,WAAW;AAAA,MACX,cAAY;AAAA,MACZ;AAAA,MACA,MAAK;AAAA,MAEL,8BAAC,MAAK,EAAA,SAAS,GAAG,OAAc,MAAM,UAAU,UAAsB,CAAA;AAAA,IAAA;AAAA,EACxE;AAEJ,CAAC;"}
+{"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":["React"],"mappings":";;;;;;;;;;;AA6BA,MAAM,QAAQA,eAAM,WAAW,SAAS,mBAAmB,OAAmB,KAA4C;AAClH,QAAA,EAAE,OAAO,QAAQ,YAAY,QAAQ,SAAS,WAAW,QAAQ,QAAQ,aAAiB,IAAA;AAChG,QAAM,aAAa,cAAc;AACjC,QAAM,EAAE,UAAU,UAAU,IAAI,SAAS;AAEzC,QAAM,WAAW,eAAe,WAAW,MAAM,QAAQ,KAAK;AAE9D,QAAM,eAAe,WAAW,OAAO,OAAO,EAAE,CAAC,OAAO,cAAc,CAAC,GAAG,MAAM,GAAG,SAAS;AAG1F,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK,UAAU,CAAC,KAAK,QAAQ,CAAC;AAAA,MAC9B,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAC9B,WAAW;AAAA,MACX,cAAY;AAAA,MACZ;AAAA,MACA,MAAK;AAAA,MAEL,8BAAC,MAAK,EAAA,SAAS,GAAG,OAAc,MAAM,UAAU,UAAsB,CAAA;AAAA,IAAA;AAAA,EACxE;AAEJ,CAAC;"}

package/ErrorBoundary.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React__default from "react";
 const __variableDynamicImportRuntimeHelper = (glob, path, segs) => {
   const v = glob[path];
   if (v) {
@@ -15,7 +15,7 @@ const __variableDynamicImportRuntimeHelper = (glob, path, segs) => {
     );
   });
 };
-class ErrorBoundary extends React.Component {
+class ErrorBoundary extends React__default.Component {
   constructor(props) {
     super(props);
     this.state = {

package/ErrorBoundary.js.map

@@ -1 +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":[],"mappings":";;;;;;;;;;;;;;;;;AAYA,MAAM,sBAAyB,MAAM,UAAqD;AAAA,EACxF,YAAY,OAA8B;AACxC,UAAM,KAAK;AACX,SAAK,QAAQ;AAAA,MACX,OAAO;AAAA,IACT;AAAA,EAAA;AAAA,EAGF,oBAA0B;AACxB,SAAK,SAAS,EAAE,OAAO,KAAA,CAAM;AAAA,EAAA;AAAA,EAG/B,mBAAmB,WAAkD;AACnE,QAAI,UAAU,UAAU,KAAK,MAAM,OAAO;AACxC,WAAK,SAAS,EAAE,OAAO,MAAA,CAAO;AAAA,IAAA;AAAA,EAChC;AAAA,EAGF,SAA0B;AACxB,WAAO,KAAK,MAAM,QAAQ,KAAK,MAAM,WAAW,KAAK,MAAM;AAAA,EAAA;AAE/D;"}
+{"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":["React"],"mappings":";;;;;;;;;;;;;;;;;AAYA,MAAM,sBAAyBA,eAAM,UAAqD;AAAA,EACxF,YAAY,OAA8B;AACxC,UAAM,KAAK;AACX,SAAK,QAAQ;AAAA,MACX,OAAO;AAAA,IACT;AAAA,EAAA;AAAA,EAGF,oBAA0B;AACxB,SAAK,SAAS,EAAE,OAAO,KAAA,CAAM;AAAA,EAAA;AAAA,EAG/B,mBAAmB,WAAkD;AACnE,QAAI,UAAU,UAAU,KAAK,MAAM,OAAO;AACxC,WAAK,SAAS,EAAE,OAAO,MAAA,CAAO;AAAA,IAAA;AAAA,EAChC;AAAA,EAGF,SAA0B;AACxB,WAAO,KAAK,MAAM,QAAQ,KAAK,MAAM,WAAW,KAAK,MAAM;AAAA,EAAA;AAE/D;"}

package/Expander.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useRef } from "react";
 import classNames from "classnames";
-import { ZIndex, AnalyticsId, IconSize } from "./constants.js";
+import { AnalyticsId, IconSize } from "./constants.js";
 import { useExpand } from "./hooks/useExpand.js";
 import { useHover } from "./hooks/useHover.js";
 import { useSize } from "./hooks/useSize.js";
@@ -30,7 +30,7 @@ const Expander = (props) => {
     testId,
     onExpand,
     renderChildrenWhenClosed = false,
-    zIndex = ZIndex.ExpanderTrigger
+    zIndex
   } = props;
   const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);
   const expanderRef = useRef(null);

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 { useSize } from '../../hooks/useSize';\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 contentSize = useSize(expanderRef);\n  const triggerSize = useSize(triggerRef);\n\n  const isSticky = sticky && isExpanded;\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 && 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 && contentSize?.width ? `${contentSize.width}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(styles['expander__button'], isExpanded && styles['expander__button--expanded']);\n\n  const renderButton = (): React.ReactNode => (\n    <div\n      style={{\n        width: isSticky && triggerSize?.width ? `${triggerSize?.width}px` : undefined,\n        height: isSticky && triggerSize?.height ? `${triggerSize?.height}px` : undefined,\n      }}\n      className={classNames({\n        [styles['expander__button-container--sticky']]: isSticky,\n      })}\n    >\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    </div>\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      { [styles['expander__content--sticky']]: isSticky },\n      contentClassNames\n    );\n\n    return <div className={contentClassName}>{children}</div>;\n  };\n\n  return (\n    <div className={styles['expander']} ref={expanderRef}>\n      {size === ExpanderSize.large ? renderTrigger() : renderButton()}\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default Expander;\n"],"names":["ExpanderSize"],"mappings":"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"}
+{"version":3,"file":"Expander.js","sources":["../src/components/Expander/Expander.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useHover } from '../../hooks/useHover';\nimport { useSize } from '../../hooks/useSize';\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,\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 contentSize = useSize(expanderRef);\n  const triggerSize = useSize(triggerRef);\n\n  const isSticky = sticky && isExpanded;\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 && 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 && contentSize?.width ? `${contentSize.width}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(styles['expander__button'], isExpanded && styles['expander__button--expanded']);\n\n  const renderButton = (): React.ReactNode => (\n    <div\n      style={{\n        width: isSticky && triggerSize?.width ? `${triggerSize?.width}px` : undefined,\n        height: isSticky && triggerSize?.height ? `${triggerSize?.height}px` : undefined,\n      }}\n      className={classNames({\n        [styles['expander__button-container--sticky']]: isSticky,\n      })}\n    >\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    </div>\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      { [styles['expander__content--sticky']]: isSticky },\n      contentClassNames\n    );\n\n    return <div className={contentClassName}>{children}</div>;\n  };\n\n  return (\n    <div className={styles['expander']} ref={expanderRef}>\n      {size === ExpanderSize.large ? renderTrigger() : renderButton()}\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default Expander;\n"],"names":["ExpanderSize"],"mappings":"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"}

package/FormGroup.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import React, { useState } from "react";
+import React__default, { useState } from "react";
 import classNames from "classnames";
 import { FormOnColor, FormSize, AnalyticsId } from "./constants.js";
 import { useUuid } from "./hooks/useUuid.js";
@@ -14,7 +14,7 @@ import { S as Slider } from "./Slider.js";
 import { T as Textarea } from "./Textarea.js";
 import { T as Title } from "./Title.js";
 import formGroupStyles from "./components/FormGroup/styles.module.scss";
-const FormGroup = React.forwardRef((props, ref) => {
+const FormGroup = React__default.forwardRef((props, ref) => {
   const {
     className,
     fieldsetClassName,
@@ -43,12 +43,12 @@ const FormGroup = React.forwardRef((props, ref) => {
   const fieldsetClasses = classNames(formGroupStyles["field-set"], fieldsetClassName);
   const mapFormComponent = (child, index) => {
     if (isComponent(child, FormLayout)) {
-      return React.cloneElement(child, {
+      return React__default.cloneElement(child, {
         size,
         mapHelper: mapFormComponent
       });
     } else if (isComponent(child, FormGroup)) {
-      return React.cloneElement(child, {
+      return React__default.cloneElement(child, {
         onColor,
         size,
         error,
@@ -56,7 +56,7 @@ const FormGroup = React.forwardRef((props, ref) => {
         errorTextId: errorTextUuid
       });
     } else if (isComponent(child, Checkbox)) {
-      return React.cloneElement(child, {
+      return React__default.cloneElement(child, {
         name: name ?? child.props.name,
         onColor,
         size,
@@ -65,7 +65,7 @@ const FormGroup = React.forwardRef((props, ref) => {
       });
     } else if (isComponent(child, RadioButton)) {
       const radioId = typeof child.props.inputId === "undefined" ? radioGroupId + index : child.props.inputId;
-      return React.cloneElement(child, {
+      return React__default.cloneElement(child, {
         inputId: radioId,
         name: name ?? child.props.name,
         onColor,
@@ -79,7 +79,7 @@ const FormGroup = React.forwardRef((props, ref) => {
         labelClassNames: getRadioLabelClasses(radioId, onColor, isLarge, checkedRadioId)
       });
     } else if (isComponent(child, Input)) {
-      return React.cloneElement(child, {
+      return React__default.cloneElement(child, {
         name: name ?? child.props.name,
         onColor,
         size,
@@ -87,21 +87,21 @@ const FormGroup = React.forwardRef((props, ref) => {
         errorTextId: errorTextUuid
       });
     } else if (isComponent(child, Textarea)) {
-      return React.cloneElement(child, {
+      return React__default.cloneElement(child, {
         name: name ?? child.props.name,
         onColor,
         error: !!error,
         errorTextId: errorTextUuid
       });
     } else if (isComponent(child, Select)) {
-      return React.cloneElement(child, {
+      return React__default.cloneElement(child, {
         name: name ?? child.props.name,
         onColor,
         error: !!error,
         errorTextId: errorTextUuid
       });
     } else if (isComponent(child, Slider)) {
-      return React.cloneElement(child, {
+      return React__default.cloneElement(child, {
         name: name ?? child.props.name,
         error: !!error,
         errorTextId: errorTextUuid
@@ -113,11 +113,11 @@ const FormGroup = React.forwardRef((props, ref) => {
     return /* @__PURE__ */ jsxs("div", { children: [
       htmlMarkup === "div" && /* @__PURE__ */ jsxs("div", { className: fieldsetClasses, children: [
         props.legend && /* @__PURE__ */ jsx("h5", { className: legendClasses, children: props.legend }),
-        React.Children.map(props.children, mapFormComponent)
+        React__default.Children.map(props.children, mapFormComponent)
       ] }),
       htmlMarkup === "fieldset" && /* @__PURE__ */ jsxs("fieldset", { name: props.fieldsetName, className: fieldsetClasses, children: [
         props.legend && /* @__PURE__ */ jsx("legend", { className: legendClasses, children: props.legend }),
-        React.Children.map(props.children, mapFormComponent)
+        React__default.Children.map(props.children, mapFormComponent)
       ] })
     ] });
   };