@helsenorge/designsystem-react 13.0.0-beta.2 → 13.0.0-beta.4

package/ListEditMode.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListEditMode.js","sources":["../src/components/ListEditMode/ListEditMode.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { ExpanderListColors, ExpanderListVariant } from '../ExpanderList';\nimport Icon, { SvgIcon } from '../Icon';\nimport X from '../Icons/X';\nimport { LinkListColors, LinkListVariant } from '../LinkList';\n\nimport styles from './styles.module.scss';\n\nexport interface ListEditModeProps extends ListEditModeItemProps {\n  /** Items in the ListEditMode */\n  children: React.ReactNode;\n  /** Sets visual priority */\n  variant?: LinkListVariant | ExpanderListVariant;\n  /** Sets color */\n  color?: LinkListColors | ExpanderListColors;\n}\n\nexport interface ListEditModeItemProps {\n  /** Enables ListEditMode */\n  editMode?: boolean;\n  /** Callback for delete button  */\n  onDelete?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n}\n\nexport const listEditModeWrapperClassnames = classNames([styles[`list-edit-mode`]]);\n\nexport const IconButton = ({\n  icon,\n  color,\n  onClick,\n}: {\n  icon: SvgIcon;\n  color: 'red' | 'blue';\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n}): React.JSX.Element => {\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n\n  return (\n    <button ref={refObject} onClick={onClick} type=\"button\" className={classNames(styles['list-edit-mode__icon-button'])}>\n      <Icon\n        isHovered={isHovered}\n        svgIcon={icon}\n        size={IconSize.Small}\n        color={color === 'blue' ? 'var(--color-action-graphics-onlight)' : 'var(--color-destructive-graphics-normal'}\n      />\n    </button>\n  );\n};\n\nexport const ListEditModeItem = (props: ListEditModeProps): React.JSX.Element => {\n  const { children, variant = 'line', color = 'neutral', onDelete } = props;\n\n  const listClassNames = classNames(styles['list-edit-mode__item'], color && styles[`list-edit-mode__item--${color}`], {\n    [styles['list-edit-mode__item--line']]: variant === 'line',\n    [styles['list-edit-mode__item--fill']]: variant === 'fill' || variant === 'fill-negative',\n  });\n\n  return (\n    <div className={listClassNames}>\n      {onDelete && <IconButton icon={X} onClick={onDelete} color=\"red\" />}\n      {children}\n    </div>\n  );\n};\n\nListEditModeItem.displayName = 'ListEditModeItem';\n\nexport default ListEditModeItem;\n"],"names":[],"mappings":";;;;;;;AA6BO,MAAM,gCAAgC,WAAW,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE3E,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,MAIyB;AACvB,QAAM,EAAE,WAAW,UAAA,IAAc,iBAAA;AAEjC,SACE,oBAAC,UAAA,EAAO,KAAK,WAAW,SAAkB,MAAK,UAAS,WAAW,WAAW,OAAO,6BAA6B,CAAC,GACjH,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,MACT,MAAM,SAAS;AAAA,MACf,OAAO,UAAU,SAAS,yCAAyC;AAAA,IAAA;AAAA,EAAA,GAEvE;AAEJ;AAEO,MAAM,mBAAmB,CAAC,UAAgD;AAC/E,QAAM,EAAE,UAAU,UAAU,QAAQ,QAAQ,WAAW,aAAa;AAEpE,QAAM,iBAAiB,WAAW,OAAO,sBAAsB,GAAG,SAAS,OAAO,yBAAyB,KAAK,EAAE,GAAG;AAAA,IACnH,CAAC,OAAO,4BAA4B,CAAC,GAAG,YAAY;AAAA,IACpD,CAAC,OAAO,4BAA4B,CAAC,GAAG,YAAY,UAAU,YAAY;AAAA,EAAA,CAC3E;AAED,SACE,qBAAC,OAAA,EAAI,WAAW,gBACb,UAAA;AAAA,IAAA,gCAAa,YAAA,EAAW,MAAM,GAAG,SAAS,UAAU,OAAM,OAAM;AAAA,IAChE;AAAA,EAAA,GACH;AAEJ;AAEA,iBAAiB,cAAc;"}
+{"version":3,"file":"ListEditMode.js","names":[],"sources":["../src/components/ListEditMode/ListEditMode.tsx","../src/components/ListEditMode/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { ExpanderListColors, ExpanderListVariant } from '../ExpanderList';\nimport Icon, { SvgIcon } from '../Icon';\nimport X from '../Icons/X';\nimport { LinkListColors, LinkListVariant } from '../LinkList';\n\nimport styles from './styles.module.scss';\n\nexport interface ListEditModeProps extends ListEditModeItemProps {\n  /** Items in the ListEditMode */\n  children: React.ReactNode;\n  /** Sets visual priority */\n  variant?: LinkListVariant | ExpanderListVariant;\n  /** Sets color */\n  color?: LinkListColors | ExpanderListColors;\n}\n\nexport interface ListEditModeItemProps {\n  /** Enables ListEditMode */\n  editMode?: boolean;\n  /** Callback for delete button  */\n  onDelete?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n}\n\nexport const listEditModeWrapperClassnames = classNames([styles[`list-edit-mode`]]);\n\nexport const IconButton = ({\n  icon,\n  color,\n  onClick,\n}: {\n  icon: SvgIcon;\n  color: 'red' | 'blue';\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n}): React.JSX.Element => {\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n\n  return (\n    <button ref={refObject} onClick={onClick} type=\"button\" className={classNames(styles['list-edit-mode__icon-button'])}>\n      <Icon\n        isHovered={isHovered}\n        svgIcon={icon}\n        size={IconSize.Small}\n        color={color === 'blue' ? 'var(--color-action-graphics-onlight)' : 'var(--color-destructive-graphics-normal'}\n      />\n    </button>\n  );\n};\n\nexport const ListEditModeItem = (props: ListEditModeProps): React.JSX.Element => {\n  const { children, variant = 'line', color = 'neutral', onDelete } = props;\n\n  const listClassNames = classNames(styles['list-edit-mode__item'], color && styles[`list-edit-mode__item--${color}`], {\n    [styles['list-edit-mode__item--line']]: variant === 'line',\n    [styles['list-edit-mode__item--fill']]: variant === 'fill' || variant === 'fill-negative',\n  });\n\n  return (\n    <div className={listClassNames}>\n      {onDelete && <IconButton icon={X} onClick={onDelete} color=\"red\" />}\n      {children}\n    </div>\n  );\n};\n\nListEditModeItem.displayName = 'ListEditModeItem';\n\nexport default ListEditModeItem;\n","import ListEditModeItem from './ListEditMode';\nexport * from './ListEditMode';\nexport default ListEditModeItem;\n"],"mappings":";;;;;;;;AA6BA,MAAa,gCAAgC,GAAW,CAAC,OAAO,kBAAkB,CAAC;AAEnF,MAAa,cAAc,EACzB,MACA,OACA,cAKuB;CACvB,MAAM,EAAE,WAAW,cAAc,kBAAqC;AAEtE,QACE,oBAAC,UAAA;EAAO,KAAK;EAAoB;EAAS,MAAK;EAAS,WAAW,GAAW,OAAO,+BAA+B;YAClH,oBAAC,cAAA;GACY;GACX,SAAS;GACT,MAAM,SAAS;GACf,OAAO,UAAU,SAAS,yCAAyC;IACnE;GACK;;AAIb,MAAa,oBAAoB,UAAgD;CAC/E,MAAM,EAAE,UAAU,UAAU,QAAQ,QAAQ,WAAW,aAAa;AAOpE,QACE,qBAAC,OAAA;EAAI,WANgB,GAAW,OAAO,yBAAyB,SAAS,OAAO,yBAAyB,UAAU;IAClH,OAAO,gCAAgC,YAAY;IACnD,OAAO,gCAAgC,YAAY,UAAU,YAAY;GAC3E,CAAC;aAIG,YAAY,oBAAC,YAAA;GAAW,MAAM;GAAG,SAAS;GAAU,OAAM;IAAQ,EAClE,SAAA;GACG;;AAIV,iBAAiB,cAAc;ACpE/B,IAAA,yBDsEe"}

