@hitachivantara/uikit-react-pentaho 0.2.0 → 0.4.0

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

@@ -17,7 +17,8 @@ const HvCanvasBottomPanel = react.forwardRef((props, ref) => {
     minimize,
     leftActions,
     rightActions,
-    tab: tabProp,
+    overflowActions,
+    selectedTabId: selectedTabIdProp,
     classes: classesProp,
     onTabChange,
     onAction,
@@ -48,11 +49,11 @@ const HvCanvasBottomPanel = react.forwardRef((props, ref) => {
     }
   });
   const overflowing = react.useMemo(() => {
-    const scrollWidth = tabRef.current?.scrollWidth ?? 0;
-    return scrollWidth - tabWidth >= 1;
-  }, [tabRef, tabWidth]);
+    const availableWidth = tabWidth - (leftActions ? leftActionWidth : 0) - (rightActions ? rightActionWidth : 0);
+    return availableWidth < 60;
+  }, [leftActionWidth, leftActions, rightActionWidth, rightActions, tabWidth]);
   const [selectedTab, setSelectedTab] = uikitReactCore.useControlled(
-    tabProp,
+    selectedTabIdProp,
     tabs[0].id
   );
   const handleTabChange = (event, tabId) => {
@@ -82,8 +83,8 @@ const HvCanvasBottomPanel = react.forwardRef((props, ref) => {
             {
               style: {
                 // @ts-ignore
-                "--left-actions-width": `${leftActionWidth}px`,
-                "--right-actions-width": `${rightActionWidth}px`
+                "--left-actions-width": overflowing || !leftActions ? uikitReactCore.theme.space.sm : `calc(${leftActionWidth}px + ${uikitReactCore.theme.space.xs})`,
+                "--right-actions-width": !rightActions || overflowing && !overflowActions ? uikitReactCore.theme.space.sm : `calc(${overflowing ? 32 : rightActionWidth}px + ${uikitReactCore.theme.space.xs})`
               },
               onChange: handleTabChange,
               value: selectedTab,
@@ -94,13 +95,14 @@ const HvCanvasBottomPanel = react.forwardRef((props, ref) => {
                   id: `${id}-${tab.id}`,
                   value: tab.id,
                   className: classes.tab,
-                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.tabTitle, children: tab.title })
+                  tabIndex: 0,
+                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.tabTitle, children: typeof tab.title === "function" ? tab.title(overflowing) : tab.title })
                 },
                 tab.id
               ))
             }
           ),
-          (leftActions || rightActions) && !overflowing ? tabs.map((tab, index) => {
+          leftActions || rightActions || overflowActions ? tabs.map((tab, index) => {
             const btnsDisabled = selectedTab !== tab.id && !minimize;
             return /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
@@ -112,28 +114,65 @@ const HvCanvasBottomPanel = react.forwardRef((props, ref) => {
                   "--left": `calc(${index} * var(--tab-width))`
                 },
                 children: [
-                  leftActions && /* @__PURE__ */ jsxRuntime.jsx("div", { ref: leftActionRef, className: classes.leftActions, children: /* @__PURE__ */ jsxRuntime.jsx(
-                    uikitReactCore.HvActionsGeneric,
+                  leftActions && !overflowing && /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
                     {
-                      maxVisibleActions: 1,
-                      actions: leftActions,
-                      disabled: btnsDisabled,
-                      onAction: (event, action) => onAction?.(event, action, tab.id),
-                      variant: "secondaryGhost",
-                      iconOnly: true
+                      ref: leftActionRef,
+                      className: cx(classes.leftActions, {
+                        [classes.actionsDisabled]: btnsDisabled
+                      }),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        uikitReactCore.HvActionsGeneric,
+                        {
+                          maxVisibleActions: 1,
+                          actions: leftActions,
+                          disabled: btnsDisabled,
+                          onAction: (event, action) => onAction?.(event, action, tab.id),
+                          variant: "secondaryGhost",
+                          iconOnly: true
+                        }
+                      )
                     }
-                  ) }),
-                  rightActions && /* @__PURE__ */ jsxRuntime.jsx("div", { ref: rightActionRef, className: classes.rightActions, children: /* @__PURE__ */ jsxRuntime.jsx(
-                    uikitReactCore.HvActionsGeneric,
+                  ),
+                  rightActions && !overflowing && /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
                     {
-                      maxVisibleActions: 2,
-                      actions: rightActions,
-                      disabled: btnsDisabled,
-                      onAction: (event, action) => onAction?.(event, action, tab.id),
-                      variant: "secondaryGhost",
-                      iconOnly: true
+                      ref: rightActionRef,
+                      className: cx(classes.rightActions, {
+                        [classes.actionsDisabled]: btnsDisabled
+                      }),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        uikitReactCore.HvActionsGeneric,
+                        {
+                          maxVisibleActions: 2,
+                          actions: rightActions,
+                          disabled: btnsDisabled,
+                          onAction: (event, action) => onAction?.(event, action, tab.id),
+                          variant: "secondaryGhost",
+                          iconOnly: true
+                        }
+                      )
                     }
-                  ) })
+                  ),
+                  overflowActions && overflowing && /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cx(classes.rightActions, {
+                        [classes.actionsDisabled]: btnsDisabled
+                      }),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        uikitReactCore.HvActionsGeneric,
+                        {
+                          maxVisibleActions: 0,
+                          actions: overflowActions,
+                          disabled: btnsDisabled,
+                          onAction: (event, action) => onAction?.(event, action, tab.id),
+                          variant: "secondaryGhost",
+                          iconOnly: true
+                        }
+                      )
+                    }
+                  )
                 ]
               },
               tab.id

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

