@hitachivantara/uikit-react-lab 5.36.2 → 5.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-lab",
-  "version": "5.36.2",
+  "version": "5.37.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Contributed React components for the NEXT UI Kit.",
@@ -33,7 +33,7 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^6.0.1",
     "@emotion/css": "^11.11.0",
-    "@hitachivantara/uikit-react-core": "^5.66.9",
+    "@hitachivantara/uikit-react-core": "^5.66.10",
     "@hitachivantara/uikit-react-icons": "^5.10.2",
     "@hitachivantara/uikit-styles": "^5.30.3",
     "@mui/base": "^5.0.0-beta.40",
@@ -51,7 +51,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "918e8daac7fccbb8e9db1b23aae40034e1bb239c",
+  "gitHead": "fd75cf61e59e75d65a015d0e148ec71ecd88da4b",
   "exports": {
     ".": {
       "require": "./dist/cjs/index.cjs",

package/dist/cjs/Canvas/Panel/Panel.cjs

@@ -1,79 +0,0 @@
-"use strict";
-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 Panel_styles = require("./Panel.styles.cjs");
-const Tabs = require("../Tabs/Tabs.cjs");
-const DEFAULT_LABELS = {
-  open: "Open",
-  close: "Close"
-};
-const HvCanvasPanel = (props) => {
-  const {
-    open: openProp,
-    defaultOpened = false,
-    tabs,
-    onToggle,
-    onTabChange,
-    labels: labelsProp,
-    className,
-    children,
-    classes: classesProp,
-    ...others
-  } = uikitReactCore.useDefaultProps("HvCanvasPanel", props);
-  const { classes, cx } = Panel_styles.useClasses(classesProp);
-  const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProp);
-  const [open, setOpen] = uikitReactCore.useControlled(openProp, Boolean(defaultOpened));
-  const handleTogglePanel = (event) => {
-    setOpen((prev) => !prev);
-    onToggle?.(event, !open);
-  };
-  const handleTabChange = (event, tabId) => {
-    onTabChange?.(event, tabId);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: cx(classes.root, className, {
-          [classes.open]: open,
-          [classes.close]: !open
-        }),
-        ...others,
-        children: [
-          tabs && /* @__PURE__ */ jsxRuntime.jsx(
-            Tabs.HvCanvasTabs,
-            {
-              className: classes.tabs,
-              tabs,
-              onChange: handleTabChange
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.content, children })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: cx(classes.handle, {
-          [classes.handleOpen]: open,
-          [classes.handleClose]: !open
-        }),
-        onClick: handleTogglePanel,
-        role: "button",
-        tabIndex: 0,
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            handleTogglePanel(e);
-          }
-        },
-        "aria-label": open ? labels.close : labels.open,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.handleButton, children: open ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Start, { color: ["primary"] }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.End, { color: ["primary"] }) })
-      }
-    )
-  ] });
-};
-exports.canvasPanelClasses = Panel_styles.staticClasses;
-exports.HvCanvasPanel = HvCanvasPanel;

package/dist/cjs/Canvas/Panel/Panel.styles.cjs

