@hitachivantara/uikit-react-core 5.72.0 → 5.73.0

package/dist/cjs/Button/Button.cjs

@@ -83,6 +83,7 @@ const HvButton = generic.fixedForwardRef(function HvButton2(props, ref) {
         sizeStyles && css(sizeStyles),
         className
       ),
+      "data-color": color,
       onClick: handleClick,
       onMouseDown: handleMouseDown,
       ...Component === "button" && { type: "button" },

package/dist/cjs/Header/Actions/Actions.cjs

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const Actions_styles = require("./Actions.styles.cjs");
-const HvHeaderActions = (props) => {
+const HvHeaderActions = React.forwardRef((props, ref) => {
   const {
     classes: classesProp,
     className,
@@ -11,7 +12,7 @@ const HvHeaderActions = (props) => {
     ...others
   } = uikitReactUtils.useDefaultProps("HvHeaderActions", props);
   const { classes, cx } = Actions_styles.useClasses(classesProp);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.root, className), ...others, children });
-};
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cx(classes.root, className), ...others, children });
+});
 exports.headerActionsClasses = Actions_styles.staticClasses;
 exports.HvHeaderActions = HvHeaderActions;

package/dist/cjs/Header/Brand/Brand.cjs

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const Brand_styles = require("./Brand.styles.cjs");
 const Typography = require("../../Typography/Typography.cjs");
-const HvHeaderBrand = (props) => {
+const HvHeaderBrand = React.forwardRef((props, ref) => {
   const {
     classes: classesProp,
     logo,
@@ -13,11 +14,11 @@ const HvHeaderBrand = (props) => {
     ...others
   } = uikitReactUtils.useDefaultProps("HvHeaderBrand", props);
   const { classes, cx } = Brand_styles.useClasses(classesProp);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(classes.root, className), ...others, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cx(classes.root, className), ...others, children: [
     logo,
     logo && name && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.separator }),
     name && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: classes.brandName, variant: "label", children: name })
   ] });
-};
+});
 exports.headerBrandClasses = Brand_styles.staticClasses;
 exports.HvHeaderBrand = HvHeaderBrand;

package/dist/cjs/Header/Navigation/MenuItem/MenuItem.cjs

@@ -59,11 +59,6 @@ const HvHeaderMenuItem = (props) => {
   const handleFocus = (event) => {
     dispatch?.({ type: "setItemFocused", itemFocused: event.currentTarget });
   };
-  const itemProps = {
-    onClick: actionHandler,
-    onKeyDown: actionHandler,
-    onFocus: handleFocus
-  };
   const label = /* @__PURE__ */ jsxRuntime.jsx(
     Typography.HvTypography,
     {
@@ -80,6 +75,8 @@ const HvHeaderMenuItem = (props) => {
     itemHref = href;
     itemTarget = target;
   }
+  const ItemComponent = itemHref ? "a" : "div";
+  const itemProps = itemHref ? { href: itemHref, target: itemTarget, "aria-label": item.label } : { role: "button", tabIndex: 0 };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "li",
     {
@@ -94,31 +91,20 @@ const HvHeaderMenuItem = (props) => {
         className
       ),
       children: [
-        itemHref ? /* @__PURE__ */ jsxRuntime.jsx(
-          "a",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ItemComponent,
           {
-            className: classes.link,
-            href: itemHref,
-            target: itemTarget,
-            ...itemProps,
+            className: cx(classes.item, {
+              [classes.link]: itemHref,
+              [classes.button]: !itemHref
+            }),
+            onFocus: handleFocus,
+            onClick: actionHandler,
+            onKeyDown: actionHandler,
             "aria-current": isCurrent,
-            "aria-label": item.label,
+            ...itemProps,
             children: label
           }
-        ) : (
-          // keeping this code path for backwards compatibility, but
-          // shouldn't really be used as it's not accessible
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: classes.button,
-              role: "button",
-              ...itemProps,
-              tabIndex: 0,
-              "aria-current": isCurrent,
-              children: label
-            }
-          )
         ),
         hasSubLevel && currentLevel < levels && currentLevel < 2 && /* @__PURE__ */ jsxRuntime.jsx(Bar.Bar, { data, type: "menu", children: data.map((itm) => /* @__PURE__ */ jsxRuntime.jsx(
           HvHeaderMenuItem,
@@ -132,8 +118,7 @@ const HvHeaderMenuItem = (props) => {
           itm.id
         )) })
       ]
-    },
-    item.label
+    }
   );
 };
 exports.headerMenuItemClasses = MenuItem_styles.staticClasses;

