@helsenorge/designsystem-react 9.4.1 → 9.5.0

package/AnchorLink.js

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

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":["AnchorLink","React","props","ref","id","href","children","className","target","htmlMarkup","onClick","testId","external","hoverRef","isHovered","useHover","anchorClasses","classNames","AnchorLinkStyles","commonProps","AnalyticsId","renderContent","jsxs","Fragment","jsx","Icon","ArrowUpRight","getColor","IconSize"],"mappings":";;;;;;;;;AAyCA,MAAMA,IAAaC,EAAM,WAAmE,CAACC,GAAOC,MAAQ;AACpG,QAAA,EAAE,IAAAC,GAAI,MAAAC,GAAM,UAAAC,GAAU,WAAAC,GAAW,QAAAC,IAAS,SAAS,YAAAC,IAAa,KAAK,SAAAC,GAAS,QAAAC,EAAA,IAAWT,GACzFU,IAAWJ,MAAW,UACtB,EAAE,UAAAK,GAAU,WAAAC,EAAA,IAAcC;AAAA,IAC9BZ;AAAA,EAAA,GAEIa,IAAgBC,EAAWC,EAAiB,YAAYX,CAAS,GAEjEY,IAAc;AAAA,IAClB,IAAAf;AAAA,IACC,eAAgBO;AAAA,IAChB,oBAAqBS,EAAY;AAAA,IAClC,SAAAV;AAAA,EAAA,GAGIW,IAAgB,MAEjB,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAAjB;AAAA,IACAM,KACC,gBAAAY;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAWP,EAAiB;AAAA,QAC5B,SAASQ;AAAA,QACT,OAAOC,EAAS,aAAa,GAAG;AAAA,QAChC,YAAYA,EAAS,aAAa,GAAG;AAAA,QACrC,MAAMC,EAAS;AAAA,QACf,WAAAd;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ,EAAA,CAAA;AAGF,SAEK,gBAAAQ,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAAd,MAAe,OACd,gBAAAe;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAAnB;AAAA,QACA,QAAAG;AAAA,QACA,WAAWQ;AAAA,QACX,KAAKJ,IAAW,wBAAwB;AAAA,QACxC,KAAKC;AAAA,QACJ,GAAGM;AAAA,QAEH,UAAcE,EAAA;AAAA,MAAA;AAAA,IACjB;AAAA,IAEDZ,MAAe,YACd,gBAAAe;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAWN,EAAiB,oBAAoB;AAAA,QAChD,KAAKL;AAAA,QACJ,GAAGM;AAAA,QAEJ,UAAC,gBAAAK,EAAA,QAAA,EAAK,WAAWR,GAAgB,eAAgB;AAAA,MAAA;AAAA,IACnD;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;"}
+{"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;"}

package/Avatar.js

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

package/Avatar.js.map

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

package/Badge.js

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

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":["Badge","React","props","ref","children","className","color","testId","type","notificationVariant","badgeClasses","classNames","badgeStyles","jsx","NotificationBadge","IconSize","AnalyticsId"],"mappings":";;;;;;AA8BA,MAAMA,IAAmBC,EAAM,WAAW,SAA2BC,GAAmBC,GAAsC;AACtH,QAAA,EAAE,UAAAC,GAAU,WAAAC,IAAY,IAAI,OAAAC,IAAQ,aAAa,QAAAC,GAAQ,MAAAC,IAAO,UAAU,qBAAAC,IAAsB,OAAA,IAAWP,GAC3GQ,IAAeC;AAAA,IACnBC,EAAY;AAAA,IACZ;AAAA,MACE,CAACA,EAAY,kBAAkB,CAAC,GAAGN,MAAU;AAAA,MAC7C,CAACM,EAAY,eAAe,CAAC,GAAGN,MAAU;AAAA,MAC1C,CAACM,EAAY,gBAAgB,CAAC,GAAGN,MAAU;AAAA,IAC7C;AAAA,IACAD;AAAA,EAAA;AAGE,SAAAG,MAAS,kBAAkBC,MAAwB,SAEnD,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAASL;AAAA,MACT,MAAMM,EAAS;AAAA,MACf,WAAAV;AAAA,MACA,QAAAE;AAAA,MACA,oBAAkBS,EAAY;AAAA,IAAA;AAAA,EAAA,IAMlC,gBAAAH,EAAC,QAAK,EAAA,WAAWH,GAAc,KAAAP,GAAU,eAAaI,GAAQ,oBAAkBS,EAAY,OACzF,UAAAZ,EACH,CAAA;AAEJ,CAAC;"}
+{"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;"}

