@hitachivantara/uikit-react-pentaho 0.10.20 → 6.0.0-next.1

package/dist/{esm/Canvas → Canvas}/ToolbarTabs/ToolbarTabEditor.js

@@ -3,7 +3,7 @@ import { useRef, useState } from "react";
 import { createClasses, theme, useControlled, useEnhancedEffect, HvTypography, isKey } from "@hitachivantara/uikit-react-core";
 import { Edit } from "@hitachivantara/uikit-react-icons";
 const { staticClasses, useClasses } = createClasses(
-  "HvCanvasToolbarTabs-editor",
+  "HvCanvasToolbarTabsEditor",
   {
     root: {
       position: "relative",

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

@@ -267,7 +267,7 @@ declare interface ToolbarTabsTab {
 
 export declare const useCanvasContext: () => HvCanvasContextValue | null;
 
-declare const useClasses: (classesProp?: Partial<Record<"content" | "tab" | "root" | "actionsDisabled" | "minimized" | "closed" | "multipleTabs" | "overflowing" | "tabTitle" | "tabsRoot" | "leftActions" | "rightActions", string>>, addStatic?: boolean) => {
+declare const useClasses: (classesProp?: Partial<Record<"content" | "tab" | "root" | "minimized" | "closed" | "actionsDisabled" | "multipleTabs" | "overflowing" | "tabTitle" | "tabsRoot" | "leftActions" | "rightActions", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         closed: string;

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@hitachivantara/uikit-react-pentaho",
-  "version": "0.10.20",
+  "version": "6.0.0-next.1",
+  "type": "module",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "UI Kit Pentaho React components.",
@@ -24,15 +25,15 @@
   "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": {
     "@emotion/css": "^11.11.0",
-    "@hitachivantara/uikit-react-core": "^5.109.0",
-    "@hitachivantara/uikit-react-icons": "^5.16.9",
-    "@hitachivantara/uikit-react-utils": "^0.2.49",
+    "@hitachivantara/uikit-react-core": "^6.0.0-next.3",
+    "@hitachivantara/uikit-react-icons": "^6.0.0-next.3",
+    "@hitachivantara/uikit-react-utils": "^6.0.0-next.3",
     "@mui/base": "5.0.0-beta.68",
     "react-resize-detector": "^8.1.0"
   },
@@ -43,14 +44,13 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "6d8da4ec057c2815bbf32ca60f9464d82443ab8f",
+  "gitHead": "f404f47dd2c0a9d4033b9acccc87282aa9e42119",
   "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/Canvas/BottomPanel/BottomPanel.cjs

@@ -1,208 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const reactResizeDetector = require("react-resize-detector");
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const CanvasContext = require("../CanvasContext.cjs");
-const BottomPanel_styles = require("./BottomPanel.styles.cjs");
-const PanelTabs = require("../PanelTabs/PanelTabs.cjs");
-const PanelTab = require("../PanelTab/PanelTab.cjs");
-const HvCanvasBottomPanel = react.forwardRef(function HvCanvasBottomPanel2(props, ref) {
-  const {
-    id: idProp,
-    className,
-    children,
-    open,
-    tabs,
-    minimize,
-    leftActions,
-    rightActions,
-    overflowActions,
-    selectedTabId: selectedTabIdProp,
-    classes: classesProp,
-    onTabChange,
-    onAction,
-    ...others
-  } = uikitReactCore.useDefaultProps("HvCanvasBottomPanel", props);
-  const { classes, cx } = BottomPanel_styles.useClasses(classesProp);
-  const canvasContext = CanvasContext.useCanvasContext();
-  const sidePanelWidth = canvasContext?.sidePanelWidth ?? 0;
-  const id = uikitReactCore.useUniqueId(idProp);
-  const { width: tabWidth = 0, ref: tabRef } = reactResizeDetector.useResizeDetector({
-    handleHeight: false
-  });
-  const { width: panelWidth = 0, ref: panelRef } = reactResizeDetector.useResizeDetector({
-    handleHeight: false
-  });
-  const { width: leftActionWidth = 32, ref: leftActionRef } = reactResizeDetector.useResizeDetector(
-    {
-      handleHeight: false,
-      refreshMode: "debounce",
-      refreshOptions: {
-        trailing: true
-      }
-    }
-  );
-  const { width: rightActionWidth = 32, ref: rightActionRef } = reactResizeDetector.useResizeDetector({
-    handleHeight: false,
-    refreshMode: "debounce",
-    refreshOptions: {
-      trailing: true
-    }
-  });
-  const overflowing = react.useMemo(() => {
-    const availableWidth = tabWidth - (leftActions ? leftActionWidth : 0) - (rightActions ? rightActionWidth : 0);
-    return availableWidth < 60;
-  }, [leftActionWidth, leftActions, rightActionWidth, rightActions, tabWidth]);
-  const [selectedTab, setSelectedTab] = uikitReactCore.useControlled(
-    selectedTabIdProp,
-    tabs[0].id
-  );
-  const handleTabChange = (event, tabId) => {
-    setSelectedTab(tabId);
-    onTabChange?.(event, tabId);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      id,
-      ref,
-      className: cx(
-        classes.root,
-        {
-          [classes.closed]: !open,
-          [classes.minimized]: minimize,
-          [classes.multipleTabs]: tabs.length > 1,
-          [classes.overflowing]: overflowing
-        },
-        className
-      ),
-      style: {
-        width: `calc(100% - ${sidePanelWidth}px - 2 * ${uikitReactCore.theme.space.sm})`,
-        right: uikitReactCore.theme.space.sm,
-        transition: canvasContext?.sidePanelDragging ? "height 0.3s ease, opacity 0.3s ease" : "width 0.3s ease"
-      },
-      ...others,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.tabsRoot, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            PanelTabs.HvCanvasPanelTabs,
-            {
-              style: {
-                // @ts-ignore
-                "--left-actions-width": overflowing || !leftActions ? uikitReactCore.theme.space.sm : `calc(${leftActionWidth}px + ${uikitReactCore.theme.space.xs})`,
-                "--right-actions-width": !rightActions || overflowing && !overflowActions ? uikitReactCore.theme.space.sm : `calc(${overflowing ? 32 : rightActionWidth}px + ${uikitReactCore.theme.space.xs})`
-              },
-              onChange: handleTabChange,
-              value: selectedTab,
-              children: tabs.map((tab, index) => /* @__PURE__ */ jsxRuntime.jsx(
-                PanelTab.HvCanvasPanelTab,
-                {
-                  ref: index === 0 ? tabRef : void 0,
-                  id: `${id}-${tab.id}`,
-                  value: tab.id,
-                  className: classes.tab,
-                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.tabTitle, children: typeof tab.title === "function" ? tab.title(overflowing) : tab.title })
-                },
-                tab.id
-              ))
-            }
-          ),
-          leftActions || rightActions || overflowActions ? tabs.map((tab, index) => {
-            const btnsDisabled = selectedTab !== tab.id && !minimize;
-            return /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                style: {
-                  // @ts-ignore
-                  "--tab-width": `${tabWidth}px`,
-                  "--right": `calc((${index} + 1) * var(--tab-width))`,
-                  "--left": `calc(${index} * var(--tab-width))`
-                },
-                children: [
-                  leftActions && !overflowing && /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      ref: leftActionRef,
-                      className: cx(classes.leftActions, {
-                        [classes.actionsDisabled]: btnsDisabled
-                      }),
-                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                        uikitReactCore.HvActionsGeneric,
-                        {
-                          maxVisibleActions: 1,
-                          actions: leftActions,
-                          disabled: btnsDisabled,
-                          onAction: (event, action) => onAction?.(event, action, tab.id),
-                          variant: "secondaryGhost",
-                          iconOnly: true
-                        }
-                      )
-                    }
-                  ),
-                  rightActions && !overflowing && /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      ref: rightActionRef,
-                      className: cx(classes.rightActions, {
-                        [classes.actionsDisabled]: btnsDisabled
-                      }),
-                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                        uikitReactCore.HvActionsGeneric,
-                        {
-                          maxVisibleActions: 2,
-                          actions: rightActions,
-                          disabled: btnsDisabled,
-                          onAction: (event, action) => onAction?.(event, action, tab.id),
-                          variant: "secondaryGhost",
-                          iconOnly: true
-                        }
-                      )
-                    }
-                  ),
-                  overflowActions && overflowing && /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: cx(classes.rightActions, {
-                        [classes.actionsDisabled]: btnsDisabled
-                      }),
-                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                        uikitReactCore.HvActionsGeneric,
-                        {
-                          maxVisibleActions: 0,
-                          actions: overflowActions,
-                          disabled: btnsDisabled,
-                          onAction: (event, action) => onAction?.(event, action, tab.id),
-                          variant: "secondaryGhost",
-                          iconOnly: true
-                        }
-                      )
-                    }
-                  )
-                ]
-              },
-              tab.id
-            );
-          }) : null
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          uikitReactCore.HvPanel,
-          {
-            ref: panelRef,
-            role: "tabpanel",
-            "aria-labelledby": `${id}-${selectedTab}`,
-            className: classes.content,
-            style: {
-              // @ts-ignore
-              "--right-border-radius": tabWidth * tabs.length >= panelWidth ? "0px" : "16px"
-            },
-            children
-          }
-        )
-      ]
-    }
-  );
-});
-exports.canvasBottomPanelClasses = BottomPanel_styles.staticClasses;
-exports.HvCanvasBottomPanel = HvCanvasBottomPanel;

