@hitachivantara/uikit-react-lab 5.36.0 → 5.36.1

package/dist/cjs/Canvas/{CanvasPanel/CanvasPanel.cjs → Panel/Panel.cjs}

@@ -1,11 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const React = require("react");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
-const CanvasPanel_styles = require("./CanvasPanel.styles.cjs");
-const CanvasTabs = require("../CanvasTabs/CanvasTabs.cjs");
+const Panel_styles = require("./Panel.styles.cjs");
+const Tabs = require("../Tabs/Tabs.cjs");
 const DEFAULT_LABELS = {
   open: "Open",
   close: "Close"
@@ -23,21 +22,9 @@ const HvCanvasPanel = (props) => {
     classes: classesProp,
     ...others
   } = uikitReactCore.useDefaultProps("HvCanvasPanel", props);
-  const { classes, cx } = CanvasPanel_styles.useClasses(classesProp);
+  const { classes, cx } = Panel_styles.useClasses(classesProp);
   const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProp);
-  const { rootId, activeTheme } = uikitReactCore.useTheme();
   const [open, setOpen] = uikitReactCore.useControlled(openProp, Boolean(defaultOpened));
-  const setPanelWidth = React.useCallback(() => {
-    if (rootId) {
-      document.getElementById(rootId)?.style.setProperty(
-        "--canvas-panel-width",
-        !open ? "0px" : `${320 + (activeTheme ? parseInt(activeTheme.space.md, 10) : 24)}px`
-      );
-    }
-  }, [activeTheme, open, rootId]);
-  React.useEffect(() => {
-    setPanelWidth();
-  }, [open, setPanelWidth]);
   const handleTogglePanel = (event) => {
     setOpen((prev) => !prev);
     onToggle?.(event, !open);
@@ -56,7 +43,7 @@ const HvCanvasPanel = (props) => {
         ...others,
         children: [
           tabs && /* @__PURE__ */ jsxRuntime.jsx(
-            CanvasTabs.HvCanvasTabs,
+            Tabs.HvCanvasTabs,
             {
               className: classes.tabs,
               tabs,
@@ -88,5 +75,5 @@ const HvCanvasPanel = (props) => {
     )
   ] });
 };
-exports.canvasPanelClasses = CanvasPanel_styles.staticClasses;
+exports.canvasPanelClasses = Panel_styles.staticClasses;
 exports.HvCanvasPanel = HvCanvasPanel;

package/dist/cjs/Canvas/{CanvasPanel/CanvasPanel.styles.cjs → Panel/Panel.styles.cjs}

@@ -8,16 +8,18 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses("HvCanvasPane
     position: "absolute",
     top: 0,
     left: 0,
-    boxShadow: `4px 0px 8px -4px color-mix(in srgb, #414141 12%, transparent)`,
+    boxShadow: "4px 0px 8px -4px color-mix(in srgb, #414141 12%, transparent)",
     zIndex: uikitStyles.theme.zIndices.overlay,
     backgroundColor: "transparent",
-    transition: "width 0.3s ease",
+    transition: "visibility 0.3s ease, width 0.3s ease",
     overflow: "hidden",
     "&$open": {
-      width: 320
+      width: 320,
+      visibility: "visible"
     },
     "&$close": {
-      width: 0
+      width: 0,
+      visibility: "hidden"
     }
   },
   tabs: {},
@@ -32,12 +34,12 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses("HvCanvasPane
     display: "flex",
     justifyContent: "center",
     zIndex: uikitStyles.theme.zIndices.overlay,
-    boxShadow: `4px 0px 8px -4px color-mix(in srgb, #414141 12%, transparent)`,
+    boxShadow: "4px 0px 8px -4px color-mix(in srgb, #414141 12%, transparent)",
     backgroundColor: uikitStyles.theme.colors.atmo1,
-    borderRadius: `0 ${uikitStyles.theme.radii.round} ${uikitStyles.theme.radii.round} 0 `,
+    borderRadius: `0 ${uikitStyles.theme.radii.round} ${uikitStyles.theme.radii.round} 0`,
     position: "absolute",
     transition: "left 0.3s ease",
-    top: `calc(50% - 86px)`,
+    top: "calc(50% - 86px)",
     "&$handleOpen": {
       left: 320
     },
@@ -46,10 +48,13 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses("HvCanvasPane
     },
     "&:hover": {
       cursor: "pointer"
+    },
+    "&:focus-visible": {
+      ...uikitReactCore.outlineStyles
     }
   },
   handleButton: {
-    top: `calc(50% - 16px)`,
+    top: "calc(50% - 16px)",
     position: "absolute"
   },
   open: {},

package/dist/cjs/Canvas/{CanvasTabs/CanvasTabs.cjs → Tabs/Tabs.cjs}

@@ -6,7 +6,7 @@ const Tab = require("@mui/base/Tab");
 const Tabs = require("@mui/base/Tabs");
 const TabsList = require("@mui/base/TabsList");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const CanvasTabs_styles = require("./CanvasTabs.styles.cjs");
+const Tabs_styles = require("./Tabs.styles.cjs");
 const HvCanvasTabs = (props) => {
   const {
     tabs,
@@ -15,10 +15,8 @@ const HvCanvasTabs = (props) => {
     classes: classesProp,
     ...others
   } = uikitReactCore.useDefaultProps("HvCanvasTabs", props);
-  const { classes, cx } = CanvasTabs_styles.useClasses(classesProp);
-  const [selectedTab, setSelectedTab] = React.useState(
-    tabs?.[0]?.id || "none"
-  );
+  const { classes, cx } = Tabs_styles.useClasses(classesProp);
+  const [selectedTab, setSelectedTab] = React.useState(tabs?.[0]?.id || "none");
   const handleTabChange = (event, value) => {
     onChange?.(event, value);
     setSelectedTab(value);
@@ -38,7 +36,6 @@ const HvCanvasTabs = (props) => {
           className: cx(classes.tab, {
             [classes.selected]: tab.id === selectedTab
           }),
-          onChange: handleTabChange,
           tabIndex: 0,
           children: tab.content
         },
@@ -47,5 +44,5 @@ const HvCanvasTabs = (props) => {
     }
   );
 };
-exports.canvasTabsClasses = CanvasTabs_styles.staticClasses;
+exports.canvasTabsClasses = Tabs_styles.staticClasses;
 exports.HvCanvasTabs = HvCanvasTabs;

package/dist/cjs/Canvas/{CanvasTabs/CanvasTabs.styles.cjs → Tabs/Tabs.styles.cjs}

@@ -16,7 +16,7 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses("HvCanvasTabs
     alignItems: "center",
     justifyContent: "center",
     flex: 1,
-    borderRadius: `16px 16px 0 0 `,
+    borderRadius: "16px 16px 0 0",
     backgroundColor: uikitReactCore.theme.colors.atmo2,
     color: uikitReactCore.theme.colors.secondary_60,
     overflow: "hidden",
@@ -33,6 +33,9 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses("HvCanvasTabs
     "&$selected": {
       backgroundColor: uikitReactCore.theme.colors.atmo1,
       ...uikitReactCore.theme.typography.label
+    },
+    "&:focus-visible": {
+      ...uikitReactCore.outlineStyles
     }
   },
   selected: {}

package/dist/cjs/Canvas/{CanvasToolbar/CanvasToolbar.cjs → Toolbar/Toolbar.cjs}

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
-const CanvasToolbar_styles = require("./CanvasToolbar.styles.cjs");
+const Toolbar_styles = require("./Toolbar.styles.cjs");
 const DEFAULT_LABELS = {
   back: "Back"
 };
@@ -14,17 +14,26 @@ const HvCanvasToolbar = (props) => {
     labels: labelsProp,
     className,
     children,
+    backButtonProps,
     classes: classesProp,
     ...others
   } = uikitReactCore.useDefaultProps("HvCanvasToolbar", props);
-  const { classes, cx } = CanvasToolbar_styles.useClasses(classesProp);
+  const { classes, cx } = Toolbar_styles.useClasses(classesProp);
   const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProp);
   const title = typeof titleProp === "string" ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { variant: "title4", children: titleProp }) : titleProp;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(classes.root, className), ...others, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.back, children: backButton ?? /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvIconButton, { title: labels.back, variant: "primaryGhost", children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Previous, {}) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.back, children: backButton ?? /* @__PURE__ */ jsxRuntime.jsx(
+      uikitReactCore.HvIconButton,
+      {
+        title: labels.back,
+        variant: "primaryGhost",
+        ...backButtonProps,
+        children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Previous, {})
+      }
+    ) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.title, children: title }),
     children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.actions, children })
   ] });
 };
