@datarobot/design-system 28.2.2

package/cjs/adaptive-list/adaptive-list.js

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = AdaptiveList;
+var _react = _interopRequireWildcard(require("react"));
+var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
+var _faEllipsisVertical = require("@fortawesome/free-solid-svg-icons/faEllipsisVertical");
+var _dropdownMenu = require("../dropdown-menu");
+var _adaptiveListUtils = require("./adaptive-list-utils");
+var _useTranslation = require("../hooks/use-translation");
+var _fontAwesomeIcon = require("../font-awesome-icon");
+var _hooks = require("../hooks");
+var _adaptiveListConstants = require("./adaptive-list-constants");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/** Adaptive List
+    @midnight-gray-supported
+    @alpine-light-supported
+ */
+function AdaptiveList({
+  options,
+  Component,
+  selected,
+  onSelect = () => {},
+  target = 'offsetWidth',
+  triggerOffset = 44,
+  dropdownMenuProps = {},
+  truncatedView,
+  triggerAriaLabelText,
+  isSubNavItem = false,
+  componentProps = {}
+}) {
+  const {
+    t
+  } = (0, _useTranslation.useTranslation)();
+  const fontSize = (0, _hooks.useFontSizeObserver)();
+  const [parentWidth, setParentWidth] = (0, _react.useState)(Infinity);
+  const elements = (0, _react.useRef)({});
+  const elementsWidth = (0, _react.useRef)({});
+  const container = (0, _react.useRef)(null);
+  const selectedArr = Array.isArray(selected) ? selected : [selected].filter(val => typeof val !== 'undefined');
+  const [state, setState] = (0, _react.useState)(_adaptiveListConstants.DRAW_STATE.CALCULATING);
+  (0, _react.useLayoutEffect)(() => {
+    if (fontSize?.previousSize !== fontSize?.currentSize) {
+      setState(_adaptiveListConstants.DRAW_STATE.CALCULATING);
+    }
+  }, [fontSize]);
+  (0, _react.useLayoutEffect)(() => {
+    setState(_adaptiveListConstants.DRAW_STATE.CALCULATING);
+  }, [options]);
+  (0, _react.useEffect)(() => {
+    const outputWidth = () => {
+      setParentWidth(container?.current?.[target] || 0);
+    };
+    if (container.current) {
+      const observer = new _resizeObserverPolyfill.default(() => window.requestAnimationFrame(outputWidth));
+      observer.observe(container.current);
+      return () => observer.disconnect();
+    }
+  }, []);
+  const {
+    active,
+    inActive
+  } = (0, _react.useMemo)(() => (0, _adaptiveListUtils.sortOptions)({
+    options,
+    maxWidth: parentWidth,
+    selected: selectedArr,
+    optionsWidth: elementsWidth.current,
+    startWidth: triggerOffset,
+    state
+  }), [options, parentWidth, selected, triggerOffset, state]);
+  (0, _react.useLayoutEffect)(() => {
+    if (state === _adaptiveListConstants.DRAW_STATE.CALCULATING) {
+      elementsWidth.current = Object.keys(elements.current).reduce((acc, current) => ({
+        ...acc,
+        [current]: elements.current[current]?.[target] || 0
+      }), {});
+      setState(_adaptiveListConstants.DRAW_STATE.PAINTING);
+    }
+  }, [state]);
+  (0, _react.useLayoutEffect)(() => {
+    setParentWidth(container?.current?.[target] || 0);
+  }, []);
+  const isLimited = !!inActive.length;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ref: container,
+    "test-id": "adaptive-list",
+    className: "adaptive-list-container",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "adaptive-list",
+      role: isSubNavItem ? 'tablist' : undefined,
+      children: active.map(option => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ref: ref => {
+          elements.current[option.key] = ref;
+        },
+        className: "adaptive-list-element",
+        "test-id": "adaptive-list-element",
+        role: isSubNavItem ? 'presentation' : undefined,
+        children: Component({
+          ...option,
+          option,
+          selected,
+          onSelect,
+          isLimited,
+          ...componentProps
+        })
+      }, option.key))
+    }), !!inActive.length && !truncatedView && !Array.isArray(selected) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdownMenu.DropdownMenu, {
+      options: inActive,
+      selectedKey: selected,
+      onSelect: onSelect,
+      triggerTestId: "adaptive-list-trigger",
+      contentTestId: "adaptive-list-dropdown-content",
+      triggerDynamicContent: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
+        icon: _faEllipsisVertical.faEllipsisVertical
+      }),
+      triggerAriaLabelText: triggerAriaLabelText ?? t('Trigger another item'),
+      triggerIsIcon: true,
+      triggerHideChevron: true,
+      ...dropdownMenuProps
+    }), !!inActive.length && truncatedView && truncatedView({
+      options: inActive,
+      selected,
+      onSelect,
+      isLimited,
+      ...componentProps
+    })]
+  });
+}