package/dist/cjs/Header/Navigation/MenuItem/MenuItem.styles.cjs

@@ -21,6 +21,7 @@ const item = {
   },
   "& span": {
     display: "inline-flex",
+    color: "inherit",
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "space-between"
@@ -43,57 +44,24 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
   {
     root: {
       display: "inline",
-      "&:hover": {
-        backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
-      },
-      "&:focus-within": {
+      height: "100%",
+      borderBottom: "4px solid transparent",
+      ":hover, :focus-within": {
         backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
       }
     },
-    menu: {
-      marginTop: 0,
-      paddingBottom: "4px",
-      paddingTop: "4px",
-      height: "100%",
-      borderTop: "none",
-      borderBottom: `4px solid ${uikitStyles.theme.colors.atmo2}`
-    },
-    menubar: {
-      marginTop: "0px",
-      paddingBottom: "4px",
-      paddingTop: "4px",
-      height: "100%",
-      borderTop: `0px solid ${uikitStyles.theme.colors.atmo1}`,
-      borderBottom: `${"4px"} solid ${uikitStyles.theme.colors.atmo1}`
-    },
+    menu: {},
+    menubar: {},
     selected: {
-      "&$menu": {
-        marginTop: 0,
-        paddingBottom: 0,
-        borderTop: "none",
-        borderBottom: `4px solid ${uikitStyles.theme.colors.secondary}`,
-        paddingTop: "4px",
-        height: "100%",
-        "& > * > span": {
-          color: uikitStyles.theme.colors.secondary
-        }
-      },
-      "&$menubar": {
-        marginTop: 0,
-        paddingBottom: 0,
-        borderTop: "none",
-        borderBottom: `4px solid ${uikitStyles.theme.colors.secondary}`,
-        paddingTop: "4px",
-        height: "100%"
-      }
+      borderColor: uikitStyles.theme.colors.secondary,
+      color: uikitStyles.theme.colors.secondary
     },
+    item,
     link: {
-      textDecoration: "none",
-      ...item
+      textDecoration: "none"
     },
     button: {
-      color: "inherit",
-      ...item
+      color: "inherit"
     }
   }
 );

package/dist/cjs/Header/Navigation/Navigation.cjs

@@ -1,13 +1,14 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const Navigation_styles = require("./Navigation.styles.cjs");
 const useSelectionPath = require("./useSelectionPath.cjs");
 const FocusContext = require("./utils/FocusContext.cjs");
 const SelectionContext = require("./utils/SelectionContext.cjs");
 const MenuBar = require("./MenuBar/MenuBar.cjs");
-const HvHeaderNavigation = (props) => {
+const HvHeaderNavigation = React.forwardRef((props, ref) => {
   const {
     data,
     selected,
@@ -23,7 +24,7 @@ const HvHeaderNavigation = (props) => {
     event.preventDefault();
     onClick?.(event, selection);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(SelectionContext.SelectionContext.Provider, { value: selectionPath, children: /* @__PURE__ */ jsxRuntime.jsx(FocusContext.FocusProvider, { children: /* @__PURE__ */ jsxRuntime.jsx("nav", { className: cx(classes.root, className), ...others, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectionContext.SelectionContext.Provider, { value: selectionPath, children: /* @__PURE__ */ jsxRuntime.jsx(FocusContext.FocusProvider, { children: /* @__PURE__ */ jsxRuntime.jsx("nav", { ref, className: cx(classes.root, className), ...others, children: /* @__PURE__ */ jsxRuntime.jsx(
     MenuBar.HvHeaderMenuBar,
     {
       data,
@@ -33,6 +34,6 @@ const HvHeaderNavigation = (props) => {
       currentLevel: 1
     }
   ) }) }) });
-};
+});
 exports.headerNavigationClasses = Navigation_styles.staticClasses;
 exports.HvHeaderNavigation = HvHeaderNavigation;

package/dist/cjs/Pagination/Pagination.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const Hidden = require("@mui/material/Hidden");
+const material = require("@mui/material");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const useLabels = require("../hooks/useLabels.cjs");
@@ -12,8 +12,6 @@ const Select = require("./Select.cjs");
 const Typography = require("../Typography/Typography.cjs");
 const IconButton = require("../IconButton/IconButton.cjs");
 const Input = require("../Input/Input.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const Hidden__default = /* @__PURE__ */ _interopDefault(Hidden);
 const defaultPageSizeOptions = [5, 10, 20, 25, 50, 100];
 const DEFAULT_LABELS = {
   /** The show label. */
@@ -66,6 +64,8 @@ const HvPagination = (props) => {
   } = uikitReactUtils.useDefaultProps("HvPagination", props);
   const { classes, cx } = Pagination_styles.useClasses(classesProp);
   const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
+  const muiTheme = material.useTheme();
+  const isXsDown = material.useMediaQuery(muiTheme.breakpoints.down("xs"));
   const [pageInput, setPageInput] = React.useState(page);
   const changePage = React.useCallback(
     (newPage) => {
@@ -109,14 +109,14 @@ const HvPagination = (props) => {
   ) });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { id, className: cx(classes.root, className), ...others, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.pageSizeOptions, ...showPageProps, children: showPageSizeOptions && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Hidden__default.default, { xsDown: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      !isXsDown && /* @__PURE__ */ jsxRuntime.jsx(
         Typography.HvTypography,
         {
           component: "span",
           className: classes?.pageSizeTextContainer,
           children: labels?.pageSizePrev
         }
-      ) }),
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(
         Select.default,
         {
@@ -133,14 +133,14 @@ const HvPagination = (props) => {
           children: pageSizeOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(Select.Option, { value: option, children: option }, option))
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(Hidden__default.default, { xsDown: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      !isXsDown && /* @__PURE__ */ jsxRuntime.jsx(
         Typography.HvTypography,
         {
           component: "span",
           className: classes.pageSizeTextContainer,
           children: labels?.pageSizeEntryName
         }
-      ) })
+      )
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.pageNavigator, ...navigationProps, children: [
       /* @__PURE__ */ jsxRuntime.jsx(

package/dist/cjs/SimpleGrid/SimpleGrid.cjs

@@ -7,14 +7,14 @@ const HvSimpleGrid = (props) => {
   const {
     children,
     breakpoints,
-    spacing = "sm",
+    spacing,
     cols,
     className,
     classes: classesProp,
     ...others
   } = uikitReactUtils.useDefaultProps("HvSimpleGrid", props);
   const { classes, cx, css } = SimpleGrid_styles.useClasses(classesProp);
-  const containerStyle = SimpleGrid_styles.getContainerStyle({ breakpoints, spacing, cols });
+  const containerStyle = SimpleGrid_styles.getContainerStyle(breakpoints, spacing, cols);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {

package/dist/cjs/SimpleGrid/SimpleGrid.styles.cjs

@@ -3,13 +3,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSimpleGrid", {
-  root: {}
-});
-function size(props) {
-  if (typeof props.size === "number") {
-    return props.size;
+  root: {
+    display: "grid",
+    boxSizing: "border-box",
+    gridTemplateColumns: `repeat(var(--cols, 1), minmax(0, 1fr))`
   }
-  return props.sizes[props.size] || props.size || props.sizes.md;
+});
+function getSize(size) {
+  return size || Number(uikitStyles.theme.breakpoints.values.md);
 }
 function getSortedBreakpoints(breakpoints) {
   if (breakpoints.length === 0) {
@@ -17,29 +18,23 @@ function getSortedBreakpoints(breakpoints) {
   }
   const property = "maxWidth" in breakpoints[0] ? "maxWidth" : "minWidth";
   const sorted = [...breakpoints].sort(
-    (a, b) => size({ size: b[property], sizes: uikitStyles.theme.breakpoints }) - size({ size: a[property], sizes: uikitStyles.theme.breakpoints })
+    (a, b) => getSize(b[property]) - getSize(a[property])
   );
   return property === "minWidth" ? sorted.reverse() : sorted;
 }
-const getContainerStyle = ({
-  breakpoints,
-  spacing,
-  cols
-}) => {
+const getContainerStyle = (breakpoints, spacing = "sm", cols = 1) => {
   return {
-    boxSizing: "border-box",
-    display: "grid",
-    gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
+    // TODO: review/document precedence of cols/spacing vs breakpoints[cols/spacing]
+    "--cols": cols,
     gap: uikitStyles.theme.space[spacing],
     ...breakpoints && getSortedBreakpoints(breakpoints).reduce((acc, breakpoint) => {
       const property = "maxWidth" in breakpoint ? "max-width" : "min-width";
-      const breakpointSize = size({
-        size: property === "max-width" ? breakpoint.maxWidth : breakpoint.minWidth,
-        sizes: uikitStyles.theme.breakpoints
-      });
-      acc[`@media (${property}: ${breakpointSize + (property === "max-width" ? 0 : 1)}px)`] = {
-        gridTemplateColumns: `repeat(${breakpoint.cols}, minmax(0, 1fr))`,
-        gap: uikitStyles.theme.space[spacing]
+      const breakpointSize = getSize(
+        property === "max-width" ? breakpoint.maxWidth : breakpoint.minWidth
+      );
+      acc[`@media (${property}: ${breakpointSize}px)`] = {
+        ["--cols"]: breakpoint.cols,
+        gap: uikitStyles.theme.space[breakpoint.spacing || spacing]
       };
       return acc;
     }, {})

package/dist/cjs/TableSection/TableSection.styles.cjs

@@ -14,7 +14,7 @@ const BulkActions_styles = require("../BulkActions/BulkActions.styles.cjs");
 require("react/jsx-runtime");
 const Pagination_styles = require("../Pagination/Pagination.styles.cjs");
 require("react");
-require("@mui/material/Hidden");
+require("@mui/material");
 require("@hitachivantara/uikit-react-icons");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableSection", {
   root: {},

package/dist/cjs/TimeAgo/TimeAgo.cjs

@@ -11,7 +11,7 @@ const HvTimeAgo = generic.fixedForwardRef(function HvTimeAgo2(props, ref) {
     classes: classesProp,
     className,
     timestamp,
-    locale: localeProp = "en",
+    locale = "en",
     component: Component = Typography.HvTypography,
     emptyElement = "—",
     disableRefresh = false,
@@ -20,7 +20,6 @@ const HvTimeAgo = generic.fixedForwardRef(function HvTimeAgo2(props, ref) {
     ...others
   } = uikitReactUtils.useDefaultProps("HvTimeAgo", props);
   const { classes, cx } = TimeAgo_styles.useClasses(classesProp);
-  const locale = localeProp || "en";
   const timeAgo = useTimeAgo.default(timestamp, {
     locale,
     disableRefresh,

package/dist/cjs/TimeAgo/formatUtils.cjs

@@ -1,105 +1,72 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const dayjs = require("dayjs");
-const calendar = require("dayjs/plugin/calendar");
-const duration = require("dayjs/plugin/duration");
-const localeData = require("dayjs/plugin/localeData");
-const localizedFormat = require("dayjs/plugin/localizedFormat");
-const relativeTime = require("dayjs/plugin/relativeTime");
-const updateLocale = require("dayjs/plugin/updateLocale");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const dayjs__default = /* @__PURE__ */ _interopDefault(dayjs);
-const calendar__default = /* @__PURE__ */ _interopDefault(calendar);
-const duration__default = /* @__PURE__ */ _interopDefault(duration);
-const localeData__default = /* @__PURE__ */ _interopDefault(localeData);
-const localizedFormat__default = /* @__PURE__ */ _interopDefault(localizedFormat);
-const relativeTime__default = /* @__PURE__ */ _interopDefault(relativeTime);
-const updateLocale__default = /* @__PURE__ */ _interopDefault(updateLocale);
-const thresholds = [
-  { l: "s", r: 119, d: "second" },
-  { l: "m", r: 1 },
-  { l: "mm", r: 59, d: "minute" },
-  { l: "h", r: 1 },
-  { l: "hh", r: 23, d: "hour" },
-  { l: "d", r: 1 },
-  { l: "dd", r: 29, d: "day" },
-  { l: "M", r: 1 },
-  { l: "MM", r: 11, d: "month" },
-  { l: "y", r: 17 },
-  { l: "yy", d: "year" }
-];
-dayjs__default.default.extend(localeData__default.default);
-dayjs__default.default.extend(duration__default.default);
-dayjs__default.default.extend(calendar__default.default);
-dayjs__default.default.extend(localizedFormat__default.default);
-dayjs__default.default.extend(relativeTime__default.default, { thresholds });
-dayjs__default.default.extend(updateLocale__default.default);
-const secondsUntilNextDay = (date = /* @__PURE__ */ new Date()) => {
-  const midnight = new Date(date.getTime());
-  midnight.setDate(midnight.getDate() + 1);
-  midnight.setHours(0);
-  midnight.setMinutes(0);
-  midnight.setSeconds(0);
-  midnight.setMilliseconds(0);
-  return (midnight.getTime() - date.getTime()) / 1e3;
-};
-const secondsUntilNextWeek = (date = /* @__PURE__ */ new Date()) => {
-  const firstMonthDayOfWeek = date.getDate() - date.getDay();
-  const firstMonthDayOfNextWeek = firstMonthDayOfWeek + 7;
-  const firstDayNextWeek = new Date(date.getTime());
-  firstDayNextWeek.setDate(firstMonthDayOfNextWeek);
-  firstDayNextWeek.setHours(0);
-  firstDayNextWeek.setMinutes(0);
-  firstDayNextWeek.setSeconds(0);
-  firstDayNextWeek.setMilliseconds(0);
-  return (firstDayNextWeek.getTime() - date.getTime()) / 1e3;
-};
-const formatTimeAgo = (date, locale, showSeconds = false, referenceDate = /* @__PURE__ */ new Date()) => {
-  const dayReferenceDate = dayjs__default.default(referenceDate);
-  const dayDate = dayjs__default.default(date).locale(locale);
-  const dayDiffSeconds = dayReferenceDate.diff(dayDate, "second");
-  const formatUseSeconds = showSeconds ? "LTS" : "LT";
-  if (date.getTime() > referenceDate.getTime()) {
-    return {
-      timeAgo: dayDate.format(`L ${formatUseSeconds}`),
-      delay: (date.getTime() - referenceDate.getTime()) / 1e3
-    };
-  }
-  if (dayDiffSeconds < 120) {
-    return {
-      timeAgo: dayjs__default.default.duration(dayDiffSeconds, "second").locale(locale).humanize(),
-      delay: 120 - dayDiffSeconds
-    };
+const isDateInPeriod = (timeAgoMs, period, referenceDate = /* @__PURE__ */ new Date()) => {
+  const date = new Date(timeAgoMs);
+  const startOfToday = new Date(referenceDate);
+  startOfToday.setHours(0, 0, 0, 0);
+  const startOfTomorrow = new Date(startOfToday);
+  startOfTomorrow.setDate(startOfToday.getDate() + 1);
+  const startOfDayAfterTomorrow = new Date(startOfTomorrow);
+  startOfDayAfterTomorrow.setDate(startOfTomorrow.getDate() + 1);
+  if (period === "tomorrow") {
+    return date >= startOfTomorrow && date < startOfDayAfterTomorrow;
   }
-  const dayDiffMinutes = dayReferenceDate.diff(dayDate, "minute");
-  if (dayDiffMinutes < 60) {
-    return {
-      timeAgo: dayjs__default.default.duration(-dayDiffMinutes, "minute").locale(locale).humanize(true),
-      delay: 60 * (dayDiffMinutes + 1) - dayDiffSeconds
-    };
+  if (period === "afterTomorrow") {
+    return date >= startOfDayAfterTomorrow;
   }
-  if (dayReferenceDate.isSame(dayDate, "day")) {
-    return {
-      timeAgo: `${dayDate.calendar(dayReferenceDate)}`,
-      delay: secondsUntilNextDay(referenceDate)
-    };
-  }
-  if (dayReferenceDate.subtract(1, "day").isSame(dayDate, "day")) {
-    return {
-      timeAgo: `${dayDate.calendar(dayReferenceDate)}`,
-      delay: secondsUntilNextDay(referenceDate)
-    };
-  }
-  if (dayDate.isSame(dayReferenceDate, "week")) {
-    return {
-      timeAgo: dayDate.format(`ddd, ${formatUseSeconds}`),
-      delay: secondsUntilNextWeek(date)
-    };
+  return false;
+};
+const formatTimeAgo = (timeAgoMs, locale, showSeconds = false, referenceDate = /* @__PURE__ */ new Date()) => {
+  const relFormatter = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+  const dayFormatter = new Intl.DateTimeFormat(locale, {
+    hour: "numeric",
+    minute: "numeric",
+    second: showSeconds ? "numeric" : void 0
+  });
+  const weekFormatter = new Intl.DateTimeFormat(locale, {
+    weekday: "short",
+    hour: "numeric",
+    minute: "numeric",
+    second: showSeconds ? "numeric" : void 0
+  });
+  const fullFormatter = new Intl.DateTimeFormat(locale, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: showSeconds ? "numeric" : void 0
+  });
+  const date = new Date(timeAgoMs);
+  const secsInDay = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds();
+  const secsInWeek = date.getDay() * 86400 + secsInDay;
+  const secsAgo = Math.floor((referenceDate.getTime() - timeAgoMs) / 1e3);
+  const minsAgo = Math.floor(secsAgo / 60);
+  switch (true) {
+    case isDateInPeriod(timeAgoMs, "afterTomorrow", referenceDate):
+      return fullFormatter.format(date);
+    case isDateInPeriod(timeAgoMs, "tomorrow", referenceDate):
+      return `${relFormatter.format(1, "days")}, ${dayFormatter.format(date)}`;
+    case minsAgo < -60:
+      return `${relFormatter.format(0, "days")}, ${dayFormatter.format(date)}`;
+    case minsAgo < -2:
+      return relFormatter.format(-minsAgo, "minutes");
+    case secsAgo < 0:
+      return `${relFormatter.format(Math.abs(secsAgo), "seconds")}`;
+    case secsAgo < 20:
+      return relFormatter.format(0, "seconds");
+    case minsAgo < 2:
+      return relFormatter.format(-secsAgo, "seconds");
+    case minsAgo < 60:
+      return relFormatter.format(-minsAgo, "minutes");
+    case secsAgo < secsInDay:
+      return `${relFormatter.format(0, "days")}, ${dayFormatter.format(date)}`;
+    case secsAgo < secsInDay + 86400:
+      return `${relFormatter.format(-1, "days")}, ${dayFormatter.format(date)}`;
+    case secsAgo < secsInWeek:
+      return weekFormatter.format(date);
+    default:
+      return fullFormatter.format(date);
   }
-  return {
-    timeAgo: dayDate.format(`L ${formatUseSeconds}`),
-    delay: 0
-  };
 };
 exports.formatTimeAgo = formatTimeAgo;
-exports.secondsUntilNextDay = secondsUntilNextDay;

package/dist/cjs/TimeAgo/useTimeAgo.cjs

@@ -5,12 +5,14 @@ const formatUtils = require("./formatUtils.cjs");
 const useTimeout = require("./useTimeout.cjs");
 const fmt = (timestamp, locale, showSeconds) => {
   const timestampMs = String(timestamp).length > 11 ? timestamp : timestamp * 1e3;
-  return formatUtils.formatTimeAgo(new Date(timestampMs), locale, showSeconds);
+  return formatUtils.formatTimeAgo(timestampMs, locale, showSeconds);
 };
-function useTimeAgo(timestamp, options) {
+function useTimeAgo(timestamp = Date.now(), options) {
   const { locale, disableRefresh = false, showSeconds = false } = options || {};
-  const [timeAgo, setTimeAgo] = React.useState(fmt(timestamp, locale, showSeconds));
-  const refreshTime = disableRefresh ? 0 : timeAgo.delay * 1e3;
+  const [timeAgo, setTimeAgo] = React.useState(
+    () => fmt(timestamp, locale, showSeconds)
+  );
+  const refreshTime = disableRefresh ? 0 : 1e4;
   React.useEffect(() => {
     const newTimeAgo = fmt(timestamp, locale, showSeconds);
     setTimeAgo(newTimeAgo);
@@ -19,6 +21,6 @@ function useTimeAgo(timestamp, options) {
     const newTimeAgo = fmt(timestamp, locale, showSeconds);
     setTimeAgo(newTimeAgo);
   }, refreshTime);
-  return timeAgo.timeAgo;
+  return timeAgo;
 }
 exports.default = useTimeAgo;

package/dist/esm/Button/Button.js

@@ -82,6 +82,7 @@ const HvButton = fixedForwardRef(function HvButton2(props, ref) {
         sizeStyles && css(sizeStyles),
         className
       ),
+      "data-color": color,
       onClick: handleClick,
       onMouseDown: handleMouseDown,
       ...Component === "button" && { type: "button" },