@hitachivantara/uikit-react-pentaho 0.2.0 → 0.4.0

package/dist/esm/Canvas/ToolbarTabs/ToolbarTabs.js

@@ -0,0 +1,263 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useCallback, useMemo } from "react";
+import { useResizeDetector } from "react-resize-detector";
+import { useDefaultProps, useLabels, useControlled, useForkRef, theme, HvOverflowTooltip, HvInlineEditor, HvIconButton, HvDropDownMenu, HvButton, uniqueId } from "@hitachivantara/uikit-react-core";
+import { Close, CloseXS, MoreOptionsHorizontal, AddAlt } from "@hitachivantara/uikit-react-icons";
+import { useClasses, ICON_WIDTH, MIN_TAB_WIDTH } from "./ToolbarTabs.styles.js";
+import { staticClasses } from "./ToolbarTabs.styles.js";
+import { HvCanvasPanelTabs } from "../PanelTabs/PanelTabs.js";
+import { HvCanvasPanelTab } from "../PanelTab/PanelTab.js";
+const DEFAULT_LABELS = {
+  create: "Create new",
+  undefined: "Undefined",
+  close: "Close",
+  dropdownMenu: "Dropdown menu"
+};
+const DROPDOWN_MENU_WIDTH = 64;
+const BORDER_WIDTH = 2;
+const HvCanvasToolbarTabs = forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    selectedTabId: selectedTabIdProp,
+    icon: iconProp,
+    tabs: tabsProp,
+    defaultTabs: defaultTabsProp = [],
+    labels: labelsProp,
+    classes: classesProp,
+    onTabChange: onTabChangeProp,
+    onChange: onChangeProp,
+    ...others
+  } = useDefaultProps("HvCanvasToolbarTabs", props);
+  const { classes, cx } = useClasses(classesProp);
+  const labels = useLabels(DEFAULT_LABELS, labelsProp);
+  const { width: tabWidth = 0, ref: tabRef } = useResizeDetector({
+    handleHeight: false,
+    refreshMode: "debounce",
+    refreshOptions: {
+      leading: true
+    }
+  });
+  const { width: actionsWidth = 0, ref: actionsRef } = useResizeDetector({
+    handleHeight: false
+  });
+  const { width: rootWidth = 0, ref: rootRef } = useResizeDetector({
+    handleHeight: false
+  });
+  const [tabs, setTabs] = useControlled(tabsProp, defaultTabsProp);
+  const [selectedTab, setSelectedTab] = useControlled(
+    selectedTabIdProp,
+    tabs?.[0]?.id ?? "none"
+  );
+  const rootWidthLimitReached = useRef(false);
+  const groupTabs = useCallback(
+    (allTabs) => {
+      let fullTabWidth = MIN_TAB_WIDTH;
+      const rootScrollWidth = rootRef.current?.scrollWidth ?? 0;
+      if (rootScrollWidth - rootWidth >= 1 || rootWidthLimitReached.current) {
+        fullTabWidth = tabWidth + BORDER_WIDTH;
+        rootWidthLimitReached.current = true;
+      }
+      const totalWidth = allTabs.length * fullTabWidth + DROPDOWN_MENU_WIDTH;
+      if (tabWidth > 0 && totalWidth > rootWidth - actionsWidth) {
+        const visibleCount = Math.floor(
+          (rootWidth - actionsWidth - DROPDOWN_MENU_WIDTH) / fullTabWidth
+        );
+        const temporaryHiddenTabs = allTabs.slice(visibleCount);
+        const selectedTabHiddenIndex = temporaryHiddenTabs.findIndex(
+          (tab) => tab.id === selectedTab
+        );
+        const excludedTabIndex = visibleCount - 1;
+        const shouldShuffle = selectedTabHiddenIndex !== -1 && visibleCount > 0;
+        if (shouldShuffle) {
+          return {
+            visibleTabs: [
+              ...tabs.slice(0, excludedTabIndex),
+              temporaryHiddenTabs[selectedTabHiddenIndex]
+            ].filter((tab) => tab),
+            hiddenTabs: [
+              tabs[excludedTabIndex],
+              ...temporaryHiddenTabs.filter(
+                (tab, i) => i !== selectedTabHiddenIndex
+              )
+            ].filter((tab) => tab)
+          };
+        }
+        return {
+          visibleTabs: tabs.slice(0, visibleCount),
+          hiddenTabs: temporaryHiddenTabs
+        };
+      }
+      return {
+        visibleTabs: allTabs,
+        hiddenTabs: []
+      };
+    },
+    [actionsWidth, rootRef, rootWidth, selectedTab, tabWidth, tabs]
+  );
+  const { hiddenTabs, visibleTabs } = useMemo(
+    () => groupTabs(tabs),
+    [groupTabs, tabs]
+  );
+  const rootForkedRef = useForkRef(ref, rootRef);
+  const handleChangeTabs = (event, newTabs) => {
+    setTabs(newTabs);
+    onChangeProp?.(event, newTabs);
+  };
+  const handleChangeSelectedTab = (event, value) => {
+    setSelectedTab(String(value));
+    onTabChangeProp?.(event, String(value));
+  };
+  const handleCreateNew = (event) => {
+    const newTabs = [...tabs];
+    const newTab = {
+      id: uniqueId(),
+      label: `${labels.undefined} ${newTabs.length + 1}`,
+      icon: iconProp
+    };
+    newTabs.push(newTab);
+    handleChangeSelectedTab(event, newTab.id);
+    handleChangeTabs?.(event, newTabs);
+  };
+  const handleClose = (event, tabId) => {
+    const newTabs = tabs.filter((tab) => tab.id !== tabId);
+    if (tabId === selectedTab) {
+      const currentIndex = tabs.findIndex((tab) => tab.id === tabId);
+      const newIndex = currentIndex - 1 < 0 ? 0 : currentIndex - 1;
+      handleChangeSelectedTab(event, newTabs[newIndex]?.id ?? "none");
+    }
+    if (hiddenTabs.length === 1) rootWidthLimitReached.current = false;
+    handleChangeTabs(event, newTabs);
+  };
+  const handleEdit = (event, value, tabId) => handleChangeTabs(
+    event,
+    tabs.map((tab) => tab.id === tabId ? { ...tab, label: value } : tab)
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootForkedRef,
+      className: cx(classes.root, className),
+      ...others,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: classes.tabsContainer, children: [
+          visibleTabs.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              HvCanvasPanelTabs,
+              {
+                classes: { list: classes.tabsList },
+                value: selectedTab,
+                onChange: handleChangeSelectedTab,
+                children: visibleTabs.map((tab, index) => /* @__PURE__ */ jsx(
+                  HvCanvasPanelTab,
+                  {
+                    ref: index === 0 ? tabRef : void 0,
+                    id: String(tab.id),
+                    className: classes.tab,
+                    value: tab.id,
+                    tabIndex: 0,
+                    "aria-label": tab.label,
+                    children: /* @__PURE__ */ jsxs("div", { className: classes.tabContent, children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: cx({
+                            [classes.tabIcon]: !!tab.icon
+                          }),
+                          children: tab.icon
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("div", { role: "none", children: tab.label }),
+                      /* @__PURE__ */ jsx("div", { role: "none", children: /* @__PURE__ */ jsx(Close, {}) }),
+                      selectedTab !== tab.id && visibleTabs[index + 1]?.id !== selectedTab && /* @__PURE__ */ jsx("div", { className: classes.tabDivider })
+                    ] })
+                  },
+                  tab.id
+                ))
+              }
+            ),
+            visibleTabs.map((tab, index) => {
+              const btnDisabled = selectedTab !== tab.id;
+              const num = index + 1;
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    // @ts-ignore
+                    "--full-tab-width": `calc(${tabWidth}px + ${BORDER_WIDTH}px)`,
+                    "--right": `calc(${num} * var(--full-tab-width))`,
+                    "--editor-width": `calc(var(--full-tab-width) - ${tab.icon ? 2 : 1} * ${ICON_WIDTH}px - ${theme.space.xs})`
+                  },
+                  children: [
+                    btnDisabled ? /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        className: classes.tabLabel,
+                        onClick: (event) => handleChangeSelectedTab(event, tab.id),
+                        "aria-label": tab.label,
+                        tabIndex: -1,
+                        children: /* @__PURE__ */ jsx(HvOverflowTooltip, { data: tab.label })
+                      }
+                    ) : /* @__PURE__ */ jsx(
+                      HvInlineEditor,
+                      {
+                        className: cx(classes.tabLabel, classes.activeTabLabel),
+                        "aria-label": tab.label,
+                        value: tab.label,
+                        buttonProps: { size: "sm" },
+                        onChange: (event, value) => handleEdit(event, value, tab.id)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      HvIconButton,
+                      {
+                        style: {
+                          // @ts-ignore
+                          "--close-color": btnDisabled ? theme.colors.secondary_60 : theme.colors.primary
+                        },
+                        className: classes.closeButton,
+                        title: labels.close,
+                        variant: "primaryGhost",
+                        onClick: (event) => handleClose(event, tab.id),
+                        children: /* @__PURE__ */ jsx(CloseXS, {})
+                      },
+                      tab.id
+                    )
+                  ]
+                },
+                tab.id
+              );
+            })
+          ] }),
+          hiddenTabs.length > 0 && /* @__PURE__ */ jsx(
+            HvDropDownMenu,
+            {
+              className: classes.dropdownMenu,
+              dataList: hiddenTabs,
+              icon: /* @__PURE__ */ jsx(MoreOptionsHorizontal, {}),
+              labels: { dropdownMenu: labels.dropdownMenu },
+              onClick: (event, value) => handleChangeSelectedTab(event, value.id ?? "none")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { ref: actionsRef, className: classes.actionsContainer, children: [
+          children,
+          /* @__PURE__ */ jsx(
+            HvButton,
+            {
+              variant: "primaryGhost",
+              startIcon: /* @__PURE__ */ jsx(AddAlt, {}),
+              onClick: handleCreateNew,
+              children: labels.create
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+export {
+  HvCanvasToolbarTabs,
+  staticClasses as canvasToolbarTabsClasses
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarTabs.js","sources":["../../../../src/Canvas/ToolbarTabs/ToolbarTabs.tsx"],"sourcesContent":["import { forwardRef, useCallback, useMemo, useRef } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvButton,\n  HvButtonProps,\n  HvDropDownMenu,\n  HvIconButton,\n  HvInlineEditor,\n  HvOverflowTooltip,\n  theme,\n  uniqueId,\n  useControlled,\n  useDefaultProps,\n  useForkRef,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport {\n  AddAlt,\n  Close,\n  CloseXS,\n  MoreOptionsHorizontal,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvCanvasPanelTab } from \"../PanelTab\";\nimport { HvCanvasPanelTabs, HvCanvasPanelTabsProps } from \"../PanelTabs\";\nimport {\n  ICON_WIDTH,\n  MIN_TAB_WIDTH,\n  staticClasses,\n  useClasses,\n} from \"./ToolbarTabs.styles\";\n\nexport { staticClasses as canvasToolbarTabsClasses };\n\nexport type HvCanvasToolbarTabsClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  create: \"Create new\",\n  undefined: \"Undefined\",\n  close: \"Close\",\n  dropdownMenu: \"Dropdown menu\",\n};\n\ninterface ToolbarTabsTab {\n  id: string;\n  label: string;\n  icon?: React.ReactNode;\n}\n\nexport interface HvCanvasToolbarTabsProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /** When controlled, defines the tabs. */\n  tabs?: ToolbarTabsTab[];\n  /** When uncontrolled, defines the initial tabs. */\n  defaultTabs?: ToolbarTabsTab[];\n  /** Id of the selected tab if it needs to be controlled. */\n  selectedTabId?: string;\n  /** Defines the icon to be placed before the label when a new tab is created. If not defined, no icon is used. */\n  icon?: React.ReactNode;\n  /** Callback triggered when a tab changes/is clicked. */\n  onTabChange?: (\n    event: React.SyntheticEvent | null,\n    tabId: string | null,\n  ) => void;\n  /** Callback triggered when the tabs change: new tab added, tab removed, tab reorder, and label updated. */\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement> | React.SyntheticEvent,\n    tabs: ToolbarTabsTab[],\n  ) => void;\n  /** An object containing all the labels. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCanvasToolbarTabsClasses;\n}\n\ninterface GroupedTabs {\n  hiddenTabs: ToolbarTabsTab[];\n  visibleTabs: ToolbarTabsTab[];\n}\n\nconst DROPDOWN_MENU_WIDTH = 64;\nconst BORDER_WIDTH = 2;\n\n/**\n * A toolbar tabs component to use in a canvas context.\n */\nexport const HvCanvasToolbarTabs = forwardRef<\n  HTMLDivElement,\n  HvCanvasToolbarTabsProps\n>((props, ref) => {\n  const {\n    children,\n    className,\n    selectedTabId: selectedTabIdProp,\n    icon: iconProp,\n    tabs: tabsProp,\n    defaultTabs: defaultTabsProp = [],\n    labels: labelsProp,\n    classes: classesProp,\n    onTabChange: onTabChangeProp,\n    onChange: onChangeProp,\n    ...others\n  } = useDefaultProps(\"HvCanvasToolbarTabs\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  // Tab resize detector: to know when to use the dropdown menu\n  const { width: tabWidth = 0, ref: tabRef } = useResizeDetector({\n    handleHeight: false,\n    refreshMode: \"debounce\",\n    refreshOptions: {\n      leading: true,\n    },\n  });\n\n  // Actions resize detector: to know when to use the dropdown menu\n  const { width: actionsWidth = 0, ref: actionsRef } = useResizeDetector({\n    handleHeight: false,\n  });\n\n  // Root resize detector: to know when to use the dropdown menu\n  const { width: rootWidth = 0, ref: rootRef } = useResizeDetector({\n    handleHeight: false,\n  });\n\n  const [tabs, setTabs] = useControlled(tabsProp, defaultTabsProp);\n  const [selectedTab, setSelectedTab] = useControlled<string | null>(\n    selectedTabIdProp,\n    tabs?.[0]?.id ?? \"none\",\n  );\n\n  const rootWidthLimitReached = useRef(false);\n\n  const groupTabs = useCallback(\n    (allTabs: ToolbarTabsTab[]): GroupedTabs => {\n      let fullTabWidth = MIN_TAB_WIDTH;\n\n      const rootScrollWidth = rootRef.current?.scrollWidth ?? 0;\n      if (rootScrollWidth - rootWidth >= 1 || rootWidthLimitReached.current) {\n        fullTabWidth = tabWidth + BORDER_WIDTH;\n        rootWidthLimitReached.current = true;\n      }\n\n      const totalWidth = allTabs.length * fullTabWidth + DROPDOWN_MENU_WIDTH;\n\n      if (tabWidth > 0 && totalWidth > rootWidth - actionsWidth) {\n        const visibleCount = Math.floor(\n          (rootWidth - actionsWidth - DROPDOWN_MENU_WIDTH) / fullTabWidth,\n        );\n        const temporaryHiddenTabs = allTabs.slice(visibleCount);\n        const selectedTabHiddenIndex = temporaryHiddenTabs.findIndex(\n          (tab) => tab.id === selectedTab,\n        );\n        const excludedTabIndex = visibleCount - 1;\n        const shouldShuffle = selectedTabHiddenIndex !== -1 && visibleCount > 0;\n\n        if (shouldShuffle) {\n          return {\n            visibleTabs: [\n              ...tabs.slice(0, excludedTabIndex),\n              temporaryHiddenTabs[selectedTabHiddenIndex],\n            ].filter((tab) => tab),\n            hiddenTabs: [\n              tabs[excludedTabIndex],\n              ...temporaryHiddenTabs.filter(\n                (tab, i) => i !== selectedTabHiddenIndex,\n              ),\n            ].filter((tab) => tab),\n          };\n        }\n        return {\n          visibleTabs: tabs.slice(0, visibleCount),\n          hiddenTabs: temporaryHiddenTabs,\n        };\n      }\n      return {\n        visibleTabs: allTabs,\n        hiddenTabs: [],\n      };\n    },\n    [actionsWidth, rootRef, rootWidth, selectedTab, tabWidth, tabs],\n  );\n\n  const { hiddenTabs, visibleTabs } = useMemo(\n    () => groupTabs(tabs),\n    [groupTabs, tabs],\n  );\n\n  const rootForkedRef = useForkRef(ref, rootRef);\n\n  const handleChangeTabs = (\n    event: React.MouseEvent<HTMLButtonElement> | React.SyntheticEvent,\n    newTabs: ToolbarTabsTab[],\n  ) => {\n    setTabs(newTabs);\n    onChangeProp?.(event, newTabs);\n  };\n\n  const handleChangeSelectedTab: HvCanvasPanelTabsProps[\"onChange\"] = (\n    event,\n    value,\n  ) => {\n    setSelectedTab(String(value));\n    onTabChangeProp?.(event, String(value));\n  };\n\n  const handleCreateNew: HvButtonProps[\"onClick\"] = (event) => {\n    const newTabs: ToolbarTabsTab[] = [...tabs];\n    const newTab: ToolbarTabsTab = {\n      id: uniqueId(),\n      label: `${labels.undefined} ${newTabs.length + 1}`,\n      icon: iconProp,\n    };\n    newTabs.push(newTab);\n    handleChangeSelectedTab(event, newTab.id);\n    handleChangeTabs?.(event, newTabs);\n  };\n\n  const handleClose = (\n    event: React.MouseEvent<HTMLButtonElement>,\n    tabId: string,\n  ) => {\n    const newTabs = tabs.filter((tab) => tab.id !== tabId);\n\n    if (tabId === selectedTab) {\n      const currentIndex = tabs.findIndex((tab) => tab.id === tabId);\n      const newIndex = currentIndex - 1 < 0 ? 0 : currentIndex - 1;\n      handleChangeSelectedTab(event, newTabs[newIndex]?.id ?? \"none\");\n    }\n\n    if (hiddenTabs.length === 1) rootWidthLimitReached.current = false;\n\n    handleChangeTabs(event, newTabs);\n  };\n\n  const handleEdit = (\n    event: React.SyntheticEvent,\n    value: string,\n    tabId: string,\n  ) =>\n    handleChangeTabs(\n      event,\n      tabs.map((tab) => (tab.id === tabId ? { ...tab, label: value } : tab)),\n    );\n\n  return (\n    <div\n      ref={rootForkedRef}\n      className={cx(classes.root, className)}\n      {...others}\n    >\n      <div className={classes.tabsContainer}>\n        {visibleTabs.length > 0 && (\n          <>\n            <HvCanvasPanelTabs\n              classes={{ list: classes.tabsList }}\n              value={selectedTab}\n              onChange={handleChangeSelectedTab}\n            >\n              {visibleTabs.map((tab, index) => (\n                <HvCanvasPanelTab\n                  key={tab.id}\n                  ref={index === 0 ? tabRef : undefined}\n                  id={String(tab.id)}\n                  className={classes.tab}\n                  value={tab.id}\n                  tabIndex={0}\n                  aria-label={tab.label}\n                >\n                  <div className={classes.tabContent}>\n                    <div\n                      className={cx({\n                        [classes.tabIcon]: !!tab.icon,\n                      })}\n                    >\n                      {tab.icon}\n                    </div>\n\n                    {/* Invisible components added in order for the tab width to go between max/min as some inner components are absolutely positioned */}\n                    <div role=\"none\">{tab.label}</div>\n                    <div role=\"none\">\n                      <Close />\n                    </div>\n\n                    {selectedTab !== tab.id &&\n                      visibleTabs[index + 1]?.id !== selectedTab && (\n                        <div className={classes.tabDivider} />\n                      )}\n                  </div>\n                </HvCanvasPanelTab>\n              ))}\n            </HvCanvasPanelTabs>\n            {/* For accessibility purposes, interactive elements cannot be children of a tablist or tab so they are rendered as HvCanvasTabs sibling. */}\n            {visibleTabs.map((tab, index) => {\n              const btnDisabled = selectedTab !== tab.id;\n              const num = index + 1;\n              return (\n                <div\n                  key={tab.id}\n                  style={{\n                    // @ts-ignore\n                    \"--full-tab-width\": `calc(${tabWidth}px + ${BORDER_WIDTH}px)`,\n                    \"--right\": `calc(${num} * var(--full-tab-width))`,\n                    \"--editor-width\": `calc(var(--full-tab-width) - ${tab.icon ? 2 : 1} * ${ICON_WIDTH}px - ${theme.space.xs})`,\n                  }}\n                >\n                  {btnDisabled ? (\n                    <button\n                      type=\"button\"\n                      className={classes.tabLabel}\n                      onClick={(event) =>\n                        handleChangeSelectedTab(event, tab.id)\n                      }\n                      aria-label={tab.label}\n                      tabIndex={-1}\n                    >\n                      <HvOverflowTooltip data={tab.label} />\n                    </button>\n                  ) : (\n                    <HvInlineEditor\n                      className={cx(classes.tabLabel, classes.activeTabLabel)}\n                      aria-label={tab.label}\n                      value={tab.label}\n                      buttonProps={{ size: \"sm\" }}\n                      onChange={(event, value) =>\n                        handleEdit(event, value, tab.id)\n                      }\n                    />\n                  )}\n                  <HvIconButton\n                    key={tab.id}\n                    style={{\n                      // @ts-ignore\n                      \"--close-color\": btnDisabled\n                        ? theme.colors.secondary_60\n                        : theme.colors.primary,\n                    }}\n                    className={classes.closeButton}\n                    title={labels.close}\n                    variant=\"primaryGhost\"\n                    onClick={(event: React.MouseEvent<HTMLButtonElement>) =>\n                      handleClose(event, tab.id)\n                    }\n                  >\n                    <CloseXS />\n                  </HvIconButton>\n                </div>\n              );\n            })}\n          </>\n        )}\n        {hiddenTabs.length > 0 && (\n          <HvDropDownMenu\n            className={classes.dropdownMenu}\n            dataList={hiddenTabs}\n            icon={<MoreOptionsHorizontal />}\n            labels={{ dropdownMenu: labels.dropdownMenu }}\n            onClick={(event, value) =>\n              handleChangeSelectedTab(event, value.id ?? \"none\")\n            }\n          />\n        )}\n      </div>\n      <div ref={actionsRef} className={classes.actionsContainer}>\n        {children}\n        <HvButton\n          variant=\"primaryGhost\"\n          startIcon={<AddAlt />}\n          onClick={handleCreateNew}\n        >\n          {labels.create}\n        </HvButton>\n      </div>\n    </div>\n  );\n});\n"],"names":[],"mappings":"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"}

package/dist/esm/Canvas/ToolbarTabs/ToolbarTabs.styles.js

@@ -0,0 +1,123 @@
+import { tabClasses } from "@mui/base/Tab";
+import { createClasses, theme, baseInputClasses } from "@hitachivantara/uikit-react-core";
+const ICON_WIDTH = 32;
+const MIN_TAB_WIDTH = 120;
+const MAX_TAB_WIDTH = 220;
+const TAB_HEIGHT = 32;
+const TAB_LABEL_HEIGHT = 24;
+const { staticClasses, useClasses } = createClasses(
+  "HvCanvasToolbarTabs",
+  {
+    root: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      width: "100%",
+      backgroundColor: theme.colors.atmo1,
+      boxShadow: theme.colors.shadow,
+      borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,
+      gap: theme.space.sm,
+      transition: "width 0.3s ease"
+    },
+    tabsContainer: {
+      position: "relative",
+      display: "flex"
+    },
+    tabsList: {
+      height: TAB_HEIGHT,
+      background: theme.colors.atmo1
+    },
+    tab: {
+      width: `clamp(${MIN_TAB_WIDTH}px, 100%, ${MAX_TAB_WIDTH}px)`,
+      border: `1px solid ${theme.colors.atmo1}`,
+      borderBottom: "none",
+      borderRadius: "10px 10px 0 0",
+      boxShadow: "none",
+      backgroundColor: theme.colors.atmo1,
+      [`&.${tabClasses.selected}`]: {
+        color: theme.colors.primary,
+        backgroundColor: theme.colors.containerBackgroundHover,
+        borderColor: theme.colors.atmo4
+      }
+    },
+    tabContent: {
+      height: TAB_HEIGHT,
+      display: "flex",
+      justifyContent: "space-between",
+      position: "relative",
+      width: "100%",
+      padding: theme.space.xs,
+      "& > div:first-of-type:not($tabIcon)": {
+        visibility: "hidden"
+      },
+      "& > div:nth-of-type(2)": {
+        visibility: "hidden",
+        minWidth: `calc(${MIN_TAB_WIDTH}px - ${theme.space.xs} - 2 * ${ICON_WIDTH}px)`,
+        maxWidth: `calc(${MAX_TAB_WIDTH}px - ${theme.space.xs} - 2 * ${ICON_WIDTH}px)`
+      },
+      "& > div:nth-of-type(3)": {
+        visibility: "hidden",
+        marginRight: `calc(-1 * ${theme.space.xs})`
+      }
+    },
+    tabIcon: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    closeButton: {
+      position: "absolute",
+      top: 0,
+      right: "calc(100% - var(--right))",
+      color: "var(--close-color)"
+    },
+    tabLabel: {
+      position: "absolute",
+      width: "var(--editor-width)",
+      right: `calc(100% - var(--right) + ${ICON_WIDTH}px)`,
+      height: TAB_LABEL_HEIGHT,
+      top: 4.5,
+      "&:not($activeTabLabel)": {
+        ...theme.typography.body,
+        color: theme.colors.secondary_60,
+        background: "none",
+        cursor: "pointer"
+      }
+    },
+    activeTabLabel: {
+      "& button": {
+        height: TAB_LABEL_HEIGHT,
+        minHeight: TAB_LABEL_HEIGHT,
+        backgroundColor: "transparent",
+        "& p": { ...theme.typography.label, color: theme.colors.primary },
+        "& span": { display: "none" }
+      },
+      [`&& .${baseInputClasses.inputRoot}`]: {
+        height: TAB_LABEL_HEIGHT,
+        minHeight: TAB_LABEL_HEIGHT
+      }
+    },
+    tabDivider: {
+      position: "absolute",
+      height: 18,
+      width: 1,
+      backgroundColor: theme.colors.atmo3,
+      right: 0
+    },
+    actionsContainer: {
+      display: "flex",
+      justifyContent: "flex-end",
+      alignItems: "center",
+      gap: theme.space.sm
+    },
+    dropdownMenu: {
+      margin: theme.spacing(0, "sm")
+    }
+  }
+);
+export {
+  ICON_WIDTH,
+  MIN_TAB_WIDTH,
+  staticClasses,
+  useClasses
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarTabs.styles.js","sources":["../../../../src/Canvas/ToolbarTabs/ToolbarTabs.styles.tsx"],"sourcesContent":["import { tabClasses } from \"@mui/base/Tab\";\nimport {\n  baseInputClasses,\n  createClasses,\n  theme,\n} from \"@hitachivantara/uikit-react-core\";\n\nexport const ICON_WIDTH = 32;\nexport const MIN_TAB_WIDTH = 120;\nconst MAX_TAB_WIDTH = 220;\nconst TAB_HEIGHT = 32;\nconst TAB_LABEL_HEIGHT = 24;\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvCanvasToolbarTabs\",\n  {\n    root: {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      alignItems: \"center\",\n      width: \"100%\",\n      backgroundColor: theme.colors.atmo1,\n      boxShadow: theme.colors.shadow,\n      borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,\n      gap: theme.space.sm,\n      transition: \"width 0.3s ease\",\n    },\n    tabsContainer: {\n      position: \"relative\",\n      display: \"flex\",\n    },\n    tabsList: {\n      height: TAB_HEIGHT,\n      background: theme.colors.atmo1,\n    },\n    tab: {\n      width: `clamp(${MIN_TAB_WIDTH}px, 100%, ${MAX_TAB_WIDTH}px)`,\n      border: `1px solid ${theme.colors.atmo1}`,\n      borderBottom: \"none\",\n      borderRadius: \"10px 10px 0 0\",\n      boxShadow: \"none\",\n      backgroundColor: theme.colors.atmo1,\n      [`&.${tabClasses.selected}`]: {\n        color: theme.colors.primary,\n        backgroundColor: theme.colors.containerBackgroundHover,\n        borderColor: theme.colors.atmo4,\n      },\n    },\n    tabContent: {\n      height: TAB_HEIGHT,\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      position: \"relative\",\n      width: \"100%\",\n      padding: theme.space.xs,\n      \"& > div:first-of-type:not($tabIcon)\": {\n        visibility: \"hidden\",\n      },\n      \"& > div:nth-of-type(2)\": {\n        visibility: \"hidden\",\n        minWidth: `calc(${MIN_TAB_WIDTH}px - ${theme.space.xs} - 2 * ${ICON_WIDTH}px)`,\n        maxWidth: `calc(${MAX_TAB_WIDTH}px - ${theme.space.xs} - 2 * ${ICON_WIDTH}px)`,\n      },\n      \"& > div:nth-of-type(3)\": {\n        visibility: \"hidden\",\n        marginRight: `calc(-1 * ${theme.space.xs})`,\n      },\n    },\n    tabIcon: {\n      display: \"flex\",\n      justifyContent: \"center\",\n      alignItems: \"center\",\n    },\n    closeButton: {\n      position: \"absolute\",\n      top: 0,\n      right: \"calc(100% - var(--right))\",\n      color: \"var(--close-color)\",\n    },\n    tabLabel: {\n      position: \"absolute\",\n      width: \"var(--editor-width)\",\n      right: `calc(100% - var(--right) + ${ICON_WIDTH}px)`,\n      height: TAB_LABEL_HEIGHT,\n      top: 4.5,\n      \"&:not($activeTabLabel)\": {\n        ...theme.typography.body,\n        color: theme.colors.secondary_60,\n        background: \"none\",\n        cursor: \"pointer\",\n      },\n    },\n    activeTabLabel: {\n      \"& button\": {\n        height: TAB_LABEL_HEIGHT,\n        minHeight: TAB_LABEL_HEIGHT,\n        backgroundColor: \"transparent\",\n        \"& p\": { ...theme.typography.label, color: theme.colors.primary },\n        \"& span\": { display: \"none\" },\n      },\n      [`&& .${baseInputClasses.inputRoot}`]: {\n        height: TAB_LABEL_HEIGHT,\n        minHeight: TAB_LABEL_HEIGHT,\n      },\n    },\n    tabDivider: {\n      position: \"absolute\",\n      height: 18,\n      width: 1,\n      backgroundColor: theme.colors.atmo3,\n      right: 0,\n    },\n    actionsContainer: {\n      display: \"flex\",\n      justifyContent: \"flex-end\",\n      alignItems: \"center\",\n      gap: theme.space.sm,\n    },\n    dropdownMenu: {\n      margin: theme.spacing(0, \"sm\"),\n    },\n  },\n);\n"],"names":[],"mappings":"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"}

package/dist/esm/Card/Card.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { fixedForwardRef, useDefaultProps } from "@hitachivantara/uikit-react-core";
+import { useClasses } from "./Card.styles.js";
+import { staticClasses } from "./Card.styles.js";
+const HvCard = fixedForwardRef(function HvCard2(props, ref) {
+  const {
+    classes: classesProp,
+    className,
+    component: Component = "div",
+    children,
+    ...others
+  } = useDefaultProps("HvCard", props);
+  const { classes, cx } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(Component, { ref, className: cx(classes.root, className), ...others, children });
+});
+export {
+  HvCard,
+  staticClasses as cardClasses
+};

package/dist/esm/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sources":["../../../src/Card/Card.tsx"],"sourcesContent":["import {\n  ExtractNames,\n  fixedForwardRef,\n  PolymorphicComponentRef,\n  PolymorphicRef,\n  useDefaultProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./Card.styles\";\n\nexport { staticClasses as cardClasses };\n\nexport type HvCardClasses = ExtractNames<typeof useClasses>;\n\nexport type HvCardProps<C extends React.ElementType = \"div\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** A Jss Object used to override or extend the styles applied. */\n      classes?: HvCardClasses;\n    }\n  >;\n\n/**\n * The Pentaho Card component.\n */\nexport const HvCard = fixedForwardRef(function HvCard<\n  C extends React.ElementType = \"div\",\n>(props: HvCardProps<C>, ref: PolymorphicRef<C>) {\n  const {\n    classes: classesProp,\n    className,\n    component: Component = \"div\",\n    children,\n    ...others\n  } = useDefaultProps(\"HvCard\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <Component ref={ref} className={cx(classes.root, className)} {...others}>\n      {children}\n    </Component>\n  );\n});\n"],"names":["HvCard"],"mappings":";;;;AA0BO,MAAM,SAAS,gBAAgB,SAASA,QAE7C,OAAuB,KAAwB;AACzC,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,WAAW,YAAY;AAAA,IACvB;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,UAAU,KAAK;AAEnC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA,oBAAC,WAAU,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAC9D,SACH,CAAA;AAEJ,CAAC;"}

package/dist/esm/Card/Card.styles.js

@@ -0,0 +1,16 @@
+import { createClasses, theme } from "@hitachivantara/uikit-react-core";
+const { staticClasses, useClasses } = createClasses("HvCard", {
+  root: {
+    position: "relative",
+    display: "block",
+    overflow: "hidden",
+    backgroundColor: theme.colors.atmo1,
+    borderRadius: theme.space.sm,
+    border: `1px solid ${theme.colors.atmo3}`,
+    boxShadow: "0 4px 6px 0 rgba(65,65,65,0.06)"
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};

package/dist/esm/Card/Card.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.styles.js","sources":["../../../src/Card/Card.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCard\", {\n  root: {\n    position: \"relative\",\n    display: \"block\",\n    overflow: \"hidden\",\n    backgroundColor: theme.colors.atmo1,\n    borderRadius: theme.space.sm,\n    border: `1px solid ${theme.colors.atmo3}`,\n    boxShadow: \"0 4px 6px 0 rgba(65,65,65,0.06)\",\n  },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,iBAAiB,MAAM,OAAO;AAAA,IAC9B,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ,aAAa,MAAM,OAAO,KAAK;AAAA,IACvC,WAAW;AAAA,EACb;AACF,CAAC;"}

package/dist/esm/Card/CardMedia/CardMedia.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDefaultProps } from "@hitachivantara/uikit-react-core";
+import { useClasses } from "./CardMedia.styles.js";
+import { staticClasses } from "./CardMedia.styles.js";
+const HvCardMedia = forwardRef(
+  (props, ref) => {
+    const {
+      src,
+      alt = "",
+      height = 160,
+      className,
+      classes: classesProp,
+      children,
+      ...others
+    } = useDefaultProps("HvCardMedia", props);
+    const { classes, cx } = useClasses(classesProp);
+    return /* @__PURE__ */ jsx("div", { className: cx(classes.root, className), children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        ref,
+        height,
+        className: classes.image,
+        src,
+        alt,
+        ...others
+      }
+    ) });
+  }
+);
+export {
+  HvCardMedia,
+  staticClasses as cardMediaClasses
+};

