@hitachivantara/uikit-react-core 5.27.5 → 5.27.7

package/dist/cjs/components/Grid/Grid.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.cjs","sources":["../../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import { Grid as MuiGrid, GridProps as MuiGridProps } from \"@mui/material\";\n\nimport isString from \"lodash/isString\";\n\nimport { forwardRef } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/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\n  extends Omit<MuiGridProps, \"classes\" | \"columns\">,\n    HvBaseProps<HTMLDivElement, \"color\"> {\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\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    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  const containerProps: Pick<\n    MuiGridProps,\n    \"container\" | \"spacing\" | \"rowSpacing\" | \"columnSpacing\" | \"columns\"\n  > = {};\n\n  if (container) {\n    containerProps.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\n  return (\n    <MuiGrid ref={ref} classes={classes} {...containerProps} {...others} />\n  );\n});\n"],"names":["BREAKPOINT_GUTTERS","xs","sm","md","lg","xl","BREAKPOINT_COLUMNS","getGridSpacing","spacing","gridSpacing","isString","Object","keys","reduce","acc","breakpoint","getNumberOfColumns","columns","numberOfColumns","HvGrid","forwardRef","props","ref","container","rowSpacing","columnSpacing","classes","classesProp","others","useDefaultProps","useClasses","containerProps","MuiGrid"],"mappings":";;;;;;;;;;AAgBA,MAAMA,qBAAqB;AAAA,EACzBC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AACN;AAEA,MAAMC,qBAAqB;AAAA,EACzBL,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AACN;AAyHA,SAASE,eAAeC,SAAiC;AACnDC,MAAAA;AAEAC,MAAAA,kBAAAA,QAASF,OAAO,GAAG;AACrB,QAAIA,YAAY,QAAQ;AACRR,oBAAAA;AAAAA,IAAAA,OACT;AACLS,oBAAcT,mBAAmBQ,OAAO;AAAA,IAC1C;AAAA,EAAA,WACS,OAAOA,YAAY,UAAU;AACtCC,kBAAcE,OAAOC,KAAKJ,OAAO,EAAEK,OACjC,CAACC,KAAKC,gBAAgB;AAAA,MACpB,GAAGD;AAAAA,MACH,CAACC,UAAU,GACTf,mBAAmBQ,QAAQO,UAAU,CAAC,KAAKP,QAAQO,UAAU;AAAA,IAAA,IAEjE,CACF,CAAA;AAAA,EAAA,WACSP,YAAY,GAAG;AACV,kBAAA;AAAA,MAAEP,IAAI;AAAA,IAAA;AAAA,EAAE,OACjB;AACSO,kBAAAA;AAAAA,EAChB;AAEOC,SAAAA;AACT;AAEA,SAASO,mBAAmBC,SAAiC;AACvDC,MAAAA;AAEJ,MAAID,YAAY,QAAQ;AACJX,sBAAAA;AAAAA,EAAAA,OACb;AACaW,sBAAAA;AAAAA,EACpB;AAEOC,SAAAA;AACT;AA0BO,MAAMC,SAASC,MAAAA,WAAwC,CAACC,OAAOC,QAAQ;AACtE,QAAA;AAAA,IACJC;AAAAA,IACAf,UAAU;AAAA,IACVgB;AAAAA,IACAC;AAAAA,IACAR;AAAAA,IACAS,SAASC;AAAAA,IACT,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,UAAUR,KAAK;AAE7B,QAAA;AAAA,IAAEK;AAAAA,EAAAA,IAAYI,YAAAA,WAAWH,WAAW;AAE1C,QAAMI,iBAGF,CAAA;AAEJ,MAAIR,WAAW;AACbQ,mBAAeR,YAAY;AAE3B,QAAIf,WAAW,MAAM;AACJA,qBAAAA,UAAUD,eAAeC,OAAO;AAAA,IACjD;AACA,QAAIgB,cAAc,MAAM;AACPA,qBAAAA,aAAajB,eAAeiB,UAAU;AAAA,IACvD;AACA,QAAIC,iBAAiB,MAAM;AACVA,qBAAAA,gBAAgBlB,eAAekB,aAAa;AAAA,IAC7D;AACA,QAAIR,WAAW,MAAM;AACJA,qBAAAA,UAAUD,mBAAmBC,OAAO;AAAA,IACrD;AAAA,EACF;AAEA,wCACGe,SAAAA,MAAO;AAAA,IAACV;AAAAA,IAAUI;AAAAA,IAAiB,GAAKK;AAAAA,IAAc,GAAMH;AAAAA,EAAAA,CAAS;AAE1E,CAAC;;;"}
+{"version":3,"file":"Grid.cjs","sources":["../../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import { Grid as MuiGrid, GridProps as MuiGridProps } from \"@mui/material\";\n\nimport isString from \"lodash/isString\";\n\nimport { forwardRef } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/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\n  extends Omit<MuiGridProps, \"classes\" | \"columns\">,\n    HvBaseProps<HTMLDivElement, \"color\"> {\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\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    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  const containerProps: Pick<\n    MuiGridProps,\n    \"container\" | \"spacing\" | \"rowSpacing\" | \"columnSpacing\" | \"columns\"\n  > = {};\n\n  if (container) {\n    containerProps.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\n  return (\n    <MuiGrid ref={ref} classes={classes} {...containerProps} {...others} />\n  );\n});\n"],"names":["BREAKPOINT_GUTTERS","xs","sm","md","lg","xl","BREAKPOINT_COLUMNS","getGridSpacing","spacing","gridSpacing","isString","Object","keys","reduce","acc","breakpoint","getNumberOfColumns","columns","numberOfColumns","HvGrid","forwardRef","props","ref","container","rowSpacing","columnSpacing","classes","classesProp","others","useDefaultProps","useClasses","containerProps","MuiGrid"],"mappings":";;;;;;;;;;AAgBA,MAAMA,qBAAqB;AAAA,EACzBC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AACN;AAEA,MAAMC,qBAAqB;AAAA,EACzBL,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AACN;AAyHA,SAASE,eAAeC,SAAiC;AACnDC,MAAAA;AAEAC,MAAAA,kBAAAA,QAASF,OAAO,GAAG;AACrB,QAAIA,YAAY,QAAQ;AACRR,oBAAAA;AAAAA,IAAAA,OACT;AACLS,oBAAcT,mBAAmBQ,OAAO;AAAA,IAC1C;AAAA,EAAA,WACS,OAAOA,YAAY,UAAU;AACtCC,kBAAcE,OAAOC,KAAKJ,OAAO,EAAEK,OACjC,CAACC,KAAKC,gBAAgB;AAAA,MACpB,GAAGD;AAAAA,MACH,CAACC,UAAU,GACTf,mBAAmBQ,QAAQO,UAAU,CAAC,KAAKP,QAAQO,UAAU;AAAA,IAAA,IAEjE,CACF,CAAA;AAAA,EAAA,WACSP,YAAY,GAAG;AACV,kBAAA;AAAA,MAAEP,IAAI;AAAA,IAAA;AAAA,EAAE,OACjB;AACSO,kBAAAA;AAAAA,EAChB;AAEOC,SAAAA;AACT;AAEA,SAASO,mBAAmBC,SAAiC;AACvDC,MAAAA;AAEJ,MAAID,YAAY,QAAQ;AACJX,sBAAAA;AAAAA,EAAAA,OACb;AACaW,sBAAAA;AAAAA,EACpB;AAEOC,SAAAA;AACT;AA0BO,MAAMC,SAASC,MAAAA,WAAwC,CAACC,OAAOC,QAAQ;AACtE,QAAA;AAAA,IACJC;AAAAA,IACAf,UAAU;AAAA,IACVgB;AAAAA,IACAC;AAAAA,IACAR;AAAAA,IACAS,SAASC;AAAAA,IACT,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,UAAUR,KAAK;AAE7B,QAAA;AAAA,IAAEK;AAAAA,EAAAA,IAAYI,YAAAA,WAAWH,WAAW;AAE1C,QAAMI,iBAGF,CAAA;AAEJ,MAAIR,WAAW;AACbQ,mBAAeR,YAAY;AAE3B,QAAIf,WAAW,MAAM;AACJA,qBAAAA,UAAUD,eAAeC,OAAO;AAAA,IACjD;AACA,QAAIgB,cAAc,MAAM;AACPA,qBAAAA,aAAajB,eAAeiB,UAAU;AAAA,IACvD;AACA,QAAIC,iBAAiB,MAAM;AACVA,qBAAAA,gBAAgBlB,eAAekB,aAAa;AAAA,IAC7D;AACA,QAAIR,WAAW,MAAM;AACJA,qBAAAA,UAAUD,mBAAmBC,OAAO;AAAA,IACrD;AAAA,EACF;AAEA,wCACGe,SAAQ,MAAA,EAAA,KAAU,SAAsBD,GAAAA,gBAAgB,GAAIH,OAAU,CAAA;AAE3E,CAAC;;;"}

