@hitachivantara/uikit-react-core 5.85.1 → 5.86.0

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

@@ -3,10 +3,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const SnackbarContent = require("@mui/material/SnackbarContent");
+const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const iconVariant = require("../../utils/iconVariant.cjs");
+const setId = require("../../utils/setId.cjs");
 const BannerContent_styles = require("./BannerContent.styles.cjs");
-const MessageContainer = require("./MessageContainer/MessageContainer.cjs");
-const ActionContainer = require("./ActionContainer/ActionContainer.cjs");
+const ActionsGeneric = require("../../ActionsGeneric/ActionsGeneric.cjs");
+const Button = require("../../Button/Button.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const SnackbarContent__default = /* @__PURE__ */ _interopDefault(SnackbarContent);
 const HvBannerContent = React.forwardRef(
@@ -14,6 +16,7 @@ const HvBannerContent = React.forwardRef(
     const {
       id,
       classes: classesProp,
+      className,
       showIcon = false,
       customIcon,
       variant = "default",
@@ -24,12 +27,17 @@ const HvBannerContent = React.forwardRef(
       onAction,
       actionsPosition = "auto",
       content,
+      children,
       actionProps,
       ...others
     } = props;
     const { classes, cx } = BannerContent_styles.useClasses(classesProp);
     const icon = customIcon || showIcon && iconVariant.iconVariant(variant, "base_dark");
     const effectiveActionsPosition = actionsPosition === "auto" ? "inline" : actionsPosition;
+    const handleAction = (evt, action) => {
+      onAction?.(evt, action);
+      actionsCallback?.(evt, id, action);
+    };
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.outContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
       SnackbarContent__default.default,
       {
@@ -40,33 +48,57 @@ const HvBannerContent = React.forwardRef(
           message: classes.message,
           action: classes.action
         },
-        className: cx(classes?.baseVariant, classes?.[variant]),
-        message: /* @__PURE__ */ jsxRuntime.jsx(
-          MessageContainer.HvMessageContainer,
-          {
-            id,
-            icon,
-            ...effectiveActionsPosition === "inline" && {
+        className: cx(classes.baseVariant, classes[variant], className),
+        message: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.iconContainer, children: icon }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: setId.setId(id, "message-text"),
+              className: classes.messageContainer,
+              children: children ?? content
+            }
+          ),
+          actions && effectiveActionsPosition === "inline" && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: setId.setId(id, "message-actions"),
+              className: classes.messageActions,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                ActionsGeneric.HvActionsGeneric,
+                {
+                  id,
+                  variant: "semantic",
+                  actions,
+                  onAction: handleAction
+                }
+              )
+            }
+          )
+        ] }),
+        action: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.actionContainer, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button.HvButton,
+            {
+              icon: true,
+              className: classes.closeAction,
+              variant: "semantic",
+              "aria-label": "Close",
+              onClick: onClose,
+              ...actionProps,
+              children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, { size: "XS" })
+            }
+          ),
+          actions && effectiveActionsPosition === "bottom-right" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.actionsInnerContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+            ActionsGeneric.HvActionsGeneric,
+            {
+              id,
+              variant: "semantic",
               actions,
-              actionsOnMessageCallback: actionsCallback,
-              onAction
-            },
-            message: content
-          }
-        ),
-        action: /* @__PURE__ */ jsxRuntime.jsx(
-          ActionContainer.HvActionContainer,
-          {
-            id,
-            onClose,
-            ...effectiveActionsPosition === "bottom-right" && {
-              action: actions,
-              actionCallback: actionsCallback,
-              onAction
-            },
-            ...actionProps
-          }
-        ),
+              onAction: handleAction
+            }
+          ) })
+        ] }),
         ...others
       }
     ) });

package/dist/cjs/Banner/BannerContent/BannerContent.styles.cjs

@@ -15,7 +15,9 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvBannerCon
     display: "flex",
     alignItems: "center",
     padding: uikitStyles.theme.spacing("xs", 0),
