@hitachivantara/uikit-react-core 5.39.3 → 5.39.4

package/dist/esm/GlobalActions/GlobalActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalActions.js","sources":["../../../src/GlobalActions/GlobalActions.tsx"],"sourcesContent":["import { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\nimport isString from \"lodash/isString\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./GlobalActions.styles\";\n\nexport { staticClasses as globalActionsClasses };\nexport type HvGlobalActionsClasses = ExtractNames<typeof useClasses>;\n\nexport type HvGlobalActionsVariant = \"global\" | \"section\";\nexport type HvGlobalActionsPosition = \"sticky\" | \"fixed\" | \"relative\";\nexport type HvGlobalActionsHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\nexport interface HvGlobalActionsProps\n  extends HvBaseProps<HTMLDivElement, \"title\"> {\n  /** Text to display in the component. */\n  title?: React.ReactNode;\n  /** Denotes if this is a global or section component. */\n  variant?: HvGlobalActionsVariant;\n  /** User can pass in a fully customized button or false for when the back button should not be rendered. */\n  backButton?: React.ReactNode;\n  /** Heading Level to apply to Title Area. */\n  headingLevel?: HvGlobalActionsHeadingLevel;\n  /**\n   * Position of the Global Actions.\n   * Defaults to `sticky` when it is a global title and `relative` when it's a section title.\n   */\n  position?: HvGlobalActionsPosition;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvGlobalActionsClasses;\n}\n\nconst getBreakpointStyles = (isUpMd: boolean, isSmDown: boolean) =>\n  isUpMd\n    ? {\n        width: `calc(100% - 2 * ${theme.spacing(4)})`,\n        marginLeft: `${theme.spacing(4)}`,\n        marginRight: `${theme.spacing(4)}`,\n      }\n    : isSmDown\n    ? {\n        width: `calc(100% - 2 * ${theme.spacing(2)})`,\n        marginLeft: `${theme.spacing(2)}`,\n        marginRight: `${theme.spacing(2)}`,\n      }\n    : {};\n\n/**\n * Global Actions are actions that affect the entire page they live in.\n * They should persist while scrolling down the screen.\n */\nexport const HvGlobalActions = (props: HvGlobalActionsProps) => {\n  const {\n    children,\n    classes: classesProp,\n    className,\n    title,\n    variant = \"global\",\n    backButton,\n    headingLevel,\n    position: positionProp,\n    ...others\n  } = useDefaultProps(\"HvGlobalActions\", props);\n  const muiTheme = useMuiTheme();\n  const { classes, cx, css } = useClasses(classesProp);\n  const isSmDown = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n  const isUpMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n  const fixedPositionCss =\n    positionProp === \"fixed\" && getBreakpointStyles(isUpMd, isSmDown);\n\n  const headingLevelToApply = headingLevel || (variant === \"global\" ? 1 : 2);\n\n  const position =\n    positionProp || (variant === \"global\" ? \"sticky\" : \"relative\");\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.positionSticky]: position === \"sticky\",\n          [classes.positionFixed]: position === \"fixed\",\n          [classes.global]: variant === \"global\",\n        },\n        css(fixedPositionCss),\n        className\n      )}\n      {...others}\n    >\n      <div\n        className={cx(classes.wrapper, {\n          [classes.globalWrapperComplement]: variant === \"global\",\n          [classes.globalSectionArea]: variant === \"section\",\n        })}\n      >\n        {variant === \"global\" && backButton && (\n          <div className={classes.backButton}>{backButton}</div>\n        )}\n        {!isString(title) ? (\n          title\n        ) : (\n          <HvTypography\n            variant=\"title3\"\n            component={`h${headingLevelToApply}`}\n            className={cx(classes.name, {\n              [classes.sectionName]: variant !== \"global\",\n            })}\n          >\n            {title}\n          </HvTypography>\n        )}\n        {children && <div className={classes.actions}>{children}</div>}\n      </div>\n    </div>\n  );\n};\n"],"names":["useMuiTheme"],"mappings":";;;;;;;;;AAsCA,MAAM,sBAAsB,CAAC,QAAiB,aAC5C,SACI;AAAA,EACE,OAAO,mBAAmB,MAAM,QAAQ,CAAC,CAAC;AAAA,EAC1C,YAAY,GAAG,MAAM,QAAQ,CAAC,CAAC;AAAA,EAC/B,aAAa,GAAG,MAAM,QAAQ,CAAC,CAAC;AAClC,IACA,WACA;AAAA,EACE,OAAO,mBAAmB,MAAM,QAAQ,CAAC,CAAC;AAAA,EAC1C,YAAY,GAAG,MAAM,QAAQ,CAAC,CAAC;AAAA,EAC/B,aAAa,GAAG,MAAM,QAAQ,CAAC,CAAC;AAClC,IACA;AAMO,MAAA,kBAAkB,CAAC,UAAgC;AACxD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAC5C,QAAM,WAAWA;AACjB,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AACnD,QAAM,WAAW,cAAc,SAAS,YAAY,KAAK,IAAI,CAAC;AAC9D,QAAM,SAAS,cAAc,SAAS,YAAY,GAAG,IAAI,CAAC;AAE1D,QAAM,mBACJ,iBAAiB,WAAW,oBAAoB,QAAQ,QAAQ;AAElE,QAAM,sBAAsB,iBAAiB,YAAY,WAAW,IAAI;AAExE,QAAM,WACJ,iBAAiB,YAAY,WAAW,WAAW;AAGnD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,cAAc,GAAG,aAAa;AAAA,UACvC,CAAC,QAAQ,aAAa,GAAG,aAAa;AAAA,UACtC,CAAC,QAAQ,MAAM,GAAG,YAAY;AAAA,QAChC;AAAA,QACA,IAAI,gBAAgB;AAAA,QACpB;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,GAAG,QAAQ,SAAS;AAAA,YAC7B,CAAC,QAAQ,uBAAuB,GAAG,YAAY;AAAA,YAC/C,CAAC,QAAQ,iBAAiB,GAAG,YAAY;AAAA,UAAA,CAC1C;AAAA,UAEA,UAAA;AAAA,YAAA,YAAY,YAAY,cACvB,oBAAC,SAAI,WAAW,QAAQ,YAAa,UAAW,WAAA,CAAA;AAAA,YAEjD,CAAC,SAAS,KAAK,IACd,QAEA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,WAAW,IAAI,mBAAmB;AAAA,gBAClC,WAAW,GAAG,QAAQ,MAAM;AAAA,kBAC1B,CAAC,QAAQ,WAAW,GAAG,YAAY;AAAA,gBAAA,CACpC;AAAA,gBAEA,UAAA;AAAA,cAAA;AAAA,YACH;AAAA,YAED,YAAa,oBAAA,OAAA,EAAI,WAAW,QAAQ,SAAU,UAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MAC1D;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/GlobalActions/GlobalActions.styles.js

