@hitachivantara/uikit-react-core 5.82.4 → 5.83.0

package/dist/cjs/Table/hooks/{useFilters.cjs → useHvFilters.cjs}

@@ -1,6 +1,6 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const reactTable = require("react-table");
 const useHvFilters = reactTable.useFilters.bind({});
 useHvFilters.pluginName = "useHvFilters";
-exports.default = useHvFilters;
+exports.useHvFilters = useHvFilters;

package/dist/cjs/Table/hooks/{useGlobalFilter.cjs → useHvGlobalFilter.cjs}

@@ -1,6 +1,6 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const reactTable = require("react-table");
 const useHvGlobalFilter = reactTable.useGlobalFilter.bind({});
 useHvGlobalFilter.pluginName = "useHvGlobalFilter";
-exports.default = useHvGlobalFilter;
+exports.useHvGlobalFilter = useHvGlobalFilter;

package/dist/cjs/Table/hooks/{useHeaderGroups.cjs → useHvHeaderGroups.cjs}

@@ -1,5 +1,5 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const replaceHeaderPlaceholders = (headerGroups) => {
   const [headerGroup] = headerGroups;
   const hasPlaceholderHeaders = headerGroup.headers.some(
@@ -80,11 +80,11 @@ const useInstanceHook = (instance) => {
     replaceHeaderPlaceholders(instance.headerGroups);
   }
 };
-const useHeaderGroups = (hooks) => {
+const useHvHeaderGroups = (hooks) => {
   hooks.visibleColumns.push(visibleColumnsHook);
   hooks.useInstance.push(useInstanceHook);
   hooks.getHeaderProps.push(getHeaderPropsHook);
   hooks.getCellProps.push(getCellPropsHook);
 };
-useHeaderGroups.pluginName = "useHvHeaderGroups";
-exports.default = useHeaderGroups;
+useHvHeaderGroups.pluginName = "useHvHeaderGroups";
+exports.useHvHeaderGroups = useHvHeaderGroups;

package/dist/cjs/Table/hooks/{usePagination.cjs → useHvPagination.cjs}

@@ -1,5 +1,5 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const reactTable = require("react-table");
 const useInstanceHook = (instance) => {
   reactTable.ensurePluginOrder(
@@ -47,10 +47,10 @@ const defaultGetHvPaginationProps = (props, { instance }) => {
   };
   return [props, nextProps];
 };
-const usePagination = (hooks) => {
+const useHvPagination = (hooks) => {
   hooks.getHvPaginationProps = [defaultGetHvPaginationProps];
   hooks.useInstance.push(useInstanceHook);
 };
-usePagination.pluginName = "useHvPagination";
-exports.default = usePagination;
+useHvPagination.pluginName = "useHvPagination";
 exports.defaultGetHvPaginationProps = defaultGetHvPaginationProps;
+exports.useHvPagination = useHvPagination;

package/dist/cjs/Table/hooks/{useResizeColumns.cjs → useHvResizeColumns.cjs}

@@ -1,5 +1,5 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const reactTable = require("react-table");
 const getHeaderPropsHook = (props, { column }) => {
   const resizerProps = column.getResizerProps?.() || {};
@@ -28,10 +28,10 @@ const useInstanceHook = (instance) => {
     "useHvResizeColumns"
   );
 };
-const useResizeColumns = (hooks) => {
+const useHvResizeColumns = (hooks) => {
   hooks.getHeaderProps.push(getHeaderPropsHook);
   hooks.getCellProps.push(getCellPropsHook);
   hooks.useInstance.push(useInstanceHook);
 };
-useResizeColumns.pluginName = "useHvResizeColumns";
-exports.default = useResizeColumns;
+useHvResizeColumns.pluginName = "useHvResizeColumns";
+exports.useHvResizeColumns = useHvResizeColumns;

package/dist/cjs/Table/hooks/{useRowExpand.cjs → useHvRowExpand.cjs}

@@ -1,8 +1,9 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const useLabels = require("../../hooks/useLabels.cjs");
+const DefaultCell = require("../renderers/DefaultCell.cjs");
 const Button = require("../../Button/Button.cjs");
 const Typography = require("../../Typography/Typography.cjs");
 const DEFAULT_LABELS = {
@@ -39,7 +40,7 @@ const visibleColumnsHook = (columns, { instance }) => {
   );
   if (firstDataColumnIndex !== -1) {
     const firstDataColumn = columns[firstDataColumnIndex];
-    if (firstDataColumn.Cell == null) {
+    if (firstDataColumn.Cell == null || firstDataColumn.Cell !== DefaultCell.DefaultCell) {
       firstDataColumn.Cell = CellWithExpandButton;
       firstDataColumn.variant = "expand";
       return columns;
@@ -68,10 +69,10 @@ const getRowPropsHook = (props, { row }) => {
   };
   return [props, nextProps];
 };
-const useRowExpand = (hooks) => {
+const useHvRowExpand = (hooks) => {
   hooks.visibleColumns.push(visibleColumnsHook);
   hooks.getRowProps.push(getRowPropsHook);
 };
-useRowExpand.pluginName = "useHvRowExpand";
+useHvRowExpand.pluginName = "useHvRowExpand";
 exports.CellWithExpandButton = CellWithExpandButton;
-exports.default = useRowExpand;
+exports.useHvRowExpand = useHvRowExpand;

package/dist/cjs/Table/hooks/{useRowSelection.cjs → useHvRowSelection.cjs}

@@ -1,5 +1,5 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const reactTable = require("react-table");
@@ -425,7 +425,7 @@ function prepareRow(row, { instance }) {
   row.toggleRowLockedSelection = (set) => instance.toggleRowLockedSelection(row.id, set);
   row.isSelectionLocked = instance.state?.lockedSelectionRowIds?.[row.id] || false;
 }
-const useRowSelection = (hooks) => {
+const useHvRowSelection = (hooks) => {
   hooks.visibleColumns.push(visibleColumnsHook);
   hooks.getRowProps.push(getRowPropsHook);
   hooks.getHeaderProps.push(getHeaderPropsHook);
@@ -438,12 +438,8 @@ const useRowSelection = (hooks) => {
   hooks.useInstance.push(useInstance);
   hooks.prepareRow.push(prepareRow);
 };
-useRowSelection.pluginName = "useHvRowSelection";
-exports.CellWithCheckBox = CellWithCheckBox;
-exports.default = useRowSelection;
+useHvRowSelection.pluginName = "useHvRowSelection";
 exports.defaultGetToggleAllPageRowsSelectedProps = defaultGetToggleAllPageRowsSelectedProps;
 exports.defaultGetToggleAllRowsSelectedProps = defaultGetToggleAllRowsSelectedProps;
 exports.defaultGetToggleRowSelectedProps = defaultGetToggleRowSelectedProps;
-exports.prepareRow = prepareRow;
-exports.reducer = reducer;
-exports.useInstance = useInstance;
+exports.useHvRowSelection = useHvRowSelection;

package/dist/cjs/Table/hooks/{useRowState.cjs → useHvRowState.cjs}

@@ -1,6 +1,6 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const reactTable = require("react-table");
 const useHvRowState = reactTable.useRowState.bind({});
 useHvRowState.pluginName = "useHvRowState";
-exports.default = useHvRowState;
+exports.useHvRowState = useHvRowState;

package/dist/cjs/Table/hooks/{useSortBy.cjs → useHvSortBy.cjs}

@@ -1,5 +1,5 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const reactTable = require("react-table");
 const getHeaderPropsHook = (props, { instance, column }) => {
   const { isMultiSortEvent = (e) => e.shiftKey } = instance;
@@ -27,10 +27,10 @@ const getCellPropsHook = (props, { cell }) => {
 const useInstanceHook = (instance) => {
   reactTable.ensurePluginOrder(instance.plugins, ["useSortBy"], "useHvSortBy");
 };
-const useSortBy = (hooks) => {
+const useHvSortBy = (hooks) => {
   hooks.getHeaderProps.push(getHeaderPropsHook);
   hooks.getCellProps.push(getCellPropsHook);
   hooks.useInstance.push(useInstanceHook);
 };
-useSortBy.pluginName = "useHvSortBy";
-exports.default = useSortBy;
+useHvSortBy.pluginName = "useHvSortBy";
+exports.useHvSortBy = useHvSortBy;

package/dist/cjs/Table/hooks/{useSticky.cjs → useHvSticky.cjs}

@@ -1,5 +1,5 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const reactTable = require("react-table");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const isSticky = (value) => /left|right/i.test(value);
@@ -155,7 +155,7 @@ const getCellPropsHook = (props, { instance, cell }) => {
   const nextProps = instance.hasStickyColumns ? getCellProps(cell.column, false) : {};
   return [props, nextProps];
 };
-const useSticky = (hooks) => {
+const useHvTableSticky = (hooks) => {
   hooks.visibleColumns.push(visibleColumnsHook);
   hooks.useInstance.push(useInstanceHook);
   hooks.getTableProps.push(getTablePropsHook);
@@ -165,7 +165,5 @@ const useSticky = (hooks) => {
   hooks.getRowProps.push(getRowPropsHook);
   hooks.getCellProps.push(getCellPropsHook);
 };
-useSticky.pluginName = "useHvTableSticky";
-exports.default = useSticky;
-exports.getHeaderGroupPropsHook = getHeaderGroupPropsHook;
-exports.getTableHeadPropsHook = getTableHeadPropsHook;
+useHvTableSticky.pluginName = "useHvTableSticky";
+exports.useHvTableSticky = useHvTableSticky;

package/dist/cjs/Table/hooks/{useTable.cjs → useHvTable.cjs}

@@ -1,8 +1,9 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const reactTable = require("react-table");
-const useTableStyles = require("./useTableStyles.cjs");
+const DefaultCell = require("../renderers/DefaultCell.cjs");
+const useHvTableStyles = require("./useHvTableStyles.cjs");
 const toTitleCase = (str) => {
   return str.replace(/([^A-Z])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").toLowerCase().replace(/(^\w|\b\w)/g, (m) => m.toUpperCase()).replace(/\s+/g, " ").trim();
 };
@@ -63,16 +64,17 @@ function useHvTable(options, ...plugins) {
     (plugin) => plugin.pluginName === "useHvTableStyles"
   );
   if (indexOfHvTableStylesPlugin === -1) {
-    plugins.push(useTableStyles.default);
+    plugins.push(useHvTableStyles.useHvTableStyles);
   }
   return reactTable.useTable(
     {
       data,
       columns,
+      defaultColumn: { Cell: DefaultCell.DefaultCell },
       ...others
     },
     useHvTableSetup,
     ...plugins
   );
 }
-exports.default = useHvTable;
+exports.useHvTable = useHvTable;

package/dist/cjs/Table/hooks/{useTableStyles.cjs → useHvTableStyles.cjs}

@@ -1,5 +1,5 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const clsx = require("clsx");
 const getTablePropsHook = (props, { instance }) => {
   const nextProps = {
@@ -78,13 +78,12 @@ const getCellPropsHook = (props, { cell }) => {
   }
   return [props, nextProps];
 };
-const useTableStyles = (hooks) => {
+const useHvTableStyles = (hooks) => {
   hooks.getTableProps.push(getTablePropsHook);
   hooks.getHeaderProps.push(getHeaderFooterPropsHook);
   hooks.getFooterProps.push(getHeaderFooterPropsHook);
   hooks.getRowProps.push(getRowPropsHook);
   hooks.getCellProps.push(getCellPropsHook);
 };
-useTableStyles.pluginName = "useHvTableStyles";
-exports.default = useTableStyles;
-exports.getHeaderFooterPropsHook = getHeaderFooterPropsHook;
+useHvTableStyles.pluginName = "useHvTableStyles";
+exports.useHvTableStyles = useHvTableStyles;

package/dist/cjs/Table/renderers/{DateColumnCell/DateColumnCell.cjs → DateColumnCell.cjs}

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const dayjs = require("dayjs");
-const OverflowTooltip = require("../../../OverflowTooltip/OverflowTooltip.cjs");
+const OverflowTooltip = require("../../OverflowTooltip/OverflowTooltip.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const dayjs__default = /* @__PURE__ */ _interopDefault(dayjs);
 const HvDateColumnCell = ({

package/dist/cjs/Table/renderers/DefaultCell.cjs

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const EM_DASH = "—";
+const DefaultCell = ({
+  row,
+  value
+}) => {
+  switch (true) {
+    case row.subRows.length > 0:
+      return value;
+    case value instanceof Date:
+      return value.toISOString().slice(0, 10);
+    case typeof value === "object":
+      return value;
+    case (value == null || value === ""):
+      return EM_DASH;
+    default:
+      return String(value);
+  }
+};
+exports.DefaultCell = DefaultCell;

package/dist/cjs/Table/renderers/{DropdownColumnCell/DropdownColumnCell.cjs → DropdownColumnCell.cjs}

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const Dropdown = require("../../../Dropdown/Dropdown.cjs");
+const Dropdown = require("../../Dropdown/Dropdown.cjs");
 const HvDropdownColumnCell = ({
   dropdownProps,
   ...others

package/dist/cjs/Table/renderers/{ProgressColumnCell/ProgressColumnCell.cjs → ProgressColumnCell.cjs}

@@ -2,9 +2,27 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const MuiLinearProgress = require("@mui/material/LinearProgress");
-const ProgressColumnCell_styles = require("./ProgressColumnCell.styles.cjs");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiLinearProgress__default = /* @__PURE__ */ _interopDefault(MuiLinearProgress);
+const { useClasses } = uikitReactUtils.createClasses("HvProgressColumnCell", {
+  root: { display: "flex", width: "100%" },
+  linearProgressContainer: { width: "100%", margin: "auto" },
+  linearProgress: {
+    height: 8
+  },
+  linearProgressRoot: { backgroundColor: uikitStyles.theme.colors.atmo4 },
+  linearProgressColorPrimary: {
+    backgroundColor: uikitStyles.theme.colors.atmo4
+  },
+  linearProgressBarColorPrimary: {
+    backgroundColor: uikitStyles.theme.colors.positive
+  },
+  linearProgressBarColorSecondary: {
+    backgroundColor: uikitStyles.theme.colors.secondary
+  }
+});
 const normalizeProgressBar = (value, max) => {
   return max > 0 ? Math.floor(value * 100 / max) : 0;
 };
@@ -14,7 +32,7 @@ const HvProgressColumnCell = ({
   color = "primary",
   "aria-labelledby": ariaLabelledBy
 }) => {
-  const { classes } = ProgressColumnCell_styles.useClasses();
+  const { classes } = useClasses();
   const percentage = normalizeProgressBar(partial, total);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.root, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.linearProgressContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
     MuiLinearProgress__default.default,

package/dist/cjs/Table/renderers/{SwitchColumnCell/SwitchColumnCell.cjs → SwitchColumnCell.cjs}

@@ -1,9 +1,18 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const SwitchColumnCell_styles = require("./SwitchColumnCell.styles.cjs");
-const Typography = require("../../../Typography/Typography.cjs");
-const BaseSwitch = require("../../../BaseSwitch/BaseSwitch.cjs");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const Typography = require("../../Typography/Typography.cjs");
+const BaseSwitch = require("../../BaseSwitch/BaseSwitch.cjs");
+const switchStyle = {
+  cursor: "pointer",
+  display: "inline-flex",
+  marginLeft: "10px"
+};
+const { useClasses } = uikitReactUtils.createClasses("HvSwitchColumnCell", {
+  switchNo: switchStyle,
+  switchYes: switchStyle
+});
 const HvSwitchColumnCell = ({
   checked,
   value,
@@ -12,7 +21,7 @@ const HvSwitchColumnCell = ({
   trueLabel,
   switchProps
 }) => {
-  const { classes } = SwitchColumnCell_styles.useClasses();
+  const { classes } = useClasses();
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     falseLabel != null && /* @__PURE__ */ jsxRuntime.jsx(
       Typography.HvTypography,

package/dist/cjs/Table/renderers/renderers.cjs

@@ -4,21 +4,31 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("@emotion/react");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const setId = require("../../utils/setId.cjs");
-const fallbacks = require("../utils/fallbacks.cjs");
-const DateColumnCell = require("./DateColumnCell/DateColumnCell.cjs");
+const DateColumnCell = require("./DateColumnCell.cjs");
+const DropdownColumnCell = require("./DropdownColumnCell.cjs");
+const ProgressColumnCell = require("./ProgressColumnCell.cjs");
+const SwitchColumnCell = require("./SwitchColumnCell.cjs");
 const Button = require("../../Button/Button.cjs");
 const Tag = require("../../Tag/Tag.cjs");
-const SwitchColumnCell = require("./SwitchColumnCell/SwitchColumnCell.cjs");
-const DropdownColumnCell = require("./DropdownColumnCell/DropdownColumnCell.cjs");
-const ProgressColumnCell = require("./ProgressColumnCell/ProgressColumnCell.cjs");
 const OverflowTooltip = require("../../OverflowTooltip/OverflowTooltip.cjs");
 const Typography = require("../../Typography/Typography.cjs");
+const EM_DASH = "—";
+const hvStringFallback = (value) => {
+  return typeof value === "string" && value !== "" ? value : EM_DASH;
+};
+const hvNumberFallback = (value) => {
+  return typeof value === "number" ? value : EM_DASH;
+};
+const hvNodeFallback = (value) => {
+  if (!value) return EM_DASH;
+  return hvStringFallback(value?.toString()) === EM_DASH ? EM_DASH : value;
+};
 function hvTextColumn(col, overflowTooltipProps = {}) {
   return {
     Cell: ({ value }) => /* @__PURE__ */ jsxRuntime.jsx(
       OverflowTooltip.HvOverflowTooltip,
       {
-        data: fallbacks.hvStringFallback(value),
+        data: hvStringFallback(value),
         ...overflowTooltipProps
       }
     ),
@@ -28,7 +38,7 @@ function hvTextColumn(col, overflowTooltipProps = {}) {
 }
 function hvNumberColumn(col) {
   return {
-    Cell: ({ value }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallbacks.hvNumberFallback(value) }),
+    Cell: ({ value }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: hvNumberFallback(value) }),
     align: "right",
     sortType: "number",
     ...col
@@ -67,7 +77,7 @@ function hvExpandColumn(col, expandRowButtonAriaLabel, collapseRowButtonAriaLabe
             children: row.isExpanded ? ExpandedIcon : CollapsedIcon
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, { data: fallbacks.hvStringFallback(value) })
+        /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, { data: hvStringFallback(value) })
       ] }) });
     },
     sortType: "alphanumeric",
@@ -184,8 +194,11 @@ function hvProgressColumn(col, getPartial, getTotal, color) {
 exports.hvDateColumn = hvDateColumn;
 exports.hvDropdownColumn = hvDropdownColumn;
 exports.hvExpandColumn = hvExpandColumn;
+exports.hvNodeFallback = hvNodeFallback;
 exports.hvNumberColumn = hvNumberColumn;
+exports.hvNumberFallback = hvNumberFallback;
 exports.hvProgressColumn = hvProgressColumn;
+exports.hvStringFallback = hvStringFallback;
 exports.hvSwitchColumn = hvSwitchColumn;
 exports.hvTagColumn = hvTagColumn;
 exports.hvTextColumn = hvTextColumn;

package/dist/cjs/Tag/Tag.cjs

@@ -2,21 +2,19 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const Chip = require("@mui/material/Chip");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const useControlled = require("../hooks/useControlled.cjs");
+const keyboardUtils = require("../utils/keyboardUtils.cjs");
 const Tag_styles = require("./Tag.styles.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const Chip__default = /* @__PURE__ */ _interopDefault(Chip);
-const getCategoricalColor = (customColor, colors) => {
-  return customColor && colors?.[customColor] || customColor || colors?.cat1;
-};
+const ButtonBase = require("../ButtonBase/ButtonBase.cjs");
+const Typography = require("../Typography/Typography.cjs");
 const HvTag = React.forwardRef(function HvTag2(props, ref) {
   const {
     classes: classesProp,
     className,
+    component,
     style,
     label,
     disabled,
@@ -25,75 +23,95 @@ const HvTag = React.forwardRef(function HvTag2(props, ref) {
     selected,
     defaultSelected = false,
     color,
-    deleteIcon,
+    deleteIcon: deleteIconProp,
     onDelete,
     onClick,
+    onKeyDown,
+    onKeyUp,
     // TODO: remove from API
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     deleteButtonArialLabel = "Delete tag",
     deleteButtonProps = {},
     ...others
   } = uikitReactUtils.useDefaultProps("HvTag", props);
-  const { colors } = uikitReactUtils.useTheme();
-  const { classes, cx, css } = Tag_styles.useClasses(classesProp);
+  const { classes, cx } = Tag_styles.useClasses(classesProp);
   const [isSelected, setIsSelected] = useControlled.useControlled(
     selected,
     Boolean(defaultSelected)
   );
-  const defaultDeleteIcon = /* @__PURE__ */ jsxRuntime.jsx(
+  const handleDeleteClick = (event) => {
+    event.stopPropagation();
+    onDelete?.(event);
+  };
+  const backgroundColor = type === "semantic" && uikitStyles.getColor(color, "neutral_20") || type === "categorical" && uikitStyles.theme.alpha(uikitStyles.getColor(color, "cat1"), 0.2) || void 0;
+  const isClickable = !!(onClick || onDelete || selectable);
+  const CheckboxIcon = isSelected ? uikitReactIcons.CheckboxCheck : uikitReactIcons.Checkbox;
+  const deleteIcon = deleteIconProp && React.isValidElement(deleteIconProp) ? React.cloneElement(deleteIconProp, {
+    className: cx(classes.deleteIcon, {
+      [classes.disabledDeleteIcon]: disabled
+    }),
+    onClick: handleDeleteClick
+  }) : /* @__PURE__ */ jsxRuntime.jsx(
     uikitReactIcons.CloseXS,
     {
-      className: cx(classes.button, classes.tagButton),
-      iconSize: "XS",
+      size: "XS",
+      onClick: handleDeleteClick,
+      className: cx(classes.deleteIcon, classes.button, classes.tagButton),
       ...deleteButtonProps
     }
   );
-  const categoricalBackgroundColor = type === "categorical" ? getCategoricalColor(color, colors) : void 0;
-  const backgroundColor = type === "semantic" && uikitStyles.getColor(color, "neutral_20") || type === "categorical" && `${categoricalBackgroundColor}30` || void 0;
-  const isClickable = !!(onClick || onDelete) && !disabled;
-  const clickableClass = css({
-    "&:hover": {
-      boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`
-    }
-  });
-  const colorOverride = disabled && ["atmo3", "secondary_60"] || void 0;
-  const avatarIcon = isSelected ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CheckboxCheck, { color: colorOverride, iconSize: "XS" }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Checkbox, { color: colorOverride, iconSize: "XS" });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Chip__default.default,
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ButtonBase.HvButtonBase,
     {
       ref,
-      label,
+      component: isClickable ? ButtonBase.HvButtonBase : "div",
       disabled,
-      className: cx({ [clickableClass]: isClickable }, className),
-      style: {
-        ...disabled ? null : { backgroundColor },
-        ...style
-      },
-      classes: {
-        root: cx(classes.root, classes.chipRoot, {
-          [classes.disabled]: disabled,
-          [classes.clickable]: isClickable,
-          [classes.categorical]: type === "categorical",
-          [classes.categoricalFocus]: type === "categorical" && !disabled,
-          [classes.categoricalDisabled]: type === "categorical" && disabled
-        }),
-        label: classes.label,
-        deleteIcon: cx(classes.deleteIcon, {
-          [classes.disabledDeleteIcon]: disabled
-        })
+      "data-color": color,
+      style: uikitReactUtils.mergeStyles(style, {
+        "--bgColor": backgroundColor
+      }),
+      className: cx(classes.root, classes.chipRoot, className, {
+        [classes.disabled]: disabled,
+        [classes.selected]: isSelected,
+        [classes.clickable]: isClickable && !disabled,
+        [classes.categorical]: type === "categorical",
+        [classes.categoricalFocus]: type === "categorical" && !disabled,
+        [classes.categoricalDisabled]: type === "categorical" && disabled
+      }),
+      onKeyUp: (event) => {
+        if (event.currentTarget === event.target && keyboardUtils.isDeleteKey(event)) {
+          onDelete?.(event);
+        }
+        onKeyUp?.(event);
       },
-      deleteIcon: deleteIcon || defaultDeleteIcon,
-      onDelete: disabled ? void 0 : onDelete,
       onClick: (event) => {
         if (disabled) return;
         if (selectable) setIsSelected(!isSelected);
         onClick?.(event, !isSelected);
       },
-      "aria-pressed": isSelected,
-      ...selectable && type === "semantic" && {
-        avatar: avatarIcon
-      },
-      ...others
+      selected: isClickable && isSelected,
+      ...others,
+      children: [
+        selectable && type === "semantic" && /* @__PURE__ */ jsxRuntime.jsx(
+          CheckboxIcon,
+          {
+            className: classes.icon,
+            color: disabled && ["atmo3", "secondary_60"] || void 0,
+            size: "XS"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Typography.HvTypography,
+          {
+            noWrap: true,
+            variant: "caption2",
+            component: "span",
+            className: classes.label,
+            children: label
+          }
+        ),
+        onDelete && deleteIcon
+      ]
     }
   );
 });