@hitachivantara/uikit-react-core 5.87.3 → 5.89.0

package/dist/esm/Banner/Banner.js

@@ -15,17 +15,17 @@ const HvBanner = forwardRef(function HvBanner2(props, ref) {
     open,
     onClose,
     anchorOrigin = "top",
-    variant = "default",
+    variant,
     transitionDuration = 300,
     transitionDirection = "down",
     container,
-    showIcon = false,
+    showIcon,
     customIcon,
     actions,
     actionsCallback,
     // TODO - remove in v6
     onAction,
-    actionsPosition = "auto",
+    actionsPosition,
     label,
     offset = 60,
     bannerContentProps,
@@ -68,7 +68,6 @@ const HvBanner = forwardRef(function HvBanner2(props, ref) {
         HvBannerContent,
         {
           id: setId(id, "content"),
-          content: label,
           variant,
           customIcon,
           showIcon,
@@ -77,7 +76,8 @@ const HvBanner = forwardRef(function HvBanner2(props, ref) {
           onAction,
           actionsPosition,
           onClose,
-          ...bannerContentProps
+          ...bannerContentProps,
+          children: label
         }
       )
     }

package/dist/esm/Banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sources":["../../../src/Banner/Banner.tsx"],"sourcesContent":["import { forwardRef, useCallback } from \"react\";\nimport Slide, { SlideProps } from \"@mui/material/Slide\";\nimport Snackbar, {\n  SnackbarProps as MuiSnackbarProps,\n  SnackbarOrigin,\n} from \"@mui/material/Snackbar\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvActionsGenericProps } from \"../ActionsGeneric\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Banner.styles\";\nimport {\n  HvBannerContent,\n  HvBannerContentProps,\n} from \"./BannerContent/BannerContent\";\nimport { HvBannerActionPosition, HvBannerVariant } from \"./types\";\n\nexport { staticClasses as bannerClasses };\n\nexport type HvBannerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBannerProps\n  extends Omit<MuiSnackbarProps, \"anchorOrigin\" | \"classes\" | \"onClose\"> {\n  /** If true, the snackbar is open. */\n  open: boolean;\n  /**\n   * Callback fired when the component requests to be closed.\n   * Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop.\n   * The reason parameter can optionally be used to control the response to onClose, for example ignoring click away.\n   * */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** The message to display. */\n  label?: string;\n  /** The anchor of the Snackbar. */\n  anchorOrigin?: \"top\" | \"bottom\";\n  /** Variant of the snackbar. */\n  variant?: HvBannerVariant;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Actions to display on the right side. */\n  actions?: HvActionsGenericProps[\"actions\"];\n  /**\n   * The callback function called when an action is triggered, receiving `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** The callback function called when an action is triggered, receiving `action` as parameter. */\n  onAction?: HvActionsGenericProps[\"onAction\"];\n  /** The position property of the header. */\n  actionsPosition?: HvBannerActionPosition;\n  /** How much the transition animation last in milliseconds, if 0 no animation is played. */\n  transitionDuration?: number;\n  /** Direction of slide transition. */\n  transitionDirection?: \"up\" | \"down\" | \"left\" | \"right\";\n  /** The container the banner should slide from. */\n  container?: SlideProps[\"container\"];\n  /** Offset from top/bottom of the page, in px. Defaults to 60px. */\n  offset?: number;\n  /** Props to pass down to the banner Wrapper. An object `actionProps` can be included to be passed as others to actions. */\n  bannerContentProps?: HvBannerContentProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBannerClasses;\n  /** @ignore */\n  ref?: MuiSnackbarProps[\"ref\"];\n}\n\n/**\n * A Banner displays an important and succinct message. It can also provide actions for the user to address, or dismiss.\n * It requires a user action, for it to be dismissed. Banners should appear at the top of the screen, below a top app bar.\n */\nexport const HvBanner = forwardRef<\n  React.ComponentRef<typeof Snackbar>,\n  HvBannerProps\n>(function HvBanner(props, ref) {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    open,\n    onClose,\n    anchorOrigin = \"top\",\n    variant = \"default\",\n    transitionDuration = 300,\n    transitionDirection = \"down\",\n    container,\n    showIcon = false,\n    customIcon,\n    actions,\n    actionsCallback, // TODO - remove in v6\n    onAction,\n    actionsPosition = \"auto\",\n    label,\n    offset = 60,\n    bannerContentProps,\n    ...others\n  } = useDefaultProps(\"HvBanner\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const anchorOriginBanner: SnackbarOrigin = {\n    horizontal: \"center\",\n    vertical: anchorOrigin,\n  };\n\n  const SlideTransition = useCallback<\n    NonNullable<MuiSnackbarProps[\"TransitionComponent\"]>\n  >(\n    (properties) => (\n      <Slide\n        {...properties}\n        container={container}\n        direction={transitionDirection}\n      />\n    ),\n    [container, transitionDirection],\n  );\n\n  return (\n    <Snackbar\n      ref={ref}\n      id={id}\n      open={open}\n      className={className}\n      classes={{\n        root: cx(classes.root, { [classes.rootClosed]: !open }),\n        anchorOriginTopCenter: classes.anchorOriginTopCenter,\n        anchorOriginBottomCenter: classes.anchorOriginBottomCenter,\n      }}\n      style={{ [anchorOrigin]: offset }}\n      anchorOrigin={anchorOriginBanner}\n      TransitionComponent={SlideTransition}\n      transitionDuration={transitionDuration}\n      {...others}\n    >\n      <HvBannerContent\n        id={setId(id, \"content\")}\n        content={label}\n        variant={variant}\n        customIcon={customIcon}\n        showIcon={showIcon}\n        actions={actions}\n        actionsCallback={actionsCallback}\n        onAction={onAction}\n        actionsPosition={actionsPosition}\n        onClose={onClose}\n        {...bannerContentProps}\n      />\n    </Snackbar>\n  );\n});\n"],"names":["HvBanner"],"mappings":";;;;;;;;;AA4EO,MAAM,WAAW,WAGtB,SAASA,UAAS,OAAO,KAAK;AACxB,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,UAAU;AAAA,IACV,qBAAqB;AAAA,IACrB,sBAAsB;AAAA,IACtB;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,qBAAqC;AAAA,IACzC,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ;AAEA,QAAM,kBAAkB;AAAA,IAGtB,CAAC,eACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,CAAC,WAAW,mBAAmB;AAAA,EACjC;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,MAAM,GAAG,QAAQ,MAAM,EAAE,CAAC,QAAQ,UAAU,GAAG,CAAC,MAAM;AAAA,QACtD,uBAAuB,QAAQ;AAAA,QAC/B,0BAA0B,QAAQ;AAAA,MACpC;AAAA,MACA,OAAO,EAAE,CAAC,YAAY,GAAG,OAAO;AAAA,MAChC,cAAc;AAAA,MACd,qBAAqB;AAAA,MACrB;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,IAAI,SAAS;AAAA,UACvB,SAAS;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAEJ,CAAC;"}
+{"version":3,"file":"Banner.js","sources":["../../../src/Banner/Banner.tsx"],"sourcesContent":["import { forwardRef, useCallback } from \"react\";\nimport Slide, { SlideProps } from \"@mui/material/Slide\";\nimport Snackbar, {\n  SnackbarProps as MuiSnackbarProps,\n  SnackbarOrigin,\n} from \"@mui/material/Snackbar\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvActionsGenericProps } from \"../ActionsGeneric\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Banner.styles\";\nimport {\n  HvBannerContent,\n  HvBannerContentProps,\n} from \"./BannerContent/BannerContent\";\nimport { HvBannerActionPosition, HvBannerVariant } from \"./types\";\n\nexport { staticClasses as bannerClasses };\n\nexport type HvBannerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBannerProps\n  extends Omit<MuiSnackbarProps, \"anchorOrigin\" | \"classes\" | \"onClose\"> {\n  /** If true, the snackbar is open. */\n  open: boolean;\n  /**\n   * Callback fired when the component requests to be closed.\n   * Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop.\n   * The reason parameter can optionally be used to control the response to onClose, for example ignoring click away.\n   * */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** The message to display. */\n  label?: string;\n  /** The anchor of the Snackbar. */\n  anchorOrigin?: \"top\" | \"bottom\";\n  /** Variant of the snackbar. */\n  variant?: HvBannerVariant;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Actions to display on the right side. */\n  actions?: HvActionsGenericProps[\"actions\"];\n  /**\n   * The callback function called when an action is triggered, receiving `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** The callback function called when an action is triggered, receiving `action` as parameter. */\n  onAction?: HvActionsGenericProps[\"onAction\"];\n  /** The position property of the header. */\n  actionsPosition?: HvBannerActionPosition;\n  /** How much the transition animation last in milliseconds, if 0 no animation is played. */\n  transitionDuration?: number;\n  /** Direction of slide transition. */\n  transitionDirection?: \"up\" | \"down\" | \"left\" | \"right\";\n  /** The container the banner should slide from. */\n  container?: SlideProps[\"container\"];\n  /** Offset from top/bottom of the page, in px. Defaults to 60px. */\n  offset?: number;\n  /** Props to pass down to the banner Wrapper. An object `actionProps` can be included to be passed as others to actions. */\n  bannerContentProps?: HvBannerContentProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBannerClasses;\n  /** @ignore */\n  ref?: MuiSnackbarProps[\"ref\"];\n}\n\n/**\n * A Banner displays an important and succinct message. It can also provide actions for the user to address, or dismiss.\n * It requires a user action, for it to be dismissed. Banners should appear at the top of the screen, below a top app bar.\n */\nexport const HvBanner = forwardRef<\n  React.ComponentRef<typeof Snackbar>,\n  HvBannerProps\n>(function HvBanner(props, ref) {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    open,\n    onClose,\n    anchorOrigin = \"top\",\n    variant,\n    transitionDuration = 300,\n    transitionDirection = \"down\",\n    container,\n    showIcon,\n    customIcon,\n    actions,\n    actionsCallback, // TODO - remove in v6\n    onAction,\n    actionsPosition,\n    label,\n    offset = 60,\n    bannerContentProps,\n    ...others\n  } = useDefaultProps(\"HvBanner\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const anchorOriginBanner: SnackbarOrigin = {\n    horizontal: \"center\",\n    vertical: anchorOrigin,\n  };\n\n  const SlideTransition = useCallback<\n    NonNullable<MuiSnackbarProps[\"TransitionComponent\"]>\n  >(\n    (properties) => (\n      <Slide\n        {...properties}\n        container={container}\n        direction={transitionDirection}\n      />\n    ),\n    [container, transitionDirection],\n  );\n\n  return (\n    <Snackbar\n      ref={ref}\n      id={id}\n      open={open}\n      className={className}\n      classes={{\n        root: cx(classes.root, { [classes.rootClosed]: !open }),\n        anchorOriginTopCenter: classes.anchorOriginTopCenter,\n        anchorOriginBottomCenter: classes.anchorOriginBottomCenter,\n      }}\n      style={{ [anchorOrigin]: offset }}\n      anchorOrigin={anchorOriginBanner}\n      TransitionComponent={SlideTransition}\n      transitionDuration={transitionDuration}\n      {...others}\n    >\n      <HvBannerContent\n        id={setId(id, \"content\")}\n        variant={variant}\n        customIcon={customIcon}\n        showIcon={showIcon}\n        actions={actions}\n        actionsCallback={actionsCallback}\n        onAction={onAction}\n        actionsPosition={actionsPosition}\n        onClose={onClose}\n        {...bannerContentProps}\n      >\n        {label}\n      </HvBannerContent>\n    </Snackbar>\n  );\n});\n"],"names":["HvBanner"],"mappings":";;;;;;;;;AA4EO,MAAM,WAAW,WAGtB,SAASA,UAAS,OAAO,KAAK;AACxB,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,qBAAqB;AAAA,IACrB,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,qBAAqC;AAAA,IACzC,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ;AAEA,QAAM,kBAAkB;AAAA,IAGtB,CAAC,eACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,CAAC,WAAW,mBAAmB;AAAA,EACjC;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,MAAM,GAAG,QAAQ,MAAM,EAAE,CAAC,QAAQ,UAAU,GAAG,CAAC,MAAM;AAAA,QACtD,uBAAuB,QAAQ;AAAA,QAC/B,0BAA0B,QAAQ;AAAA,MACpC;AAAA,MACA,OAAO,EAAE,CAAC,YAAY,GAAG,OAAO;AAAA,MAChC,cAAc;AAAA,MACd,qBAAqB;AAAA,MACrB;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,IAAI,SAAS;AAAA,UACvB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACC,GAAG;AAAA,UAEH,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EACF;AAEJ,CAAC;"}

package/dist/esm/Banner/BannerContent/BannerContent.js

@@ -1,106 +1,70 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import SnackbarContent from "@mui/material/SnackbarContent";
-import { Close } from "@hitachivantara/uikit-react-icons";
-import { iconVariant } from "../../utils/iconVariant.js";
-import { setId } from "../../utils/setId.js";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvCallout } from "../../utils/Callout.js";
 import { useClasses } from "./BannerContent.styles.js";
 import { staticClasses } from "./BannerContent.styles.js";
-import { HvActionsGeneric } from "../../ActionsGeneric/ActionsGeneric.js";
-import { HvButton } from "../../Button/Button.js";
-const HvBannerContent = forwardRef(
-  function HvBannerContent2(props, ref) {
-    const {
+const HvBannerContent = forwardRef(function HvBannerContent2(props, ref) {
+  const {
+    id,
+    classes: classesProp,
+    className,
+    showIcon,
+    customIcon,
+    variant = "default",
+    onClose,
+    actions,
+    actionsCallback,
+    // TODO - remove in v6
+    onAction,
+    actionsPosition = "auto",
+    content,
+    children,
+    actionProps,
+    ...others
+  } = useDefaultProps("HvBannerContent", props);
+  const { classes, cx } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(
+    HvCallout,
+    {
+      ref,
       id,
-      classes: classesProp,
-      className,
-      showIcon = false,
+      variant,
+      showClose: true,
+      showIcon,
       customIcon,
-      variant = "default",
-      onClose,
+      classes: {
+        root: cx(
+          classes.root,
+          classes.outContainer,
+          classes.baseVariant,
+          classes[variant],
+          className
+        ),
+        message: classes.message,
+        action: classes.action,
+        messageIcon: classes.iconContainer,
+        messageContent: classes.messageContainer,
+        actionCustom: classes.messageActions,
+        actionContent: cx(
+          classes.actionContainer,
+          classes.actionsInnerContainer
+        ),
+        actionClose: classes.closeAction
+      },
       actions,
-      actionsCallback,
-      // TODO - remove in v6
-      onAction,
-      actionsPosition = "auto",
-      content,
-      children,
+      actionsPosition,
       actionProps,
-      ...others
-    } = props;
-    const { classes, cx } = useClasses(classesProp);
-    const icon = customIcon || showIcon && iconVariant(variant, "base_dark");
-    const effectiveActionsPosition = actionsPosition === "auto" ? "inline" : actionsPosition;
-    const handleAction = (evt, action) => {
-      onAction?.(evt, action);
-      actionsCallback?.(evt, id, action);
-    };
-    return /* @__PURE__ */ jsx("div", { className: classes.outContainer, children: /* @__PURE__ */ jsx(
-      SnackbarContent,
-      {
-        ref,
-        id,
-        classes: {
-          root: classes.root,
-          message: classes.message,
-          action: classes.action
-        },
-        className: cx(classes.baseVariant, classes[variant], className),
-        message: /* @__PURE__ */ jsxs(Fragment, { children: [
-          icon && /* @__PURE__ */ jsx("div", { className: classes.iconContainer, children: icon }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              id: setId(id, "message-text"),
-              className: classes.messageContainer,
-              children: children ?? content
-            }
-          ),
-          actions && effectiveActionsPosition === "inline" && /* @__PURE__ */ jsx(
-            "div",
-            {
-              id: setId(id, "message-actions"),
-              className: classes.messageActions,
-              children: /* @__PURE__ */ jsx(
-                HvActionsGeneric,
-                {
-                  id,
-                  variant: "semantic",
-                  actions,
-                  onAction: handleAction
-                }
-              )
-            }
-          )
-        ] }),
-        action: /* @__PURE__ */ jsxs("div", { className: classes.actionContainer, children: [
-          /* @__PURE__ */ jsx(
-            HvButton,
-            {
-              icon: true,
-              className: classes.closeAction,
-              variant: "semantic",
-              "aria-label": "Close",
-              onClick: onClose,
-              ...actionProps,
-              children: /* @__PURE__ */ jsx(Close, { size: "XS" })
-            }
-          ),
-          actions && effectiveActionsPosition === "bottom-right" && /* @__PURE__ */ jsx("div", { className: classes.actionsInnerContainer, children: /* @__PURE__ */ jsx(
-            HvActionsGeneric,
-            {
-              id,
-              variant: "semantic",
-              actions,
-              onAction: handleAction
-            }
-          ) })
-        ] }),
-        ...others
-      }
-    ) });
-  }
-);
+      onClose: (evt) => onClose?.(evt),
+      onAction: (evt, action) => {
+        onAction?.(evt, action);
+        actionsCallback?.(evt, id, action);
+      },
+      ...others,
+      children: children ?? content
+    }
+  );
+});
 export {
   HvBannerContent,
   staticClasses as bannerContentClasses

package/dist/esm/Banner/BannerContent/BannerContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerContent.js","sources":["../../../../src/Banner/BannerContent/BannerContent.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport SnackbarContent, {\n  SnackbarContentProps as MuiSnackbarContentProps,\n} from \"@mui/material/SnackbarContent\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvActionsGeneric, HvActionsGenericProps } from \"../../ActionsGeneric\";\nimport { HvButton, HvButtonProps } from \"../../Button\";\nimport { iconVariant } from \"../../utils/iconVariant\";\nimport { setId } from \"../../utils/setId\";\nimport { HvBannerActionPosition, HvBannerVariant } from \"../types\";\nimport { staticClasses, useClasses } from \"./BannerContent.styles\";\n\nexport { staticClasses as bannerContentClasses };\n\nexport type HvBannerContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBannerContentProps\n  extends Omit<MuiSnackbarContentProps, \"variant\" | \"classes\" | \"onClose\"> {\n  /** The message to display. @deprecated use `children` instead */\n  content?: string;\n  /** The message to display. */\n  children?: React.ReactNode;\n  /** Variant of the snackbar. */\n  variant?: HvBannerVariant;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** Function called when clicking on the close button. */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Actions to display on the right side. */\n  actions?: HvActionsGenericProps[\"actions\"];\n  /**\n   * The callback function called when an action is triggered, receiving `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** The callback function called when an action is triggered, receiving `action` as parameter. */\n  onAction?: HvActionsGenericProps[\"onAction\"];\n  /** The position property of the header. */\n  actionsPosition?: HvBannerActionPosition;\n  /** The props to pass down to the Action Container. */\n  actionProps?: Partial<HvButtonProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBannerContentClasses;\n}\n\nexport const HvBannerContent = forwardRef<HTMLDivElement, HvBannerContentProps>(\n  function HvBannerContent(props, ref) {\n    const {\n      id,\n      classes: classesProp,\n      className,\n      showIcon = false,\n      customIcon,\n      variant = \"default\",\n      onClose,\n      actions,\n      actionsCallback, // TODO - remove in v6\n      onAction,\n      actionsPosition = \"auto\",\n      content,\n      children,\n      actionProps,\n      ...others\n    } = props;\n    const { classes, cx } = useClasses(classesProp);\n    const icon = customIcon || (showIcon && iconVariant(variant, \"base_dark\"));\n\n    // default to inline\n    // this might try to be more intelligent in the future,\n    // taking into account the content length, available space,\n    // number of actions, etc..\n    const effectiveActionsPosition =\n      actionsPosition === \"auto\" ? \"inline\" : actionsPosition;\n\n    const handleAction: HvBannerContentProps[\"onAction\"] = (evt, action) => {\n      onAction?.(evt, action);\n      actionsCallback?.(evt, id!, action);\n    };\n\n    return (\n      <div className={classes.outContainer}>\n        <SnackbarContent\n          ref={ref}\n          id={id}\n          classes={{\n            root: classes.root,\n            message: classes.message,\n            action: classes.action,\n          }}\n          className={cx(classes.baseVariant, classes[variant], className)}\n          message={\n            <>\n              {icon && <div className={classes.iconContainer}>{icon}</div>}\n              <div\n                id={setId(id, \"message-text\")}\n                className={classes.messageContainer}\n              >\n                {children ?? content}\n              </div>\n              {actions && effectiveActionsPosition === \"inline\" && (\n                <div\n                  id={setId(id, \"message-actions\")}\n                  className={classes.messageActions}\n                >\n                  <HvActionsGeneric\n                    id={id}\n                    variant=\"semantic\"\n                    actions={actions}\n                    onAction={handleAction}\n                  />\n                </div>\n              )}\n            </>\n          }\n          action={\n            <div className={classes.actionContainer}>\n              <HvButton\n                icon\n                className={classes.closeAction}\n                variant=\"semantic\"\n                aria-label=\"Close\"\n                onClick={onClose}\n                {...actionProps}\n              >\n                <Close size=\"XS\" />\n              </HvButton>\n              {actions && effectiveActionsPosition === \"bottom-right\" && (\n                <div className={classes.actionsInnerContainer}>\n                  <HvActionsGeneric\n                    id={id}\n                    variant=\"semantic\"\n                    actions={actions}\n                    onAction={handleAction}\n                  />\n                </div>\n              )}\n            </div>\n          }\n          {...others}\n        />\n      </div>\n    );\n  },\n);\n"],"names":["HvBannerContent"],"mappings":";;;;;;;;;;AAkDO,MAAM,kBAAkB;AAAA,EAC7B,SAASA,iBAAgB,OAAO,KAAK;AAC7B,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD;AACJ,UAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAC9C,UAAM,OAAO,cAAe,YAAY,YAAY,SAAS,WAAW;AAMlE,UAAA,2BACJ,oBAAoB,SAAS,WAAW;AAEpC,UAAA,eAAiD,CAAC,KAAK,WAAW;AACtE,iBAAW,KAAK,MAAM;AACJ,wBAAA,KAAK,IAAK,MAAM;AAAA,IACpC;AAEA,WACG,oBAAA,OAAA,EAAI,WAAW,QAAQ,cACtB,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,SAAS;AAAA,UACP,MAAM,QAAQ;AAAA,UACd,SAAS,QAAQ;AAAA,UACjB,QAAQ,QAAQ;AAAA,QAClB;AAAA,QACA,WAAW,GAAG,QAAQ,aAAa,QAAQ,OAAO,GAAG,SAAS;AAAA,QAC9D,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,UAAA,QAAS,oBAAA,OAAA,EAAI,WAAW,QAAQ,eAAgB,UAAK,MAAA;AAAA,UACtD;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,IAAI,cAAc;AAAA,cAC5B,WAAW,QAAQ;AAAA,cAElB,UAAY,YAAA;AAAA,YAAA;AAAA,UACf;AAAA,UACC,WAAW,6BAA6B,YACvC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,IAAI,iBAAiB;AAAA,cAC/B,WAAW,QAAQ;AAAA,cAEnB,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC;AAAA,kBACA,SAAQ;AAAA,kBACR;AAAA,kBACA,UAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,YACZ;AAAA,UAAA;AAAA,QACF,GAEJ;AAAA,QAEF,QACE,qBAAC,OAAI,EAAA,WAAW,QAAQ,iBACtB,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAI;AAAA,cACJ,WAAW,QAAQ;AAAA,cACnB,SAAQ;AAAA,cACR,cAAW;AAAA,cACX,SAAS;AAAA,cACR,GAAG;AAAA,cAEJ,UAAA,oBAAC,OAAM,EAAA,MAAK,KAAK,CAAA;AAAA,YAAA;AAAA,UACnB;AAAA,UACC,WAAW,6BAA6B,sCACtC,OAAI,EAAA,WAAW,QAAQ,uBACtB,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA,SAAQ;AAAA,cACR;AAAA,cACA,UAAU;AAAA,YAAA;AAAA,UAAA,EAEd,CAAA;AAAA,QAAA,GAEJ;AAAA,QAED,GAAG;AAAA,MAAA;AAAA,IAAA,GAER;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"BannerContent.js","sources":["../../../../src/Banner/BannerContent/BannerContent.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { SnackbarContentProps as MuiSnackbarContentProps } from \"@mui/material/SnackbarContent\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvActionsGenericProps } from \"../../ActionsGeneric\";\nimport { HvButtonProps } from \"../../Button\";\nimport { HvCallout } from \"../../utils/Callout\";\nimport { HvBannerActionPosition, HvBannerVariant } from \"../types\";\nimport { staticClasses, useClasses } from \"./BannerContent.styles\";\n\nexport { staticClasses as bannerContentClasses };\n\nexport type HvBannerContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBannerContentProps\n  extends Omit<MuiSnackbarContentProps, \"variant\" | \"classes\" | \"onClose\"> {\n  /** The message to display. @deprecated use `children` instead */\n  content?: string;\n  /** The message to display. */\n  children?: React.ReactNode;\n  /** Variant of the snackbar. */\n  variant?: HvBannerVariant;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** Function called when clicking on the close button. */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Actions to display on the right side. */\n  actions?: HvActionsGenericProps[\"actions\"];\n  /**\n   * The callback function called when an action is triggered, receiving `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** The callback function called when an action is triggered, receiving `action` as parameter. */\n  onAction?: HvActionsGenericProps[\"onAction\"];\n  /** The position property of the header. */\n  actionsPosition?: HvBannerActionPosition;\n  /** The props to pass down to the Action Container. */\n  actionProps?: Partial<HvButtonProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBannerContentClasses;\n}\n\nexport const HvBannerContent = forwardRef<\n  // no-indent\n  HTMLDivElement,\n  HvBannerContentProps\n>(function HvBannerContent(props, ref) {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    showIcon,\n    customIcon,\n    variant = \"default\",\n    onClose,\n    actions,\n    actionsCallback, // TODO - remove in v6\n    onAction,\n    actionsPosition = \"auto\",\n    content,\n    children,\n    actionProps,\n    ...others\n  } = useDefaultProps(\"HvBannerContent\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <HvCallout\n      ref={ref}\n      id={id}\n      variant={variant}\n      showClose\n      showIcon={showIcon}\n      customIcon={customIcon}\n      classes={{\n        root: cx(\n          classes.root,\n          classes.outContainer,\n          classes.baseVariant,\n          classes[variant],\n          className,\n        ),\n        message: classes.message,\n        action: classes.action,\n        messageIcon: classes.iconContainer,\n        messageContent: classes.messageContainer,\n        actionCustom: classes.messageActions,\n        actionContent: cx(\n          classes.actionContainer,\n          classes.actionsInnerContainer,\n        ),\n        actionClose: classes.closeAction,\n      }}\n      actions={actions}\n      actionsPosition={actionsPosition}\n      actionProps={actionProps}\n      onClose={(evt) => onClose?.(evt as React.MouseEvent<any>)}\n      onAction={(evt, action) => {\n        onAction?.(evt, action);\n        actionsCallback?.(evt, id!, action);\n      }}\n      {...others}\n    >\n      {children ?? content}\n    </HvCallout>\n  );\n});\n"],"names":["HvBannerContent"],"mappings":";;;;;;AAiDO,MAAM,kBAAkB,WAI7B,SAASA,iBAAgB,OAAO,KAAK;AAC/B,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAC5C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,MAAM;AAAA,UACJ,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,QAAQ,OAAO;AAAA,UACf;AAAA,QACF;AAAA,QACA,SAAS,QAAQ;AAAA,QACjB,QAAQ,QAAQ;AAAA,QAChB,aAAa,QAAQ;AAAA,QACrB,gBAAgB,QAAQ;AAAA,QACxB,cAAc,QAAQ;AAAA,QACtB,eAAe;AAAA,UACb,QAAQ;AAAA,UACR,QAAQ;AAAA,QACV;AAAA,QACA,aAAa,QAAQ;AAAA,MACvB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,CAAC,QAAQ,UAAU,GAA4B;AAAA,MACxD,UAAU,CAAC,KAAK,WAAW;AACzB,mBAAW,KAAK,MAAM;AACJ,0BAAA,KAAK,IAAK,MAAM;AAAA,MACpC;AAAA,MACC,GAAG;AAAA,MAEH,UAAY,YAAA;AAAA,IAAA;AAAA,EACf;AAEJ,CAAC;"}