package/dist/cjs/components/Header/Actions/Actions.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const useDefaultProps = require("../../../hooks/useDefaultProps.cjs");
 const Actions_styles = require("./Actions.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const HvHeaderActions = (props) => {
   const {
     classes: classesProp,
@@ -14,11 +14,7 @@ const HvHeaderActions = (props) => {
     classes,
     cx
   } = Actions_styles.useClasses(classesProp);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: cx(classes.root, className),
-    ...others,
-    children
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.root, className), ...others, children });
 };
 exports.headerActionsClasses = Actions_styles.staticClasses;
 exports.HvHeaderActions = HvHeaderActions;

package/dist/cjs/components/Header/Actions/Actions.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Actions.cjs","sources":["../../../../../src/components/Header/Actions/Actions.tsx"],"sourcesContent":["import { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/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":["HvHeaderActions","props","classes","classesProp","className","children","others","useDefaultProps","cx","useClasses","root"],"mappings":";;;;;AAcaA,MAAAA,kBAAkBA,CAACC,UAAgC;AACxD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,mBAAmBN,KAAK;AAEtC,QAAA;AAAA,IAAEC;AAAAA,IAASM;AAAAA,EAAAA,IAAOC,eAAAA,WAAWN,WAAW;AAE9C,wCACE,OAAA;AAAA,IAAKC,WAAWI,GAAGN,QAAQQ,MAAMN,SAAS;AAAA,IAAE,GAAKE;AAAAA,IAAMD;AAAAA,EAAAA,CAElD;AAET;;;"}
+{"version":3,"file":"Actions.cjs","sources":["../../../../../src/components/Header/Actions/Actions.tsx"],"sourcesContent":["import { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/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":["HvHeaderActions","props","classes","classesProp","className","children","others","useDefaultProps","cx","useClasses","jsx","root"],"mappings":";;;;;AAcaA,MAAAA,kBAAkBA,CAACC,UAAgC;AACxD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,mBAAmBN,KAAK;AAEtC,QAAA;AAAA,IAAEC;AAAAA,IAASM;AAAAA,EAAAA,IAAOC,eAAAA,WAAWN,WAAW;AAG5C,SAAAO,+BAAC,OAAI,EAAA,WAAWF,GAAGN,QAAQS,MAAMP,SAAS,GAAG,GAAIE,QAC9CD,SACH,CAAA;AAEJ;;;"}

package/dist/cjs/components/Header/Brand/Brand.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const useDefaultProps = require("../../../hooks/useDefaultProps.cjs");
 const Brand_styles = require("./Brand.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Typography = require("../../Typography/Typography.cjs");
 const HvHeaderBrand = (props) => {
   const {
@@ -18,19 +18,13 @@ const HvHeaderBrand = (props) => {
     cx,
     css
   } = Brand_styles.useClasses(classesProp);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    className: cx(classes.root, className),
-    ...others,
-    children: [logo, logo && name && /* @__PURE__ */ jsxRuntime.jsx("div", {
-      className: classes.separator
-    }), name && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
-      className: css({
-        color: uikitStyles.theme.header.brandColor
-      }),
-      variant: "label",
-      children: name
-    })]
-  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(classes.root, className), ...others, children: [
+    logo,
+    logo && name && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.separator }),
+    name && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: css({
+      color: uikitStyles.theme.header.brandColor
+    }), variant: "label", children: name })
+  ] });
 };
 exports.headerBrandClasses = Brand_styles.staticClasses;
 exports.HvHeaderBrand = HvHeaderBrand;

package/dist/cjs/components/Header/Brand/Brand.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Brand.cjs","sources":["../../../../../src/components/Header/Brand/Brand.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypography } from \"@core/components/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, css } = 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\n          className={css({ color: theme.header.brandColor })}\n          variant=\"label\"\n        >\n          {name}\n        </HvTypography>\n      )}\n    </div>\n  );\n};\n"],"names":["HvHeaderBrand","props","classes","classesProp","logo","name","className","others","useDefaultProps","cx","css","useClasses","root","children","separator","_jsx","HvTypography","color","theme","header","brandColor","variant"],"mappings":";;;;;;;AAsBaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,iBAAiBP,KAAK;AAEpC,QAAA;AAAA,IAAEC;AAAAA,IAASO;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,aAAAA,WAAWR,WAAW;AAEnD,yCACE,OAAA;AAAA,IAAKG,WAAWG,GAAGP,QAAQU,MAAMN,SAAS;AAAA,IAAE,GAAKC;AAAAA,IAAMM,WACpDT,MACAA,QAAQC,uCAAQ,OAAA;AAAA,MAAKC,WAAWJ,QAAQY;AAAAA,IAAAA,CAAY,GACpDT,QACCU,2BAAAA,IAACC,yBAAY;AAAA,MACXV,WAAWI,IAAI;AAAA,QAAEO,OAAOC,YAAAA,MAAMC,OAAOC;AAAAA,MAAAA,CAAY;AAAA,MACjDC,SAAQ;AAAA,MAAOR,UAEdR;AAAAA,IAAAA,CACW,CACf;AAAA,EAAA,CACE;AAET;;;"}
+{"version":3,"file":"Brand.cjs","sources":["../../../../../src/components/Header/Brand/Brand.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTypography } from \"@core/components/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, css } = 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\n          className={css({ color: theme.header.brandColor })}\n          variant=\"label\"\n        >\n          {name}\n        </HvTypography>\n      )}\n    </div>\n  );\n};\n"],"names":["HvHeaderBrand","props","classes","classesProp","logo","name","className","others","useDefaultProps","cx","css","useClasses","jsxs","root","jsx","separator","HvTypography","color","theme","header","brandColor"],"mappings":";;;;;;;AAsBaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,iBAAiBP,KAAK;AAEpC,QAAA;AAAA,IAAEC;AAAAA,IAASO;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,aAAAA,WAAWR,WAAW;AAGjD,SAAAS,gCAAC,SAAI,WAAWH,GAAGP,QAAQW,MAAMP,SAAS,GAAG,GAAIC,QAC9CH,UAAAA;AAAAA,IAAAA;AAAAA,IACAA,QAAQC,QAAQS,+BAAC,OAAI,EAAA,WAAWZ,QAAQa,WAAa;AAAA,IACrDV,QACCS,2BAAAA,IAACE,WAAAA,cACC,EAAA,WAAWN,IAAI;AAAA,MAAEO,OAAOC,YAAAA,MAAMC,OAAOC;AAAAA,IAAY,CAAA,GACjD,SAAQ,SAEPf,UACH,KAAA,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;;;"}