package/cjs/adaptive-list/index.d.ts

@@ -0,0 +1 @@
+export { default as AdaptiveList } from './adaptive-list';

package/cjs/adaptive-list/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AdaptiveList", {
+  enumerable: true,
+  get: function () {
+    return _adaptiveList.default;
+  }
+});
+var _adaptiveList = _interopRequireDefault(require("./adaptive-list"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/cjs/alert/alert.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode, ReactElement } from 'react';
+import { IconLookup } from '@fortawesome/fontawesome-svg-core';
+import { ValueOf } from '../types';
+import './alert.less';
+export declare const ALERT_TYPES: {
+    readonly SUCCESS: "success";
+    readonly INFO: "info";
+    readonly WARNING: "warning";
+    readonly FAILURE: "failure";
+};
+export type AlertType = ValueOf<typeof ALERT_TYPES>;
+export interface AlertProps {
+    type?: AlertType;
+    header: ReactNode;
+    children?: ReactNode;
+    testId?: string;
+    className?: string;
+    dismissButtonText?: string;
+    actionButtonText?: string;
+    /** Link to docs that give more info on the alert */
+    docsLink?: ReactElement;
+    onDismiss?: () => void | Promise<void>;
+    onTakeAction?: () => void | Promise<void>;
+    footer?: ReactNode;
+    /** the ability to expand/collapse content */
+    collapsedTextContent?: boolean;
+    collapsedContentShowMessageButtonText?: string;
+    collapsedContentHideMessageButtonText?: string;
+    takeActionIcon?: IconLookup;
+    wordBreakHeader?: boolean;
+}
+/** Alert is used to notify users about significant events in the application
+ * [CAPITALIZATION] Use sentence case for title, text, buttons
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ */
+declare function Alert({ className, type, header, children, testId, actionButtonText, dismissButtonText, docsLink, onTakeAction, onDismiss, footer, collapsedTextContent, collapsedContentShowMessageButtonText, collapsedContentHideMessageButtonText, takeActionIcon, wordBreakHeader, }: AlertProps): import("react/jsx-runtime").JSX.Element;
+export default Alert;

package/cjs/alert/alert.js

@@ -0,0 +1,135 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ALERT_TYPES = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _faCircleCheck = require("@fortawesome/free-solid-svg-icons/faCircleCheck");
+var _faCircleInfo = require("@fortawesome/free-solid-svg-icons/faCircleInfo");
+var _faCircleXmark = require("@fortawesome/pro-solid-svg-icons/faCircleXmark");
+var _faCircleExclamation = require("@fortawesome/free-solid-svg-icons/faCircleExclamation");
+var _faBolt = require("@fortawesome/free-solid-svg-icons/faBolt");
+var _faEye = require("@fortawesome/free-solid-svg-icons/faEye");
+var _faEyeSlash = require("@fortawesome/free-solid-svg-icons/faEyeSlash");
+var _faXmark = require("@fortawesome/free-solid-svg-icons/faXmark");
+var _fontAwesomeIcon = require("../font-awesome-icon");
+var _button = require("../button");
+var _useTranslation = require("../hooks/use-translation");
+var _truncateWithTooltip = require("../truncate-with-tooltip");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const ALERT_TYPES = exports.ALERT_TYPES = {
+  SUCCESS: 'success',
+  INFO: 'info',
+  WARNING: 'warning',
+  FAILURE: 'failure'
+};
+/** Alert is used to notify users about significant events in the application
+ * [CAPITALIZATION] Use sentence case for title, text, buttons
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ */
+
+function Alert({
+  className,
+  type = ALERT_TYPES.INFO,
+  header,
+  children = '',
+  testId,
+  actionButtonText,
+  dismissButtonText,
+  docsLink,
+  onTakeAction,
+  onDismiss,
+  footer,
+  collapsedTextContent = false,
+  collapsedContentShowMessageButtonText,
+  collapsedContentHideMessageButtonText,
+  takeActionIcon = _faBolt.faBolt,
+  wordBreakHeader = false
+}) {
+  const {
+    t
+  } = (0, _useTranslation.useTranslation)();
+  const alertIcon = {
+    [ALERT_TYPES.SUCCESS]: _faCircleCheck.faCircleCheck,
+    [ALERT_TYPES.INFO]: _faCircleInfo.faCircleInfo,
+    [ALERT_TYPES.WARNING]: _faCircleExclamation.faCircleExclamation,
+    [ALERT_TYPES.FAILURE]: _faCircleXmark.faCircleXmark
+  };
+  const [showMessage, setShowMessage] = (0, _react.useState)(!collapsedTextContent);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    "test-id": testId,
+    className: (0, _classnames.default)('alert', type, className, collapsedTextContent && 'collapsed'),
+    role: "alert",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
+      icon: alertIcon[type],
+      className: "alert-icon"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("section", {
+      className: "alert-section",
+      "test-id": "alert-section",
+      children: !showMessage ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "show-more-header",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "alert-header",
+          children: wordBreakHeader ? /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            className: "break-word",
+            children: header
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_truncateWithTooltip.TruncateWithTooltip, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+              children: header
+            })
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+          testId: "show-message",
+          accentType: _button.ACCENT_TYPES.COMMAND,
+          onClick: () => setShowMessage(true),
+          leftIcon: _faEye.faEye,
+          children: collapsedContentShowMessageButtonText ?? t('Show message')
+        })]
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "alert-header",
+          children: wordBreakHeader ? /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            className: "break-word",
+            children: header
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_truncateWithTooltip.TruncateWithTooltip, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+              children: header
+            })
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "alert-body",
+          children: children
+        }), footer || /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "alert-footer",
+          children: [onTakeAction && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+            testId: "take-action",
+            accentType: _button.ACCENT_TYPES.COMMAND,
+            onClick: onTakeAction,
+            leftIcon: takeActionIcon,
+            children: actionButtonText
+          }), docsLink && /*#__PURE__*/(0, _react.cloneElement)(docsLink, {
+            className: 'alert-docs-link'
+          }), onDismiss && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+            testId: "dismiss",
+            accentType: _button.ACCENT_TYPES.COMMAND,
+            onClick: onDismiss,
+            leftIcon: _faXmark.faXmark,
+            children: dismissButtonText ?? t('Dismiss')
+          }), collapsedTextContent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+            testId: "hide-message",
+            accentType: _button.ACCENT_TYPES.COMMAND,
+            onClick: () => setShowMessage(false),
+            leftIcon: _faEyeSlash.faEyeSlash,
+            children: collapsedContentHideMessageButtonText || t('Hide message')
+          })]
+        })]
+      })
+    })]
+  });
+}
+var _default = exports.default = Alert;