package/dist/cjs/Canvas/BottomPanel/BottomPanel.styles.cjs

@@ -1,79 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const { staticClasses, useClasses } = uikitReactCore.createClasses(
-  "HvCanvasBottomPanel",
-  {
-    root: {
-      position: "absolute",
-      display: "flex",
-      flexDirection: "column",
-      right: 0,
-      bottom: 0,
-      width: "100%",
-      maxHeight: "500px",
-      visibility: "visible"
-    },
-    closed: {
-      maxHeight: 0,
-      visibility: "hidden"
-    },
-    minimized: {
-      "& $content": {
-        display: "none"
-      },
-      "& $tab": {
-        backgroundColor: uikitReactCore.theme.colors.bgContainer,
-        ...uikitReactCore.theme.typography.label
-      }
-    },
-    multipleTabs: {
-      "& $tab": { maxWidth: "288px" },
-      "& $rightActions": {
-        right: `calc(100% - var(--right) + ${uikitReactCore.theme.space.xs})`
-      }
-    },
-    overflowing: {},
-    tab: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-start",
-      width: "100%"
-    },
-    tabTitle: {
-      display: "flex",
-      width: "100%",
-      padding: uikitReactCore.theme.space.sm,
-      paddingLeft: "var(--left-actions-width)",
-      paddingRight: "var(--right-actions-width)"
-    },
-    tabsRoot: {
-      position: "relative"
-    },
-    leftActions: {
-      position: "absolute",
-      left: `calc(var(--left) + ${uikitReactCore.theme.space.xs})`,
-      top: 8
-    },
-    rightActions: {
-      position: "absolute",
-      right: uikitReactCore.theme.space.xs,
-      top: 8
-    },
-    actionsDisabled: {
-      pointerEvents: "none",
-      [`&& .${uikitReactCore.buttonClasses.disabled}`]: {
-        pointerEvents: "none",
-        backgroundColor: "transparent",
-        borderColor: "transparent",
-        ":hover": {
-          backgroundColor: "transparent",
-          borderColor: "transparent"
-        }
-      }
-    },
-    content: { borderTopRightRadius: "var(--right-border-radius)" }
-  }
-);
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/Canvas/CanvasContext.cjs