@@ -34,12 +34,7 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses(
         right: `calc(100% - var(--right) + ${uikitReactCore.theme.space.xs})`
       }
     },
-    overflowing: {
-      "& $tabTitle": {
-        paddingLeft: uikitReactCore.theme.space.sm,
-        paddingRight: uikitReactCore.theme.space.sm
-      }
-    },
+    overflowing: {},
     tab: {
       display: "flex",
       alignItems: "center",
@@ -50,8 +45,8 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses(
       display: "flex",
       width: "100%",
       padding: uikitReactCore.theme.space.sm,
-      paddingLeft: `calc(var(--left-actions-width) + ${uikitReactCore.theme.space.xs})`,
-      paddingRight: `calc(var(--right-actions-width) + ${uikitReactCore.theme.space.xs})`
+      paddingLeft: "var(--left-actions-width)",
+      paddingRight: "var(--right-actions-width)"
     },
     tabsRoot: {
       position: "relative"
@@ -66,6 +61,18 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses(
       right: uikitReactCore.theme.space.xs,
       top: 8
     },
+    actionsDisabled: {
+      pointerEvents: "none",
+      [`&& .${uikitReactCore.buttonClasses.disabled}`]: {
+        pointerEvents: "none",
+        backgroundColor: "transparent",
+        borderColor: "transparent",
+        ":hover": {
+          backgroundColor: "transparent",
+          borderColor: "transparent"
+        }
+      }
+    },
     content: { borderTopRightRadius: "var(--right-border-radius)" }
   }
 );

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

@@ -85,22 +85,16 @@ const HvCanvasSidePanel = react.forwardRef((props, ref) => {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+      uikitReactCore.HvIconButton,
       {
+        variant: "primaryGhost",
+        title: open ? labels.close : labels.open,
+        onClick: handleTogglePanel,
         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"] }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.End, { style: { rotate: open ? "180deg" : void 0 } })
       }
     )
   ] });

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

@@ -42,18 +42,8 @@ const { staticClasses, useClasses } = uikitReactCore.createClasses(
       },
       "&$handleClose": {
         left: 0
-      },
-      "&:hover": {
-        cursor: "pointer"
-      },
-      "&:focus-visible": {
-        ...uikitReactCore.outlineStyles
       }
     },
-    handleButton: {
-      top: "calc(50% - 16px)",
-      position: "absolute"
-    },
     open: {},
     close: {},
     handleOpen: {},

package/dist/cjs/Canvas/ToolbarTabs/ToolbarTabs.cjs