package/dist/esm/Card/CardMedia/CardMedia.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardMedia.js","sources":["../../../../src/Card/CardMedia/CardMedia.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  useDefaultProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./CardMedia.styles\";\n\nexport { staticClasses as cardMediaClasses };\n\nexport type HvCardMediaClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardMediaProps extends HvBaseProps<HTMLImageElement> {\n  /** The source for the image to use in the card. */\n  src: string;\n  /** The height of the image container. */\n  height?: number;\n  /** A text alternative to the image. */\n  alt?: string;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCardMediaClasses;\n}\n\n/**\n * A subcomponent to be used within the `HvCard` component. This component is used to display an image within the card.\n */\nexport const HvCardMedia = forwardRef<HTMLImageElement, HvCardMediaProps>(\n  (props, ref) => {\n    const {\n      src,\n      alt = \"\",\n      height = 160,\n      className,\n      classes: classesProp,\n      children,\n      ...others\n    } = useDefaultProps(\"HvCardMedia\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    return (\n      <div className={cx(classes.root, className)}>\n        <img\n          ref={ref}\n          height={height}\n          className={classes.image}\n          src={src}\n          alt={alt}\n          {...others}\n        />\n      </div>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;AA2BO,MAAM,cAAc;AAAA,EACzB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA,MAAM;AAAA,MACN,SAAS;AAAA,MACT;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,+BACG,OAAI,EAAA,WAAW,GAAG,QAAQ,MAAM,SAAS,GACxC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAW,QAAQ;AAAA,QACnB;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAER,EAAA,CAAA;AAAA,EAEJ;AACF;"}