-exports.canvasToolbarClasses = CanvasToolbar_styles.staticClasses;
+exports.canvasToolbarClasses = Toolbar_styles.staticClasses;
 exports.HvCanvasToolbar = HvCanvasToolbar;

package/dist/cjs/Canvas/{CanvasToolbar/CanvasToolbar.styles.cjs → Toolbar/Toolbar.styles.cjs}

@@ -4,17 +4,15 @@ const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactCore.createClasses("HvCanvasToolbar", {
   root: {
-    width: `calc(100% - var(--canvas-panel-width))`,
+    width: "100%",
     height: 54,
     display: "flex",
     alignItems: "center",
     borderRadius: uikitStyles.theme.radii.full,
     backgroundColor: uikitStyles.theme.colors.atmo1,
-    padding: uikitStyles.theme.spacing(0, "md", 0, 0),
     position: "absolute",
     right: 0,
     top: 0,
-    margin: `0 0 0 ${uikitStyles.theme.space.md}`,
     transition: "width 0.3s ease"
   },
   back: {
@@ -36,7 +34,8 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses("HvCanvasTool
   actions: {
     display: "flex",
     flexWrap: "nowrap",
-    overflow: "scroll"
+    overflow: "scroll",
+    paddingRight: uikitStyles.theme.space.md
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/index.cjs

@@ -4,12 +4,12 @@ const Blade_styles = require("./Blade/Blade.styles.cjs");
 const Blade = require("./Blade/Blade.cjs");
 const Blades_styles = require("./Blades/Blades.styles.cjs");
 const Blades = require("./Blades/Blades.cjs");
-const CanvasToolbar_styles = require("./Canvas/CanvasToolbar/CanvasToolbar.styles.cjs");
-const CanvasToolbar = require("./Canvas/CanvasToolbar/CanvasToolbar.cjs");
-const CanvasPanel_styles = require("./Canvas/CanvasPanel/CanvasPanel.styles.cjs");
-const CanvasPanel = require("./Canvas/CanvasPanel/CanvasPanel.cjs");
-const CanvasTabs_styles = require("./Canvas/CanvasTabs/CanvasTabs.styles.cjs");
-const CanvasTabs = require("./Canvas/CanvasTabs/CanvasTabs.cjs");
+const Toolbar_styles = require("./Canvas/Toolbar/Toolbar.styles.cjs");
+const Toolbar = require("./Canvas/Toolbar/Toolbar.cjs");
+const Panel_styles = require("./Canvas/Panel/Panel.styles.cjs");
+const Panel = require("./Canvas/Panel/Panel.cjs");
+const Tabs_styles = require("./Canvas/Tabs/Tabs.styles.cjs");
+const Tabs = require("./Canvas/Tabs/Tabs.cjs");
 const Dashboard_styles = require("./Dashboard/Dashboard.styles.cjs");
 const Dashboard = require("./Dashboard/Dashboard.cjs");
 const Flow_styles = require("./Flow/Flow.styles.cjs");
@@ -50,12 +50,12 @@ exports.bladeClasses = Blade_styles.staticClasses;
 exports.HvBlade = Blade.HvBlade;
 exports.bladesClasses = Blades_styles.staticClasses;
 exports.HvBlades = Blades.HvBlades;
-exports.canvasToolbarClasses = CanvasToolbar_styles.staticClasses;
-exports.HvCanvasToolbar = CanvasToolbar.HvCanvasToolbar;
-exports.canvasPanelClasses = CanvasPanel_styles.staticClasses;
-exports.HvCanvasPanel = CanvasPanel.HvCanvasPanel;
-exports.canvasTabsClasses = CanvasTabs_styles.staticClasses;
-exports.HvCanvasTabs = CanvasTabs.HvCanvasTabs;
+exports.canvasToolbarClasses = Toolbar_styles.staticClasses;
+exports.HvCanvasToolbar = Toolbar.HvCanvasToolbar;
+exports.canvasPanelClasses = Panel_styles.staticClasses;
+exports.HvCanvasPanel = Panel.HvCanvasPanel;
+exports.canvasTabsClasses = Tabs_styles.staticClasses;
+exports.HvCanvasTabs = Tabs.HvCanvasTabs;
 exports.dashboardClasses = Dashboard_styles.staticClasses;
 exports.HvDashboard = Dashboard.HvDashboard;
 exports.flowClasses = Flow_styles.staticClasses;

package/dist/esm/Canvas/{CanvasPanel/CanvasPanel.js → Panel/Panel.js}

@@ -1,10 +1,9 @@
 import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
-import { useCallback, useEffect } from "react";
-import { useDefaultProps, useLabels, useTheme, useControlled } from "@hitachivantara/uikit-react-core";
+import { useDefaultProps, useLabels, useControlled } from "@hitachivantara/uikit-react-core";
 import { Start, End } from "@hitachivantara/uikit-react-icons";
-import { useClasses } from "./CanvasPanel.styles.js";
-import { staticClasses } from "./CanvasPanel.styles.js";
-import { HvCanvasTabs } from "../CanvasTabs/CanvasTabs.js";
+import { useClasses } from "./Panel.styles.js";
+import { staticClasses } from "./Panel.styles.js";
+import { HvCanvasTabs } from "../Tabs/Tabs.js";
 const DEFAULT_LABELS = {
   open: "Open",
   close: "Close"
@@ -24,19 +23,7 @@ const HvCanvasPanel = (props) => {
   } = useDefaultProps("HvCanvasPanel", props);
   const { classes, cx } = useClasses(classesProp);
   const labels = useLabels(DEFAULT_LABELS, labelsProp);
-  const { rootId, activeTheme } = useTheme();
   const [open, setOpen] = useControlled(openProp, Boolean(defaultOpened));
-  const setPanelWidth = useCallback(() => {
-    if (rootId) {
-      document.getElementById(rootId)?.style.setProperty(
-        "--canvas-panel-width",
-        !open ? "0px" : `${320 + (activeTheme ? parseInt(activeTheme.space.md, 10) : 24)}px`
-      );
-    }
-  }, [activeTheme, open, rootId]);
-  useEffect(() => {
-    setPanelWidth();
-  }, [open, setPanelWidth]);
   const handleTogglePanel = (event) => {
     setOpen((prev) => !prev);
     onToggle?.(event, !open);

package/dist/esm/Canvas/Panel/Panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.js","sources":["../../../../src/Canvas/Panel/Panel.tsx"],"sourcesContent":["import {\n  ExtractNames,\n  HvBaseProps,\n  useControlled,\n  useDefaultProps,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { End, Start } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvCanvasTab, HvCanvasTabs, HvCanvasTabsProps } from \"../Tabs\";\nimport { staticClasses, useClasses } from \"./Panel.styles\";\n\nexport { staticClasses as canvasPanelClasses };\n\nexport type HvCanvasPanelClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  open: \"Open\",\n  close: \"Close\",\n};\n\nexport interface HvCanvasPanelProps extends HvBaseProps<HTMLDivElement> {\n  /** Whether the panel is open or not. If this property is defined, the panel must be fully controlled. */\n  open?: boolean;\n  /** When uncontrolled, defines the initial state of the panel. */\n  defaultOpened?: boolean;\n  /** The tabs that should be visible on the canvas panel. */\n  tabs?: HvCanvasTab[];\n  /** The function that will be executed whenever the panel toggles. It will receive the state of the panel. */\n  onToggle?: (\n    event: React.MouseEvent | React.KeyboardEvent,\n    open: boolean,\n  ) => void;\n  /** The function that will be executed when a tab changes. It will receive the id of the selected tab. */\n  onTabChange?: (event: React.SyntheticEvent | null, tabId: string) => void;\n  /** An object containing all the labels. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /* The content that will be rendered within the canvas panel. */\n  children?: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasPanelClasses;\n}\n\n/**\n * A panel component to use in a canvas context.\n */\nexport const HvCanvasPanel = (props: HvCanvasPanelProps) => {\n  const {\n    open: openProp,\n    defaultOpened = false,\n    tabs,\n    onToggle,\n    onTabChange,\n    labels: labelsProp,\n    className,\n    children,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvCanvasPanel\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const [open, setOpen] = useControlled(openProp, Boolean(defaultOpened));\n\n  const handleTogglePanel = (event: React.MouseEvent | React.KeyboardEvent) => {\n    setOpen((prev) => !prev);\n    onToggle?.(event, !open);\n  };\n\n  const handleTabChange: HvCanvasTabsProps[\"onChange\"] = (event, tabId) => {\n    onTabChange?.(event, tabId);\n  };\n\n  return (\n    <>\n      <div\n        className={cx(classes.root, className, {\n          [classes.open]: open,\n          [classes.close]: !open,\n        })}\n        {...others}\n      >\n        {tabs && (\n          <HvCanvasTabs\n            className={classes.tabs}\n            tabs={tabs}\n            onChange={handleTabChange}\n          />\n        )}\n        <div className={classes.content}>{children}</div>\n      </div>\n      <div\n        className={cx(classes.handle, {\n          [classes.handleOpen]: open,\n          [classes.handleClose]: !open,\n        })}\n        onClick={handleTogglePanel}\n        role=\"button\"\n        tabIndex={0}\n        onKeyDown={(e) => {\n          if (e.key === \"Enter\" || e.key === \" \") {\n            handleTogglePanel(e);\n          }\n        }}\n        aria-label={open ? labels.close : labels.open}\n      >\n        <div className={classes.handleButton}>\n          {open ? <Start color={[\"primary\"]} /> : <End color={[\"primary\"]} />}\n        </div>\n      </div>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAgBA,MAAM,iBAAiB;AAAA,EACrB,MAAM;AAAA,EACN,OAAO;AACT;AA2Ba,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ,MAAM;AAAA,IACN,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AACxC,QAAA,SAAS,UAAU,gBAAgB,UAAU;AAE7C,QAAA,CAAC,MAAM,OAAO,IAAI,cAAc,UAAU,QAAQ,aAAa,CAAC;AAEhE,QAAA,oBAAoB,CAAC,UAAkD;AACnE,YAAA,CAAC,SAAS,CAAC,IAAI;AACZ,eAAA,OAAO,CAAC,IAAI;AAAA,EAAA;AAGnB,QAAA,kBAAiD,CAAC,OAAO,UAAU;AACvE,kBAAc,OAAO,KAAK;AAAA,EAAA;AAG5B,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,MAAM,WAAW;AAAA,UACrC,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,KAAK,GAAG,CAAC;AAAA,QAAA,CACnB;AAAA,QACA,GAAG;AAAA,QAEH,UAAA;AAAA,UACC,QAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,QAAQ;AAAA,cACnB;AAAA,cACA,UAAU;AAAA,YAAA;AAAA,UACZ;AAAA,UAED,oBAAA,OAAA,EAAI,WAAW,QAAQ,SAAU,UAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAC7C;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,QAAQ;AAAA,UAC5B,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,WAAW,GAAG,CAAC;AAAA,QAAA,CACzB;AAAA,QACD,SAAS;AAAA,QACT,MAAK;AAAA,QACL,UAAU;AAAA,QACV,WAAW,CAAC,MAAM;AAChB,cAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,8BAAkB,CAAC;AAAA,UACrB;AAAA,QACF;AAAA,QACA,cAAY,OAAO,OAAO,QAAQ,OAAO;AAAA,QAEzC,8BAAC,OAAI,EAAA,WAAW,QAAQ,cACrB,UAAA,2BAAQ,OAAM,EAAA,OAAO,CAAC,SAAS,GAAG,IAAM,oBAAA,KAAA,EAAI,OAAO,CAAC,SAAS,EAAG,CAAA,GACnE;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/esm/Canvas/{CanvasPanel/CanvasPanel.styles.js → Panel/Panel.styles.js}

@@ -1,4 +1,4 @@
-import { createClasses } from "@hitachivantara/uikit-react-core";
+import { createClasses, outlineStyles } from "@hitachivantara/uikit-react-core";
 import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvCanvasPanel", {
   root: {
@@ -6,16 +6,18 @@ const { staticClasses, useClasses } = createClasses("HvCanvasPanel", {
     position: "absolute",
     top: 0,
     left: 0,
-    boxShadow: `4px 0px 8px -4px color-mix(in srgb, #414141 12%, transparent)`,
+    boxShadow: "4px 0px 8px -4px color-mix(in srgb, #414141 12%, transparent)",
     zIndex: theme.zIndices.overlay,
     backgroundColor: "transparent",
-    transition: "width 0.3s ease",
+    transition: "visibility 0.3s ease, width 0.3s ease",
     overflow: "hidden",
     "&$open": {
-      width: 320
+      width: 320,
+      visibility: "visible"
     },
     "&$close": {
-      width: 0
+      width: 0,
+      visibility: "hidden"
     }
   },
   tabs: {},
@@ -30,12 +32,12 @@ const { staticClasses, useClasses } = createClasses("HvCanvasPanel", {
     display: "flex",
     justifyContent: "center",
     zIndex: theme.zIndices.overlay,
-    boxShadow: `4px 0px 8px -4px color-mix(in srgb, #414141 12%, transparent)`,
+    boxShadow: "4px 0px 8px -4px color-mix(in srgb, #414141 12%, transparent)",
     backgroundColor: theme.colors.atmo1,
-    borderRadius: `0 ${theme.radii.round} ${theme.radii.round} 0 `,
+    borderRadius: `0 ${theme.radii.round} ${theme.radii.round} 0`,
     position: "absolute",
     transition: "left 0.3s ease",
-    top: `calc(50% - 86px)`,
+    top: "calc(50% - 86px)",
     "&$handleOpen": {
       left: 320
     },
@@ -44,10 +46,13 @@ const { staticClasses, useClasses } = createClasses("HvCanvasPanel", {
     },
     "&:hover": {
       cursor: "pointer"
+    },
+    "&:focus-visible": {
+      ...outlineStyles
     }
   },
   handleButton: {
-    top: `calc(50% - 16px)`,
+    top: "calc(50% - 16px)",
     position: "absolute"
   },
   open: {},

package/dist/esm/Canvas/Panel/Panel.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.styles.js","sources":["../../../../src/Canvas/Panel/Panel.styles.tsx"],"sourcesContent":["import { createClasses, outlineStyles } from \"@hitachivantara/uikit-react-core\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCanvasPanel\", {\n  root: {\n    height: \"100%\",\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    boxShadow: \"4px 0px 8px -4px color-mix(in srgb, #414141 12%, transparent)\",\n    zIndex: theme.zIndices.overlay,\n    backgroundColor: \"transparent\",\n    transition: \"visibility 0.3s ease, width 0.3s ease\",\n    overflow: \"hidden\",\n    \"&$open\": {\n      width: 320,\n      visibility: \"visible\",\n    },\n    \"&$close\": {\n      width: 0,\n      visibility: \"hidden\",\n    },\n  },\n  tabs: {},\n  content: {\n    backgroundColor: theme.colors.atmo1,\n    height: \"100%\",\n    padding: theme.space.md,\n  },\n  handle: {\n    height: 172,\n    width: 35,\n    display: \"flex\",\n    justifyContent: \"center\",\n    zIndex: theme.zIndices.overlay,\n    boxShadow: \"4px 0px 8px -4px color-mix(in srgb, #414141 12%, transparent)\",\n    backgroundColor: theme.colors.atmo1,\n    borderRadius: `0 ${theme.radii.round} ${theme.radii.round} 0`,\n    position: \"absolute\",\n    transition: \"left 0.3s ease\",\n    top: \"calc(50% - 86px)\",\n    \"&$handleOpen\": {\n      left: 320,\n    },\n    \"&$handleClose\": {\n      left: 0,\n    },\n    \"&:hover\": {\n      cursor: \"pointer\",\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n  handleButton: {\n    top: \"calc(50% - 16px)\",\n    position: \"absolute\",\n  },\n  open: {},\n  close: {},\n  handleOpen: {},\n  handleClose: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,KAAK;AAAA,IACL,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ,MAAM,SAAS;AAAA,IACvB,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAU;AAAA,MACR,OAAO;AAAA,MACP,YAAY;AAAA,IACd;AAAA,IACA,WAAW;AAAA,MACT,OAAO;AAAA,MACP,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACA,MAAM,CAAC;AAAA,EACP,SAAS;AAAA,IACP,iBAAiB,MAAM,OAAO;AAAA,IAC9B,QAAQ;AAAA,IACR,SAAS,MAAM,MAAM;AAAA,EACvB;AAAA,EACA,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,QAAQ,MAAM,SAAS;AAAA,IACvB,WAAW;AAAA,IACX,iBAAiB,MAAM,OAAO;AAAA,IAC9B,cAAc,KAAK,MAAM,MAAM,KAAK,IAAI,MAAM,MAAM,KAAK;AAAA,IACzD,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,gBAAgB;AAAA,MACd,MAAM;AAAA,IACR;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,cAAc;AAAA,IACZ,KAAK;AAAA,IACL,UAAU;AAAA,EACZ;AAAA,EACA,MAAM,CAAC;AAAA,EACP,OAAO,CAAC;AAAA,EACR,YAAY,CAAC;AAAA,EACb,aAAa,CAAC;AAChB,CAAC;"}

package/dist/esm/Canvas/{CanvasTabs/CanvasTabs.js → Tabs/Tabs.js}

@@ -4,8 +4,8 @@ import { Tab } from "@mui/base/Tab";
 import { Tabs } from "@mui/base/Tabs";
 import { TabsList } from "@mui/base/TabsList";
 import { useDefaultProps } from "@hitachivantara/uikit-react-core";
-import { useClasses } from "./CanvasTabs.styles.js";
-import { staticClasses } from "./CanvasTabs.styles.js";
+import { useClasses } from "./Tabs.styles.js";
+import { staticClasses } from "./Tabs.styles.js";
 const HvCanvasTabs = (props) => {
   const {
     tabs,
@@ -15,9 +15,7 @@ const HvCanvasTabs = (props) => {
     ...others
   } = useDefaultProps("HvCanvasTabs", props);
   const { classes, cx } = useClasses(classesProp);
-  const [selectedTab, setSelectedTab] = useState(
-    tabs?.[0]?.id || "none"
-  );
+  const [selectedTab, setSelectedTab] = useState(tabs?.[0]?.id || "none");
   const handleTabChange = (event, value) => {
     onChange?.(event, value);
     setSelectedTab(value);
@@ -37,7 +35,6 @@ const HvCanvasTabs = (props) => {
           className: cx(classes.tab, {
             [classes.selected]: tab.id === selectedTab
           }),
-          onChange: handleTabChange,
           tabIndex: 0,
           children: tab.content
         },

package/dist/esm/Canvas/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sources":["../../../../src/Canvas/Tabs/Tabs.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { Tab } from \"@mui/base/Tab\";\nimport { Tabs, TabsProps } from \"@mui/base/Tabs\";\nimport { TabsList } from \"@mui/base/TabsList\";\nimport {\n  ExtractNames,\n  useDefaultProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./Tabs.styles\";\n\nexport { staticClasses as canvasTabsClasses };\n\nexport type HvCanvasTabsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCanvasTab {\n  id: string;\n  content: React.ReactNode;\n}\n\nexport interface HvCanvasTabsProps extends Omit<TabsProps, \"onChange\"> {\n  /** List of tabs. */\n  tabs: HvCanvasTab[];\n  /** Event handler triggered when a tab is clicked. */\n  onChange?: (event: React.SyntheticEvent | null, tabId: string) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasTabsClasses;\n}\n\n/**\n * A tabs component to use in a canvas context.\n */\nexport const HvCanvasTabs = (props: HvCanvasTabsProps) => {\n  const {\n    tabs,\n    onChange,\n    className,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvCanvasTabs\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [selectedTab, setSelectedTab] = useState(tabs?.[0]?.id || \"none\");\n\n  const handleTabChange: TabsProps[\"onChange\"] = (event, value) => {\n    onChange?.(event, value as string);\n    setSelectedTab(value as string);\n  };\n\n  return (\n    <Tabs\n      value={selectedTab}\n      onChange={handleTabChange}\n      className={cx(classes.root, className)}\n      selectionFollowsFocus\n      {...others}\n    >\n      <TabsList className={classes.list}>\n        {tabs?.map((tab) => (\n          <Tab\n            key={tab.id}\n            value={tab.id}\n            className={cx(classes.tab, {\n              [classes.selected]: tab.id === selectedTab,\n            })}\n            tabIndex={0}\n          >\n            {tab.content}\n          </Tab>\n        ))}\n      </TabsList>\n    </Tabs>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAgCa,MAAA,eAAe,CAAC,UAA6B;AAClD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,gBAAgB,KAAK;AAEzC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,CAAC,aAAa,cAAc,IAAI,SAAS,OAAO,CAAC,GAAG,MAAM,MAAM;AAEhE,QAAA,kBAAyC,CAAC,OAAO,UAAU;AAC/D,eAAW,OAAO,KAAe;AACjC,mBAAe,KAAe;AAAA,EAAA;AAI9B,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC,uBAAqB;AAAA,MACpB,GAAG;AAAA,MAEJ,UAAA,oBAAC,YAAS,WAAW,QAAQ,MAC1B,UAAM,MAAA,IAAI,CAAC,QACV;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,OAAO,IAAI;AAAA,UACX,WAAW,GAAG,QAAQ,KAAK;AAAA,YACzB,CAAC,QAAQ,QAAQ,GAAG,IAAI,OAAO;AAAA,UAAA,CAChC;AAAA,UACD,UAAU;AAAA,UAET,UAAI,IAAA;AAAA,QAAA;AAAA,QAPA,IAAI;AAAA,MASZ,CAAA,GACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/Canvas/{CanvasTabs/CanvasTabs.styles.js → Tabs/Tabs.styles.js}

@@ -1,4 +1,4 @@
-import { createClasses, theme } from "@hitachivantara/uikit-react-core";
+import { createClasses, theme, outlineStyles } from "@hitachivantara/uikit-react-core";
 const { staticClasses, useClasses } = createClasses("HvCanvasTabs", {
   root: {
     height: 48,
@@ -14,7 +14,7 @@ const { staticClasses, useClasses } = createClasses("HvCanvasTabs", {
     alignItems: "center",
     justifyContent: "center",
     flex: 1,
-    borderRadius: `16px 16px 0 0 `,
+    borderRadius: "16px 16px 0 0",
     backgroundColor: theme.colors.atmo2,
     color: theme.colors.secondary_60,
     overflow: "hidden",
@@ -31,6 +31,9 @@ const { staticClasses, useClasses } = createClasses("HvCanvasTabs", {
     "&$selected": {
       backgroundColor: theme.colors.atmo1,
       ...theme.typography.label
+    },
+    "&:focus-visible": {
+      ...outlineStyles
     }
   },
   selected: {}

package/dist/esm/Canvas/Tabs/Tabs.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.styles.js","sources":["../../../../src/Canvas/Tabs/Tabs.styles.tsx"],"sourcesContent":["import {\n  createClasses,\n  outlineStyles,\n  theme,\n} from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCanvasTabs\", {\n  root: {\n    height: 48,\n    display: \"flex\",\n  },\n  list: {\n    display: \"flex\",\n    width: \"100%\",\n  },\n  tab: {\n    height: \"100%\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    flex: 1,\n    borderRadius: \"16px 16px 0 0\",\n    backgroundColor: theme.colors.atmo2,\n    color: theme.colors.secondary_60,\n    overflow: \"hidden\",\n    width: \"100%\",\n    \"& svg .color0\": {\n      fill: \"currentcolor\",\n    },\n    \"&:hover\": {\n      cursor: \"pointer\",\n    },\n    \"&:focus\": {\n      backgroundColor: theme.colors.atmo1,\n    },\n    \"&$selected\": {\n      backgroundColor: theme.colors.atmo1,\n      ...theme.typography.label,\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n  selected: {},\n});\n"],"names":[],"mappings":";AAMO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,KAAK;AAAA,IACH,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,MAAM;AAAA,IACN,cAAc;AAAA,IACd,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,IACpB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,iBAAiB;AAAA,MACf,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,IACA,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,cAAc;AAAA,MACZ,iBAAiB,MAAM,OAAO;AAAA,MAC9B,GAAG,MAAM,WAAW;AAAA,IACtB;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,UAAU,CAAC;AACb,CAAC;"}

package/dist/esm/Canvas/{CanvasToolbar/CanvasToolbar.js → Toolbar/Toolbar.js}

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { useDefaultProps, useLabels, HvIconButton, HvTypography } from "@hitachivantara/uikit-react-core";
 import { Previous } from "@hitachivantara/uikit-react-icons";
-import { useClasses } from "./CanvasToolbar.styles.js";
-import { staticClasses } from "./CanvasToolbar.styles.js";
+import { useClasses } from "./Toolbar.styles.js";
+import { staticClasses } from "./Toolbar.styles.js";
 const DEFAULT_LABELS = {
   back: "Back"
 };
@@ -13,6 +13,7 @@ const HvCanvasToolbar = (props) => {
     labels: labelsProp,
     className,
     children,
+    backButtonProps,
     classes: classesProp,
     ...others
   } = useDefaultProps("HvCanvasToolbar", props);
@@ -20,7 +21,15 @@ const HvCanvasToolbar = (props) => {
   const labels = useLabels(DEFAULT_LABELS, labelsProp);
   const title = typeof titleProp === "string" ? /* @__PURE__ */ jsx(HvTypography, { variant: "title4", children: titleProp }) : titleProp;
   return /* @__PURE__ */ jsxs("div", { className: cx(classes.root, className), ...others, children: [
-    /* @__PURE__ */ jsx("div", { className: classes.back, children: backButton ?? /* @__PURE__ */ jsx(HvIconButton, { title: labels.back, variant: "primaryGhost", children: /* @__PURE__ */ jsx(Previous, {}) }) }),
+    /* @__PURE__ */ jsx("div", { className: classes.back, children: backButton ?? /* @__PURE__ */ jsx(
+      HvIconButton,
+      {
+        title: labels.back,
+        variant: "primaryGhost",
+        ...backButtonProps,
+        children: /* @__PURE__ */ jsx(Previous, {})
+      }
+    ) }),
     /* @__PURE__ */ jsx("div", { className: classes.title, children: title }),
     children && /* @__PURE__ */ jsx("div", { className: classes.actions, children })
   ] });

package/dist/esm/Canvas/Toolbar/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","sources":["../../../../src/Canvas/Toolbar/Toolbar.tsx"],"sourcesContent":["import {\n  ExtractNames,\n  HvBaseProps,\n  HvIconButton,\n  HvIconButtonProps,\n  HvTypography,\n  useDefaultProps,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Previous } from \"@hitachivantara/uikit-react-icons\";\n\nimport { staticClasses, useClasses } from \"./Toolbar.styles\";\n\nexport { staticClasses as canvasToolbarClasses };\n\nexport type HvCanvasToolbarClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  back: \"Back\",\n};\n\nexport interface HvCanvasToolbarProps\n  extends HvBaseProps<HTMLDivElement, \"title\"> {\n  /** Text to display in the component. */\n  title: React.ReactNode;\n  /** Fully customized button or false for when the back button should not be rendered. */\n  backButton?: React.ReactNode;\n  /** An object containing all the labels. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /* The content that will be rendered within the toolbar. */\n  children?: React.ReactNode;\n  /** Props for the default back button. */\n  backButtonProps?: Partial<HvIconButtonProps>;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasToolbarClasses;\n}\n\n/**\n * A toolbar component to use in a canvas context.\n */\nexport const HvCanvasToolbar = (props: HvCanvasToolbarProps) => {\n  const {\n    title: titleProp,\n    backButton,\n    labels: labelsProp,\n    className,\n    children,\n    backButtonProps,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvCanvasToolbar\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const title =\n    typeof titleProp === \"string\" ? (\n      <HvTypography variant=\"title4\">{titleProp}</HvTypography>\n    ) : (\n      titleProp\n    );\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      <div className={classes.back}>\n        {backButton ?? (\n          <HvIconButton\n            title={labels.back}\n            variant=\"primaryGhost\"\n            {...backButtonProps}\n          >\n            <Previous />\n          </HvIconButton>\n        )}\n      </div>\n      <div className={classes.title}>{title}</div>\n      {children && <div className={classes.actions}>{children}</div>}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;AAiBA,MAAM,iBAAiB;AAAA,EACrB,MAAM;AACR;AAqBa,MAAA,kBAAkB,CAAC,UAAgC;AACxD,QAAA;AAAA,IACJ,OAAO;AAAA,IACP;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAE5C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AACxC,QAAA,SAAS,UAAU,gBAAgB,UAAU;AAE7C,QAAA,QACJ,OAAO,cAAc,+BAClB,cAAa,EAAA,SAAQ,UAAU,UAAA,UAAU,CAAA,IAE1C;AAIF,SAAA,qBAAC,SAAI,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAC/C,UAAA;AAAA,IAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,MACrB,UACC,cAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,OAAO;AAAA,QACd,SAAQ;AAAA,QACP,GAAG;AAAA,QAEJ,8BAAC,UAAS,EAAA;AAAA,MAAA;AAAA,IAAA,GAGhB;AAAA,IACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,OAAQ,UAAM,OAAA;AAAA,IACrC,YAAa,oBAAA,OAAA,EAAI,WAAW,QAAQ,SAAU,UAAS;AAAA,EAC1D,EAAA,CAAA;AAEJ;"}

package/dist/esm/Canvas/{CanvasToolbar/CanvasToolbar.styles.js → Toolbar/Toolbar.styles.js}

@@ -2,17 +2,15 @@ import { createClasses } from "@hitachivantara/uikit-react-core";
 import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvCanvasToolbar", {
   root: {
-    width: `calc(100% - var(--canvas-panel-width))`,
+    width: "100%",
     height: 54,
     display: "flex",
     alignItems: "center",
     borderRadius: theme.radii.full,
     backgroundColor: theme.colors.atmo1,
-    padding: theme.spacing(0, "md", 0, 0),
     position: "absolute",
     right: 0,
     top: 0,
-    margin: `0 0 0 ${theme.space.md}`,
     transition: "width 0.3s ease"
   },
   back: {
@@ -34,7 +32,8 @@ const { staticClasses, useClasses } = createClasses("HvCanvasToolbar", {
   actions: {
     display: "flex",
     flexWrap: "nowrap",
-    overflow: "scroll"
+    overflow: "scroll",
+    paddingRight: theme.space.md
   }
 });
 export {

package/dist/esm/Canvas/Toolbar/Toolbar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.styles.js","sources":["../../../../src/Canvas/Toolbar/Toolbar.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCanvasToolbar\", {\n  root: {\n    width: \"100%\",\n    height: 54,\n    display: \"flex\",\n    alignItems: \"center\",\n    borderRadius: theme.radii.full,\n    backgroundColor: theme.colors.atmo1,\n    position: \"absolute\",\n    right: 0,\n    top: 0,\n    transition: \"width 0.3s ease\",\n  },\n  back: {\n    borderRadius: `${theme.radii.full} 0 0 ${theme.radii.full}`,\n    minWidth: 68,\n    backgroundColor: theme.colors.containerBackgroundHover,\n    height: \"100%\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n  title: {\n    display: \"flex\",\n    alignItems: \"center\",\n    padding: theme.spacing(0, \"md\"),\n    height: \"100%\",\n    flexGrow: 1,\n  },\n  actions: {\n    display: \"flex\",\n    flexWrap: \"nowrap\",\n    overflow: \"scroll\",\n    paddingRight: theme.space.md,\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,cAAc,MAAM,MAAM;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,UAAU;AAAA,IACV,OAAO;AAAA,IACP,KAAK;AAAA,IACL,YAAY;AAAA,EACd;AAAA,EACA,MAAM;AAAA,IACJ,cAAc,GAAG,MAAM,MAAM,IAAI,QAAQ,MAAM,MAAM,IAAI;AAAA,IACzD,UAAU;AAAA,IACV,iBAAiB,MAAM,OAAO;AAAA,IAC9B,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,SAAS,MAAM,QAAQ,GAAG,IAAI;AAAA,IAC9B,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,cAAc,MAAM,MAAM;AAAA,EAC5B;AACF,CAAC;"}

package/dist/esm/index.js

@@ -2,12 +2,12 @@ import { staticClasses } from "./Blade/Blade.styles.js";
 import { HvBlade } from "./Blade/Blade.js";
 import { staticClasses as staticClasses2 } from "./Blades/Blades.styles.js";
 import { HvBlades } from "./Blades/Blades.js";
-import { staticClasses as staticClasses3 } from "./Canvas/CanvasToolbar/CanvasToolbar.styles.js";
-import { HvCanvasToolbar } from "./Canvas/CanvasToolbar/CanvasToolbar.js";
-import { staticClasses as staticClasses4 } from "./Canvas/CanvasPanel/CanvasPanel.styles.js";
-import { HvCanvasPanel } from "./Canvas/CanvasPanel/CanvasPanel.js";
-import { staticClasses as staticClasses5 } from "./Canvas/CanvasTabs/CanvasTabs.styles.js";
-import { HvCanvasTabs } from "./Canvas/CanvasTabs/CanvasTabs.js";
+import { staticClasses as staticClasses3 } from "./Canvas/Toolbar/Toolbar.styles.js";
+import { HvCanvasToolbar } from "./Canvas/Toolbar/Toolbar.js";
+import { staticClasses as staticClasses4 } from "./Canvas/Panel/Panel.styles.js";
+import { HvCanvasPanel } from "./Canvas/Panel/Panel.js";
+import { staticClasses as staticClasses5 } from "./Canvas/Tabs/Tabs.styles.js";
+import { HvCanvasTabs } from "./Canvas/Tabs/Tabs.js";
 import { staticClasses as staticClasses6 } from "./Dashboard/Dashboard.styles.js";
 import { HvDashboard } from "./Dashboard/Dashboard.js";
 import { staticClasses as staticClasses7 } from "./Flow/Flow.styles.js";

package/dist/types/index.d.ts

@@ -28,7 +28,7 @@ import { HvColorAny } from '@hitachivantara/uikit-styles';
 import { HvDialogProps } from '@hitachivantara/uikit-react-core';
 import { HvDrawerProps } from '@hitachivantara/uikit-react-core';
 import { HvEmptyStateProps } from '@hitachivantara/uikit-react-core';
-import { HvGlobalActionsProps } from '@hitachivantara/uikit-react-core';
+import { HvIconButtonProps } from '@hitachivantara/uikit-react-core';
 import { HvSize } from '@hitachivantara/uikit-react-core';
 import { HvSliderProps } from '@hitachivantara/uikit-react-core';
 import { HvTypographyVariants } from '@hitachivantara/uikit-react-core';
@@ -361,16 +361,16 @@ export declare const HvCanvasPanel: (props: HvCanvasPanelProps) => JSX_2.Element
 export declare type HvCanvasPanelClasses = ExtractNames<typeof useClasses_4>;
 
 export declare interface HvCanvasPanelProps extends HvBaseProps<HTMLDivElement> {
-    /** Whether the panel is open or not. If this property is defined the panel must be fully controlled. */
+    /** Whether the panel is open or not. If this property is defined, the panel must be fully controlled. */
     open?: boolean;
     /** When uncontrolled, defines the initial state of the panel. */
     defaultOpened?: boolean;
-    /** The tabs that should be visible on the canvas panel */
+    /** The tabs that should be visible on the canvas panel. */
     tabs?: HvCanvasTab[];
-    /** The function that will be executed whenever the panel toggles. It will receive the state of the accordion. */
+    /** The function that will be executed whenever the panel toggles. It will receive the state of the panel. */
     onToggle?: (event: React.MouseEvent | React.KeyboardEvent, open: boolean) => void;
-    /** The function that will be executed when a tab changes.It will receive the id of the selected tab. */
-    onTabChange?: (event: React.SyntheticEvent, tabId: string) => void;
+    /** The function that will be executed when a tab changes. It will receive the id of the selected tab. */
+    onTabChange?: (event: React.SyntheticEvent | null, tabId: string) => void;
     /** An object containing all the labels. */
     labels?: Partial<typeof DEFAULT_LABELS_3>;
     children?: React.ReactNode;
@@ -378,23 +378,23 @@ export declare interface HvCanvasPanelProps extends HvBaseProps<HTMLDivElement>
     classes?: HvCanvasPanelClasses;
 }
 
-export declare type HvCanvasTab = {
+export declare interface HvCanvasTab {
     id: string;
     content: React.ReactNode;
-};
+}
 
 /**
- *
+ * A tabs component to use in a canvas context.
  */
 export declare const HvCanvasTabs: (props: HvCanvasTabsProps) => JSX_2.Element;
 
 export declare type HvCanvasTabsClasses = ExtractNames<typeof useClasses_5>;
 
 export declare interface HvCanvasTabsProps extends Omit<TabsProps, "onChange"> {
-    /** The list of tabs. */
+    /** List of tabs. */
     tabs: HvCanvasTab[];
-    /** Event handler to run when a tab is clicked. */
-    onChange?: (event: React.SyntheticEvent, tabId: string) => void;
+    /** Event handler triggered when a tab is clicked. */
+    onChange?: (event: React.SyntheticEvent | null, tabId: string) => void;
     /** A Jss Object used to override or extend the styles applied. */
     classes?: HvCanvasTabsClasses;
 }
@@ -408,12 +408,14 @@ export declare type HvCanvasToolbarClasses = ExtractNames<typeof useClasses_3>;
 
 export declare interface HvCanvasToolbarProps extends HvBaseProps<HTMLDivElement, "title"> {
     /** Text to display in the component. */
-    title: HvGlobalActionsProps["title"];
-    /** User can pass in a fully customized button or false for when the back button should not be rendered. */
-    backButton?: HvGlobalActionsProps["backButton"];
+    title: React.ReactNode;
+    /** Fully customized button or false for when the back button should not be rendered. */
+    backButton?: React.ReactNode;
     /** An object containing all the labels. */
     labels?: Partial<typeof DEFAULT_LABELS_2>;
-    children: React.ReactNode;
+    children?: React.ReactNode;
+    /** Props for the default back button. */
+    backButtonProps?: Partial<HvIconButtonProps>;
     /** A Jss Object used to override or extend the styles applied. */
     classes?: HvCanvasToolbarClasses;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-lab",
-  "version": "5.36.0",
+  "version": "5.36.1",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Contributed React components for the NEXT UI Kit.",
@@ -15,7 +15,8 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/lumada-design/hv-uikit-react.git"
+    "url": "https://github.com/lumada-design/hv-uikit-react.git",
+    "directory": "packages/lab"
   },
   "license": "Apache-2.0",
   "bugs": {
@@ -32,9 +33,9 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^6.0.1",
     "@emotion/css": "^11.11.0",
-    "@hitachivantara/uikit-react-core": "^5.66.8",
-    "@hitachivantara/uikit-react-icons": "^5.10.1",
-    "@hitachivantara/uikit-styles": "^5.30.2",
+    "@hitachivantara/uikit-react-core": "^5.66.9",
+    "@hitachivantara/uikit-react-icons": "^5.10.2",
+    "@hitachivantara/uikit-styles": "^5.30.3",
     "@mui/base": "^5.0.0-beta.40",
     "@types/react-grid-layout": "^1.3.5",
     "react-grid-layout": "^1.4.4",
@@ -50,7 +51,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "6cfa285815d1ff1d4621790762555845129a3fd3",
+  "gitHead": "1c091835a6f0fda7b57464b7a9cd3f27e018101b",
   "exports": {
     ".": {
       "require": "./dist/cjs/index.cjs",

package/dist/esm/Canvas/CanvasPanel/CanvasPanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CanvasPanel.js","sources":["../../../../src/Canvas/CanvasPanel/CanvasPanel.tsx"],"sourcesContent":["import { useCallback, useEffect } from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  useControlled,\n  useDefaultProps,\n  useLabels,\n  useTheme,\n} from \"@hitachivantara/uikit-react-core\";\nimport { End, Start } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvCanvasTab, HvCanvasTabs } from \"../CanvasTabs\";\nimport { staticClasses, useClasses } from \"./CanvasPanel.styles\";\n\nexport { staticClasses as canvasPanelClasses };\n\nexport type HvCanvasPanelClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  open: \"Open\",\n  close: \"Close\",\n};\n\nexport interface HvCanvasPanelProps extends HvBaseProps<HTMLDivElement> {\n  /** Whether the panel is open or not. If this property is defined the panel must be fully controlled. */\n  open?: boolean;\n  /** When uncontrolled, defines the initial state of the panel. */\n  defaultOpened?: boolean;\n  /** The tabs that should be visible on the canvas panel */\n  tabs?: HvCanvasTab[];\n  /** The function that will be executed whenever the panel toggles. It will receive the state of the accordion. */\n  onToggle?: (\n    event: React.MouseEvent | React.KeyboardEvent,\n    open: boolean,\n  ) => void;\n  /** The function that will be executed when a tab changes.It will receive the id of the selected tab. */\n  onTabChange?: (event: React.SyntheticEvent, tabId: string) => void;\n  /** An object containing all the labels. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /* The content that will be rendered within canvas panel. */\n  children?: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasPanelClasses;\n}\n\n/**\n * A panel component to use in a canvas context.\n */\nexport const HvCanvasPanel = (props: HvCanvasPanelProps) => {\n  const {\n    open: openProp,\n    defaultOpened = false,\n    tabs,\n    onToggle,\n    onTabChange,\n    labels: labelsProp,\n    className,\n    children,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvCanvasPanel\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n  const { rootId, activeTheme } = useTheme();\n\n  const [open, setOpen] = useControlled(openProp, Boolean(defaultOpened));\n\n  const setPanelWidth = useCallback(() => {\n    if (rootId) {\n      document\n        .getElementById(rootId)\n        ?.style.setProperty(\n          \"--canvas-panel-width\",\n          !open\n            ? \"0px\"\n            : `${320 + (activeTheme ? parseInt(activeTheme.space.md, 10) : 24)}px`,\n        );\n    }\n  }, [activeTheme, open, rootId]);\n\n  useEffect(() => {\n    setPanelWidth();\n  }, [open, setPanelWidth]);\n\n  const handleTogglePanel = (event) => {\n    setOpen((prev) => !prev);\n    onToggle?.(event, !open);\n  };\n\n  const handleTabChange = (event, tabId) => {\n    onTabChange?.(event, tabId);\n  };\n\n  return (\n    <>\n      <div\n        className={cx(classes.root, className, {\n          [classes.open]: open,\n          [classes.close]: !open,\n        })}\n        {...others}\n      >\n        {tabs && (\n          <HvCanvasTabs\n            className={classes.tabs}\n            tabs={tabs}\n            onChange={handleTabChange}\n          />\n        )}\n        <div className={classes.content}>{children}</div>\n      </div>\n      <div\n        className={cx(classes.handle, {\n          [classes.handleOpen]: open,\n          [classes.handleClose]: !open,\n        })}\n        onClick={handleTogglePanel}\n        role=\"button\"\n        tabIndex={0}\n        onKeyDown={(e) => {\n          if (e.key === \"Enter\" || e.key === \" \") {\n            handleTogglePanel(e);\n          }\n        }}\n        aria-label={open ? labels.close : labels.open}\n      >\n        <div className={classes.handleButton}>\n          {open ? <Start color={[\"primary\"]} /> : <End color={[\"primary\"]} />}\n        </div>\n      </div>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAkBA,MAAM,iBAAiB;AAAA,EACrB,MAAM;AAAA,EACN,OAAO;AACT;AA2Ba,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ,MAAM;AAAA,IACN,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AACxC,QAAA,SAAS,UAAU,gBAAgB,UAAU;AACnD,QAAM,EAAE,QAAQ,YAAY,IAAI,SAAS;AAEnC,QAAA,CAAC,MAAM,OAAO,IAAI,cAAc,UAAU,QAAQ,aAAa,CAAC;AAEhE,QAAA,gBAAgB,YAAY,MAAM;AACtC,QAAI,QAAQ;AAEP,eAAA,eAAe,MAAM,GACpB,MAAM;AAAA,QACN;AAAA,QACA,CAAC,OACG,QACA,GAAG,OAAO,cAAc,SAAS,YAAY,MAAM,IAAI,EAAE,IAAI,GAAG;AAAA,MAAA;AAAA,IAE1E;AAAA,EACC,GAAA,CAAC,aAAa,MAAM,MAAM,CAAC;AAE9B,YAAU,MAAM;AACA;EAAA,GACb,CAAC,MAAM,aAAa,CAAC;AAElB,QAAA,oBAAoB,CAAC,UAAU;AAC3B,YAAA,CAAC,SAAS,CAAC,IAAI;AACZ,eAAA,OAAO,CAAC,IAAI;AAAA,EAAA;AAGnB,QAAA,kBAAkB,CAAC,OAAO,UAAU;AACxC,kBAAc,OAAO,KAAK;AAAA,EAAA;AAG5B,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,MAAM,WAAW;AAAA,UACrC,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,KAAK,GAAG,CAAC;AAAA,QAAA,CACnB;AAAA,QACA,GAAG;AAAA,QAEH,UAAA;AAAA,UACC,QAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,QAAQ;AAAA,cACnB;AAAA,cACA,UAAU;AAAA,YAAA;AAAA,UACZ;AAAA,UAED,oBAAA,OAAA,EAAI,WAAW,QAAQ,SAAU,UAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAC7C;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,QAAQ;AAAA,UAC5B,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,WAAW,GAAG,CAAC;AAAA,QAAA,CACzB;AAAA,QACD,SAAS;AAAA,QACT,MAAK;AAAA,QACL,UAAU;AAAA,QACV,WAAW,CAAC,MAAM;AAChB,cAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,8BAAkB,CAAC;AAAA,UACrB;AAAA,QACF;AAAA,QACA,cAAY,OAAO,OAAO,QAAQ,OAAO;AAAA,QAEzC,8BAAC,OAAI,EAAA,WAAW,QAAQ,cACrB,UAAA,2BAAQ,OAAM,EAAA,OAAO,CAAC,SAAS,GAAG,IAAM,oBAAA,KAAA,EAAI,OAAO,CAAC,SAAS,EAAG,CAAA,GACnE;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/esm/Canvas/CanvasPanel/CanvasPanel.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CanvasPanel.styles.js","sources":["../../../../src/Canvas/CanvasPanel/CanvasPanel.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCanvasPanel\", {\n  root: {\n    height: \"100%\",\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    boxShadow: `4px 0px 8px -4px color-mix(in srgb, #414141 12%, transparent)`,\n    zIndex: theme.zIndices.overlay,\n    backgroundColor: \"transparent\",\n    transition: \"width 0.3s ease\",\n    overflow: \"hidden\",\n    \"&$open\": {\n      width: 320,\n    },\n    \"&$close\": {\n      width: 0,\n    },\n  },\n  tabs: {},\n  content: {\n    backgroundColor: theme.colors.atmo1,\n    height: \"100%\",\n    padding: theme.space.md,\n  },\n  handle: {\n    height: 172,\n    width: 35,\n    display: \"flex\",\n    justifyContent: \"center\",\n    zIndex: theme.zIndices.overlay,\n    boxShadow: `4px 0px 8px -4px color-mix(in srgb, #414141 12%, transparent)`,\n    backgroundColor: theme.colors.atmo1,\n    borderRadius: `0 ${theme.radii.round} ${theme.radii.round} 0 `,\n    position: \"absolute\",\n    transition: \"left 0.3s ease\",\n    top: `calc(50% - 86px)`,\n    \"&$handleOpen\": {\n      left: 320,\n    },\n    \"&$handleClose\": {\n      left: 0,\n    },\n    \"&:hover\": {\n      cursor: \"pointer\",\n    },\n  },\n  handleButton: {\n    top: `calc(50% - 16px)`,\n    position: \"absolute\",\n  },\n  open: {},\n  close: {},\n  handleOpen: {},\n  handleClose: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,KAAK;AAAA,IACL,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ,MAAM,SAAS;AAAA,IACvB,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAU;AAAA,MACR,OAAO;AAAA,IACT;AAAA,IACA,WAAW;AAAA,MACT,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,MAAM,CAAC;AAAA,EACP,SAAS;AAAA,IACP,iBAAiB,MAAM,OAAO;AAAA,IAC9B,QAAQ;AAAA,IACR,SAAS,MAAM,MAAM;AAAA,EACvB;AAAA,EACA,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,QAAQ,MAAM,SAAS;AAAA,IACvB,WAAW;AAAA,IACX,iBAAiB,MAAM,OAAO;AAAA,IAC9B,cAAc,KAAK,MAAM,MAAM,KAAK,IAAI,MAAM,MAAM,KAAK;AAAA,IACzD,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,gBAAgB;AAAA,MACd,MAAM;AAAA,IACR;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,cAAc;AAAA,IACZ,KAAK;AAAA,IACL,UAAU;AAAA,EACZ;AAAA,EACA,MAAM,CAAC;AAAA,EACP,OAAO,CAAC;AAAA,EACR,YAAY,CAAC;AAAA,EACb,aAAa,CAAC;AAChB,CAAC;"}

package/dist/esm/Canvas/CanvasTabs/CanvasTabs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CanvasTabs.js","sources":["../../../../src/Canvas/CanvasTabs/CanvasTabs.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { Tab } from \"@mui/base/Tab\";\nimport { Tabs, TabsProps } from \"@mui/base/Tabs\";\nimport { TabsList } from \"@mui/base/TabsList\";\nimport {\n  ExtractNames,\n  useDefaultProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./CanvasTabs.styles\";\n\nexport { staticClasses as canvasTabsClasses };\n\nexport type HvCanvasTabsClasses = ExtractNames<typeof useClasses>;\n\nexport type HvCanvasTab = {\n  id: string;\n  content: React.ReactNode;\n};\n\nexport interface HvCanvasTabsProps extends Omit<TabsProps, \"onChange\"> {\n  /** The list of tabs. */\n  tabs: HvCanvasTab[];\n  /** Event handler to run when a tab is clicked. */\n  onChange?: (event: React.SyntheticEvent, tabId: string) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasTabsClasses;\n}\n\n/**\n *\n */\nexport const HvCanvasTabs = (props: HvCanvasTabsProps) => {\n  const {\n    tabs,\n    onChange,\n    className,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvCanvasTabs\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [selectedTab, setSelectedTab] = useState<string>(\n    tabs?.[0]?.id || \"none\",\n  );\n\n  const handleTabChange = (event, value) => {\n    onChange?.(event, value);\n    setSelectedTab(value);\n  };\n\n  return (\n    <Tabs\n      value={selectedTab}\n      onChange={handleTabChange}\n      className={cx(classes.root, className)}\n      selectionFollowsFocus\n      {...others}\n    >\n      <TabsList className={classes.list}>\n        {tabs?.map((tab) => (\n          <Tab\n            key={tab.id}\n            value={tab.id}\n            className={cx(classes.tab, {\n              [classes.selected]: tab.id === selectedTab,\n            })}\n            onChange={handleTabChange}\n            tabIndex={0}\n          >\n            {tab.content}\n          </Tab>\n        ))}\n      </TabsList>\n    </Tabs>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAgCa,MAAA,eAAe,CAAC,UAA6B;AAClD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,gBAAgB,KAAK;AAEzC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,CAAC,aAAa,cAAc,IAAI;AAAA,IACpC,OAAO,CAAC,GAAG,MAAM;AAAA,EAAA;AAGb,QAAA,kBAAkB,CAAC,OAAO,UAAU;AACxC,eAAW,OAAO,KAAK;AACvB,mBAAe,KAAK;AAAA,EAAA;AAIpB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC,uBAAqB;AAAA,MACpB,GAAG;AAAA,MAEJ,UAAA,oBAAC,YAAS,WAAW,QAAQ,MAC1B,UAAM,MAAA,IAAI,CAAC,QACV;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,OAAO,IAAI;AAAA,UACX,WAAW,GAAG,QAAQ,KAAK;AAAA,YACzB,CAAC,QAAQ,QAAQ,GAAG,IAAI,OAAO;AAAA,UAAA,CAChC;AAAA,UACD,UAAU;AAAA,UACV,UAAU;AAAA,UAET,UAAI,IAAA;AAAA,QAAA;AAAA,QARA,IAAI;AAAA,MAUZ,CAAA,GACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/Canvas/CanvasTabs/CanvasTabs.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CanvasTabs.styles.js","sources":["../../../../src/Canvas/CanvasTabs/CanvasTabs.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCanvasTabs\", {\n  root: {\n    height: 48,\n    display: \"flex\",\n  },\n  list: {\n    display: \"flex\",\n    width: \"100%\",\n  },\n  tab: {\n    height: \"100%\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    flex: 1,\n    borderRadius: `16px 16px 0 0 `,\n    backgroundColor: theme.colors.atmo2,\n    color: theme.colors.secondary_60,\n    overflow: \"hidden\",\n    width: \"100%\",\n    \"& svg .color0\": {\n      fill: \"currentcolor\",\n    },\n    \"&:hover\": {\n      cursor: \"pointer\",\n    },\n    \"&:focus\": {\n      backgroundColor: theme.colors.atmo1,\n    },\n    \"&$selected\": {\n      backgroundColor: theme.colors.atmo1,\n      ...theme.typography.label,\n    },\n  },\n  selected: {},\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,KAAK;AAAA,IACH,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,MAAM;AAAA,IACN,cAAc;AAAA,IACd,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,IACpB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,iBAAiB;AAAA,MACf,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,IACA,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,cAAc;AAAA,MACZ,iBAAiB,MAAM,OAAO;AAAA,MAC9B,GAAG,MAAM,WAAW;AAAA,IACtB;AAAA,EACF;AAAA,EACA,UAAU,CAAC;AACb,CAAC;"}

package/dist/esm/Canvas/CanvasToolbar/CanvasToolbar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CanvasToolbar.js","sources":["../../../../src/Canvas/CanvasToolbar/CanvasToolbar.tsx"],"sourcesContent":["import {\n  ExtractNames,\n  HvBaseProps,\n  HvGlobalActionsProps,\n  HvIconButton,\n  HvTypography,\n  useDefaultProps,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Previous } from \"@hitachivantara/uikit-react-icons\";\n\nimport { staticClasses, useClasses } from \"./CanvasToolbar.styles\";\n\nexport { staticClasses as canvasToolbarClasses };\n\nexport type HvCanvasToolbarClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  back: \"Back\",\n};\n\nexport interface HvCanvasToolbarProps\n  extends HvBaseProps<HTMLDivElement, \"title\"> {\n  /** Text to display in the component. */\n  title: HvGlobalActionsProps[\"title\"];\n  /** User can pass in a fully customized button or false for when the back button should not be rendered. */\n  backButton?: HvGlobalActionsProps[\"backButton\"];\n  /** An object containing all the labels. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /* The content that will be rendered within the toolbar. */\n  children: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasToolbarClasses;\n}\n\n/**\n * A toolbar component to use in a canvas context.\n */\nexport const HvCanvasToolbar = (props: HvCanvasToolbarProps) => {\n  const {\n    title: titleProp,\n    backButton,\n    labels: labelsProp,\n    className,\n    children,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvCanvasToolbar\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const title =\n    typeof titleProp === \"string\" ? (\n      <HvTypography variant=\"title4\">{titleProp}</HvTypography>\n    ) : (\n      titleProp\n    );\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      <div className={classes.back}>\n        {backButton ?? (\n          <HvIconButton title={labels.back} variant=\"primaryGhost\">\n            <Previous />\n          </HvIconButton>\n        )}\n      </div>\n      <div className={classes.title}>{title}</div>\n      {children && <div className={classes.actions}>{children}</div>}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;AAiBA,MAAM,iBAAiB;AAAA,EACrB,MAAM;AACR;AAmBa,MAAA,kBAAkB,CAAC,UAAgC;AACxD,QAAA;AAAA,IACJ,OAAO;AAAA,IACP;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAE5C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AACxC,QAAA,SAAS,UAAU,gBAAgB,UAAU;AAE7C,QAAA,QACJ,OAAO,cAAc,+BAClB,cAAa,EAAA,SAAQ,UAAU,UAAA,UAAU,CAAA,IAE1C;AAIF,SAAA,qBAAC,SAAI,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAC/C,UAAA;AAAA,IAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,MACrB,wBACE,oBAAA,cAAA,EAAa,OAAO,OAAO,MAAM,SAAQ,gBACxC,UAAC,oBAAA,UAAA,CAAA,CAAS,EACZ,CAAA,GAEJ;AAAA,IACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,OAAQ,UAAM,OAAA;AAAA,IACrC,YAAa,oBAAA,OAAA,EAAI,WAAW,QAAQ,SAAU,UAAS;AAAA,EAC1D,EAAA,CAAA;AAEJ;"}

package/dist/esm/Canvas/CanvasToolbar/CanvasToolbar.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CanvasToolbar.styles.js","sources":["../../../../src/Canvas/CanvasToolbar/CanvasToolbar.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCanvasToolbar\", {\n  root: {\n    width: `calc(100% - var(--canvas-panel-width))`,\n    height: 54,\n    display: \"flex\",\n    alignItems: \"center\",\n    borderRadius: theme.radii.full,\n    backgroundColor: theme.colors.atmo1,\n    padding: theme.spacing(0, \"md\", 0, 0),\n    position: \"absolute\",\n    right: 0,\n    top: 0,\n    margin: `0 0 0 ${theme.space.md}`,\n    transition: \"width 0.3s ease\",\n  },\n  back: {\n    borderRadius: `${theme.radii.full} 0 0 ${theme.radii.full}`,\n    minWidth: 68,\n    backgroundColor: theme.colors.containerBackgroundHover,\n    height: \"100%\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n  title: {\n    display: \"flex\",\n    alignItems: \"center\",\n    padding: theme.spacing(0, \"md\"),\n    height: \"100%\",\n    flexGrow: 1,\n  },\n  actions: {\n    display: \"flex\",\n    flexWrap: \"nowrap\",\n    overflow: \"scroll\",\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,cAAc,MAAM,MAAM;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,SAAS,MAAM,QAAQ,GAAG,MAAM,GAAG,CAAC;AAAA,IACpC,UAAU;AAAA,IACV,OAAO;AAAA,IACP,KAAK;AAAA,IACL,QAAQ,SAAS,MAAM,MAAM,EAAE;AAAA,IAC/B,YAAY;AAAA,EACd;AAAA,EACA,MAAM;AAAA,IACJ,cAAc,GAAG,MAAM,MAAM,IAAI,QAAQ,MAAM,MAAM,IAAI;AAAA,IACzD,UAAU;AAAA,IACV,iBAAiB,MAAM,OAAO;AAAA,IAC9B,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,SAAS,MAAM,QAAQ,GAAG,IAAI;AAAA,IAC9B,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,EACZ;AACF,CAAC;"}