@@ -1,66 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const uikitStyles = require("@hitachivantara/uikit-styles");
-const { staticClasses, useClasses } = uikitReactCore.createClasses("HvCanvasPanel", {
-  root: {
-    height: "100%",
-    position: "absolute",
-    top: 0,
-    left: 0,
-    boxShadow: "4px 0px 8px -4px color-mix(in srgb, #414141 12%, transparent)",
-    zIndex: uikitStyles.theme.zIndices.overlay,
-    backgroundColor: "transparent",
-    transition: "visibility 0.3s ease, width 0.3s ease",
-    overflow: "hidden",
-    "&$open": {
-      width: 320,
-      visibility: "visible"
-    },
-    "&$close": {
-      width: 0,
-      visibility: "hidden"
-    }
-  },
-  tabs: {},
-  content: {
-    backgroundColor: uikitStyles.theme.colors.atmo1,
-    height: "100%",
-    padding: uikitStyles.theme.space.md
-  },
-  handle: {
-    height: 172,
-    width: 35,
-    display: "flex",
-    justifyContent: "center",
-    zIndex: uikitStyles.theme.zIndices.overlay,
-    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`,
-    position: "absolute",
-    transition: "left 0.3s ease",
-    top: "calc(50% - 86px)",
-    "&$handleOpen": {
-      left: 320
-    },
-    "&$handleClose": {
-      left: 0
-    },
-    "&:hover": {
-      cursor: "pointer"
-    },
-    "&:focus-visible": {
-      ...uikitReactCore.outlineStyles
-    }
-  },
-  handleButton: {
-    top: "calc(50% - 16px)",
-    position: "absolute"
-  },
-  open: {},
-  close: {},
-  handleOpen: {},
-  handleClose: {}
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/Canvas/Tabs/Tabs.cjs

@@ -1,48 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const React = require("react");
-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 Tabs_styles = require("./Tabs.styles.cjs");
-const HvCanvasTabs = (props) => {
-  const {
-    tabs,
-    onChange,
-    className,
-    classes: classesProp,
-    ...others
-  } = uikitReactCore.useDefaultProps("HvCanvasTabs", props);
-  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);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Tabs.Tabs,
-    {
-      value: selectedTab,
-      onChange: handleTabChange,
-      className: cx(classes.root, className),
-      selectionFollowsFocus: true,
-      ...others,
-      children: /* @__PURE__ */ jsxRuntime.jsx(TabsList.TabsList, { className: classes.list, children: tabs?.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
-        Tab.Tab,
-        {
-          value: tab.id,
-          className: cx(classes.tab, {
-            [classes.selected]: tab.id === selectedTab
-          }),
-          tabIndex: 0,
-          children: tab.content
-        },
-        tab.id
-      )) })
-    }
-  );
-};
-exports.canvasTabsClasses = Tabs_styles.staticClasses;
-exports.HvCanvasTabs = HvCanvasTabs;

package/dist/cjs/Canvas/Tabs/Tabs.styles.cjs

@@ -1,44 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const { staticClasses, useClasses } = uikitReactCore.createClasses("HvCanvasTabs", {
-  root: {
-    height: 48,
-    display: "flex"
-  },
-  list: {
-    display: "flex",
-    width: "100%"
-  },
-  tab: {
-    height: "100%",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flex: 1,
-    borderRadius: "16px 16px 0 0",
-    backgroundColor: uikitReactCore.theme.colors.atmo2,
-    color: uikitReactCore.theme.colors.secondary_60,
-    overflow: "hidden",
-    width: "100%",
-    "& svg .color0": {
-      fill: "currentcolor"
-    },
-    "&:hover": {
-      cursor: "pointer"
-    },
-    "&:focus": {
-      backgroundColor: uikitReactCore.theme.colors.atmo1
-    },
-    "&$selected": {
-      backgroundColor: uikitReactCore.theme.colors.atmo1,
-      ...uikitReactCore.theme.typography.label
-    },
-    "&:focus-visible": {
-      ...uikitReactCore.outlineStyles
-    }
-  },
-  selected: {}
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/Canvas/Toolbar/Toolbar.cjs

@@ -1,39 +0,0 @@
-"use strict";
-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 Toolbar_styles = require("./Toolbar.styles.cjs");
-const DEFAULT_LABELS = {
-  back: "Back"
-};
-const HvCanvasToolbar = (props) => {
-  const {
-    title: titleProp,
-    backButton,
-    labels: labelsProp,
-    className,
-    children,
-    backButtonProps,
-    classes: classesProp,
-    ...others
-  } = uikitReactCore.useDefaultProps("HvCanvasToolbar", props);
-  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",
-        ...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 = Toolbar_styles.staticClasses;
-exports.HvCanvasToolbar = HvCanvasToolbar;

package/dist/cjs/Canvas/Toolbar/Toolbar.styles.cjs

@@ -1,42 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const uikitStyles = require("@hitachivantara/uikit-styles");
-const { staticClasses, useClasses } = uikitReactCore.createClasses("HvCanvasToolbar", {
-  root: {
-    width: "100%",
-    height: 54,
-    display: "flex",
-    alignItems: "center",
-    borderRadius: uikitStyles.theme.radii.full,
-    backgroundColor: uikitStyles.theme.colors.atmo1,
-    position: "absolute",
-    right: 0,
-    top: 0,
-    transition: "width 0.3s ease"
-  },
-  back: {
-    borderRadius: `${uikitStyles.theme.radii.full} 0 0 ${uikitStyles.theme.radii.full}`,
-    minWidth: 68,
-    backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
-    height: "100%",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  title: {
-    display: "flex",
-    alignItems: "center",
-    padding: uikitStyles.theme.spacing(0, "md"),
-    height: "100%",
-    flexGrow: 1
-  },
-  actions: {
-    display: "flex",
-    flexWrap: "nowrap",
-    overflow: "auto",
-    paddingRight: uikitStyles.theme.space.md
-  }
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

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

@@ -1,80 +0,0 @@
-import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
-import { useDefaultProps, useLabels, useControlled } from "@hitachivantara/uikit-react-core";
-import { Start, End } from "@hitachivantara/uikit-react-icons";
-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"
-};
-const HvCanvasPanel = (props) => {
-  const {
-    open: openProp,
-    defaultOpened = false,
-    tabs,
-    onToggle,
-    onTabChange,
-    labels: labelsProp,
-    className,
-    children,
-    classes: classesProp,
-    ...others
-  } = useDefaultProps("HvCanvasPanel", props);
-  const { classes, cx } = useClasses(classesProp);
-  const labels = useLabels(DEFAULT_LABELS, labelsProp);
-  const [open, setOpen] = useControlled(openProp, Boolean(defaultOpened));
-  const handleTogglePanel = (event) => {
-    setOpen((prev) => !prev);
-    onToggle?.(event, !open);
-  };
-  const handleTabChange = (event, tabId) => {
-    onTabChange?.(event, tabId);
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cx(classes.root, className, {
-          [classes.open]: open,
-          [classes.close]: !open
-        }),
-        ...others,
-        children: [
-          tabs && /* @__PURE__ */ jsx(
-            HvCanvasTabs,
-            {
-              className: classes.tabs,
-              tabs,
-              onChange: handleTabChange
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: classes.content, children })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cx(classes.handle, {
-          [classes.handleOpen]: open,
-          [classes.handleClose]: !open
-        }),
-        onClick: handleTogglePanel,
-        role: "button",
-        tabIndex: 0,
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            handleTogglePanel(e);
-          }
-        },
-        "aria-label": open ? labels.close : labels.open,
-        children: /* @__PURE__ */ jsx("div", { className: classes.handleButton, children: open ? /* @__PURE__ */ jsx(Start, { color: ["primary"] }) : /* @__PURE__ */ jsx(End, { color: ["primary"] }) })
-      }
-    )
-  ] });
-};
-export {
-  HvCanvasPanel,
-  staticClasses as canvasPanelClasses
-};

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

@@ -1 +0,0 @@
-{"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/Panel/Panel.styles.js

@@ -1,66 +0,0 @@
-import { createClasses, outlineStyles } from "@hitachivantara/uikit-react-core";
-import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvCanvasPanel", {
-  root: {
-    height: "100%",
-    position: "absolute",
-    top: 0,
-    left: 0,
-    boxShadow: "4px 0px 8px -4px color-mix(in srgb, #414141 12%, transparent)",
-    zIndex: theme.zIndices.overlay,
-    backgroundColor: "transparent",
-    transition: "visibility 0.3s ease, width 0.3s ease",
-    overflow: "hidden",
-    "&$open": {
-      width: 320,
-      visibility: "visible"
-    },
-    "&$close": {
-      width: 0,
-      visibility: "hidden"
-    }
-  },
-  tabs: {},
-  content: {
-    backgroundColor: theme.colors.atmo1,
-    height: "100%",
-    padding: theme.space.md
-  },
-  handle: {
-    height: 172,
-    width: 35,
-    display: "flex",
-    justifyContent: "center",
-    zIndex: theme.zIndices.overlay,
-    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`,
-    position: "absolute",
-    transition: "left 0.3s ease",
-    top: "calc(50% - 86px)",
-    "&$handleOpen": {
-      left: 320
-    },
-    "&$handleClose": {
-      left: 0
-    },
-    "&:hover": {
-      cursor: "pointer"
-    },
-    "&:focus-visible": {
-      ...outlineStyles
-    }
-  },
-  handleButton: {
-    top: "calc(50% - 16px)",
-    position: "absolute"
-  },
-  open: {},
-  close: {},
-  handleOpen: {},
-  handleClose: {}
-});
-export {
-  staticClasses,
-  useClasses
-};

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