package/cjs/alert/index.d.ts

@@ -0,0 +1,3 @@
+import Alert, { ALERT_TYPES, AlertProps, AlertType } from './alert';
+export type { AlertProps, AlertType };
+export { Alert, ALERT_TYPES };

package/cjs/alert/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ALERT_TYPES", {
+  enumerable: true,
+  get: function () {
+    return _alert.ALERT_TYPES;
+  }
+});
+Object.defineProperty(exports, "Alert", {
+  enumerable: true,
+  get: function () {
+    return _alert.default;
+  }
+});
+var _alert = _interopRequireWildcard(require("./alert"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }

package/cjs/avatar/avatar.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import './avatar.less';
+export type AvatarProps = {
+    children?: ReactNode;
+    callerName?: string | null;
+    className?: string;
+    isTooltipHidden?: boolean;
+    tooltipText?: string;
+    testId?: string;
+    imageSrc?: string;
+    imageAlt?: string;
+};
+/** Renders the placeholder for users avatar.
+ * @uxr-only-supported
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ */
+export declare const Avatar: ({ children, callerName, className, imageSrc, imageAlt, isTooltipHidden, tooltipText, testId, }: AvatarProps) => import("react/jsx-runtime").JSX.Element;

package/cjs/avatar/avatar.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Avatar = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _tooltip = require("../tooltip");
+var _useTranslation = require("../hooks/use-translation");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const getInitials = callerName => {
+  const names = callerName.split(' ');
+  let initials = names[0].substring(0, 1);
+  if (names.length > 1) {
+    initials += names[names.length - 1].substring(0, 1);
+  }
+  return initials;
+};
+/** Renders the placeholder for users avatar.
+ * @uxr-only-supported
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ */
+const Avatar = ({
+  children,
+  callerName,
+  className = '',
+  imageSrc = '',
+  imageAlt,
+  isTooltipHidden = false,
+  tooltipText = '',
+  testId = 'avatar'
+}) => {
+  const {
+    t
+  } = (0, _useTranslation.useTranslation)();
+  const avatarAlt = imageAlt ?? t('avatar image');
+  const initials = callerName ? getInitials(callerName) : null;
+  const tooltipContent = tooltipText || callerName;
+
+  // With Image
+  if (imageSrc) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("figure", {
+      className: "avatar",
+      children: [!isTooltipHidden && /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
+        content: tooltipContent,
+        placement: _tooltip.TOOLTIP_PLACEMENT_TYPES.TOP,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          className: (0, _classnames.default)('avatar-container', className),
+          "test-id": testId,
+          src: imageSrc,
+          alt: avatarAlt
+        })
+      }), isTooltipHidden && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        className: (0, _classnames.default)('avatar-container', className),
+        "test-id": testId,
+        src: imageSrc,
+        alt: avatarAlt
+      }), children && /*#__PURE__*/(0, _jsxRuntime.jsx)("figcaption", {
+        className: "avatar-name",
+        "test-id": "avatar-name",
+        children: children
+      })]
+    });
+  }
+
+  // With Initials
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("figure", {
+    className: "avatar",
+    children: [callerName && !isTooltipHidden && /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
+      content: tooltipContent,
+      placement: _tooltip.TOOLTIP_PLACEMENT_TYPES.TOP,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames.default)('avatar-container', className),
+        "test-id": testId,
+        children: initials
+      })
+    }), callerName && isTooltipHidden && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)('avatar-container uppercased', className),
+      "test-id": testId,
+      children: initials
+    }), children && /*#__PURE__*/(0, _jsxRuntime.jsx)("figcaption", {
+      className: "avatar-name",
+      "test-id": "avatar-name",
+      children: children
+    })]
+  });
+};
+exports.Avatar = Avatar;