@@ -0,0 +1,70 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvGlobalActions", {
+  root: {
+    position: "relative"
+  },
+  positionSticky: {
+    width: "100%",
+    position: "sticky"
+  },
+  positionFixed: {
+    width: "100%",
+    position: "fixed"
+  },
+  global: {
+    zIndex: `calc(${theme.zIndices.banner} - 2)`,
+    top: 0,
+    left: 0,
+    padding: theme.spacing(1, 0),
+    backdropFilter: "blur(1px)",
+    "&:before": {
+      content: "''",
+      display: "flex",
+      position: "absolute",
+      inset: 0,
+      background: theme.colors.atmo2,
+      opacity: "75%"
+    }
+  },
+  wrapper: {
+    padding: theme.space.sm,
+    display: "flex",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    border: `1px solid ${theme.colors.atmo4}`,
+    borderRadius: theme.radii.round
+  },
+  globalWrapperComplement: {
+    position: "relative",
+    top: 0,
+    left: 0,
+    background: theme.colors.atmo1,
+    width: "100%"
+  },
+  globalSectionArea: {
+    backgroundColor: theme.colors.atmo1,
+    borderTop: `1px solid ${theme.colors.atmo4}`,
+    paddingLeft: theme.space.sm
+  },
+  backButton: {
+    marginRight: theme.space.xs
+  },
+  name: {
+    flexGrow: 1
+  },
+  sectionName: {
+    ...theme.typography.title4
+  },
+  actions: {
+    display: "flex",
+    alignItems: "center",
+    marginLeft: "auto",
+    gap: theme.space.xs
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=GlobalActions.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalActions.styles.js","sources":["../../../src/GlobalActions/GlobalActions.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvGlobalActions\", {\n  root: {\n    position: \"relative\",\n  },\n  positionSticky: {\n    width: \"100%\",\n    position: \"sticky\",\n  },\n  positionFixed: {\n    width: \"100%\",\n    position: \"fixed\",\n  },\n  global: {\n    zIndex: `calc(${theme.zIndices.banner} - 2)`,\n    top: 0,\n    left: 0,\n    padding: theme.spacing(1, 0),\n    backdropFilter: \"blur(1px)\",\n\n    \"&:before\": {\n      content: \"''\",\n      display: \"flex\",\n      position: \"absolute\",\n      inset: 0,\n      background: theme.colors.atmo2,\n      opacity: \"75%\",\n    },\n  },\n  wrapper: {\n    padding: theme.space.sm,\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n    border: `1px solid ${theme.colors.atmo4}`,\n    borderRadius: theme.radii.round,\n  },\n  globalWrapperComplement: {\n    position: \"relative\",\n    top: 0,\n    left: 0,\n    background: theme.colors.atmo1,\n    width: \"100%\",\n  },\n  globalSectionArea: {\n    backgroundColor: theme.colors.atmo1,\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    paddingLeft: theme.space.sm,\n  },\n  backButton: {\n    marginRight: theme.space.xs,\n  },\n  name: {\n    flexGrow: 1,\n  },\n  sectionName: {\n    ...theme.typography.title4,\n  },\n  actions: {\n    display: \"flex\",\n    alignItems: \"center\",\n    marginLeft: \"auto\",\n    gap: theme.space.xs,\n  },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,UAAU;AAAA,EACZ;AAAA,EACA,gBAAgB;AAAA,IACd,OAAO;AAAA,IACP,UAAU;AAAA,EACZ;AAAA,EACA,eAAe;AAAA,IACb,OAAO;AAAA,IACP,UAAU;AAAA,EACZ;AAAA,EACA,QAAQ;AAAA,IACN,QAAQ,QAAQ,MAAM,SAAS,MAAM;AAAA,IACrC,KAAK;AAAA,IACL,MAAM;AAAA,IACN,SAAS,MAAM,QAAQ,GAAG,CAAC;AAAA,IAC3B,gBAAgB;AAAA,IAEhB,YAAY;AAAA,MACV,SAAS;AAAA,MACT,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,MACP,YAAY,MAAM,OAAO;AAAA,MACzB,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,SAAS,MAAM,MAAM;AAAA,IACrB,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ,aAAa,MAAM,OAAO,KAAK;AAAA,IACvC,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,yBAAyB;AAAA,IACvB,UAAU;AAAA,IACV,KAAK;AAAA,IACL,MAAM;AAAA,IACN,YAAY,MAAM,OAAO;AAAA,IACzB,OAAO;AAAA,EACT;AAAA,EACA,mBAAmB;AAAA,IACjB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,IAC1C,aAAa,MAAM,MAAM;AAAA,EAC3B;AAAA,EACA,YAAY;AAAA,IACV,aAAa,MAAM,MAAM;AAAA,EAC3B;AAAA,EACA,MAAM;AAAA,IACJ,UAAU;AAAA,EACZ;AAAA,EACA,aAAa;AAAA,IACX,GAAG,MAAM,WAAW;AAAA,EACtB;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,KAAK,MAAM,MAAM;AAAA,EACnB;AACF,CAAC;"}

package/dist/esm/Grid/Grid.js

