@kaizen/components 3.3.1 → 3.3.3

package/dist/esm/src/Slider/Slider.mjs

@@ -1,5 +1,5 @@
 import { __rest, __assign } from 'tslib';
-import React, { useId } from 'react';
+import React__default, { useId } from 'react';
 import classnames from 'classnames';
 import { FieldGroup } from '../FieldGroup/FieldGroup.mjs';
 import { InputRange } from '../Input/InputRange/InputRange.mjs';
@@ -11,49 +11,46 @@ import modules_321294e1 from './Slider.module.css.mjs';
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896335/Slider Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-slider--docs Storybook}
  */
-const Slider = /*#__PURE__*/function () {
-  const Slider = function (_a) {
-    var propsId = _a.id,
-      labelText = _a.labelText,
-      description = _a.description,
-      _b = _a.labelPosition,
-      labelPosition = _b === void 0 ? 'inline' : _b,
-      _c = _a.variant,
-      variant = _c === void 0 ? 'default' : _c,
-      disabled = _a.disabled,
-      readOnlyMessage = _a.readOnlyMessage,
-      restProps = __rest(_a, ["id", "labelText", "description", "labelPosition", "variant", "disabled", "readOnlyMessage"]);
-    var fallbackId = useId();
-    var id = propsId !== null && propsId !== void 0 ? propsId : fallbackId;
-    var descriptionId = "".concat(id, "-description");
-    return /*#__PURE__*/React.createElement(FieldGroup, {
-      inline: true
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classnames(modules_321294e1.wrapper, labelPosition === 'inline' && modules_321294e1.labelInline)
-    }, /*#__PURE__*/React.createElement("div", {
-      className: modules_321294e1.labelWrapper
-    }, /*#__PURE__*/React.createElement("div", {
-      className: modules_321294e1.label
-    }, /*#__PURE__*/React.createElement(Label, {
-      htmlFor: id,
-      labelText: labelText,
-      variant: variant,
-      disabled: disabled
-    })), description && (/*#__PURE__*/React.createElement(Text, {
-      variant: "small",
-      id: descriptionId,
-      classNameOverride: disabled ? modules_321294e1.descriptionDisabled : undefined
-    }, description))), /*#__PURE__*/React.createElement("div", {
-      className: modules_321294e1.inputWrapper
-    }, /*#__PURE__*/React.createElement(InputRange, __assign({
-      id: id,
-      "aria-describedby": descriptionId,
-      disabled: disabled
-    }, restProps)), readOnlyMessage && /*#__PURE__*/React.createElement("div", {
-      className: modules_321294e1.readOnlyMessage
-    }, readOnlyMessage))));
-  };
-  Slider.displayName = 'Slider';
-  return Slider;
-}();
+var Slider = function (_a) {
+  var propsId = _a.id,
+    labelText = _a.labelText,
+    description = _a.description,
+    _b = _a.labelPosition,
+    labelPosition = _b === void 0 ? 'inline' : _b,
+    _c = _a.variant,
+    variant = _c === void 0 ? 'default' : _c,
+    disabled = _a.disabled,
+    readOnlyMessage = _a.readOnlyMessage,
+    restProps = __rest(_a, ["id", "labelText", "description", "labelPosition", "variant", "disabled", "readOnlyMessage"]);
+  var fallbackId = useId();
+  var id = propsId !== null && propsId !== void 0 ? propsId : fallbackId;
+  var descriptionId = "".concat(id, "-description");
+  return /*#__PURE__*/React__default.createElement(FieldGroup, {
+    inline: true
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: classnames(modules_321294e1.wrapper, labelPosition === 'inline' && modules_321294e1.labelInline)
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: modules_321294e1.labelWrapper
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: modules_321294e1.label
+  }, /*#__PURE__*/React__default.createElement(Label, {
+    htmlFor: id,
+    labelText: labelText,
+    variant: variant,
+    disabled: disabled
+  })), description && (/*#__PURE__*/React__default.createElement(Text, {
+    variant: "small",
+    id: descriptionId,
+    classNameOverride: disabled ? modules_321294e1.descriptionDisabled : undefined
+  }, description))), /*#__PURE__*/React__default.createElement("div", {
+    className: modules_321294e1.inputWrapper
+  }, /*#__PURE__*/React__default.createElement(InputRange, __assign({
+    id: id,
+    "aria-describedby": descriptionId,
+    disabled: disabled
+  }, restProps)), readOnlyMessage && /*#__PURE__*/React__default.createElement("div", {
+    className: modules_321294e1.readOnlyMessage
+  }, readOnlyMessage))));
+};
+Slider.displayName = 'Slider';
 export { Slider };

