@helsenorge/designsystem-react 13.0.0-workspaces-beta.7 → 13.0.2

package/lib/AnchorLink.js

@@ -1,17 +1,18 @@
 import { a as IconSize, n as AnalyticsId } from "./constants2.js";
 import { t as usePseudoClasses } from "./usePseudoClasses.js";
 import { t as getColor } from "./color.js";
+import { t as AsChildSlot_default } from "./AsChildSlot.js";
 import { t as Icon_default } from "./Icon.js";
 import { t as ArrowUpRight_default } from "./ArrowUpRight.js";
 import React from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import AnchorLinkStyles from "./components/AnchorLink/styles.module.scss";
 var AnchorLink = React.forwardRef((props, ref) => {
-	const { id, href, children, className, target = "_self", htmlMarkup = "a", onClick, testId } = props;
+	const { asChild, id, href, children, className, target = "_self", htmlMarkup = "a", onClick, testId } = props;
 	const external = target === "_blank";
 	const { refObject, isHovered } = usePseudoClasses(ref);
-	const anchorClasses = cn(AnchorLinkStyles.anchorlink, className);
+	const anchorClasses = classNames(AnchorLinkStyles.anchorlink, className);
 	const commonProps = {
 		id,
 		["data-testid"]: testId,
@@ -26,7 +27,13 @@ var AnchorLink = React.forwardRef((props, ref) => {
 		size: IconSize.XSmall,
 		isHovered
 	})] });
-	return /* @__PURE__ */ jsxs(Fragment, { children: [htmlMarkup === "a" && /* @__PURE__ */ jsx("a", {
+	if (asChild) return /* @__PURE__ */ jsx(AsChildSlot_default, {
+		content: /* @__PURE__ */ jsx("span", { className: anchorClasses }),
+		className: AnchorLinkStyles["anchorlink-wrapper"],
+		elementRef: refObject,
+		children
+	});
+	if (htmlMarkup === "a") return /* @__PURE__ */ jsx("a", {
 		href,
 		target,
 		className: anchorClasses,
@@ -34,7 +41,8 @@ var AnchorLink = React.forwardRef((props, ref) => {
 		ref: refObject,
 		...commonProps,
 		children: renderContent()
-	}), htmlMarkup === "button" && /* @__PURE__ */ jsx("button", {
+	});
+	return /* @__PURE__ */ jsx("button", {
 		type: "button",
 		className: AnchorLinkStyles["anchorlink-wrapper"],
 		ref: refObject,
@@ -43,7 +51,7 @@ var AnchorLink = React.forwardRef((props, ref) => {
 			className: anchorClasses,
 			children: renderContent()
 		})
-	})] });
+	});
 });
 AnchorLink.displayName = "AnchorLink";
 var AnchorLink_default$1 = AnchorLink;

package/lib/AnchorLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnchorLink.js","names":[],"sources":["../src/components/AnchorLink/AnchorLink.tsx","../src/components/AnchorLink/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\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<unknown>\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 { refObject, isHovered } = usePseudoClasses<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 = (): React.ReactElement => (\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={refObject 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={refObject as React.RefObject<HTMLButtonElement>}\n          {...commonProps}\n        >\n          <span className={anchorClasses}>{renderContent()}</span>\n        </button>\n      )}\n    </>\n  );\n});\n\nAnchorLink.displayName = 'AnchorLink';\n\nexport default AnchorLink;\n","import AnchorLink from './AnchorLink';\nexport * from './AnchorLink';\nexport default AnchorLink;\n"],"mappings":";;;;;;;;;AAyCA,IAAM,aAAa,MAAM,YAAoE,OAAO,QAAQ;CAC1G,MAAM,EAAE,IAAI,MAAM,UAAU,WAAW,SAAS,SAAS,aAAa,KAAK,SAAS,WAAW;CAC/F,MAAM,WAAW,WAAW;CAC5B,MAAM,EAAE,WAAW,cAAc,iBAC/B,IACD;CACD,MAAM,gBAAgB,GAAW,iBAAiB,YAAY,UAAU;CAExE,MAAM,cAAc;EAClB;GACC,gBAAgB;GAChB,qBAAqB,YAAY;EAClC;EACD;CAED,MAAM,sBACJ,qBAAA,UAAA,EAAA,UAAA,CACG,UACA,YACC,oBAAC,cAAA;EACC,WAAW,iBAAiB;EAC5B,SAAS;EACT,OAAO,SAAS,aAAa,IAAI;EACjC,YAAY,SAAS,aAAa,IAAI;EACtC,MAAM,SAAS;EACJ;GACX,CAAA,EAAA,CAEH;AAGL,QACE,qBAAA,UAAA,EAAA,UAAA,CACG,eAAe,OACd,oBAAC,KAAA;EACO;EACE;EACR,WAAW;EACX,KAAK,WAAW,wBAAwB,KAAA;EACxC,KAAK;EACL,GAAI;YAEH,eAAe;GACd,EAEL,eAAe,YACd,oBAAC,UAAA;EACC,MAAK;EACL,WAAW,iBAAiB;EAC5B,KAAK;EACL,GAAI;YAEJ,oBAAC,QAAA;GAAK,WAAW;aAAgB,eAAe;IAAQ;GACjD,CAAA,EAAA,CAEV;EAEL;AAEF,WAAW,cAAc;AClGzB,IAAA,uBDoGe"}
+{"version":3,"file":"AnchorLink.js","names":[],"sources":["../src/components/AnchorLink/AnchorLink.tsx","../src/components/AnchorLink/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys';\nimport AsChildSlot from '../AsChildSlot';\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<unknown>\n  | React.KeyboardEvent<HTMLUListElement>\n  | null;\n\nexport interface AnchorLinkProps {\n  /** When true, onclick and keyboard events will be passed to the child. */\n  asChild?: boolean;\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 { asChild, id, href, children, className, target = '_self', htmlMarkup = 'a', onClick, testId } = props;\n  const external = target === '_blank';\n  const { refObject, isHovered } = usePseudoClasses<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 = (): React.ReactElement => (\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  if (asChild) {\n    return (\n      <AsChildSlot\n        content={<span className={anchorClasses} />}\n        className={AnchorLinkStyles['anchorlink-wrapper']}\n        elementRef={refObject as React.Ref<HTMLElement>}\n      >\n        {children}\n      </AsChildSlot>\n    );\n  }\n\n  if (htmlMarkup === 'a') {\n    return (\n      <a\n        href={href}\n        target={target}\n        className={anchorClasses}\n        rel={external ? 'noopener noreferrer' : undefined}\n        ref={refObject as React.RefObject<HTMLAnchorElement>}\n        {...commonProps}\n      >\n        {renderContent()}\n      </a>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      className={AnchorLinkStyles['anchorlink-wrapper']}\n      ref={refObject as React.RefObject<HTMLButtonElement>}\n      {...commonProps}\n    >\n      <span className={anchorClasses}>{renderContent()}</span>\n    </button>\n  );\n});\n\nAnchorLink.displayName = 'AnchorLink';\n\nexport default AnchorLink;\n","import AnchorLink from './AnchorLink';\nexport * from './AnchorLink';\nexport default AnchorLink;\n"],"mappings":";;;;;;;;;;AA4CA,IAAM,aAAa,MAAM,YAAoE,OAAO,QAAQ;CAC1G,MAAM,EAAE,SAAS,IAAI,MAAM,UAAU,WAAW,SAAS,SAAS,aAAa,KAAK,SAAS,WAAW;CACxG,MAAM,WAAW,WAAW;CAC5B,MAAM,EAAE,WAAW,cAAc,iBAC/B,IACD;CACD,MAAM,gBAAgB,WAAW,iBAAiB,YAAY,UAAU;CAExE,MAAM,cAAc;EAClB;GACC,gBAAgB;GAChB,qBAAqB,YAAY;EAClC;EACD;CAED,MAAM,sBACJ,qBAAA,UAAA,EAAA,UAAA,CACG,UACA,YACC,oBAAC,cAAA;EACC,WAAW,iBAAiB;EAC5B,SAAS;EACT,OAAO,SAAS,aAAa,IAAI;EACjC,YAAY,SAAS,aAAa,IAAI;EACtC,MAAM,SAAS;EACJ;GACX,CAAA,EAAA,CAEH;AAGL,KAAI,QACF,QACE,oBAAC,qBAAA;EACC,SAAS,oBAAC,QAAA,EAAK,WAAW,eAAA,CAAiB;EAC3C,WAAW,iBAAiB;EAC5B,YAAY;EAEX;GACW;AAIlB,KAAI,eAAe,IACjB,QACE,oBAAC,KAAA;EACO;EACE;EACR,WAAW;EACX,KAAK,WAAW,wBAAwB,KAAA;EACxC,KAAK;EACL,GAAI;YAEH,eAAe;GACd;AAIR,QACE,oBAAC,UAAA;EACC,MAAK;EACL,WAAW,iBAAiB;EAC5B,KAAK;EACL,GAAI;YAEJ,oBAAC,QAAA;GAAK,WAAW;aAAgB,eAAe;IAAQ;GACjD;EAEX;AAEF,WAAW,cAAc;AChHzB,IAAA,uBDkHe"}