@@ -0,0 +1,126 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from "react";
+import MuiGrid from "@mui/material/Grid";
+import isString from "lodash/isString";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { useWidth } from "../hooks/useWidth.js";
+import { useClasses } from "./Grid.styles.js";
+import { staticClasses } from "./Grid.styles.js";
+const BREAKPOINT_GUTTERS = {
+  xs: 2,
+  sm: 2,
+  md: 4,
+  lg: 4,
+  xl: 4
+};
+const BREAKPOINT_COLUMNS = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 12,
+  xl: 12
+};
+function getGridSpacing(spacing) {
+  let gridSpacing;
+  if (isString(spacing)) {
+    if (spacing === "auto") {
+      gridSpacing = BREAKPOINT_GUTTERS;
+    } else {
+      gridSpacing = BREAKPOINT_GUTTERS[spacing];
+    }
+  } else if (typeof spacing === "object") {
+    gridSpacing = Object.keys(spacing).reduce(
+      (acc, breakpoint) => ({
+        ...acc,
+        [breakpoint]: BREAKPOINT_GUTTERS[spacing[breakpoint]] ?? spacing[breakpoint]
+      }),
+      {}
+    );
+  } else if (spacing === 0) {
+    gridSpacing = { xs: 0 };
+  } else {
+    gridSpacing = spacing;
+  }
+  return gridSpacing;
+}
+function getNumberOfColumns(columns) {
+  let numberOfColumns;
+  if (columns === "auto") {
+    numberOfColumns = BREAKPOINT_COLUMNS;
+  } else {
+    numberOfColumns = columns;
+  }
+  return numberOfColumns;
+}
+function getContainerProps(spacing, rowSpacing, columnSpacing, columns) {
+  const containerProps = { container: true };
+  if (spacing != null) {
+    containerProps.spacing = getGridSpacing(spacing);
+  }
+  if (rowSpacing != null) {
+    containerProps.rowSpacing = getGridSpacing(rowSpacing);
+  }
+  if (columnSpacing != null) {
+    containerProps.columnSpacing = getGridSpacing(columnSpacing);
+  }
+  if (columns != null) {
+    containerProps.columns = getNumberOfColumns(columns);
+  }
+  return containerProps;
+}
+const WidthGrid = forwardRef((props, ref) => {
+  const { container, spacing, rowSpacing, columnSpacing, columns, ...others } = props;
+  const width = useWidth();
+  const containerProps = container ? getContainerProps(
+    spacing === "auto" ? width : spacing,
+    rowSpacing === "auto" ? width : rowSpacing,
+    columnSpacing === "auto" ? width : columnSpacing,
+    columns
+  ) : {};
+  return /* @__PURE__ */ jsx(MuiGrid, { ref, ...containerProps, ...others });
+});
+const HvGrid = forwardRef((props, ref) => {
+  const {
+    item,
+    container,
+    spacing = "auto",
+    rowSpacing,
+    columnSpacing,
+    columns,
+    classes: classesProp,
+    ...others
+  } = useDefaultProps("HvGrid", props);
+  const { classes } = useClasses(classesProp);
+  if (container && item && (spacing === "auto" || rowSpacing === "auto" || columnSpacing === "auto")) {
+    return /* @__PURE__ */ jsx(
+      WidthGrid,
+      {
+        ref,
+        classes,
+        item,
+        container,
+        spacing,
+        rowSpacing,
+        columnSpacing,
+        columns,
+        ...others
+      }
+    );
+  }
+  const containerProps = container ? getContainerProps(spacing, rowSpacing, columnSpacing, columns) : {};
+  return /* @__PURE__ */ jsx(
+    MuiGrid,
+    {
+      ref,
+      classes,
+      item,
+      ...containerProps,
+      ...others
+    }
+  );
+});
+export {
+  HvGrid,
+  staticClasses as gridClasses
+};
+//# sourceMappingURL=Grid.js.map