package/dist/esm/Card/CardMedia/CardMedia.styles.js

@@ -0,0 +1,12 @@
+import { createClasses } from "@hitachivantara/uikit-react-core";
+const { staticClasses, useClasses } = createClasses("HvCardMedia", {
+  root: {},
+  image: {
+    objectFit: "cover",
+    width: "100%"
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};

package/dist/esm/Card/CardMedia/CardMedia.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardMedia.styles.js","sources":["../../../../src/Card/CardMedia/CardMedia.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCardMedia\", {\n  root: {},\n  image: {\n    objectFit: \"cover\",\n    width: \"100%\",\n  },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM,CAAC;AAAA,EACP,OAAO;AAAA,IACL,WAAW;AAAA,IACX,OAAO;AAAA,EACT;AACF,CAAC;"}

package/dist/esm/Card/CardSection/CardSection.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDefaultProps } from "@hitachivantara/uikit-react-core";
+import { useClasses } from "./CardSection.styles.js";
+import { staticClasses } from "./CardSection.styles.js";
+const HvCardSection = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      classes: classesProp,
+      children
+    } = useDefaultProps("HvCardSection", props);
+    const { classes, cx } = useClasses(classesProp);
+    return /* @__PURE__ */ jsx("div", { ref, className: cx(classes.root, className), children });
+  }
+);
+export {
+  HvCardSection,
+  staticClasses as cardSectionClasses
+};