package/dist/cjs/components/Header/Header.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const Header_styles = require("./Header.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const HvHeader = (props) => {
   const {
     className,
@@ -16,21 +16,14 @@ const HvHeader = (props) => {
     cx,
     css
   } = Header_styles.useClasses(classesProp);
-  return /* @__PURE__ */ jsxRuntime.jsx("header", {
-    className: cx(classes.root, classes.backgroundColor, css({
-      position,
-      ...position === "fixed" && {
-        top: 0,
-        left: "auto",
-        right: 0
-      }
-    }), className),
-    ...others,
-    children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-      className: classes.header,
-      children
-    })
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx("header", { className: cx(classes.root, classes.backgroundColor, css({
+    position,
+    ...position === "fixed" && {
+      top: 0,
+      left: "auto",
+      right: 0
+    }
+  }), className), ...others, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.header, children }) });
 };
 exports.headerClasses = Header_styles.staticClasses;
 exports.HvHeader = HvHeader;

package/dist/cjs/components/Header/Header.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Header.cjs","sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/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":["HvHeader","props","className","classes","classesProp","children","position","others","useDefaultProps","cx","css","useClasses","root","backgroundColor","top","left","right","header"],"mappings":";;;;;AA2BaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC,WAAW;AAAA,IACX,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,YAAYP,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASM;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,cAAAA,WAAWP,WAAW;AAEnD,wCACE,UAAA;AAAA,IACEF,WAAWO,GACTN,QAAQS,MACRT,QAAQU,iBACRH,IAAI;AAAA,MACFJ;AAAAA,MACA,GAAIA,aAAa,WAAW;AAAA,QAC1BQ,KAAK;AAAA,QACLC,MAAM;AAAA,QACNC,OAAO;AAAA,MACT;AAAA,IACD,CAAA,GACDd,SACF;AAAA,IAAE,GACEK;AAAAA,IAAMF,yCAEV,OAAA;AAAA,MAAKH,WAAWC,QAAQc;AAAAA,MAAOZ;AAAAA,IAAAA,CAAgB;AAAA,EAAA,CACzC;AAEZ;;;"}
+{"version":3,"file":"Header.cjs","sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/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":["HvHeader","props","className","classes","classesProp","children","position","others","useDefaultProps","cx","css","useClasses","jsx","root","backgroundColor","top","left","right","header"],"mappings":";;;;;AA2BaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC,WAAW;AAAA,IACX,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,YAAYP,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASM;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,cAAAA,WAAWP,WAAW;AAGjD,SAAAQ,2BAAA,IAAC,YACC,WAAWH,GACTN,QAAQU,MACRV,QAAQW,iBACRJ,IAAI;AAAA,IACFJ;AAAAA,IACA,GAAIA,aAAa,WAAW;AAAA,MAC1BS,KAAK;AAAA,MACLC,MAAM;AAAA,MACNC,OAAO;AAAA,IACT;AAAA,EACD,CAAA,GACDf,SACF,GACA,GAAIK,QAEJ,UAACK,2BAAAA,IAAA,OAAA,EAAI,WAAWT,QAAQe,QAASb,SAAS,CAAA,EAC5C,CAAA;AAEJ;;;"}

package/dist/cjs/components/Header/Navigation/MenuBar/Bar.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const SelectionContext = require("../utils/SelectionContext.cjs");
 const Bar_styles = require("./Bar.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Bar = ({
   id,
   data = [],
@@ -19,19 +19,11 @@ const Bar = ({
   const selectionPath = React.useContext(SelectionContext.SelectionContext);
   const isMenu = type === "menu";
   const isActive = isMenu && data.filter((item) => item.id === (selectionPath == null ? void 0 : selectionPath[1])).length > 0;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: cx(classes.root, classes[type], {
-      [classes.hidden]: isMenu,
-      [classes.active]: isActive
-    }, className),
-    children: /* @__PURE__ */ jsxRuntime.jsx("ul", {
-      className: classes.list,
-      id,
-      onFocus: () => {
-      },
-      children
-    })
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.root, classes[type], {
+    [classes.hidden]: isMenu,
+    [classes.active]: isActive
+  }, className), children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: classes.list, id, onFocus: () => {
+  }, children }) });
 };
 exports.headerMenuBarClasses = Bar_styles.staticClasses;
 exports.Bar = Bar;