package/dist/esm/Grid/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","sources":["../../../src/Grid/Grid.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport MuiGrid, { GridProps as MuiGridProps } from \"@mui/material/Grid\";\n\nimport isString from \"lodash/isString\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useWidth } from \"../hooks/useWidth\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Grid.styles\";\n\nexport { staticClasses as gridClasses };\n\nexport type HvGridClasses = ExtractNames<typeof useClasses>;\n\nconst BREAKPOINT_GUTTERS = {\n  xs: 2,\n  sm: 2,\n  md: 4,\n  lg: 4,\n  xl: 4,\n};\n\nconst BREAKPOINT_COLUMNS = {\n  xs: 4,\n  sm: 8,\n  md: 12,\n  lg: 12,\n  xl: 12,\n};\n\nexport type HvGridDirection =\n  | \"row\"\n  | \"row-reverse\"\n  | \"column\"\n  | \"column-reverse\";\n\nexport type HvGridSpacing =\n  | \"xs\"\n  | \"sm\"\n  | \"md\"\n  | \"lg\"\n  | \"xl\"\n  | \"auto\"\n  | 1\n  | 2\n  | 3\n  | 4\n  | 5\n  | 6\n  | 7\n  | 8\n  | 9\n  | 10;\n\nexport interface HvGridProps extends Omit<MuiGridProps, \"classes\" | \"columns\"> {\n  /**\n   * If `true`, the component will have the flex *container* behavior.\n   * You should be wrapping *items* with a *container*.\n   */\n  container?: boolean;\n  /**\n   * If `true`, the component will have the flex *item* behavior.\n   * You should be wrapping *items* with a *container*.\n   */\n  item?: boolean;\n  /**\n   * Defines the space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   */\n  spacing?: HvGridSpacing | number;\n  /**\n   * Defines the vertical space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   * It overrides the value of the spacing prop.\n   */\n  rowSpacing?: HvGridSpacing | number;\n  /**\n   * Defines the horizontal space between the type item component. It can only be used on a type container component.\n   * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor\n   * (number between 0 and 10), breakpoint or auto.\n   * It overrides the value of the spacing prop.\n   */\n  columnSpacing?: HvGridSpacing | number;\n  /**\n   * The number of columns.\n   * Defaults to a 12-column grid.\n   * The value \"auto\" implements the Design System directives in terms of variable number of columns.\n   * @default 12\n   */\n  columns?: \"auto\" | MuiGridProps[\"columns\"];\n  /**\n   * Defines the `flex-direction` style property.\n   * It is applied for all screen sizes.\n   */\n  direction?: HvGridDirection;\n  /**\n   * Defines the `justify-content` style property.\n   * It is applied for all screen sizes.\n   */\n  justify?:\n    | \"flex-start\"\n    | \"center\"\n    | \"flex-end\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\";\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for all the screen sizes with the lowest priority.\n   */\n  xs?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `sm` breakpoint and wider screens if not overridden.\n   */\n  sm?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `md` breakpoint and wider screens if not overridden.\n   */\n  md?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `lg` breakpoint and wider screens if not overridden.\n   */\n  lg?: number | boolean;\n  /**\n   * Defines the number of grids the component is going to use.\n   * It's applied for the `xl` breakpoint and wider screens.\n   */\n  xl?: number | boolean;\n  /**\n   * Defines the `flex-wrap` style property.\n   * It's applied for all screen sizes.\n   */\n  wrap?: \"nowrap\" | \"wrap\" | \"wrap-reverse\";\n  /**\n   * If `true`, it sets `min-width: 0` on the item.\n   * Refer to the limitations section of the documentation to better understand the use case.\n   */\n  zeroMinWidth?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvGridClasses;\n}\n\nfunction getGridSpacing(spacing: HvGridProps[\"spacing\"]) {\n  let gridSpacing: MuiGridProps[\"spacing\"];\n\n  if (isString(spacing)) {\n    if (spacing === \"auto\") {\n      gridSpacing = BREAKPOINT_GUTTERS;\n    } else {\n      gridSpacing = BREAKPOINT_GUTTERS[spacing];\n    }\n  } else if (typeof spacing === \"object\") {\n    gridSpacing = Object.keys(spacing).reduce(\n      (acc, breakpoint) => ({\n        ...acc,\n        [breakpoint]:\n          BREAKPOINT_GUTTERS[spacing[breakpoint]] ?? spacing[breakpoint],\n      }),\n      {}\n    );\n  } else if (spacing === 0) {\n    gridSpacing = { xs: 0 };\n  } else {\n    gridSpacing = spacing;\n  }\n\n  return gridSpacing;\n}\n\nfunction getNumberOfColumns(columns: HvGridProps[\"columns\"]) {\n  let numberOfColumns: MuiGridProps[\"columns\"];\n\n  if (columns === \"auto\") {\n    numberOfColumns = BREAKPOINT_COLUMNS;\n  } else {\n    numberOfColumns = columns;\n  }\n\n  return numberOfColumns;\n}\n\nfunction getContainerProps(\n  spacing: HvGridProps[\"spacing\"],\n  rowSpacing: HvGridProps[\"rowSpacing\"],\n  columnSpacing: HvGridProps[\"columnSpacing\"],\n  columns: HvGridProps[\"columns\"]\n) {\n  const containerProps: Pick<\n    MuiGridProps,\n    \"container\" | \"spacing\" | \"rowSpacing\" | \"columnSpacing\" | \"columns\"\n  > = { container: true };\n\n  if (spacing != null) {\n    containerProps.spacing = getGridSpacing(spacing);\n  }\n  if (rowSpacing != null) {\n    containerProps.rowSpacing = getGridSpacing(rowSpacing);\n  }\n  if (columnSpacing != null) {\n    containerProps.columnSpacing = getGridSpacing(columnSpacing);\n  }\n  if (columns != null) {\n    containerProps.columns = getNumberOfColumns(columns);\n  }\n\n  return containerProps;\n}\n\nconst WidthGrid = forwardRef<HTMLDivElement, HvGridProps>((props, ref) => {\n  const { container, spacing, rowSpacing, columnSpacing, columns, ...others } =\n    props;\n\n  const width = useWidth();\n\n  const containerProps = container\n    ? getContainerProps(\n        spacing === \"auto\" ? width : spacing,\n        rowSpacing === \"auto\" ? width : rowSpacing,\n        columnSpacing === \"auto\" ? width : columnSpacing,\n        columns\n      )\n    : {};\n\n  return <MuiGrid ref={ref} {...containerProps} {...others} />;\n});\n\n/**\n * The grid creates visual consistency between layouts while allowing flexibility\n * across a wide variety of designs. This component is based on a 12-column grid layout.\n *\n * It's based on the [Material UI Grid](https://mui.com/material-ui/react-grid/).\n *\n * The definitions were set following the Design System directives:\n *\n * | Breakpoint | Width (in px) | Gutters (in px) | Number of columns |\n * | ---------- | ------------- | --------------- | ----------------- |\n * | xs         | [0-600[       | 16              | 4                 |\n * | sm         | [600-960[     | 16              | 8                 |\n * | md         | [960-1270[     | 32              | 12                |\n * | lg         | [1270-1920[    | 32              | 12                |\n * | xl         | [1920-...[    | 32              | 12                |\n *\n * However, the number of columns is set to 12 for all breakpoints, as it serves most\n * of the use cases and simplifies the implementation.\n * To opt-in to the Design System directives, you can set the `columns` prop to `auto`.\n *\n * Also, the Design System specifications are omissive about the horizontal gutters.\n * The HvGrid sets them to the same value as the vertical gutters, depending on the breakpoint.\n * It can be overridden by setting the `rowSpacing` prop.\n */\nexport const HvGrid = forwardRef<HTMLDivElement, HvGridProps>((props, ref) => {\n  const {\n    item,\n    container,\n    spacing = \"auto\",\n    rowSpacing,\n    columnSpacing,\n    columns,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvGrid\", props);\n\n  const { classes } = useClasses(classesProp);\n\n  // Fixes MUI error when using spacings as objects and the grid is an item and container\n  // When set to \"auto\", the spacing changes depending on the screen's breakpoint\n  // The condition avoids using useWidth and re-rendering the component unnecessarily\n  if (\n    container &&\n    item &&\n    (spacing === \"auto\" || rowSpacing === \"auto\" || columnSpacing === \"auto\")\n  ) {\n    return (\n      <WidthGrid\n        ref={ref}\n        classes={classes}\n        item={item}\n        container={container}\n        spacing={spacing}\n        rowSpacing={rowSpacing}\n        columnSpacing={columnSpacing}\n        columns={columns}\n        {...others}\n      />\n    );\n  }\n\n  const containerProps = container\n    ? getContainerProps(spacing, rowSpacing, columnSpacing, columns)\n    : {};\n\n  return (\n    <MuiGrid\n      ref={ref}\n      classes={classes}\n      item={item}\n      {...containerProps}\n      {...others}\n    />\n  );\n});\n"],"names":[],"mappings":";;;;;;;;AAeA,MAAM,qBAAqB;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,qBAAqB;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAuHA,SAAS,eAAe,SAAiC;AACnD,MAAA;AAEA,MAAA,SAAS,OAAO,GAAG;AACrB,QAAI,YAAY,QAAQ;AACR,oBAAA;AAAA,IAAA,OACT;AACL,oBAAc,mBAAmB,OAAO;AAAA,IAC1C;AAAA,EAAA,WACS,OAAO,YAAY,UAAU;AACxB,kBAAA,OAAO,KAAK,OAAO,EAAE;AAAA,MACjC,CAAC,KAAK,gBAAgB;AAAA,QACpB,GAAG;AAAA,QACH,CAAC,UAAU,GACT,mBAAmB,QAAQ,UAAU,CAAC,KAAK,QAAQ,UAAU;AAAA,MAAA;AAAA,MAEjE,CAAC;AAAA,IAAA;AAAA,EACH,WACS,YAAY,GAAG;AACV,kBAAA,EAAE,IAAI;EAAE,OACjB;AACS,kBAAA;AAAA,EAChB;AAEO,SAAA;AACT;AAEA,SAAS,mBAAmB,SAAiC;AACvD,MAAA;AAEJ,MAAI,YAAY,QAAQ;AACJ,sBAAA;AAAA,EAAA,OACb;AACa,sBAAA;AAAA,EACpB;AAEO,SAAA;AACT;AAEA,SAAS,kBACP,SACA,YACA,eACA,SACA;AACM,QAAA,iBAGF,EAAE,WAAW;AAEjB,MAAI,WAAW,MAAM;AACJ,mBAAA,UAAU,eAAe,OAAO;AAAA,EACjD;AACA,MAAI,cAAc,MAAM;AACP,mBAAA,aAAa,eAAe,UAAU;AAAA,EACvD;AACA,MAAI,iBAAiB,MAAM;AACV,mBAAA,gBAAgB,eAAe,aAAa;AAAA,EAC7D;AACA,MAAI,WAAW,MAAM;AACJ,mBAAA,UAAU,mBAAmB,OAAO;AAAA,EACrD;AAEO,SAAA;AACT;AAEA,MAAM,YAAY,WAAwC,CAAC,OAAO,QAAQ;AAClE,QAAA,EAAE,WAAW,SAAS,YAAY,eAAe,SAAS,GAAG,OACjE,IAAA;AAEF,QAAM,QAAQ;AAEd,QAAM,iBAAiB,YACnB;AAAA,IACE,YAAY,SAAS,QAAQ;AAAA,IAC7B,eAAe,SAAS,QAAQ;AAAA,IAChC,kBAAkB,SAAS,QAAQ;AAAA,IACnC;AAAA,MAEF;AAEJ,6BAAQ,SAAQ,EAAA,KAAW,GAAG,gBAAiB,GAAG,OAAQ,CAAA;AAC5D,CAAC;AA0BM,MAAM,SAAS,WAAwC,CAAC,OAAO,QAAQ;AACtE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,UAAU,KAAK;AAEnC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAK1C,MACE,aACA,SACC,YAAY,UAAU,eAAe,UAAU,kBAAkB,SAClE;AAEE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AAEM,QAAA,iBAAiB,YACnB,kBAAkB,SAAS,YAAY,eAAe,OAAO,IAC7D;AAGF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

