@hitachivantara/uikit-react-core 5.66.10 → 5.66.12

package/dist/cjs/VerticalNavigation/TreeView/TreeViewItem.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
@@ -75,7 +75,9 @@ const HvVerticalNavigationTreeViewItem = React.forwardRef(
       }),
       [nodeId, treeitemElement]
     );
-    const { isOpen, useIcons } = React.useContext(VerticalNavigationContext.VerticalNavigationContext);
+    const { isOpen, useIcons, hasAnyChildWithData } = React.useContext(
+      VerticalNavigationContext.VerticalNavigationContext
+    );
     const { index, parentId, level } = DescendantProvider.useDescendant(descendant);
     const expandable = collapsible && Array.isArray(children);
     const expanded = isExpanded ? isExpanded(nodeId) : false;
@@ -304,7 +306,13 @@ const HvVerticalNavigationTreeViewItem = React.forwardRef(
                 label: payload?.label,
                 hasChildren,
                 showAvatar: !icon && useIcons,
-                isOpen
+                isOpen,
+                hasAnyChildWithData,
+                style: {
+                  // @ts-ignore
+                  "--icon-margin-left": hasAnyChildWithData ? "auto" : "unset"
+                },
+                className: classes.icon
               }
             ),
             isOpen && /* @__PURE__ */ jsxRuntime.jsx(
@@ -322,37 +330,39 @@ const HvVerticalNavigationTreeViewItem = React.forwardRef(
         }
       ) });
     }, [
-      id,
       href,
       target,
+      children,
+      isOpen,
+      disableTooltip,
+      disabled,
+      label,
+      id,
       cx,
       classes.content,
       classes.link,
       classes.minimized,
+      classes.icon,
       classes.label,
       classes.labelIcon,
       classes.labelExpandable,
-      disabled,
       handleClick,
       handleMouseDown,
-      expandable,
-      icon,
+      useIcons,
       level,
       collapsible,
       treeviewMode,
       handleFocus,
       selectable,
+      expandable,
       handleKeyDown,
       selected,
+      isChildSelected,
+      nodeId,
       expanded,
-      label,
-      disableTooltip,
       payload?.label,
-      children,
-      isOpen,
-      useIcons,
-      isChildSelected,
-      nodeId
+      icon,
+      hasAnyChildWithData
     ]);
     const renderedChildren = React.useMemo(
       () => children && /* @__PURE__ */ jsxRuntime.jsx(
@@ -371,19 +381,22 @@ const HvVerticalNavigationTreeViewItem = React.forwardRef(
       {
         ref: handleRef,
         id: id ?? void 0,
-        className: cx(classes.node, {
-          [classes.disabled]: disabled,
-          [classes.expandable]: expandable,
-          [classes.collapsed]: expandable && !expanded,
-          [classes.expanded]: expandable && expanded,
-          [classes.selectable]: selectable && !disabled,
-          [classes.unselectable]: !disabled && !selectable,
-          [classes.selected]: !disabled && selectable && selected || !isOpen && useIcons && isChildSelected && isChildSelected(nodeId),
-          [classes.unselected]: !disabled && selectable && !selected,
-          [classes.focused]: focused,
-          [classes.hide]: !isOpen && !useIcons,
+        className: cx(
+          classes.node,
+          {
+            [classes.disabled]: disabled,
+            [classes.expandable]: expandable,
+            [classes.collapsed]: expandable && !expanded,
+            [classes.expanded]: expandable && expanded,
+            [classes.selectable]: selectable && !disabled,
+            [classes.unselectable]: !disabled && !selectable,
+            [classes.selected]: !disabled && selectable && selected || !isOpen && useIcons && isChildSelected && isChildSelected(nodeId),
+            [classes.unselected]: !disabled && selectable && !selected,
+            [classes.focused]: focused,
+            [classes.hide]: !isOpen && !useIcons
+          },
           className
-        }),
+        ),
         "data-hasicon": icon != null ? true : void 0,
         ...mode === "treeview" && {
           role: "treeitem",

package/dist/cjs/VerticalNavigation/TreeView/TreeViewItem.styles.cjs

@@ -3,16 +3,15 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const classes = require("../../utils/classes.cjs");
 const focusUtils = require("../../utils/focusUtils.cjs");
-const selected = () => ({
+const Avatar_styles = require("../../Avatar/Avatar.styles.cjs");
+require("../../Avatar/Avatar.cjs");
+const selected = {
   background: uikitStyles.theme.colors.atmo3,
-  borderLeft: `4px solid ${uikitStyles.theme.colors.secondary}`,
-  "& *": {
-    background: uikitStyles.theme.colors.atmo3
-  }
-});
-const hover = () => ({
+  borderLeft: `4px solid ${uikitStyles.theme.colors.secondary}`
+};
+const hover = {
   background: uikitStyles.theme.colors.containerBackgroundHover
-});
+};
 const { staticClasses, useClasses } = classes.createClasses(
   "HvVerticalNavigationTreeViewItem",
   {
@@ -54,13 +53,13 @@ const { staticClasses, useClasses } = classes.createClasses(
       "$expandable>&": {
         fontWeight: 600
       },
-      "$selected>&": selected(),
+      "$selected>&": { ...selected },
       // hover
-      ":not($disabled>&):not($selected>&):hover": hover(),
+      ":not($disabled>&):not($selected>&):hover": { ...hover },
       ":not($disabled)$selected>&:hover": {},
       // focus
-      ":not($disabled>&):not($selected>&):focus-visible": hover(),
-      ":not($disabled>&):not($selected>&).focus-visible": hover(),
+      ":not($disabled>&):not($selected>&):focus-visible": { ...hover },
+      ":not($disabled>&):not($selected>&).focus-visible": { ...hover },
       "*:focus-visible $focused>&": {
         ...focusUtils.outlineStyles
       },
@@ -68,7 +67,7 @@ const { staticClasses, useClasses } = classes.createClasses(
         ...focusUtils.outlineStyles
       },
       "$focused>&": {
-        ...hover()
+        ...hover
       },
       "&[disabled], &:active": {
         outline: "none"
@@ -125,6 +124,19 @@ const { staticClasses, useClasses } = classes.createClasses(
       "&$labelIcon": {
         maxWidth: "calc(100% - 64px)"
       }
+    },
+    icon: {
+      display: "flex",
+      "> div:first-of-type": {
+        marginLeft: "var(--icon-margin-left)"
+      },
+      "> div:nth-of-type(2)": {
+        width: "14px",
+        marginLeft: "auto"
+      },
+      [`&& .${Avatar_styles.staticClasses.root}`]: {
+        fontSize: "15px"
+      }
     }
   }
 );

package/dist/cjs/VerticalNavigation/VerticalNavigation.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const useDefaultProps = require("../hooks/useDefaultProps.cjs");
 const VerticalNavigation_utils = require("./utils/VerticalNavigation.utils.cjs");

package/dist/cjs/hocs/withTooltip.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const Tooltip = require("../Tooltip/Tooltip.cjs");
 const styles = {

package/dist/cjs/hooks/useEmotionCache.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-require("@emotion/react/jsx-runtime");
+require("react/jsx-runtime");
 require("@mui/material/styles");
 const uikitReactShared = require("@hitachivantara/uikit-react-shared");
 require("@hitachivantara/uikit-styles");

package/dist/cjs/hooks/useTheme.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-require("@emotion/react/jsx-runtime");
+require("react/jsx-runtime");
 require("@mui/material/styles");
 const uikitReactShared = require("@hitachivantara/uikit-react-shared");
 require("@hitachivantara/uikit-styles");

package/dist/cjs/providers/Provider.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const createCache = require("@emotion/cache");
 const react = require("@emotion/react");

package/dist/cjs/providers/ThemeProvider.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const styles = require("@mui/material/styles");
 const uikitReactShared = require("@hitachivantara/uikit-react-shared");

package/dist/cjs/utils/focusableElementFinder.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const SELECTORS = 'input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"])';
-const getFocusableList = (node) => node && node.querySelectorAll(SELECTORS) || [];
+const getFocusableList = (node) => node?.querySelectorAll(SELECTORS) || [];
 const getPrevNextFocus = (nodeId) => {
   const nodes = getFocusableList(document);
   const nbNodes = nodes.length;

package/dist/cjs/utils/iconVariant.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const iconVariant = (variant, color, semantic) => {
   switch (variant) {

package/dist/esm/Accordion/Accordion.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useCallback, useMemo } from "react";
 import { DropUpXS, DropDownXS } from "@hitachivantara/uikit-react-icons";
 import { useControlled } from "../hooks/useControlled.js";

package/dist/esm/ActionBar/ActionBar.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
 import { useClasses } from "./ActionBar.styles.js";
 import { staticClasses } from "./ActionBar.styles.js";

package/dist/esm/ActionsGeneric/ActionsGeneric.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { isValidElement } from "react";
 import { MoreOptionsVertical } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";

package/dist/esm/AppSwitcher/Action/Action.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
 import { Info } from "@hitachivantara/uikit-react-icons";
 import { theme, getColor } from "@hitachivantara/uikit-styles";

package/dist/esm/AppSwitcher/AppSwitcher.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
 import { useClasses } from "./AppSwitcher.styles.js";
@@ -24,7 +24,7 @@ const HvAppSwitcher = (props) => {
   } = useDefaultProps("HvAppSwitcher", props);
   const { classes, cx } = useClasses(classesProp);
   const panelActions = useMemo(
-    () => applications && applications?.map((application) => {
+    () => applications?.map((application) => {
       if (application.name) {
         return /* @__PURE__ */ jsx(
           HvAppSwitcherAction,

package/dist/esm/AppSwitcher/AppSwitcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppSwitcher.js","sources":["../../../src/AppSwitcher/AppSwitcher.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvListContainer } from \"../ListContainer\";\nimport { HvOverflowTooltip } from \"../OverflowTooltip\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvAppSwitcherAction, HvAppSwitcherActionApplication } from \"./Action\";\nimport { staticClasses, useClasses } from \"./AppSwitcher.styles\";\n\nexport { staticClasses as appSwitcherClasses };\n\nexport type HvAppSwitcherClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherProps extends HvBaseProps {\n  /** Number of columns to render. One, two, or whatever fits the component's width. */\n  layout?: \"single\" | \"dual\" | \"fluid\";\n  /** Title to be displayed on the header of the component. */\n  title?: string;\n  /** The list of applications to be used to render the actions on the component. */\n  applications?: HvAppSwitcherActionApplication[];\n  /** Triggered when an action is clicked. */\n  onActionClickedCallback?: (\n    event: React.MouseEvent,\n    application: HvAppSwitcherActionApplication,\n  ) => void;\n  /** Must return a boolean stating if the action element is selected or not. */\n  isActionSelectedCallback?: (\n    application: HvAppSwitcherActionApplication,\n  ) => boolean;\n  /** Element to be added to the header container, if none is provided a label with the title will be added. */\n  header?: React.ReactNode;\n  /** Element to be added to the footer container. */\n  footer?: React.ReactNode;\n  /**\n   * Flag stating if the panel is opened or closed.\n   *\n   * @deprecated This logic should be external, i.e. using the HvAppSwitcher inside a Drawer component.\n   */\n  isOpen?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAppSwitcherClasses;\n}\n\nexport const HvAppSwitcher = (props: HvAppSwitcherProps) => {\n  const {\n    className,\n    classes: classesProp,\n    layout = \"single\",\n    title,\n    applications,\n    onActionClickedCallback = () => {},\n    isActionSelectedCallback = () => false,\n    header,\n    footer,\n    isOpen,\n    ...others\n  } = useDefaultProps(\"HvAppSwitcher\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const panelActions = useMemo(\n    () =>\n      applications &&\n      applications?.map((application) => {\n        if (application.name) {\n          return (\n            <HvAppSwitcherAction\n              key={application.id || `${application.name}_${application.url}`}\n              application={application}\n              onClickCallback={onActionClickedCallback}\n              isSelectedCallback={isActionSelectedCallback}\n              classes={{\n                root: classes.item,\n                selected: classes.itemSelected,\n                disabled: classes.itemDisabled,\n                typography: classes.itemTrigger,\n                icon: classes.itemIcon,\n                title: classes.itemTitle,\n                iconInfo: classes.itemInfoIcon,\n              }}\n            />\n          );\n        }\n\n        return undefined;\n      }),\n    [applications, classes, isActionSelectedCallback, onActionClickedCallback],\n  );\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        classes[layout],\n        { [classes.open]: !!isOpen, [classes.closed]: isOpen === false },\n        className,\n      )}\n      {...others}\n    >\n      {(header && (\n        <HvTypography component=\"div\" variant=\"label\" className={classes.title}>\n          {header}\n        </HvTypography>\n      )) ||\n        (title && (\n          <HvOverflowTooltip\n            className={classes.title}\n            data={title}\n            placement=\"top-start\"\n            classes={{\n              tooltipAnchorParagraph: classes.titleAnchor,\n            }}\n          />\n        ))}\n      <HvListContainer disableGutters className={classes.actionsContainer}>\n        {panelActions}\n      </HvListContainer>\n      {footer && (\n        <HvTypography\n          component=\"div\"\n          variant=\"label\"\n          className={classes.footerContainer}\n        >\n          {footer}\n        </HvTypography>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AA6Ca,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,0BAA0B,MAAM;AAAA,IAAC;AAAA,IACjC,2BAA2B,MAAM;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAC1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,eAAe;AAAA,IACnB,MACE,gBACA,cAAc,IAAI,CAAC,gBAAgB;AACjC,UAAI,YAAY,MAAM;AAElB,eAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC;AAAA,YACA,iBAAiB;AAAA,YACjB,oBAAoB;AAAA,YACpB,SAAS;AAAA,cACP,MAAM,QAAQ;AAAA,cACd,UAAU,QAAQ;AAAA,cAClB,UAAU,QAAQ;AAAA,cAClB,YAAY,QAAQ;AAAA,cACpB,MAAM,QAAQ;AAAA,cACd,OAAO,QAAQ;AAAA,cACf,UAAU,QAAQ;AAAA,YACpB;AAAA,UAAA;AAAA,UAZK,YAAY,MAAM,GAAG,YAAY,IAAI,IAAI,YAAY,GAAG;AAAA,QAAA;AAAA,MAenE;AAEO,aAAA;AAAA,IAAA,CACR;AAAA,IACH,CAAC,cAAc,SAAS,0BAA0B,uBAAuB;AAAA,EAAA;AAIzE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,MAAM;AAAA,QACd,EAAE,CAAC,QAAQ,IAAI,GAAG,CAAC,CAAC,QAAQ,CAAC,QAAQ,MAAM,GAAG,WAAW,MAAM;AAAA,QAC/D;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEF,UAAA;AAAA,QACA,UAAA,oBAAC,cAAa,EAAA,WAAU,OAAM,SAAQ,SAAQ,WAAW,QAAQ,OAC9D,UACH,OAAA,CAAA,KAEC,SACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,QAAQ;AAAA,YACnB,MAAM;AAAA,YACN,WAAU;AAAA,YACV,SAAS;AAAA,cACP,wBAAwB,QAAQ;AAAA,YAClC;AAAA,UAAA;AAAA,QACF;AAAA,4BAEH,iBAAgB,EAAA,gBAAc,MAAC,WAAW,QAAQ,kBAChD,UACH,cAAA;AAAA,QACC,UACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,WAAW,QAAQ;AAAA,YAElB,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"AppSwitcher.js","sources":["../../../src/AppSwitcher/AppSwitcher.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvListContainer } from \"../ListContainer\";\nimport { HvOverflowTooltip } from \"../OverflowTooltip\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvAppSwitcherAction, HvAppSwitcherActionApplication } from \"./Action\";\nimport { staticClasses, useClasses } from \"./AppSwitcher.styles\";\n\nexport { staticClasses as appSwitcherClasses };\n\nexport type HvAppSwitcherClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherProps extends HvBaseProps {\n  /** Number of columns to render. One, two, or whatever fits the component's width. */\n  layout?: \"single\" | \"dual\" | \"fluid\";\n  /** Title to be displayed on the header of the component. */\n  title?: string;\n  /** The list of applications to be used to render the actions on the component. */\n  applications?: HvAppSwitcherActionApplication[];\n  /** Triggered when an action is clicked. */\n  onActionClickedCallback?: (\n    event: React.MouseEvent,\n    application: HvAppSwitcherActionApplication,\n  ) => void;\n  /** Must return a boolean stating if the action element is selected or not. */\n  isActionSelectedCallback?: (\n    application: HvAppSwitcherActionApplication,\n  ) => boolean;\n  /** Element to be added to the header container, if none is provided a label with the title will be added. */\n  header?: React.ReactNode;\n  /** Element to be added to the footer container. */\n  footer?: React.ReactNode;\n  /**\n   * Flag stating if the panel is opened or closed.\n   *\n   * @deprecated This logic should be external, i.e. using the HvAppSwitcher inside a Drawer component.\n   */\n  isOpen?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAppSwitcherClasses;\n}\n\nexport const HvAppSwitcher = (props: HvAppSwitcherProps) => {\n  const {\n    className,\n    classes: classesProp,\n    layout = \"single\",\n    title,\n    applications,\n    onActionClickedCallback = () => {},\n    isActionSelectedCallback = () => false,\n    header,\n    footer,\n    isOpen,\n    ...others\n  } = useDefaultProps(\"HvAppSwitcher\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const panelActions = useMemo(\n    () =>\n      applications?.map((application) => {\n        if (application.name) {\n          return (\n            <HvAppSwitcherAction\n              key={application.id || `${application.name}_${application.url}`}\n              application={application}\n              onClickCallback={onActionClickedCallback}\n              isSelectedCallback={isActionSelectedCallback}\n              classes={{\n                root: classes.item,\n                selected: classes.itemSelected,\n                disabled: classes.itemDisabled,\n                typography: classes.itemTrigger,\n                icon: classes.itemIcon,\n                title: classes.itemTitle,\n                iconInfo: classes.itemInfoIcon,\n              }}\n            />\n          );\n        }\n\n        return undefined;\n      }),\n    [applications, classes, isActionSelectedCallback, onActionClickedCallback],\n  );\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        classes[layout],\n        { [classes.open]: !!isOpen, [classes.closed]: isOpen === false },\n        className,\n      )}\n      {...others}\n    >\n      {(header && (\n        <HvTypography component=\"div\" variant=\"label\" className={classes.title}>\n          {header}\n        </HvTypography>\n      )) ||\n        (title && (\n          <HvOverflowTooltip\n            className={classes.title}\n            data={title}\n            placement=\"top-start\"\n            classes={{\n              tooltipAnchorParagraph: classes.titleAnchor,\n            }}\n          />\n        ))}\n      <HvListContainer disableGutters className={classes.actionsContainer}>\n        {panelActions}\n      </HvListContainer>\n      {footer && (\n        <HvTypography\n          component=\"div\"\n          variant=\"label\"\n          className={classes.footerContainer}\n        >\n          {footer}\n        </HvTypography>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AA6Ca,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,0BAA0B,MAAM;AAAA,IAAC;AAAA,IACjC,2BAA2B,MAAM;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAC1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,eAAe;AAAA,IACnB,MACE,cAAc,IAAI,CAAC,gBAAgB;AACjC,UAAI,YAAY,MAAM;AAElB,eAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC;AAAA,YACA,iBAAiB;AAAA,YACjB,oBAAoB;AAAA,YACpB,SAAS;AAAA,cACP,MAAM,QAAQ;AAAA,cACd,UAAU,QAAQ;AAAA,cAClB,UAAU,QAAQ;AAAA,cAClB,YAAY,QAAQ;AAAA,cACpB,MAAM,QAAQ;AAAA,cACd,OAAO,QAAQ;AAAA,cACf,UAAU,QAAQ;AAAA,YACpB;AAAA,UAAA;AAAA,UAZK,YAAY,MAAM,GAAG,YAAY,IAAI,IAAI,YAAY,GAAG;AAAA,QAAA;AAAA,MAenE;AAEO,aAAA;AAAA,IAAA,CACR;AAAA,IACH,CAAC,cAAc,SAAS,0BAA0B,uBAAuB;AAAA,EAAA;AAIzE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,MAAM;AAAA,QACd,EAAE,CAAC,QAAQ,IAAI,GAAG,CAAC,CAAC,QAAQ,CAAC,QAAQ,MAAM,GAAG,WAAW,MAAM;AAAA,QAC/D;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEF,UAAA;AAAA,QACA,UAAA,oBAAC,cAAa,EAAA,WAAU,OAAM,SAAQ,SAAQ,WAAW,QAAQ,OAC9D,UACH,OAAA,CAAA,KAEC,SACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,QAAQ;AAAA,YACnB,MAAM;AAAA,YACN,WAAU;AAAA,YACV,SAAS;AAAA,cACP,wBAAwB,QAAQ;AAAA,YAClC;AAAA,UAAA;AAAA,QACF;AAAA,4BAEH,iBAAgB,EAAA,gBAAc,MAAC,WAAW,QAAQ,kBAChD,UACH,cAAA;AAAA,QACC,UACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,WAAW,QAAQ;AAAA,YAElB,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/esm/Avatar/Avatar.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import MuiAvatar from "@mui/material/Avatar";
 import { User } from "@hitachivantara/uikit-react-icons";

package/dist/esm/AvatarGroup/AvatarGroup.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, Children } from "react";
 import { css } from "@emotion/css";
 import { theme } from "@hitachivantara/uikit-styles";

package/dist/esm/AvatarGroup/AvatarGroupContext.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { createContext, useMemo, useContext } from "react";
 const HvAvatarGroupContext = createContext(null);
 const HvAvatarGroupProvider = ({

package/dist/esm/Badge/Badge.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
 import { useClasses } from "./Badge.styles.js";
 import { staticClasses } from "./Badge.styles.js";

package/dist/esm/Banner/Banner.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useCallback } from "react";
 import Slide from "@mui/material/Slide";
 import Snackbar from "@mui/material/Snackbar";

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

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { Close } from "@hitachivantara/uikit-react-icons";
 import { useClasses } from "./ActionContainer.styles.js";
 import { staticClasses } from "./ActionContainer.styles.js";

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

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import SnackbarContent from "@mui/material/SnackbarContent";
 import { iconVariant } from "../../utils/iconVariant.js";

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

@@ -1,4 +1,4 @@
-import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { setId } from "../../../utils/setId.js";
 import { useClasses } from "./MessageContainer.styles.js";
 import { staticClasses } from "./MessageContainer.styles.js";

package/dist/esm/BaseCheckBox/BaseCheckBox.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useCallback } from "react";
 import MuiCheckbox from "@mui/material/Checkbox";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";

package/dist/esm/BaseCheckBox/icons.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 const Box = () => {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 14 14", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "m0,0l16,0l0,16l-16,0l0,-16z" }) });
 };

package/dist/esm/BaseDropdown/BaseDropdown.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback, isValidElement, cloneElement, useState, useMemo } from "react";
 import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";

package/dist/esm/BaseInput/BaseInput.js

@@ -1,4 +1,4 @@
-import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useContext } from "react";
 import { css, Global } from "@emotion/react";
 import MuiInput from "@mui/material/Input";

package/dist/esm/BaseRadio/BaseRadio.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useCallback } from "react";
 import MuiRadio from "@mui/material/Radio";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";

package/dist/esm/BaseRadio/icons.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 const Selected = () => {
   return /* @__PURE__ */ jsx("svg", { width: "14", height: "14", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
     "path",

package/dist/esm/BaseSwitch/BaseSwitch.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useCallback } from "react";
 import MuiSwitch from "@mui/material/Switch";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";

package/dist/esm/Box/Box.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { theme } from "@hitachivantara/uikit-styles";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";

package/dist/esm/BreadCrumb/BreadCrumb.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { isValidElement } from "react";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
 import { useClasses } from "./BreadCrumb.styles.js";

package/dist/esm/BreadCrumb/Page/Page.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { useClasses } from "./Page.styles.js";
 import { staticClasses } from "./Page.styles.js";

package/dist/esm/BreadCrumb/PathElement/PathElement.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { DropRightXS } from "@hitachivantara/uikit-react-icons";
 import { useClasses } from "./PathElement.styles.js";
 import { staticClasses } from "./PathElement.styles.js";

package/dist/esm/BreadCrumb/utils.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { MoreOptionsHorizontal } from "@hitachivantara/uikit-react-icons";
 import { setId } from "../utils/setId.js";
 import { HvDropDownMenu } from "../DropDownMenu/DropDownMenu.js";

package/dist/esm/BulkActions/BulkActions.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { setId } from "../utils/setId.js";

package/dist/esm/BulkActions/BulkActions.styles.js

@@ -1,7 +1,7 @@
 import { theme } from "@hitachivantara/uikit-styles";
 import { createClasses } from "../utils/classes.js";
 import { staticClasses as staticClasses$1 } from "../ActionsGeneric/ActionsGeneric.styles.js";
-import "@emotion/react/jsx-runtime";
+import "react/jsx-runtime";
 import "react";
 import "@hitachivantara/uikit-react-icons";
 const { staticClasses, useClasses } = createClasses("HvBulkActions", {

package/dist/esm/Button/Button.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
 import { useTheme } from "../hooks/useTheme.js";

package/dist/esm/Calendar/Calendar.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
 import { setId } from "../utils/setId.js";
@@ -46,7 +46,9 @@ const HvCalendar = (props) => {
       minimumDate,
       maximumDate,
       onChange,
-      onInputChange: (evt, date) => onInputChange && onInputChange(evt, date, "left"),
+      onInputChange: (evt, date) => {
+        onInputChange?.(evt, date, "left");
+      },
       onVisibleDateChange,
       invalidDateLabel,
       ...others
@@ -65,7 +67,9 @@ const HvCalendar = (props) => {
         minimumDate,
         maximumDate,
         onChange,
-        onInputChange: (evt, date) => onInputChange && onInputChange(evt, date, "left"),
+        onInputChange: (evt, date) => {
+          onInputChange?.(evt, date, "left");
+        },
         onVisibleDateChange: (event, action, index) => onVisibleDateChange?.(event, action, index, "left"),
         invalidDateLabel,
         ...others
@@ -83,7 +87,9 @@ const HvCalendar = (props) => {
         minimumDate,
         maximumDate,
         onChange,
-        onInputChange: (evt, date) => onInputChange && onInputChange(evt, date, "right"),
+        onInputChange: (evt, date) => {
+          onInputChange?.(evt, date, "right");
+        },
         onVisibleDateChange: (event, action, index) => {
           onVisibleDateChange?.(event, action, index, "right");
         },

package/dist/esm/Calendar/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sources":["../../../src/Calendar/Calendar.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { HvFormElementContext, HvFormElementValueContext } from \"../Forms\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Calendar.styles\";\nimport { HvSingleCalendar } from \"./SingleCalendar\";\nimport { DateRangeProp, VisibilitySelectorActions } from \"./types\";\nimport { isRange } from \"./utils\";\n\nexport { staticClasses as calendarClasses };\n\nexport type HvCalendarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCalendarProps {\n  /**\n   * Styles applied from the theme.\n   */\n  classes?: HvCalendarClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\n  /**\n   * The calendar locale. If undefined, it defaults to en-US\n   *\n   */\n  locale?: string;\n  /**\n   * Date that the calendar would show.\n   * if using the object format the calendar enter in range mode showing two calendars\n   */\n  value?: DateRangeProp | Date;\n  /**\n   * Controls the visible month of the Calendar\n   */\n  visibleMonth?: number;\n  /**\n   * Controls the visible year of the Calendar\n   */\n  visibleYear?: number;\n  /**\n   * Controls the visible month of the Calendar on the right side of the datepicker\n   */\n  rightVisibleMonth?: number;\n  /**\n   * Controls the visible year of the Calendar on the right side of the datepicker\n   */\n  rightVisibleYear?: number;\n  /**\n   * Callback function to be triggered when the selected date has changed.\n   */\n  onChange?: (\n    event:\n      | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n      | undefined,\n    value: Date | DateRangeProp,\n  ) => void;\n  /**\n   * Callback function to be triggered when the selected date input has changed.\n   */\n  onInputChange?: (\n    event:\n      | React.ChangeEvent<\n          HTMLTextAreaElement | HTMLInputElement | HTMLButtonElement\n        >\n      | undefined,\n    value: Date | DateRangeProp,\n    position: \"left\" | \"right\",\n  ) => void;\n  /**\n   * Callback function to be triggered when the user clicks on the month or year selector.\n   * it receives the action that was pressed:\n   * previous_month, next_month, previous_year, next_year,month\n   */\n  onVisibleDateChange?: (\n    event:\n      | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n      | undefined,\n    action: VisibilitySelectorActions,\n    value?: Date | DateRangeProp | number,\n    position?: \"left\" | \"right\",\n  ) => void;\n  /**\n   * The maximum selectable date after this all values are disabled.\n   */\n  maximumDate?: Date;\n  /**\n   * The minimum selectable date before this all values are disabled.\n   */\n  minimumDate?: Date;\n  /**\n   * An element placed before the Calendar\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * Indicates if header should display the day of week.\n   */\n  showDayOfWeek?: boolean;\n  /**\n   * Label shown when date is invalid.\n   */\n  invalidDateLabel?: string;\n}\n\nexport const HvCalendar = (props: HvCalendarProps) => {\n  const {\n    classes: classesProp,\n    id,\n    locale = \"en-US\",\n    value,\n    visibleMonth,\n    visibleYear,\n    rightVisibleMonth,\n    rightVisibleYear,\n    minimumDate,\n    maximumDate,\n    startAdornment,\n    onChange,\n    onInputChange,\n    onVisibleDateChange,\n    invalidDateLabel,\n    ...others\n  } = useDefaultProps(\"HvCalendar\", props);\n  const { classes } = useClasses(classesProp);\n\n  const { elementId } = useContext(HvFormElementContext);\n  const elementValue = useContext(HvFormElementValueContext);\n  const localValue = value ?? elementValue;\n  const localId = id ?? setId(elementId, \"single-calendar\");\n  const rangeMode = isRange(localValue);\n  const rightCalendarId = setId(localId, \"single-calendar-right\");\n  const clampedMonth =\n    visibleMonth && visibleMonth % 13 > 0 ? visibleMonth % 13 : 1;\n\n  const singleCalendar = (\n    <HvSingleCalendar\n      id={localId}\n      locale={locale}\n      value={localValue}\n      visibleMonth={clampedMonth}\n      visibleYear={visibleYear}\n      minimumDate={minimumDate}\n      maximumDate={maximumDate}\n      onChange={onChange}\n      onInputChange={(evt, date) =>\n        onInputChange && onInputChange(evt, date, \"left\")\n      }\n      onVisibleDateChange={onVisibleDateChange}\n      invalidDateLabel={invalidDateLabel}\n      {...others}\n    />\n  );\n\n  const rangeCalendar = (\n    <div className={classes.rangeCalendarContainer}>\n      <HvSingleCalendar\n        className={classes.singleCalendar}\n        id={localId}\n        locale={locale}\n        value={localValue}\n        visibleMonth={clampedMonth}\n        visibleYear={visibleYear}\n        minimumDate={minimumDate}\n        maximumDate={maximumDate}\n        onChange={onChange}\n        onInputChange={(evt, date) =>\n          onInputChange && onInputChange(evt, date, \"left\")\n        }\n        onVisibleDateChange={(event, action, index) =>\n          onVisibleDateChange?.(event, action, index, \"left\")\n        }\n        invalidDateLabel={invalidDateLabel}\n        {...others}\n      />\n\n      <HvSingleCalendar\n        className={classes.singleCalendar}\n        id={rightCalendarId}\n        locale={locale}\n        value={localValue}\n        visibleMonth={rightVisibleMonth}\n        visibleYear={rightVisibleYear}\n        minimumDate={minimumDate}\n        maximumDate={maximumDate}\n        onChange={onChange}\n        onInputChange={(evt, date) =>\n          onInputChange && onInputChange(evt, date, \"right\")\n        }\n        onVisibleDateChange={(event, action, index) => {\n          onVisibleDateChange?.(event, action, index, \"right\");\n        }}\n        showEndDate\n        invalidDateLabel={invalidDateLabel}\n        {...others}\n      />\n    </div>\n  );\n\n  return (\n    <div className={classes.root}>\n      {startAdornment}\n      {rangeMode ? rangeCalendar : singleCalendar}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA0Ga,MAAA,aAAa,CAAC,UAA2B;AAC9C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,cAAc,KAAK;AACvC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,EAAE,UAAA,IAAc,WAAW,oBAAoB;AAC/C,QAAA,eAAe,WAAW,yBAAyB;AACzD,QAAM,aAAa,SAAS;AAC5B,QAAM,UAAU,MAAM,MAAM,WAAW,iBAAiB;AAClD,QAAA,YAAY,QAAQ,UAAU;AAC9B,QAAA,kBAAkB,MAAM,SAAS,uBAAuB;AAC9D,QAAM,eACJ,gBAAgB,eAAe,KAAK,IAAI,eAAe,KAAK;AAE9D,QAAM,iBACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,MACP,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe,CAAC,KAAK,SACnB,iBAAiB,cAAc,KAAK,MAAM,MAAM;AAAA,MAElD;AAAA,MACA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAIR,QAAM,gBACJ,qBAAC,OAAI,EAAA,WAAW,QAAQ,wBACtB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,IAAI;AAAA,QACJ;AAAA,QACA,OAAO;AAAA,QACP,cAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,CAAC,KAAK,SACnB,iBAAiB,cAAc,KAAK,MAAM,MAAM;AAAA,QAElD,qBAAqB,CAAC,OAAO,QAAQ,UACnC,sBAAsB,OAAO,QAAQ,OAAO,MAAM;AAAA,QAEpD;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,IAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,IAAI;AAAA,QACJ;AAAA,QACA,OAAO;AAAA,QACP,cAAc;AAAA,QACd,aAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,CAAC,KAAK,SACnB,iBAAiB,cAAc,KAAK,MAAM,OAAO;AAAA,QAEnD,qBAAqB,CAAC,OAAO,QAAQ,UAAU;AACvB,gCAAA,OAAO,QAAQ,OAAO,OAAO;AAAA,QACrD;AAAA,QACA,aAAW;AAAA,QACX;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,EACF,EAAA,CAAA;AAGF,SACG,qBAAA,OAAA,EAAI,WAAW,QAAQ,MACrB,UAAA;AAAA,IAAA;AAAA,IACA,YAAY,gBAAgB;AAAA,EAC/B,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Calendar.js","sources":["../../../src/Calendar/Calendar.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { HvFormElementContext, HvFormElementValueContext } from \"../Forms\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Calendar.styles\";\nimport { HvSingleCalendar } from \"./SingleCalendar\";\nimport { DateRangeProp, VisibilitySelectorActions } from \"./types\";\nimport { isRange } from \"./utils\";\n\nexport { staticClasses as calendarClasses };\n\nexport type HvCalendarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCalendarProps {\n  /**\n   * Styles applied from the theme.\n   */\n  classes?: HvCalendarClasses;\n  /**\n   * Identifier.\n   */\n  id?: string;\n  /**\n   * The calendar locale. If undefined, it defaults to en-US\n   *\n   */\n  locale?: string;\n  /**\n   * Date that the calendar would show.\n   * if using the object format the calendar enter in range mode showing two calendars\n   */\n  value?: DateRangeProp | Date;\n  /**\n   * Controls the visible month of the Calendar\n   */\n  visibleMonth?: number;\n  /**\n   * Controls the visible year of the Calendar\n   */\n  visibleYear?: number;\n  /**\n   * Controls the visible month of the Calendar on the right side of the datepicker\n   */\n  rightVisibleMonth?: number;\n  /**\n   * Controls the visible year of the Calendar on the right side of the datepicker\n   */\n  rightVisibleYear?: number;\n  /**\n   * Callback function to be triggered when the selected date has changed.\n   */\n  onChange?: (\n    event:\n      | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n      | undefined,\n    value: Date | DateRangeProp,\n  ) => void;\n  /**\n   * Callback function to be triggered when the selected date input has changed.\n   */\n  onInputChange?: (\n    event:\n      | React.ChangeEvent<\n          HTMLTextAreaElement | HTMLInputElement | HTMLButtonElement\n        >\n      | undefined,\n    value: Date | DateRangeProp,\n    position: \"left\" | \"right\",\n  ) => void;\n  /**\n   * Callback function to be triggered when the user clicks on the month or year selector.\n   * it receives the action that was pressed:\n   * previous_month, next_month, previous_year, next_year,month\n   */\n  onVisibleDateChange?: (\n    event:\n      | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n      | undefined,\n    action: VisibilitySelectorActions,\n    value?: Date | DateRangeProp | number,\n    position?: \"left\" | \"right\",\n  ) => void;\n  /**\n   * The maximum selectable date after this all values are disabled.\n   */\n  maximumDate?: Date;\n  /**\n   * The minimum selectable date before this all values are disabled.\n   */\n  minimumDate?: Date;\n  /**\n   * An element placed before the Calendar\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * Indicates if header should display the day of week.\n   */\n  showDayOfWeek?: boolean;\n  /**\n   * Label shown when date is invalid.\n   */\n  invalidDateLabel?: string;\n}\n\nexport const HvCalendar = (props: HvCalendarProps) => {\n  const {\n    classes: classesProp,\n    id,\n    locale = \"en-US\",\n    value,\n    visibleMonth,\n    visibleYear,\n    rightVisibleMonth,\n    rightVisibleYear,\n    minimumDate,\n    maximumDate,\n    startAdornment,\n    onChange,\n    onInputChange,\n    onVisibleDateChange,\n    invalidDateLabel,\n    ...others\n  } = useDefaultProps(\"HvCalendar\", props);\n  const { classes } = useClasses(classesProp);\n\n  const { elementId } = useContext(HvFormElementContext);\n  const elementValue = useContext(HvFormElementValueContext);\n  const localValue = value ?? elementValue;\n  const localId = id ?? setId(elementId, \"single-calendar\");\n  const rangeMode = isRange(localValue);\n  const rightCalendarId = setId(localId, \"single-calendar-right\");\n  const clampedMonth =\n    visibleMonth && visibleMonth % 13 > 0 ? visibleMonth % 13 : 1;\n\n  const singleCalendar = (\n    <HvSingleCalendar\n      id={localId}\n      locale={locale}\n      value={localValue}\n      visibleMonth={clampedMonth}\n      visibleYear={visibleYear}\n      minimumDate={minimumDate}\n      maximumDate={maximumDate}\n      onChange={onChange}\n      onInputChange={(evt, date) => {\n        onInputChange?.(evt, date, \"left\");\n      }}\n      onVisibleDateChange={onVisibleDateChange}\n      invalidDateLabel={invalidDateLabel}\n      {...others}\n    />\n  );\n\n  const rangeCalendar = (\n    <div className={classes.rangeCalendarContainer}>\n      <HvSingleCalendar\n        className={classes.singleCalendar}\n        id={localId}\n        locale={locale}\n        value={localValue}\n        visibleMonth={clampedMonth}\n        visibleYear={visibleYear}\n        minimumDate={minimumDate}\n        maximumDate={maximumDate}\n        onChange={onChange}\n        onInputChange={(evt, date) => {\n          onInputChange?.(evt, date, \"left\");\n        }}\n        onVisibleDateChange={(event, action, index) =>\n          onVisibleDateChange?.(event, action, index, \"left\")\n        }\n        invalidDateLabel={invalidDateLabel}\n        {...others}\n      />\n\n      <HvSingleCalendar\n        className={classes.singleCalendar}\n        id={rightCalendarId}\n        locale={locale}\n        value={localValue}\n        visibleMonth={rightVisibleMonth}\n        visibleYear={rightVisibleYear}\n        minimumDate={minimumDate}\n        maximumDate={maximumDate}\n        onChange={onChange}\n        onInputChange={(evt, date) => {\n          onInputChange?.(evt, date, \"right\");\n        }}\n        onVisibleDateChange={(event, action, index) => {\n          onVisibleDateChange?.(event, action, index, \"right\");\n        }}\n        showEndDate\n        invalidDateLabel={invalidDateLabel}\n        {...others}\n      />\n    </div>\n  );\n\n  return (\n    <div className={classes.root}>\n      {startAdornment}\n      {rangeMode ? rangeCalendar : singleCalendar}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA0Ga,MAAA,aAAa,CAAC,UAA2B;AAC9C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,cAAc,KAAK;AACvC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,EAAE,UAAA,IAAc,WAAW,oBAAoB;AAC/C,QAAA,eAAe,WAAW,yBAAyB;AACzD,QAAM,aAAa,SAAS;AAC5B,QAAM,UAAU,MAAM,MAAM,WAAW,iBAAiB;AAClD,QAAA,YAAY,QAAQ,UAAU;AAC9B,QAAA,kBAAkB,MAAM,SAAS,uBAAuB;AAC9D,QAAM,eACJ,gBAAgB,eAAe,KAAK,IAAI,eAAe,KAAK;AAE9D,QAAM,iBACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,MACP,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe,CAAC,KAAK,SAAS;AACZ,wBAAA,KAAK,MAAM,MAAM;AAAA,MACnC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAIR,QAAM,gBACJ,qBAAC,OAAI,EAAA,WAAW,QAAQ,wBACtB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,IAAI;AAAA,QACJ;AAAA,QACA,OAAO;AAAA,QACP,cAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,CAAC,KAAK,SAAS;AACZ,0BAAA,KAAK,MAAM,MAAM;AAAA,QACnC;AAAA,QACA,qBAAqB,CAAC,OAAO,QAAQ,UACnC,sBAAsB,OAAO,QAAQ,OAAO,MAAM;AAAA,QAEpD;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,IAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,IAAI;AAAA,QACJ;AAAA,QACA,OAAO;AAAA,QACP,cAAc;AAAA,QACd,aAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,CAAC,KAAK,SAAS;AACZ,0BAAA,KAAK,MAAM,OAAO;AAAA,QACpC;AAAA,QACA,qBAAqB,CAAC,OAAO,QAAQ,UAAU;AACvB,gCAAA,OAAO,QAAQ,OAAO,OAAO;AAAA,QACrD;AAAA,QACA,aAAW;AAAA,QACX;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,EACF,EAAA,CAAA;AAGF,SACG,qBAAA,OAAA,EAAI,WAAW,QAAQ,MACrB,UAAA;AAAA,IAAA;AAAA,IACA,YAAY,gBAAgB;AAAA,EAC/B,EAAA,CAAA;AAEJ;"}

package/dist/esm/Calendar/CalendarHeader/CalendarHeader.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useContext, useState, useEffect } from "react";
 import dayjs from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat";

package/dist/esm/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { setId } from "../../../utils/setId.js";
 import { getMonthNamesList } from "../../utils.js";
 import { useClasses } from "./ComposedNavigation.styles.js";

package/dist/esm/Calendar/CalendarNavigation/MonthSelector/MonthSelector.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { isKey } from "../../../utils/keyboardUtils.js";
 import { getMonthNamesList } from "../../utils.js";
 import { useClasses } from "./MonthSelector.styles.js";