package/dist/cjs/components/Header/Navigation/MenuBar/Bar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Bar.cjs","sources":["../../../../../../src/components/Header/Navigation/MenuBar/Bar.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\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?: string;\n  classes?: HvHeaderMenuBarClasses;\n}\n\nexport const Bar = ({\n  id,\n  data = [],\n  type = \"menubar\",\n  className,\n  children,\n  classes: classesProp,\n}: BarProps) => {\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":["Bar","id","data","type","className","children","classes","classesProp","cx","useClasses","selectionPath","useContext","SelectionContext","isMenu","isActive","filter","item","length","root","hidden","active","list","onFocus"],"mappings":";;;;;;AAmBO,MAAMA,MAAMA,CAAC;AAAA,EAClBC;AAAAA,EACAC,OAAO,CAAE;AAAA,EACTC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AACD,MAAM;AACR,QAAA;AAAA,IAAED;AAAAA,IAASE;AAAAA,EAAAA,IAAOC,WAAAA,WAAWF,WAAW;AAExCG,QAAAA,gBAAgBC,iBAAWC,iBAAAA,gBAAgB;AAEjD,QAAMC,SAASV,SAAS;AAElBW,QAAAA,WACJD,UAAUX,KAAKa,OAAQC,CAAAA,SAASA,KAAKf,QAAOS,+CAAgB,GAAE,EAAEO,SAAS;AAE3E,wCACE,OAAA;AAAA,IACEb,WAAWI,GACTF,QAAQY,MACRZ,QAAQH,IAAI,GACZ;AAAA,MACE,CAACG,QAAQa,MAAM,GAAGN;AAAAA,MAClB,CAACP,QAAQc,MAAM,GAAGN;AAAAA,OAEpBV,SACF;AAAA,IAAEC,yCAEF,MAAA;AAAA,MAAID,WAAWE,QAAQe;AAAAA,MAAMpB;AAAAA,MAAQqB,SAASA,MAAM;AAAA,MAAC;AAAA,MAAEjB;AAAAA,IAAAA,CAEnD;AAAA,EAAA,CACD;AAET;;;"}
+{"version":3,"file":"Bar.cjs","sources":["../../../../../../src/components/Header/Navigation/MenuBar/Bar.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\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?: string;\n  classes?: HvHeaderMenuBarClasses;\n}\n\nexport const Bar = ({\n  id,\n  data = [],\n  type = \"menubar\",\n  className,\n  children,\n  classes: classesProp,\n}: BarProps) => {\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":["Bar","id","data","type","className","children","classes","classesProp","cx","useClasses","selectionPath","useContext","SelectionContext","isMenu","isActive","filter","item","length","jsx","root","hidden","active","list"],"mappings":";;;;;;AAmBO,MAAMA,MAAMA,CAAC;AAAA,EAClBC;AAAAA,EACAC,OAAO,CAAE;AAAA,EACTC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AACD,MAAM;AACR,QAAA;AAAA,IAAED;AAAAA,IAASE;AAAAA,EAAAA,IAAOC,WAAAA,WAAWF,WAAW;AAExCG,QAAAA,gBAAgBC,iBAAWC,iBAAAA,gBAAgB;AAEjD,QAAMC,SAASV,SAAS;AAElBW,QAAAA,WACJD,UAAUX,KAAKa,OAAQC,CAAAA,SAASA,KAAKf,QAAOS,+CAAgB,GAAE,EAAEO,SAAS;AAGzE,SAAAC,2BAAA,IAAC,SACC,WAAWV,GACTF,QAAQa,MACRb,QAAQH,IAAI,GACZ;AAAA,IACE,CAACG,QAAQc,MAAM,GAAGP;AAAAA,IAClB,CAACP,QAAQe,MAAM,GAAGP;AAAAA,EACpB,GACAV,SACF,GAEA,UAACc,2BAAAA,IAAA,MAAA,EAAG,WAAWZ,QAAQgB,MAAM,IAAQ,SAAS,MAAM;AAAA,EAAA,GACjDjB,UACH,EACF,CAAA;AAEJ;;;"}

package/dist/cjs/components/Header/Navigation/MenuBar/MenuBar.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const Bar = require("./Bar.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
+const Bar = require("./Bar.cjs");
 const MenuItem = require("../MenuItem/MenuItem.cjs");
 const HvHeaderMenuBar = ({
   data = [],
@@ -11,18 +11,7 @@ const HvHeaderMenuBar = ({
   currentLevel,
   ...others
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Bar.Bar, {
-    data,
-    type,
-    ...others,
-    children: data.map((item) => /* @__PURE__ */ jsxRuntime.jsx(MenuItem.HvHeaderMenuItem, {
-      item,
-      type,
-      onClick,
-      levels,
-      currentLevel
-    }, item.id))
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(Bar.Bar, { data, type, ...others, children: data.map((item) => /* @__PURE__ */ jsxRuntime.jsx(MenuItem.HvHeaderMenuItem, { item, type, onClick, levels, currentLevel }, item.id)) });
 };
 exports.HvHeaderMenuBar = HvHeaderMenuBar;
 //# sourceMappingURL=MenuBar.cjs.map

package/dist/cjs/components/Header/Navigation/MenuBar/MenuBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MenuBar.cjs","sources":["../../../../../../src/components/Header/Navigation/MenuBar/MenuBar.tsx"],"sourcesContent":["import { MouseEvent } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { HvHeaderMenuItem } from \"../MenuItem\";\nimport { HvHeaderNavigationItemProp } from \"../useSelectionPath\";\nimport { Bar } from \"./Bar\";\n\nexport interface HvHeaderMenuBarProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  data: HvHeaderNavigationItemProp[];\n  type: string;\n  onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n  levels: number;\n  currentLevel: number;\n}\n\nexport const HvHeaderMenuBar = ({\n  data = [],\n  onClick,\n  type = \"menubar\",\n  levels,\n  currentLevel,\n  ...others\n}: HvHeaderMenuBarProps) => {\n  return (\n    <Bar data={data} type={type} {...others}>\n      {data.map((item: HvHeaderNavigationItemProp) => (\n        <HvHeaderMenuItem\n          key={item.id}\n          item={item}\n          type={type}\n          onClick={onClick}\n          levels={levels}\n          currentLevel={currentLevel}\n        />\n      ))}\n    </Bar>\n  );\n};\n"],"names":["HvHeaderMenuBar","data","onClick","type","levels","currentLevel","others","Bar","children","map","item","HvHeaderMenuItem","id"],"mappings":";;;;;AAiBO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC,OAAO,CAAE;AAAA,EACTC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACiB,MAAM;AAC1B,wCACGC,IAAAA,KAAG;AAAA,IAACN;AAAAA,IAAYE;AAAAA,IAAW,GAAKG;AAAAA,IAAME,UACpCP,KAAKQ,IAAI,CAACC,wCACRC,SAAAA,kBAAgB;AAAA,MAEfD;AAAAA,MACAP;AAAAA,MACAD;AAAAA,MACAE;AAAAA,MACAC;AAAAA,IAAAA,GALKK,KAAKE,EAMX,CACF;AAAA,EAAA,CACE;AAET;;"}
+{"version":3,"file":"MenuBar.cjs","sources":["../../../../../../src/components/Header/Navigation/MenuBar/MenuBar.tsx"],"sourcesContent":["import { MouseEvent } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { HvHeaderMenuItem } from \"../MenuItem\";\nimport { HvHeaderNavigationItemProp } from \"../useSelectionPath\";\nimport { Bar } from \"./Bar\";\n\nexport interface HvHeaderMenuBarProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  data: HvHeaderNavigationItemProp[];\n  type: string;\n  onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n  levels: number;\n  currentLevel: number;\n}\n\nexport const HvHeaderMenuBar = ({\n  data = [],\n  onClick,\n  type = \"menubar\",\n  levels,\n  currentLevel,\n  ...others\n}: HvHeaderMenuBarProps) => {\n  return (\n    <Bar data={data} type={type} {...others}>\n      {data.map((item: HvHeaderNavigationItemProp) => (\n        <HvHeaderMenuItem\n          key={item.id}\n          item={item}\n          type={type}\n          onClick={onClick}\n          levels={levels}\n          currentLevel={currentLevel}\n        />\n      ))}\n    </Bar>\n  );\n};\n"],"names":["HvHeaderMenuBar","data","onClick","type","levels","currentLevel","others","jsx","Bar","map","item","HvHeaderMenuItem","id"],"mappings":";;;;;AAiBO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC,OAAO,CAAE;AAAA,EACTC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACiB,MAAM;AAExB,SAAAC,+BAACC,IAAAA,OAAI,MAAY,MAAY,GAAIF,QAC9BL,UAAAA,KAAKQ,IAAI,CAACC,wCACRC,SAAAA,kBAEC,EAAA,MACA,MACA,SACA,QACA,gBALKD,KAAKE,EAKiB,CAE9B,EACH,CAAA;AAEJ;;"}

package/dist/cjs/components/Header/Navigation/MenuItem/MenuItem.cjs

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const keyboardUtils = require("../../../../utils/keyboardUtils.cjs");
 const FocusContext = require("../utils/FocusContext.cjs");
 const SelectionContext = require("../utils/SelectionContext.cjs");
 const MenuItem_styles = require("./MenuItem.styles.cjs");
 const Bar = require("../MenuBar/Bar.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Typography = require("../../../Typography/Typography.cjs");
 const traverseItem = (node) => {
   var _a;
@@ -76,12 +76,7 @@ const HvHeaderMenuItem = ({
     onKeyDown: actionHandler,
     onFocus: handleFocus
   };
-  const label = /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
-    component: "span",
-    variant: isSelected ? "label" : "body",
-    "data-text": item.label,
-    children: item.label
-  });
+  const label = /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "span", variant: isSelected ? "label" : "body", "data-text": item.label, children: item.label });
   let itemHref = item == null ? void 0 : item.href;
   let itemTarget = item == null ? void 0 : item.target;
   if ((item == null ? void 0 : item.href) == null) {
@@ -92,43 +87,18 @@ const HvHeaderMenuItem = ({
     itemHref = href;
     itemTarget = target;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("li", {
-    id,
-    className: cx(classes.root, {
-      [classes.menu]: isMenu,
-      [classes.menubar]: !isMenu,
-      [classes.selected]: !!isSelected
-    }, className),
-    children: [itemHref ? /* @__PURE__ */ jsxRuntime.jsx("a", {
-      className: classes.link,
-      href: itemHref,
-      target: itemTarget,
-      ...itemProps,
-      "aria-current": isCurrent,
-      children: label
-    }) : (
+  return /* @__PURE__ */ jsxRuntime.jsxs("li", { id, className: cx(classes.root, {
+    [classes.menu]: isMenu,
+    [classes.menubar]: !isMenu,
+    [classes.selected]: !!isSelected
+  }, className), children: [
+    itemHref ? /* @__PURE__ */ jsxRuntime.jsx("a", { className: classes.link, href: itemHref, target: itemTarget, ...itemProps, "aria-current": isCurrent, children: label }) : (
       // keeping this code path for backwards compatibility, but
       // shouldn't really be used as it's not accessible
-      /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: classes.button,
-        role: "button",
-        ...itemProps,
-        tabIndex: 0,
-        "aria-current": isCurrent,
-        children: label
-      })
-    ), hasSubLevel && currentLevel < levels && currentLevel < 2 && /* @__PURE__ */ jsxRuntime.jsx(Bar.Bar, {
-      data,
-      type: "menu",
-      children: data.map((itm) => /* @__PURE__ */ jsxRuntime.jsx(HvHeaderMenuItem, {
-        item: itm,
-        type: "menu",
-        onClick,
-        levels,
-        currentLevel: currentLevel + 1
-      }, itm.id))
-    })]
-  }, item.label);
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.button, role: "button", ...itemProps, tabIndex: 0, "aria-current": isCurrent, children: label })
+    ),
+    hasSubLevel && currentLevel < levels && currentLevel < 2 && /* @__PURE__ */ jsxRuntime.jsx(Bar.Bar, { data, type: "menu", children: data.map((itm) => /* @__PURE__ */ jsxRuntime.jsx(HvHeaderMenuItem, { item: itm, type: "menu", onClick, levels, currentLevel: currentLevel + 1 }, itm.id)) })
+  ] }, item.label);
 };
 exports.headerMenuItemClasses = MenuItem_styles.staticClasses;
 exports.HvHeaderMenuItem = HvHeaderMenuItem;

package/dist/cjs/components/Header/Navigation/MenuItem/MenuItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.cjs","sources":["../../../../../../src/components/Header/Navigation/MenuItem/MenuItem.tsx"],"sourcesContent":["import React, { MouseEvent, useContext } from \"react\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { FocusContext } from \"../utils/FocusContext\";\nimport { SelectionContext } from \"../utils/SelectionContext\";\nimport { useClasses, staticClasses } from \"./MenuItem.styles\";\nimport { HvHeaderNavigationItemProp } from \"../useSelectionPath\";\nimport { Bar } from \"../MenuBar/Bar\";\n\nexport { staticClasses as headerMenuItemClasses };\n\nexport type HvHeaderMenuItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderMenuItemProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  item: HvHeaderNavigationItemProp;\n  type?: string;\n  onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n  levels: number;\n  currentLevel: number;\n  classes?: HvHeaderMenuItemClasses;\n}\n\n// Traverse the tree of items and return the first href it finds\nconst traverseItem = (node: HvHeaderNavigationItemProp) => {\n  let href;\n  let target;\n\n  if (node?.href) {\n    href = node?.href;\n    target = node?.target;\n  } else if (node?.data != null && node?.data?.length > 0) {\n    let i = 0;\n    while (href == null && i < node.data.length) {\n      const childNavItem = traverseItem(node?.data[i]);\n      if (childNavItem?.href != null) {\n        href = childNavItem?.href;\n        target = childNavItem?.target;\n        break;\n      }\n\n      i += 1;\n    }\n  }\n\n  return { href, target };\n};\n\nexport const HvHeaderMenuItem = ({\n  id,\n  item,\n  type,\n  onClick,\n  levels,\n  currentLevel,\n  classes: classesProp,\n  className,\n}: HvHeaderMenuItemProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const selectionPath = useContext(SelectionContext);\n\n  const { dispatch } = useContext(FocusContext);\n\n  const { data } = item;\n\n  const hasSubLevel = data && data.length;\n\n  const isMenu = type === \"menu\";\n\n  const isSelected = selectionPath?.[isMenu ? 1 : 0] === item.id;\n\n  // true: if the item is part of the selection path but is not the current page the user is seeing, i.e has more sub levels\n  // page: used when the selected item is actually the current page the user is seeing\n  const isCurrent = isSelected ? (hasSubLevel ? true : \"page\") : undefined;\n\n  const actionHandler = (event: any) => {\n    if (\n      event.type === \"click\" ||\n      isKey(event, \"Enter\") ||\n      isKey(event, \"Space\")\n    ) {\n      if (event.type === \"click\") {\n        event.currentTarget.blur();\n      }\n\n      onClick?.(event, item);\n    }\n  };\n\n  const handleFocus = (event: React.FocusEvent) => {\n    dispatch?.({ type: \"setItemFocused\", itemFocused: event.currentTarget });\n  };\n\n  const itemProps = {\n    onClick: actionHandler,\n    onKeyDown: actionHandler,\n    onFocus: handleFocus,\n  };\n\n  const label = (\n    <HvTypography\n      component=\"span\"\n      variant={isSelected ? \"label\" : \"body\"}\n      data-text={item.label}\n    >\n      {item.label}\n    </HvTypography>\n  );\n\n  let itemHref = item?.href;\n  let itemTarget = item?.target;\n\n  // apps should configure the href even on parent items without content\n  // so the fallback logic is theirs, but if not we'll do our best to find a link\n  if (item?.href == null) {\n    const { href, target } = traverseItem(item);\n    itemHref = href;\n    itemTarget = target;\n  }\n\n  return (\n    <li\n      id={id}\n      key={item.label}\n      className={cx(\n        classes.root,\n        {\n          [classes.menu]: isMenu,\n          [classes.menubar]: !isMenu,\n          [classes.selected]: !!isSelected,\n        },\n        className\n      )}\n    >\n      {itemHref ? (\n        <a\n          className={classes.link}\n          href={itemHref}\n          target={itemTarget}\n          {...itemProps}\n          aria-current={isCurrent}\n        >\n          {label}\n        </a>\n      ) : (\n        // keeping this code path for backwards compatibility, but\n        // shouldn't really be used as it's not accessible\n        <div\n          className={classes.button}\n          role=\"button\"\n          {...itemProps}\n          tabIndex={0}\n          aria-current={isCurrent}\n        >\n          {label}\n        </div>\n      )}\n      {/* Limits levels to no more than 2. More than that is not expected and not in DS. */}\n      {hasSubLevel && currentLevel < levels && currentLevel < 2 && (\n        <Bar data={data} type=\"menu\">\n          {data.map((itm: HvHeaderNavigationItemProp) => (\n            <HvHeaderMenuItem\n              key={itm.id}\n              item={itm}\n              type=\"menu\"\n              onClick={onClick}\n              levels={levels}\n              currentLevel={currentLevel + 1}\n            />\n          ))}\n        </Bar>\n      )}\n    </li>\n  );\n};\n"],"names":["traverseItem","node","href","target","data","length","i","childNavItem","HvHeaderMenuItem","id","item","type","onClick","levels","currentLevel","classes","classesProp","className","cx","useClasses","selectionPath","useContext","SelectionContext","dispatch","FocusContext","hasSubLevel","isMenu","isSelected","isCurrent","undefined","actionHandler","event","isKey","currentTarget","blur","handleFocus","itemFocused","itemProps","onKeyDown","onFocus","label","HvTypography","component","variant","children","itemHref","itemTarget","root","menu","menubar","selected","_jsx","link","button","role","tabIndex","Bar","map","itm"],"mappings":"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"}
+{"version":3,"file":"MenuItem.cjs","sources":["../../../../../../src/components/Header/Navigation/MenuItem/MenuItem.tsx"],"sourcesContent":["import React, { MouseEvent, useContext } from \"react\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { FocusContext } from \"../utils/FocusContext\";\nimport { SelectionContext } from \"../utils/SelectionContext\";\nimport { useClasses, staticClasses } from \"./MenuItem.styles\";\nimport { HvHeaderNavigationItemProp } from \"../useSelectionPath\";\nimport { Bar } from \"../MenuBar/Bar\";\n\nexport { staticClasses as headerMenuItemClasses };\n\nexport type HvHeaderMenuItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderMenuItemProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  item: HvHeaderNavigationItemProp;\n  type?: string;\n  onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n  levels: number;\n  currentLevel: number;\n  classes?: HvHeaderMenuItemClasses;\n}\n\n// Traverse the tree of items and return the first href it finds\nconst traverseItem = (node: HvHeaderNavigationItemProp) => {\n  let href;\n  let target;\n\n  if (node?.href) {\n    href = node?.href;\n    target = node?.target;\n  } else if (node?.data != null && node?.data?.length > 0) {\n    let i = 0;\n    while (href == null && i < node.data.length) {\n      const childNavItem = traverseItem(node?.data[i]);\n      if (childNavItem?.href != null) {\n        href = childNavItem?.href;\n        target = childNavItem?.target;\n        break;\n      }\n\n      i += 1;\n    }\n  }\n\n  return { href, target };\n};\n\nexport const HvHeaderMenuItem = ({\n  id,\n  item,\n  type,\n  onClick,\n  levels,\n  currentLevel,\n  classes: classesProp,\n  className,\n}: HvHeaderMenuItemProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const selectionPath = useContext(SelectionContext);\n\n  const { dispatch } = useContext(FocusContext);\n\n  const { data } = item;\n\n  const hasSubLevel = data && data.length;\n\n  const isMenu = type === \"menu\";\n\n  const isSelected = selectionPath?.[isMenu ? 1 : 0] === item.id;\n\n  // true: if the item is part of the selection path but is not the current page the user is seeing, i.e has more sub levels\n  // page: used when the selected item is actually the current page the user is seeing\n  const isCurrent = isSelected ? (hasSubLevel ? true : \"page\") : undefined;\n\n  const actionHandler = (event: any) => {\n    if (\n      event.type === \"click\" ||\n      isKey(event, \"Enter\") ||\n      isKey(event, \"Space\")\n    ) {\n      if (event.type === \"click\") {\n        event.currentTarget.blur();\n      }\n\n      onClick?.(event, item);\n    }\n  };\n\n  const handleFocus = (event: React.FocusEvent) => {\n    dispatch?.({ type: \"setItemFocused\", itemFocused: event.currentTarget });\n  };\n\n  const itemProps = {\n    onClick: actionHandler,\n    onKeyDown: actionHandler,\n    onFocus: handleFocus,\n  };\n\n  const label = (\n    <HvTypography\n      component=\"span\"\n      variant={isSelected ? \"label\" : \"body\"}\n      data-text={item.label}\n    >\n      {item.label}\n    </HvTypography>\n  );\n\n  let itemHref = item?.href;\n  let itemTarget = item?.target;\n\n  // apps should configure the href even on parent items without content\n  // so the fallback logic is theirs, but if not we'll do our best to find a link\n  if (item?.href == null) {\n    const { href, target } = traverseItem(item);\n    itemHref = href;\n    itemTarget = target;\n  }\n\n  return (\n    <li\n      id={id}\n      key={item.label}\n      className={cx(\n        classes.root,\n        {\n          [classes.menu]: isMenu,\n          [classes.menubar]: !isMenu,\n          [classes.selected]: !!isSelected,\n        },\n        className\n      )}\n    >\n      {itemHref ? (\n        <a\n          className={classes.link}\n          href={itemHref}\n          target={itemTarget}\n          {...itemProps}\n          aria-current={isCurrent}\n        >\n          {label}\n        </a>\n      ) : (\n        // keeping this code path for backwards compatibility, but\n        // shouldn't really be used as it's not accessible\n        <div\n          className={classes.button}\n          role=\"button\"\n          {...itemProps}\n          tabIndex={0}\n          aria-current={isCurrent}\n        >\n          {label}\n        </div>\n      )}\n      {/* Limits levels to no more than 2. More than that is not expected and not in DS. */}\n      {hasSubLevel && currentLevel < levels && currentLevel < 2 && (\n        <Bar data={data} type=\"menu\">\n          {data.map((itm: HvHeaderNavigationItemProp) => (\n            <HvHeaderMenuItem\n              key={itm.id}\n              item={itm}\n              type=\"menu\"\n              onClick={onClick}\n              levels={levels}\n              currentLevel={currentLevel + 1}\n            />\n          ))}\n        </Bar>\n      )}\n    </li>\n  );\n};\n"],"names":["traverseItem","node","href","target","data","length","i","childNavItem","HvHeaderMenuItem","id","item","type","onClick","levels","currentLevel","classes","classesProp","className","cx","useClasses","selectionPath","useContext","SelectionContext","dispatch","FocusContext","hasSubLevel","isMenu","isSelected","isCurrent","undefined","actionHandler","event","isKey","currentTarget","blur","handleFocus","itemFocused","itemProps","onKeyDown","onFocus","label","jsx","HvTypography","itemHref","itemTarget","root","menu","menubar","selected","link","button","Bar","map","itm"],"mappings":"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"}

