@hitachivantara/uikit-react-lab 5.46.13 → 6.0.0-next.2

package/dist/{esm/Flow → Flow}/Background/Background.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { Background } from "reactflow";
 import { getColor, theme } from "@hitachivantara/uikit-styles";
 const HvFlowBackground = ({
-  color = "secondary",
+  color = "text",
   ...others
 }) => {
   return /* @__PURE__ */ jsx(

package/dist/{esm/Flow → Flow}/Empty/Empty.styles.js

@@ -5,7 +5,7 @@ const { staticClasses, useClasses } = createClasses("HvFlowEmpty", {
     height: "100%",
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: theme.colors.backgroundColor,
+    backgroundColor: theme.colors.bgPage,
     position: "absolute",
     zIndex: theme.zIndices.popover
   }

package/dist/{esm/Flow → Flow}/Node/Node.js

@@ -17,8 +17,6 @@ const HvFlowNode = ({
   type,
   headerItems,
   actions,
-  actionCallback,
-  // TODO - remove in v6
   onAction,
   maxVisibleActions = 1,
   expanded = false,
@@ -97,7 +95,6 @@ const HvFlowNode = ({
               className: classes.actions,
               classes: { button: classes.actionsButton },
               actions,
-              actionsCallback: actionCallback,
               onAction,
               maxVisibleActions,
               iconOnly: actionsIconOnly

package/dist/{esm/Flow → Flow}/Sidebar/Sidebar.js

@@ -78,7 +78,7 @@ const HvFlowSidebar = ({
       classes: {
         paper: classes.drawerPaper
       },
-      showBackdrop: false,
+      hideBackdrop: true,
       anchor,
       buttonTitle,
       ...others,

package/dist/{esm/StepNavigation → StepNavigation}/DefaultNavigation/DefaultNavigation.js

@@ -1,5 +1,4 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useTheme } from "@hitachivantara/uikit-react-core";
 import { stepSizes, getColor } from "./utils.js";
 import { HvStep } from "./Step/Step.js";
 const HvDefaultNavigation = ({
@@ -11,7 +10,6 @@ const HvDefaultNavigation = ({
   children,
   ...other
 }) => {
-  const { activeTheme } = useTheme();
   const { container: maxSize, avatar: minSize } = stepSizes[stepSize];
   const StepComponent = HvStep;
   const stepsWidth = maxSize + minSize * (numSteps - 1);
@@ -38,7 +36,7 @@ const HvDefaultNavigation = ({
             minWidth,
             maxWidth,
             getColor,
-            height: activeTheme?.stepNavigation.defaultSeparatorHeight || 0
+            height: 1
           },
           stepValues: {
             minSize,

package/dist/{esm/StepNavigation → StepNavigation}/SimpleNavigation/SimpleNavigation.js

@@ -1,5 +1,4 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useTheme } from "@hitachivantara/uikit-react-core";
 import { dotSizes, getColor } from "./utils.js";
 import { HvDot } from "./Dot/Dot.js";
 const HvSimpleNavigation = ({
@@ -10,7 +9,6 @@ const HvSimpleNavigation = ({
   children,
   ...others
 }) => {
-  const { activeTheme } = useTheme();
   const dotSize = dotSizes[stepSize];
   const StepComponent = HvDot;
   const stepsWidth = (numSteps + 0.5) * dotSize;
@@ -35,7 +33,7 @@ const HvSimpleNavigation = ({
             minWidth,
             maxWidth,
             getColor,
-            height: activeTheme?.stepNavigation.simpleSeparatorHeight || 0
+            height: 1
           },
           stepValues: {
             minSize: dotSize,

package/dist/{esm/StepNavigation → StepNavigation}/StepNavigation.js

@@ -32,12 +32,7 @@ const HvStepNavigation = ({
     height: containerSize
   });
   const styledSeparatorElement = (title, separatorClassName, separatorHeight, separatorWidth, backgroundColor) => {
-    const widthValue = separatorWidth - 2 * Number(
-      (activeTheme?.stepNavigation.separatorMargin || "0px").replace(
-        "px",
-        ""
-      )
-    );
+    const widthValue = separatorWidth - 2 * 4;
     return /* @__PURE__ */ jsx(
       "li",
       {
@@ -47,7 +42,7 @@ const HvStepNavigation = ({
             height: separatorHeight,
             width: widthValue,
             backgroundColor,
-            margin: `0 ${theme.stepNavigation.separatorMargin}`
+            margin: `0 4px`
           }),
           classes.separator
         ),

package/dist/{esm/Wizard → Wizard}/WizardTitle/WizardTitle.js

@@ -23,7 +23,7 @@ const HvWizardTitle = ({
   customStep = {}
 }) => {
   const { context, setSummary, tab, setTab } = useContext(HvWizardContext);
-  const { classes, cx } = useClasses(classesProp);
+  const { classes } = useClasses(classesProp);
   const [steps, setSteps] = useState([]);
   useEffect(() => {
     return () => {
@@ -45,52 +45,36 @@ const HvWizardTitle = ({
     );
     setSteps(updatedSteps);
   }, [context, tab, setTab]);
-  return /* @__PURE__ */ jsxs(
-    HvDialogTitle,
-    {
-      className: cx(
-        classes.root,
-        classes.headerContainer,
-        classes.messageContainer,
-        classes.titleContainer
-      ),
-      showIcon: false,
-      children: [
-        title && /* @__PURE__ */ jsx(HvTypography, { variant: "title3", component: "div", children: title }),
-        !!steps.length && /* @__PURE__ */ jsx(
-          HvStepNavigation,
-          {
-            className: classes.stepContainer,
-            steps,
-            type: "Default",
-            stepSize: "xs",
-            width: {
-              xs: 200,
-              sm: 350,
-              md: 600,
-              lg: 800,
-              xl: 1e3
-            },
-            ...customStep
-          }
-        ),
-        hasSummary && /* @__PURE__ */ jsx(
-          HvButton,
-          {
-            variant: "secondarySubtle",
-            className: cx(
-              classes.summaryButton,
-              classes.buttonWidth,
-              classes.rootSummaryButton
-            ),
-            onClick: toggleSummary,
-            startIcon: /* @__PURE__ */ jsx(Report, {}),
-            children: `${labels.summary ?? "Summary"}`
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(HvDialogTitle, { className: classes.root, showIcon: false, children: [
+    title && /* @__PURE__ */ jsx(HvTypography, { variant: "title3", component: "div", children: title }),
+    !!steps.length && /* @__PURE__ */ jsx(
+      HvStepNavigation,
+      {
+        className: classes.stepContainer,
+        steps,
+        type: "Default",
+        stepSize: "xs",
+        width: {
+          xs: 200,
+          sm: 350,
+          md: 600,
+          lg: 800,
+          xl: 1e3
+        },
+        ...customStep
+      }
+    ),
+    hasSummary && /* @__PURE__ */ jsx(
+      HvButton,
+      {
+        variant: "secondarySubtle",
+        className: classes.summaryButton,
+        onClick: toggleSummary,
+        startIcon: /* @__PURE__ */ jsx(Report, {}),
+        children: `${labels.summary ?? "Summary"}`
+      }
+    )
+  ] });
 };
 export {
   HvWizardTitle,

package/dist/{esm/Wizard → Wizard}/WizardTitle/WizardTitle.styles.js

@@ -6,17 +6,7 @@ const { staticClasses, useClasses } = createClasses("HvWizardTitle", {
     justifyContent: "space-between",
     paddingRight: theme.space.sm
   },
-  /** @deprecated use `classes.root` */
-  headerContainer: {},
-  /** @deprecated use `classes.root` */
-  messageContainer: {},
-  /** @deprecated use `classes.root` */
-  titleContainer: {},
   summaryButton: {},
-  /** @deprecated use `classes.summaryButton` */
-  buttonWidth: {},
-  /** @deprecated use `classes.summaryButton` */
-  rootSummaryButton: {},
   stepContainer: {
     margin: "auto"
   }

package/dist/{types/index.d.ts → index.d.ts}

@@ -149,10 +149,10 @@ export declare const flowNodeClasses: {
     mandatory: string;
     title: string;
     root: string;
+    footerContainer: string;
     titleContainer: string;
     inputContainer: string;
     handle: string;
-    footerContainer: string;
     headerContainer: string;
     inputsTitleContainer: string;
     outputsTitleContainer: string;
@@ -340,10 +340,10 @@ export declare const hvDashboardNodeClasses: {
     title: string;
     root: string;
     actions: string;
+    footerContainer: string;
     titleContainer: string;
     inputContainer: string;
     handle: string;
-    footerContainer: string;
     headerContainer: string;
     inputsTitleContainer: string;
     outputsTitleContainer: string;
@@ -432,7 +432,7 @@ export declare const HvFlow: ({ nodeGroups, sidebar, defaultActions, dndContextP
 export declare const HvFlowBackground: ({ color, ...others }: HvFlowBackgroundProps) => JSX_2.Element;
 
 export declare interface HvFlowBackgroundProps extends Omit<BackgroundProps, "color"> {
-    /** Color for the background dots. Defaults to `secondary`. */
+    /** Color for the background dots. Defaults to `text`. */
     color?: HvColorAny;
 }
 
@@ -509,7 +509,7 @@ export declare interface HvFlowMinimapProps<NodeData = any> extends Omit<MiniMap
     classes?: HvFlowMinimapClasses;
 }
 
-export declare const HvFlowNode: ({ id, type, headerItems, actions, actionCallback, onAction, maxVisibleActions, expanded, actionsIconOnly, params, classes: classesProp, labels: labelsProps, children, expandParamsButtonProps, disableInlineEdit, title: titleProp, subtitle: subtitleProp, description, groupId, color: colorProp, icon: iconProp, ...props }: HvFlowNodeProps<unknown>) => JSX_2.Element;
+export declare const HvFlowNode: ({ id, type, headerItems, actions, onAction, maxVisibleActions, expanded, actionsIconOnly, params, classes: classesProp, labels: labelsProps, children, expandParamsButtonProps, disableInlineEdit, title: titleProp, subtitle: subtitleProp, description, groupId, color: colorProp, icon: iconProp, ...props }: HvFlowNodeProps<unknown>) => JSX_2.Element;
 
 export declare interface HvFlowNodeAction extends HvActionGeneric {
     callback?: (node: Node_2) => void;
@@ -573,12 +573,6 @@ export declare interface HvFlowNodeProps<T = any> extends HvFlowBaseNodeProps<T>
     description?: string;
     /** Node actions. */
     actions?: HvActionsGenericProps["actions"];
-    /**
-     * Node action callback.
-     *
-     * @deprecated Use `onAction` instead.
-     * */
-    actionCallback?: HvActionsGenericProps["actionsCallback"];
     /** Node action callback. */
     onAction?: HvActionsGenericProps["onAction"];
     /** Whether the actions should be all icon buttons when visible. @default true */
@@ -907,7 +901,7 @@ export declare type StickyNodeData = undefined | {
     onDelete?: () => void;
 };
 
-declare const useClasses: (classesProp?: Partial<Record<"container" | "button" | "expanded" | "disabled" | "root" | "heading" | "fullWidth" | "textOnlyLabel", string>>, addStatic?: boolean) => {
+declare const useClasses: (classesProp?: Partial<Record<"container" | "button" | "expanded" | "disabled" | "heading" | "root" | "fullWidth" | "textOnlyLabel", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         expanded: string;
@@ -968,22 +962,17 @@ declare const useClasses_13: (classesProp?: Partial<Record<"actionsContainer" |
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_14: (classesProp?: Partial<Record<"root" | "messageContainer" | "titleContainer" | "headerContainer" | "buttonWidth" | "summaryButton" | "rootSummaryButton" | "stepContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_14: (classesProp?: Partial<Record<"root" | "summaryButton" | "stepContainer", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
-        headerContainer: string;
-        messageContainer: string;
-        titleContainer: string;
         summaryButton: string;
-        buttonWidth: string;
-        rootSummaryButton: string;
         stepContainer: string;
     };
     readonly css: any;
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_15: (classesProp?: Partial<Record<"root" | "closeButton" | "paper", string>>, addStatic?: boolean) => {
+declare const useClasses_15: (classesProp?: Partial<Record<"root" | "paper" | "closeButton", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         paper: string;
@@ -1050,7 +1039,7 @@ declare const useClasses_6: (classesProp?: Partial<Record<"description" | "title
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_7: (classesProp?: Partial<Record<"mandatory" | "title" | "root" | "titleContainer" | "inputContainer" | "handle" | "footerContainer" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "contentContainer" | "inputsContainer" | "outputsContainer" | "inputGroupContainer" | "outputGroupContainer" | "outputContainer" | "handleConnected", string>>, addStatic?: boolean) => {
+declare const useClasses_7: (classesProp?: Partial<Record<"mandatory" | "title" | "root" | "footerContainer" | "titleContainer" | "inputContainer" | "handle" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "contentContainer" | "inputsContainer" | "outputsContainer" | "inputGroupContainer" | "outputGroupContainer" | "outputContainer" | "handleConnected", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         headerContainer: string;
@@ -1074,15 +1063,15 @@ declare const useClasses_7: (classesProp?: Partial<Record<"mandatory" | "title"
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_8: (classesProp?: Partial<Record<"mandatory" | "title" | "root" | "actions" | "titleContainer" | "inputContainer" | "handle" | "footerContainer" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "contentContainer" | "inputsContainer" | "outputsContainer" | "inputGroupContainer" | "outputGroupContainer" | "outputContainer" | "handleConnected" | "subtitle" | "subtitleContainer" | "inlineEditRoot" | "inlineEditButton" | "actionsButton" | "paramsContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_8: (classesProp?: Partial<Record<"mandatory" | "title" | "root" | "actions" | "footerContainer" | "titleContainer" | "inputContainer" | "handle" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "contentContainer" | "inputsContainer" | "outputsContainer" | "inputGroupContainer" | "outputGroupContainer" | "outputContainer" | "handleConnected" | "subtitle" | "subtitleContainer" | "inlineEditRoot" | "inlineEditButton" | "actionsButton" | "paramsContainer", string>>, addStatic?: boolean) => {
     readonly classes: {
         mandatory: string;
         title: string;
         root: string;
+        footerContainer: string;
         titleContainer: string;
         inputContainer: string;
         handle: string;
-        footerContainer: string;
         headerContainer: string;
         inputsTitleContainer: string;
         outputsTitleContainer: string;
@@ -1105,16 +1094,16 @@ declare const useClasses_8: (classesProp?: Partial<Record<"mandatory" | "title"
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_9: (classesProp?: Partial<Record<"mandatory" | "title" | "root" | "empty" | "actions" | "titleContainer" | "inputContainer" | "handle" | "footerContainer" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "contentContainer" | "inputsContainer" | "outputsContainer" | "inputGroupContainer" | "outputGroupContainer" | "outputContainer" | "handleConnected" | "subtitle" | "subtitleContainer" | "inlineEditRoot" | "inlineEditButton" | "actionsButton" | "paramsContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_9: (classesProp?: Partial<Record<"mandatory" | "title" | "root" | "empty" | "actions" | "footerContainer" | "titleContainer" | "inputContainer" | "handle" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "contentContainer" | "inputsContainer" | "outputsContainer" | "inputGroupContainer" | "outputGroupContainer" | "outputContainer" | "handleConnected" | "subtitle" | "subtitleContainer" | "inlineEditRoot" | "inlineEditButton" | "actionsButton" | "paramsContainer", string>>, addStatic?: boolean) => {
     readonly classes: {
         mandatory: string;
         title: string;
         root: string;
         actions: string;
+        footerContainer: string;
         titleContainer: string;
         inputContainer: string;
         handle: string;
-        footerContainer: string;
         headerContainer: string;
         inputsTitleContainer: string;
         outputsTitleContainer: string;
@@ -1512,12 +1501,7 @@ export declare const wizardContentClasses: {
 
 export declare const wizardTitleClasses: {
     root: string;
-    headerContainer: string;
-    messageContainer: string;
-    titleContainer: string;
     summaryButton: string;
-    buttonWidth: string;
-    rootSummaryButton: string;
     stepContainer: string;
 };
 

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@hitachivantara/uikit-react-lab",
-  "version": "5.46.13",
+  "version": "6.0.0-next.2",
+  "type": "module",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Contributed React components for the NEXT UI Kit.",
@@ -25,18 +26,18 @@
   "peerDependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.16.14",
-    "react": ">=17.0.0",
-    "react-dom": ">=17.0.0"
+    "@mui/material": "^7.0.2",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^6.0.1",
     "@emotion/css": "^11.11.0",
-    "@hitachivantara/uikit-react-core": "^5.106.1",
-    "@hitachivantara/uikit-react-icons": "^5.16.6",
-    "@hitachivantara/uikit-react-utils": "^0.2.46",
-    "@hitachivantara/uikit-styles": "^5.51.1",
+    "@hitachivantara/uikit-react-core": "^6.0.0-next.2",
+    "@hitachivantara/uikit-react-icons": "^6.0.0-next.2",
+    "@hitachivantara/uikit-react-utils": "^6.0.0-next.2",
+    "@hitachivantara/uikit-styles": "^6.0.0-next.2",
     "@mui/base": "5.0.0-beta.68",
     "@types/react-grid-layout": "^1.3.5",
     "react-grid-layout": "^1.4.4",
@@ -52,14 +53,13 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "7d60bff02f58ff47ae19146532553882c2e4b732",
+  "gitHead": "0b07240fb2ef75e046d8e6aaf0ff71bf2415c73f",
   "exports": {
     ".": {
-      "types": "./dist/types/index.d.ts",
-      "require": "./dist/cjs/index.cjs",
-      "import": "./dist/esm/index.js"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     }
   },
-  "types": "dist/types/index.d.ts",
-  "module": "dist/esm/index.js"
+  "types": "dist/index.d.ts",
+  "module": "dist/index.js"
 }

package/dist/cjs/Blade/Blade.cjs

@@ -1,174 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const Blade_styles = require("./Blade.styles.cjs");
-const HvBlade = (props) => {
-  const {
-    id: idProp,
-    className,
-    classes: classesProp,
-    expanded,
-    defaultExpanded = false,
-    label,
-    labelVariant = "label",
-    headingLevel,
-    onChange,
-    disabled = false,
-    children,
-    fullWidth,
-    buttonProps,
-    containerProps,
-    ...others
-  } = uikitReactCore.useDefaultProps("HvBlade", props);
-  const { classes, cx } = Blade_styles.useClasses(classesProp);
-  const [isExpanded, setIsExpanded] = uikitReactCore.useControlled(
-    expanded,
-    Boolean(defaultExpanded)
-  );
-  const handleAction = react.useCallback(
-    (event) => {
-      if (!disabled) {
-        onChange?.(event, !isExpanded);
-        setIsExpanded(!isExpanded);
-        return true;
-      }
-      return false;
-    },
-    [disabled, onChange, isExpanded, setIsExpanded]
-  );
-  const handleClick = react.useCallback(
-    (event) => {
-      handleAction(event);
-      event.preventDefault();
-      event.stopPropagation();
-    },
-    [handleAction]
-  );
-  const handleKeyDown = react.useCallback(
-    (event) => {
-      let isEventHandled = false;
-      const { key } = event;
-      if (event.altKey || event.ctrlKey || event.metaKey || event.currentTarget !== event.target) {
-        return;
-      }
-      switch (key) {
-        case "Enter":
-        case " ":
-          isEventHandled = handleAction(event);
-          break;
-        default:
-          return;
-      }
-      if (isEventHandled) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-    },
-    [handleAction]
-  );
-  const id = uikitReactCore.useUniqueId(idProp);
-  const bladeHeaderId = uikitReactCore.setId(id, "button");
-  const bladeContainerId = uikitReactCore.setId(id, "container");
-  const bladeHeader = react.useMemo(() => {
-    const buttonLabel = typeof label === "function" ? label(isExpanded) : label;
-    const bladeButton = /* @__PURE__ */ jsxRuntime.jsx(
-      uikitReactCore.HvTypography,
-      {
-        id: bladeHeaderId,
-        component: "div",
-        role: "button",
-        className: cx(classes.button, {
-          [classes.textOnlyLabel]: typeof buttonLabel === "string",
-          [classes.disabled]: disabled
-        }),
-        style: { flexShrink: headingLevel === void 0 ? 0 : void 0 },
-        disabled,
-        tabIndex: 0,
-        onKeyDown: handleKeyDown,
-        onClick: handleClick,
-        variant: labelVariant,
-        "aria-expanded": isExpanded,
-        "aria-controls": bladeContainerId,
-        ...buttonProps,
-        children: buttonLabel
-      }
-    );
-    return headingLevel === void 0 ? bladeButton : /* @__PURE__ */ jsxRuntime.jsx(
-      uikitReactCore.HvTypography,
-      {
-        component: `h${headingLevel}`,
-        variant: labelVariant,
-        className: classes.heading,
-        style: { flexShrink: 0 },
-        children: bladeButton
-      }
-    );
-  }, [
-    bladeContainerId,
-    bladeHeaderId,
-    buttonProps,
-    classes.button,
-    classes.disabled,
-    classes.heading,
-    classes.textOnlyLabel,
-    cx,
-    disabled,
-    handleClick,
-    handleKeyDown,
-    headingLevel,
-    isExpanded,
-    label,
-    labelVariant
-  ]);
-  const bladeRef = react.useRef(null);
-  const [maxWidth, setMaxWidth] = react.useState(void 0);
-  react.useEffect(() => {
-    if (!bladeRef.current) return;
-    const resizeObserver = new ResizeObserver((entries) => {
-      setMaxWidth(entries[0].target.clientWidth);
-    });
-    resizeObserver.observe(
-      // using the blade's container as reference max-width is more stable
-      bladeRef.current.parentElement ?? bladeRef.current
-    );
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [isExpanded]);
-  const { style: containerStyle, ...otherContainerProps } = containerProps || {};
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref: bladeRef,
-      id: idProp,
-      className: cx(classes.root, className, {
-        [classes.fullWidth]: fullWidth,
-        [classes.expanded]: isExpanded
-      }),
-      ...others,
-      children: [
-        bladeHeader,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            id: bladeContainerId,
-            role: "region",
-            "aria-labelledby": bladeHeaderId,
-            className: classes.container,
-            hidden: !isExpanded,
-            style: {
-              ...containerStyle,
-              maxWidth: isExpanded ? maxWidth : 0
-            },
-            ...otherContainerProps,
-            children
-          }
-        )
-      ]
-    }
-  );
-};
-exports.bladeClasses = Blade_styles.staticClasses;
-exports.HvBlade = HvBlade;