package/dist/esm/Grid/Grid.styles.js

@@ -0,0 +1,41 @@
+import { createClasses } from "../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvGrid", {
+  root: {},
+  container: {},
+  item: {},
+  zeroMinWidth: {},
+  "direction-xs-column": {},
+  "direction-xs-reverse": {},
+  "direction-xs-row-reverse": {},
+  "wrap-xs-nowrap": {},
+  "wrap-xs-wrap-reverse": {},
+  "spacing-xs-1": {},
+  "spacing-xs-2": {},
+  "spacing-xs-3": {},
+  "spacing-xs-4": {},
+  "spacing-xs-5": {},
+  "spacing-xs-6": {},
+  "spacing-xs-7": {},
+  "spacing-xs-8": {},
+  "spacing-xs-9": {},
+  "spacing-xs-10": {},
+  "grid-xs-auto": {},
+  "grid-xs-true": {},
+  "grid-xs-1": {},
+  "grid-xs-2": {},
+  "grid-xs-3": {},
+  "grid-xs-4": {},
+  "grid-xs-5": {},
+  "grid-xs-6": {},
+  "grid-xs-7": {},
+  "grid-xs-8": {},
+  "grid-xs-9": {},
+  "grid-xs-10": {},
+  "grid-xs-11": {},
+  "grid-xs-12": {}
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Grid.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.styles.js","sources":["../../../src/Grid/Grid.styles.tsx"],"sourcesContent":["import { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvGrid\", {\n  root: {},\n  container: {},\n  item: {},\n  zeroMinWidth: {},\n  \"direction-xs-column\": {},\n  \"direction-xs-reverse\": {},\n  \"direction-xs-row-reverse\": {},\n  \"wrap-xs-nowrap\": {},\n  \"wrap-xs-wrap-reverse\": {},\n  \"spacing-xs-1\": {},\n  \"spacing-xs-2\": {},\n  \"spacing-xs-3\": {},\n  \"spacing-xs-4\": {},\n  \"spacing-xs-5\": {},\n  \"spacing-xs-6\": {},\n  \"spacing-xs-7\": {},\n  \"spacing-xs-8\": {},\n  \"spacing-xs-9\": {},\n  \"spacing-xs-10\": {},\n  \"grid-xs-auto\": {},\n  \"grid-xs-true\": {},\n  \"grid-xs-1\": {},\n  \"grid-xs-2\": {},\n  \"grid-xs-3\": {},\n  \"grid-xs-4\": {},\n  \"grid-xs-5\": {},\n  \"grid-xs-6\": {},\n  \"grid-xs-7\": {},\n  \"grid-xs-8\": {},\n  \"grid-xs-9\": {},\n  \"grid-xs-10\": {},\n  \"grid-xs-11\": {},\n  \"grid-xs-12\": {},\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM,CAAC;AAAA,EACP,WAAW,CAAC;AAAA,EACZ,MAAM,CAAC;AAAA,EACP,cAAc,CAAC;AAAA,EACf,uBAAuB,CAAC;AAAA,EACxB,wBAAwB,CAAC;AAAA,EACzB,4BAA4B,CAAC;AAAA,EAC7B,kBAAkB,CAAC;AAAA,EACnB,wBAAwB,CAAC;AAAA,EACzB,gBAAgB,CAAC;AAAA,EACjB,gBAAgB,CAAC;AAAA,EACjB,gBAAgB,CAAC;AAAA,EACjB,gBAAgB,CAAC;AAAA,EACjB,gBAAgB,CAAC;AAAA,EACjB,gBAAgB,CAAC;AAAA,EACjB,gBAAgB,CAAC;AAAA,EACjB,gBAAgB,CAAC;AAAA,EACjB,gBAAgB,CAAC;AAAA,EACjB,iBAAiB,CAAC;AAAA,EAClB,gBAAgB,CAAC;AAAA,EACjB,gBAAgB,CAAC;AAAA,EACjB,aAAa,CAAC;AAAA,EACd,aAAa,CAAC;AAAA,EACd,aAAa,CAAC;AAAA,EACd,aAAa,CAAC;AAAA,EACd,aAAa,CAAC;AAAA,EACd,aAAa,CAAC;AAAA,EACd,aAAa,CAAC;AAAA,EACd,aAAa,CAAC;AAAA,EACd,aAAa,CAAC;AAAA,EACd,cAAc,CAAC;AAAA,EACf,cAAc,CAAC;AAAA,EACf,cAAc,CAAC;AACjB,CAAC;"}

package/dist/esm/Header/Actions/Actions.js

@@ -0,0 +1,19 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
+import { useClasses } from "./Actions.styles.js";
+import { staticClasses } from "./Actions.styles.js";
+const HvHeaderActions = (props) => {
+  const {
+    classes: classesProp,
+    className,
+    children,
+    ...others
+  } = useDefaultProps("HvHeaderActions", props);
+  const { classes, cx } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx("div", { className: cx(classes.root, className), ...others, children });
+};
+export {
+  HvHeaderActions,
+  staticClasses as headerActionsClasses
+};
+//# sourceMappingURL=Actions.js.map

package/dist/esm/Header/Actions/Actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Actions.js","sources":["../../../../src/Header/Actions/Actions.tsx"],"sourcesContent":["import { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { useClasses, staticClasses } from \"./Actions.styles\";\n\nexport { staticClasses as headerActionsClasses };\n\nexport type HvHeaderActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderActionsProps extends HvBaseProps {\n  classes?: HvHeaderActionsClasses;\n}\n\nexport const HvHeaderActions = (props: HvHeaderActionsProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    ...others\n  } = useDefaultProps(\"HvHeaderActions\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAca,MAAA,kBAAkB,CAAC,UAAgC;AACxD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAE5C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA,oBAAC,OAAI,EAAA,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAC9C,SACH,CAAA;AAEJ;"}

package/dist/esm/Header/Actions/Actions.styles.js

@@ -0,0 +1,21 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../utils/classes.js";
+import { staticClasses as staticClasses$1 } from "../../Button/Button.styles.js";
+import "../../Button/Button.js";
+const { staticClasses, useClasses } = createClasses("HvHeader-Actions", {
+  root: {
+    backgroundColor: "transparent",
+    display: "flex",
+    gap: theme.space.xs,
+    alignItems: "center",
+    marginLeft: "auto",
+    [`& .${staticClasses$1?.root}`]: {
+      "&:hover": { backgroundColor: theme.colors.containerBackgroundHover }
+    }
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Actions.styles.js.map

package/dist/esm/Header/Actions/Actions.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Actions.styles.js","sources":["../../../../src/Header/Actions/Actions.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { buttonClasses } from \"../../Button\";\nimport { createClasses } from \"../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvHeader-Actions\", {\n  root: {\n    backgroundColor: \"transparent\",\n    display: \"flex\",\n    gap: theme.space.xs,\n    alignItems: \"center\",\n    marginLeft: \"auto\",\n    [`& .${buttonClasses?.root}`]: {\n      \"&:hover\": { backgroundColor: theme.colors.containerBackgroundHover },\n    },\n  },\n});\n"],"names":["buttonClasses"],"mappings":";;;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,iBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,KAAK,MAAM,MAAM;AAAA,IACjB,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,CAAC,MAAMA,iBAAe,IAAI,EAAE,GAAG;AAAA,MAC7B,WAAW,EAAE,iBAAiB,MAAM,OAAO,yBAAyB;AAAA,IACtE;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/Header/Brand/Brand.js

@@ -0,0 +1,25 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
+import { useClasses } from "./Brand.styles.js";
+import { staticClasses } from "./Brand.styles.js";
+import { HvTypography } from "../../Typography/Typography.js";
+const HvHeaderBrand = (props) => {
+  const {
+    classes: classesProp,
+    logo,
+    name,
+    className,
+    ...others
+  } = useDefaultProps("HvHeaderBrand", props);
+  const { classes, cx } = useClasses(classesProp);
+  return /* @__PURE__ */ jsxs("div", { className: cx(classes.root, className), ...others, children: [
+    logo,
+    logo && name && /* @__PURE__ */ jsx("div", { className: classes.separator }),
+    name && /* @__PURE__ */ jsx(HvTypography, { className: classes.brandName, variant: "label", children: name })
+  ] });
+};
+export {
+  HvHeaderBrand,
+  staticClasses as headerBrandClasses
+};
+//# sourceMappingURL=Brand.js.map

package/dist/esm/Header/Brand/Brand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Brand.js","sources":["../../../../src/Header/Brand/Brand.tsx"],"sourcesContent":["import { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { HvTypography } from \"../../Typography\";\n\nimport { staticClasses, useClasses } from \"./Brand.styles\";\n\nexport { staticClasses as headerBrandClasses };\n\nexport type HvHeaderBrandClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderBrandProps extends HvBaseProps {\n  logo?: React.ReactNode;\n  name?: string;\n  classes?: HvHeaderBrandClasses;\n}\n\n/**\n * Header component is used to render a header bar with logo and brand name, navigation and actions.\n */\nexport const HvHeaderBrand = (props: HvHeaderBrandProps) => {\n  const {\n    classes: classesProp,\n    logo,\n    name,\n    className,\n    ...others\n  } = useDefaultProps(\"HvHeaderBrand\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      {logo}\n      {logo && name && <div className={classes.separator} />}\n      {name && (\n        <HvTypography className={classes.brandName} variant=\"label\">\n          {name}\n        </HvTypography>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;AAoBa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA,qBAAC,SAAI,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAC9C,UAAA;AAAA,IAAA;AAAA,IACA,QAAQ,QAAQ,oBAAC,OAAI,EAAA,WAAW,QAAQ,WAAW;AAAA,IACnD,4BACE,cAAa,EAAA,WAAW,QAAQ,WAAW,SAAQ,SACjD,UACH,KAAA,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

package/dist/esm/Header/Brand/Brand.styles.js

@@ -0,0 +1,17 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvHeader-Brand", {
+  root: { display: "flex", alignItems: "center" },
+  separator: {
+    width: 1,
+    height: theme.space.sm,
+    margin: theme.space.xs,
+    backgroundColor: theme.colors.secondary
+  },
+  brandName: {}
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Brand.styles.js.map

package/dist/esm/Header/Brand/Brand.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Brand.styles.js","sources":["../../../../src/Header/Brand/Brand.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvHeader-Brand\", {\n  root: { display: \"flex\", alignItems: \"center\" },\n  separator: {\n    width: 1,\n    height: theme.space.sm,\n    margin: theme.space.xs,\n    backgroundColor: theme.colors.secondary,\n  },\n  brandName: {},\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM,EAAE,SAAS,QAAQ,YAAY,SAAS;AAAA,EAC9C,WAAW;AAAA,IACT,OAAO;AAAA,IACP,QAAQ,MAAM,MAAM;AAAA,IACpB,QAAQ,MAAM,MAAM;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,WAAW,CAAC;AACd,CAAC;"}

package/dist/esm/Header/Header.js

@@ -0,0 +1,39 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { useClasses } from "./Header.styles.js";
+import { staticClasses } from "./Header.styles.js";
+const HvHeader = (props) => {
+  const {
+    className,
+    classes: classesProp,
+    children,
+    position = "fixed",
+    ...others
+  } = useDefaultProps("HvHeader", props);
+  const { classes, cx, css } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(
+    "header",
+    {
+      className: cx(
+        classes.root,
+        classes.backgroundColor,
+        css({
+          position,
+          ...position === "fixed" && {
+            top: 0,
+            left: "auto",
+            right: 0
+          }
+        }),
+        className
+      ),
+      ...others,
+      children: /* @__PURE__ */ jsx("div", { className: classes.header, children })
+    }
+  );
+};
+export {
+  HvHeader,
+  staticClasses as headerClasses
+};
+//# sourceMappingURL=Header.js.map

package/dist/esm/Header/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sources":["../../../src/Header/Header.tsx"],"sourcesContent":["import { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { useClasses, staticClasses } from \"./Header.styles\";\n\nexport { staticClasses as headerClasses };\n\nexport type HvHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport type HvHeaderPosition =\n  | \"fixed\"\n  | \"absolute\"\n  | \"sticky\"\n  | \"static\"\n  | \"relative\";\n\nexport interface HvHeaderProps extends HvBaseProps {\n  /** The position of the header bar */\n  position?: HvHeaderPosition;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvHeaderClasses;\n}\n\n/**\n * Header component is used to render a header bar with logo and brand name, navigation and actions.\n */\nexport const HvHeader = (props: HvHeaderProps) => {\n  const {\n    className,\n    classes: classesProp,\n    children,\n    position = \"fixed\",\n    ...others\n  } = useDefaultProps(\"HvHeader\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  return (\n    <header\n      className={cx(\n        classes.root,\n        classes.backgroundColor,\n        css({\n          position,\n          ...(position === \"fixed\" && {\n            top: 0,\n            left: \"auto\",\n            right: 0,\n          }),\n        }),\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.header}>{children}</div>\n    </header>\n  );\n};\n"],"names":[],"mappings":";;;;AA2Ba,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAGjD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,IAAI;AAAA,UACF;AAAA,UACA,GAAI,aAAa,WAAW;AAAA,YAC1B,KAAK;AAAA,YACL,MAAM;AAAA,YACN,OAAO;AAAA,UACT;AAAA,QAAA,CACD;AAAA,QACD;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,QAAS,UAAS;AAAA,IAAA;AAAA,EAAA;AAGhD;"}

package/dist/esm/Header/Header.styles.js

@@ -0,0 +1,34 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvHeader", {
+  root: {
+    height: theme.header.height,
+    backgroundColor: theme.colors.atmo1,
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+    boxSizing: "border-box",
+    flexShrink: 0,
+    zIndex: theme.zIndices.banner,
+    color: theme.colors.atmo1,
+    boxShadow: theme.colors.shadow,
+    borderTop: "none"
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    height: "100%",
+    padding: `0 ${theme.space.sm}`,
+    boxShadow: theme.colors.shadow,
+    "& > *:not(nav)": {
+      zIndex: 2
+    }
+  },
+  backgroundColor: {}
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Header.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Header.styles.js","sources":["../../../src/Header/Header.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvHeader\", {\n  root: {\n    height: theme.header.height,\n    backgroundColor: theme.colors.atmo1,\n    display: \"flex\",\n    flexDirection: \"column\",\n    width: \"100%\",\n    boxSizing: \"border-box\",\n    flexShrink: 0,\n    zIndex: theme.zIndices.banner,\n    color: theme.colors.atmo1,\n    boxShadow: theme.colors.shadow,\n    borderTop: \"none\",\n  },\n  header: {\n    display: \"flex\",\n    alignItems: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n    padding: `0 ${theme.space.sm}`,\n    boxShadow: theme.colors.shadow,\n    \"& > *:not(nav)\": {\n      zIndex: 2,\n    },\n  },\n  backgroundColor: {},\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM;AAAA,IACJ,QAAQ,MAAM,OAAO;AAAA,IACrB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,IACP,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,QAAQ,MAAM,SAAS;AAAA,IACvB,OAAO,MAAM,OAAO;AAAA,IACpB,WAAW,MAAM,OAAO;AAAA,IACxB,WAAW;AAAA,EACb;AAAA,EACA,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS,KAAK,MAAM,MAAM,EAAE;AAAA,IAC5B,WAAW,MAAM,OAAO;AAAA,IACxB,kBAAkB;AAAA,MAChB,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,iBAAiB,CAAC;AACpB,CAAC;"}

package/dist/esm/Header/Navigation/MenuBar/Bar.js

@@ -0,0 +1,41 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useContext } from "react";
+import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
+import { SelectionContext } from "../utils/SelectionContext.js";
+import { useClasses } from "./Bar.styles.js";
+import { staticClasses } from "./Bar.styles.js";
+const Bar = (props) => {
+  const {
+    id,
+    data = [],
+    type = "menubar",
+    className,
+    children,
+    classes: classesProp
+  } = useDefaultProps("HvHeaderMenuBarBar", props);
+  const { classes, cx } = useClasses(classesProp);
+  const selectionPath = useContext(SelectionContext);
+  const isMenu = type === "menu";
+  const isActive = isMenu && data.filter((item) => item.id === selectionPath?.[1]).length > 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(
+        classes.root,
+        classes[type],
+        {
+          [classes.hidden]: isMenu,
+          [classes.active]: isActive
+        },
+        className
+      ),
+      children: /* @__PURE__ */ jsx("ul", { className: classes.list, id, onFocus: () => {
+      }, children })
+    }
+  );
+};
+export {
+  Bar,
+  staticClasses as headerMenuBarClasses
+};
+//# sourceMappingURL=Bar.js.map