@@ -1,46 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const HvCanvasContext = react.createContext(null);
-const HvCanvasProvider = ({
-  children
-}) => {
-  const [sidePanelOpen, setSidePanelOpen] = react.useState(false);
-  const [width, setWidth] = react.useState(0);
-  const [sidePanelDragging, setSidePanelDragging] = react.useState(false);
-  const handleSidePanelWidth = react.useCallback((newWidth) => {
-    setWidth(newWidth);
-  }, []);
-  const handleSidePanelOpen = react.useCallback((open) => {
-    setSidePanelOpen(open);
-  }, []);
-  const handleSidePanelDragging = react.useCallback((dragging) => {
-    setSidePanelDragging(dragging);
-  }, []);
-  const value = react.useMemo(
-    () => ({
-      sidePanelOpen,
-      handleSidePanelOpen,
-      sidePanelWidth: sidePanelOpen ? width : 0,
-      handleSidePanelWidth,
-      sidePanelDragging,
-      handleSidePanelDragging
-    }),
-    [
-      sidePanelOpen,
-      handleSidePanelOpen,
-      width,
-      handleSidePanelWidth,
-      sidePanelDragging,
-      handleSidePanelDragging
-    ]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(HvCanvasContext.Provider, { value, children });
-};
-const useCanvasContext = () => {
-  return react.useContext(HvCanvasContext);
-};
-exports.HvCanvasContext = HvCanvasContext;
-exports.HvCanvasProvider = HvCanvasProvider;
-exports.useCanvasContext = useCanvasContext;

package/dist/cjs/Canvas/PanelTab/PanelTab.cjs

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const Tab = require("@mui/base/Tab");
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const PanelTab_styles = require("./PanelTab.styles.cjs");
-const HvCanvasPanelTab = react.forwardRef(function HvCanvasPanelTab2(props, ref) {
-  const {
-    classes: classesProp,
-    className,
-    ...others
-  } = uikitReactCore.useDefaultProps("HvCanvasPanelTab", props);
-  const { classes, cx } = PanelTab_styles.useClasses(classesProp);
-  return /* @__PURE__ */ jsxRuntime.jsx(Tab.Tab, { ref, className: cx(classes.root, className), ...others });
-});
-exports.canvasPanelTabClasses = PanelTab_styles.staticClasses;
-exports.HvCanvasPanelTab = HvCanvasPanelTab;

package/dist/cjs/Canvas/PanelTab/PanelTab.styles.cjs

@@ -1,36 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const Tab = require("@mui/base/Tab");
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const { staticClasses, useClasses } = uikitReactCore.createClasses("HvCanvasPanelTab", {
-  root: {
-    height: "100%",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flex: 1,
-    borderRadius: `${uikitReactCore.theme.radii.large} ${uikitReactCore.theme.radii.large} 0 0`,
-    backgroundColor: uikitReactCore.theme.colors.bgPage,
-    color: uikitReactCore.theme.colors.textSubtle,
-    overflow: "hidden",
-    width: "100%",
-    boxShadow: "0px -2px 8px 0px #4141410F",
-    paddingInlineEnd: 0,
-    paddingInlineStart: 0,
-    "&:hover": {
-      cursor: "pointer"
-    },
-    "&:focus": {
-      backgroundColor: uikitReactCore.theme.colors.bgContainer
-    },
-    [`&.${Tab.tabClasses.selected}`]: {
-      backgroundColor: uikitReactCore.theme.colors.bgContainer,
-      ...uikitReactCore.theme.typography.label
-    },
-    "&:focus-visible": {
-      ...uikitReactCore.outlineStyles
-    }
-  }
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/Canvas/PanelTabs/PanelTabs.cjs

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const Tabs = require("@mui/base/Tabs");
-const TabsList = require("@mui/base/TabsList");
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const PanelTabs_styles = require("./PanelTabs.styles.cjs");
-const HvCanvasPanelTabs = react.forwardRef(function HvCanvasPanelTabs2(props, ref) {
-  const {
-    selectionFollowsFocus = true,
-    children,
-    className,
-    classes: classesProp,
-    ...others
-  } = uikitReactCore.useDefaultProps("HvCanvasPanelTabs", props);
-  const { classes, cx } = PanelTabs_styles.useClasses(classesProp);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Tabs.Tabs,
-    {
-      ref,
-      className: cx(classes.root, className),
-      selectionFollowsFocus,
-      ...others,
-      children: /* @__PURE__ */ jsxRuntime.jsx(TabsList.TabsList, { className: classes.list, children })
-    }
-  );
-});
-exports.canvasPanelTabsClasses = PanelTabs_styles.staticClasses;
-exports.HvCanvasPanelTabs = HvCanvasPanelTabs;

package/dist/cjs/Canvas/PanelTabs/PanelTabs.styles.cjs

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const { staticClasses, useClasses } = uikitReactCore.createClasses(
-  "HvCanvasPanelTabs",
-  {
-    root: {},
-    list: {
-      display: "flex",
-      width: "100%",
-      height: 48
-    }
-  }
-);
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/Canvas/SidePanel/SidePanel.cjs

@@ -1,139 +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 uikitReactIcons = require("@hitachivantara/uikit-react-icons");
-const CanvasContext = require("../CanvasContext.cjs");
-const SidePanel_styles = require("./SidePanel.styles.cjs");
-const useResizable = require("./useResizable.cjs");
-const PanelTabs = require("../PanelTabs/PanelTabs.cjs");
-const PanelTab = require("../PanelTab/PanelTab.cjs");
-const DEFAULT_LABELS = {
-  open: "Open",
-  close: "Close"
-};
-const HvCanvasSidePanel = react.forwardRef(function HvCanvasSidePanel2(props, ref) {
-  const {
-    id: idProp,
-    tab: tabProp,
-    open: openProp,
-    defaultOpen = false,
-    tabs,
-    onToggle,
-    onTabChange,
-    labels: labelsProp,
-    minWidth = 100,
-    maxWidth = 500,
-    initialWidth = 320,
-    onResize,
-    className,
-    children,
-    classes: classesProp,
-    ...others
-  } = uikitReactCore.useDefaultProps("HvCanvasSidePanel", props);
-  const id = uikitReactCore.useUniqueId(idProp);
-  const canvasContext = CanvasContext.useCanvasContext();
-  const handleSidePanelWidth = canvasContext?.handleSidePanelWidth;
-  const sidePanelOpen = canvasContext?.sidePanelOpen;
-  const handleSidePanelOpen = canvasContext?.handleSidePanelOpen;
-  const handleSidePanelDragging = canvasContext?.handleSidePanelDragging;
-  const { classes, cx } = SidePanel_styles.useClasses(classesProp);
-  const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProp);
-  const [open, setOpen] = uikitReactCore.useControlled(openProp, Boolean(defaultOpen));
-  const [selectedTab, setSelectedTab] = uikitReactCore.useControlled(
-    tabProp,
-    tabs?.[0]?.id ?? "none"
-  );
-  react.useEffect(() => {
-    handleSidePanelOpen?.(open);
-  }, [handleSidePanelOpen, open]);
-  react.useEffect(() => {
-    handleSidePanelWidth?.(initialWidth);
-  }, [handleSidePanelWidth, initialWidth]);
-  const updateWidth = (width2) => {
-    handleSidePanelWidth?.(width2);
-    onResize?.(width2);
-  };
-  const { width, isDragging, getContainerProps, getSeparatorProps } = useResizable.useResizable({
-    ref,
-    initialWidth,
-    minWidth,
-    maxWidth,
-    onResize: updateWidth
-  });
-  react.useEffect(() => {
-    handleSidePanelDragging?.(isDragging);
-  }, [handleSidePanelDragging, isDragging]);
-  const handleTogglePanel = (event) => {
-    setOpen((prev) => !prev);
-    handleSidePanelOpen?.(!sidePanelOpen);
-    onToggle?.(event, !open);
-  };
-  const handleTabChange = (event, tabId) => {
-    setSelectedTab(tabId);
-    onTabChange?.(event, tabId);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        id,
-        className: cx(classes.root, className, {
-          [classes.open]: open,
-          [classes.close]: !open
-        }),
-        ...getContainerProps({ style: { ...!open && { width: 0 } } }),
-        ...others,
-        children: [
-          tabs && /* @__PURE__ */ jsxRuntime.jsx(
-            PanelTabs.HvCanvasPanelTabs,
-            {
-              className: classes.tabs,
-              value: selectedTab,
-              onChange: handleTabChange,
-              children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
-                PanelTab.HvCanvasPanelTab,
-                {
-                  id: `${id}-${tab.id}`,
-                  value: tab.id,
-                  children: tab.content
-                },
-                tab.id
-              ))
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            uikitReactCore.HvPanel,
-            {
-              role: tabs ? "tabpanel" : void 0,
-              "aria-labelledby": tabs ? `${id}-${selectedTab}` : void 0,
-              className: classes.content,
-              children
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { ...getSeparatorProps() }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      uikitReactCore.HvIconButton,
-      {
-        variant: "primaryGhost",
-        title: open ? labels.close : labels.open,
-        onClick: handleTogglePanel,
-        className: cx(classes.handle, {
-          [classes.handleOpen]: open,
-          [classes.handleClose]: !open
-        }),
-        style: {
-          left: open ? width : 0,
-          transition: isDragging ? "none" : void 0
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.End, { rotate: open })
-      }
-    )
-  ] });
-});
-exports.canvasSidePanelClasses = SidePanel_styles.staticClasses;
-exports.HvCanvasSidePanel = HvCanvasSidePanel;