package/lib/AsChildSlot.js

@@ -45,6 +45,7 @@ const AsChildSlot = React.forwardRef(({ children, className, content, disabled,
 		}
 	};
 	const isButtonLike = typeof childProps.href === "undefined";
+	const wrappedChildren = content && React.isValidElement(content) ? React.cloneElement(content, content.props, childElement.props.children) : childElement.props.children;
 	return React.cloneElement(childElement, {
 		ref: mergedRef,
 		className: `${styles["as-child-reset"]} ${className ?? ""}`,
@@ -54,7 +55,7 @@ const AsChildSlot = React.forwardRef(({ children, className, content, disabled,
 		...isButtonLike && !("type" in childProps) ? { type: "button" } : null,
 		onClick: wrappedOnClick,
 		onKeyDown: wrappedOnKeyDown,
-		children: content
+		children: wrappedChildren
 	});
 });
 AsChildSlot.displayName = "AsChildSlot";

package/lib/AsChildSlot.js.map

@@ -1 +1 @@
-{"version":3,"file":"AsChildSlot.js","names":["wrappedOnClick: React.MouseEventHandler<HTMLElement>","wrappedOnKeyDown: React.KeyboardEventHandler<HTMLElement>"],"sources":["../src/components/AsChildSlot/AsChildSlot.tsx","../src/components/AsChildSlot/index.ts"],"sourcesContent":["import React from 'react';\n\nimport { mergeRefs } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport interface AsChildSlotHandle {\n  /** Click the child’s DOM node */\n  click: () => void;\n}\n\nexport interface AsChildSlotProps {\n  /** Pass one element/component that we will map to a DOM element (<a>, <button>, React Router <Link>) */\n  children?: React.ReactNode;\n  /** Class names to apply to the visible element */\n  className?: string;\n  /** Content to render inside the visible element - For example the text and icons of the parent component that renders AsChildSlot */\n  content?: React.ReactNode;\n  /** Disabled state passed down (merged with child’s disabled/aria-disabled) */\n  disabled?: boolean;\n  /** Called before the child’s onClick when visible */\n  onSelect?: (e: React.SyntheticEvent) => void;\n  /** Optional states to apply to the DOM element */\n  ariaCurrent?: 'page' | 'true';\n  /** DOM ref for the element we end up rendering */\n  elementRef?: React.Ref<HTMLElement>;\n}\n\nconst isAriaDisabled = (v: unknown): boolean => v === true || v === 'true';\n\nexport const AsChildSlot = React.forwardRef<AsChildSlotHandle, AsChildSlotProps>(\n  ({ children, className, content, disabled, onSelect, ariaCurrent, elementRef }, forwardedRef) => {\n    const childElement = React.Children.toArray(children).filter(React.isValidElement)[0] as React.ReactElement | undefined;\n    const nodeRef = React.useRef<HTMLElement | null>(null);\n    const childRef = (childElement as unknown as { ref?: React.Ref<HTMLElement> | undefined })?.ref;\n    const mergedRef = mergeRefs<HTMLElement>([\n      (node): void => {\n        nodeRef.current = node;\n      },\n      childRef,\n      elementRef,\n    ]);\n\n    const childProps =\n      (childElement?.props as Partial<React.DOMAttributes<HTMLElement>> &\n        Partial<React.AnchorHTMLAttributes<HTMLElement>> &\n        Partial<React.ButtonHTMLAttributes<HTMLElement>> & { disabled?: boolean; href?: unknown }) || {};\n    const childDisabled = !!childProps.disabled || isAriaDisabled((childProps as React.AriaAttributes)['aria-disabled']);\n    const isDisabled = !!disabled || childDisabled;\n\n    // Exposes a callable click() to the parents.\n    React.useImperativeHandle(\n      forwardedRef,\n      () => ({\n        click: (): void => {\n          if (isDisabled) return;\n          nodeRef.current?.click();\n        },\n      }),\n      [isDisabled]\n    );\n\n    if (!childElement) return null;\n\n    // Actual user mouse interaction\n    const childOnClick = childProps.onClick as React.MouseEventHandler<HTMLElement> | undefined;\n    const wrappedOnClick: React.MouseEventHandler<HTMLElement> = e => {\n      if (isDisabled) {\n        e.preventDefault();\n        e.stopPropagation();\n        return;\n      }\n      onSelect?.(e);\n      childOnClick?.(e);\n    };\n\n    // Actual user keyboard interaction\n    const childOnKeyDown = childProps.onKeyDown as React.KeyboardEventHandler<HTMLElement> | undefined;\n    const wrappedOnKeyDown: React.KeyboardEventHandler<HTMLElement> = e => {\n      childOnKeyDown?.(e);\n      if (e.defaultPrevented) return;\n      if (e.key === ' ' || e.key === 'Spacebar' || e.code === 'Space') {\n        if (isDisabled) {\n          e.preventDefault();\n          return;\n        }\n        e.preventDefault();\n        nodeRef.current?.click();\n      }\n    };\n\n    const isButtonLike = typeof childProps.href === 'undefined';\n\n    return React.cloneElement(childElement, {\n      ref: mergedRef,\n      className: `${styles['as-child-reset']} ${className ?? ''}`,\n      style: undefined,\n      'aria-disabled': isDisabled || undefined,\n      'aria-current': ariaCurrent,\n      ...(isButtonLike && !('type' in childProps) ? { type: 'button' } : null),\n      onClick: wrappedOnClick,\n      onKeyDown: wrappedOnKeyDown,\n      children: content,\n    });\n  }\n);\n\nAsChildSlot.displayName = 'AsChildSlot';\n\nexport default AsChildSlot;\n","import AsChildSlot from './AsChildSlot';\nexport * from './AsChildSlot';\nexport default AsChildSlot;\n"],"mappings":";;;AA4BA,IAAM,kBAAkB,MAAwB,MAAM,QAAQ,MAAM;AAEpE,MAAa,cAAc,MAAM,YAC9B,EAAE,UAAU,WAAW,SAAS,UAAU,UAAU,aAAa,cAAc,iBAAiB;CAC/F,MAAM,eAAe,MAAM,SAAS,QAAQ,SAAS,CAAC,OAAO,MAAM,eAAe,CAAC;CACnF,MAAM,UAAU,MAAM,OAA2B,KAAK;CACtD,MAAM,WAAY,cAA0E;CAC5F,MAAM,YAAY,UAAuB;GACtC,SAAe;AACd,WAAQ,UAAU;;EAEpB;EACA;EACD,CAAC;CAEF,MAAM,aACH,cAAc,SAEiF,EAAE;CACpG,MAAM,gBAAgB,CAAC,CAAC,WAAW,YAAY,eAAgB,WAAoC,iBAAiB;CACpH,MAAM,aAAa,CAAC,CAAC,YAAY;AAGjC,OAAM,oBACJ,qBACO,EACL,aAAmB;AACjB,MAAI,WAAY;AAChB,UAAQ,SAAS,OAAO;IAE3B,GACD,CAAC,WAAW,CACb;AAED,KAAI,CAAC,aAAc,QAAO;CAG1B,MAAM,eAAe,WAAW;CAChC,MAAMA,kBAAuD,MAAK;AAChE,MAAI,YAAY;AACd,KAAE,gBAAgB;AAClB,KAAE,iBAAiB;AACnB;;AAEF,aAAW,EAAE;AACb,iBAAe,EAAE;;CAInB,MAAM,iBAAiB,WAAW;CAClC,MAAMC,oBAA4D,MAAK;AACrE,mBAAiB,EAAE;AACnB,MAAI,EAAE,iBAAkB;AACxB,MAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,cAAc,EAAE,SAAS,SAAS;AAC/D,OAAI,YAAY;AACd,MAAE,gBAAgB;AAClB;;AAEF,KAAE,gBAAgB;AAClB,WAAQ,SAAS,OAAO;;;CAI5B,MAAM,eAAe,OAAO,WAAW,SAAS;AAEhD,QAAO,MAAM,aAAa,cAAc;EACtC,KAAK;EACL,WAAW,GAAG,OAAO,kBAAkB,GAAG,aAAa;EACvD,OAAO,KAAA;EACP,iBAAiB,cAAc,KAAA;EAC/B,gBAAgB;EAChB,GAAI,gBAAgB,EAAE,UAAU,cAAc,EAAE,MAAM,UAAU,GAAG;EACnE,SAAS;EACT,WAAW;EACX,UAAU;EACX,CAAC;EAEL;AAED,YAAY,cAAc;ACzG1B,IAAA,wBD2Ge"}
+{"version":3,"file":"AsChildSlot.js","names":["wrappedOnClick: React.MouseEventHandler<HTMLElement>","wrappedOnKeyDown: React.KeyboardEventHandler<HTMLElement>"],"sources":["../src/components/AsChildSlot/AsChildSlot.tsx","../src/components/AsChildSlot/index.ts"],"sourcesContent":["import React from 'react';\n\nimport { mergeRefs } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport interface AsChildSlotHandle {\n  /** Click the child’s DOM node */\n  click: () => void;\n}\n\nexport interface AsChildSlotProps {\n  /** Pass one element/component that we will map to a DOM element (<a>, <button>, React Router <Link>) */\n  children?: React.ReactNode;\n  /** Class names to apply to the visible element */\n  className?: string;\n  /** Content to render inside the visible element - For example the text and icons of the parent component that renders AsChildSlot */\n  content?: React.ReactNode;\n  /** Disabled state passed down (merged with child’s disabled/aria-disabled) */\n  disabled?: boolean;\n  /** Called before the child’s onClick when visible */\n  onSelect?: (e: React.SyntheticEvent) => void;\n  /** Optional states to apply to the DOM element */\n  ariaCurrent?: 'page' | 'true';\n  /** DOM ref for the element we end up rendering */\n  elementRef?: React.Ref<HTMLElement>;\n}\n\nconst isAriaDisabled = (v: unknown): boolean => v === true || v === 'true';\n\nexport const AsChildSlot = React.forwardRef<AsChildSlotHandle, AsChildSlotProps>(\n  ({ children, className, content, disabled, onSelect, ariaCurrent, elementRef }, forwardedRef) => {\n    const childElement = React.Children.toArray(children).filter(React.isValidElement)[0] as React.ReactElement | undefined;\n    const nodeRef = React.useRef<HTMLElement | null>(null);\n    const childRef = (childElement as unknown as { ref?: React.Ref<HTMLElement> | undefined })?.ref;\n    const mergedRef = mergeRefs<HTMLElement>([\n      (node): void => {\n        nodeRef.current = node;\n      },\n      childRef,\n      elementRef,\n    ]);\n\n    const childProps =\n      (childElement?.props as Partial<React.DOMAttributes<HTMLElement>> &\n        Partial<React.AnchorHTMLAttributes<HTMLElement>> &\n        Partial<React.ButtonHTMLAttributes<HTMLElement>> & { disabled?: boolean; href?: unknown }) || {};\n    const childDisabled = !!childProps.disabled || isAriaDisabled((childProps as React.AriaAttributes)['aria-disabled']);\n    const isDisabled = !!disabled || childDisabled;\n\n    // Exposes a callable click() to the parents.\n    React.useImperativeHandle(\n      forwardedRef,\n      () => ({\n        click: (): void => {\n          if (isDisabled) return;\n          nodeRef.current?.click();\n        },\n      }),\n      [isDisabled]\n    );\n\n    if (!childElement) return null;\n\n    // Actual user mouse interaction\n    const childOnClick = childProps.onClick as React.MouseEventHandler<HTMLElement> | undefined;\n    const wrappedOnClick: React.MouseEventHandler<HTMLElement> = e => {\n      if (isDisabled) {\n        e.preventDefault();\n        e.stopPropagation();\n        return;\n      }\n      onSelect?.(e);\n      childOnClick?.(e);\n    };\n\n    // Actual user keyboard interaction\n    const childOnKeyDown = childProps.onKeyDown as React.KeyboardEventHandler<HTMLElement> | undefined;\n    const wrappedOnKeyDown: React.KeyboardEventHandler<HTMLElement> = e => {\n      childOnKeyDown?.(e);\n      if (e.defaultPrevented) return;\n      if (e.key === ' ' || e.key === 'Spacebar' || e.code === 'Space') {\n        if (isDisabled) {\n          e.preventDefault();\n          return;\n        }\n        e.preventDefault();\n        nodeRef.current?.click();\n      }\n    };\n\n    const isButtonLike = typeof childProps.href === 'undefined';\n    const wrappedChildren =\n      content && React.isValidElement(content)\n        ? React.cloneElement(content, content.props, childElement.props.children)\n        : childElement.props.children;\n\n    return React.cloneElement(childElement, {\n      ref: mergedRef,\n      className: `${styles['as-child-reset']} ${className ?? ''}`,\n      style: undefined,\n      'aria-disabled': isDisabled || undefined,\n      'aria-current': ariaCurrent,\n      ...(isButtonLike && !('type' in childProps) ? { type: 'button' } : null),\n      onClick: wrappedOnClick,\n      onKeyDown: wrappedOnKeyDown,\n      children: wrappedChildren,\n    });\n  }\n);\n\nAsChildSlot.displayName = 'AsChildSlot';\n\nexport default AsChildSlot;\n","import AsChildSlot from './AsChildSlot';\nexport * from './AsChildSlot';\nexport default AsChildSlot;\n"],"mappings":";;;AA4BA,IAAM,kBAAkB,MAAwB,MAAM,QAAQ,MAAM;AAEpE,MAAa,cAAc,MAAM,YAC9B,EAAE,UAAU,WAAW,SAAS,UAAU,UAAU,aAAa,cAAc,iBAAiB;CAC/F,MAAM,eAAe,MAAM,SAAS,QAAQ,SAAS,CAAC,OAAO,MAAM,eAAe,CAAC;CACnF,MAAM,UAAU,MAAM,OAA2B,KAAK;CACtD,MAAM,WAAY,cAA0E;CAC5F,MAAM,YAAY,UAAuB;GACtC,SAAe;AACd,WAAQ,UAAU;;EAEpB;EACA;EACD,CAAC;CAEF,MAAM,aACH,cAAc,SAEiF,EAAE;CACpG,MAAM,gBAAgB,CAAC,CAAC,WAAW,YAAY,eAAgB,WAAoC,iBAAiB;CACpH,MAAM,aAAa,CAAC,CAAC,YAAY;AAGjC,OAAM,oBACJ,qBACO,EACL,aAAmB;AACjB,MAAI,WAAY;AAChB,UAAQ,SAAS,OAAO;IAE3B,GACD,CAAC,WAAW,CACb;AAED,KAAI,CAAC,aAAc,QAAO;CAG1B,MAAM,eAAe,WAAW;CAChC,MAAMA,kBAAuD,MAAK;AAChE,MAAI,YAAY;AACd,KAAE,gBAAgB;AAClB,KAAE,iBAAiB;AACnB;;AAEF,aAAW,EAAE;AACb,iBAAe,EAAE;;CAInB,MAAM,iBAAiB,WAAW;CAClC,MAAMC,oBAA4D,MAAK;AACrE,mBAAiB,EAAE;AACnB,MAAI,EAAE,iBAAkB;AACxB,MAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,cAAc,EAAE,SAAS,SAAS;AAC/D,OAAI,YAAY;AACd,MAAE,gBAAgB;AAClB;;AAEF,KAAE,gBAAgB;AAClB,WAAQ,SAAS,OAAO;;;CAI5B,MAAM,eAAe,OAAO,WAAW,SAAS;CAChD,MAAM,kBACJ,WAAW,MAAM,eAAe,QAAQ,GACpC,MAAM,aAAa,SAAS,QAAQ,OAAO,aAAa,MAAM,SAAS,GACvE,aAAa,MAAM;AAEzB,QAAO,MAAM,aAAa,cAAc;EACtC,KAAK;EACL,WAAW,GAAG,OAAO,kBAAkB,GAAG,aAAa;EACvD,OAAO,KAAA;EACP,iBAAiB,cAAc,KAAA;EAC/B,gBAAgB;EAChB,GAAI,gBAAgB,EAAE,UAAU,cAAc,EAAE,MAAM,UAAU,GAAG;EACnE,SAAS;EACT,WAAW;EACX,UAAU;EACX,CAAC;EAEL;AAED,YAAY,cAAc;AC7G1B,IAAA,wBD+Ge"}

package/lib/Avatar.js

@@ -3,7 +3,7 @@ import { t as palette } from "./palette.js";
 import { t as Icon_default } from "./Icon.js";
 import { t as Check_default } from "./Check.js";
 import React from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/Avatar/styles.module.scss";
 let AvatarSize = /* @__PURE__ */ function(AvatarSize$1) {
@@ -15,7 +15,7 @@ var Avatar_default$1 = React.forwardRef(function AvatarForwardedRef(props, ref)
 	const { children, className = "", selected = false, color = "blueberry", variant = "square", size = AvatarSize.small, testId } = props;
 	const truncatedName = children.charAt(0).toLocaleUpperCase() + children.substring(1, 2);
 	return /* @__PURE__ */ jsx("span", {
-		className: cn(styles.avatar, selected && styles["avatar--selected"], color === "black" && styles["avatar--black"], variant === "circle" && styles["avatar--circle"], size === AvatarSize.xsmall && styles["avatar--xsmall"], size === AvatarSize.small && styles["avatar--small"], className),
+		className: classNames(styles.avatar, selected && styles["avatar--selected"], color === "black" && styles["avatar--black"], variant === "circle" && styles["avatar--circle"], size === AvatarSize.xsmall && styles["avatar--xsmall"], size === AvatarSize.small && styles["avatar--small"], className),
 		ref,
 		"data-testid": testId,
 		"data-analyticsid": AnalyticsId.Avatar,

package/lib/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":["Avatar: AvatarType"],"sources":["../src/components/Avatar/Avatar.tsx","../src/components/Avatar/index.ts"],"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","import Avatar from './Avatar';\nexport * from './Avatar';\nexport default Avatar;\n"],"mappings":";;;;;;;;AAWA,IAAY,aAAA,yBAAA,cAAL;AACL,cAAA,YAAA;AACA,cAAA,WAAA;;;ACXF,IAAA,mBD+B2B,MAAM,WAAW,SAAS,mBAAmB,OAAoB,KAAsC;CAChI,MAAM,EAAE,UAAU,YAAY,IAAI,WAAW,OAAO,QAAQ,aAAa,UAAU,UAAU,OAAO,WAAW,OAAO,WAAW;CACjI,MAAM,gBAAgB,SAAS,OAAO,EAAE,CAAC,mBAAmB,GAAG,SAAS,UAAU,GAAG,EAAE;AACvF,QACE,oBAAC,QAAA;EACC,WAAW,GACT,OAAO,QACP,YAAY,OAAO,qBACnB,UAAU,WAAW,OAAO,kBAC5B,YAAY,YAAY,OAAO,mBAC/B,SAAS,WAAW,UAAU,OAAO,mBACrC,SAAS,WAAW,SAAS,OAAO,kBACpC,UACD;EACI;EACL,eAAa;EACb,oBAAkB,YAAY;YAE7B,WACC,oBAAC,cAAA;GAAK,SAAS;GAAO,MAAM,SAAS;GAAO,OAAO,UAAU,UAAU,QAAQ,aAAa,QAAQ;IAAgB,GAEpH;GAEG;EAET"}
+{"version":3,"file":"Avatar.js","names":["Avatar: AvatarType"],"sources":["../src/components/Avatar/Avatar.tsx","../src/components/Avatar/index.ts"],"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","import Avatar from './Avatar';\nexport * from './Avatar';\nexport default Avatar;\n"],"mappings":";;;;;;;;AAWA,IAAY,aAAA,yBAAA,cAAL;AACL,cAAA,YAAA;AACA,cAAA,WAAA;;;ACXF,IAAA,mBD+B2B,MAAM,WAAW,SAAS,mBAAmB,OAAoB,KAAsC;CAChI,MAAM,EAAE,UAAU,YAAY,IAAI,WAAW,OAAO,QAAQ,aAAa,UAAU,UAAU,OAAO,WAAW,OAAO,WAAW;CACjI,MAAM,gBAAgB,SAAS,OAAO,EAAE,CAAC,mBAAmB,GAAG,SAAS,UAAU,GAAG,EAAE;AACvF,QACE,oBAAC,QAAA;EACC,WAAW,WACT,OAAO,QACP,YAAY,OAAO,qBACnB,UAAU,WAAW,OAAO,kBAC5B,YAAY,YAAY,OAAO,mBAC/B,SAAS,WAAW,UAAU,OAAO,mBACrC,SAAS,WAAW,SAAS,OAAO,kBACpC,UACD;EACI;EACL,eAAa;EACb,oBAAkB,YAAY;YAE7B,WACC,oBAAC,cAAA;GAAK,SAAS;GAAO,MAAM,SAAS;GAAO,OAAO,UAAU,UAAU,QAAQ,aAAa,QAAQ;IAAgB,GAEpH;GAEG;EAET"}

package/lib/Badge.js

@@ -1,12 +1,12 @@
 import { a as IconSize, n as AnalyticsId } from "./constants2.js";
 import { t as NotificationBadge_default } from "./NotificationBadge.js";
 import React from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import badgeStyles from "./components/Badge/styles.module.scss";
 var Badge_default$1 = React.forwardRef(function BadgeForwardedRef(props, ref) {
 	const { children, className = "", color = "blueberry", testId, type = "string", notificationVariant = "info" } = props;
-	const badgeClasses = cn(badgeStyles.badge, {
+	const badgeClasses = classNames(badgeStyles.badge, {
 		[badgeStyles["badge--blueberry"]]: color === "blueberry",
 		[badgeStyles["badge--cherry"]]: color === "cherry",
 		[badgeStyles["badge--neutral"]]: color === "neutral"

package/lib/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","names":["Badge: BadgeType"],"sources":["../src/components/Badge/Badge.tsx","../src/components/Badge/index.ts"],"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","import Badge from './Badge';\nexport * from './Badge';\nexport default Badge;\n"],"mappings":";;;;;;ACEA,IAAA,kBD4ByB,MAAM,WAAW,SAAS,kBAAkB,OAAmB,KAAsC;CAC5H,MAAM,EAAE,UAAU,YAAY,IAAI,QAAQ,aAAa,QAAQ,OAAO,UAAU,sBAAsB,WAAW;CACjH,MAAM,eAAe,GACnB,YAAY,OACZ;GACG,YAAY,sBAAsB,UAAU;GAC5C,YAAY,mBAAmB,UAAU;GACzC,YAAY,oBAAoB,UAAU;EAC5C,EACD,UACD;AAED,KAAI,SAAS,kBAAkB,wBAAwB,KAAA,EACrD,QACE,oBAAC,2BAAA;EACC,SAAS;EACT,MAAM,SAAS;EACJ;EACH;EACR,oBAAkB,YAAY;GAC9B;AAIN,QACE,oBAAC,QAAA;EAAK,WAAW;EAAmB;EAAK,eAAa;EAAQ,oBAAkB,YAAY;EACzF;GACI;EAET"}
+{"version":3,"file":"Badge.js","names":["Badge: BadgeType"],"sources":["../src/components/Badge/Badge.tsx","../src/components/Badge/index.ts"],"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","import Badge from './Badge';\nexport * from './Badge';\nexport default Badge;\n"],"mappings":";;;;;;ACEA,IAAA,kBD4ByB,MAAM,WAAW,SAAS,kBAAkB,OAAmB,KAAsC;CAC5H,MAAM,EAAE,UAAU,YAAY,IAAI,QAAQ,aAAa,QAAQ,OAAO,UAAU,sBAAsB,WAAW;CACjH,MAAM,eAAe,WACnB,YAAY,OACZ;GACG,YAAY,sBAAsB,UAAU;GAC5C,YAAY,mBAAmB,UAAU;GACzC,YAAY,oBAAoB,UAAU;EAC5C,EACD,UACD;AAED,KAAI,SAAS,kBAAkB,wBAAwB,KAAA,EACrD,QACE,oBAAC,2BAAA;EACC,SAAS;EACT,MAAM,SAAS;EACJ;EACH;EACR,oBAAkB,YAAY;GAC9B;AAIN,QACE,oBAAC,QAAA;EAAK,WAAW;EAAmB;EAAK,eAAa;EAAQ,oBAAkB,YAAY;EACzF;GACI;EAET"}

package/lib/Button.js

@@ -7,7 +7,7 @@ import { t as useIcons } from "./useIcons.js";
 import { t as useIsMobileBreakpoint } from "./useIsMobileBreakpoint.js";
 import { t as ArrowRight_default } from "./ArrowRight.js";
 import React, { useEffect, useRef } from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import buttonStyles from "./components/Button/styles.module.scss";
 var getIconColor = (fill, borderless, disabled, concept, ondark, mobile) => {
@@ -41,8 +41,8 @@ var Button_default$1 = React.forwardRef(function ButtonForwardedRef(props, ref)
 	const large = size === "large" && !destructive && !borderlessVariant;
 	const hasUURightArrow = arrow === "accessibility-character" && !fluid && !leftIcon && !rightIcon && !hasArrow && borderlessVariant;
 	const rest = { ...restProps };
-	const buttonWrapperClasses = cn(buttonStyles["button-wrapper"], { [buttonStyles["button-wrapper--fluid"]]: fluid || ellipsis }, wrapperClassName);
-	const buttonClasses = cn(buttonStyles.button, {
+	const buttonWrapperClasses = classNames(buttonStyles["button-wrapper"], { [buttonStyles["button-wrapper--fluid"]]: fluid || ellipsis }, wrapperClassName);
+	const buttonClasses = classNames(buttonStyles.button, {
 		[buttonStyles["button--destructive"]]: destructive,
 		[buttonStyles["button--normal"]]: !large,
 		[buttonStyles["button--large"]]: large,
@@ -55,11 +55,11 @@ var Button_default$1 = React.forwardRef(function ButtonForwardedRef(props, ref)
 		[buttonStyles["button--arrow"]]: hasArrow,
 		[buttonStyles["button--on-dark"]]: onDark
 	}, className);
-	const buttonTextClasses = cn(buttonStyles["button__text"], {
+	const buttonTextClasses = classNames(buttonStyles["button__text"], {
 		[buttonStyles["button__text--ellipsis"]]: ellipsis,
 		[buttonStyles["button__text--centered"]]: fluid && textPosition === "centered"
 	}, textClassName);
-	const diagonalClasses = cn(buttonStyles["diagonal"], { [buttonStyles["diagonal--on-dark"]]: onDark });
+	const diagonalClasses = classNames(buttonStyles["diagonal"], { [buttonStyles["diagonal--on-dark"]]: onDark });
 	useEffect(() => {
 		checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());
 	}, []);
@@ -86,7 +86,7 @@ var Button_default$1 = React.forwardRef(function ButtonForwardedRef(props, ref)
 		children: [
 			renderIcon(leftIcon, getLargeIconSize(large, isMobile), !onlyIcon ? buttonStyles["button__left-icon"] : void 0),
 			renderButtonContent(),
-			hasArrow ? renderIcon(/* @__PURE__ */ jsx(Icon_default, { svgIcon: ArrowRight_default }), getLargeIconSize(large, isMobile), cn(buttonStyles["button__arrow"], { [buttonStyles["button__arrow--both-icons"]]: bothIcons })) : renderIcon(rightIcon, getLargeIconSize(large, isMobile), buttonStyles["button__right-icon"]),
+			hasArrow ? renderIcon(/* @__PURE__ */ jsx(Icon_default, { svgIcon: ArrowRight_default }), getLargeIconSize(large, isMobile), classNames(buttonStyles["button__arrow"], { [buttonStyles["button__arrow--both-icons"]]: bothIcons })) : renderIcon(rightIcon, getLargeIconSize(large, isMobile), buttonStyles["button__right-icon"]),
 			hasUURightArrow && /* @__PURE__ */ jsx("span", {
 				style: { color: iconColor },
 				className: buttonStyles["button__right-unicode-arrow"],

package/lib/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":[],"sources":["../src/components/Button/Button.tsx","../src/components/Button/index.ts"],"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 { BaseIconElement, useIcons } from '../../hooks/useIcons';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys/color';\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?: (\n    e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<unknown> | React.KeyboardEvent<HTMLUListElement> | null\n  ) => 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 { refObject, isHovered } = usePseudoClasses<HTMLElement>(ref as React.RefObject<HTMLElement>);\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 isMobile = useIsMobileBreakpoint();\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, isMobile);\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, isMobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n      {renderButtonContent()}\n      {hasArrow\n        ? renderIcon(\n            <Icon svgIcon={ArrowRight} />,\n            getLargeIconSize(large, isMobile),\n            classNames(buttonStyles['button__arrow'], { [buttonStyles['button__arrow--both-icons']]: bothIcons })\n          )\n        : renderIcon(rightIcon, getLargeIconSize(large, isMobile), 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={refObject 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={refObject as React.ForwardedRef<HTMLAnchorElement>}\n          tabIndex={tabIndex}\n          {...restProps}\n        >\n          {renderbuttonContentWrapper()}\n        </a>\n      )}\n    </>\n  );\n});\n\nexport default Button;\n","import Button from './Button';\nexport * from './Button';\nexport default Button;\n"],"mappings":";;;;;;;;;;;;AAoEA,IAAM,gBACJ,MACA,YACA,UACA,SACA,QACA,WACW;AACX,KAAI,UAAU,SACZ,QAAO,CAAC,UAAU,OAAO,SAAS,WAAW,CAAC,aAAa,MAAM,IAAI,GAAG,SAAS,QAAQ;AAE3F,KAAI,SACF,QAAO,CAAC,UAAU,OAAO,SAAS,WAAW,IAAI,GAAG,GAAG,SAAS,QAAQ,CAAC;AAE3E,KAAK,QAAQ,CAAC,UAAY,CAAC,QAAQ,OACjC,QAAO;AAGT,QAAO,YAAY,WAAW,SAAS,aAAa,IAAI,GAAG,SAAS,UAAU,IAAI;;AAEpF,IAAM,oBAAoB,OAAgB,WAA8B;AACtE,KAAI,UAAU,MAAO,QAAO,SAAS;AACrC,KAAI,MAAO,QAAO,SAAS;AAC3B,QAAO,SAAS;;AAGlB,IAAM,qBAAqB,UAAmB,WAA+B,WAA0B;AACrG,KAAI,UAAU,aAAa,cAAc,KAAA,KAAa,cAAc,IAClE,OAAM,IAAI,MAAM,0EAA0E;;AC9F9F,IAAA,mBDkGe,MAAM,WAAW,SAAS,mBACvC,OACA,KACA;CACA,MAAM,EACJ,WACA,IACA,UACA,kBACA,WACA,OACA,UAAU,UACV,WAAW,OACX,WAAW,OACX,QAAQ,OACR,aAAa,UACb,UAAU,WACV,QACA,SACA,OAAO,UACP,UAAU,QACV,MACA,UACA,QACA,QACA,OAAO,UACP,eACA,eAAe,QACf,GAAG,cACD;CAEJ,MAAM,CAAC,UAAU,WAAW,gBAAgB,SAAS,MAAM,SAAS,QAAQ,SAAS,CAAC;CACtF,MAAM,EAAE,WAAW,cAAc,iBAA8B,IAAoC;CACnG,MAAM,mBAAmB,OAAuB,KAAK;CACrD,MAAM,WAAW,CAAC,EAAE,YAAY,cAAc,CAAC;CAC/C,MAAM,YAAY,aAAa,aAAa,UAAU,CAAC;CACvD,MAAM,SAAS,YAAY;CAC3B,MAAM,WAAW,uBAAuB;CACxC,MAAM,cAAc,YAAY,iBAAiB,CAAC;CAClD,MAAM,iBAAiB,YAAY;CACnC,MAAM,oBAAoB,YAAY;CACtC,MAAM,YAAY,aAAa,YAAY,QAAQ,mBAAmB,UAAU,SAAS,QAAQ,SAAS;CAC1G,MAAM,WAAW,UAAU,UAAU,CAAC;CACtC,MAAM,QAAQ,SAAS,WAAW,CAAC,eAAe,CAAC;CACnD,MAAM,kBAAkB,UAAU,6BAA6B,CAAC,SAAS,CAAC,YAAY,CAAC,aAAa,CAAC,YAAY;CACjH,MAAM,OAAO,EAAE,GAAG,WAAW;CAE7B,MAAM,uBAAuB,GAC3B,aAAa,mBACb,GAAG,aAAa,2BAA2B,SAAS,UAAU,EAC9D,iBACD;CACD,MAAM,gBAAgB,GACpB,aAAa,QACb;GACG,aAAa,yBAAyB;GACtC,aAAa,oBAAoB,CAAC;GAClC,aAAa,mBAAmB;GAChC,aAAa,qBAAqB;GAClC,aAAa,wBAAwB;GACrC,aAAa,uBAAuB,YAAY,CAAC;GACjD,aAAa,wBAAwB,aAAa,CAAC;GACnD,aAAa,wBAAwB;GACrC,aAAa,uBAAuB;GACpC,aAAa,mBAAmB;GAChC,aAAa,qBAAqB;EACpC,EACD,UACD;CACD,MAAM,oBAAoB,GACxB,aAAa,iBACb;GACG,aAAa,4BAA4B;GACzC,aAAa,4BAA4B,SAAS,iBAAiB;EACrE,EACD,cACD;CACD,MAAM,kBAAkB,GAAW,aAAa,aAAa,GAC1D,aAAa,uBAAuB,QACtC,CAAC;AAEF,iBAAgB;AACd,oBAAkB,UAAU,WAAW,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC;IAC7D,EAAE,CAAC;CAEN,MAAM,cAAc,aAAqC,UAAkB,kBAAmD;AAC5H,SAAO,cACH,MAAM,aAAa,aAAa;GAC9B,MAAM;GACN,OAAO,aAAa,MAAM,SAAS,CAAC,WAAW,YAAY,MAAM,QAAQ;GACzE,WAAW,YAAY,MAAM,cAAc,KAAA,IAAY,CAAC,YAAY,YAAY,YAAY,MAAM;GAClG,WAAW;GACZ,CAAC,GACF;;CAGN,MAAM,4BAAyC;AAC7C,SACE,qBAAC,QAAA;GAAK,WAAW;GAAmB,KAAK;cACtC,YAAY,qBACX,oBAAC,QAAA;IAAK,WAAW;cACf,oBAAC,QAAA,EAAK,WAAW,aAAa,mBAAA,CAAqB;KAC9C,EAET,oBAAC,QAAA,EAAA,UAAM,WAAW,YAAY,cAAA,CAAoB,CAAA;IAC7C;;CAIX,MAAM,mCACJ,qBAAC,QAAA;EAAK,WAAW;;GACd,WAAW,UAAU,iBAAiB,OAAO,SAAS,EAAE,CAAC,WAAW,aAAa,uBAAuB,KAAA,EAAU;GAClH,qBAAqB;GACrB,WACG,WACE,oBAAC,cAAA,EAAK,SAAS,oBAAA,CAAc,EAC7B,iBAAiB,OAAO,SAAS,EACjC,GAAW,aAAa,kBAAkB,GAAG,aAAa,+BAA+B,WAAW,CAAC,CACtG,GACD,WAAW,WAAW,iBAAiB,OAAO,SAAS,EAAE,aAAa,sBAAsB;GAC/F,mBACC,oBAAC,QAAA;IAAK,OAAO,EAAE,OAAO,WAAW;IAAE,WAAW,aAAa;IAAgC,eAAA;cACxF;KACI;;GAEJ;AAGT,QACE,qBAAA,UAAA,EAAA,UAAA,CACG,eAAe,YACd,oBAAC,UAAA;EACK;EACI;EACC;EACC;EACV,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,KAAK;EACK;EACJ;EACN,GAAI;YAEH,4BAA4B;GACtB,EAEV,eAAe,OACd,oBAAC,KAAA;EACK;EACI;EACC;EACT,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACL;EACE;EACR,KAAK,WAAW,WAAW,wBAAwB,MAAM;EACzD,KAAK;EACK;EACV,GAAI;YAEH,4BAA4B;GAC3B,CAAA,EAAA,CAEL;EAEL"}
+{"version":3,"file":"Button.js","names":[],"sources":["../src/components/Button/Button.tsx","../src/components/Button/index.ts"],"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 { BaseIconElement, useIcons } from '../../hooks/useIcons';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys/color';\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 Omit<HTMLButtonProps, 'onClick' | 'type'>, Omit<HTMLAnchorProps, 'onClick'>, 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?: (\n    e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<unknown> | React.KeyboardEvent<HTMLUListElement> | null\n  ) => 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 { refObject, isHovered } = usePseudoClasses<HTMLElement>(ref as React.RefObject<HTMLElement>);\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 isMobile = useIsMobileBreakpoint();\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, isMobile);\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, isMobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n      {renderButtonContent()}\n      {hasArrow\n        ? renderIcon(\n            <Icon svgIcon={ArrowRight} />,\n            getLargeIconSize(large, isMobile),\n            classNames(buttonStyles['button__arrow'], { [buttonStyles['button__arrow--both-icons']]: bothIcons })\n          )\n        : renderIcon(rightIcon, getLargeIconSize(large, isMobile), 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={refObject 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={refObject as React.ForwardedRef<HTMLAnchorElement>}\n          tabIndex={tabIndex}\n          {...restProps}\n        >\n          {renderbuttonContentWrapper()}\n        </a>\n      )}\n    </>\n  );\n});\n\nexport default Button;\n","import Button from './Button';\nexport * from './Button';\nexport default Button;\n"],"mappings":"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"}

package/lib/CHANGELOG.md

@@ -1,3 +1,68 @@
+## [13.0.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv13.0.0&targetVersion=GTv13.0.2) (2025-12-01)
+
+
+### Features
+
+*  nye notification tokens ([0c99411](https://github.com/helsenorge/designsystem/commit/0c99411b8d84d7a33c3831634f3e4e39d78ca220)), closes [#361065](https://github.com/helsenorge/designsystem/issues/361065)
+
+
+### Bug Fixes
+
+*  github action feiler pga npm bug ([63ba3ef](https://github.com/helsenorge/designsystem/commit/63ba3ef1a4d3b1b7521876095f56339c66a4b9cb)), closes [#363968](https://github.com/helsenorge/designsystem/issues/363968)
+* **elementheader:**  sentrer ikon ([1abc825](https://github.com/helsenorge/designsystem/commit/1abc825b94fe4aebc577f57686cca0d022bcdb62)), closes [#365327](https://github.com/helsenorge/designsystem/issues/365327)
+* **listeditmode:**  fiks struktur i DOM og aria label på knapp ([517faab](https://github.com/helsenorge/designsystem/commit/517faab13e1fb98f1f7810d23cc66b9394132505)), closes [#365327](https://github.com/helsenorge/designsystem/issues/365327)
+* **listeditmode:**  legg til aria describedby på sletteknapp ([93c27bf](https://github.com/helsenorge/designsystem/commit/93c27bf9f2e743bbd0bc3c93894fc35c51b98493)), closes [#365327](https://github.com/helsenorge/designsystem/issues/365327)
+
+## [13.0.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.12.3&targetVersion=GTv13.0.0) (2025-11-25)
+
+
+### Features
+
+* **anchorlink:**  ny prop aschild med støtte for aschild patternet ([b6988a4](https://github.com/helsenorge/designsystem/commit/b6988a4664a2abd8639ad241b54e415e321499f0)), closes [#340712](https://github.com/helsenorge/designsystem/issues/340712)
+* **formfieldtag:**  tilgjengeliggjør nordsamisk ([8bee112](https://github.com/helsenorge/designsystem/commit/8bee112fa3148b3a44c8d8c68f1b011b69774e7d)), closes [#364928](https://github.com/helsenorge/designsystem/issues/364928)
+
+## 13.0.0-beta.8 (2025-11-24)
+
+
+### Bug Fixes
+
+*  deep export av component ts filer skal inkluderes i publisert pakke ([f9ca449](https://github.com/helsenorge/designsystem/commit/f9ca449205f392c497ab2a66008a9dae07a093d2)), closes [#365382](https://github.com/helsenorge/designsystem/issues/365382)
+
+## 13.0.0-beta.7 (2025-11-19)
+
+
+### Features
+
+* **formfieldtag:**  legg til engelsk og nynorsk ([c4a2365](https://github.com/helsenorge/designsystem/commit/c4a23657dae5c8e8770f6f5f89510110d1b26e79)), closes [#363896](https://github.com/helsenorge/designsystem/issues/363896)
+
+
+### Bug Fixes
+
+*  cms bygg feiler pga manglende fonts på rot ([37de8b7](https://github.com/helsenorge/designsystem/commit/37de8b7daf74be319da3612bed6dea9c0a65cc35)), closes [#365035](https://github.com/helsenorge/designsystem/issues/365035)
+
+## 13.0.0-beta.6 (2025-11-18)
+
+
+### Bug Fixes
+
+*  en rekke typescript feil i komponenter som logges under bygg ([9f5e4cd](https://github.com/helsenorge/designsystem/commit/9f5e4cdcf4c00dc4076d6c03d7e6f2eeafc5964f)), closes [#364139](https://github.com/helsenorge/designsystem/issues/364139)
+*  toast får riktig import path på breakpoints ([cde3703](https://github.com/helsenorge/designsystem/commit/cde37035258c5ad3d8c5c1f03405e39ba65879b4)), closes [#364797](https://github.com/helsenorge/designsystem/issues/364797)
+* **elementheader:**  fix rar høyde på ikon i noen scenarioer ([5bfbcf8](https://github.com/helsenorge/designsystem/commit/5bfbcf80c6faaeef37ffc7f2ff135dae7aee0ad2)), closes [#362359](https://github.com/helsenorge/designsystem/issues/362359)
+
+## 13.0.0-beta.5 (2025-11-13)
+
+
+### Features
+
+*  designsystemet bruker npm workspaces ([3aa656e](https://github.com/helsenorge/designsystem/commit/3aa656e59f93c8bd2953270b4319a1f4d4a8444d))
+
+## 13.0.0-workspaces-beta.7 (2025-11-12)
+
+
+### Features
+
+* **radiobutton:**  flytter reset mixin ut i scss mappen til radio-reset ([e4c6ade](https://github.com/helsenorge/designsystem/commit/e4c6ade4c91be42b3f12624b27223aad16ffb22a)), closes [#362474](https://github.com/helsenorge/designsystem/issues/362474)
+
 ## 13.0.0-workspaces-beta.6 (2025-11-12)
 
 ## 13.0.0-workspaces-beta.5 (2025-11-12)
@@ -74,7 +139,7 @@
 
 *  lib mappen ble ikke med i den publiserte pakken ([1c5409e](https://github.com/helsenorge/designsystem/commit/1c5409eeaf05524c315650ea11a839a70b7dfaa3)), closes [#362474](https://github.com/helsenorge/designsystem/issues/362474)
 
-## [12.12.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.12.1&targetVersion=GTv12.12.2) (2025-11-07)
+## [12.12.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.12.1&targetVersion=GTv12.12.2) (2025-11-06)
 
 ## [12.12.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.11.1&targetVersion=GTv12.12.1) (2025-11-06)
 

package/lib/Checkbox.js

@@ -2,15 +2,15 @@ import { t as uuid } from "./uuid.js";
 import { a as IconSize, i as FormSize, n as AnalyticsId, r as FormOnColor } from "./constants2.js";
 import { t as usePseudoClasses } from "./usePseudoClasses.js";
 import { t as getColor } from "./color.js";
-import { t as Icon_default } from "./Icon.js";
 import { n as mergeRefs, t as isMutableRefObject } from "./refs.js";
+import { t as Icon_default } from "./Icon.js";
 import { t as Check_default } from "./Check.js";
 import { t as useIdWithFallback } from "./useIdWithFallback.js";
 import { t as getAriaDescribedBy } from "./accessibility.js";
 import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
 import { i as renderLabelAsParent, n as getLabelText } from "./Label.js";
 import React, { useEffect, useState } from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import checkboxStyles from "./components/Checkbox/styles.module.scss";
 const Checkbox = React.forwardRef((props, ref) => {
@@ -25,8 +25,8 @@ const Checkbox = React.forwardRef((props, ref) => {
 	const large = size === FormSize.large;
 	const { refObject, isFocused } = usePseudoClasses(isMutableRefObject(ref) ? ref : null);
 	const mergedRefs = mergeRefs([ref, refObject]);
-	const checkboxWrapperClasses = cn(checkboxStyles["checkbox-wrapper"], { [checkboxStyles["checkbox-wrapper--large"]]: large });
-	const checkboxLabelClasses = cn(checkboxStyles["checkbox-label"], {
+	const checkboxWrapperClasses = classNames(checkboxStyles["checkbox-wrapper"], { [checkboxStyles["checkbox-wrapper--large"]]: large });
+	const checkboxLabelClasses = classNames(checkboxStyles["checkbox-label"], {
 		[checkboxStyles["checkbox-label--disabled"]]: disabled,
 		[checkboxStyles["checkbox-label--on-dark"]]: onDark,
 		[checkboxStyles["checkbox-label--large"]]: large,
@@ -38,8 +38,8 @@ const Checkbox = React.forwardRef((props, ref) => {
 		[checkboxStyles["checkbox-label__large--on-invalid"]]: large && onInvalid,
 		[checkboxStyles["checkbox-label__large--disabled"]]: large && disabled
 	});
-	const checkboxClasses = cn(checkboxStyles.checkbox, className);
-	const checkboxIconWrapperClasses = cn(checkboxStyles["checkbox__icon-wrapper"], {
+	const checkboxClasses = classNames(checkboxStyles.checkbox, className);
+	const checkboxIconWrapperClasses = classNames(checkboxStyles["checkbox__icon-wrapper"], {
 		[checkboxStyles["checkbox__icon-wrapper--on-white"]]: onWhite,
 		[checkboxStyles["checkbox__icon-wrapper--on-grey"]]: onGrey,
 		[checkboxStyles["checkbox__icon-wrapper--on-invalid"]]: onInvalid,
@@ -57,7 +57,7 @@ const Checkbox = React.forwardRef((props, ref) => {
 		[checkboxStyles["checkbox__icon-wrapper__large--checked--invalid"]]: large && isChecked && onInvalid,
 		[checkboxStyles["checkbox__icon-wrapper__large--checked--disabled"]]: disabled && large && isChecked
 	});
-	const labelTextClasses = cn(checkboxStyles["checkbox-label__text"], {
+	const labelTextClasses = classNames(checkboxStyles["checkbox-label__text"], {
 		[checkboxStyles["checkbox-label__text__large--checked"]]: large && isChecked,
 		[checkboxStyles["checkbox-label__text__large--invalid"]]: large && isChecked && onInvalid,
 		[checkboxStyles["checkbox-label__text--on-dark"]]: onDark,

package/lib/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":[],"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 { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\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: errorTextIdProp,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    onChange,\n  } = props;\n  const [isChecked, setIsChecked] = useState(checked);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\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(checkboxStyles['checkbox-wrapper'], {\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, errorTextId)}\n          aria-invalid={error}\n          required={required}\n          onChange={onChangeHandler}\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={errorTextId}>\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"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":[],"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 { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\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: errorTextIdProp,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    onChange,\n  } = props;\n  const [isChecked, setIsChecked] = useState(checked);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\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(checkboxStyles['checkbox-wrapper'], {\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, errorTextId)}\n          aria-invalid={error}\n          required={required}\n          onChange={onChangeHandler}\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={errorTextId}>\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"],"mappings":"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"}

package/lib/Close.js

@@ -1,11 +1,11 @@
 import { n as AnalyticsId } from "./constants2.js";
 import { t as usePseudoClasses } from "./usePseudoClasses.js";
-import { t as Icon_default } from "./Icon.js";
 import { n as mergeRefs } from "./refs.js";
+import { t as Icon_default } from "./Icon.js";
 import { t as useIsMobileBreakpoint } from "./useIsMobileBreakpoint.js";
 import { t as X_default } from "./X.js";
 import React from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/Close/styles.module.scss";
 var Close_default$1 = React.forwardRef(function ButtonForwardedRef(props, ref) {
@@ -16,7 +16,7 @@ var Close_default$1 = React.forwardRef(function ButtonForwardedRef(props, ref) {
 	if (color === "black") iconColor = "black";
 	else if (color === "plum") iconColor = "var(--core-color-plum-700)";
 	else iconColor = "var(--color-action-graphics-onlight)";
-	const closeClasses = cn(styles.close, { [styles["close--small"]]: small }, className);
+	const closeClasses = classNames(styles.close, { [styles["close--small"]]: small }, className);
 	return /* @__PURE__ */ jsx("button", {
 		ref: mergeRefs([ref, refObject]),
 		"data-testid": testId,
@@ -26,7 +26,7 @@ var Close_default$1 = React.forwardRef(function ButtonForwardedRef(props, ref) {
 		onClick,
 		type: "button",
 		children: /* @__PURE__ */ jsx("span", {
-			className: cn(styles["close__inner-container"], {
+			className: classNames(styles["close__inner-container"], {
 				[styles["close__inner-container--small"]]: small,
 				[styles["close__inner-container--plum"]]: color == "plum"
 			}),