package/cjs/avatar/index.d.ts

@@ -0,0 +1 @@
+export { Avatar } from './avatar';

package/cjs/avatar/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Avatar", {
+  enumerable: true,
+  get: function () {
+    return _avatar.Avatar;
+  }
+});
+var _avatar = require("./avatar");

package/cjs/badge/badge.d.ts

@@ -0,0 +1,55 @@
+import React, { MouseEvent } from 'react';
+import { IconLookup } from '@fortawesome/fontawesome-svg-core';
+import './badge.less';
+export type BadgeProps = {
+    children?: React.ReactNode /** Children accepts a react node to be rendered inside of the badge */;
+    /** similar to children, it accepts a string to be rendered inside of the badge */
+    label?: string;
+    /** Badge Type */
+    error?: boolean;
+    /** Badge Type */
+    success?: boolean;
+    /** Badge Type */
+    info?: boolean;
+    outlined?: boolean;
+    icon?: IconLookup | null;
+    /** Badge Type */
+    warning?: boolean;
+    /** Badge Type */
+    plain?: boolean;
+    dark?: boolean;
+    /** Badge Type, Contextual */
+    pink?: boolean;
+    /** Badge Type, Contextual */
+    turquoise?: boolean;
+    /** Badge Type, Contextual */
+    purple?: boolean;
+    /** Badge Type, Contextual */
+    blue?: boolean;
+    /** Badge Type, Contextual */
+    orange?: boolean;
+    /** Badge Type, Contextual */
+    apple?: boolean;
+    /** custom class name that will be added to the list of badge classes */
+    badgeClassNames?: string;
+    testId?: string;
+    tooltipText?: string;
+    onClick?: (event?: MouseEvent<HTMLButtonElement | HTMLSpanElement>) => void;
+    onClose?: () => void;
+    /** Show spinner, Badge is not clickable in this state */
+    isLoading?: boolean;
+    /** Disabled state, Badge is not clickable in this state */
+    isDisabled?: boolean;
+    /** Custom aria-label for close button, only exists with onClose */
+    removeButtonAriaLabel?: string;
+    /** Custom test id for badge container, only exists with onClose */
+    badgeContainerTestId?: string;
+    /** aria-label for the main tag */
+    ariaLabel?: string;
+};
+/** Badges should label and highlight page content
+ * [CAPITALIZATION] Use uppercase
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ */
+export declare function Badge({ children, onClick, onClose, label, badgeClassNames, tooltipText, icon, outlined, error, success, info, warning, plain, dark, pink, turquoise, purple, blue, orange, apple, isLoading, isDisabled, testId, badgeContainerTestId, removeButtonAriaLabel, ariaLabel, }: BadgeProps): React.ReactElement;