@@ -1 +0,0 @@
-{"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/Tabs/Tabs.js

@@ -1,49 +0,0 @@
-import { jsx } from "@emotion/react/jsx-runtime";
-import { useState } from "react";
-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 "./Tabs.styles.js";
-import { staticClasses } from "./Tabs.styles.js";
-const HvCanvasTabs = (props) => {
-  const {
-    tabs,
-    onChange,
-    className,
-    classes: classesProp,
-    ...others
-  } = useDefaultProps("HvCanvasTabs", props);
-  const { classes, cx } = useClasses(classesProp);
-  const [selectedTab, setSelectedTab] = useState(tabs?.[0]?.id || "none");
-  const handleTabChange = (event, value) => {
-    onChange?.(event, value);
-    setSelectedTab(value);
-  };
-  return /* @__PURE__ */ jsx(
-    Tabs,
-    {
-      value: selectedTab,
-      onChange: handleTabChange,
-      className: cx(classes.root, className),
-      selectionFollowsFocus: true,
-      ...others,
-      children: /* @__PURE__ */ jsx(TabsList, { className: classes.list, children: tabs?.map((tab) => /* @__PURE__ */ jsx(
-        Tab,
-        {
-          value: tab.id,
-          className: cx(classes.tab, {
-            [classes.selected]: tab.id === selectedTab
-          }),
-          tabIndex: 0,
-          children: tab.content
-        },
-        tab.id
-      )) })
-    }
-  );
-};
-export {
-  HvCanvasTabs,
-  staticClasses as canvasTabsClasses
-};

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

@@ -1 +0,0 @@
-{"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/Tabs/Tabs.styles.js

@@ -1,44 +0,0 @@
-import { createClasses, theme, outlineStyles } from "@hitachivantara/uikit-react-core";
-const { staticClasses, useClasses } = createClasses("HvCanvasTabs", {
-  root: {
-    height: 48,
-    display: "flex"
-  },
-  list: {
-    display: "flex",
-    width: "100%"
-  },
-  tab: {
-    height: "100%",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flex: 1,
-    borderRadius: "16px 16px 0 0",
-    backgroundColor: theme.colors.atmo2,
-    color: theme.colors.secondary_60,
-    overflow: "hidden",
-    width: "100%",
-    "& svg .color0": {
-      fill: "currentcolor"
-    },
-    "&:hover": {
-      cursor: "pointer"
-    },
-    "&:focus": {
-      backgroundColor: theme.colors.atmo1
-    },
-    "&$selected": {
-      backgroundColor: theme.colors.atmo1,
-      ...theme.typography.label
-    },
-    "&:focus-visible": {
-      ...outlineStyles
-    }
-  },
-  selected: {}
-});
-export {
-  staticClasses,
-  useClasses
-};

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

@@ -1 +0,0 @@
-{"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/Toolbar/Toolbar.js

@@ -1,40 +0,0 @@
-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 "./Toolbar.styles.js";
-import { staticClasses } from "./Toolbar.styles.js";
-const DEFAULT_LABELS = {
-  back: "Back"
-};
-const HvCanvasToolbar = (props) => {
-  const {
-    title: titleProp,
-    backButton,
-    labels: labelsProp,
-    className,
-    children,
-    backButtonProps,
-    classes: classesProp,
-    ...others
-  } = useDefaultProps("HvCanvasToolbar", props);
-  const { classes, cx } = useClasses(classesProp);
-  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",
-        ...backButtonProps,
-        children: /* @__PURE__ */ jsx(Previous, {})
-      }
-    ) }),
-    /* @__PURE__ */ jsx("div", { className: classes.title, children: title }),
-    children && /* @__PURE__ */ jsx("div", { className: classes.actions, children })
-  ] });
-};
-export {
-  HvCanvasToolbar,
-  staticClasses as canvasToolbarClasses
-};