@helsenorge/designsystem-react 9.4.0 → 9.4.3

package/Spacer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spacer.js","sources":["../src/components/Spacer/Spacer.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { SpacerSizes } from './../../theme/spacers';\n\nimport spacerStyles from './styles.module.scss';\n\nexport interface SpacerProps {\n  /** Sets the size of the spacer. */\n  size?: SpacerSizes;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Spacer = React.forwardRef(function SpacerForwardedRef(props: SpacerProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { size = 's', className, testId } = props;\n  const spacerClasses = classNames(\n    spacerStyles.spacer,\n    {\n      [spacerStyles['spacer--4xs']]: size === '4xs',\n      [spacerStyles['spacer--3xs']]: size === '3xs',\n      [spacerStyles['spacer--2xs']]: size === '2xs',\n      [spacerStyles['spacer--xs']]: size === 'xs',\n      [spacerStyles['spacer--s']]: size === 's',\n      [spacerStyles['spacer--m']]: size === 'm',\n      [spacerStyles['spacer--l']]: size === 'l',\n      [spacerStyles['spacer--xl']]: size === 'xl',\n      [spacerStyles['spacer--2xl']]: size === '2xl',\n      [spacerStyles['spacer--3xl']]: size === '3xl',\n      [spacerStyles['spacer--4xl']]: size === '4xl',\n      [spacerStyles['spacer--5xl']]: size === '5xl',\n      [spacerStyles['spacer--6xl']]: size === '6xl',\n    },\n    className\n  );\n\n  return <span className={spacerClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Spacer}></span>;\n});\n\nexport default Spacer;\n"],"names":["Spacer","React","props","ref","size","className","testId","spacerClasses","classNames","spacerStyles","jsx","AnalyticsId"],"mappings":";;;;;AAkBA,MAAMA,IAASC,EAAM,WAAW,SAA4BC,GAAoBC,GAAsC;AACpH,QAAM,EAAE,MAAAC,IAAO,KAAK,WAAAC,GAAW,QAAAC,MAAWJ,GACpCK,IAAgBC;AAAA,IACpBC,EAAa;AAAA,IACb;AAAA,MACE,CAACA,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,YAAY,CAAC,GAAGL,MAAS;AAAA,MACvC,CAACK,EAAa,WAAW,CAAC,GAAGL,MAAS;AAAA,MACtC,CAACK,EAAa,WAAW,CAAC,GAAGL,MAAS;AAAA,MACtC,CAACK,EAAa,WAAW,CAAC,GAAGL,MAAS;AAAA,MACtC,CAACK,EAAa,YAAY,CAAC,GAAGL,MAAS;AAAA,MACvC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,IAC1C;AAAA,IACAC;AAAA,EAAA;AAGK,SAAA,gBAAAK,EAAC,UAAK,WAAWH,GAAe,KAAAJ,GAAU,eAAaG,GAAQ,oBAAkBK,EAAY,OAAQ,CAAA;AAC9G,CAAC;"}
+{"version":3,"file":"Spacer.js","sources":["../src/components/Spacer/Spacer.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { SpacerSizes } from './../../theme/spacers';\n\nimport spacerStyles from './styles.module.scss';\n\nexport interface SpacerProps {\n  /** Sets the size of the spacer. */\n  size?: SpacerSizes;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Spacer = React.forwardRef(function SpacerForwardedRef(props: SpacerProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { size = 's', className, testId } = props;\n  const spacerClasses = classNames(\n    spacerStyles.spacer,\n    {\n      [spacerStyles['spacer--4xs']]: size === '4xs',\n      [spacerStyles['spacer--3xs']]: size === '3xs',\n      [spacerStyles['spacer--2xs']]: size === '2xs',\n      [spacerStyles['spacer--xs']]: size === 'xs',\n      [spacerStyles['spacer--s']]: size === 's',\n      [spacerStyles['spacer--m']]: size === 'm',\n      [spacerStyles['spacer--l']]: size === 'l',\n      [spacerStyles['spacer--xl']]: size === 'xl',\n      [spacerStyles['spacer--2xl']]: size === '2xl',\n      [spacerStyles['spacer--3xl']]: size === '3xl',\n      [spacerStyles['spacer--4xl']]: size === '4xl',\n      [spacerStyles['spacer--5xl']]: size === '5xl',\n      [spacerStyles['spacer--6xl']]: size === '6xl',\n    },\n    className\n  );\n\n  return <span className={spacerClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Spacer}></span>;\n});\n\nexport default Spacer;\n"],"names":[],"mappings":";;;;;AAkBA,MAAM,SAAS,MAAM,WAAW,SAAS,mBAAmB,OAAoB,KAAsC;AACpH,QAAM,EAAE,OAAO,KAAK,WAAW,OAAW,IAAA;AAC1C,QAAM,gBAAgB;AAAA,IACpB,aAAa;AAAA,IACb;AAAA,MACE,CAAC,aAAa,aAAa,CAAC,GAAG,SAAS;AAAA,MACxC,CAAC,aAAa,aAAa,CAAC,GAAG,SAAS;AAAA,MACxC,CAAC,aAAa,aAAa,CAAC,GAAG,SAAS;AAAA,MACxC,CAAC,aAAa,YAAY,CAAC,GAAG,SAAS;AAAA,MACvC,CAAC,aAAa,WAAW,CAAC,GAAG,SAAS;AAAA,MACtC,CAAC,aAAa,WAAW,CAAC,GAAG,SAAS;AAAA,MACtC,CAAC,aAAa,WAAW,CAAC,GAAG,SAAS;AAAA,MACtC,CAAC,aAAa,YAAY,CAAC,GAAG,SAAS;AAAA,MACvC,CAAC,aAAa,aAAa,CAAC,GAAG,SAAS;AAAA,MACxC,CAAC,aAAa,aAAa,CAAC,GAAG,SAAS;AAAA,MACxC,CAAC,aAAa,aAAa,CAAC,GAAG,SAAS;AAAA,MACxC,CAAC,aAAa,aAAa,CAAC,GAAG,SAAS;AAAA,MACxC,CAAC,aAAa,aAAa,CAAC,GAAG,SAAS;AAAA,IAC1C;AAAA,IACA;AAAA,EACF;AAEO,SAAA,oBAAC,UAAK,WAAW,eAAe,KAAU,eAAa,QAAQ,oBAAkB,YAAY,OAAQ,CAAA;AAC9G,CAAC;"}

package/StatusDot.js

@@ -1,33 +1,66 @@
-import { jsxs as _, jsx as e } from "react/jsx-runtime";
-import l from "classnames";
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
 import "./theme/grid.js";
 import "./hooks/useBreakpoint.js";
 import "react";
-import { FormOnColor as m, AnalyticsId as w, IconSize as v } from "./constants.js";
-import { getColor as d } from "./theme/currys/color.js";
-import { I as a } from "./Icon.js";
-import N from "./components/Icons/Attachment.js";
-import b from "./components/Icons/Change.js";
-import x from "./components/Icons/Group.js";
-import y from "./components/Icons/NoAccess.js";
-import n from "./components/StatusDot/styles.module.scss";
-var c = ((o) => (o[o.onwhite = m.onwhite] = "onwhite", o[o.ondark = m.ondark] = "ondark", o))(c || {}), C = /* @__PURE__ */ ((o) => (o.info = "info", o.warning = "warning", o.alert = "alert", o.cancelled = "cancelled", o.active = "active", o.transparent = "transparent", o.recurring = "recurring", o.group = "group", o.noaccess = "noaccess", o.attachment = "attachment", o))(C || {});
-const A = ({ onColor: o, variant: r }) => {
-  const s = { color: o === c.ondark ? d("white") : d("black"), size: v.XXSmall, onColor: o };
-  return r === "recurring" ? /* @__PURE__ */ e(a, { ...s, svgIcon: b }) : r === "group" ? /* @__PURE__ */ e(a, { ...s, svgIcon: x }) : r === "noaccess" ? /* @__PURE__ */ e(a, { ...s, svgIcon: y, color: d("cherry", 600) }) : r === "attachment" ? /* @__PURE__ */ e(a, { ...s, svgIcon: N }) : null;
-}, L = (o) => {
-  const { id: r, onColor: t = c.onwhite, variant: s = "info", text: p, className: f, testId: i } = o, u = s === "recurring" || s === "group" || s === "noaccess" || s === "attachment", g = s === "cancelled", h = l(n.statusdot, g && n["statusdot--cancelled"], f), I = l(n.statusdot__dot, {
-    ...u ? {} : { [n[`statusdot__dot--${s}`]]: !0 },
-    [n["statusdot__dot--on-dark"]]: t === c.ondark
-  }), k = l(t === c.ondark && n["statusdot__label--on-dark"]);
-  return /* @__PURE__ */ _("span", { id: r, className: h, "data-testid": i, "data-analyticsid": w.StatusDot, children: [
-    /* @__PURE__ */ e("span", { className: I, "data-testid": i + "-dot", children: /* @__PURE__ */ e(A, { onColor: t, variant: s }) }),
-    /* @__PURE__ */ e("span", { className: k, children: p })
+import { FormOnColor, AnalyticsId, IconSize } from "./constants.js";
+import { getColor } from "./theme/currys/color.js";
+import { I as Icon } from "./Icon.js";
+import Attachment from "./components/Icons/Attachment.js";
+import Change from "./components/Icons/Change.js";
+import Group from "./components/Icons/Group.js";
+import NoAccess from "./components/Icons/NoAccess.js";
+import styles from "./components/StatusDot/styles.module.scss";
+var StatusDotOnColor = ((StatusDotOnColor2) => {
+  StatusDotOnColor2[StatusDotOnColor2["onwhite"] = FormOnColor.onwhite] = "onwhite";
+  StatusDotOnColor2[StatusDotOnColor2["ondark"] = FormOnColor.ondark] = "ondark";
+  return StatusDotOnColor2;
+})(StatusDotOnColor || {});
+var StatusDotVariant = /* @__PURE__ */ ((StatusDotVariant2) => {
+  StatusDotVariant2["info"] = "info";
+  StatusDotVariant2["warning"] = "warning";
+  StatusDotVariant2["alert"] = "alert";
+  StatusDotVariant2["cancelled"] = "cancelled";
+  StatusDotVariant2["active"] = "active";
+  StatusDotVariant2["transparent"] = "transparent";
+  StatusDotVariant2["recurring"] = "recurring";
+  StatusDotVariant2["group"] = "group";
+  StatusDotVariant2["noaccess"] = "noaccess";
+  StatusDotVariant2["attachment"] = "attachment";
+  return StatusDotVariant2;
+})(StatusDotVariant || {});
+const StatusDotIcon = ({ onColor, variant }) => {
+  const color = onColor === StatusDotOnColor.ondark ? getColor("white") : getColor("black");
+  const iconProps = { color, size: IconSize.XXSmall, onColor };
+  if (variant === "recurring") {
+    return /* @__PURE__ */ jsx(Icon, { ...iconProps, svgIcon: Change });
+  } else if (variant === "group") {
+    return /* @__PURE__ */ jsx(Icon, { ...iconProps, svgIcon: Group });
+  } else if (variant === "noaccess") {
+    return /* @__PURE__ */ jsx(Icon, { ...iconProps, svgIcon: NoAccess, color: getColor("cherry", 600) });
+  } else if (variant === "attachment") {
+    return /* @__PURE__ */ jsx(Icon, { ...iconProps, svgIcon: Attachment });
+  }
+  return null;
+};
+const StatusDot = (props) => {
+  const { id, onColor = StatusDotOnColor.onwhite, variant = "info", text, className, testId } = props;
+  const hasIcon = variant === "recurring" || variant === "group" || variant === "noaccess" || variant === "attachment";
+  const isCancelled = variant === "cancelled";
+  const statusDotClasses = classNames(styles["statusdot"], isCancelled && styles["statusdot--cancelled"], className);
+  const dotClasses = classNames(styles["statusdot__dot"], {
+    ...hasIcon ? {} : { [styles[`statusdot__dot--${variant}`]]: true },
+    [styles["statusdot__dot--on-dark"]]: onColor === StatusDotOnColor.ondark
+  });
+  const labelClasses = classNames(onColor === StatusDotOnColor.ondark && styles["statusdot__label--on-dark"]);
+  return /* @__PURE__ */ jsxs("span", { id, className: statusDotClasses, "data-testid": testId, "data-analyticsid": AnalyticsId.StatusDot, children: [
+    /* @__PURE__ */ jsx("span", { className: dotClasses, "data-testid": testId + "-dot", children: /* @__PURE__ */ jsx(StatusDotIcon, { onColor, variant }) }),
+    /* @__PURE__ */ jsx("span", { className: labelClasses, children: text })
   ] });
 };
 export {
-  L as S,
-  c as a,
-  C as b
+  StatusDot as S,
+  StatusDotOnColor as a,
+  StatusDotVariant as b
 };
 //# sourceMappingURL=StatusDot.js.map

package/StatusDot.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.js","sources":["../src/components/StatusDot/StatusDot.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../..';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport { Icon } from '../Icon';\nimport Attachment from '../Icons/Attachment';\nimport Change from '../Icons/Change';\nimport Group from '../Icons/Group';\nimport NoAccess from '../Icons/NoAccess';\n\nimport styles from './styles.module.scss';\n\nexport enum StatusDotOnColor {\n  onwhite = FormOnColor.onwhite,\n  ondark = FormOnColor.ondark,\n}\n\nexport enum StatusDotVariant {\n  info = 'info',\n  warning = 'warning',\n  alert = 'alert',\n  cancelled = 'cancelled',\n  active = 'active',\n  transparent = 'transparent',\n  recurring = 'recurring',\n  group = 'group',\n  noaccess = 'noaccess',\n  attachment = 'attachment',\n}\n\nexport interface StatusDotIconProps {\n  /** Defines the color of the icon */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** The variant defines style formatting and what icon to use */\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ onColor, variant }) => {\n  const color = onColor === StatusDotOnColor.ondark ? getColor('white') : getColor('black');\n  const iconProps = { color, size: IconSize.XXSmall, onColor };\n\n  if (variant === StatusDotVariant.recurring) {\n    return <Icon {...iconProps} svgIcon={Change} />;\n  } else if (variant === StatusDotVariant.group) {\n    return <Icon {...iconProps} svgIcon={Group} />;\n  } else if (variant === StatusDotVariant.noaccess) {\n    return <Icon {...iconProps} svgIcon={NoAccess} color={getColor('cherry', 600)} />;\n  } else if (variant === StatusDotVariant.attachment) {\n    return <Icon {...iconProps} svgIcon={Attachment} />;\n  }\n\n  return null;\n};\n\nexport interface StatusDotProps {\n  /** id that is placed on the wrapper */\n  id?: string;\n  /** Defines the color mode, onwhite, ondark etc. */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst StatusDot: React.FC<StatusDotProps> = props => {\n  const { id, onColor = StatusDotOnColor.onwhite, variant = StatusDotVariant.info, text, className, testId } = props;\n\n  const hasIcon =\n    variant === StatusDotVariant.recurring ||\n    variant === StatusDotVariant.group ||\n    variant === StatusDotVariant.noaccess ||\n    variant === StatusDotVariant.attachment;\n\n  const isCancelled = variant === StatusDotVariant.cancelled;\n\n  const statusDotClasses = classNames(styles['statusdot'], isCancelled && styles['statusdot--cancelled'], className);\n  const dotClasses = classNames(styles['statusdot__dot'], {\n    ...(hasIcon ? {} : { [styles[`statusdot__dot--${variant}`]]: true }),\n    [styles['statusdot__dot--on-dark']]: onColor === StatusDotOnColor.ondark,\n  });\n  const labelClasses = classNames(onColor === StatusDotOnColor.ondark && styles['statusdot__label--on-dark']);\n\n  return (\n    <span id={id} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={dotClasses} data-testid={testId + '-dot'}>\n        <StatusDotIcon onColor={onColor} variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </span>\n  );\n};\n\nexport default StatusDot;\n"],"names":["StatusDotOnColor","FormOnColor","StatusDotVariant","StatusDotIcon","onColor","variant","iconProps","getColor","IconSize","jsx","Icon","Change","Group","NoAccess","Attachment","StatusDot","props","id","text","className","testId","hasIcon","isCancelled","statusDotClasses","classNames","styles","dotClasses","labelClasses","jsxs","AnalyticsId"],"mappings":";;;;;;;;;;;;;AAeY,IAAAA,KAAL,CAAKA,OACVA,EAAAA,EAAA,UAAUC,EAAY,OAAtB,IAAA,WACAD,EAAAA,EAAA,SAASC,EAAY,MAArB,IAAA,UAFUD,IAAAA,KAAA,CAAA,CAAA,GAKAE,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,UAAU,WACVA,EAAA,QAAQ,SACRA,EAAA,YAAY,aACZA,EAAA,SAAS,UACTA,EAAA,cAAc,eACdA,EAAA,YAAY,aACZA,EAAA,QAAQ,SACRA,EAAA,WAAW,YACXA,EAAA,aAAa,cAVHA,IAAAA,KAAA,CAAA,CAAA;AAoBZ,MAAMC,IAA8C,CAAC,EAAE,SAAAC,GAAS,SAAAC,QAAc;AAE5E,QAAMC,IAAY,EAAE,OADNF,MAAYJ,EAAiB,SAASO,EAAS,OAAO,IAAIA,EAAS,OAAO,GAC7D,MAAMC,EAAS,SAAS,SAAAJ;AAEnD,SAAIC,MAAY,cACN,gBAAAI,EAAAC,GAAA,EAAM,GAAGJ,GAAW,SAASK,EAAQ,CAAA,IACpCN,MAAY,UACb,gBAAAI,EAAAC,GAAA,EAAM,GAAGJ,GAAW,SAASM,EAAO,CAAA,IACnCP,MAAY,aACd,gBAAAI,EAACC,GAAM,EAAA,GAAGJ,GAAW,SAASO,GAAU,OAAON,EAAS,UAAU,GAAG,EAAG,CAAA,IACtEF,MAAY,eACb,gBAAAI,EAAAC,GAAA,EAAM,GAAGJ,GAAW,SAASQ,EAAY,CAAA,IAG5C;AACT,GAiBMC,IAAsC,CAASC,MAAA;AAC7C,QAAA,EAAE,IAAAC,GAAI,SAAAb,IAAUJ,EAAiB,SAAS,SAAAK,IAAU,QAAuB,MAAAa,GAAM,WAAAC,GAAW,QAAAC,EAAA,IAAWJ,GAEvGK,IACJhB,MAAY,eACZA,MAAY,WACZA,MAAY,cACZA,MAAY,cAERiB,IAAcjB,MAAY,aAE1BkB,IAAmBC,EAAWC,EAAO,WAAcH,KAAeG,EAAO,sBAAsB,GAAGN,CAAS,GAC3GO,IAAaF,EAAWC,EAAO,gBAAmB;AAAA,IACtD,GAAIJ,IAAU,KAAK,EAAE,CAACI,EAAO,mBAAmBpB,CAAO,EAAE,CAAC,GAAG,GAAK;AAAA,IAClE,CAACoB,EAAO,yBAAyB,CAAC,GAAGrB,MAAYJ,EAAiB;AAAA,EAAA,CACnE,GACK2B,IAAeH,EAAWpB,MAAYJ,EAAiB,UAAUyB,EAAO,2BAA2B,CAAC;AAGxG,SAAA,gBAAAG,EAAC,UAAK,IAAAX,GAAQ,WAAWM,GAAkB,eAAaH,GAAQ,oBAAkBS,EAAY,WAC5F,UAAA;AAAA,IAAC,gBAAApB,EAAA,QAAA,EAAK,WAAWiB,GAAY,eAAaN,IAAS,QACjD,UAAC,gBAAAX,EAAAN,GAAA,EAAc,SAAAC,GAAkB,SAAAC,EAAA,CAAkB,EACrD,CAAA;AAAA,IACC,gBAAAI,EAAA,QAAA,EAAK,WAAWkB,GAAe,UAAKT,GAAA;AAAA,EACvC,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"StatusDot.js","sources":["../src/components/StatusDot/StatusDot.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../..';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport { Icon } from '../Icon';\nimport Attachment from '../Icons/Attachment';\nimport Change from '../Icons/Change';\nimport Group from '../Icons/Group';\nimport NoAccess from '../Icons/NoAccess';\n\nimport styles from './styles.module.scss';\n\nexport enum StatusDotOnColor {\n  onwhite = FormOnColor.onwhite,\n  ondark = FormOnColor.ondark,\n}\n\nexport enum StatusDotVariant {\n  info = 'info',\n  warning = 'warning',\n  alert = 'alert',\n  cancelled = 'cancelled',\n  active = 'active',\n  transparent = 'transparent',\n  recurring = 'recurring',\n  group = 'group',\n  noaccess = 'noaccess',\n  attachment = 'attachment',\n}\n\nexport interface StatusDotIconProps {\n  /** Defines the color of the icon */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** The variant defines style formatting and what icon to use */\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ onColor, variant }) => {\n  const color = onColor === StatusDotOnColor.ondark ? getColor('white') : getColor('black');\n  const iconProps = { color, size: IconSize.XXSmall, onColor };\n\n  if (variant === StatusDotVariant.recurring) {\n    return <Icon {...iconProps} svgIcon={Change} />;\n  } else if (variant === StatusDotVariant.group) {\n    return <Icon {...iconProps} svgIcon={Group} />;\n  } else if (variant === StatusDotVariant.noaccess) {\n    return <Icon {...iconProps} svgIcon={NoAccess} color={getColor('cherry', 600)} />;\n  } else if (variant === StatusDotVariant.attachment) {\n    return <Icon {...iconProps} svgIcon={Attachment} />;\n  }\n\n  return null;\n};\n\nexport interface StatusDotProps {\n  /** id that is placed on the wrapper */\n  id?: string;\n  /** Defines the color mode, onwhite, ondark etc. */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst StatusDot: React.FC<StatusDotProps> = props => {\n  const { id, onColor = StatusDotOnColor.onwhite, variant = StatusDotVariant.info, text, className, testId } = props;\n\n  const hasIcon =\n    variant === StatusDotVariant.recurring ||\n    variant === StatusDotVariant.group ||\n    variant === StatusDotVariant.noaccess ||\n    variant === StatusDotVariant.attachment;\n\n  const isCancelled = variant === StatusDotVariant.cancelled;\n\n  const statusDotClasses = classNames(styles['statusdot'], isCancelled && styles['statusdot--cancelled'], className);\n  const dotClasses = classNames(styles['statusdot__dot'], {\n    ...(hasIcon ? {} : { [styles[`statusdot__dot--${variant}`]]: true }),\n    [styles['statusdot__dot--on-dark']]: onColor === StatusDotOnColor.ondark,\n  });\n  const labelClasses = classNames(onColor === StatusDotOnColor.ondark && styles['statusdot__label--on-dark']);\n\n  return (\n    <span id={id} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={dotClasses} data-testid={testId + '-dot'}>\n        <StatusDotIcon onColor={onColor} variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </span>\n  );\n};\n\nexport default StatusDot;\n"],"names":["StatusDotOnColor","StatusDotVariant"],"mappings":";;;;;;;;;;;;;AAeY,IAAA,oBAAL,CAAKA,sBAAL;AACLA,oBAAAA,kBAAA,SAAU,IAAA,YAAY,OAAtB,IAAA;AACAA,oBAAAA,kBAAA,QAAS,IAAA,YAAY,MAArB,IAAA;AAFUA,SAAAA;AAAA,GAAA,oBAAA,CAAA,CAAA;AAKA,IAAA,qCAAAC,sBAAL;AACLA,oBAAA,MAAO,IAAA;AACPA,oBAAA,SAAU,IAAA;AACVA,oBAAA,OAAQ,IAAA;AACRA,oBAAA,WAAY,IAAA;AACZA,oBAAA,QAAS,IAAA;AACTA,oBAAA,aAAc,IAAA;AACdA,oBAAA,WAAY,IAAA;AACZA,oBAAA,OAAQ,IAAA;AACRA,oBAAA,UAAW,IAAA;AACXA,oBAAA,YAAa,IAAA;AAVHA,SAAAA;AAAA,GAAA,oBAAA,CAAA,CAAA;AAoBZ,MAAM,gBAA8C,CAAC,EAAE,SAAS,cAAc;AACtE,QAAA,QAAQ,YAAY,iBAAiB,SAAS,SAAS,OAAO,IAAI,SAAS,OAAO;AACxF,QAAM,YAAY,EAAE,OAAO,MAAM,SAAS,SAAS,QAAQ;AAE3D,MAAI,YAAY,aAA4B;AAC1C,WAAQ,oBAAA,MAAA,EAAM,GAAG,WAAW,SAAS,QAAQ;AAAA,EAAA,WACpC,YAAY,SAAwB;AAC7C,WAAQ,oBAAA,MAAA,EAAM,GAAG,WAAW,SAAS,OAAO;AAAA,EAAA,WACnC,YAAY,YAA2B;AACzC,WAAA,oBAAC,MAAM,EAAA,GAAG,WAAW,SAAS,UAAU,OAAO,SAAS,UAAU,GAAG,EAAG,CAAA;AAAA,EAAA,WACtE,YAAY,cAA6B;AAClD,WAAQ,oBAAA,MAAA,EAAM,GAAG,WAAW,SAAS,YAAY;AAAA,EAAA;AAG5C,SAAA;AACT;AAiBA,MAAM,YAAsC,CAAS,UAAA;AAC7C,QAAA,EAAE,IAAI,UAAU,iBAAiB,SAAS,UAAU,QAAuB,MAAM,WAAW,OAAW,IAAA;AAE7G,QAAM,UACJ,YAAY,eACZ,YAAY,WACZ,YAAY,cACZ,YAAY;AAEd,QAAM,cAAc,YAAY;AAE1B,QAAA,mBAAmB,WAAW,OAAO,WAAW,GAAG,eAAe,OAAO,sBAAsB,GAAG,SAAS;AACjH,QAAM,aAAa,WAAW,OAAO,gBAAgB,GAAG;AAAA,IACtD,GAAI,UAAU,KAAK,EAAE,CAAC,OAAO,mBAAmB,OAAO,EAAE,CAAC,GAAG,KAAK;AAAA,IAClE,CAAC,OAAO,yBAAyB,CAAC,GAAG,YAAY,iBAAiB;AAAA,EAAA,CACnE;AACD,QAAM,eAAe,WAAW,YAAY,iBAAiB,UAAU,OAAO,2BAA2B,CAAC;AAGxG,SAAA,qBAAC,UAAK,IAAQ,WAAW,kBAAkB,eAAa,QAAQ,oBAAkB,YAAY,WAC5F,UAAA;AAAA,IAAC,oBAAA,QAAA,EAAK,WAAW,YAAY,eAAa,SAAS,QACjD,UAAC,oBAAA,eAAA,EAAc,SAAkB,QAAA,CAAkB,EACrD,CAAA;AAAA,IACC,oBAAA,QAAA,EAAK,WAAW,cAAe,UAAK,KAAA,CAAA;AAAA,EAAA,GACvC;AAEJ;"}

package/StepButtons.js

@@ -1,28 +1,32 @@
-import { jsxs as i, jsx as l } from "react/jsx-runtime";
-import r from "react";
-import a from "classnames";
-import { AnalyticsId as p } from "./constants.js";
-import t from "./components/StepButtons/styles.module.scss";
-const B = (u) => {
-  const { backButton: s, forwardButton: n, additionalButtons: e, cancelButton: o, sticky: c = !1, testId: d } = u, m = a(t.stepbuttons, c && t["stepbuttons--has-sticky-buttons"]);
-  return s || n || e || o ? /* @__PURE__ */ i("div", { className: m, "data-testid": d, "data-analyticsid": p.StepButtons, children: [
-    (s || n) && /* @__PURE__ */ i("div", { className: t.stepbuttons__buttons, children: [
-      s && r.cloneElement(s, {
-        variant: "outline",
-        wrapperClassName: a(t["stepbuttons__button--back"])
-      }),
-      n && r.cloneElement(n, {
-        variant: "fill",
-        wrapperClassName: a(t["stepbuttons__button--forward"])
-      })
-    ] }),
-    e && /* @__PURE__ */ l("div", { className: a(t.stepbuttons__buttons, t["stepbuttons__buttons--additional"]), children: e }),
-    o && /* @__PURE__ */ l("div", { className: t.stepbuttons__buttons, children: r.cloneElement(o, {
-      variant: "borderless"
-    }) })
-  ] }) : null;
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import classNames from "classnames";
+import { AnalyticsId } from "./constants.js";
+import styles from "./components/StepButtons/styles.module.scss";
+const StepButtons = (props) => {
+  const { backButton, forwardButton, additionalButtons, cancelButton, sticky = false, testId } = props;
+  const navigationClasses = classNames(styles.stepbuttons, sticky && styles["stepbuttons--has-sticky-buttons"]);
+  if (backButton || forwardButton || additionalButtons || cancelButton) {
+    return /* @__PURE__ */ jsxs("div", { className: navigationClasses, "data-testid": testId, "data-analyticsid": AnalyticsId.StepButtons, children: [
+      (backButton || forwardButton) && /* @__PURE__ */ jsxs("div", { className: styles.stepbuttons__buttons, children: [
+        backButton && React.cloneElement(backButton, {
+          variant: "outline",
+          wrapperClassName: classNames(styles["stepbuttons__button--back"])
+        }),
+        forwardButton && React.cloneElement(forwardButton, {
+          variant: "fill",
+          wrapperClassName: classNames(styles["stepbuttons__button--forward"])
+        })
+      ] }),
+      additionalButtons && /* @__PURE__ */ jsx("div", { className: classNames(styles.stepbuttons__buttons, styles["stepbuttons__buttons--additional"]), children: additionalButtons }),
+      cancelButton && /* @__PURE__ */ jsx("div", { className: styles.stepbuttons__buttons, children: React.cloneElement(cancelButton, {
+        variant: "borderless"
+      }) })
+    ] });
+  }
+  return null;
 };
 export {
-  B as S
+  StepButtons as S
 };
 //# sourceMappingURL=StepButtons.js.map

package/StepButtons.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepButtons.js","sources":["../src/components/StepButtons/StepButtons.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { ButtonProps } from '../Button';\n\nimport styles from './styles.module.scss';\n\nexport interface StepButtonsProps {\n  /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n  backButton?: React.ReactElement<ButtonProps>;\n  /** Knapp for å gå videre. Vises med \"fill\" variant. */\n  forwardButton?: React.ReactElement<ButtonProps>;\n  /** Ekstra knapper. Valgfritt utseende. */\n  additionalButtons?: React.ReactElement<ButtonProps>[];\n  /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n  cancelButton?: React.ReactElement<ButtonProps>;\n  /** Knappene vil vises sticky nederst på skjermen. Default: false  */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const StepButtons: React.FC<StepButtonsProps> = props => {\n  const { backButton, forwardButton, additionalButtons, cancelButton, sticky = false, testId } = props;\n\n  const navigationClasses = classNames(styles.stepbuttons, sticky && styles['stepbuttons--has-sticky-buttons']);\n\n  if (backButton || forwardButton || additionalButtons || cancelButton) {\n    return (\n      <div className={navigationClasses} data-testid={testId} data-analyticsid={AnalyticsId.StepButtons}>\n        {(backButton || forwardButton) && (\n          <div className={styles.stepbuttons__buttons}>\n            {backButton &&\n              React.cloneElement(backButton, {\n                variant: 'outline',\n                wrapperClassName: classNames(styles['stepbuttons__button--back']),\n              })}\n            {forwardButton &&\n              React.cloneElement(forwardButton, {\n                variant: 'fill',\n                wrapperClassName: classNames(styles['stepbuttons__button--forward']),\n              })}\n          </div>\n        )}\n        {additionalButtons && (\n          <div className={classNames(styles.stepbuttons__buttons, styles['stepbuttons__buttons--additional'])}>{additionalButtons}</div>\n        )}\n        {cancelButton && (\n          <div className={styles.stepbuttons__buttons}>\n            {React.cloneElement(cancelButton, {\n              variant: 'borderless',\n            })}\n          </div>\n        )}\n      </div>\n    );\n  }\n  return null;\n};\n\nexport default StepButtons;\n"],"names":["StepButtons","props","backButton","forwardButton","additionalButtons","cancelButton","sticky","testId","navigationClasses","classNames","styles","jsxs","AnalyticsId","React","jsx"],"mappings":";;;;;AAwBO,MAAMA,IAA0C,CAASC,MAAA;AACxD,QAAA,EAAE,YAAAC,GAAY,eAAAC,GAAe,mBAAAC,GAAmB,cAAAC,GAAc,QAAAC,IAAS,IAAO,QAAAC,EAAW,IAAAN,GAEzFO,IAAoBC,EAAWC,EAAO,aAAaJ,KAAUI,EAAO,iCAAiC,CAAC;AAExG,SAAAR,KAAcC,KAAiBC,KAAqBC,IAEpD,gBAAAM,EAAC,SAAI,WAAWH,GAAmB,eAAaD,GAAQ,oBAAkBK,EAAY,aAClF,UAAA;AAAA,KAAAV,KAAcC,MACd,gBAAAQ,EAAC,OAAI,EAAA,WAAWD,EAAO,sBACpB,UAAA;AAAA,MACCR,KAAAW,EAAM,aAAaX,GAAY;AAAA,QAC7B,SAAS;AAAA,QACT,kBAAkBO,EAAWC,EAAO,2BAA2B,CAAC;AAAA,MAAA,CACjE;AAAA,MACFP,KACCU,EAAM,aAAaV,GAAe;AAAA,QAChC,SAAS;AAAA,QACT,kBAAkBM,EAAWC,EAAO,8BAA8B,CAAC;AAAA,MAAA,CACpE;AAAA,IAAA,GACL;AAAA,IAEDN,KACE,gBAAAU,EAAA,OAAA,EAAI,WAAWL,EAAWC,EAAO,sBAAsBA,EAAO,kCAAkC,CAAC,GAAI,UAAkBN,EAAA,CAAA;AAAA,IAEzHC,uBACE,OAAI,EAAA,WAAWK,EAAO,sBACpB,UAAAG,EAAM,aAAaR,GAAc;AAAA,MAChC,SAAS;AAAA,IACV,CAAA,GACH;AAAA,EAEJ,EAAA,CAAA,IAGG;AACT;"}
+{"version":3,"file":"StepButtons.js","sources":["../src/components/StepButtons/StepButtons.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { ButtonProps } from '../Button';\n\nimport styles from './styles.module.scss';\n\nexport interface StepButtonsProps {\n  /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n  backButton?: React.ReactElement<ButtonProps>;\n  /** Knapp for å gå videre. Vises med \"fill\" variant. */\n  forwardButton?: React.ReactElement<ButtonProps>;\n  /** Ekstra knapper. Valgfritt utseende. */\n  additionalButtons?: React.ReactElement<ButtonProps>[];\n  /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n  cancelButton?: React.ReactElement<ButtonProps>;\n  /** Knappene vil vises sticky nederst på skjermen. Default: false  */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const StepButtons: React.FC<StepButtonsProps> = props => {\n  const { backButton, forwardButton, additionalButtons, cancelButton, sticky = false, testId } = props;\n\n  const navigationClasses = classNames(styles.stepbuttons, sticky && styles['stepbuttons--has-sticky-buttons']);\n\n  if (backButton || forwardButton || additionalButtons || cancelButton) {\n    return (\n      <div className={navigationClasses} data-testid={testId} data-analyticsid={AnalyticsId.StepButtons}>\n        {(backButton || forwardButton) && (\n          <div className={styles.stepbuttons__buttons}>\n            {backButton &&\n              React.cloneElement(backButton, {\n                variant: 'outline',\n                wrapperClassName: classNames(styles['stepbuttons__button--back']),\n              })}\n            {forwardButton &&\n              React.cloneElement(forwardButton, {\n                variant: 'fill',\n                wrapperClassName: classNames(styles['stepbuttons__button--forward']),\n              })}\n          </div>\n        )}\n        {additionalButtons && (\n          <div className={classNames(styles.stepbuttons__buttons, styles['stepbuttons__buttons--additional'])}>{additionalButtons}</div>\n        )}\n        {cancelButton && (\n          <div className={styles.stepbuttons__buttons}>\n            {React.cloneElement(cancelButton, {\n              variant: 'borderless',\n            })}\n          </div>\n        )}\n      </div>\n    );\n  }\n  return null;\n};\n\nexport default StepButtons;\n"],"names":[],"mappings":";;;;;AAwBO,MAAM,cAA0C,CAAS,UAAA;AACxD,QAAA,EAAE,YAAY,eAAe,mBAAmB,cAAc,SAAS,OAAO,WAAW;AAE/F,QAAM,oBAAoB,WAAW,OAAO,aAAa,UAAU,OAAO,iCAAiC,CAAC;AAExG,MAAA,cAAc,iBAAiB,qBAAqB,cAAc;AAElE,WAAA,qBAAC,SAAI,WAAW,mBAAmB,eAAa,QAAQ,oBAAkB,YAAY,aAClF,UAAA;AAAA,OAAA,cAAc,kBACd,qBAAC,OAAI,EAAA,WAAW,OAAO,sBACpB,UAAA;AAAA,QACC,cAAA,MAAM,aAAa,YAAY;AAAA,UAC7B,SAAS;AAAA,UACT,kBAAkB,WAAW,OAAO,2BAA2B,CAAC;AAAA,QAAA,CACjE;AAAA,QACF,iBACC,MAAM,aAAa,eAAe;AAAA,UAChC,SAAS;AAAA,UACT,kBAAkB,WAAW,OAAO,8BAA8B,CAAC;AAAA,QACpE,CAAA;AAAA,MAAA,GACL;AAAA,MAED,qBACE,oBAAA,OAAA,EAAI,WAAW,WAAW,OAAO,sBAAsB,OAAO,kCAAkC,CAAC,GAAI,UAAkB,kBAAA,CAAA;AAAA,MAEzH,oCACE,OAAI,EAAA,WAAW,OAAO,sBACpB,UAAA,MAAM,aAAa,cAAc;AAAA,QAChC,SAAS;AAAA,MAAA,CACV,EACH,CAAA;AAAA,IAAA,GAEJ;AAAA,EAAA;AAGG,SAAA;AACT;"}

package/TabList.js

@@ -1,57 +1,75 @@
-import { jsx as o, Fragment as S, jsxs as R } from "react/jsx-runtime";
-import C, { useRef as v, useEffect as w } from "react";
-import d from "classnames";
-import { useIsVisible as y } from "./hooks/useIsVisible.js";
-import { palette as k } from "./theme/palette.js";
-import { I as z } from "./Icon.js";
-import { IconSize as x } from "./constants.js";
-import { L } from "./LazyIcon.js";
-import n from "./components/Tabs/TabList/styles.module.scss";
-import { useRovingFocus as V } from "./hooks/useRovingFocus.js";
-import { isComponent as $ } from "./utils/component.js";
-const F = (t) => /* @__PURE__ */ o(S, { children: t.children ?? null }), B = (t) => {
-  const e = t.index === t.selectedTab, { title: u, onTabClick: s, icon: a, testId: l } = t.tabProps, m = () => {
-    s && s(t.index), t.onTabListClick(t.index), c(t.index);
-  }, r = d(n["tab-list__tab"], n[`tab-list__tab--${t.color}`], {
-    [n["tab-list__tab--selected"]]: e,
-    [n["tab-list__tab--not-selected"]]: !e
-  }), g = t.tabRefs.current && t.tabRefs.current[t.index], c = (T) => {
-    var _;
-    const i = t.tabRefs.current && t.tabRefs.current[T];
-    (_ = i == null ? void 0 : i.current) == null || _.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
-  }, f = v(null), h = y(f);
-  return w(() => {
-    e && h && c(t.index);
-  }, [e && h]), /* @__PURE__ */ o("li", { role: "presentation", ref: f, children: /* @__PURE__ */ o(
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import React, { useRef, useEffect } from "react";
+import classNames from "classnames";
+import { palette } from "./theme/palette.js";
+import { I as Icon } from "./Icon.js";
+import { IconSize } from "./constants.js";
+import { L as LazyIcon } from "./LazyIcon.js";
+import styles from "./components/Tabs/TabList/styles.module.scss";
+import { useIsVisible } from "./hooks/useIsVisible.js";
+import { useRovingFocus } from "./hooks/useRovingFocus.js";
+import { isComponent } from "./utils/component.js";
+const Tab = (props) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: props.children ?? null });
+};
+const TabItem = (props) => {
+  const isSelected = props.index === props.selectedTab;
+  const { title, onTabClick, icon, testId } = props.tabProps;
+  const handleClick = () => {
+    onTabClick && onTabClick(props.index);
+    props.onTabListClick(props.index);
+    scrollToTab(props.index);
+  };
+  const tabButtonClasses = classNames(styles["tab-list__tab"], styles[`tab-list__tab--${props.color}`], {
+    [styles["tab-list__tab--selected"]]: isSelected,
+    [styles["tab-list__tab--not-selected"]]: !isSelected
+  });
+  const currentRef = props.tabRefs.current && props.tabRefs.current[props.index];
+  const scrollToTab = (index) => {
+    var _a, _b;
+    const currentRef2 = props.tabRefs.current && props.tabRefs.current[index];
+    ((_a = currentRef2 == null ? void 0 : currentRef2.current) == null ? void 0 : _a.scrollIntoView) && ((_b = currentRef2 == null ? void 0 : currentRef2.current) == null ? void 0 : _b.scrollIntoView({ behavior: "smooth", inline: "nearest", block: "nearest" }));
+  };
+  const itemRef = useRef(null);
+  useEffect(() => {
+    if (isSelected) {
+      scrollToTab(props.index);
+    }
+  }, [isSelected]);
+  return /* @__PURE__ */ jsx("li", { role: "presentation", ref: itemRef, children: /* @__PURE__ */ jsx(
     "button",
     {
       role: "tab",
-      "aria-selected": e,
-      onClick: m,
-      className: r,
-      "data-testid": l,
-      ref: g,
+      "aria-selected": isSelected,
+      onClick: handleClick,
+      className: tabButtonClasses,
+      "data-testid": testId,
+      ref: currentRef,
       style: {
-        borderBottom: e ? `2px solid var(--color-base-background-${t.color})` : "1px solid var(--color-action-border-onlight-focus)"
+        borderBottom: isSelected ? `2px solid var(--color-base-background-${props.color})` : "1px solid var(--color-action-border-onlight-focus)"
       },
-      children: /* @__PURE__ */ R("span", { className: n["tab-list__tab__title-and-icon"], children: [
-        a && (typeof a == "string" ? /* @__PURE__ */ o(
-          L,
+      children: /* @__PURE__ */ jsxs("span", { className: styles["tab-list__tab__title-and-icon"], children: [
+        icon && (typeof icon === "string" ? /* @__PURE__ */ jsx(
+          LazyIcon,
           {
-            iconName: a,
-            size: x.XSmall,
-            color: e ? k.black : k.blueberry500
+            iconName: icon,
+            size: IconSize.XSmall,
+            color: isSelected ? palette[`black`] : palette["blueberry500"]
           }
-        ) : /* @__PURE__ */ o(z, { svgIcon: a, size: x.XSmall, color: e ? k.black : k.blueberry500 })),
-        u
+        ) : /* @__PURE__ */ jsx(Icon, { svgIcon: icon, size: IconSize.XSmall, color: isSelected ? palette[`black`] : palette["blueberry500"] })),
+        title
       ] })
     }
   ) });
-}, K = (t) => {
-  const { selectedTab: e, onTabListClick: u, children: s, color: a, onColor: l } = t, m = v(null), r = v(C.Children.map(s, () => C.createRef()) || []);
-  V(u, r, m, !0);
-  const g = d(n["tab-list"], n[`tab-list--${l}`]), c = (b) => {
-    switch (b) {
+};
+const TabList = (props) => {
+  const { selectedTab, onTabListClick, children, color, onColor } = props;
+  const listRef = useRef(null);
+  const tabRefs = useRef(React.Children.map(children, () => React.createRef()) || []);
+  useRovingFocus(onTabListClick, tabRefs, listRef, true);
+  const tablistClasses = classNames(styles["tab-list"], styles[`tab-list--${onColor}`]);
+  const getBackgroundColor = (onColor2) => {
+    switch (onColor2) {
       case "onwhite":
         return "var(--color-base-background-white)";
       case "onblueberry":
@@ -59,45 +77,60 @@ const F = (t) => /* @__PURE__ */ o(S, { children: t.children ?? null }), B = (t)
       case "onneutral":
         return "var(--color-base-background-neutral)";
     }
-  }, f = r.current && r.current[0], h = r.current && r.current[r.current.length - 1], T = y(f), i = y(h), _ = () => !T && e !== 0, I = () => !i && e !== r.current.length - 1;
-  return /* @__PURE__ */ R("div", { children: [
-    /* @__PURE__ */ o(
+  };
+  const firstTab = tabRefs.current && tabRefs.current[0];
+  const lastTab = tabRefs.current && tabRefs.current[tabRefs.current.length - 1];
+  const firstTabVisible = useIsVisible(firstTab);
+  const lastTabVisible = useIsVisible(lastTab);
+  const shouldShowFadeStart = () => {
+    return !firstTabVisible && selectedTab !== 0;
+  };
+  const shouldShowFadeEnd = () => {
+    return !lastTabVisible && selectedTab !== tabRefs.current.length - 1;
+  };
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
       "div",
       {
-        className: d(n["tab-list__fade-start"]),
+        className: classNames(styles["tab-list__fade-start"]),
         style: {
-          display: _() ? "block" : "none",
-          backgroundColor: `${c(l)}`
+          display: shouldShowFadeStart() ? "block" : "none",
+          backgroundColor: `${getBackgroundColor(onColor)}`
         }
       }
     ),
-    /* @__PURE__ */ o("ul", { className: g, ref: m, role: "tablist", "aria-orientation": "horizontal", children: C.Children.map(s, (b, N) => $(b, F) ? /* @__PURE__ */ o(
-      B,
-      {
-        tabRefs: r,
-        index: N,
-        selectedTab: e,
-        onTabListClick: u,
-        tabProps: b.props,
-        color: a
-      },
-      b.props.title
-    ) : null) }),
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ jsx("ul", { className: tablistClasses, ref: listRef, role: "tablist", "aria-orientation": "horizontal", children: React.Children.map(children, (child, index) => {
+      if (isComponent(child, Tab)) {
+        return /* @__PURE__ */ jsx(
+          TabItem,
+          {
+            tabRefs,
+            index,
+            selectedTab,
+            onTabListClick,
+            tabProps: child.props,
+            color
+          },
+          child.props.title
+        );
+      }
+      return null;
+    }) }),
+    /* @__PURE__ */ jsx(
       "div",
       {
-        className: d(n["tab-list__fade-end"]),
+        className: classNames(styles["tab-list__fade-end"]),
         style: {
-          display: I() ? "block" : "none",
-          backgroundColor: `${c(l)}`
+          display: shouldShowFadeEnd() ? "block" : "none",
+          backgroundColor: `${getBackgroundColor(onColor)}`
         }
       }
     ),
-    /* @__PURE__ */ o("div", { className: d(n["tab-list__border"]) })
+    /* @__PURE__ */ jsx("div", { className: classNames(styles["tab-list__border"]) })
   ] });
 };
 export {
-  K as T,
-  F as a
+  TabList as T,
+  Tab as a
 };
 //# sourceMappingURL=TabList.js.map

package/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","sources":["../src/components/Tabs/Tab.tsx","../src/components/Tabs/TabList/TabItem.tsx","../src/components/Tabs/TabList/TabList.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\n\nexport interface TabProps {\n  /** Sets the tab panel content */\n  children?: React.ReactNode;\n  /** Optional icon on the tab */\n  icon?: SvgIcon | IconName;\n  /** Called when tab is selected */\n  onTabClick?: (index: number) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Title on the tab */\n  title?: string;\n}\n\nconst Tab: React.FC<TabProps> = props => {\n  return <>{props.children ?? null}</>;\n};\n\nexport default Tab;\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useIsVisible } from '../../../hooks/useIsVisible';\nimport { palette } from '../../../theme/palette';\nimport Icon, { IconSize } from '../../Icon';\nimport { IconName } from '../../Icons/IconNames';\nimport LazyIcon from '../../LazyIcon';\nimport { TabProps } from '../Tab';\nimport { TabsColors } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabItemProps {\n  tabProps: TabProps;\n  index: number;\n  color: TabsColors;\n  selectedTab: number;\n  tabRefs: React.MutableRefObject<React.RefObject<HTMLButtonElement>[] | null | undefined>;\n  onTabListClick: (index: number) => void;\n}\n\nconst TabItem: React.FC<TabItemProps> = props => {\n  const isSelected = props.index === props.selectedTab;\n  const { title, onTabClick, icon, testId } = props.tabProps;\n  const handleClick = (): void => {\n    onTabClick && onTabClick(props.index);\n    props.onTabListClick(props.index);\n    scrollToTab(props.index);\n  };\n  const tabButtonClasses = classNames(styles['tab-list__tab'], styles[`tab-list__tab--${props.color}`], {\n    [styles['tab-list__tab--selected']]: isSelected,\n    [styles['tab-list__tab--not-selected']]: !isSelected,\n  });\n\n  const currentRef = props.tabRefs.current && props.tabRefs.current[props.index];\n\n  const scrollToTab = (index: number): void => {\n    const currentRef = props.tabRefs.current && props.tabRefs.current[index];\n    currentRef?.current?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });\n  };\n\n  const itemRef = useRef<HTMLLIElement>(null);\n  const isVisible = useIsVisible(itemRef);\n\n  useEffect(() => {\n    if (isSelected && isVisible) {\n      scrollToTab(props.index);\n    }\n  }, [isSelected && isVisible]);\n\n  return (\n    <li role=\"presentation\" ref={itemRef}>\n      <button\n        role=\"tab\"\n        aria-selected={isSelected}\n        onClick={handleClick}\n        className={tabButtonClasses}\n        data-testid={testId}\n        ref={currentRef as React.RefObject<HTMLButtonElement>}\n        style={{\n          borderBottom: isSelected\n            ? `2px solid var(--color-base-background-${props.color})`\n            : '1px solid var(--color-action-border-onlight-focus)',\n        }}\n      >\n        <span className={styles['tab-list__tab__title-and-icon']}>\n          {icon &&\n            (typeof icon === 'string' ? (\n              <LazyIcon\n                iconName={icon as IconName}\n                size={IconSize.XSmall}\n                color={isSelected ? palette[`black`] : palette['blueberry500']}\n              />\n            ) : (\n              <Icon svgIcon={icon} size={IconSize.XSmall} color={isSelected ? palette[`black`] : palette['blueberry500']} />\n            ))}\n          {title}\n        </span>\n      </button>\n    </li>\n  );\n};\n\nexport default TabItem;\n","import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport TabItem from './TabItem';\nimport { useIsVisible } from '../../../hooks/useIsVisible';\nimport { useRovingFocus } from '../../../hooks/useRovingFocus';\nimport { isComponent } from '../../../utils/component';\nimport Tab, { TabProps } from '../Tab';\nimport { TabsColors, TabsOnColor } from '../Tabs';\n\nimport styles from './styles.module.scss';\ninterface TabListProps {\n  children: React.ReactNode;\n  onTabListClick: (index: number) => void;\n  selectedTab: number;\n  color: TabsColors;\n  onColor: TabsOnColor;\n}\n\nconst TabList: React.FC<TabListProps> = props => {\n  const { selectedTab, onTabListClick, children, color, onColor } = props;\n\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const tabRefs = useRef(React.Children.map(children, () => React.createRef<HTMLButtonElement>()) || []);\n  useRovingFocus(onTabListClick, tabRefs, listRef, true);\n\n  const tablistClasses = classNames(styles['tab-list'], styles[`tab-list--${onColor}`]);\n\n  const getBackgroundColor = (onColor: TabsOnColor): string => {\n    switch (onColor) {\n      case 'onwhite':\n        return 'var(--color-base-background-white)';\n      case 'onblueberry':\n        return 'var(--color-base-background-blueberry)';\n      case 'onneutral':\n        return 'var(--color-base-background-neutral)';\n    }\n  };\n  const firstTab = tabRefs.current && tabRefs.current[0];\n  const lastTab = tabRefs.current && tabRefs.current[tabRefs.current.length - 1];\n\n  const firstTabVisible = useIsVisible(firstTab);\n  const lastTabVisible = useIsVisible(lastTab);\n\n  const shouldShowFadeStart = (): boolean => {\n    return !firstTabVisible && selectedTab !== 0;\n  };\n\n  const shouldShowFadeEnd = (): boolean => {\n    return !lastTabVisible && selectedTab !== tabRefs.current.length - 1;\n  };\n\n  return (\n    <div>\n      <div\n        className={classNames(styles['tab-list__fade-start'])}\n        style={{\n          display: shouldShowFadeStart() ? 'block' : 'none',\n          backgroundColor: `${getBackgroundColor(onColor)}`,\n        }}\n      ></div>\n      <ul className={tablistClasses} ref={listRef} role=\"tablist\" aria-orientation=\"horizontal\">\n        {React.Children.map(children, (child, index) => {\n          if (isComponent<TabProps>(child, Tab)) {\n            return (\n              <TabItem\n                tabRefs={tabRefs}\n                key={child.props.title}\n                index={index}\n                selectedTab={selectedTab}\n                onTabListClick={onTabListClick}\n                tabProps={child.props}\n                color={color}\n              />\n            );\n          }\n          return null;\n        })}\n      </ul>\n      <div\n        className={classNames(styles['tab-list__fade-end'])}\n        style={{\n          display: shouldShowFadeEnd() ? 'block' : 'none',\n          backgroundColor: `${getBackgroundColor(onColor)}`,\n        }}\n      ></div>\n      <div className={classNames(styles['tab-list__border'])}></div>\n    </div>\n  );\n};\n\nexport default TabList;\n"],"names":["Tab","props","jsx","Fragment","TabItem","isSelected","title","onTabClick","icon","testId","handleClick","scrollToTab","tabButtonClasses","classNames","styles","currentRef","index","itemRef","useRef","isVisible","useIsVisible","useEffect","jsxs","LazyIcon","IconSize","palette","Icon","TabList","selectedTab","onTabListClick","children","color","onColor","listRef","tabRefs","React","useRovingFocus","tablistClasses","getBackgroundColor","firstTab","lastTab","firstTabVisible","lastTabVisible","shouldShowFadeStart","shouldShowFadeEnd","child","isComponent"],"mappings":"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"}
+{"version":3,"file":"TabList.js","sources":["../src/components/Tabs/Tab.tsx","../src/components/Tabs/TabList/TabItem.tsx","../src/components/Tabs/TabList/TabList.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\n\nexport interface TabProps {\n  /** Sets the tab panel content */\n  children?: React.ReactNode;\n  /** Optional icon on the tab */\n  icon?: SvgIcon | IconName;\n  /** Called when tab is selected */\n  onTabClick?: (index: number) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Title on the tab */\n  title?: string;\n}\n\nconst Tab: React.FC<TabProps> = props => {\n  return <>{props.children ?? null}</>;\n};\n\nexport default Tab;\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { palette } from '../../../theme/palette';\nimport Icon, { IconSize } from '../../Icon';\nimport { IconName } from '../../Icons/IconNames';\nimport LazyIcon from '../../LazyIcon';\nimport { TabProps } from '../Tab';\nimport { TabsColors } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabItemProps {\n  tabProps: TabProps;\n  index: number;\n  color: TabsColors;\n  selectedTab: number;\n  tabRefs: React.MutableRefObject<React.RefObject<HTMLButtonElement>[] | null | undefined>;\n  onTabListClick: (index: number) => void;\n}\n\nconst TabItem: React.FC<TabItemProps> = props => {\n  const isSelected = props.index === props.selectedTab;\n  const { title, onTabClick, icon, testId } = props.tabProps;\n  const handleClick = (): void => {\n    onTabClick && onTabClick(props.index);\n    props.onTabListClick(props.index);\n    scrollToTab(props.index);\n  };\n  const tabButtonClasses = classNames(styles['tab-list__tab'], styles[`tab-list__tab--${props.color}`], {\n    [styles['tab-list__tab--selected']]: isSelected,\n    [styles['tab-list__tab--not-selected']]: !isSelected,\n  });\n\n  const currentRef = props.tabRefs.current && props.tabRefs.current[props.index];\n\n  const scrollToTab = (index: number): void => {\n    const currentRef = props.tabRefs.current && props.tabRefs.current[index];\n    currentRef?.current?.scrollIntoView && currentRef?.current?.scrollIntoView({ behavior: 'smooth', inline: 'nearest', block: 'nearest' });\n  };\n\n  const itemRef = useRef<HTMLLIElement>(null);\n\n  useEffect(() => {\n    if (isSelected) {\n      scrollToTab(props.index);\n    }\n  }, [isSelected]);\n\n  return (\n    <li role=\"presentation\" ref={itemRef}>\n      <button\n        role=\"tab\"\n        aria-selected={isSelected}\n        onClick={handleClick}\n        className={tabButtonClasses}\n        data-testid={testId}\n        ref={currentRef as React.RefObject<HTMLButtonElement>}\n        style={{\n          borderBottom: isSelected\n            ? `2px solid var(--color-base-background-${props.color})`\n            : '1px solid var(--color-action-border-onlight-focus)',\n        }}\n      >\n        <span className={styles['tab-list__tab__title-and-icon']}>\n          {icon &&\n            (typeof icon === 'string' ? (\n              <LazyIcon\n                iconName={icon as IconName}\n                size={IconSize.XSmall}\n                color={isSelected ? palette[`black`] : palette['blueberry500']}\n              />\n            ) : (\n              <Icon svgIcon={icon} size={IconSize.XSmall} color={isSelected ? palette[`black`] : palette['blueberry500']} />\n            ))}\n          {title}\n        </span>\n      </button>\n    </li>\n  );\n};\n\nexport default TabItem;\n","import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport TabItem from './TabItem';\nimport { useIsVisible } from '../../../hooks/useIsVisible';\nimport { useRovingFocus } from '../../../hooks/useRovingFocus';\nimport { isComponent } from '../../../utils/component';\nimport Tab, { TabProps } from '../Tab';\nimport { TabsColors, TabsOnColor } from '../Tabs';\n\nimport styles from './styles.module.scss';\ninterface TabListProps {\n  children: React.ReactNode;\n  onTabListClick: (index: number) => void;\n  selectedTab: number;\n  color: TabsColors;\n  onColor: TabsOnColor;\n}\n\nconst TabList: React.FC<TabListProps> = props => {\n  const { selectedTab, onTabListClick, children, color, onColor } = props;\n\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const tabRefs = useRef(React.Children.map(children, () => React.createRef<HTMLButtonElement>()) || []);\n  useRovingFocus(onTabListClick, tabRefs, listRef, true);\n\n  const tablistClasses = classNames(styles['tab-list'], styles[`tab-list--${onColor}`]);\n\n  const getBackgroundColor = (onColor: TabsOnColor): string => {\n    switch (onColor) {\n      case 'onwhite':\n        return 'var(--color-base-background-white)';\n      case 'onblueberry':\n        return 'var(--color-base-background-blueberry)';\n      case 'onneutral':\n        return 'var(--color-base-background-neutral)';\n    }\n  };\n  const firstTab = tabRefs.current && tabRefs.current[0];\n  const lastTab = tabRefs.current && tabRefs.current[tabRefs.current.length - 1];\n\n  const firstTabVisible = useIsVisible(firstTab);\n  const lastTabVisible = useIsVisible(lastTab);\n\n  const shouldShowFadeStart = (): boolean => {\n    return !firstTabVisible && selectedTab !== 0;\n  };\n\n  const shouldShowFadeEnd = (): boolean => {\n    return !lastTabVisible && selectedTab !== tabRefs.current.length - 1;\n  };\n\n  return (\n    <div>\n      <div\n        className={classNames(styles['tab-list__fade-start'])}\n        style={{\n          display: shouldShowFadeStart() ? 'block' : 'none',\n          backgroundColor: `${getBackgroundColor(onColor)}`,\n        }}\n      ></div>\n      <ul className={tablistClasses} ref={listRef} role=\"tablist\" aria-orientation=\"horizontal\">\n        {React.Children.map(children, (child, index) => {\n          if (isComponent<TabProps>(child, Tab)) {\n            return (\n              <TabItem\n                tabRefs={tabRefs}\n                key={child.props.title}\n                index={index}\n                selectedTab={selectedTab}\n                onTabListClick={onTabListClick}\n                tabProps={child.props}\n                color={color}\n              />\n            );\n          }\n          return null;\n        })}\n      </ul>\n      <div\n        className={classNames(styles['tab-list__fade-end'])}\n        style={{\n          display: shouldShowFadeEnd() ? 'block' : 'none',\n          backgroundColor: `${getBackgroundColor(onColor)}`,\n        }}\n      ></div>\n      <div className={classNames(styles['tab-list__border'])}></div>\n    </div>\n  );\n};\n\nexport default TabList;\n"],"names":["currentRef","onColor"],"mappings":"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"}

package/TabPanel.js

@@ -1,18 +1,16 @@
-import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import l from "classnames";
-import a from "./components/Tabs/TabPanel/styles.module.scss";
-const h = d((r, n) => {
-  const { children: o, animate: t, color: i = "white", isFirst: m = !1, translateX: e, style: c } = r, f = l(a["tab-panel"], a[`tab-panel--${i}`], {
-    [a["tab-panel--first"]]: m
-  }), p = l({
-    [a["tab-panel--animate-left"]]: t === "left",
-    [a["tab-panel--animate-right"]]: t === "right"
-  }), b = e != 0 ? { transform: `translateX(${e}px)` } : {};
-  return /* @__PURE__ */ s("div", { ref: n, className: f, style: c, children: /* @__PURE__ */ s("div", { className: p, style: b, children: o }) });
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import classNames from "classnames";
+import styles from "./components/Tabs/TabPanel/styles.module.scss";
+const TabPanel = forwardRef((props, ref) => {
+  const { children, color = "white", isFirst = false, style } = props;
+  const tabPanelClasses = classNames(styles["tab-panel"], styles[`tab-panel--${color}`], {
+    [styles["tab-panel--first"]]: isFirst
+  });
+  return /* @__PURE__ */ jsx("div", { ref, className: tabPanelClasses, style, children: /* @__PURE__ */ jsx("div", { children }) });
 });
-h.displayName = "TabPanel";
+TabPanel.displayName = "TabPanel";
 export {
-  h as T
+  TabPanel as T
 };
 //# sourceMappingURL=TabPanel.js.map

package/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","sources":["../src/components/Tabs/TabPanel/TabPanel.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { TabsColors } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabPanelProps {\n  children?: React.ReactNode;\n  color?: TabsColors;\n  isFirst?: boolean;\n  translateX?: number;\n  style?: React.CSSProperties;\n  animate: 'left' | 'right' | null;\n}\n\nconst TabPanel = forwardRef<HTMLDivElement, TabPanelProps>((props, ref) => {\n  const { children, animate, color = 'white', isFirst = false, translateX, style } = props;\n  const tabPanelClasses = classNames(styles['tab-panel'], styles[`tab-panel--${color}`], {\n    [styles['tab-panel--first']]: isFirst,\n  });\n  const contentClasses = classNames({\n    [styles['tab-panel--animate-left']]: animate === 'left',\n    [styles['tab-panel--animate-right']]: animate === 'right',\n  });\n  const transformStyle: React.CSSProperties = translateX != 0 ? { transform: `translateX(${translateX}px)` } : {};\n\n  return (\n    <div ref={ref} className={tabPanelClasses} style={style}>\n      <div className={contentClasses} style={transformStyle}>\n        {children}\n      </div>\n    </div>\n  );\n});\n\nTabPanel.displayName = 'TabPanel';\nexport default TabPanel;\n"],"names":["TabPanel","forwardRef","props","ref","children","animate","color","isFirst","translateX","style","tabPanelClasses","classNames","styles","contentClasses","transformStyle","jsx"],"mappings":";;;;AAiBA,MAAMA,IAAWC,EAA0C,CAACC,GAAOC,MAAQ;AACnE,QAAA,EAAE,UAAAC,GAAU,SAAAC,GAAS,OAAAC,IAAQ,SAAS,SAAAC,IAAU,IAAO,YAAAC,GAAY,OAAAC,EAAU,IAAAP,GAC7EQ,IAAkBC,EAAWC,EAAO,WAAW,GAAGA,EAAO,cAAcN,CAAK,EAAE,GAAG;AAAA,IACrF,CAACM,EAAO,kBAAkB,CAAC,GAAGL;AAAA,EAAA,CAC/B,GACKM,IAAiBF,EAAW;AAAA,IAChC,CAACC,EAAO,yBAAyB,CAAC,GAAGP,MAAY;AAAA,IACjD,CAACO,EAAO,0BAA0B,CAAC,GAAGP,MAAY;AAAA,EAAA,CACnD,GACKS,IAAsCN,KAAc,IAAI,EAAE,WAAW,cAAcA,CAAU,MAAM,IAAI;AAE7G,SACG,gBAAAO,EAAA,OAAA,EAAI,KAAAZ,GAAU,WAAWO,GAAiB,OAAAD,GACzC,UAAC,gBAAAM,EAAA,OAAA,EAAI,WAAWF,GAAgB,OAAOC,GACpC,UAAAV,GACH,EACF,CAAA;AAEJ,CAAC;AAEDJ,EAAS,cAAc;"}
+{"version":3,"file":"TabPanel.js","sources":["../src/components/Tabs/TabPanel/TabPanel.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { TabsColors } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabPanelProps {\n  children?: React.ReactNode;\n  color?: TabsColors;\n  isFirst?: boolean;\n  style?: React.CSSProperties;\n}\n\nconst TabPanel = forwardRef<HTMLDivElement, TabPanelProps>((props, ref) => {\n  const { children, color = 'white', isFirst = false, style } = props;\n\n  const tabPanelClasses = classNames(styles['tab-panel'], styles[`tab-panel--${color}`], {\n    [styles['tab-panel--first']]: isFirst,\n  });\n\n  return (\n    <div ref={ref} className={tabPanelClasses} style={style}>\n      <div>{children}</div>\n    </div>\n  );\n});\n\nTabPanel.displayName = 'TabPanel';\nexport default TabPanel;\n"],"names":[],"mappings":";;;;AAeA,MAAM,WAAW,WAA0C,CAAC,OAAO,QAAQ;AACzE,QAAM,EAAE,UAAU,QAAQ,SAAS,UAAU,OAAO,UAAU;AAExD,QAAA,kBAAkB,WAAW,OAAO,WAAW,GAAG,OAAO,cAAc,KAAK,EAAE,GAAG;AAAA,IACrF,CAAC,OAAO,kBAAkB,CAAC,GAAG;AAAA,EAAA,CAC/B;AAGC,SAAA,oBAAC,SAAI,KAAU,WAAW,iBAAiB,OACzC,UAAA,oBAAC,OAAK,EAAA,SAAA,CAAS,EACjB,CAAA;AAEJ,CAAC;AAED,SAAS,cAAc;"}