package/dist/esm/Header/Navigation/MenuBar/Bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bar.js","sources":["../../../../../src/Header/Navigation/MenuBar/Bar.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { HvBaseProps } from \"../../../types/generic\";\nimport { ExtractNames } from \"../../../utils/classes\";\n\nimport { useDefaultProps } from \"../../../hooks/useDefaultProps\";\n\nimport { SelectionContext } from \"../utils/SelectionContext\";\nimport { staticClasses, useClasses } from \"./Bar.styles\";\nimport { HvHeaderNavigationItemProp } from \"../useSelectionPath\";\n\nexport { staticClasses as headerMenuBarClasses };\n\nexport type HvHeaderMenuBarClasses = ExtractNames<typeof useClasses>;\n\nexport interface BarProps extends HvBaseProps {\n  data: HvHeaderNavigationItemProp[];\n  type?: \"menubar\" | \"menu\";\n  classes?: HvHeaderMenuBarClasses;\n}\n\nexport const Bar = (props: BarProps) => {\n  const {\n    id,\n    data = [],\n    type = \"menubar\",\n    className,\n    children,\n    classes: classesProp,\n  } = useDefaultProps(\"HvHeaderMenuBarBar\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const selectionPath = useContext(SelectionContext);\n\n  const isMenu = type === \"menu\";\n\n  const isActive =\n    isMenu && data.filter((item) => item.id === selectionPath?.[1]).length > 0;\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        classes[type],\n        {\n          [classes.hidden]: isMenu,\n          [classes.active]: isActive,\n        },\n        className\n      )}\n    >\n      <ul className={classes.list} id={id} onFocus={() => {}}>\n        {children}\n      </ul>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAqBa,MAAA,MAAM,CAAC,UAAoB;AAChC,QAAA;AAAA,IACJ;AAAA,IACA,OAAO,CAAC;AAAA,IACR,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,sBAAsB,KAAK;AAC/C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,gBAAgB,WAAW,gBAAgB;AAEjD,QAAM,SAAS,SAAS;AAExB,QAAM,WACJ,UAAU,KAAK,OAAO,CAAC,SAAS,KAAK,OAAO,gBAAgB,CAAC,CAAC,EAAE,SAAS;AAGzE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,IAAI;AAAA,QACZ;AAAA,UACE,CAAC,QAAQ,MAAM,GAAG;AAAA,UAClB,CAAC,QAAQ,MAAM,GAAG;AAAA,QACpB;AAAA,QACA;AAAA,MACF;AAAA,MAEA,8BAAC,MAAG,EAAA,WAAW,QAAQ,MAAM,IAAQ,SAAS,MAAM;AAAA,SACjD,SACH,CAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/Header/Navigation/MenuBar/Bar.styles.js