package/dist/esm/src/Table/Table.mjs

@@ -1,5 +1,5 @@
 import { __rest, __assign } from 'tslib';
-import React, { cloneElement } from 'react';
+import React__default, { cloneElement } from 'react';
 import classnames from 'classnames';
 import { Checkbox } from '../Checkbox/Checkbox/Checkbox.mjs';
 import '../Checkbox/CheckboxField/CheckboxField.mjs';
@@ -18,7 +18,7 @@ var TableContainer = function (_a) {
     variant = _b === void 0 ? 'compact' : _b,
     children = _a.children,
     otherProps = __rest(_a, ["variant", "children"]);
-  return /*#__PURE__*/React.createElement("div", __assign({
+  return /*#__PURE__*/React__default.createElement("div", __assign({
     role: "table",
     className: classnames(modules_ef9ad514.container, variant === 'default' && modules_ef9ad514.defaultSpacing, variant === 'data' && modules_ef9ad514.dataVariant)
   }, otherProps), children);
@@ -26,7 +26,7 @@ var TableContainer = function (_a) {
 var TableHeader = function (_a) {
   var children = _a.children,
     otherProps = __rest(_a, ["children"]);
-  return /*#__PURE__*/React.createElement("div", __assign({
+  return /*#__PURE__*/React__default.createElement("div", __assign({
     role: "rowgroup"
   }, otherProps), children);
 };
@@ -73,7 +73,7 @@ var TableHeaderRowCell = function (_a) {
     // have this spread.
     otherProps = __rest(_a, ["labelText", "onClick", "href", "width", "flex", "icon", "checkable", "checkedStatus", "checkboxLabel", "onCheck", "reversed", "sorting", "wrapping", "align", "tooltipInfo", "isTooltipIconHidden", "tooltipPortalSelector", "sortingArrowsOnHover", "classNameOverride"]);
   var sorting = sortingRaw;
-  var _f = React.useState(false),
+  var _f = React__default.useState(false),
     isHovered = _f[0],
     setIsHovered = _f[1];
   var updateHoverState = function (hoverState) {
@@ -83,39 +83,39 @@ var TableHeaderRowCell = function (_a) {
   var hoveredHeaderColor = reversed ? 'white' : 'dark';
   // For this "cellContents" variable, we start at the inner most child, and
   // wrap it elements, depending on what the props dictate.
-  var cellContents = /*#__PURE__*/React.createElement("div", {
+  var cellContents = /*#__PURE__*/React__default.createElement("div", {
     className: modules_ef9ad514.headerRowCellLabelAndIcons
-  }, icon && (/*#__PURE__*/React.createElement("span", {
+  }, icon && (/*#__PURE__*/React__default.createElement("span", {
     className: modules_ef9ad514.headerRowCellIcon
   }, /*#__PURE__*/cloneElement(icon, (_b = {
     title: labelText
-  }, _b['aria-label'] = labelText, _b.role = 'img', _b)))), checkable && (/*#__PURE__*/React.createElement("div", {
+  }, _b['aria-label'] = labelText, _b.role = 'img', _b)))), checkable && (/*#__PURE__*/React__default.createElement("div", {
     className: modules_ef9ad514.headerRowCellCheckbox
-  }, /*#__PURE__*/React.createElement(Checkbox, {
+  }, /*#__PURE__*/React__default.createElement(Checkbox, {
     checkedStatus: checkedStatus,
     onCheck: onCheck,
     "aria-label": checkboxLabel
-  }))), tooltipInfo != null && !isTooltipIconHidden ? (/*#__PURE__*/React.createElement("div", {
+  }))), tooltipInfo != null && !isTooltipIconHidden ? (/*#__PURE__*/React__default.createElement("div", {
     className: modules_ef9ad514.headerRowCellTooltipIcon
-  }, /*#__PURE__*/React.createElement(Icon, {
+  }, /*#__PURE__*/React__default.createElement(Icon, {
     name: "error",
     isPresentational: true,
     isFilled: true
-  }))) : null, !icon ? (/*#__PURE__*/React.createElement(Heading, {
+  }))) : null, !icon ? (/*#__PURE__*/React__default.createElement(Heading, {
     tag: "div",
     variant: "heading-6",
     color: sorting || isHovered ? hoveredHeaderColor : headerColor,
     classNameOverride: modules_ef9ad514.headerRowCellLabel
-  }, labelText)) : null, (sorting !== null && sorting !== void 0 ? sorting : isHovered && sortingArrowsOnHover) && (/*#__PURE__*/React.createElement("div", {
+  }, labelText)) : null, (sorting !== null && sorting !== void 0 ? sorting : isHovered && sortingArrowsOnHover) && (/*#__PURE__*/React__default.createElement("div", {
     className: classnames(align === 'center' && modules_ef9ad514.headerRowCellIconAlignCenter, align === 'end' && modules_ef9ad514.headerRowCellIconAlignEnd, reversed && modules_ef9ad514.whiteText)
-  }, sorting === 'ascending' || sortingArrowsOnHover === 'ascending' ? (/*#__PURE__*/React.createElement(Icon, {
+  }, sorting === 'ascending' || sortingArrowsOnHover === 'ascending' ? (/*#__PURE__*/React__default.createElement(Icon, {
     name: "arrow_drop_up",
     isPresentational: true
-  })) : (/*#__PURE__*/React.createElement(Icon, {
+  })) : (/*#__PURE__*/React__default.createElement(Icon, {
     name: "arrow_drop_down",
     isPresentational: true
   })))));
-  cellContents = href ? (/*#__PURE__*/React.createElement("a", {
+  cellContents = href ? (/*#__PURE__*/React__default.createElement("a", {
     className: classnames(modules_ef9ad514.headerRowCellButton, reversed && modules_ef9ad514.headerRowCellButtonReversed),
     href: href,
     onClick: onClick,
@@ -131,7 +131,7 @@ var TableHeaderRowCell = function (_a) {
     onBlur: function () {
       return updateHoverState(false);
     }
-  }, cellContents)) : onClick ? (/*#__PURE__*/React.createElement("button", {
+  }, cellContents)) : onClick ? (/*#__PURE__*/React__default.createElement("button", {
     type: "button",
     className: classnames(modules_ef9ad514.headerRowCellButton, reversed && modules_ef9ad514.headerRowCellButtonReversed),
     onClick: onClick,
@@ -152,10 +152,10 @@ var TableHeaderRowCell = function (_a) {
   // This div wrapper probably isn't needed, but it's a bit easier
   // for this flex positioning, to have the dom tree depth match for
   // each permutation.
-  React.createElement("div", {
+  React__default.createElement("div", {
     className: modules_ef9ad514.headerRowCellNoButton
   }, cellContents));
-  cellContents = tooltipInfo != null ? (/*#__PURE__*/React.createElement(Tooltip, {
+  cellContents = tooltipInfo != null ? (/*#__PURE__*/React__default.createElement(Tooltip, {
     animationDuration: 0,
     classNameOverride: modules_ef9ad514.headerRowCellTooltip,
     text: tooltipInfo,
@@ -164,10 +164,10 @@ var TableHeaderRowCell = function (_a) {
   /*#__PURE__*/
   // Again, this wrapper is just to make the dom tree consistent between
   // different permutations.
-  React.createElement("div", {
+  React__default.createElement("div", {
     className: modules_ef9ad514.headerRowCellTooltip
   }, cellContents));
-  return /*#__PURE__*/React.createElement("div", __assign({
+  return /*#__PURE__*/React__default.createElement("div", __assign({
     className: classnames(modules_ef9ad514.headerRowCell, wrapping === 'nowrap' && modules_ef9ad514.headerRowCellNoWrap, align === 'center' && modules_ef9ad514.headerRowCellAlignCenter, align === 'end' && modules_ef9ad514.headerRowCellAlignEnd, sorting && modules_ef9ad514.headerRowCellActive, classNameOverride),
     style: {
       width: ratioToPercent(width),
@@ -188,15 +188,15 @@ var TableCard = function (_a) {
     classNameOverride = _a.classNameOverride,
     otherProps = __rest(_a, ["children", "expanded", "expandedStyle", "onClick", "href", "forceHoverState", "classNameOverride"]);
   var className = classnames(modules_ef9ad514.card, expanded && modules_ef9ad514.expanded, expanded && modules_ef9ad514[expandedStyle], (forceHoverState || onClick != null || href != null) && modules_ef9ad514.hasHoverState, classNameOverride);
-  return href != null ? (/*#__PURE__*/React.createElement("a", __assign({
+  return href != null ? (/*#__PURE__*/React__default.createElement("a", __assign({
     href: href,
     className: className,
     onClick: onClick
-  }, otherProps), children)) : onClick ? (/*#__PURE__*/React.createElement("button", __assign({
+  }, otherProps), children)) : onClick ? (/*#__PURE__*/React__default.createElement("button", __assign({
     type: "button",
     className: className,
     onClick: onClick
-  }, otherProps), children)) : (/*#__PURE__*/React.createElement("div", __assign({
+  }, otherProps), children)) : (/*#__PURE__*/React__default.createElement("div", __assign({
     className: className
   }, otherProps), children));
 };
@@ -204,7 +204,7 @@ var TableRow = function (_a) {
   var children = _a.children,
     classNameOverride = _a.classNameOverride,
     otherProps = __rest(_a, ["children", "classNameOverride"]);
-  return /*#__PURE__*/React.createElement("div", __assign({
+  return /*#__PURE__*/React__default.createElement("div", __assign({
     className: classnames(modules_ef9ad514.row, classNameOverride),
     role: "row"
   }, otherProps), children);
@@ -216,7 +216,7 @@ var TableRowCell = function (_a) {
     href = _a.href,
     classNameOverride = _a.classNameOverride,
     otherProps = __rest(_a, ["children", "width", "flex", "href", "classNameOverride"]);
-  return href != null ? (/*#__PURE__*/React.createElement("a", __assign({
+  return href != null ? (/*#__PURE__*/React__default.createElement("a", __assign({
     // eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
     role: "cell",
     style: {
@@ -225,7 +225,7 @@ var TableRowCell = function (_a) {
     },
     className: classnames(modules_ef9ad514.rowCell, classNameOverride),
     href: href
-  }, otherProps), children)) : (/*#__PURE__*/React.createElement("div", __assign({
+  }, otherProps), children)) : (/*#__PURE__*/React__default.createElement("div", __assign({
     role: "cell",
     style: {
       width: ratioToPercent(width),

package/dist/esm/src/Tabs/Tabs.mjs

@@ -1,5 +1,5 @@
 import { __assign } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 import { Tabs as Tabs$1 } from 'react-aria-components';
 
 /**
@@ -10,6 +10,6 @@ import { Tabs as Tabs$1 } from 'react-aria-components';
  * Holds a TabList and TabPanels
  */
 var Tabs = function (props) {
-  return /*#__PURE__*/React.createElement(Tabs$1, __assign({}, props));
+  return /*#__PURE__*/React__default.createElement(Tabs$1, __assign({}, props));
 };
 export { Tabs };

package/dist/esm/src/Tabs/subcomponents/Tab/Tab.mjs

@@ -1,5 +1,5 @@
 import { __rest, __assign } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 import classnames from 'classnames';
 import { Tab as Tab$1 } from 'react-aria-components';
 import { Badge } from '../../../Badge/Badge.mjs';
@@ -16,12 +16,12 @@ var Tab = function (props) {
   var tabProps = __assign({
     className: classnames(modules_2904f848.tab, className)
   }, restProps);
-  return /*#__PURE__*/React.createElement(Tab$1, __assign({
+  return /*#__PURE__*/React__default.createElement(Tab$1, __assign({
     "data-kz-tab": true
   }, tabProps), function (TabRenderProps) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, typeof children === 'function' ? children(TabRenderProps) : children, badge && (/*#__PURE__*/React.createElement("span", {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, typeof children === 'function' ? children(TabRenderProps) : children, badge && (/*#__PURE__*/React__default.createElement("span", {
       className: modules_2904f848.badge
-    }, /*#__PURE__*/React.createElement(Badge, {
+    }, /*#__PURE__*/React__default.createElement(Badge, {
       variant: TabRenderProps.isSelected || TabRenderProps.isFocusVisible || TabRenderProps.isHovered ? 'active' : 'default'
     }, badge))));
   });

package/dist/esm/src/Tabs/subcomponents/TabList/TabList.mjs

@@ -1,5 +1,5 @@
 import { __rest, __assign } from 'tslib';
-import React, { useState, useRef, useId, useContext, useEffect } from 'react';
+import React__default, { useState, useRef, useId, useContext, useEffect } from 'react';
 import classnames from 'classnames';
 import { TabListStateContext, TabList as TabList$1 } from 'react-aria-components';
 import { Icon } from '../../../Icon/Icon.mjs';
@@ -106,7 +106,7 @@ var TabList = function (props) {
       tabListRef.current.scrollLeft = newSpot;
     }
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: modules_b2689e93.container,
     id: tabListId
   }, leftArrowEnabled && (
@@ -115,29 +115,29 @@ var TabList = function (props) {
   // - <button> would add pointless noise for a screen reader user
   // - keyboard only user can toggle through tabs with left/right arrow keys already
   // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-  React.createElement("div", {
+  React__default.createElement("div", {
     onClick: function () {
       return handleArrowPress('left');
     },
     className: modules_b2689e93.leftArrow,
     "data-testid": testId ? "".concat(testId, "-kz-tablist-left-arrow") : undefined
-  }, /*#__PURE__*/React.createElement(Icon, {
+  }, /*#__PURE__*/React__default.createElement(Icon, {
     name: "chevron_left",
     isPresentational: true
-  }))), /*#__PURE__*/React.createElement(TabList$1, __assign({
+  }))), /*#__PURE__*/React__default.createElement(TabList$1, __assign({
     "aria-label": ariaLabel,
     ref: tabListRef,
     className: classnames(modules_b2689e93.tabList, className, noPadding && modules_b2689e93.noPadding)
   }, restProps), children), rightArrowEnabled && (
   /*#__PURE__*/
   // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-  React.createElement("div", {
+  React__default.createElement("div", {
     onClick: function () {
       return handleArrowPress('right');
     },
     className: modules_b2689e93.rightArrow,
     "data-testid": testId ? "".concat(testId, "-kz-tablist-right-arrow") : undefined
-  }, /*#__PURE__*/React.createElement(Icon, {
+  }, /*#__PURE__*/React__default.createElement(Icon, {
     name: "chevron_right",
     isPresentational: true
   }))));

package/dist/esm/src/Tabs/subcomponents/TabPanel/TabPanel.mjs

@@ -1,5 +1,5 @@
 import { __rest, __assign } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 import { TabPanel as TabPanel$1 } from 'react-aria-components';
 
 /**
@@ -9,7 +9,7 @@ var TabPanel = function (props) {
   var className = props.className,
     children = props.children,
     restProps = __rest(props, ["className", "children"]);
-  return /*#__PURE__*/React.createElement(TabPanel$1, __assign({
+  return /*#__PURE__*/React__default.createElement(TabPanel$1, __assign({
     className: className
   }, restProps), children);
 };

package/dist/esm/src/Tag/Tag.mjs

@@ -1,5 +1,5 @@
 import { __assign } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 import classnames from 'classnames';
 import { Avatar } from '../Avatar/Avatar.mjs';
 import { Icon } from '../Icon/Icon.mjs';
@@ -9,7 +9,7 @@ var isJSXElement = function (imageElementOrAvatarProps) {
   return 'props' in imageElementOrAvatarProps;
 };
 var renderAvatar = function (imageElementOrAvatarProps) {
-  return isJSXElement(imageElementOrAvatarProps) ? (/*#__PURE__*/React.createElement(React.Fragment, null, imageElementOrAvatarProps)) : (/*#__PURE__*/React.createElement(Avatar, __assign({}, imageElementOrAvatarProps, {
+  return isJSXElement(imageElementOrAvatarProps) ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, imageElementOrAvatarProps)) : (/*#__PURE__*/React__default.createElement(Avatar, __assign({}, imageElementOrAvatarProps, {
     size: "small"
   })));
 };
@@ -17,88 +17,85 @@ var renderAvatar = function (imageElementOrAvatarProps) {
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081928978/Tags Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-tag--docs Storybook}
  */
-const Tag = /*#__PURE__*/function () {
-  const Tag = function (props) {
-    var children = props.children,
-      _a = props.variant,
-      variant = _a === void 0 ? 'default' : _a,
-      _b = props.size,
-      size = _b === void 0 ? 'medium' : _b,
-      _c = props.inline,
-      inline = _c === void 0 ? false : _c,
-      _d = props.dismissible,
-      dismissible = _d === void 0 ? false : _d,
-      onDismiss = props.onDismiss,
-      onMouseDown = props.onMouseDown,
-      onMouseLeave = props.onMouseLeave,
-      truncateWidth = props.truncateWidth;
-    var isTruncated = truncateWidth && truncateWidth > 0;
-    var canShowIcon = size === 'medium';
-    return /*#__PURE__*/React.createElement("div", {
-      className: classnames(modules_eba0ff4e.root, modules_eba0ff4e[variant], variant === 'profile' && modules_eba0ff4e.default, modules_eba0ff4e[size], inline && modules_eba0ff4e.inline, dismissible && modules_eba0ff4e.dismissible)
-    }, /*#__PURE__*/React.createElement("div", {
-      className: modules_eba0ff4e.layoutContainer
-    }, /*#__PURE__*/React.createElement(React.Fragment, null, canShowIcon && function () {
-      switch (props.variant) {
-        case 'validationPositive':
-          return /*#__PURE__*/React.createElement("span", {
-            className: modules_eba0ff4e.validationIcon
-          }, /*#__PURE__*/React.createElement(Icon, {
-            name: "check_circle",
-            isPresentational: true,
-            isFilled: true
-          }));
-        case 'validationNegative':
-          return /*#__PURE__*/React.createElement("span", {
-            className: modules_eba0ff4e.validationIcon
-          }, /*#__PURE__*/React.createElement(Icon, {
-            name: "error",
-            isPresentational: true,
-            isFilled: true
-          }));
-        case 'validationCautionary':
-          return /*#__PURE__*/React.createElement("span", {
-            className: modules_eba0ff4e.validationIcon
-          }, /*#__PURE__*/React.createElement(Icon, {
-            name: "warning",
-            isPresentational: true,
-            isFilled: true
-          }));
-        case 'validationInformative':
-          return /*#__PURE__*/React.createElement("span", {
-            className: modules_eba0ff4e.validationIcon
-          }, /*#__PURE__*/React.createElement(Icon, {
-            name: "info",
-            isPresentational: true,
-            isFilled: true
-          }));
-        case 'profile':
-          return /*#__PURE__*/React.createElement("span", {
-            className: modules_eba0ff4e.profile
-          }, props.avatar && renderAvatar(props.avatar));
-        default:
-          return null;
-      }
-    }(), /*#__PURE__*/React.createElement("span", {
-      className: classnames(modules_eba0ff4e.textContent, isTruncated && modules_eba0ff4e.truncate),
-      style: {
-        maxWidth: isTruncated ? truncateWidth : undefined
-      }
-    }, children), dismissible && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      className: modules_eba0ff4e.dismissButton,
-      onClick: onDismiss,
-      onMouseDown: onMouseDown,
-      onMouseLeave: onMouseLeave
-    }, /*#__PURE__*/React.createElement("div", {
-      className: modules_eba0ff4e.iconWrapper
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "cancel",
-      alt: "Dismiss",
-      isFilled: true
-    }))))), variant === 'statusLive' && /*#__PURE__*/React.createElement(LiveIcon, null))));
-  };
-  Tag.displayName = 'Tag';
-  return Tag;
-}();
+var Tag = function (props) {
+  var children = props.children,
+    _a = props.variant,
+    variant = _a === void 0 ? 'default' : _a,
+    _b = props.size,
+    size = _b === void 0 ? 'medium' : _b,
+    _c = props.inline,
+    inline = _c === void 0 ? false : _c,
+    _d = props.dismissible,
+    dismissible = _d === void 0 ? false : _d,
+    onDismiss = props.onDismiss,
+    onMouseDown = props.onMouseDown,
+    onMouseLeave = props.onMouseLeave,
+    truncateWidth = props.truncateWidth;
+  var isTruncated = truncateWidth && truncateWidth > 0;
+  var canShowIcon = size === 'medium';
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classnames(modules_eba0ff4e.root, modules_eba0ff4e[variant], variant === 'profile' && modules_eba0ff4e.default, modules_eba0ff4e[size], inline && modules_eba0ff4e.inline, dismissible && modules_eba0ff4e.dismissible)
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: modules_eba0ff4e.layoutContainer
+  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, canShowIcon && function () {
+    switch (props.variant) {
+      case 'validationPositive':
+        return /*#__PURE__*/React__default.createElement("span", {
+          className: modules_eba0ff4e.validationIcon
+        }, /*#__PURE__*/React__default.createElement(Icon, {
+          name: "check_circle",
+          isPresentational: true,
+          isFilled: true
+        }));
+      case 'validationNegative':
+        return /*#__PURE__*/React__default.createElement("span", {
+          className: modules_eba0ff4e.validationIcon
+        }, /*#__PURE__*/React__default.createElement(Icon, {
+          name: "error",
+          isPresentational: true,
+          isFilled: true
+        }));
+      case 'validationCautionary':
+        return /*#__PURE__*/React__default.createElement("span", {
+          className: modules_eba0ff4e.validationIcon
+        }, /*#__PURE__*/React__default.createElement(Icon, {
+          name: "warning",
+          isPresentational: true,
+          isFilled: true
+        }));
+      case 'validationInformative':
+        return /*#__PURE__*/React__default.createElement("span", {
+          className: modules_eba0ff4e.validationIcon
+        }, /*#__PURE__*/React__default.createElement(Icon, {
+          name: "info",
+          isPresentational: true,
+          isFilled: true
+        }));
+      case 'profile':
+        return /*#__PURE__*/React__default.createElement("span", {
+          className: modules_eba0ff4e.profile
+        }, props.avatar && renderAvatar(props.avatar));
+      default:
+        return null;
+    }
+  }(), /*#__PURE__*/React__default.createElement("span", {
+    className: classnames(modules_eba0ff4e.textContent, isTruncated && modules_eba0ff4e.truncate),
+    style: {
+      maxWidth: isTruncated ? truncateWidth : undefined
+    }
+  }, children), dismissible && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    className: modules_eba0ff4e.dismissButton,
+    onClick: onDismiss,
+    onMouseDown: onMouseDown,
+    onMouseLeave: onMouseLeave
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: modules_eba0ff4e.iconWrapper
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    name: "cancel",
+    alt: "Dismiss",
+    isFilled: true
+  }))))), variant === 'statusLive' && /*#__PURE__*/React__default.createElement(LiveIcon, null))));
+};
+Tag.displayName = 'Tag';
 export { Tag };