package/Button.js

@@ -1,135 +1,180 @@
-import { jsxs as k, Fragment as dt, jsx as a } from "react/jsx-runtime";
-import x, { useRef as bt, useEffect as pt } from "react";
-import m from "classnames";
-import { I as mt } from "./Icon.js";
-import { AnalyticsId as X, IconSize as B } from "./constants.js";
-import { useBreakpoint as ft } from "./hooks/useBreakpoint.js";
-import { useHover as $ } from "./hooks/useHover.js";
-import { useIcons as ht } from "./hooks/useIcons.js";
-import { getColor as u } from "./theme/currys/color.js";
-import { breakpoints as gt } from "./theme/grid.js";
-import { isTest as _t, isProd as wt } from "./utils/environment.js";
-import Ct from "./components/Icons/ArrowRight.js";
-import t from "./components/Button/styles.module.scss";
-const It = (o, r, n, f, e, g) => g && n ? !e || o ? u("neutral", r ? 500 : 700) : u("white") : n ? !e || o ? u("neutral", 500) : `${u("white")}b3` : o && !e || !o && e ? "white" : f === "normal" ? u("blueberry", 600) : u("cherry", 500), R = (o, r) => r && o ? B.Small : o ? B.Medium : B.XSmall, yt = (o, r, n) => {
-  if (n && o && (r === void 0 || r === ""))
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import React, { useRef, useEffect } from "react";
+import classNames from "classnames";
+import { I as Icon } from "./Icon.js";
+import { AnalyticsId, IconSize } from "./constants.js";
+import { useBreakpoint } from "./hooks/useBreakpoint.js";
+import { useHover } from "./hooks/useHover.js";
+import { useIcons } from "./hooks/useIcons.js";
+import { getColor } from "./theme/currys/color.js";
+import { breakpoints } from "./theme/grid.js";
+import { isTest, isProd } from "./utils/environment.js";
+import ArrowRight from "./components/Icons/ArrowRight.js";
+import buttonStyles from "./components/Button/styles.module.scss";
+const getIconColor = (fill, borderless, disabled, concept, ondark, mobile) => {
+  if (mobile && disabled) {
+    return !ondark || fill ? getColor("neutral", !borderless ? 700 : 500) : getColor("white");
+  }
+  if (disabled) {
+    return !ondark || fill ? getColor("neutral", 500) : `${getColor("white")}b3`;
+  }
+  if (fill && !ondark || !fill && ondark) {
+    return "white";
+  }
+  return concept === "normal" ? getColor("blueberry", 600) : getColor("cherry", 500);
+};
+const getLargeIconSize = (large, mobile) => {
+  if (mobile && large) return IconSize.Small;
+  if (large) return IconSize.Medium;
+  return IconSize.XSmall;
+};
+const checkOnlyIconAria = (onlyIcon, ariaLabel, devEnv) => {
+  if (devEnv && onlyIcon && (ariaLabel === void 0 || ariaLabel === "")) {
     throw new Error("Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav");
-}, Lt = x.forwardRef(function(r, n) {
+  }
+};
+const Button = React.forwardRef(function ButtonForwardedRef(props, ref) {
   const {
-    ariaLabel: f,
-    id: e,
-    children: g,
-    wrapperClassName: q,
-    className: G,
-    arrow: _,
-    concept: A = "normal",
-    disabled: i = !1,
-    ellipsis: S = !1,
-    fluid: w = !1,
-    htmlMarkup: C = "button",
-    onColor: J = "onlight",
-    onBlur: z,
-    onClick: U,
-    size: K = "medium",
-    variant: I = "fill",
-    href: Q,
-    tabIndex: F,
-    testId: H,
-    target: P,
-    type: Y = "button",
-    textClassName: Z,
-    textPosition: E = "left",
-    ...j
-  } = r, [d, b, L] = ht(x.Children.toArray(g)), { hoverRef: M, isHovered: tt } = C === "button" ? $(n) : $(n), ot = bt(null), s = !!(d || b) && !L, T = d && (b || _) && !s, y = J === "ondark", h = ft() < gt.md, V = A === "destructive" && !i, rt = I === "outline", l = I === "borderless", W = It(I === "fill", l, i, A, y, h), v = _ === "icon" && !l, p = K === "large" && !V && !l, nt = _ === "accessibility-character" && !w && !d && !b && !v && l, et = { ...j }, D = m(
-    t["button-wrapper"],
-    { [t["button-wrapper--fluid"]]: w || S },
-    q
-  ), st = m(
-    t.button,
+    ariaLabel,
+    id,
+    children,
+    wrapperClassName,
+    className,
+    arrow,
+    concept = "normal",
+    disabled = false,
+    ellipsis = false,
+    fluid = false,
+    htmlMarkup = "button",
+    onColor = "onlight",
+    onBlur,
+    onClick,
+    size = "medium",
+    variant = "fill",
+    href,
+    tabIndex,
+    testId,
+    target,
+    type = "button",
+    textClassName,
+    textPosition = "left",
+    ...restProps
+  } = props;
+  const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));
+  const { hoverRef, isHovered } = htmlMarkup === "button" ? useHover(ref) : useHover(ref);
+  const buttonContentRef = useRef(null);
+  const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;
+  const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;
+  const onDark = onColor === "ondark";
+  const breakpoint = useBreakpoint();
+  const mobile = breakpoint < breakpoints.md;
+  const destructive = concept === "destructive" && !disabled;
+  const outlineVariant = variant === "outline";
+  const borderlessVariant = variant === "borderless";
+  const iconColor = getIconColor(variant === "fill", borderlessVariant, disabled, concept, onDark, mobile);
+  const hasArrow = arrow === "icon" && !borderlessVariant;
+  const large = size === "large" && !destructive && !borderlessVariant;
+  const hasUURightArrow = arrow === "accessibility-character" && !fluid && !leftIcon && !rightIcon && !hasArrow && borderlessVariant;
+  const rest = { ...restProps };
+  const buttonWrapperClasses = classNames(
+    buttonStyles["button-wrapper"],
+    { [buttonStyles["button-wrapper--fluid"]]: fluid || ellipsis },
+    wrapperClassName
+  );
+  const buttonClasses = classNames(
+    buttonStyles.button,
     {
-      [t["button--destructive"]]: V,
-      [t["button--normal"]]: !p,
-      [t["button--large"]]: p,
-      [t["button--outline"]]: rt,
-      [t["button--borderless"]]: l,
-      [t["button--left-icon"]]: d && !s,
-      [t["button--right-icon"]]: b && !s,
-      [t["button--both-icons"]]: T,
-      [t["button--only-icon"]]: s,
-      [t["button--arrow"]]: v,
-      [t["button--on-dark"]]: y
+      [buttonStyles["button--destructive"]]: destructive,
+      [buttonStyles["button--normal"]]: !large,
+      [buttonStyles["button--large"]]: large,
+      [buttonStyles["button--outline"]]: outlineVariant,
+      [buttonStyles["button--borderless"]]: borderlessVariant,
+      [buttonStyles["button--left-icon"]]: leftIcon && !onlyIcon,
+      [buttonStyles["button--right-icon"]]: rightIcon && !onlyIcon,
+      [buttonStyles["button--both-icons"]]: bothIcons,
+      [buttonStyles["button--only-icon"]]: onlyIcon,
+      [buttonStyles["button--arrow"]]: hasArrow,
+      [buttonStyles["button--on-dark"]]: onDark
     },
-    G
-  ), at = m(
-    t.button__text,
+    className
+  );
+  const buttonTextClasses = classNames(
+    buttonStyles["button__text"],
     {
-      [t["button__text--ellipsis"]]: S,
-      [t["button__text--centered"]]: w && E === "centered"
+      [buttonStyles["button__text--ellipsis"]]: ellipsis,
+      [buttonStyles["button__text--centered"]]: fluid && textPosition === "centered"
     },
-    Z
-  ), it = m(t.diagonal, {
-    [t["diagonal--on-dark"]]: y
+    textClassName
+  );
+  const diagonalClasses = classNames(buttonStyles["diagonal"], {
+    [buttonStyles["diagonal--on-dark"]]: onDark
   });
-  pt(() => {
-    yt(s, f, !_t() && !wt());
+  useEffect(() => {
+    checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());
   }, []);
-  const N = (c, ct, ut) => c ? x.cloneElement(c, {
-    size: ct,
-    color: c != null && c.props.color && !i ? c.props.color : W,
-    isHovered: !i && tt,
-    className: ut
-  }) : null, lt = () => /* @__PURE__ */ k("span", { className: at, ref: ot, children: [
-    i && l && /* @__PURE__ */ a("span", { className: it, children: /* @__PURE__ */ a("span", { className: t.diagonal__line }) }),
-    /* @__PURE__ */ a("span", { children: s ? f : L })
-  ] }), O = () => /* @__PURE__ */ k("span", { className: st, children: [
-    N(d, R(p, h), s ? void 0 : t["button__left-icon"]),
-    lt(),
-    v ? N(
-      /* @__PURE__ */ a(mt, { svgIcon: Ct }),
-      R(p, h),
-      m(t.button__arrow, { [t["button__arrow--both-icons"]]: T })
-    ) : N(b, R(p, h), t["button__right-icon"]),
-    nt && /* @__PURE__ */ a("span", { style: { color: W }, className: t["button__right-unicode-arrow"], "aria-hidden": !0, children: "  →" })
+  const renderIcon = (iconElement, iconSize, iconClassName) => {
+    return iconElement ? React.cloneElement(iconElement, {
+      size: iconSize,
+      color: (iconElement == null ? void 0 : iconElement.props.color) && !disabled ? iconElement.props.color : iconColor,
+      isHovered: !disabled && isHovered,
+      className: iconClassName
+    }) : null;
+  };
+  const renderButtonContent = () => {
+    return /* @__PURE__ */ jsxs("span", { className: buttonTextClasses, ref: buttonContentRef, children: [
+      disabled && borderlessVariant && /* @__PURE__ */ jsx("span", { className: diagonalClasses, children: /* @__PURE__ */ jsx("span", { className: buttonStyles["diagonal__line"] }) }),
+      /* @__PURE__ */ jsx("span", { children: onlyIcon ? ariaLabel : restChildren })
+    ] });
+  };
+  const renderbuttonContentWrapper = () => /* @__PURE__ */ jsxs("span", { className: buttonClasses, children: [
+    renderIcon(leftIcon, getLargeIconSize(large, mobile), !onlyIcon ? buttonStyles["button__left-icon"] : void 0),
+    renderButtonContent(),
+    hasArrow ? renderIcon(
+      /* @__PURE__ */ jsx(Icon, { svgIcon: ArrowRight }),
+      getLargeIconSize(large, mobile),
+      classNames(buttonStyles["button__arrow"], { [buttonStyles["button__arrow--both-icons"]]: bothIcons })
+    ) : renderIcon(rightIcon, getLargeIconSize(large, mobile), buttonStyles["button__right-icon"]),
+    hasUURightArrow && /* @__PURE__ */ jsx("span", { style: { color: iconColor }, className: buttonStyles["button__right-unicode-arrow"], "aria-hidden": true, children: "  →" })
   ] });
-  return /* @__PURE__ */ k(dt, { children: [
-    C === "button" && /* @__PURE__ */ a(
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    htmlMarkup === "button" && /* @__PURE__ */ jsx(
       "button",
       {
-        id: e,
-        onBlur: z,
-        onClick: U,
-        disabled: i,
-        "data-testid": H,
-        "data-analyticsid": X.Button,
-        className: D,
-        ref: M,
-        tabIndex: F,
-        type: Y,
-        ...et,
-        children: O()
+        id,
+        onBlur,
+        onClick,
+        disabled,
+        "data-testid": testId,
+        "data-analyticsid": AnalyticsId.Button,
+        className: buttonWrapperClasses,
+        ref: hoverRef,
+        tabIndex,
+        type,
+        ...rest,
+        children: renderbuttonContentWrapper()
       }
     ),
-    C === "a" && /* @__PURE__ */ a(
+    htmlMarkup === "a" && /* @__PURE__ */ jsx(
       "a",
       {
-        id: e,
-        onBlur: z,
-        onClick: U,
-        "data-testid": H,
-        "data-analyticsid": X.Button,
-        className: D,
-        href: Q,
-        target: P,
-        rel: P === "_blank" ? "noopener noreferrer" : r.rel,
-        ref: M,
-        tabIndex: F,
-        ...j,
-        children: O()
+        id,
+        onBlur,
+        onClick,
+        "data-testid": testId,
+        "data-analyticsid": AnalyticsId.Button,
+        className: buttonWrapperClasses,
+        href,
+        target,
+        rel: target === "_blank" ? "noopener noreferrer" : props.rel,
+        ref: hoverRef,
+        tabIndex,
+        ...restProps,
+        children: renderbuttonContentWrapper()
       }
     )
   ] });
 });
 export {
-  Lt as B
+  Button as B
 };
 //# sourceMappingURL=Button.js.map