package/cjs/badge/badge.js

@@ -0,0 +1,130 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Badge = Badge;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _faXmark = require("@fortawesome/free-solid-svg-icons/faXmark");
+var _faCircleNotch = require("@fortawesome/free-solid-svg-icons/faCircleNotch");
+var _fontAwesomeIcon = require("../font-awesome-icon");
+var _useTranslation = require("../hooks/use-translation");
+var _button = require("../button");
+var _tooltip = require("../tooltip");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/** Badges should label and highlight page content
+ * [CAPITALIZATION] Use uppercase
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ */
+function Badge({
+  children,
+  onClick,
+  onClose,
+  label = '',
+  badgeClassNames = '',
+  tooltipText = '',
+  icon = null,
+  outlined = false,
+  error = false,
+  success = false,
+  info = false,
+  warning = false,
+  plain = false,
+  dark = false,
+  /* data viz */
+  pink = false,
+  turquoise = false,
+  purple = false,
+  blue = false,
+  orange = false,
+  apple = false,
+  /* data viz end */
+  isLoading = false,
+  isDisabled = false,
+  testId = 'badge-button',
+  badgeContainerTestId = 'badge-container',
+  removeButtonAriaLabel,
+  ariaLabel
+}) {
+  const {
+    t
+  } = (0, _useTranslation.useTranslation)();
+  const isClickableType = !isDisabled && !isLoading;
+  const shouldUseButtonTag = isClickableType && typeof onClick === 'function';
+  const TagName = shouldUseButtonTag ? 'button' : 'span';
+  const isRemovable = typeof onClose === 'function' && !isDisabled && !isLoading;
+  const colors = {
+    error,
+    success,
+    warning,
+    info,
+    plain,
+    dark,
+    /* data viz */
+    pink,
+    turquoise,
+    purple,
+    blue,
+    orange,
+    apple
+    /* data viz end */
+  };
+  const tagNameProps = {
+    className: (0, _classnames.default)('highlighted-badge', colors, {
+      outlined,
+      disabled: isDisabled,
+      loading: isLoading,
+      clickable: shouldUseButtonTag,
+      'has-remove-button': isRemovable
+    }, badgeClassNames),
+    'test-id': testId,
+    onClick: typeof onClick === 'function' && isClickableType ? event => {
+      event.stopPropagation();
+      onClick(event);
+    } : undefined
+  };
+  const removeButton = isRemovable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+    onClick: onClose,
+    size: _button.BUTTON_SIZES.XS,
+    "aria-label": removeButtonAriaLabel ?? t('Remove badge button'),
+    testId: "badge-close-icon",
+    className: "remove-button",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
+      icon: _faXmark.faXmark
+    })
+  });
+  const badgeContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(TagName, {
+    ...tagNameProps,
+    "aria-label": shouldUseButtonTag ? ariaLabel || label : undefined,
+    children: [icon && !isLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
+      icon: icon,
+      className: "badge-icon"
+    }), isLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
+      icon: _faCircleNotch.faCircleNotch,
+      spin: true,
+      className: "badge-icon",
+      "test-id": `${testId}-spinner`
+    }), children || label]
+  });
+  const renderBadgeComponent = renderChildren => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
+      content: tooltipText,
+      placement: _tooltip.TOOLTIP_PLACEMENT_TYPES.TOP,
+      children: renderChildren
+    });
+  };
+  if (isRemovable) {
+    return renderBadgeComponent(/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames.default)('badge-container', colors, {
+        outlined,
+        clickable: shouldUseButtonTag
+      }),
+      "test-id": badgeContainerTestId,
+      children: [badgeContent, removeButton]
+    }));
+  }
+  return renderBadgeComponent(badgeContent);
+}

package/cjs/badge/index.d.ts

@@ -0,0 +1,2 @@
+export type { BadgeProps } from './badge';
+export { Badge } from './badge';

package/cjs/badge/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Badge", {
+  enumerable: true,
+  get: function () {
+    return _badge.Badge;
+  }
+});
+var _badge = require("./badge");