package/dist/esm/Card/CardSection/CardSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardSection.js","sources":["../../../../src/Card/CardSection/CardSection.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  useDefaultProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./CardSection.styles\";\n\nexport { staticClasses as cardSectionClasses };\n\nexport type HvCardSectionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardSectionProps extends HvBaseProps {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCardSectionClasses;\n}\n\n/**\n * A subcomponent to be used within the `HvCard` component. This component is used to display content on the card.\n */\nexport const HvCardSection = forwardRef<HTMLDivElement, HvCardSectionProps>(\n  (props, ref) => {\n    const {\n      className,\n      classes: classesProp,\n      children,\n    } = useDefaultProps(\"HvCardSection\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    return (\n      <div ref={ref} className={cx(classes.root, className)}>\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;AAqBO,MAAM,gBAAgB;AAAA,EAC3B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,IAAA,IACE,gBAAgB,iBAAiB,KAAK;AAC1C,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,WAAA,oBAAC,SAAI,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GACjD,SACH,CAAA;AAAA,EAEJ;AACF;"}

package/dist/esm/Card/CardSection/CardSection.styles.js

@@ -0,0 +1,10 @@
+import { createClasses, theme } from "@hitachivantara/uikit-react-core";
+const { staticClasses, useClasses } = createClasses("HvCardSection", {
+  root: {
+    padding: theme.space.sm
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};

package/dist/esm/Card/CardSection/CardSection.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardSection.styles.js","sources":["../../../../src/Card/CardSection/CardSection.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCardSection\", {\n  root: {\n    padding: theme.space.sm,\n  },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,SAAS,MAAM,MAAM;AAAA,EACvB;AACF,CAAC;"}

package/dist/esm/index.js

@@ -8,15 +8,31 @@ import { staticClasses as staticClasses4 } from "./Canvas/SidePanel/SidePanel.st
 import { HvCanvasSidePanel } from "./Canvas/SidePanel/SidePanel.js";
 import { staticClasses as staticClasses5 } from "./Canvas/Toolbar/Toolbar.styles.js";
 import { HvCanvasToolbar } from "./Canvas/Toolbar/Toolbar.js";
+import { staticClasses as staticClasses6 } from "./Canvas/ToolbarTabs/ToolbarTabs.styles.js";
+import { HvCanvasToolbarTabs } from "./Canvas/ToolbarTabs/ToolbarTabs.js";
+import { staticClasses as staticClasses7 } from "./Card/Card.styles.js";
+import { HvCard } from "./Card/Card.js";
+import { staticClasses as staticClasses8 } from "./Card/CardMedia/CardMedia.styles.js";
+import { HvCardMedia } from "./Card/CardMedia/CardMedia.js";
+import { staticClasses as staticClasses9 } from "./Card/CardSection/CardSection.styles.js";
+import { HvCardSection } from "./Card/CardSection/CardSection.js";
 export {
   HvCanvasBottomPanel,
   HvCanvasPanelTab,
   HvCanvasPanelTabs,
   HvCanvasSidePanel,
   HvCanvasToolbar,
+  HvCanvasToolbarTabs,
+  HvCard,
+  HvCardMedia,
+  HvCardSection,
   staticClasses as canvasBottomPanelClasses,
   staticClasses2 as canvasPanelTabClasses,
   staticClasses3 as canvasPanelTabsClasses,
   staticClasses4 as canvasSidePanelClasses,
-  staticClasses5 as canvasToolbarClasses
+  staticClasses5 as canvasToolbarClasses,
+  staticClasses6 as canvasToolbarTabsClasses,
+  staticClasses7 as cardClasses,
+  staticClasses8 as cardMediaClasses,
+  staticClasses9 as cardSectionClasses
 };

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}