package/dist/cjs/components/Header/Navigation/Navigation.cjs

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const useDefaultProps = require("../../../hooks/useDefaultProps.cjs");
 const Navigation_styles = require("./Navigation.styles.cjs");
 const FocusContext = require("./utils/FocusContext.cjs");
 const SelectionContext = require("./utils/SelectionContext.cjs");
 const useSelectionPath = require("./useSelectionPath.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const MenuBar = require("./MenuBar/MenuBar.cjs");
 const HvHeaderNavigation = (props) => {
   const {
@@ -26,22 +26,7 @@ const HvHeaderNavigation = (props) => {
     event.preventDefault();
     onClick == null ? void 0 : onClick(event, selection);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(SelectionContext.SelectionContext.Provider, {
-    value: selectionPath,
-    children: /* @__PURE__ */ jsxRuntime.jsx(FocusContext.FocusProvider, {
-      children: /* @__PURE__ */ jsxRuntime.jsx("nav", {
-        className: cx(classes.root, className),
-        ...others,
-        children: /* @__PURE__ */ jsxRuntime.jsx(MenuBar.HvHeaderMenuBar, {
-          data,
-          type: "menubar",
-          onClick: handleClick,
-          levels,
-          currentLevel: 1
-        })
-      })
-    })
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectionContext.SelectionContext.Provider, { value: selectionPath, children: /* @__PURE__ */ jsxRuntime.jsx(FocusContext.FocusProvider, { children: /* @__PURE__ */ jsxRuntime.jsx("nav", { className: cx(classes.root, className), ...others, children: /* @__PURE__ */ jsxRuntime.jsx(MenuBar.HvHeaderMenuBar, { data, type: "menubar", onClick: handleClick, levels, currentLevel: 1 }) }) }) });
 };
 exports.headerNavigationClasses = Navigation_styles.staticClasses;
 exports.HvHeaderNavigation = HvHeaderNavigation;

package/dist/cjs/components/Header/Navigation/Navigation.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.cjs","sources":["../../../../../src/components/Header/Navigation/Navigation.tsx"],"sourcesContent":["import { MouseEvent } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { HvHeaderMenuBar, HvHeaderMenuBarProps } from \"./MenuBar\";\nimport { staticClasses, useClasses } from \"./Navigation.styles\";\nimport { FocusProvider } from \"./utils/FocusContext\";\nimport { SelectionContext } from \"./utils/SelectionContext\";\nimport {\n  HvHeaderNavigationItemProp,\n  useSelectionPath,\n} from \"./useSelectionPath\";\n\nexport { staticClasses as headerNavigationClasses };\n\nexport type HvHeaderNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderNavigationProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  data: HvHeaderNavigationItemProp[];\n  selected?: string;\n  onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n  classes?: HvHeaderNavigationClasses;\n  /**\n   * The number of levels to show: the first level (1) or the first and second level (2).\n   *\n   * Defaults to `2`.\n   * */\n  levels?: 1 | 2;\n}\n\nexport const HvHeaderNavigation = (props: HvHeaderNavigationProps) => {\n  const {\n    data,\n    selected,\n    onClick,\n    className,\n    classes: classesProp,\n    levels = 2,\n    ...others\n  } = useDefaultProps(\"HvHeaderNavigation\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const selectionPath = useSelectionPath(data, selected);\n\n  const handleClick: HvHeaderMenuBarProps[\"onClick\"] = (\n    event: MouseEvent,\n    selection: HvHeaderNavigationItemProp\n  ) => {\n    event.preventDefault();\n\n    onClick?.(event, selection);\n  };\n\n  return (\n    <SelectionContext.Provider value={selectionPath}>\n      <FocusProvider>\n        <nav className={cx(classes.root, className)} {...others}>\n          <HvHeaderMenuBar\n            data={data}\n            type=\"menubar\"\n            onClick={handleClick}\n            levels={levels}\n            currentLevel={1}\n          />\n        </nav>\n      </FocusProvider>\n    </SelectionContext.Provider>\n  );\n};\n"],"names":["HvHeaderNavigation","props","data","selected","onClick","className","classes","classesProp","levels","others","useDefaultProps","cx","useClasses","selectionPath","useSelectionPath","handleClick","event","selection","preventDefault","_jsx","SelectionContext","Provider","value","children","FocusProvider","root","HvHeaderMenuBar","type","currentLevel"],"mappings":";;;;;;;;;AAiCaA,MAAAA,qBAAqBA,CAACC,UAAmC;AAC9D,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC,SAAS;AAAA,IACT,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,sBAAsBT,KAAK;AAEzC,QAAA;AAAA,IAAEK;AAAAA,IAASK;AAAAA,EAAAA,IAAOC,kBAAAA,WAAWL,WAAW;AAExCM,QAAAA,gBAAgBC,iBAAAA,iBAAiBZ,MAAMC,QAAQ;AAE/CY,QAAAA,cAA+CA,CACnDC,OACAC,cACG;AACHD,UAAME,eAAe;AAErBd,uCAAUY,OAAOC;AAAAA,EAAS;AAI1BE,SAAAA,2BAAAA,IAACC,kCAAiBC,UAAQ;AAAA,IAACC,OAAOT;AAAAA,IAAcU,yCAC7CC,4BAAa;AAAA,MAAAD,yCACZ,OAAA;AAAA,QAAKlB,WAAWM,GAAGL,QAAQmB,MAAMpB,SAAS;AAAA,QAAE,GAAKI;AAAAA,QAAMc,yCACpDG,yBAAe;AAAA,UACdxB;AAAAA,UACAyB,MAAK;AAAA,UACLvB,SAASW;AAAAA,UACTP;AAAAA,UACAoB,cAAc;AAAA,QAAA,CACf;AAAA,MAAA,CACE;AAAA,IAAA,CACQ;AAAA,EAAA,CACU;AAE/B;;;"}
+{"version":3,"file":"Navigation.cjs","sources":["../../../../../src/components/Header/Navigation/Navigation.tsx"],"sourcesContent":["import { MouseEvent } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { HvHeaderMenuBar, HvHeaderMenuBarProps } from \"./MenuBar\";\nimport { staticClasses, useClasses } from \"./Navigation.styles\";\nimport { FocusProvider } from \"./utils/FocusContext\";\nimport { SelectionContext } from \"./utils/SelectionContext\";\nimport {\n  HvHeaderNavigationItemProp,\n  useSelectionPath,\n} from \"./useSelectionPath\";\n\nexport { staticClasses as headerNavigationClasses };\n\nexport type HvHeaderNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvHeaderNavigationProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  data: HvHeaderNavigationItemProp[];\n  selected?: string;\n  onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n  classes?: HvHeaderNavigationClasses;\n  /**\n   * The number of levels to show: the first level (1) or the first and second level (2).\n   *\n   * Defaults to `2`.\n   * */\n  levels?: 1 | 2;\n}\n\nexport const HvHeaderNavigation = (props: HvHeaderNavigationProps) => {\n  const {\n    data,\n    selected,\n    onClick,\n    className,\n    classes: classesProp,\n    levels = 2,\n    ...others\n  } = useDefaultProps(\"HvHeaderNavigation\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const selectionPath = useSelectionPath(data, selected);\n\n  const handleClick: HvHeaderMenuBarProps[\"onClick\"] = (\n    event: MouseEvent,\n    selection: HvHeaderNavigationItemProp\n  ) => {\n    event.preventDefault();\n\n    onClick?.(event, selection);\n  };\n\n  return (\n    <SelectionContext.Provider value={selectionPath}>\n      <FocusProvider>\n        <nav className={cx(classes.root, className)} {...others}>\n          <HvHeaderMenuBar\n            data={data}\n            type=\"menubar\"\n            onClick={handleClick}\n            levels={levels}\n            currentLevel={1}\n          />\n        </nav>\n      </FocusProvider>\n    </SelectionContext.Provider>\n  );\n};\n"],"names":["HvHeaderNavigation","props","data","selected","onClick","className","classes","classesProp","levels","others","useDefaultProps","cx","useClasses","selectionPath","useSelectionPath","handleClick","event","selection","preventDefault","jsx","SelectionContext","FocusProvider","root","HvHeaderMenuBar"],"mappings":";;;;;;;;;AAiCaA,MAAAA,qBAAqBA,CAACC,UAAmC;AAC9D,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC,SAAS;AAAA,IACT,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,sBAAsBT,KAAK;AAEzC,QAAA;AAAA,IAAEK;AAAAA,IAASK;AAAAA,EAAAA,IAAOC,kBAAAA,WAAWL,WAAW;AAExCM,QAAAA,gBAAgBC,iBAAAA,iBAAiBZ,MAAMC,QAAQ;AAE/CY,QAAAA,cAA+CA,CACnDC,OACAC,cACG;AACHD,UAAME,eAAe;AAErBd,uCAAUY,OAAOC;AAAAA,EAAS;AAG5B,SACGE,2BAAAA,IAAAC,iBAAAA,iBAAiB,UAAjB,EAA0B,OAAOP,eAChC,UAACM,2BAAA,IAAAE,aAAA,eAAA,EACC,UAACF,2BAAAA,IAAA,OAAA,EAAI,WAAWR,GAAGL,QAAQgB,MAAMjB,SAAS,GAAG,GAAII,QAC/C,UAAAU,2BAAA,IAACI,QACC,iBAAA,EAAA,MACA,MAAK,WACL,SAASR,aACT,QACA,cAAc,EAAE,CAAA,GAEpB,GACF,EACF,CAAA;AAEJ;;;"}

package/dist/cjs/components/Header/Navigation/utils/FocusContext.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
 const reducer = (state, action) => {
   switch (action.type) {
     case "setItemFocused":
@@ -26,10 +26,7 @@ const FocusProvider = (props) => {
   const {
     children
   } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(FocusContext.Provider, {
-    value: contextValue,
-    children
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(FocusContext.Provider, { value: contextValue, children });
 };
 exports.FocusContext = FocusContext;
 exports.FocusProvider = FocusProvider;

package/dist/cjs/components/Header/Navigation/utils/FocusContext.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FocusContext.cjs","sources":["../../../../../../src/components/Header/Navigation/utils/FocusContext.tsx"],"sourcesContent":["import React, { createContext, useMemo, useReducer } from \"react\";\n\ninterface SetItemFocused {\n  type: \"setItemFocused\";\n  itemFocused: EventTarget & Element;\n}\n\nconst reducer = (state, action) => {\n  switch (action.type) {\n    case \"setItemFocused\":\n      return { itemFocused: action.itemFocused };\n    default:\n      return state;\n  }\n};\n\nconst initialState = { itemFocused: undefined, dispatch: undefined };\n\nexport const FocusContext = createContext<{\n  itemFocused?: EventTarget & Element;\n  dispatch?: React.Dispatch<SetItemFocused>;\n}>(initialState);\n\nexport const FocusProvider = (props) => {\n  const [state, dispatch] = useReducer(reducer, initialState);\n  const contextValue = useMemo(\n    () => ({ ...state, dispatch }),\n    [state, dispatch]\n  );\n  const { children } = props;\n\n  return (\n    <FocusContext.Provider value={contextValue}>\n      {children}\n    </FocusContext.Provider>\n  );\n};\n"],"names":["reducer","state","action","type","itemFocused","initialState","undefined","dispatch","FocusContext","createContext","FocusProvider","props","useReducer","contextValue","useMemo","children","_jsx","Provider","value"],"mappings":";;;;AAOA,MAAMA,UAAUA,CAACC,OAAOC,WAAW;AACjC,UAAQA,OAAOC,MAAI;AAAA,IACjB,KAAK;AACI,aAAA;AAAA,QAAEC,aAAaF,OAAOE;AAAAA,MAAAA;AAAAA,IAC/B;AACSH,aAAAA;AAAAA,EACX;AACF;AAEA,MAAMI,eAAe;AAAA,EAAED,aAAaE;AAAAA,EAAWC,UAAUD;AAAU;AAEtDE,MAAAA,eAAeC,oBAGzBJ,YAAY;AAER,MAAMK,gBAAiBC,CAAU,UAAA;AACtC,QAAM,CAACV,OAAOM,QAAQ,IAAIK,MAAAA,WAAWZ,SAASK,YAAY;AACpDQ,QAAAA,eAAeC,MAAAA,QACnB,OAAO;AAAA,IAAE,GAAGb;AAAAA,IAAOM;AAAAA,EACnB,IAAA,CAACN,OAAOM,QAAQ,CAClB;AACM,QAAA;AAAA,IAAEQ;AAAAA,EAAaJ,IAAAA;AAGnBK,SAAAA,2BAAAA,IAACR,aAAaS,UAAQ;AAAA,IAACC,OAAOL;AAAAA,IAAaE;AAAAA,EAAAA,CAEpB;AAE3B;;;"}
+{"version":3,"file":"FocusContext.cjs","sources":["../../../../../../src/components/Header/Navigation/utils/FocusContext.tsx"],"sourcesContent":["import React, { createContext, useMemo, useReducer } from \"react\";\n\ninterface SetItemFocused {\n  type: \"setItemFocused\";\n  itemFocused: EventTarget & Element;\n}\n\nconst reducer = (state, action) => {\n  switch (action.type) {\n    case \"setItemFocused\":\n      return { itemFocused: action.itemFocused };\n    default:\n      return state;\n  }\n};\n\nconst initialState = { itemFocused: undefined, dispatch: undefined };\n\nexport const FocusContext = createContext<{\n  itemFocused?: EventTarget & Element;\n  dispatch?: React.Dispatch<SetItemFocused>;\n}>(initialState);\n\nexport const FocusProvider = (props) => {\n  const [state, dispatch] = useReducer(reducer, initialState);\n  const contextValue = useMemo(\n    () => ({ ...state, dispatch }),\n    [state, dispatch]\n  );\n  const { children } = props;\n\n  return (\n    <FocusContext.Provider value={contextValue}>\n      {children}\n    </FocusContext.Provider>\n  );\n};\n"],"names":["reducer","state","action","type","itemFocused","initialState","undefined","dispatch","FocusContext","createContext","FocusProvider","props","useReducer","contextValue","useMemo","children"],"mappings":";;;;AAOA,MAAMA,UAAUA,CAACC,OAAOC,WAAW;AACjC,UAAQA,OAAOC,MAAI;AAAA,IACjB,KAAK;AACI,aAAA;AAAA,QAAEC,aAAaF,OAAOE;AAAAA,MAAAA;AAAAA,IAC/B;AACSH,aAAAA;AAAAA,EACX;AACF;AAEA,MAAMI,eAAe;AAAA,EAAED,aAAaE;AAAAA,EAAWC,UAAUD;AAAU;AAEtDE,MAAAA,eAAeC,oBAGzBJ,YAAY;AAER,MAAMK,gBAAiBC,CAAU,UAAA;AACtC,QAAM,CAACV,OAAOM,QAAQ,IAAIK,MAAAA,WAAWZ,SAASK,YAAY;AACpDQ,QAAAA,eAAeC,MAAAA,QACnB,OAAO;AAAA,IAAE,GAAGb;AAAAA,IAAOM;AAAAA,EACnB,IAAA,CAACN,OAAOM,QAAQ,CAClB;AACM,QAAA;AAAA,IAAEQ;AAAAA,EAAaJ,IAAAA;AAErB,wCACG,aAAa,UAAb,EAAsB,OAAOE,cAC3BE,SACH,CAAA;AAEJ;;;"}

package/dist/cjs/components/InlineEditor/InlineEditor.cjs

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
@@ -7,7 +8,6 @@ const useControlled = require("../../hooks/useControlled.cjs");
 const useTheme = require("../../hooks/useTheme.cjs");
 const keyboardUtils = require("../../utils/keyboardUtils.cjs");
 const InlineEditor_styles = require("./InlineEditor.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Button = require("../Button/Button.cjs");
 const Input = require("../Input/Input.cjs");
 const Typography = require("../Typography/Typography.cjs");
@@ -71,52 +71,22 @@ const HvInlineEditor = (props) => {
     setValue(val);
     onChange == null ? void 0 : onChange(event, val);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: cx(classes.root, className),
-    children: editMode ? /* @__PURE__ */ jsxRuntime.jsx(InputComponent, {
-      inputRef,
-      classes: {
-        root: classes.inputRoot,
-        input: classes.input,
-        inputBorderContainer: classes.inputBorderContainer
-      },
-      inputProps: {
-        style: {
-          ...typographyStyles,
-          height: InputComponent === Input.HvInput ? lineHeight : void 0
-        }
-      },
-      value,
-      onBlur: handleBlur,
-      onChange: handleChange,
-      onKeyDown: handleKeyDown,
-      ...others
-    }) : /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
-      variant: "secondaryGhost",
-      overrideIconColors: false,
-      endIcon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Edit, {
-        color: "secondary_60",
-        role: "none",
-        className: cx(classes.icon, {
-          [classes.iconVisible]: showIcon
-        })
-      }),
-      className: cx(classes.button, {
-        [classes.largeText]: parseInt(lineHeight, 10) >= 28
-      }),
-      onClick: handleClick,
-      ...buttonProps,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
-        variant,
-        noWrap: true,
-        className: cx(classes.text, {
-          [classes.textEmpty]: !value
-        }),
-        ...typographyProps,
-        children: value || placeholder
-      })
-    })
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.root, className), children: editMode ? /* @__PURE__ */ jsxRuntime.jsx(InputComponent, { inputRef, classes: {
+    root: classes.inputRoot,
+    input: classes.input,
+    inputBorderContainer: classes.inputBorderContainer
+  }, inputProps: {
+    style: {
+      ...typographyStyles,
+      height: InputComponent === Input.HvInput ? lineHeight : void 0
+    }
+  }, value, onBlur: handleBlur, onChange: handleChange, onKeyDown: handleKeyDown, ...others }) : /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { variant: "secondaryGhost", overrideIconColors: false, endIcon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Edit, { color: "secondary_60", role: "none", className: cx(classes.icon, {
+    [classes.iconVisible]: showIcon
+  }) }), className: cx(classes.button, {
+    [classes.largeText]: parseInt(lineHeight, 10) >= 28
+  }), onClick: handleClick, ...buttonProps, children: /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant, noWrap: true, className: cx(classes.text, {
+    [classes.textEmpty]: !value
+  }), ...typographyProps, children: value || placeholder }) }) });
 };
 exports.inlineEditorClasses = InlineEditor_styles.staticClasses;
 exports.HvInlineEditor = HvInlineEditor;