@@ -0,0 +1,66 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../../utils/classes.js";
+const show = {
+  top: theme.header.height,
+  transition: ["top"],
+  boxShadow: theme.colors.shadow,
+  transitionDuration: "500ms",
+  backgroundColor: theme.colors.atmo2
+};
+const hide = {
+  top: 0,
+  transition: ["top"],
+  boxShadow: "none",
+  transitionDuration: "300ms"
+};
+const { staticClasses, useClasses } = createClasses("HvHeader-MenuBar", {
+  root: {
+    left: 0,
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  menu: {
+    position: "absolute",
+    zIndex: -2,
+    height: theme.header.secondLevelHeight,
+    backgroundColor: theme.colors.atmo2,
+    "& li > div": {
+      marginTop: 0
+    }
+  },
+  menubar: {
+    position: "relative",
+    backgroundColor: theme.colors.atmo1
+  },
+  hidden: { ...hide },
+  active: { ...show },
+  list: {
+    margin: 0,
+    padding: 0,
+    display: "inherit",
+    alignItems: "center",
+    height: "100%",
+    "&:hover $active": {
+      ...hide
+    },
+    "& li:hover > $hidden": {
+      ...show
+    },
+    "&:focus-within $active": {
+      ...hide,
+      zIndex: -2
+    },
+    "& li:focus-within > $hidden": {
+      ...show,
+      zIndex: -1
+    }
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Bar.styles.js.map

package/dist/esm/Header/Navigation/MenuBar/Bar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bar.styles.js","sources":["../../../../../src/Header/Navigation/MenuBar/Bar.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../../utils/classes\";\n\nconst show = {\n  top: theme.header.height,\n  transition: [\"top\"],\n  boxShadow: theme.colors.shadow,\n  transitionDuration: \"500ms\",\n  backgroundColor: theme.colors.atmo2,\n};\n\nconst hide = {\n  top: 0,\n  transition: [\"top\"],\n  boxShadow: \"none\",\n  transitionDuration: \"300ms\",\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvHeader-MenuBar\", {\n  root: {\n    left: 0,\n    width: \"100%\",\n    height: \"100%\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  },\n  menu: {\n    position: \"absolute\",\n    zIndex: -2,\n    height: theme.header.secondLevelHeight,\n    backgroundColor: theme.colors.atmo2,\n    \"& li > div\": {\n      marginTop: 0,\n    },\n  },\n  menubar: {\n    position: \"relative\",\n    backgroundColor: theme.colors.atmo1,\n  },\n  hidden: { ...hide },\n  active: { ...show },\n  list: {\n    margin: 0,\n    padding: 0,\n    display: \"inherit\",\n    alignItems: \"center\",\n    height: \"100%\",\n    \"&:hover $active\": {\n      ...hide,\n    },\n    \"& li:hover > $hidden\": {\n      ...show,\n    },\n\n    \"&:focus-within $active\": {\n      ...hide,\n      zIndex: -2,\n    },\n    \"& li:focus-within > $hidden\": {\n      ...show,\n      zIndex: -1,\n    },\n  },\n});\n"],"names":[],"mappings":";;AAIA,MAAM,OAAO;AAAA,EACX,KAAK,MAAM,OAAO;AAAA,EAClB,YAAY,CAAC,KAAK;AAAA,EAClB,WAAW,MAAM,OAAO;AAAA,EACxB,oBAAoB;AAAA,EACpB,iBAAiB,MAAM,OAAO;AAChC;AAEA,MAAM,OAAO;AAAA,EACX,KAAK;AAAA,EACL,YAAY,CAAC,KAAK;AAAA,EAClB,WAAW;AAAA,EACX,oBAAoB;AACtB;AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,EACd;AAAA,EACA,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,QAAQ,MAAM,OAAO;AAAA,IACrB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,cAAc;AAAA,MACZ,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,UAAU;AAAA,IACV,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,QAAQ,EAAE,GAAG,KAAK;AAAA,EAClB,QAAQ,EAAE,GAAG,KAAK;AAAA,EAClB,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,mBAAmB;AAAA,MACjB,GAAG;AAAA,IACL;AAAA,IACA,wBAAwB;AAAA,MACtB,GAAG;AAAA,IACL;AAAA,IAEA,0BAA0B;AAAA,MACxB,GAAG;AAAA,MACH,QAAQ;AAAA,IACV;AAAA,IACA,+BAA+B;AAAA,MAC7B,GAAG;AAAA,MACH,QAAQ;AAAA,IACV;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/Header/Navigation/MenuBar/MenuBar.js

@@ -0,0 +1,30 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
+import { Bar } from "./Bar.js";
+import { HvHeaderMenuItem } from "../MenuItem/MenuItem.js";
+const HvHeaderMenuBar = (props) => {
+  const {
+    data = [],
+    onClick,
+    type = "menubar",
+    levels,
+    currentLevel,
+    classes,
+    ...others
+  } = useDefaultProps("HvHeaderMenuBar", props);
+  return /* @__PURE__ */ jsx(Bar, { data, type, classes, ...others, children: data.map((item) => /* @__PURE__ */ jsx(
+    HvHeaderMenuItem,
+    {
+      item,
+      type,
+      onClick,
+      levels,
+      currentLevel
+    },
+    item.id
+  )) });
+};
+export {
+  HvHeaderMenuBar
+};
+//# sourceMappingURL=MenuBar.js.map