-    paddingLeft: uikitStyles.theme.space.sm
+    paddingLeft: uikitStyles.theme.space.sm,
+    ...uikitStyles.theme.typography.body,
+    color: uikitStyles.theme.colors.base_dark
   },
   action: {
     padding: uikitStyles.theme.spacing("xs"),
@@ -41,6 +43,33 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvBannerCon
   outContainer: {
     width: "100%",
     position: "relative"
+  },
+  messageContainer: {
+    wordBreak: "break-word",
+    maxWidth: 700,
+    overflow: "hidden",
+    marginRight: 10
+  },
+  iconContainer: {
+    marginRight: uikitStyles.theme.space.xs,
+    marginLeft: -uikitStyles.theme.space.xs
+  },
+  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"
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/{ScrollTo/Horizontal → ScrollToHorizontal}/HorizontalScrollListItem/HorizontalScrollListItem.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const setId = require("../../../utils/setId.cjs");
+const setId = require("../../utils/setId.cjs");
 const HorizontalScrollListItem_styles = require("./HorizontalScrollListItem.styles.cjs");
-const OverflowTooltip = require("../../../OverflowTooltip/OverflowTooltip.cjs");
+const OverflowTooltip = require("../../OverflowTooltip/OverflowTooltip.cjs");
 const HvHorizontalScrollListItem = (props) => {
   const {
     id,

package/dist/cjs/{ScrollTo/Horizontal → ScrollToHorizontal}/HorizontalScrollListItem/HorizontalScrollListItem.styles.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const focusUtils = require("../../../utils/focusUtils.cjs");
+const focusUtils = require("../../utils/focusUtils.cjs");
 const name = "HvHorizontalScrollListItem";
 const { staticClasses, useClasses } = uikitReactUtils.createClasses(name, {
   root: {

package/dist/cjs/{ScrollTo/Horizontal → ScrollToHorizontal}/ScrollToHorizontal.cjs

@@ -5,9 +5,9 @@ const styles = require("@mui/material/styles");
 const useMediaQuery = require("@mui/material/useMediaQuery");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const keyboardUtils = require("../../utils/keyboardUtils.cjs");
-const setId = require("../../utils/setId.cjs");
-const useScrollTo = require("../useScrollTo.cjs");
+const useScrollTo = require("../hooks/useScrollTo.cjs");
+const keyboardUtils = require("../utils/keyboardUtils.cjs");
+const setId = require("../utils/setId.cjs");
 const ScrollToHorizontal_styles = require("./ScrollToHorizontal.styles.cjs");
 const HorizontalScrollListItem = require("./HorizontalScrollListItem/HorizontalScrollListItem.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };

package/dist/cjs/{ScrollTo/Vertical → ScrollToVertical}/ScrollToVertical.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const keyboardUtils = require("../../utils/keyboardUtils.cjs");
-const setId = require("../../utils/setId.cjs");
-const useScrollTo = require("../useScrollTo.cjs");
+const useScrollTo = require("../hooks/useScrollTo.cjs");
+const keyboardUtils = require("../utils/keyboardUtils.cjs");
+const setId = require("../utils/setId.cjs");
 const ScrollToVertical_styles = require("./ScrollToVertical.styles.cjs");
 const VerticalScrollListItem = require("./VerticalScrollListItem/VerticalScrollListItem.cjs");
 const HvScrollToVertical = (props) => {

package/dist/cjs/{ScrollTo/Vertical → ScrollToVertical}/VerticalScrollListItem/VerticalScrollListItem.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const VerticalScrollListItem_styles = require("./VerticalScrollListItem.styles.cjs");
-const Tooltip = require("../../../Tooltip/Tooltip.cjs");
+const Tooltip = require("../../Tooltip/Tooltip.cjs");
 const HvVerticalScrollListItem = (props) => {
   const {
     id,

package/dist/cjs/{ScrollTo/Vertical → ScrollToVertical}/VerticalScrollListItem/VerticalScrollListItem.styles.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const focusUtils = require("../../../utils/focusUtils.cjs");
+const focusUtils = require("../../utils/focusUtils.cjs");
 const name = "HvVerticalScrollListItem";
 const { staticClasses, useClasses } = uikitReactUtils.createClasses(name, {
   root: {

package/dist/cjs/{ScrollTo → hooks}/useScrollTo.cjs

@@ -1,11 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const utils = require("./utils.cjs");
+const scroll = require("../utils/scroll.cjs");
 const useScrollTo = (selectedIndexProp = 0, scrollElementId = void 0, navigationMode = "push", relativeLinks = false, offset = 0, options = [], onChange = void 0, direction = "column") => {
   const RETRY_MAX = 5;
   const [selectedIndex, setSelectedIndex] = React.useState(selectedIndexProp);
-  const scrollEle = React.useRef(window);
+  const scrollEle = React.useRef(
+    typeof window !== "undefined" ? window : null
+  );
   const requestedAnimationFrame = React.useRef(0);
   const lastContainerScrollTop = React.useRef(0);
   const selectedIndexRef = React.useRef(selectedIndex);
@@ -13,15 +15,17 @@ const useScrollTo = (selectedIndexProp = 0, scrollElementId = void 0, navigation
     selectedIndexRef.current = selectedIndex;
   }, [selectedIndex]);
   React.useEffect(() => {
-    scrollEle.current = scrollElementId && document.getElementById(scrollElementId) || window;
-    lastContainerScrollTop.current = utils.verticalScrollOffset(scrollEle.current);
+    if (typeof window !== "undefined") {
+      scrollEle.current = scrollElementId && document.getElementById(scrollElementId) || window;
+      lastContainerScrollTop.current = scroll.verticalScrollOffset(scrollEle.current);
+    }
   }, [scrollElementId]);
   const checkScroll = React.useCallback(
     (event) => {
       if (requestedAnimationFrame.current === 0 && window?.requestAnimationFrame) {
         requestedAnimationFrame.current = window.requestAnimationFrame(() => {
           requestedAnimationFrame.current = 0;
-          const firstVisibleElementIndex = utils.findFirstVisibleElement(
+          const firstVisibleElementIndex = scroll.findFirstVisibleElement(
             scrollEle.current,
             options,
             offset
@@ -30,10 +34,10 @@ const useScrollTo = (selectedIndexProp = 0, scrollElementId = void 0, navigation
           if (firstVisibleElementIndex < 0) {
             newSelectedIndex = 0;
           }
-          if (newSelectedIndex < options.length - 1 && utils.isScrolledToTheBottom(scrollEle.current)) {
+          if (newSelectedIndex < options.length - 1 && scroll.isScrolledToTheBottom(scrollEle.current)) {
             newSelectedIndex += 1;
           }
-          const containerScrollTop = utils.getScrollTop(scrollEle.current);
+          const containerScrollTop = scroll.getScrollTop(scrollEle.current);
           const isScrollingDown = containerScrollTop > lastContainerScrollTop.current;
           lastContainerScrollTop.current = containerScrollTop;
           if (isScrollingDown) {
@@ -74,7 +78,7 @@ const useScrollTo = (selectedIndexProp = 0, scrollElementId = void 0, navigation
         checkRenderedInterval = setInterval(() => {
           const ele = document.getElementById(option.value);
           if (ele) {
-            utils.scrollElement(ele, scrollEle.current, option.offset || offset);
+            scroll.scrollElement(ele, scrollEle.current, option.offset || offset);
             clearInterval(checkRenderedInterval);
           } else {
             retry += 1;
@@ -89,7 +93,7 @@ const useScrollTo = (selectedIndexProp = 0, scrollElementId = void 0, navigation
       clearInterval(checkRenderedInterval);
     };
   }, []);
-  const baseUrl = relativeLinks || window == null ? "" : window.location.href.split("#")[0];
+  const baseUrl = relativeLinks || typeof window === "undefined" || window == null ? "" : window.location.href.split("#")[0];
   const elements = React.useMemo(
     () => options.map((o) => ({
       ...o,
@@ -103,7 +107,7 @@ const useScrollTo = (selectedIndexProp = 0, scrollElementId = void 0, navigation
       if (option) {
         const ele = document.getElementById(id);
         if (ele) {
-          utils.scrollElement(
+          scroll.scrollElement(
             ele,
             scrollEle.current,
             option.offset || offset,

package/dist/cjs/index.cjs

@@ -209,12 +209,12 @@ const Radio_styles = require("./Radio/Radio.styles.cjs");
 const Radio = require("./Radio/Radio.cjs");
 const RadioGroup_styles = require("./RadioGroup/RadioGroup.styles.cjs");
 const RadioGroup = require("./RadioGroup/RadioGroup.cjs");
-const VerticalScrollListItem_styles = require("./ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.cjs");
-const ScrollToVertical_styles = require("./ScrollTo/Vertical/ScrollToVertical.styles.cjs");
-const ScrollToVertical = require("./ScrollTo/Vertical/ScrollToVertical.cjs");
-const HorizontalScrollListItem_styles = require("./ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.cjs");
-const ScrollToHorizontal_styles = require("./ScrollTo/Horizontal/ScrollToHorizontal.styles.cjs");
-const ScrollToHorizontal = require("./ScrollTo/Horizontal/ScrollToHorizontal.cjs");
+const HorizontalScrollListItem_styles = require("./ScrollToHorizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.cjs");
+const ScrollToHorizontal_styles = require("./ScrollToHorizontal/ScrollToHorizontal.styles.cjs");
+const ScrollToHorizontal = require("./ScrollToHorizontal/ScrollToHorizontal.cjs");
+const VerticalScrollListItem_styles = require("./ScrollToVertical/VerticalScrollListItem/VerticalScrollListItem.styles.cjs");
+const ScrollToVertical_styles = require("./ScrollToVertical/ScrollToVertical.styles.cjs");
+const ScrollToVertical = require("./ScrollToVertical/ScrollToVertical.cjs");
 const Section_styles = require("./Section/Section.styles.cjs");
 const Section = require("./Section/Section.cjs");
 const SimpleGrid_styles = require("./SimpleGrid/SimpleGrid.styles.cjs");
@@ -566,12 +566,12 @@ exports.radioClasses = Radio_styles.staticClasses;
 exports.HvRadio = Radio.HvRadio;
 exports.radioGroupClasses = RadioGroup_styles.staticClasses;
 exports.HvRadioGroup = RadioGroup.HvRadioGroup;
-exports.verticalScrollListItemClasses = VerticalScrollListItem_styles.staticClasses;
-exports.scrollToVerticalClasses = ScrollToVertical_styles.staticClasses;
-exports.HvScrollToVertical = ScrollToVertical.HvScrollToVertical;
 exports.horizontalScrollListItemClasses = HorizontalScrollListItem_styles.staticClasses;
 exports.scrollToHorizontalClasses = ScrollToHorizontal_styles.staticClasses;
 exports.HvScrollToHorizontal = ScrollToHorizontal.HvScrollToHorizontal;
+exports.verticalScrollListItemClasses = VerticalScrollListItem_styles.staticClasses;
+exports.scrollToVerticalClasses = ScrollToVertical_styles.staticClasses;
+exports.HvScrollToVertical = ScrollToVertical.HvScrollToVertical;
 exports.sectionClasses = Section_styles.staticClasses;
 exports.HvSection = Section.HvSection;
 exports.simpleGridClasses = SimpleGrid_styles.staticClasses;

package/dist/cjs/{ScrollTo/utils.cjs → utils/scroll.cjs}

@@ -1,6 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const getScrollTop = (c = window) => {
+  if (c === null) {
+    return 0;
+  }
   if (c === window) {
     return window.scrollY || window.pageYOffset || document.documentElement?.scrollTop || document.body.scrollTop;
   }
@@ -25,6 +28,9 @@ const horizontalScrollOffset = (t, c = window) => {
   return t.offsetLeft - c.offsetLeft;
 };
 const scrollElement = (element, container, offset = 0, direction) => {
+  if (container === null) {
+    return;
+  }
   if (direction === "row") {
     const elemLeft = horizontalScrollOffset(element, container);
     container?.scrollTo?.({
@@ -41,6 +47,9 @@ const scrollElement = (element, container, offset = 0, direction) => {
   element.focus({ preventScroll: true });
 };
 const isScrolledToTheBottom = (container) => {
+  if (container === null) {
+    return false;
+  }
   const containerScrollTop = getScrollTop(container);
   if (container === window) {
     const scrollHeight = document.documentElement?.scrollHeight || document.body.scrollHeight;
@@ -49,6 +58,9 @@ const isScrolledToTheBottom = (container) => {
   return containerScrollTop + container.offsetHeight >= container.scrollHeight;
 };
 const findFirstVisibleElement = (container, options, offset) => {
+  if (container === null) {
+    return -1;
+  }
   const boundsTop = verticalScrollOffset(container);
   let i = 0;
   for (; i < options.length; i += 1) {

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

@@ -1,16 +1,19 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } 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 { useClasses } from "./BannerContent.styles.js";
 import { staticClasses } from "./BannerContent.styles.js";
-import { HvMessageContainer } from "./MessageContainer/MessageContainer.js";
-import { HvActionContainer } from "./ActionContainer/ActionContainer.js";
+import { HvActionsGeneric } from "../../ActionsGeneric/ActionsGeneric.js";
+import { HvButton } from "../../Button/Button.js";
 const HvBannerContent = forwardRef(
   function HvBannerContent2(props, ref) {
     const {
       id,
       classes: classesProp,
+      className,
       showIcon = false,
       customIcon,
       variant = "default",
@@ -21,12 +24,17 @@ const HvBannerContent = forwardRef(
       onAction,
       actionsPosition = "auto",
       content,
+      children,
       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,
       {
@@ -37,33 +45,57 @@ const HvBannerContent = forwardRef(
           message: classes.message,
           action: classes.action
         },
-        className: cx(classes?.baseVariant, classes?.[variant]),
-        message: /* @__PURE__ */ jsx(
-          HvMessageContainer,
-          {
-            id,
-            icon,
-            ...effectiveActionsPosition === "inline" && {
+        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,
-              actionsOnMessageCallback: actionsCallback,
-              onAction
-            },
-            message: content
-          }
-        ),
-        action: /* @__PURE__ */ jsx(
-          HvActionContainer,
-          {
-            id,
-            onClose,
-            ...effectiveActionsPosition === "bottom-right" && {
-              action: actions,
-              actionCallback: actionsCallback,
-              onAction
-            },
-            ...actionProps
-          }
-        ),
+              onAction: handleAction
+            }
+          ) })
+        ] }),
         ...others
       }
     ) });

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 { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvActionsGenericProps } from \"../../ActionsGeneric\";\nimport { iconVariant } from \"../../utils/iconVariant\";\nimport { HvBannerActionPosition, HvBannerVariant } from \"../types\";\nimport { HvActionContainer, HvActionContainerProps } from \"./ActionContainer\";\nimport { staticClasses, useClasses } from \"./BannerContent.styles\";\nimport { HvMessageContainer } from \"./MessageContainer\";\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. */\n  content?: string;\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?: HvActionContainerProps;\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      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      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    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])}\n          message={\n            <HvMessageContainer\n              id={id}\n              icon={icon}\n              {...(effectiveActionsPosition === \"inline\" && {\n                actions,\n                actionsOnMessageCallback: actionsCallback,\n                onAction,\n              })}\n              message={content}\n            />\n          }\n          action={\n            <HvActionContainer\n              id={id}\n              onClose={onClose}\n              {...(effectiveActionsPosition === \"bottom-right\" && {\n                action: actions,\n                actionCallback: actionsCallback,\n                onAction,\n              })}\n              {...actionProps}\n            />\n          }\n          {...others}\n        />\n      </div>\n    );\n  },\n);\n"],"names":["HvBannerContent"],"mappings":";;;;;;;;AA+CO,MAAM,kBAAkB;AAAA,EAC7B,SAASA,iBAAgB,OAAO,KAAK;AAC7B,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT,WAAW;AAAA,MACX;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAClB;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;AAE1C,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,SAAS,aAAa,UAAU,OAAO,CAAC;AAAA,QACtD,SACE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACC,GAAI,6BAA6B,YAAY;AAAA,cAC5C;AAAA,cACA,0BAA0B;AAAA,cAC1B;AAAA,YACF;AAAA,YACA,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,QAEF,QACE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACC,GAAI,6BAA6B,kBAAkB;AAAA,cAClD,QAAQ;AAAA,cACR,gBAAgB;AAAA,cAChB;AAAA,YACF;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QACN;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 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;"}

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

@@ -13,7 +13,9 @@ const { useClasses, staticClasses } = createClasses("HvBannerContent", {
     display: "flex",
     alignItems: "center",
     padding: theme.spacing("xs", 0),
-    paddingLeft: theme.space.sm
+    paddingLeft: theme.space.sm,
+    ...theme.typography.body,
+    color: theme.colors.base_dark
   },
   action: {
     padding: theme.spacing("xs"),
@@ -39,6 +41,33 @@ const { useClasses, staticClasses } = createClasses("HvBannerContent", {
   outContainer: {
     width: "100%",
     position: "relative"
+  },
+  messageContainer: {
+    wordBreak: "break-word",
+    maxWidth: 700,
+    overflow: "hidden",
+    marginRight: 10
+  },
+  iconContainer: {
+    marginRight: theme.space.xs,
+    marginLeft: -theme.space.xs
+  },
+  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"
   }
 });
 export {

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  },\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});\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,EAC3B;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,EAAA;AAEd,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    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;"}

package/dist/esm/Box/Box.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.js","sources":["../../../src/Box/Box.tsx"],"sourcesContent":["import { useDefaultProps } from \"@hitachivantara/uikit-react-utils\";\nimport { HvTheme, theme } from \"@hitachivantara/uikit-styles\";\n\nimport {\n  fixedForwardRef,\n  PolymorphicComponentRef,\n  PolymorphicRef,\n} from \"../types/generic\";\n\n// v6 - This shouldn't be named HvBoxProps\nexport type HvBoxProps<C extends React.ElementType = \"div\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      style?: React.CSSProperties;\n      sx?: React.CSSProperties | ((theme: HvTheme) => React.CSSProperties);\n    }\n  >;\n\nconst sxFn = (sx: HvBoxProps[\"sx\"]) => {\n  return typeof sx === \"function\" ? sx(theme) : sx;\n};\n\n/**\n * Customizable layout component that can be used to wrap other components.\n * It can be used to add styles to the wrapped components.\n * It can also be used to create a layout using the flexbox properties.\n */\nexport const HvBox = fixedForwardRef(function HvBox<\n  C extends React.ElementType = \"div\",\n>(props: HvBoxProps<C>, ref?: PolymorphicRef<C>) {\n  const {\n    style,\n    component: Component = \"div\",\n    sx,\n    children,\n    classes, // Extracted since useDefaultProps creates this prop even if it's not part of the component's API\n    ...restProps\n  } = useDefaultProps(\"HvBox\", props);\n\n  return (\n    <Component style={sx ? sxFn(sx) : style} ref={ref} {...restProps}>\n      {children}\n    </Component>\n  );\n});\n"],"names":["HvBox"],"mappings":";;;;AAmBA,MAAM,OAAO,CAAC,OAAyB;AACrC,SAAO,OAAO,OAAO,aAAa,GAAG,KAAK,IAAI;AAChD;AAOO,MAAM,QAAQ,gBAAgB,SAASA,OAE5C,OAAsB,KAAyB;AACzC,QAAA;AAAA,IACJ;AAAA,IACA,WAAW,YAAY;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,SAAS,KAAK;AAGhC,SAAA,oBAAC,WAAU,EAAA,OAAO,KAAK,KAAK,EAAE,IAAI,OAAO,KAAW,GAAG,WACpD,SACH,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"Box.js","sources":["../../../src/Box/Box.tsx"],"sourcesContent":["import { useDefaultProps } from \"@hitachivantara/uikit-react-utils\";\nimport { HvTheme, theme } from \"@hitachivantara/uikit-styles\";\n\nimport {\n  fixedForwardRef,\n  PolymorphicComponentRef,\n  PolymorphicRef,\n} from \"../types/generic\";\n\n// v6 - This shouldn't be named HvBoxProps\nexport type HvBoxProps<C extends React.ElementType = \"div\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      style?: React.CSSProperties;\n      sx?: React.CSSProperties | ((theme: HvTheme) => React.CSSProperties);\n    }\n  >;\n\nconst sxFn = (sx: HvBoxProps[\"sx\"]) => {\n  return typeof sx === \"function\" ? sx(theme) : sx;\n};\n\n/**\n * Customizable layout component that can be used to wrap other components.\n * It can be used to add styles to the wrapped components.\n * It can also be used to create a layout using the flexbox properties.\n * @deprecated use native elements instead (e.g. `div`)\n */\nexport const HvBox = fixedForwardRef(function HvBox<\n  C extends React.ElementType = \"div\",\n>(props: HvBoxProps<C>, ref?: PolymorphicRef<C>) {\n  const {\n    style,\n    component: Component = \"div\",\n    sx,\n    children,\n    classes, // Extracted since useDefaultProps creates this prop even if it's not part of the component's API\n    ...restProps\n  } = useDefaultProps(\"HvBox\", props);\n\n  return (\n    <Component style={sx ? sxFn(sx) : style} ref={ref} {...restProps}>\n      {children}\n    </Component>\n  );\n});\n"],"names":["HvBox"],"mappings":";;;;AAmBA,MAAM,OAAO,CAAC,OAAyB;AACrC,SAAO,OAAO,OAAO,aAAa,GAAG,KAAK,IAAI;AAChD;AAQO,MAAM,QAAQ,gBAAgB,SAASA,OAE5C,OAAsB,KAAyB;AACzC,QAAA;AAAA,IACJ;AAAA,IACA,WAAW,YAAY;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,SAAS,KAAK;AAGhC,SAAA,oBAAC,WAAU,EAAA,OAAO,KAAK,KAAK,EAAE,IAAI,OAAO,KAAW,GAAG,WACpD,SACH,CAAA;AAEJ,CAAC;"}