package/dist/esm/Banner/BannerContent/BannerContent.styles.js

@@ -3,72 +3,44 @@ import { theme } from "@hitachivantara/uikit-styles";
 const { useClasses, staticClasses } = createClasses("HvBannerContent", {
   root: {
     minWidth: "100%",
+    width: "100%",
     position: "relative",
-    display: "flex",
-    flexWrap: "nowrap",
-    boxShadow: "none",
+    gap: theme.space.xs,
     borderRadius: theme.radii.none
   },
+  success: {},
+  warning: {},
+  error: {},
+  default: {},
   message: {
-    display: "flex",
-    alignItems: "center",
+    gap: theme.space.xs,
     padding: theme.spacing("xs", 0),
     paddingLeft: theme.space.sm,
     ...theme.typography.body,
     color: theme.colors.base_dark
   },
   action: {
-    padding: theme.spacing("xs"),
-    marginRight: 0,
+    padding: theme.space.xs,
     flex: "0 0 auto",
     placeSelf: "stretch"
   },
-  baseVariant: {
-    padding: 0
-  },
-  success: {
-    backgroundColor: theme.colors.positive_20
-  },
-  warning: {
-    backgroundColor: theme.colors.warning_20
-  },
-  error: {
-    backgroundColor: theme.colors.negative_20
-  },
-  default: {
-    backgroundColor: theme.colors.neutral_20
-  },
-  outContainer: {
-    width: "100%",
-    position: "relative"
-  },
   messageContainer: {
-    wordBreak: "break-word",
-    maxWidth: 700,
-    overflow: "hidden",
-    marginRight: 10
+    maxWidth: 700
   },
   iconContainer: {
-    marginRight: theme.space.xs,
-    marginLeft: -theme.space.xs
+    marginLeft: theme.spacing(-1)
   },
   messageActions: {
     flex: "0 0 auto"
   },
-  actionContainer: {
-    display: "flex",
-    flexDirection: "column",
-    height: "100%",
-    justifyContent: "space-between"
-  },
-  actionsInnerContainer: {
-    flexDirection: "row",
-    marginTop: "8px"
-    // avoid overlap with close button outline focus ring
-  },
-  closeAction: {
-    alignSelf: "flex-end"
-  }
+  actionContainer: {},
+  closeAction: {},
+  /** @deprecated use ´classes.root` instead */
+  baseVariant: {},
+  /** @deprecated use `classes.root` instead */
+  outContainer: {},
+  /** @deprecated use `classes.actionContainer` instead */
+  actionsInnerContainer: {}
 });
 export {
   staticClasses,

package/dist/esm/Banner/BannerContent/BannerContent.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerContent.styles.js","sources":["../../../../src/Banner/BannerContent/BannerContent.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvBannerContent\", {\n  root: {\n    minWidth: \"100%\",\n    position: \"relative\",\n    display: \"flex\",\n    flexWrap: \"nowrap\",\n    boxShadow: \"none\",\n    borderRadius: theme.radii.none,\n  },\n  message: {\n    display: \"flex\",\n    alignItems: \"center\",\n    padding: theme.spacing(\"xs\", 0),\n    paddingLeft: theme.space.sm,\n    ...theme.typography.body,\n    color: theme.colors.base_dark,\n  },\n  action: {\n    padding: theme.spacing(\"xs\"),\n    marginRight: 0,\n    flex: \"0 0 auto\",\n    placeSelf: \"stretch\",\n  },\n  baseVariant: {\n    padding: 0,\n  },\n  success: {\n    backgroundColor: theme.colors.positive_20,\n  },\n  warning: {\n    backgroundColor: theme.colors.warning_20,\n  },\n  error: {\n    backgroundColor: theme.colors.negative_20,\n  },\n  default: {\n    backgroundColor: theme.colors.neutral_20,\n  },\n  outContainer: {\n    width: \"100%\",\n    position: \"relative\",\n  },\n  messageContainer: {\n    wordBreak: \"break-word\",\n    maxWidth: 700,\n    overflow: \"hidden\",\n    marginRight: 10,\n  },\n  iconContainer: {\n    marginRight: theme.space.xs,\n    marginLeft: -theme.space.xs,\n  },\n  messageActions: {\n    flex: \"0 0 auto\",\n  },\n  actionContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    height: \"100%\",\n    justifyContent: \"space-between\",\n  },\n  actionsInnerContainer: {\n    flexDirection: \"row\",\n    marginTop: \"8px\", // avoid overlap with close button outline focus ring\n  },\n  closeAction: {\n    alignSelf: \"flex-end\",\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,YAAY,kBAAkB,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,WAAW;AAAA,IACX,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,SAAS,MAAM,QAAQ,MAAM,CAAC;AAAA,IAC9B,aAAa,MAAM,MAAM;AAAA,IACzB,GAAG,MAAM,WAAW;AAAA,IACpB,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,IACN,SAAS,MAAM,QAAQ,IAAI;AAAA,IAC3B,aAAa;AAAA,IACb,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AAAA,EACA,aAAa;AAAA,IACX,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,SAAS;AAAA,IACP,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,OAAO;AAAA,IACL,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,SAAS;AAAA,IACP,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,cAAc;AAAA,IACZ,OAAO;AAAA,IACP,UAAU;AAAA,EACZ;AAAA,EACA,kBAAkB;AAAA,IAChB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,UAAU;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EACA,eAAe;AAAA,IACb,aAAa,MAAM,MAAM;AAAA,IACzB,YAAY,CAAC,MAAM,MAAM;AAAA,EAC3B;AAAA,EACA,gBAAgB;AAAA,IACd,MAAM;AAAA,EACR;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,gBAAgB;AAAA,EAClB;AAAA,EACA,uBAAuB;AAAA,IACrB,eAAe;AAAA,IACf,WAAW;AAAA;AAAA,EACb;AAAA,EACA,aAAa;AAAA,IACX,WAAW;AAAA,EAAA;AAEf,CAAC;"}
+{"version":3,"file":"BannerContent.styles.js","sources":["../../../../src/Banner/BannerContent/BannerContent.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvBannerContent\", {\n  root: {\n    minWidth: \"100%\",\n    width: \"100%\",\n    position: \"relative\",\n    gap: theme.space.xs,\n    borderRadius: theme.radii.none,\n  },\n  success: {},\n  warning: {},\n  error: {},\n  default: {},\n  message: {\n    gap: theme.space.xs,\n    padding: theme.spacing(\"xs\", 0),\n    paddingLeft: theme.space.sm,\n    ...theme.typography.body,\n    color: theme.colors.base_dark,\n  },\n  action: {\n    padding: theme.space.xs,\n    flex: \"0 0 auto\",\n    placeSelf: \"stretch\",\n  },\n  messageContainer: {\n    maxWidth: 700,\n  },\n  iconContainer: {\n    marginLeft: theme.spacing(-1),\n  },\n  messageActions: {\n    flex: \"0 0 auto\",\n  },\n  actionContainer: {},\n  closeAction: {},\n  /** @deprecated use ´classes.root` instead */\n  baseVariant: {},\n  /** @deprecated use `classes.root` instead */\n  outContainer: {},\n  /** @deprecated use `classes.actionContainer` instead */\n  actionsInnerContainer: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,YAAY,kBAAkB,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,OAAO;AAAA,IACP,UAAU;AAAA,IACV,KAAK,MAAM,MAAM;AAAA,IACjB,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,SAAS,CAAC;AAAA,EACV,SAAS,CAAC;AAAA,EACV,OAAO,CAAC;AAAA,EACR,SAAS,CAAC;AAAA,EACV,SAAS;AAAA,IACP,KAAK,MAAM,MAAM;AAAA,IACjB,SAAS,MAAM,QAAQ,MAAM,CAAC;AAAA,IAC9B,aAAa,MAAM,MAAM;AAAA,IACzB,GAAG,MAAM,WAAW;AAAA,IACpB,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,IACN,SAAS,MAAM,MAAM;AAAA,IACrB,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AAAA,EACA,kBAAkB;AAAA,IAChB,UAAU;AAAA,EACZ;AAAA,EACA,eAAe;AAAA,IACb,YAAY,MAAM,QAAQ,EAAE;AAAA,EAC9B;AAAA,EACA,gBAAgB;AAAA,IACd,MAAM;AAAA,EACR;AAAA,EACA,iBAAiB,CAAC;AAAA,EAClB,aAAa,CAAC;AAAA;AAAA,EAEd,aAAa,CAAC;AAAA;AAAA,EAEd,cAAc,CAAC;AAAA;AAAA,EAEf,uBAAuB,CAAA;AACzB,CAAC;"}

package/dist/esm/BaseCheckBox/BaseCheckBox.js

@@ -4,7 +4,7 @@ import MuiCheckbox from "@mui/material/Checkbox";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./BaseCheckBox.styles.js";
 import { staticClasses } from "./BaseCheckBox.styles.js";
-import { Box, Partial, Check } from "./icons.js";
+import { Check, Partial, Box } from "./icons.js";
 const getSelectorIcons = () => {
   return {
     checkbox: /* @__PURE__ */ jsx(Box, {}),

package/dist/esm/BaseDropdown/BaseDropdown.js

@@ -1,5 +1,5 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, isValidElement, cloneElement, useState, useMemo, Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useCallback, useMemo, isValidElement, cloneElement, Fragment } from "react";
 import { usePopper } from "react-popper";
 import { useForkRef } from "@mui/material/utils";
 import { detectOverflow } from "@popperjs/core";
@@ -13,7 +13,7 @@ import { setId } from "../utils/setId.js";
 import { useClasses } from "./BaseDropdown.styles.js";
 import { staticClasses } from "./BaseDropdown.styles.js";
 import { BaseDropdownPanel } from "./BaseDropdownPanel.js";
-import { useBaseDropdownContext, BaseDropdownContext } from "./context.js";
+import { BaseDropdownContext, useBaseDropdownContext } from "./context.js";
 import { HvTypography } from "../Typography/Typography.js";
 const BaseDropdown = forwardRef(function BaseDropdown2(props, ref) {
   const {

package/dist/esm/BaseDropdown/BaseDropdown.styles.js

@@ -77,8 +77,7 @@ const { useClasses, staticClasses } = createClasses("HvBaseDropdown", {
     height: "30px",
     boxSizing: "border-box",
     paddingLeft: theme.space.xs,
-    paddingRight: theme.sizes.sm,
-    color: "inherit"
+    paddingRight: theme.sizes.sm
   },
   selectionDisabled: {},
   placeholder: {

package/dist/esm/BaseDropdown/BaseDropdown.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseDropdown.styles.js","sources":["../../../src/BaseDropdown/BaseDropdown.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvBaseDropdown\", {\n  root: { width: \"100%\", position: \"relative\" },\n  rootDisabled: {\n    cursor: \"not-allowed\",\n    \"&:focus\": {\n      outline: \"none\",\n    },\n  },\n  anchor: { display: \"inline-block\", width: \"100%\" },\n  container: { zIndex: theme.zIndices.popover, width: \"auto\" },\n  header: {\n    cursor: \"pointer\",\n    userSelect: \"none\",\n    position: \"relative\",\n    background: theme.colors.atmo1,\n    boxSizing: \"border-box\",\n    border: `1px solid ${theme.colors.secondary}`,\n    borderRadius: theme.radii.base,\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.primary}`,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n      border: `1px solid ${theme.colors.primary}`,\n    },\n  },\n  headerOpen: {\n    border: `1px solid ${theme.colors.secondary}`,\n\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.secondary}`,\n    },\n  },\n  headerOpenUp: {\n    borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,\n  },\n  headerOpenDown: {\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n  },\n  headerDisabled: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"none\",\n    color: theme.colors.secondary_60,\n    border: `1px solid ${theme.colors.secondary_60}`,\n    background: theme.colors.atmo2,\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.secondary_60}`,\n    },\n  },\n  headerReadOnly: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"none\",\n    color: theme.colors.secondary_80,\n    border: `1px solid ${theme.colors.secondary_60}`,\n    background: theme.colors.atmo2,\n    userSelect: \"text\",\n    \"&:focus-visible\": {\n      outline: \"none\",\n      border: `1px solid ${theme.colors.secondary_60}`,\n    },\n  },\n  arrowContainer: {\n    position: \"absolute\",\n    pointerEvents: \"none\",\n    top: -1,\n    right: -1,\n  },\n  arrow: {},\n  selection: {\n    display: \"flex\",\n    alignItems: \"center\",\n    height: \"30px\",\n    boxSizing: \"border-box\",\n    paddingLeft: theme.space.xs,\n    paddingRight: theme.sizes.sm,\n    color: \"inherit\",\n  },\n  selectionDisabled: {},\n  placeholder: {\n    display: \"block\",\n    color: theme.colors.secondary_80,\n  },\n  panel: {\n    // TODO: remove padding override in v6 (most elements need it)\n    padding: 0,\n    border: `1px solid ${theme.colors.secondary}`,\n  },\n  panelOpenedUp: {\n    top: 1,\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`,\n  },\n  panelOpenedDown: {\n    top: -1,\n    borderRadius: `0 0 ${theme.radii.base} ${theme.radii.base}`,\n  },\n  inputExtensionOpen: {\n    height: \"0px\",\n    backgroundColor: theme.colors.atmo1,\n    borderTop: \"none\",\n    borderBottom: \"none\",\n    borderRight: `1px solid ${theme.colors.secondary}`,\n    borderLeft: `1px solid ${theme.colors.secondary}`,\n  },\n  inputExtensionLeftPosition: { marginLeft: \"auto\" },\n  inputExtensionOpenShadow: {\n    boxShadow: `0px 8px 0px ${theme.colors.atmo1}, 0px 0px 9px 0px rgba(65,65,65,.12)`,\n  },\n  inputExtensionFloatRight: { float: \"right\" },\n  inputExtensionFloatLeft: { float: \"left\" },\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"BaseDropdown.styles.js","sources":["../../../src/BaseDropdown/BaseDropdown.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvBaseDropdown\", {\n  root: { width: \"100%\", position: \"relative\" },\n  rootDisabled: {\n    cursor: \"not-allowed\",\n    \"&:focus\": {\n      outline: \"none\",\n    },\n  },\n  anchor: { display: \"inline-block\", width: \"100%\" },\n  container: { zIndex: theme.zIndices.popover, width: \"auto\" },\n  header: {\n    cursor: \"pointer\",\n    userSelect: \"none\",\n    position: \"relative\",\n    background: theme.colors.atmo1,\n    boxSizing: \"border-box\",\n    border: `1px solid ${theme.colors.secondary}`,\n    borderRadius: theme.radii.base,\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.primary}`,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n      border: `1px solid ${theme.colors.primary}`,\n    },\n  },\n  headerOpen: {\n    border: `1px solid ${theme.colors.secondary}`,\n\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.secondary}`,\n    },\n  },\n  headerOpenUp: {\n    borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,\n  },\n  headerOpenDown: {\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n  },\n  headerDisabled: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"none\",\n    color: theme.colors.secondary_60,\n    border: `1px solid ${theme.colors.secondary_60}`,\n    background: theme.colors.atmo2,\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.secondary_60}`,\n    },\n  },\n  headerReadOnly: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"none\",\n    color: theme.colors.secondary_80,\n    border: `1px solid ${theme.colors.secondary_60}`,\n    background: theme.colors.atmo2,\n    userSelect: \"text\",\n    \"&:focus-visible\": {\n      outline: \"none\",\n      border: `1px solid ${theme.colors.secondary_60}`,\n    },\n  },\n  arrowContainer: {\n    position: \"absolute\",\n    pointerEvents: \"none\",\n    top: -1,\n    right: -1,\n  },\n  arrow: {},\n  selection: {\n    display: \"flex\",\n    alignItems: \"center\",\n    height: \"30px\",\n    boxSizing: \"border-box\",\n    paddingLeft: theme.space.xs,\n    paddingRight: theme.sizes.sm,\n  },\n  selectionDisabled: {},\n  placeholder: {\n    display: \"block\",\n    color: theme.colors.secondary_80,\n  },\n  panel: {\n    // TODO: remove padding override in v6 (most elements need it)\n    padding: 0,\n    border: `1px solid ${theme.colors.secondary}`,\n  },\n  panelOpenedUp: {\n    top: 1,\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`,\n  },\n  panelOpenedDown: {\n    top: -1,\n    borderRadius: `0 0 ${theme.radii.base} ${theme.radii.base}`,\n  },\n  inputExtensionOpen: {\n    height: \"0px\",\n    backgroundColor: theme.colors.atmo1,\n    borderTop: \"none\",\n    borderBottom: \"none\",\n    borderRight: `1px solid ${theme.colors.secondary}`,\n    borderLeft: `1px solid ${theme.colors.secondary}`,\n  },\n  inputExtensionLeftPosition: { marginLeft: \"auto\" },\n  inputExtensionOpenShadow: {\n    boxShadow: `0px 8px 0px ${theme.colors.atmo1}, 0px 0px 9px 0px rgba(65,65,65,.12)`,\n  },\n  inputExtensionFloatRight: { float: \"right\" },\n  inputExtensionFloatLeft: { float: \"left\" },\n});\n"],"names":[],"mappings":"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"}

package/dist/esm/BaseInput/BaseInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseInput.js","sources":["../../../src/BaseInput/BaseInput.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\nimport MuiInputBase, { type InputBaseProps } from \"@mui/material/InputBase\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n  buildAriaPropsFromContext,\n  buildFormElementPropsFromContext,\n  HvFormElementContext,\n  HvFormElementDescriptorsContext,\n} from \"../FormElement\";\nimport { staticClasses, useClasses } from \"./BaseInput.styles\";\n\nexport { staticClasses as baseInputClasses };\n\nexport type HvBaseInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseInputProps\n  extends Omit<\n    InputBaseProps,\n    \"onChange\" | \"classes\" | \"ref\" | \"color\" | \"size\"\n  > {\n  /** The input name. */\n  name?: string;\n  /** The value of the input, when controlled. */\n  value?: React.InputHTMLAttributes<HTMLInputElement>[\"value\"];\n  /** The initial value of the input, when uncontrolled. */\n  defaultValue?: React.InputHTMLAttributes<HTMLInputElement>[\"value\"];\n  /** If `true` the input is disabled. */\n  disabled?: boolean;\n  /** Indicates that the input is not editable. */\n  readOnly?: boolean;\n  /** If true, the input element will be required. */\n  required?: boolean;\n  /** The function that will be executed onChange, allows modification of the input,\n   * it receives the value. If a new value should be presented it must returned it. */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\n    value: string,\n  ) => void;\n  /** If true, a textarea element will be rendered. */\n  multiline?: boolean;\n  /** If true and multiline is also true the textarea element will be resizable. */\n  resizable?: boolean;\n  /** Denotes if the input is in an invalid state. */\n  invalid?: boolean;\n  /**\n   * Allows passing a ref to the underlying input\n   * @deprecated Use `ref` directly instead\n   * */\n  inputRef?: InputBaseProps[\"inputRef\"];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBaseInputClasses;\n}\n\n/**\n * An Input component that only posses the most basic functionalities.\n * It should be used alongside the other form elements to construct a proper accessible form.\n */\nexport const HvBaseInput = forwardRef<\n  // no-indent\n  React.ElementRef<\"input\">,\n  HvBaseInputProps\n>(function HvBaseInput(props, ref) {\n  const {\n    classes: classesProp,\n    className = \"\",\n    id,\n    name,\n    value,\n    defaultValue,\n    required,\n    readOnly,\n    disabled,\n    onChange,\n    type = \"text\",\n    placeholder,\n    multiline,\n    resizable,\n    invalid: invalidProp,\n    inputRef,\n    inputProps = {},\n    ...others\n  } = useDefaultProps(\"HvBaseInput\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const formElementContext = useContext(HvFormElementContext);\n  const formElementProps = buildFormElementPropsFromContext(\n    name,\n    disabled,\n    readOnly,\n    required,\n    formElementContext,\n  );\n\n  const forkedRef = useForkRef(ref, inputRef);\n\n  const invalid = invalidProp || formElementProps.status === \"invalid\";\n\n  const formElementDescriptorsContext = useContext(\n    HvFormElementDescriptorsContext,\n  );\n  const ariaProps = buildAriaPropsFromContext(\n    inputProps,\n    formElementDescriptorsContext,\n    invalid,\n    id,\n  );\n\n  return (\n    <MuiInputBase\n      id={id}\n      name={formElementProps.name}\n      value={value}\n      defaultValue={defaultValue}\n      placeholder={placeholder}\n      readOnly={!!formElementProps.readOnly}\n      disabled={formElementProps.disabled}\n      onChange={(event) => onChange?.(event, event.target.value)}\n      className={cx(classes.root, classes.inputRoot, className, {\n        [classes.inputRootMultiline]: multiline,\n        [classes.multiline]: multiline,\n        [classes.inputRootInvalid]: invalid,\n        [classes.invalid]: invalid,\n        [classes.inputRootReadOnly]: formElementProps.readOnly,\n        [classes.readOnly]: formElementProps.readOnly,\n        [classes.inputRootDisabled]: formElementProps.disabled,\n        [classes.disabled]: formElementProps.disabled,\n      })}\n      classes={{\n        focused: cx(classes.focused, classes.inputRootFocused),\n        input: cx(classes.input, {\n          [classes.inputResizable]: !formElementProps.disabled && resizable,\n          [classes.inputDisabled]: formElementProps.disabled,\n          [classes.inputReadOnly]: formElementProps.readOnly,\n        }),\n      }}\n      inputProps={{\n        // Avoid the required attribute at the root node\n        required: formElementProps.required,\n        ...inputProps,\n        ...ariaProps,\n      }}\n      inputRef={forkedRef}\n      multiline={multiline}\n      {...(multiline ? { rows: 10 } : { type })}\n      {...others}\n    />\n  );\n});\n"],"names":["HvBaseInput"],"mappings":";;;;;;;;;AA8DO,MAAM,cAAc,WAIzB,SAASA,aAAY,OAAO,KAAK;AAC3B,QAAA;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,aAAa,CAAC;AAAA,IACd,GAAG;AAAA,EAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AACxC,QAAA,qBAAqB,WAAW,oBAAoB;AAC1D,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEM,QAAA,YAAY,WAAW,KAAK,QAAQ;AAEpC,QAAA,UAAU,eAAe,iBAAiB,WAAW;AAE3D,QAAM,gCAAgC;AAAA,IACpC;AAAA,EACF;AACA,QAAM,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAM,iBAAiB;AAAA,MACvB;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,CAAC,CAAC,iBAAiB;AAAA,MAC7B,UAAU,iBAAiB;AAAA,MAC3B,UAAU,CAAC,UAAU,WAAW,OAAO,MAAM,OAAO,KAAK;AAAA,MACzD,WAAW,GAAG,QAAQ,MAAM,QAAQ,WAAW,WAAW;AAAA,QACxD,CAAC,QAAQ,kBAAkB,GAAG;AAAA,QAC9B,CAAC,QAAQ,SAAS,GAAG;AAAA,QACrB,CAAC,QAAQ,gBAAgB,GAAG;AAAA,QAC5B,CAAC,QAAQ,OAAO,GAAG;AAAA,QACnB,CAAC,QAAQ,iBAAiB,GAAG,iBAAiB;AAAA,QAC9C,CAAC,QAAQ,QAAQ,GAAG,iBAAiB;AAAA,QACrC,CAAC,QAAQ,iBAAiB,GAAG,iBAAiB;AAAA,QAC9C,CAAC,QAAQ,QAAQ,GAAG,iBAAiB;AAAA,MAAA,CACtC;AAAA,MACD,SAAS;AAAA,QACP,SAAS,GAAG,QAAQ,SAAS,QAAQ,gBAAgB;AAAA,QACrD,OAAO,GAAG,QAAQ,OAAO;AAAA,UACvB,CAAC,QAAQ,cAAc,GAAG,CAAC,iBAAiB,YAAY;AAAA,UACxD,CAAC,QAAQ,aAAa,GAAG,iBAAiB;AAAA,UAC1C,CAAC,QAAQ,aAAa,GAAG,iBAAiB;AAAA,QAC3C,CAAA;AAAA,MACH;AAAA,MACA,YAAY;AAAA;AAAA,QAEV,UAAU,iBAAiB;AAAA,QAC3B,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACC,GAAI,YAAY,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK;AAAA,MACtC,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ,CAAC;"}
+{"version":3,"file":"BaseInput.js","sources":["../../../src/BaseInput/BaseInput.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\nimport MuiInputBase, { type InputBaseProps } from \"@mui/material/InputBase\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n  buildAriaPropsFromContext,\n  buildFormElementPropsFromContext,\n  HvFormElementContext,\n  HvFormElementDescriptorsContext,\n} from \"../FormElement\";\nimport { staticClasses, useClasses } from \"./BaseInput.styles\";\n\nexport { staticClasses as baseInputClasses };\n\nexport type HvBaseInputClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseInputProps\n  extends Omit<\n    InputBaseProps,\n    \"onChange\" | \"classes\" | \"ref\" | \"color\" | \"size\"\n  > {\n  /** The input name. */\n  name?: string;\n  /** The value of the input, when controlled. */\n  value?: React.InputHTMLAttributes<HTMLInputElement>[\"value\"];\n  /** The initial value of the input, when uncontrolled. */\n  defaultValue?: React.InputHTMLAttributes<HTMLInputElement>[\"value\"];\n  /** If `true` the input is disabled. */\n  disabled?: boolean;\n  /** Indicates that the input is not editable. */\n  readOnly?: boolean;\n  /** If true, the input element will be required. */\n  required?: boolean;\n  /**\n   * Callback fired when the value is changed.\n   *\n   * You can pull out the new value by accessing `event.target.value` (string),\n   * or using the second callback argument.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\n    value: string,\n  ) => void;\n  /** If true, a textarea element will be rendered. */\n  multiline?: boolean;\n  /** If true and multiline is also true the textarea element will be resizable. */\n  resizable?: boolean;\n  /** Denotes if the input is in an invalid state. */\n  invalid?: boolean;\n  /**\n   * Allows passing a ref to the underlying input\n   * @deprecated Use `ref` directly instead\n   * */\n  inputRef?: InputBaseProps[\"inputRef\"];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBaseInputClasses;\n}\n\n/**\n * An Input component that only posses the most basic functionalities.\n * It should be used alongside the other form elements to construct a proper accessible form.\n */\nexport const HvBaseInput = forwardRef<\n  // no-indent\n  React.ElementRef<\"input\">,\n  HvBaseInputProps\n>(function HvBaseInput(props, ref) {\n  const {\n    classes: classesProp,\n    className = \"\",\n    id,\n    name,\n    value,\n    defaultValue,\n    required,\n    readOnly,\n    disabled,\n    onChange,\n    type = \"text\",\n    placeholder,\n    multiline,\n    resizable,\n    invalid: invalidProp,\n    inputRef,\n    inputProps = {},\n    ...others\n  } = useDefaultProps(\"HvBaseInput\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const formElementContext = useContext(HvFormElementContext);\n  const formElementProps = buildFormElementPropsFromContext(\n    name,\n    disabled,\n    readOnly,\n    required,\n    formElementContext,\n  );\n\n  const forkedRef = useForkRef(ref, inputRef);\n\n  const invalid = invalidProp || formElementProps.status === \"invalid\";\n\n  const formElementDescriptorsContext = useContext(\n    HvFormElementDescriptorsContext,\n  );\n  const ariaProps = buildAriaPropsFromContext(\n    inputProps,\n    formElementDescriptorsContext,\n    invalid,\n    id,\n  );\n\n  return (\n    <MuiInputBase\n      id={id}\n      name={formElementProps.name}\n      value={value}\n      defaultValue={defaultValue}\n      placeholder={placeholder}\n      readOnly={!!formElementProps.readOnly}\n      disabled={formElementProps.disabled}\n      onChange={(event) => onChange?.(event, event.target.value)}\n      className={cx(classes.root, classes.inputRoot, className, {\n        [classes.inputRootMultiline]: multiline,\n        [classes.multiline]: multiline,\n        [classes.inputRootInvalid]: invalid,\n        [classes.invalid]: invalid,\n        [classes.inputRootReadOnly]: formElementProps.readOnly,\n        [classes.readOnly]: formElementProps.readOnly,\n        [classes.inputRootDisabled]: formElementProps.disabled,\n        [classes.disabled]: formElementProps.disabled,\n      })}\n      classes={{\n        focused: cx(classes.focused, classes.inputRootFocused),\n        input: cx(classes.input, {\n          [classes.inputResizable]: !formElementProps.disabled && resizable,\n          [classes.inputDisabled]: formElementProps.disabled,\n          [classes.inputReadOnly]: formElementProps.readOnly,\n        }),\n      }}\n      inputProps={{\n        // Avoid the required attribute at the root node\n        required: formElementProps.required,\n        ...inputProps,\n        ...ariaProps,\n      }}\n      inputRef={forkedRef}\n      multiline={multiline}\n      {...(multiline ? { rows: 10 } : { type })}\n      {...others}\n    />\n  );\n});\n"],"names":["HvBaseInput"],"mappings":";;;;;;;;;AAkEO,MAAM,cAAc,WAIzB,SAASA,aAAY,OAAO,KAAK;AAC3B,QAAA;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,aAAa,CAAC;AAAA,IACd,GAAG;AAAA,EAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AACxC,QAAA,qBAAqB,WAAW,oBAAoB;AAC1D,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEM,QAAA,YAAY,WAAW,KAAK,QAAQ;AAEpC,QAAA,UAAU,eAAe,iBAAiB,WAAW;AAE3D,QAAM,gCAAgC;AAAA,IACpC;AAAA,EACF;AACA,QAAM,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAM,iBAAiB;AAAA,MACvB;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,CAAC,CAAC,iBAAiB;AAAA,MAC7B,UAAU,iBAAiB;AAAA,MAC3B,UAAU,CAAC,UAAU,WAAW,OAAO,MAAM,OAAO,KAAK;AAAA,MACzD,WAAW,GAAG,QAAQ,MAAM,QAAQ,WAAW,WAAW;AAAA,QACxD,CAAC,QAAQ,kBAAkB,GAAG;AAAA,QAC9B,CAAC,QAAQ,SAAS,GAAG;AAAA,QACrB,CAAC,QAAQ,gBAAgB,GAAG;AAAA,QAC5B,CAAC,QAAQ,OAAO,GAAG;AAAA,QACnB,CAAC,QAAQ,iBAAiB,GAAG,iBAAiB;AAAA,QAC9C,CAAC,QAAQ,QAAQ,GAAG,iBAAiB;AAAA,QACrC,CAAC,QAAQ,iBAAiB,GAAG,iBAAiB;AAAA,QAC9C,CAAC,QAAQ,QAAQ,GAAG,iBAAiB;AAAA,MAAA,CACtC;AAAA,MACD,SAAS;AAAA,QACP,SAAS,GAAG,QAAQ,SAAS,QAAQ,gBAAgB;AAAA,QACrD,OAAO,GAAG,QAAQ,OAAO;AAAA,UACvB,CAAC,QAAQ,cAAc,GAAG,CAAC,iBAAiB,YAAY;AAAA,UACxD,CAAC,QAAQ,aAAa,GAAG,iBAAiB;AAAA,UAC1C,CAAC,QAAQ,aAAa,GAAG,iBAAiB;AAAA,QAC3C,CAAA;AAAA,MACH;AAAA,MACA,YAAY;AAAA;AAAA,QAEV,UAAU,iBAAiB;AAAA,QAC3B,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACC,GAAI,YAAY,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK;AAAA,MACtC,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ,CAAC;"}

package/dist/esm/BaseInput/BaseInput.styles.js

@@ -94,7 +94,7 @@ const { staticClasses, useClasses } = createClasses("HvBaseInput", {
     height: "100%",
     marginLeft: theme.space.xs,
     marginRight: theme.space.xs,
-    padding: theme.spacing("5px", 0),
+    padding: 0,
     backgroundColor: "transparent",
     overflow: "hidden",
     textOverflow: "ellipsis",

package/dist/esm/BaseInput/BaseInput.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseInput.styles.js","sources":["../../../src/BaseInput/BaseInput.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseInput\", {\n  root: {\n    // #region `input` style reset\n    \"input:-webkit-autofill\": {\n      WebkitBoxShadow: `0 0 0px 1000px ${theme.colors.atmo1} inset`,\n      WebkitTextFillColor: theme.colors.secondary,\n    },\n\n    // Clears number input up/down arrows in Chrome and Firefox\n    \"input[type=number]\": {\n      MozAppearance: \"textfield\",\n      \"&::-webkit-outer-spin-button,&::-webkit-inner-spin-button\": {\n        WebkitAppearance: \"none\",\n        margin: 0,\n      },\n    },\n\n    // Clears time input clock in Chrome\n    \"input::-webkit-calendar-picker-indicator\": {\n      display: \"none\",\n    },\n\n    // Clears search input clear button in Chrome\n    \"input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration\":\n      {\n        display: \"none\",\n      },\n    // #endregion\n\n    display: \"inline-flex\",\n    width: \"100%\",\n    position: \"relative\",\n    margin: 0,\n    borderRadius: theme.radii.base,\n    height: \"32px\",\n    borderWidth: 1,\n    borderColor: theme.colors.secondary,\n    boxSizing: \"border-box\",\n    backgroundColor: theme.colors.atmo1,\n    fontFamily: theme.fontFamily.body,\n\n    \":hover:not($disabled,$invalid,$readOnly)\": {\n      borderColor: theme.colors.primary,\n    },\n    \":focus-within:not($disabled)\": {\n      ...outlineStyles,\n    },\n  },\n  disabled: {\n    backgroundColor: theme.colors.atmo2,\n    borderColor: theme.colors.secondary_60,\n\n    cursor: \"not-allowed\",\n\n    \"&&::before\": {\n      borderBottomStyle: \"none\",\n    },\n  },\n  invalid: {\n    borderColor: theme.colors.negative_120,\n  },\n  multiline: {\n    padding: 0,\n    overflow: \"auto\",\n    height: \"auto\",\n\n    \"& $input\": {\n      borderRadius: theme.radii.base,\n      height: \"auto\",\n      minHeight: \"21px\",\n      padding: \"5px 10px\",\n      overflow: \"auto\",\n      margin: 0,\n    },\n  },\n  resizable: { width: \"auto\" },\n  readOnly: {\n    borderColor: theme.colors.secondary_60,\n    backgroundColor: theme.colors.atmo2,\n  },\n  focused: {},\n  /** @deprecated unused. use `::after` instead */\n  inputBorderContainer: {},\n  /** @deprecated use `classes.invalid` instead */\n  inputRootInvalid: { borderColor: theme.colors.negative_120 },\n  /** @deprecated use `classes.readOnly` instead */\n  inputRootReadOnly: {\n    borderColor: theme.colors.secondary_60,\n    backgroundColor: theme.colors.atmo2,\n  },\n  /** @deprecated use `classes.root` instead */\n  inputRoot: {},\n  /** @deprecated unused */\n  inputRootFocused: {},\n  /** @deprecated use `classes.disabled` instead */\n  inputRootDisabled: {},\n  /** @deprecated use `classes.multiline` instead */\n  inputRootMultiline: {},\n  input: {\n    height: \"100%\",\n    marginLeft: theme.space.xs,\n    marginRight: theme.space.xs,\n    padding: theme.spacing(\"5px\", 0),\n    backgroundColor: \"transparent\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    outline: \"none\",\n    width: \"initial\",\n    flexGrow: 1,\n    ...theme.typography.body,\n\n    \"&::placeholder\": {\n      opacity: 1,\n      color: theme.colors.secondary_80,\n    },\n  },\n  inputDisabled: {\n    color: theme.colors.secondary_60,\n    WebkitTextFillColor: theme.colors.secondary_60,\n  },\n  inputReadOnly: {\n    color: theme.colors.secondary_80,\n  },\n  inputResizable: {\n    resize: \"both\",\n    width: \"100%\",\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA;AAAA,IAEJ,0BAA0B;AAAA,MACxB,iBAAiB,kBAAkB,MAAM,OAAO,KAAK;AAAA,MACrD,qBAAqB,MAAM,OAAO;AAAA,IACpC;AAAA;AAAA,IAGA,sBAAsB;AAAA,MACpB,eAAe;AAAA,MACf,6DAA6D;AAAA,QAC3D,kBAAkB;AAAA,QAClB,QAAQ;AAAA,MAAA;AAAA,IAEZ;AAAA;AAAA,IAGA,4CAA4C;AAAA,MAC1C,SAAS;AAAA,IACX;AAAA;AAAA,IAGA,0MACE;AAAA,MACE,SAAS;AAAA,IACX;AAAA;AAAA,IAGF,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,aAAa,MAAM,OAAO;AAAA,IAC1B,WAAW;AAAA,IACX,iBAAiB,MAAM,OAAO;AAAA,IAC9B,YAAY,MAAM,WAAW;AAAA,IAE7B,4CAA4C;AAAA,MAC1C,aAAa,MAAM,OAAO;AAAA,IAC5B;AAAA,IACA,gCAAgC;AAAA,MAC9B,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,aAAa,MAAM,OAAO;AAAA,IAE1B,QAAQ;AAAA,IAER,cAAc;AAAA,MACZ,mBAAmB;AAAA,IAAA;AAAA,EAEvB;AAAA,EACA,SAAS;AAAA,IACP,aAAa,MAAM,OAAO;AAAA,EAC5B;AAAA,EACA,WAAW;AAAA,IACT,SAAS;AAAA,IACT,UAAU;AAAA,IACV,QAAQ;AAAA,IAER,YAAY;AAAA,MACV,cAAc,MAAM,MAAM;AAAA,MAC1B,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,WAAW,EAAE,OAAO,OAAO;AAAA,EAC3B,UAAU;AAAA,IACR,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,SAAS,CAAC;AAAA;AAAA,EAEV,sBAAsB,CAAC;AAAA;AAAA,EAEvB,kBAAkB,EAAE,aAAa,MAAM,OAAO,aAAa;AAAA;AAAA,EAE3D,mBAAmB;AAAA,IACjB,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA;AAAA,EAEA,WAAW,CAAC;AAAA;AAAA,EAEZ,kBAAkB,CAAC;AAAA;AAAA,EAEnB,mBAAmB,CAAC;AAAA;AAAA,EAEpB,oBAAoB,CAAC;AAAA,EACrB,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,YAAY,MAAM,MAAM;AAAA,IACxB,aAAa,MAAM,MAAM;AAAA,IACzB,SAAS,MAAM,QAAQ,OAAO,CAAC;AAAA,IAC/B,iBAAiB;AAAA,IACjB,UAAU;AAAA,IACV,cAAc;AAAA,IACd,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,GAAG,MAAM,WAAW;AAAA,IAEpB,kBAAkB;AAAA,MAChB,SAAS;AAAA,MACT,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,EAExB;AAAA,EACA,eAAe;AAAA,IACb,OAAO,MAAM,OAAO;AAAA,IACpB,qBAAqB,MAAM,OAAO;AAAA,EACpC;AAAA,EACA,eAAe;AAAA,IACb,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,gBAAgB;AAAA,IACd,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAEX,CAAC;"}
+{"version":3,"file":"BaseInput.styles.js","sources":["../../../src/BaseInput/BaseInput.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseInput\", {\n  root: {\n    // #region `input` style reset\n    \"input:-webkit-autofill\": {\n      WebkitBoxShadow: `0 0 0px 1000px ${theme.colors.atmo1} inset`,\n      WebkitTextFillColor: theme.colors.secondary,\n    },\n\n    // Clears number input up/down arrows in Chrome and Firefox\n    \"input[type=number]\": {\n      MozAppearance: \"textfield\",\n      \"&::-webkit-outer-spin-button,&::-webkit-inner-spin-button\": {\n        WebkitAppearance: \"none\",\n        margin: 0,\n      },\n    },\n\n    // Clears time input clock in Chrome\n    \"input::-webkit-calendar-picker-indicator\": {\n      display: \"none\",\n    },\n\n    // Clears search input clear button in Chrome\n    \"input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration\":\n      {\n        display: \"none\",\n      },\n    // #endregion\n\n    display: \"inline-flex\",\n    width: \"100%\",\n    position: \"relative\",\n    margin: 0,\n    borderRadius: theme.radii.base,\n    height: \"32px\",\n    borderWidth: 1,\n    borderColor: theme.colors.secondary,\n    boxSizing: \"border-box\",\n    backgroundColor: theme.colors.atmo1,\n    fontFamily: theme.fontFamily.body,\n\n    \":hover:not($disabled,$invalid,$readOnly)\": {\n      borderColor: theme.colors.primary,\n    },\n    \":focus-within:not($disabled)\": {\n      ...outlineStyles,\n    },\n  },\n  disabled: {\n    backgroundColor: theme.colors.atmo2,\n    borderColor: theme.colors.secondary_60,\n\n    cursor: \"not-allowed\",\n\n    \"&&::before\": {\n      borderBottomStyle: \"none\",\n    },\n  },\n  invalid: {\n    borderColor: theme.colors.negative_120,\n  },\n  multiline: {\n    padding: 0,\n    overflow: \"auto\",\n    height: \"auto\",\n\n    \"& $input\": {\n      borderRadius: theme.radii.base,\n      height: \"auto\",\n      minHeight: \"21px\",\n      padding: \"5px 10px\",\n      overflow: \"auto\",\n      margin: 0,\n    },\n  },\n  resizable: { width: \"auto\" },\n  readOnly: {\n    borderColor: theme.colors.secondary_60,\n    backgroundColor: theme.colors.atmo2,\n  },\n  focused: {},\n  /** @deprecated unused. use `::after` instead */\n  inputBorderContainer: {},\n  /** @deprecated use `classes.invalid` instead */\n  inputRootInvalid: { borderColor: theme.colors.negative_120 },\n  /** @deprecated use `classes.readOnly` instead */\n  inputRootReadOnly: {\n    borderColor: theme.colors.secondary_60,\n    backgroundColor: theme.colors.atmo2,\n  },\n  /** @deprecated use `classes.root` instead */\n  inputRoot: {},\n  /** @deprecated unused */\n  inputRootFocused: {},\n  /** @deprecated use `classes.disabled` instead */\n  inputRootDisabled: {},\n  /** @deprecated use `classes.multiline` instead */\n  inputRootMultiline: {},\n  input: {\n    height: \"100%\",\n    marginLeft: theme.space.xs,\n    marginRight: theme.space.xs,\n    padding: 0,\n    backgroundColor: \"transparent\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    outline: \"none\",\n    width: \"initial\",\n    flexGrow: 1,\n    ...theme.typography.body,\n\n    \"&::placeholder\": {\n      opacity: 1,\n      color: theme.colors.secondary_80,\n    },\n  },\n  inputDisabled: {\n    color: theme.colors.secondary_60,\n    WebkitTextFillColor: theme.colors.secondary_60,\n  },\n  inputReadOnly: {\n    color: theme.colors.secondary_80,\n  },\n  inputResizable: {\n    resize: \"both\",\n    width: \"100%\",\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA;AAAA,IAEJ,0BAA0B;AAAA,MACxB,iBAAiB,kBAAkB,MAAM,OAAO,KAAK;AAAA,MACrD,qBAAqB,MAAM,OAAO;AAAA,IACpC;AAAA;AAAA,IAGA,sBAAsB;AAAA,MACpB,eAAe;AAAA,MACf,6DAA6D;AAAA,QAC3D,kBAAkB;AAAA,QAClB,QAAQ;AAAA,MAAA;AAAA,IAEZ;AAAA;AAAA,IAGA,4CAA4C;AAAA,MAC1C,SAAS;AAAA,IACX;AAAA;AAAA,IAGA,0MACE;AAAA,MACE,SAAS;AAAA,IACX;AAAA;AAAA,IAGF,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,aAAa,MAAM,OAAO;AAAA,IAC1B,WAAW;AAAA,IACX,iBAAiB,MAAM,OAAO;AAAA,IAC9B,YAAY,MAAM,WAAW;AAAA,IAE7B,4CAA4C;AAAA,MAC1C,aAAa,MAAM,OAAO;AAAA,IAC5B;AAAA,IACA,gCAAgC;AAAA,MAC9B,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,aAAa,MAAM,OAAO;AAAA,IAE1B,QAAQ;AAAA,IAER,cAAc;AAAA,MACZ,mBAAmB;AAAA,IAAA;AAAA,EAEvB;AAAA,EACA,SAAS;AAAA,IACP,aAAa,MAAM,OAAO;AAAA,EAC5B;AAAA,EACA,WAAW;AAAA,IACT,SAAS;AAAA,IACT,UAAU;AAAA,IACV,QAAQ;AAAA,IAER,YAAY;AAAA,MACV,cAAc,MAAM,MAAM;AAAA,MAC1B,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,WAAW,EAAE,OAAO,OAAO;AAAA,EAC3B,UAAU;AAAA,IACR,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,SAAS,CAAC;AAAA;AAAA,EAEV,sBAAsB,CAAC;AAAA;AAAA,EAEvB,kBAAkB,EAAE,aAAa,MAAM,OAAO,aAAa;AAAA;AAAA,EAE3D,mBAAmB;AAAA,IACjB,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA;AAAA,EAEA,WAAW,CAAC;AAAA;AAAA,EAEZ,kBAAkB,CAAC;AAAA;AAAA,EAEnB,mBAAmB,CAAC;AAAA;AAAA,EAEpB,oBAAoB,CAAC;AAAA,EACrB,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,YAAY,MAAM,MAAM;AAAA,IACxB,aAAa,MAAM,MAAM;AAAA,IACzB,SAAS;AAAA,IACT,iBAAiB;AAAA,IACjB,UAAU;AAAA,IACV,cAAc;AAAA,IACd,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,GAAG,MAAM,WAAW;AAAA,IAEpB,kBAAkB;AAAA,MAChB,SAAS;AAAA,MACT,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,EAExB;AAAA,EACA,eAAe;AAAA,IACb,OAAO,MAAM,OAAO;AAAA,IACpB,qBAAqB,MAAM,OAAO;AAAA,EACpC;AAAA,EACA,eAAe;AAAA,IACb,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,gBAAgB;AAAA,IACd,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAEX,CAAC;"}

package/dist/esm/BaseInput/validations.js

@@ -47,7 +47,7 @@ const computeValidationMessage = (inputValidity, errorMessages) => {
   }
   return errorMessages.error;
 };
-const validateInput = (input, value, required, minCharQuantity, maxCharQuantity, validationType, validation) => {
+const validateInput = (input, required, minCharQuantity, maxCharQuantity, validationType, validation) => {
   const inputValidity = {
     valid: input?.validity?.valid ?? true,
     badInput: input?.validity?.badInput,
@@ -61,6 +61,7 @@ const validateInput = (input, value, required, minCharQuantity, maxCharQuantity,
     typeMismatch: input?.validity?.typeMismatch,
     valueMissing: input?.validity?.valueMissing
   };
+  const value = input?.value;
   if (!value) {
     if (required) {
       inputValidity.valueMissing = true;

package/dist/esm/BaseInput/validations.js.map

@@ -1 +1 @@
-{"version":3,"file":"validations.js","sources":["../../../src/BaseInput/validations.ts"],"sourcesContent":["import { InputBaseComponentProps } from \"@mui/material/InputBase\";\n\nimport { validationStates } from \"../FormElement\";\n\n/** Checks if the value is a number. */\nconst isNumeric = (num: string) =>\n  // to prevent Number( <spaces> ) = 0\n  num.trim().length > 0 && !Number.isNaN(Number(num));\n\n/** Checks if the value is an email */\nconst isEmail = (email: string) => {\n  const regexp =\n    /^[^\\\\s]+[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?[.])+[a-z0-9](?:[a-z0-9-]*[a-z0-9])$/i;\n  return regexp.test(email);\n};\n\nexport const validationTypes = Object.freeze({\n  none: \"none\",\n  number: \"number\",\n  email: \"email\",\n});\n\n/** Returns the input's validation type based in the type of the input. */\nexport const computeValidationType = (type: React.HTMLInputTypeAttribute) => {\n  switch (type) {\n    case \"number\":\n      return validationTypes.number;\n    case \"email\":\n      return validationTypes.email;\n\n    default:\n      return validationTypes.none;\n  }\n};\n\n/**\n * Checks whether any integrated validation, native or not, is active.\n */\nexport const hasBuiltInValidations = (\n  required: boolean | undefined,\n  validationType: React.HTMLInputTypeAttribute,\n  minCharQuantity: number | null | undefined,\n  maxCharQuantity: number | null | undefined,\n  validation?: (value: string) => boolean,\n  inputProps?: InputBaseComponentProps,\n) =>\n  required ||\n  validationType !== validationTypes.none ||\n  minCharQuantity != null ||\n  maxCharQuantity != null ||\n  validation != null ||\n  inputProps?.required != null ||\n  inputProps?.minLength != null ||\n  inputProps?.maxLength != null ||\n  inputProps?.min != null ||\n  inputProps?.max != null ||\n  (inputProps?.type != null &&\n    inputProps?.type !== \"text\" &&\n    inputProps?.type !== \"password\") ||\n  inputProps?.pattern != null;\n\n/** Returns the form element's validation state based in the validity state of the input. */\nexport const computeValidationState = (\n  inputValidity: HvInputValidity,\n  isEmptyValue: boolean,\n) => {\n  // to keep 2.x behaviour,\n  // consider that if the value is empty (and not required) we're returning to the standBy state.\n  // might not make sense, as it makes impossible to say if the user explicitly cleared the input.\n  if (inputValidity.valid && isEmptyValue) {\n    return validationStates.standBy;\n  }\n\n  return inputValidity.valid\n    ? validationStates.valid\n    : validationStates.invalid;\n};\n\n/**\n * Returns a error message based in the validity state of the input.\n *\n * Only one error message is returned even if multiple validations fail.\n * Also, only required, minCharQuantity, maxCharQuantity and validationType have specific error messages.\n *\n * For further customization both status and statusMessage should be controlled and\n * set using the onBlur callback that receives both the value and the input validity object.\n */\nexport const computeValidationMessage = (\n  inputValidity: HvInputValidity,\n  /** The available localized error messages. */\n  errorMessages: Record<string, string>,\n) => {\n  if (inputValidity.valid) {\n    return \"\";\n  }\n\n  if (inputValidity.valueMissing) {\n    return errorMessages.requiredError;\n  }\n  if (inputValidity.tooLong) {\n    return errorMessages.maxCharError;\n  }\n  if (inputValidity.tooShort) {\n    return errorMessages.minCharError;\n  }\n  if (inputValidity.typeMismatch) {\n    return errorMessages.typeMismatchError;\n  }\n\n  return errorMessages.error;\n};\n\n/**\n * Returns a object describing the validity state of the input.\n *\n * It implements the native browser's ValidityState interface:\n * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n */\nexport const validateInput = (\n  input: HTMLInputElement | HTMLTextAreaElement | null,\n  value: string,\n  required: boolean | undefined,\n  minCharQuantity: any,\n  maxCharQuantity: any,\n  validationType: string,\n  validation?: (value: string) => boolean,\n): HvInputValidity => {\n  // bootstrap validity object using browser's built-in validation\n  const inputValidity: HvInputValidity = {\n    valid: input?.validity?.valid ?? true,\n    badInput: input?.validity?.badInput,\n    customError: input?.validity?.customError,\n    patternMismatch: input?.validity?.patternMismatch,\n    rangeOverflow: input?.validity?.rangeOverflow,\n    rangeUnderflow: input?.validity?.rangeUnderflow,\n    stepMismatch: input?.validity?.stepMismatch,\n    tooLong: input?.validity?.tooLong,\n    tooShort: input?.validity?.tooShort,\n    typeMismatch: input?.validity?.typeMismatch,\n    valueMissing: input?.validity?.valueMissing,\n  };\n\n  if (!value) {\n    if (required) {\n      // this is redundant because we're setting the required property in the native input\n      inputValidity.valueMissing = true;\n      inputValidity.valid = false;\n    }\n  } else {\n    // we're not setting minlength and maxlength in the native input\n    // to avoid different browser's behaviours and keep the user experience consistent\n    if (minCharQuantity !== null && value.length < minCharQuantity) {\n      inputValidity.tooShort = true;\n      inputValidity.valid = false;\n    }\n\n    if (maxCharQuantity !== null && value.length > maxCharQuantity) {\n      inputValidity.tooLong = true;\n      inputValidity.valid = false;\n    }\n\n    // the validationType is used instead of type\n    // for the same reason stated above\n    switch (validationType) {\n      case validationTypes.number:\n        if (!isNumeric(value)) {\n          inputValidity.typeMismatch = true;\n          inputValidity.valid = false;\n        }\n        break;\n\n      case validationTypes.email:\n        if (!isEmail(value)) {\n          inputValidity.typeMismatch = true;\n          inputValidity.valid = false;\n        }\n        break;\n\n      default:\n    }\n\n    if (validation != null && !validation(value)) {\n      inputValidity.customError = true;\n      inputValidity.valid = false;\n    }\n  }\n\n  return inputValidity;\n};\n\ntype Mutable<T> = { -readonly [P in keyof T]: T[P] };\n\nexport interface HvInputValidity extends Partial<Mutable<ValidityState>> {}\n\nexport const DEFAULT_ERROR_MESSAGES = {\n  error: \"Invalid value\",\n  requiredError: \"The value is required\",\n  minCharError: \"The value is too short\",\n  maxCharError: \"The value is too long\",\n  typeMismatchError: \"Invalid value\",\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"validations.js","sources":["../../../src/BaseInput/validations.ts"],"sourcesContent":["import { InputBaseComponentProps } from \"@mui/material/InputBase\";\n\nimport { validationStates } from \"../FormElement\";\n\n/** Checks if the value is a number. */\nconst isNumeric = (num: string) =>\n  // to prevent Number( <spaces> ) = 0\n  num.trim().length > 0 && !Number.isNaN(Number(num));\n\n/** Checks if the value is an email */\nconst isEmail = (email: string) => {\n  const regexp =\n    /^[^\\\\s]+[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?[.])+[a-z0-9](?:[a-z0-9-]*[a-z0-9])$/i;\n  return regexp.test(email);\n};\n\nexport const validationTypes = Object.freeze({\n  none: \"none\",\n  number: \"number\",\n  email: \"email\",\n});\n\n/** Returns the input's validation type based in the type of the input. */\nexport const computeValidationType = (type: React.HTMLInputTypeAttribute) => {\n  switch (type) {\n    case \"number\":\n      return validationTypes.number;\n    case \"email\":\n      return validationTypes.email;\n\n    default:\n      return validationTypes.none;\n  }\n};\n\n/**\n * Checks whether any integrated validation, native or not, is active.\n */\nexport const hasBuiltInValidations = (\n  required: boolean | undefined,\n  validationType: React.HTMLInputTypeAttribute,\n  minCharQuantity: number | null | undefined,\n  maxCharQuantity: number | null | undefined,\n  validation?: (value: string) => boolean,\n  inputProps?: InputBaseComponentProps,\n) =>\n  required ||\n  validationType !== validationTypes.none ||\n  minCharQuantity != null ||\n  maxCharQuantity != null ||\n  validation != null ||\n  inputProps?.required != null ||\n  inputProps?.minLength != null ||\n  inputProps?.maxLength != null ||\n  inputProps?.min != null ||\n  inputProps?.max != null ||\n  (inputProps?.type != null &&\n    inputProps?.type !== \"text\" &&\n    inputProps?.type !== \"password\") ||\n  inputProps?.pattern != null;\n\n/** Returns the form element's validation state based in the validity state of the input. */\nexport const computeValidationState = (\n  inputValidity: HvInputValidity,\n  isEmptyValue: boolean,\n) => {\n  // to keep 2.x behaviour,\n  // consider that if the value is empty (and not required) we're returning to the standBy state.\n  // might not make sense, as it makes impossible to say if the user explicitly cleared the input.\n  if (inputValidity.valid && isEmptyValue) {\n    return validationStates.standBy;\n  }\n\n  return inputValidity.valid\n    ? validationStates.valid\n    : validationStates.invalid;\n};\n\n/**\n * Returns a error message based in the validity state of the input.\n *\n * Only one error message is returned even if multiple validations fail.\n * Also, only required, minCharQuantity, maxCharQuantity and validationType have specific error messages.\n *\n * For further customization both status and statusMessage should be controlled and\n * set using the onBlur callback that receives both the value and the input validity object.\n */\nexport const computeValidationMessage = (\n  inputValidity: HvInputValidity,\n  /** The available localized error messages. */\n  errorMessages: Record<string, string>,\n) => {\n  if (inputValidity.valid) {\n    return \"\";\n  }\n\n  if (inputValidity.valueMissing) {\n    return errorMessages.requiredError;\n  }\n  if (inputValidity.tooLong) {\n    return errorMessages.maxCharError;\n  }\n  if (inputValidity.tooShort) {\n    return errorMessages.minCharError;\n  }\n  if (inputValidity.typeMismatch) {\n    return errorMessages.typeMismatchError;\n  }\n\n  return errorMessages.error;\n};\n\n/**\n * Returns a object describing the validity state of the input.\n *\n * It implements the native browser's ValidityState interface:\n * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n */\nexport const validateInput = (\n  input: HTMLInputElement | HTMLTextAreaElement | null,\n  required: boolean | undefined,\n  minCharQuantity: any,\n  maxCharQuantity: any,\n  validationType: string,\n  validation?: (value: string) => boolean,\n): HvInputValidity => {\n  // bootstrap validity object using browser's built-in validation\n  const inputValidity: HvInputValidity = {\n    valid: input?.validity?.valid ?? true,\n    badInput: input?.validity?.badInput,\n    customError: input?.validity?.customError,\n    patternMismatch: input?.validity?.patternMismatch,\n    rangeOverflow: input?.validity?.rangeOverflow,\n    rangeUnderflow: input?.validity?.rangeUnderflow,\n    stepMismatch: input?.validity?.stepMismatch,\n    tooLong: input?.validity?.tooLong,\n    tooShort: input?.validity?.tooShort,\n    typeMismatch: input?.validity?.typeMismatch,\n    valueMissing: input?.validity?.valueMissing,\n  };\n\n  const value = input?.value;\n\n  if (!value) {\n    if (required) {\n      // this is redundant because we're setting the required property in the native input\n      inputValidity.valueMissing = true;\n      inputValidity.valid = false;\n    }\n  } else {\n    // we're not setting minlength and maxlength in the native input\n    // to avoid different browser's behaviours and keep the user experience consistent\n    if (minCharQuantity !== null && value.length < minCharQuantity) {\n      inputValidity.tooShort = true;\n      inputValidity.valid = false;\n    }\n\n    if (maxCharQuantity !== null && value.length > maxCharQuantity) {\n      inputValidity.tooLong = true;\n      inputValidity.valid = false;\n    }\n\n    // the validationType is used instead of type\n    // for the same reason stated above\n    switch (validationType) {\n      case validationTypes.number:\n        if (!isNumeric(value)) {\n          inputValidity.typeMismatch = true;\n          inputValidity.valid = false;\n        }\n        break;\n\n      case validationTypes.email:\n        if (!isEmail(value)) {\n          inputValidity.typeMismatch = true;\n          inputValidity.valid = false;\n        }\n        break;\n\n      default:\n    }\n\n    if (validation != null && !validation(value)) {\n      inputValidity.customError = true;\n      inputValidity.valid = false;\n    }\n  }\n\n  return inputValidity;\n};\n\ntype Mutable<T> = { -readonly [P in keyof T]: T[P] };\n\nexport interface HvInputValidity extends Partial<Mutable<ValidityState>> {}\n\nexport const DEFAULT_ERROR_MESSAGES = {\n  error: \"Invalid value\",\n  requiredError: \"The value is required\",\n  minCharError: \"The value is too short\",\n  maxCharError: \"The value is too long\",\n  typeMismatchError: \"Invalid value\",\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/BaseRadio/BaseRadio.js

@@ -4,7 +4,7 @@ import MuiRadio from "@mui/material/Radio";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./BaseRadio.styles.js";
 import { staticClasses } from "./BaseRadio.styles.js";
-import { Unselected, Selected } from "./icons.js";
+import { Selected, Unselected } from "./icons.js";
 const getSelectorIcons = () => {
   return {
     radio: /* @__PURE__ */ jsx(Unselected, {}),