@hitachivantara/uikit-react-core 5.73.2 → 5.74.0

package/dist/cjs/Accordion/Accordion.cjs

@@ -4,10 +4,9 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const useControlled = require("../hooks/useControlled.cjs");
-const useUniqueId = require("../hooks/useUniqueId.cjs");
-const setId = require("../utils/setId.cjs");
+const useExpandable = require("../hooks/useExpandable.cjs");
 const Accordion_styles = require("./Accordion.styles.cjs");
+const ButtonBase = require("../ButtonBase/ButtonBase.cjs");
 const Typography = require("../Typography/Typography.cjs");
 const HvAccordion = (props) => {
   const {
@@ -26,72 +25,44 @@ const HvAccordion = (props) => {
     disableEventHandling,
     ...others
   } = uikitReactUtils.useDefaultProps("HvAccordion", props);
-  const id = useUniqueId.useUniqueId(idProp);
   const { classes, cx } = Accordion_styles.useClasses(classesProp);
-  const [isOpen, setIsOpen] = useControlled.useControlled(expanded, Boolean(defaultExpanded));
-  const handleAction = React.useCallback(
+  const { isOpen, toggleOpen, buttonProps, regionProps } = useExpandable.useExpandable({
+    id: idProp,
+    expanded,
+    disabled,
+    defaultExpanded
+  });
+  const handleClick = React.useCallback(
     (event) => {
       if (!disabled) {
         onChange?.(event, isOpen);
-        setIsOpen(!isOpen);
-        return true;
+        toggleOpen();
       }
-      return false;
-    },
-    [disabled, onChange, isOpen, setIsOpen]
-  );
-  const handleClick = React.useCallback(
-    (event) => {
-      handleAction(event);
       if (!disableEventHandling) {
         event.preventDefault();
         event.stopPropagation();
       }
     },
-    [disableEventHandling, handleAction]
-  );
-  const handleKeyDown = React.useCallback(
-    (event) => {
-      let isEventHandled = false;
-      const { key } = event;
-      if (event.altKey || event.ctrlKey || event.metaKey || event.currentTarget !== event.target) {
-        return;
-      }
-      switch (key) {
-        case "Enter":
-        case " ":
-          isEventHandled = handleAction(event);
-          break;
-        default:
-          return;
-      }
-      if (isEventHandled && !disableEventHandling) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-    },
-    [disableEventHandling, handleAction]
+    [disableEventHandling, disabled, isOpen, onChange, toggleOpen]
   );
-  const accordionHeaderId = setId.setId(id, "button");
-  const accordionContainer = setId.setId(id, "container");
   const accordionHeader = React.useMemo(() => {
-    const color = disabled ? "secondary_60" : void 0;
     const accordionButton = /* @__PURE__ */ jsxRuntime.jsxs(
       Typography.HvTypography,
       {
-        id: accordionHeaderId,
-        component: "div",
-        role: "button",
+        ...buttonProps,
+        component: ButtonBase.HvButtonBase,
         className: cx(classes.label, { [classes.disabled]: disabled }),
         disabled,
-        tabIndex: 0,
-        onKeyDown: handleKeyDown,
         onClick: handleClick,
         variant: labelVariant,
-        "aria-expanded": isOpen,
-        "aria-disabled": disabled,
         children: [
-          isOpen ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropUpXS, { color }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, { color }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            uikitReactIcons.DropUpXS,
+            {
+              color: "inherit",
+              style: { rotate: isOpen ? void 0 : "180deg" }
+            }
+          ),
           label
         ]
       }
@@ -101,24 +72,21 @@ const HvAccordion = (props) => {
     cx,
     classes,
     handleClick,
-    handleKeyDown,
     label,
-    accordionHeaderId,
+    buttonProps,
     disabled,
     headingLevel,
     isOpen,
     labelVariant
   ]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id, className: cx(classes.root, className), ...others, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id: idProp, className: cx(classes.root, className), ...others, children: [
     accordionHeader,
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        id: accordionContainer,
-        role: "region",
-        "aria-labelledby": accordionHeaderId,
         className: cx(classes.container, { [classes.hidden]: !isOpen }),
         hidden: !isOpen,
+        ...regionProps,
         ...containerProps,
         children
       }

package/dist/cjs/Accordion/Accordion.styles.cjs

@@ -1,8 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const uikitStyles = require("@hitachivantara/uikit-styles");
-const focusUtils = require("../utils/focusUtils.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvAccordion", {
   root: {
     "& + root": {
@@ -16,32 +14,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvAccordion
     display: "flex",
     justifyContent: "flex-start",
     alignItems: "center",
-    height: "32px",
-    "&[disabled], &:active": {
-      outline: "none"
-    },
-    "&:focus": {
-      outline: "none",
-      background: uikitStyles.theme.colors.atmo3
-    },
-    "&:hover": {
-      background: uikitStyles.theme.colors.atmo3
-    },
-    "&:focus-visible": {
-      ...focusUtils.outlineStyles
-    },
-    cursor: "pointer"
+    height: "32px"
   },
-  disabled: {
-    cursor: "not-allowed",
-    color: uikitStyles.theme.colors.secondary_60,
-    "&:focus": {
-      background: "none"
-    },
-    "&:hover": {
-      background: "none"
-    }
-  }
+  disabled: {}
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/ActionsGeneric/ActionsGeneric.styles.cjs

@@ -3,15 +3,11 @@ 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("HvActionsGeneric", {
-  root: {},
-  button: {
-    "&:not(:last-child)": {
-      marginRight: uikitStyles.theme.space.xs
-    },
-    "&:hover": {
-      backgroundColor: uikitStyles.theme.alpha("base_light", 0.3)
-    }
+  root: {
+    display: "flex",
+    gap: uikitStyles.theme.space.xs
   },
+  button: {},
   actionContainer: { display: "flex", alignItems: "center", float: "right" },
   dropDownMenu: {},
   dropDownMenuButton: {},

package/dist/cjs/Banner/BannerContent/ActionContainer/ActionContainer.cjs

@@ -26,7 +26,6 @@ const HvActionContainer = (props) => {
         variant: "semantic",
         "aria-label": "Close",
         onClick: onClose,
-        tabIndex: 0,
         ...others,
         children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, { iconSize: "XS", className: classes.iconContainer, color: "base2" })
       }

package/dist/cjs/BaseDropdown/BaseDropdown.cjs

@@ -11,6 +11,7 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const useControlled = require("../hooks/useControlled.cjs");
 const useForkRef = require("../hooks/useForkRef.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
+const document$1 = require("../utils/document.cjs");
 const focusableElementFinder = require("../utils/focusableElementFinder.cjs");
 const keyboardUtils = require("../utils/keyboardUtils.cjs");
 const setId = require("../utils/setId.cjs");
@@ -143,6 +144,9 @@ const BaseDropdown = React.forwardRef((props, ref) => {
     ...headerControlArias
   }) : defaultHeaderElement;
   const containerComponent = (() => {
+    if (!document$1.getDocument()) {
+      return null;
+    }
     const handleContainerKeyDown = (event) => {
       if (keyboardUtils.isKey(event, "Esc")) {
         handleToggle(event);

package/dist/cjs/BaseDropdown/BaseDropdownContext/BaseDropdownContext.cjs

@@ -7,6 +7,5 @@ const BaseDropdownContext = React.createContext({
 });
 BaseDropdownContext.displayName = "BaseDropdownContext";
 const useBaseDropdownContext = () => React.useContext(BaseDropdownContext);
-const BaseDropdownContext$1 = BaseDropdownContext;
-exports.default = BaseDropdownContext$1;
+exports.default = BaseDropdownContext;
 exports.useBaseDropdownContext = useBaseDropdownContext;

package/dist/cjs/BreadCrumb/BreadCrumb.cjs

@@ -25,16 +25,12 @@ const HvBreadCrumb = (props) => {
   const maxVisibleElem = maxVisible && maxVisible < 2 ? 2 : maxVisible;
   let listPath = listRoute.slice();
   if (url != null) {
-    listPath = [];
-    const baseUrl = url.match(/^.*\/\/[^/]+/);
-    const urlWithoutDomain = url.replace(/^.*\/\/[^/]+/, "");
-    const pathNames = urlWithoutDomain.split("/").filter((x) => x);
-    pathNames.map(
-      (elem, index) => listPath.push({
-        label: decodeURI(elem),
-        path: `${baseUrl}/${pathNames.slice(0, index + 1).join("/")}`
-      })
-    );
+    const baseUrl = url.match(/^.*\/\/[^/]+/) ?? "";
+    const pathNames = url.replace(/^.*\/\/[^/]+/, "").split("/").filter(Boolean);
+    listPath = pathNames.map((elem, index) => ({
+      label: decodeURI(elem),
+      path: `${baseUrl}/${pathNames.slice(0, index + 1).join("/")}`
+    }));
   }
   const breadcrumbPath = maxVisibleElem && listPath.length > maxVisibleElem ? utils.pathWithSubMenu(
     id,

package/dist/cjs/ButtonBase/ButtonBase.cjs

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const generic = require("../types/generic.cjs");
+const ButtonBase_styles = require("./ButtonBase.styles.cjs");
+const HvButtonBase = generic.fixedForwardRef(function HvButtonBase2(props, ref) {
+  const {
+    className,
+    classes: classesProp,
+    children,
+    selected,
+    disabled,
+    focusableWhenDisabled,
+    component: Component = "button",
+    onClick: onClickProp,
+    onMouseDown: onMouseDownProp,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvButtonBase", props);
+  const { classes, cx } = ButtonBase_styles.useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      ref,
+      className: cx(
+        classes.root,
+        {
+          [classes.disabled]: disabled
+        },
+        className
+      ),
+      onClick: (e) => {
+        if (disabled) return;
+        onClickProp?.(e);
+      },
+      onMouseDown: (e) => {
+        if (disabled) return;
+        onMouseDownProp?.(e);
+      },
+      ...Component === "button" && { type: "button" },
+      ...disabled && {
+        disabled: !focusableWhenDisabled,
+        tabIndex: focusableWhenDisabled ? 0 : -1,
+        "aria-disabled": true
+      },
+      ...selected && { "aria-pressed": selected },
+      ...others,
+      children
+    }
+  );
+});
+exports.buttonBaseClasses = ButtonBase_styles.staticClasses;
+exports.HvButtonBase = HvButtonBase;

package/dist/cjs/ButtonBase/ButtonBase.styles.cjs

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const focusUtils = require("../utils/focusUtils.cjs");
+const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButtonBase", {
+  root: {
+    display: "inline-flex",
+    cursor: "pointer",
+    background: "none",
+    padding: 0,
+    // Background color common for almost all variants
+    "&:hover": {
+      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+    },
+    "&:focus-visible": {
+      ...focusUtils.outlineStyles,
+      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+    },
+    // Default button - no size specified
+    fontFamily: uikitStyles.theme.fontFamily.body,
+    fontSize: "inherit",
+    color: "inherit"
+  },
+  disabled: {
+    cursor: "not-allowed",
+    color: uikitStyles.theme.colors.secondary_60,
+    "&:hover, &:focus-visible": {
+      backgroundColor: "transparent"
+    }
+  }
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;

package/dist/cjs/Calendar/CalendarNavigation/MonthSelector/MonthSelector.cjs

@@ -1,10 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const keyboardUtils = require("../../../utils/keyboardUtils.cjs");
 const utils = require("../../utils.cjs");
 const MonthSelector_styles = require("./MonthSelector.styles.cjs");
-const Typography = require("../../../Typography/Typography.cjs");
+const ButtonBase = require("../../../ButtonBase/ButtonBase.cjs");
 const HvMonthSelector = ({
   classes: classesProp,
   id,
@@ -17,12 +16,6 @@ const HvMonthSelector = ({
 }) => {
   const { classes, cx } = MonthSelector_styles.useClasses(classesProp);
   const listMonthNamesShort = utils.getMonthNamesList(locale, "short");
-  const onKeyDownHandler = (event, index) => {
-    if (keyboardUtils.isKey(event, "Enter")) {
-      onChange?.(event, "month", index + 1);
-      onViewModeChange("calendar");
-    }
-  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -31,26 +24,17 @@ const HvMonthSelector = ({
         [classes.normalWidth]: !rangeMode
       }),
       children: listMonthNamesShort.map((monthName, index) => /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
+        ButtonBase.HvButtonBase,
         {
-          className: classes.focusSelection,
-          role: "button",
+          className: cx(classes.calendarMonthlyCell, {
+            [classes.calendarMonthlyCellSelected]: index + 1 === visibleMonth
+          }),
           onClick: (event) => {
             onChange?.(event, "month", index + 1);
             onViewModeChange("calendar");
           },
-          onKeyDown: (event) => onKeyDownHandler(event, index),
-          tabIndex: 0,
           ...others,
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            Typography.HvTypography,
-            {
-              className: cx(classes.calendarMonthlyCell, {
-                [classes.calendarMonthlyCellSelected]: index + 1 === visibleMonth
-              }),
-              children: monthName
-            }
-          )
+          children: monthName
         },
         monthName
       ))

package/dist/cjs/Calendar/CalendarNavigation/MonthSelector/MonthSelector.styles.cjs

@@ -2,56 +2,24 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const focusUtils = require("../../../utils/focusUtils.cjs");
-const hover = {
-  backgroundColor: uikitStyles.theme.colors.atmo3,
-  cursor: "pointer"
-};
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvMonthSelector", {
   calendarMonthlyGrid: {
-    marginTop: "50px",
-    marginLeft: "-16px",
-    display: "flex",
+    display: "grid",
+    gridTemplateColumns: "repeat(3, 1fr)",
     zIndex: "10",
-    padding: "0 20px",
-    position: "absolute",
-    flexFlow: "wrap",
-    alignContent: "center",
-    justifyContent: "space-evenly",
-    backgroundColor: uikitStyles.theme.colors.atmo1
+    alignContent: "center"
   },
   rangeModeWidth: {},
   normalWidth: {},
-  focusSelection: {
-    "&:hover": {
-      ...hover
-    },
-    "&:focus": {
-      outline: "none"
-    },
-    "&:focus-visible": {
-      ...hover,
-      ...focusUtils.outlineStyles
-    }
-  },
   calendarMonthlyCell: {
     display: "flex",
     justifyContent: "center",
-    flexDirection: "column",
-    textAlign: "center",
+    alignItems: "center",
     height: "40px",
-    width: "92px",
-    "&:hover": {
-      ...hover
-    }
+    width: "92px"
   },
   calendarMonthlyCellSelected: {
-    backgroundColor: uikitStyles.theme.colors.atmo3,
-    color: uikitStyles.theme.colors.secondary,
-    "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.atmo3,
-      color: uikitStyles.theme.colors.secondary
-    }
+    backgroundColor: uikitStyles.theme.colors.atmo3
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/Calendar/SingleCalendar/CalendarCell.cjs

@@ -5,12 +5,12 @@ const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const utils = require("../utils.cjs");
 const CalendarCell_styles = require("./CalendarCell.styles.cjs");
+const ButtonBase = require("../../ButtonBase/ButtonBase.cjs");
 const Typography = require("../../Typography/Typography.cjs");
 const HvCalendarCell = (props) => {
   const {
     classes: classesProp,
     onChange,
-    onKeyDown,
     calendarValue,
     firstDayOfCurrentMonth,
     value,
@@ -42,25 +42,19 @@ const HvCalendarCell = (props) => {
       if (buttonEl.current) setTimeout(() => buttonEl?.current?.focus());
     }
   };
-  const handleKeyDown = (event) => {
-    onKeyDown?.(event);
-  };
   const renderDate = () => /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
+    ButtonBase.HvButtonBase,
     {
       ref: buttonEl,
-      type: "button",
-      className: cx(classes.cellContainer, {
-        [classes.focusSelection]: inMonth
-      }),
+      className: classes.cellContainer,
       onClick: handleClick,
-      onKeyDown: handleKeyDown,
       disabled: isDateDisabled || !inMonth,
       "data-in-month": inMonth,
       ...others,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         Typography.HvTypography,
         {
+          component: "span",
           variant: isCellToday ? "label" : "body",
           className: cx(classes.calendarDate, {
             [classes.calendarDateSelected]: inMonth && isCellSelected,

package/dist/cjs/Calendar/SingleCalendar/CalendarCell.styles.cjs

@@ -2,31 +2,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const focusUtils = require("../../utils/focusUtils.cjs");
 const hover = {
   backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
   cursor: "pointer"
 };
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCalendarCell", {
-  cellContainer: {
-    cursor: "pointer",
-    border: 0,
-    padding: 0,
-    margin: 0,
-    backgroundColor: "transparent"
-  },
-  focusSelection: {
-    "&:hover": {
-      ...hover
-    },
-    "&:focus": {
-      outline: "none"
-    },
-    "&:focus-visible": {
-      ...hover,
-      ...focusUtils.outlineStyles
-    }
-  },
+  cellContainer: {},
   calendarDate: {
     display: "flex",
     justifyContent: "center",

package/dist/cjs/ColorPicker/SavedColors/SavedColors.cjs

@@ -56,7 +56,6 @@ const SavedColors = (props) => {
               className: classes.removeButton,
               variant: "secondarySubtle",
               onClick: () => onRemoveColor(color, index),
-              tabIndex: 0,
               "aria-label": deleteButtonAriaLabel,
               children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CloseXS, { "aria-hidden": true, iconSize: "XS" })
             }

package/dist/cjs/DatePicker/DatePicker.cjs

@@ -285,7 +285,8 @@ const HvDatePicker = React.forwardRef(
                 headerOpen: classes.dropdownHeaderOpen,
                 placeholder: cx(classes.inputText, {
                   [classes.dateText]: dateString
-                })
+                }),
+                container: classes.container
               },
               readOnly,
               disabled,

package/dist/cjs/DatePicker/DatePicker.styles.cjs

@@ -42,7 +42,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDatePicke
   dateText: {
     color: "inherit",
     fontWeight: uikitStyles.theme.typography.label.fontWeight
-  }
+  },
+  container: {}
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/InlineEditor/InlineEditor.cjs

@@ -5,6 +5,7 @@ const React = require("react");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const useControlled = require("../hooks/useControlled.cjs");
+const useEnhancedEffect = require("../hooks/useEnhancedEffect.cjs");
 const generic = require("../types/generic.cjs");
 const keyboardUtils = require("../utils/keyboardUtils.cjs");
 const InlineEditor_styles = require("./InlineEditor.styles.cjs");
@@ -37,7 +38,7 @@ const HvInlineEditor = generic.fixedForwardRef(function HvInlineEditor2(props, r
   const { activeTheme } = uikitReactUtils.useTheme();
   const typographyStyles = activeTheme?.typography[variant] || {};
   const { lineHeight } = typographyStyles;
-  React.useLayoutEffect(() => {
+  useEnhancedEffect.useEnhancedEffect(() => {
     const input = inputRef.current;
     if (editMode && input) {
       input.focus();

package/dist/cjs/Loading/Loading.cjs

@@ -13,20 +13,21 @@ const HvLoading = (props) => {
     small,
     label,
     classes: classesProp,
+    style,
     className,
     ...others
   } = uikitReactUtils.useDefaultProps("HvLoading", props);
   const { classes, cx } = Loading_styles.useClasses(classesProp);
   const size = small ? "small" : "regular";
-  const colorVariant = color ? "Color" : "";
-  const variant = `${size}${colorVariant}`;
-  const inline = {
-    backgroundColor: uikitStyles.getColor(color, small ? "secondary" : "brand")
-  };
+  const colorVariant = color && `${size}Color`;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       hidden: !!hidden,
+      style: uikitReactUtils.mergeStyles(style, {
+        color: uikitStyles.getColor(color, small ? "secondary" : "brand"),
+        "--customColor": uikitStyles.getColor(color)
+      }),
       className: cx(
         classes.root,
         {
@@ -39,8 +40,12 @@ const HvLoading = (props) => {
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.barContainer, children: helpers.range(3).map((e) => /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            style: inline,
-            className: cx(classes.loadingBar, classes[variant])
+            className: cx(
+              classes.loadingBar,
+              // TODO: hoist to parent & remove unused `colorVariant` in v6
+              classes[size],
+              classes[colorVariant]
+            )
           },
           e
         )) }),