package/MaxCharacters.js

@@ -1,17 +1,24 @@
+import { r as FormOnColor } from "./constants2.js";
+import React from "react";
+import cn from "classnames";
 import { jsx } from "react/jsx-runtime";
-import classNames from "classnames";
-import { FormOnColor } from "./constants.js";
 import styles from "./components/MaxCharacters/styles.module.scss";
-const MaxCharacters = ({ maxCharacters, maxText, length, onColor, maxWidth }) => {
-  const progress = length / maxCharacters;
-  const counterTextClass = classNames(styles["max-characters"], {
-    [styles[`max-characters--on-dark`]]: onColor === FormOnColor.ondark,
-    [styles[`max-characters--invalid`]]: progress > 1
-  });
-  const ariaLevel = progress > 0.95 ? "polite" : "off";
-  return /* @__PURE__ */ jsx("div", { "aria-live": ariaLevel, "aria-atomic": "true", className: counterTextClass, style: { maxWidth }, children: `${length}/${maxCharacters} ${maxText ? maxText : "tegn"}` });
+var MaxCharacters = ({ maxCharacters, maxText, length, onColor, maxWidth }) => {
+	const progress = length / maxCharacters;
+	const counterTextClass = cn(styles["max-characters"], {
+		[styles[`max-characters--on-dark`]]: onColor === FormOnColor.ondark,
+		[styles[`max-characters--invalid`]]: progress > 1
+	});
+	const ariaLevel = progress > .95 ? "polite" : "off";
+	return /* @__PURE__ */ jsx("div", {
+		"aria-live": ariaLevel,
+		"aria-atomic": "true",
+		className: counterTextClass,
+		style: { maxWidth },
+		children: `${length}/${maxCharacters} ${maxText ? maxText : "tegn"}`
+	});
 };
-export {
-  MaxCharacters as M
-};
-//# sourceMappingURL=MaxCharacters.js.map
+var MaxCharacters_default = MaxCharacters;
+export { MaxCharacters_default as t };
+
+//# sourceMappingURL=MaxCharacters.js.map

package/MaxCharacters.js.map

@@ -1 +1 @@
-{"version":3,"file":"MaxCharacters.js","sources":["../src/components/MaxCharacters/MaxCharacters.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { FormOnColor } from '../../constants';\n\nimport styles from './styles.module.scss';\n\ninterface MaxCharactersProps {\n  /** Current input length */\n  length: number;\n  /** max character limit in textarea  */\n  maxCharacters: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Changes the visuals of the textarea */\n  onColor?: keyof typeof FormOnColor;\n  /** Max width of the component */\n  maxWidth?: string;\n}\n\nconst MaxCharacters: React.FC<MaxCharactersProps> = ({ maxCharacters, maxText, length, onColor, maxWidth }) => {\n  const progress = length / maxCharacters;\n\n  const counterTextClass = classNames(styles['max-characters'], {\n    [styles[`max-characters--on-dark`]]: onColor === FormOnColor.ondark,\n    [styles[`max-characters--invalid`]]: progress > 1,\n  });\n\n  const ariaLevel = progress > 0.95 ? 'polite' : 'off';\n\n  return (\n    <div aria-live={ariaLevel} aria-atomic={'true'} className={counterTextClass} style={{ maxWidth }}>\n      {`${length}/${maxCharacters} ${maxText ? maxText : 'tegn'}`}\n    </div>\n  );\n};\n\nexport default MaxCharacters;\n"],"names":[],"mappings":";;;;AAqBA,MAAM,gBAA8C,CAAC,EAAE,eAAe,SAAS,QAAQ,SAAS,eAAe;AAC7G,QAAM,WAAW,SAAS;AAE1B,QAAM,mBAAmB,WAAW,OAAO,gBAAgB,GAAG;AAAA,IAC5D,CAAC,OAAO,yBAAyB,CAAC,GAAG,YAAY,YAAY;AAAA,IAC7D,CAAC,OAAO,yBAAyB,CAAC,GAAG,WAAW;AAAA,EAAA,CACjD;AAED,QAAM,YAAY,WAAW,OAAO,WAAW;AAE/C,SACE,oBAAC,SAAI,aAAW,WAAW,eAAa,QAAQ,WAAW,kBAAkB,OAAO,EAAE,YACnF,UAAA,GAAG,MAAM,IAAI,aAAa,IAAI,UAAU,UAAU,MAAM,IAC3D;AAEJ;"}
+{"version":3,"file":"MaxCharacters.js","names":["MaxCharacters: React.FC<MaxCharactersProps>"],"sources":["../src/components/MaxCharacters/MaxCharacters.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { FormOnColor } from '../../constants';\n\nimport styles from './styles.module.scss';\n\ninterface MaxCharactersProps {\n  /** Current input length */\n  length: number;\n  /** max character limit in textarea  */\n  maxCharacters: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Changes the visuals of the textarea */\n  onColor?: keyof typeof FormOnColor;\n  /** Max width of the component */\n  maxWidth?: string;\n}\n\nconst MaxCharacters: React.FC<MaxCharactersProps> = ({ maxCharacters, maxText, length, onColor, maxWidth }) => {\n  const progress = length / maxCharacters;\n\n  const counterTextClass = classNames(styles['max-characters'], {\n    [styles[`max-characters--on-dark`]]: onColor === FormOnColor.ondark,\n    [styles[`max-characters--invalid`]]: progress > 1,\n  });\n\n  const ariaLevel = progress > 0.95 ? 'polite' : 'off';\n\n  return (\n    <div aria-live={ariaLevel} aria-atomic={'true'} className={counterTextClass} style={{ maxWidth }}>\n      {`${length}/${maxCharacters} ${maxText ? maxText : 'tegn'}`}\n    </div>\n  );\n};\n\nexport default MaxCharacters;\n"],"mappings":";;;;;AAqBA,IAAMA,iBAA+C,EAAE,eAAe,SAAS,QAAQ,SAAS,eAAe;CAC7G,MAAM,WAAW,SAAS;CAE1B,MAAM,mBAAmB,GAAW,OAAO,mBAAmB;GAC3D,OAAO,6BAA6B,YAAY,YAAY;GAC5D,OAAO,6BAA6B,WAAW;EACjD,CAAC;CAEF,MAAM,YAAY,WAAW,MAAO,WAAW;AAE/C,QACE,oBAAC,OAAA;EAAI,aAAW;EAAW,eAAa;EAAQ,WAAW;EAAkB,OAAO,EAAE,UAAU;YAC7F,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,UAAU;GAC/C;;AAIV,IAAA,wBAAe"}

package/NotificationBadge.js

@@ -1,68 +1,53 @@
+import { t as palette } from "./palette.js";
+import { t as Icon_default } from "./Icon.js";
+import { t as CheckFill_default } from "./CheckFill.js";
+import { t as ErrorSignFill_default } from "./ErrorSignFill.js";
+import { t as InfoSignFill_default } from "./InfoSignFill.js";
+import { t as TriangleX_default } from "./TriangleX.js";
+import React from "react";
 import { jsx } from "react/jsx-runtime";
-import { palette } from "./theme/palette.js";
-import { I as Icon } from "./Icon.js";
-import CheckFill from "./components/Icons/CheckFill.js";
-import ErrorSignFill from "./components/Icons/ErrorSignFill.js";
-import InfoSignFill from "./components/Icons/InfoSignFill.js";
-import TriangleX from "./components/Icons/TriangleX.js";
-const NotificationBadge = (props) => {
-  const { variant, size, className = "", testId, isHovered = false } = props;
-  switch (variant) {
-    case "info":
-      return /* @__PURE__ */ jsx(
-        Icon,
-        {
-          svgIcon: InfoSignFill,
-          color: palette.blueberry700,
-          hoverColor: palette.blueberry700,
-          size,
-          className,
-          testId,
-          isHovered
-        }
-      );
-    case "warn":
-      return /* @__PURE__ */ jsx(
-        Icon,
-        {
-          svgIcon: ErrorSignFill,
-          color: palette.banana800,
-          hoverColor: palette.banana700,
-          size,
-          className,
-          testId,
-          isHovered
-        }
-      );
-    case "error":
-      return /* @__PURE__ */ jsx(
-        Icon,
-        {
-          svgIcon: TriangleX,
-          color: palette.cherry700,
-          hoverColor: palette.cherry700,
-          size,
-          className,
-          testId,
-          isHovered
-        }
-      );
-    case "success":
-      return /* @__PURE__ */ jsx(
-        Icon,
-        {
-          svgIcon: CheckFill,
-          color: palette.kiwi900,
-          hoverColor: palette.kiwi900,
-          size,
-          className,
-          testId,
-          isHovered
-        }
-      );
-  }
+var NotificationBadge = (props) => {
+	const { variant, size, className = "", testId, isHovered = false } = props;
+	switch (variant) {
+		case "info": return /* @__PURE__ */ jsx(Icon_default, {
+			svgIcon: InfoSignFill_default,
+			color: palette.blueberry700,
+			hoverColor: palette.blueberry700,
+			size,
+			className,
+			testId,
+			isHovered
+		});
+		case "warn": return /* @__PURE__ */ jsx(Icon_default, {
+			svgIcon: ErrorSignFill_default,
+			color: palette.banana800,
+			hoverColor: palette.banana700,
+			size,
+			className,
+			testId,
+			isHovered
+		});
+		case "error": return /* @__PURE__ */ jsx(Icon_default, {
+			svgIcon: TriangleX_default,
+			color: palette.cherry700,
+			hoverColor: palette.cherry700,
+			size,
+			className,
+			testId,
+			isHovered
+		});
+		case "success": return /* @__PURE__ */ jsx(Icon_default, {
+			svgIcon: CheckFill_default,
+			color: palette.kiwi900,
+			hoverColor: palette.kiwi900,
+			size,
+			className,
+			testId,
+			isHovered
+		});
+	}
 };
-export {
-  NotificationBadge as N
-};
-//# sourceMappingURL=NotificationBadge.js.map
+var NotificationBadge_default = NotificationBadge;
+export { NotificationBadge_default as t };
+
+//# sourceMappingURL=NotificationBadge.js.map

package/NotificationBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationBadge.js","sources":["../src/components/Badge/NotificationBadge.tsx"],"sourcesContent":["import React from 'react';\n\nimport { IconSize } from '../../constants';\nimport { palette } from '../../theme/palette';\nimport Icon from '../Icon';\nimport CheckFill from '../Icons/CheckFill';\nimport ErrorSignFill from '../Icons/ErrorSignFill';\nimport InfoSignFill from '../Icons/InfoSignFill';\nimport TriangleX from '../Icons/TriangleX';\n\nexport type BadgeNotificationVariant = 'info' | 'warn' | 'error' | 'success';\n\nexport interface NotificationBadgeProps {\n  /** Changes the type of the badge */\n  variant: BadgeNotificationVariant;\n  /** Sets the size of the badge */\n  size: IconSize;\n  /** Adds custom classes to the element */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets hover state */\n  isHovered?: boolean;\n}\n\nconst NotificationBadge = (props: NotificationBadgeProps): React.JSX.Element => {\n  const { variant, size, className = '', testId, isHovered = false } = props;\n  switch (variant) {\n    case 'info':\n      return (\n        <Icon\n          svgIcon={InfoSignFill}\n          color={palette.blueberry700}\n          hoverColor={palette.blueberry700}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n    case 'warn':\n      return (\n        <Icon\n          svgIcon={ErrorSignFill}\n          color={palette.banana800}\n          hoverColor={palette.banana700}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n    case 'error':\n      return (\n        <Icon\n          svgIcon={TriangleX}\n          color={palette.cherry700}\n          hoverColor={palette.cherry700}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n    case 'success':\n      return (\n        <Icon\n          svgIcon={CheckFill}\n          color={palette.kiwi900}\n          hoverColor={palette.kiwi900}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n  }\n};\n\nexport default NotificationBadge;\n"],"names":[],"mappings":";;;;;;;AAyBA,MAAM,oBAAoB,CAAC,UAAqD;AAC9E,QAAM,EAAE,SAAS,MAAM,YAAY,IAAI,QAAQ,YAAY,UAAU;AACrE,UAAQ,SAAA;AAAA,IACN,KAAK;AACH,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,OAAO,QAAQ;AAAA,UACf,YAAY,QAAQ;AAAA,UACpB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN,KAAK;AACH,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,OAAO,QAAQ;AAAA,UACf,YAAY,QAAQ;AAAA,UACpB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN,KAAK;AACH,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,OAAO,QAAQ;AAAA,UACf,YAAY,QAAQ;AAAA,UACpB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN,KAAK;AACH,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,OAAO,QAAQ;AAAA,UACf,YAAY,QAAQ;AAAA,UACpB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MAAA;AAAA,EACF;AAGR;"}
+{"version":3,"file":"NotificationBadge.js","names":[],"sources":["../src/components/Badge/NotificationBadge.tsx"],"sourcesContent":["import React from 'react';\n\nimport { IconSize } from '../../constants';\nimport { palette } from '../../theme/palette';\nimport Icon from '../Icon';\nimport CheckFill from '../Icons/CheckFill';\nimport ErrorSignFill from '../Icons/ErrorSignFill';\nimport InfoSignFill from '../Icons/InfoSignFill';\nimport TriangleX from '../Icons/TriangleX';\n\nexport type BadgeNotificationVariant = 'info' | 'warn' | 'error' | 'success';\n\nexport interface NotificationBadgeProps {\n  /** Changes the type of the badge */\n  variant: BadgeNotificationVariant;\n  /** Sets the size of the badge */\n  size: IconSize;\n  /** Adds custom classes to the element */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets hover state */\n  isHovered?: boolean;\n}\n\nconst NotificationBadge = (props: NotificationBadgeProps): React.JSX.Element => {\n  const { variant, size, className = '', testId, isHovered = false } = props;\n  switch (variant) {\n    case 'info':\n      return (\n        <Icon\n          svgIcon={InfoSignFill}\n          color={palette.blueberry700}\n          hoverColor={palette.blueberry700}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n    case 'warn':\n      return (\n        <Icon\n          svgIcon={ErrorSignFill}\n          color={palette.banana800}\n          hoverColor={palette.banana700}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n    case 'error':\n      return (\n        <Icon\n          svgIcon={TriangleX}\n          color={palette.cherry700}\n          hoverColor={palette.cherry700}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n    case 'success':\n      return (\n        <Icon\n          svgIcon={CheckFill}\n          color={palette.kiwi900}\n          hoverColor={palette.kiwi900}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n  }\n};\n\nexport default NotificationBadge;\n"],"mappings":";;;;;;;;AAyBA,IAAM,qBAAqB,UAAqD;CAC9E,MAAM,EAAE,SAAS,MAAM,YAAY,IAAI,QAAQ,YAAY,UAAU;AACrE,SAAQ,SAAR;EACE,KAAK,OACH,QACE,oBAAC,cAAA;GACC,SAAS;GACT,OAAO,QAAQ;GACf,YAAY,QAAQ;GACd;GACK;GACH;GACG;IACX;EAEN,KAAK,OACH,QACE,oBAAC,cAAA;GACC,SAAS;GACT,OAAO,QAAQ;GACf,YAAY,QAAQ;GACd;GACK;GACH;GACG;IACX;EAEN,KAAK,QACH,QACE,oBAAC,cAAA;GACC,SAAS;GACT,OAAO,QAAQ;GACf,YAAY,QAAQ;GACd;GACK;GACH;GACG;IACX;EAEN,KAAK,UACH,QACE,oBAAC,cAAA;GACC,SAAS;GACT,OAAO,QAAQ;GACf,YAAY,QAAQ;GACd;GACK;GACH;GACG;IACX;;;AAKV,IAAA,4BAAe"}