@hitachivantara/uikit-react-pentaho 0.1.4 → 0.3.0

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

@@ -5,8 +5,8 @@ const react = require("react");
 const reactResizeDetector = require("react-resize-detector");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const BottomPanel_styles = require("./BottomPanel.styles.cjs");
-const Tabs = require("../Tabs/Tabs.cjs");
-const Tab = require("../Tab/Tab.cjs");
+const PanelTabs = require("../PanelTabs/PanelTabs.cjs");
+const PanelTab = require("../PanelTab/PanelTab.cjs");
 const HvCanvasBottomPanel = react.forwardRef((props, ref) => {
   const {
     id: idProp,
@@ -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) => {
@@ -78,29 +79,30 @@ const HvCanvasBottomPanel = react.forwardRef((props, ref) => {
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.tabsRoot, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            Tabs.HvCanvasTabs,
+            PanelTabs.HvCanvasPanelTabs,
             {
               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,
               children: tabs.map((tab, index) => /* @__PURE__ */ jsxRuntime.jsx(
-                Tab.HvCanvasTab,
+                PanelTab.HvCanvasPanelTab,
                 {
                   ref: index === 0 ? tabRef : void 0,
                   id: `${id}-${tab.id}`,
                   value: tab.id,
                   className: classes.tab,
-                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.tabTitle, children: 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/PanelTab/PanelTab.cjs

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

package/dist/cjs/Canvas/{Tab/Tab.styles.cjs → PanelTab/PanelTab.styles.cjs}

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const Tab = require("@mui/base/Tab");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const { staticClasses, useClasses } = uikitReactCore.createClasses("HvCanvasTab", {
+const { staticClasses, useClasses } = uikitReactCore.createClasses("HvCanvasPanelTab", {
   root: {
     height: "100%",
     display: "flex",

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

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

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

@@ -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(
+  "HvCanvasPanelTabs",
+  {
+    root: {},
+    list: {
+      display: "flex",
+      width: "100%",
+      height: 48
+    }
+  }
+);
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;

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

@@ -5,8 +5,8 @@ const react = require("react");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const SidePanel_styles = require("./SidePanel.styles.cjs");
-const Tabs = require("../Tabs/Tabs.cjs");
-const Tab = require("../Tab/Tab.cjs");
+const PanelTabs = require("../PanelTabs/PanelTabs.cjs");
+const PanelTab = require("../PanelTab/PanelTab.cjs");
 const DEFAULT_LABELS = {
   open: "Open",
   close: "Close"
@@ -55,13 +55,13 @@ const HvCanvasSidePanel = react.forwardRef((props, ref) => {
         ...others,
         children: [
           tabs && /* @__PURE__ */ jsxRuntime.jsx(
-            Tabs.HvCanvasTabs,
+            PanelTabs.HvCanvasPanelTabs,
             {
               className: classes.tabs,
               value: selectedTab,
               onChange: handleTabChange,
               children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
-                Tab.HvCanvasTab,
+                PanelTab.HvCanvasPanelTab,
                 {
                   id: `${id}-${tab.id}`,
                   value: tab.id,
@@ -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/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;

package/dist/cjs/Card/CardMedia/CardMedia.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const CardMedia_styles = require("./CardMedia.styles.cjs");
+const HvCardMedia = react.forwardRef(
+  (props, ref) => {
+    const {
+      src,
+      alt = "",
+      height = 160,
+      className,
+      classes: classesProp,
+      children,
+      ...others
+    } = uikitReactCore.useDefaultProps("HvCardMedia", props);
+    const { classes, cx } = CardMedia_styles.useClasses(classesProp);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.root, className), children: /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        ref,
+        height,
+        className: classes.image,
+        src,
+        alt,
+        ...others
+      }
+    ) });
+  }
+);
+exports.cardMediaClasses = CardMedia_styles.staticClasses;
+exports.HvCardMedia = HvCardMedia;

package/dist/cjs/{Canvas/Tabs/Tabs.styles.cjs → Card/CardMedia/CardMedia.styles.cjs}

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

package/dist/cjs/Card/CardSection/CardSection.cjs

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const CardSection_styles = require("./CardSection.styles.cjs");
+const HvCardSection = react.forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      classes: classesProp,
+      children
+    } = uikitReactCore.useDefaultProps("HvCardSection", props);
+    const { classes, cx } = CardSection_styles.useClasses(classesProp);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cx(classes.root, className), children });
+  }
+);
+exports.cardSectionClasses = CardSection_styles.staticClasses;
+exports.HvCardSection = HvCardSection;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const { staticClasses, useClasses } = uikitReactCore.createClasses("HvCardSection", {
+  root: {
+    padding: uikitReactCore.theme.space.sm
+  }
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;

package/dist/cjs/index.cjs

@@ -1,22 +1,34 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const Toolbar_styles = require("./Canvas/Toolbar/Toolbar.styles.cjs");
-const Toolbar = require("./Canvas/Toolbar/Toolbar.cjs");
-const SidePanel_styles = require("./Canvas/SidePanel/SidePanel.styles.cjs");
-const SidePanel = require("./Canvas/SidePanel/SidePanel.cjs");
-const Tabs_styles = require("./Canvas/Tabs/Tabs.styles.cjs");
-const Tabs = require("./Canvas/Tabs/Tabs.cjs");
 const BottomPanel_styles = require("./Canvas/BottomPanel/BottomPanel.styles.cjs");
 const BottomPanel = require("./Canvas/BottomPanel/BottomPanel.cjs");
-const Tab_styles = require("./Canvas/Tab/Tab.styles.cjs");
-const Tab = require("./Canvas/Tab/Tab.cjs");
-exports.canvasToolbarClasses = Toolbar_styles.staticClasses;
-exports.HvCanvasToolbar = Toolbar.HvCanvasToolbar;
-exports.canvasSidePanelClasses = SidePanel_styles.staticClasses;
-exports.HvCanvasSidePanel = SidePanel.HvCanvasSidePanel;
-exports.canvasTabsClasses = Tabs_styles.staticClasses;
-exports.HvCanvasTabs = Tabs.HvCanvasTabs;
+const PanelTab_styles = require("./Canvas/PanelTab/PanelTab.styles.cjs");
+const PanelTab = require("./Canvas/PanelTab/PanelTab.cjs");
+const PanelTabs_styles = require("./Canvas/PanelTabs/PanelTabs.styles.cjs");
+const PanelTabs = require("./Canvas/PanelTabs/PanelTabs.cjs");
+const SidePanel_styles = require("./Canvas/SidePanel/SidePanel.styles.cjs");
+const SidePanel = require("./Canvas/SidePanel/SidePanel.cjs");
+const Toolbar_styles = require("./Canvas/Toolbar/Toolbar.styles.cjs");
+const Toolbar = require("./Canvas/Toolbar/Toolbar.cjs");
+const Card_styles = require("./Card/Card.styles.cjs");
+const Card = require("./Card/Card.cjs");
+const CardMedia_styles = require("./Card/CardMedia/CardMedia.styles.cjs");
+const CardMedia = require("./Card/CardMedia/CardMedia.cjs");
+const CardSection_styles = require("./Card/CardSection/CardSection.styles.cjs");
+const CardSection = require("./Card/CardSection/CardSection.cjs");
 exports.canvasBottomPanelClasses = BottomPanel_styles.staticClasses;
 exports.HvCanvasBottomPanel = BottomPanel.HvCanvasBottomPanel;
-exports.canvasTabClasses = Tab_styles.staticClasses;
-exports.HvCanvasTab = Tab.HvCanvasTab;
+exports.canvasPanelTabClasses = PanelTab_styles.staticClasses;
+exports.HvCanvasPanelTab = PanelTab.HvCanvasPanelTab;
+exports.canvasPanelTabsClasses = PanelTabs_styles.staticClasses;
+exports.HvCanvasPanelTabs = PanelTabs.HvCanvasPanelTabs;
+exports.canvasSidePanelClasses = SidePanel_styles.staticClasses;
+exports.HvCanvasSidePanel = SidePanel.HvCanvasSidePanel;
+exports.canvasToolbarClasses = Toolbar_styles.staticClasses;
+exports.HvCanvasToolbar = Toolbar.HvCanvasToolbar;
+exports.cardClasses = Card_styles.staticClasses;
+exports.HvCard = Card.HvCard;
+exports.cardMediaClasses = CardMedia_styles.staticClasses;
+exports.HvCardMedia = CardMedia.HvCardMedia;
+exports.cardSectionClasses = CardSection_styles.staticClasses;
+exports.HvCardSection = CardSection.HvCardSection;