@@ -0,0 +1,262 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const reactResizeDetector = require("react-resize-detector");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const ToolbarTabs_styles = require("./ToolbarTabs.styles.cjs");
+const PanelTabs = require("../PanelTabs/PanelTabs.cjs");
+const PanelTab = require("../PanelTab/PanelTab.cjs");
+const DEFAULT_LABELS = {
+  create: "Create new",
+  undefined: "Undefined",
+  close: "Close",
+  dropdownMenu: "Dropdown menu"
+};
+const DROPDOWN_MENU_WIDTH = 64;
+const BORDER_WIDTH = 2;
+const HvCanvasToolbarTabs = react.forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    selectedTabId: selectedTabIdProp,
+    icon: iconProp,
+    tabs: tabsProp,
+    defaultTabs: defaultTabsProp = [],
+    labels: labelsProp,
+    classes: classesProp,
+    onTabChange: onTabChangeProp,
+    onChange: onChangeProp,
+    ...others
+  } = uikitReactCore.useDefaultProps("HvCanvasToolbarTabs", props);
+  const { classes, cx } = ToolbarTabs_styles.useClasses(classesProp);
+  const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProp);
+  const { width: tabWidth = 0, ref: tabRef } = reactResizeDetector.useResizeDetector({
+    handleHeight: false,
+    refreshMode: "debounce",
+    refreshOptions: {
+      leading: true
+    }
+  });
+  const { width: actionsWidth = 0, ref: actionsRef } = reactResizeDetector.useResizeDetector({
+    handleHeight: false
+  });
+  const { width: rootWidth = 0, ref: rootRef } = reactResizeDetector.useResizeDetector({
+    handleHeight: false
+  });
+  const [tabs, setTabs] = uikitReactCore.useControlled(tabsProp, defaultTabsProp);
+  const [selectedTab, setSelectedTab] = uikitReactCore.useControlled(
+    selectedTabIdProp,
+    tabs?.[0]?.id ?? "none"
+  );
+  const rootWidthLimitReached = react.useRef(false);
+  const groupTabs = react.useCallback(
+    (allTabs) => {
+      let fullTabWidth = ToolbarTabs_styles.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 } = react.useMemo(
+    () => groupTabs(tabs),
+    [groupTabs, tabs]
+  );
+  const rootForkedRef = uikitReactCore.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: uikitReactCore.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: rootForkedRef,
+      className: cx(classes.root, className),
+      ...others,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.tabsContainer, children: [
+          visibleTabs.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              PanelTabs.HvCanvasPanelTabs,
+              {
+                classes: { list: classes.tabsList },
+                value: selectedTab,
+                onChange: handleChangeSelectedTab,
+                children: visibleTabs.map((tab, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                  PanelTab.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__ */ jsxRuntime.jsxs("div", { className: classes.tabContent, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          className: cx({
+                            [classes.tabIcon]: !!tab.icon
+                          }),
+                          children: tab.icon
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { role: "none", children: tab.label }),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { role: "none", children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, {}) }),
+                      selectedTab !== tab.id && visibleTabs[index + 1]?.id !== selectedTab && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.tabDivider })
+                    ] })
+                  },
+                  tab.id
+                ))
+              }
+            ),
+            visibleTabs.map((tab, index) => {
+              const btnDisabled = selectedTab !== tab.id;
+              const num = index + 1;
+              return /* @__PURE__ */ jsxRuntime.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} * ${ToolbarTabs_styles.ICON_WIDTH}px - ${uikitReactCore.theme.space.xs})`
+                  },
+                  children: [
+                    btnDisabled ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        className: classes.tabLabel,
+                        onClick: (event) => handleChangeSelectedTab(event, tab.id),
+                        "aria-label": tab.label,
+                        tabIndex: -1,
+                        children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvOverflowTooltip, { data: tab.label })
+                      }
+                    ) : /* @__PURE__ */ jsxRuntime.jsx(
+                      uikitReactCore.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__ */ jsxRuntime.jsx(
+                      uikitReactCore.HvIconButton,
+                      {
+                        style: {
+                          // @ts-ignore
+                          "--close-color": btnDisabled ? uikitReactCore.theme.colors.secondary_60 : uikitReactCore.theme.colors.primary
+                        },
+                        className: classes.closeButton,
+                        title: labels.close,
+                        variant: "primaryGhost",
+                        onClick: (event) => handleClose(event, tab.id),
+                        children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CloseXS, {})
+                      },
+                      tab.id
+                    )
+                  ]
+                },
+                tab.id
+              );
+            })
+          ] }),
+          hiddenTabs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            uikitReactCore.HvDropDownMenu,
+            {
+              className: classes.dropdownMenu,
+              dataList: hiddenTabs,
+              icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.MoreOptionsHorizontal, {}),
+              labels: { dropdownMenu: labels.dropdownMenu },
+              onClick: (event, value) => handleChangeSelectedTab(event, value.id ?? "none")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: actionsRef, className: classes.actionsContainer, children: [
+          children,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            uikitReactCore.HvButton,
+            {
+              variant: "primaryGhost",
+              startIcon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.AddAlt, {}),
+              onClick: handleCreateNew,
+              children: labels.create
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+exports.canvasToolbarTabsClasses = ToolbarTabs_styles.staticClasses;
+exports.HvCanvasToolbarTabs = HvCanvasToolbarTabs;

package/dist/cjs/Canvas/ToolbarTabs/ToolbarTabs.styles.cjs

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Tab = require("@mui/base/Tab");
+const uikitReactCore = require("@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 } = uikitReactCore.createClasses(
+  "HvCanvasToolbarTabs",
+  {
+    root: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      width: "100%",
+      backgroundColor: uikitReactCore.theme.colors.atmo1,
+      boxShadow: uikitReactCore.theme.colors.shadow,
+      borderRadius: `0px 0px ${uikitReactCore.theme.radii.base} ${uikitReactCore.theme.radii.base}`,
+      gap: uikitReactCore.theme.space.sm,
+      transition: "width 0.3s ease"
+    },
+    tabsContainer: {
+      position: "relative",
+      display: "flex"
+    },
+    tabsList: {
+      height: TAB_HEIGHT,
+      background: uikitReactCore.theme.colors.atmo1
+    },
+    tab: {
+      width: `clamp(${MIN_TAB_WIDTH}px, 100%, ${MAX_TAB_WIDTH}px)`,
+      border: `1px solid ${uikitReactCore.theme.colors.atmo1}`,
+      borderBottom: "none",
+      borderRadius: "10px 10px 0 0",
+      boxShadow: "none",
+      backgroundColor: uikitReactCore.theme.colors.atmo1,
+      [`&.${Tab.tabClasses.selected}`]: {
+        color: uikitReactCore.theme.colors.primary,
+        backgroundColor: uikitReactCore.theme.colors.containerBackgroundHover,
+        borderColor: uikitReactCore.theme.colors.atmo4
+      }
+    },
+    tabContent: {
+      height: TAB_HEIGHT,
+      display: "flex",
+      justifyContent: "space-between",
+      position: "relative",
+      width: "100%",
+      padding: uikitReactCore.theme.space.xs,
+      "& > div:first-of-type:not($tabIcon)": {
+        visibility: "hidden"
+      },
+      "& > div:nth-of-type(2)": {
+        visibility: "hidden",
+        minWidth: `calc(${MIN_TAB_WIDTH}px - ${uikitReactCore.theme.space.xs} - 2 * ${ICON_WIDTH}px)`,
+        maxWidth: `calc(${MAX_TAB_WIDTH}px - ${uikitReactCore.theme.space.xs} - 2 * ${ICON_WIDTH}px)`
+      },
+      "& > div:nth-of-type(3)": {
+        visibility: "hidden",
+        marginRight: `calc(-1 * ${uikitReactCore.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)": {
+        ...uikitReactCore.theme.typography.body,
+        color: uikitReactCore.theme.colors.secondary_60,
+        background: "none",
+        cursor: "pointer"
+      }
+    },
+    activeTabLabel: {
+      "& button": {
+        height: TAB_LABEL_HEIGHT,
+        minHeight: TAB_LABEL_HEIGHT,
+        backgroundColor: "transparent",
+        "& p": { ...uikitReactCore.theme.typography.label, color: uikitReactCore.theme.colors.primary },
+        "& span": { display: "none" }
+      },
+      [`&& .${uikitReactCore.baseInputClasses.inputRoot}`]: {
+        height: TAB_LABEL_HEIGHT,
+        minHeight: TAB_LABEL_HEIGHT
+      }
+    },
+    tabDivider: {
+      position: "absolute",
+      height: 18,
+      width: 1,
+      backgroundColor: uikitReactCore.theme.colors.atmo3,
+      right: 0
+    },
+    actionsContainer: {
+      display: "flex",
+      justifyContent: "flex-end",
+      alignItems: "center",
+      gap: uikitReactCore.theme.space.sm
+    },
+    dropdownMenu: {
+      margin: uikitReactCore.theme.spacing(0, "sm")
+    }
+  }
+);
+exports.ICON_WIDTH = ICON_WIDTH;
+exports.MIN_TAB_WIDTH = MIN_TAB_WIDTH;
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;

package/dist/cjs/Card/Card.cjs

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const Card_styles = require("./Card.styles.cjs");
+const HvCard = uikitReactCore.fixedForwardRef(function HvCard2(props, ref) {
+  const {
+    classes: classesProp,
+    className,
+    component: Component = "div",
+    children,
+    ...others
+  } = uikitReactCore.useDefaultProps("HvCard", props);
+  const { classes, cx } = Card_styles.useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: cx(classes.root, className), ...others, children });
+});
+exports.cardClasses = Card_styles.staticClasses;
+exports.HvCard = HvCard;

package/dist/cjs/Card/Card.styles.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const { staticClasses, useClasses } = uikitReactCore.createClasses("HvCard", {
+  root: {
+    position: "relative",
+    display: "block",
+    overflow: "hidden",
+    backgroundColor: uikitReactCore.theme.colors.atmo1,
+    borderRadius: uikitReactCore.theme.space.sm,
+    border: `1px solid ${uikitReactCore.theme.colors.atmo3}`,
+    boxShadow: "0 4px 6px 0 rgba(65,65,65,0.06)"
+  }
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;