@hitachivantara/uikit-react-core 5.39.1 → 5.39.3

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

@@ -38,65 +38,65 @@ const item = {
     }
   }
 };
-const {
-  staticClasses,
-  useClasses
-} = classes.createClasses("HvHeader-MenuItem", {
-  root: {
-    display: "inline",
-    "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+const { staticClasses, useClasses } = classes.createClasses(
+  "HvHeader-MenuItem",
+  {
+    root: {
+      display: "inline",
+      "&:hover": {
+        backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+      },
+      "&:focus-within": {
+        backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+      }
     },
-    "&:focus-within": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
-    }
-  },
-  menu: {
-    marginTop: 0,
-    paddingBottom: "4px",
-    paddingTop: "4px",
-    height: "100%",
-    borderTop: "none",
-    borderBottom: `4px solid ${uikitStyles.theme.colors.atmo2}`
-  },
-  menubar: {
-    marginTop: "0px",
-    paddingBottom: "4px",
-    paddingTop: "4px",
-    height: "100%",
-    borderTop: `0px solid ${uikitStyles.theme.colors.atmo1}`,
-    borderBottom: `${"4px"} solid ${uikitStyles.theme.colors.atmo1}`
-  },
-  selected: {
-    "&$menu": {
+    menu: {
       marginTop: 0,
-      paddingBottom: 0,
+      paddingBottom: "4px",
+      paddingTop: "4px",
+      height: "100%",
       borderTop: "none",
-      borderBottom: `4px solid ${uikitStyles.theme.colors.secondary}`,
+      borderBottom: `4px solid ${uikitStyles.theme.colors.atmo2}`
+    },
+    menubar: {
+      marginTop: "0px",
+      paddingBottom: "4px",
       paddingTop: "4px",
       height: "100%",
-      "& > * > span": {
-        color: uikitStyles.theme.colors.secondary
+      borderTop: `0px solid ${uikitStyles.theme.colors.atmo1}`,
+      borderBottom: `${"4px"} solid ${uikitStyles.theme.colors.atmo1}`
+    },
+    selected: {
+      "&$menu": {
+        marginTop: 0,
+        paddingBottom: 0,
+        borderTop: "none",
+        borderBottom: `4px solid ${uikitStyles.theme.colors.secondary}`,
+        paddingTop: "4px",
+        height: "100%",
+        "& > * > span": {
+          color: uikitStyles.theme.colors.secondary
+        }
+      },
+      "&$menubar": {
+        marginTop: 0,
+        paddingBottom: 0,
+        borderTop: "none",
+        borderBottom: `4px solid ${uikitStyles.theme.colors.secondary}`,
+        paddingTop: "4px",
+        height: "100%"
       }
     },
-    "&$menubar": {
-      marginTop: 0,
-      paddingBottom: 0,
-      borderTop: "none",
-      borderBottom: `4px solid ${uikitStyles.theme.colors.secondary}`,
-      paddingTop: "4px",
-      height: "100%"
+    link: {
+      textDecoration: "none",
+      ...item
+    },
+    button: {
+      color: "inherit",
+      ...item
     }
-  },
-  link: {
-    textDecoration: "none",
-    ...item
-  },
-  button: {
-    color: "inherit",
-    ...item
   }
-});
+);
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;
 //# sourceMappingURL=MenuItem.styles.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.styles.cjs","sources":["../../../../../../src/components/Header/Navigation/MenuItem/MenuItem.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport type { CSSInterpolation } from \"@emotion/serialize\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nconst item: CSSInterpolation = {\n  border: \"none\",\n  cursor: \"pointer\",\n  padding: `${theme.space.xs} ${theme.space.sm}`,\n  height: \"100%\",\n  display: \"flex\",\n  alignItems: \"center\",\n  \"&:active\": {\n    outline: \"none\",\n  },\n  \"&:focus\": {\n    outline: \"none\",\n  },\n  \"&:focus-visible\": {\n    ...outlineStyles,\n  },\n  \"& span\": {\n    display: \"inline-flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n  },\n  \"& span::after\": {\n    content: \"attr(data-text)\",\n    height: 0,\n    visibility: \"hidden\",\n    overflow: \"hidden\",\n    userSelect: \"none\",\n    pointerEvents: \"none\",\n    fontWeight: theme.fontWeights.semibold,\n\n    \"@media speech\": {\n      display: \"none\",\n    },\n  },\n};\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvHeader-MenuItem\",\n  {\n    root: {\n      display: \"inline\",\n      \"&:hover\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n      },\n      \"&:focus-within\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n      },\n    },\n    menu: {\n      marginTop: 0,\n      paddingBottom: \"4px\",\n      paddingTop: \"4px\",\n      height: \"100%\",\n      borderTop: \"none\",\n      borderBottom: `4px solid ${theme.colors.atmo2}`,\n    },\n    menubar: {\n      marginTop: \"0px\",\n      paddingBottom: \"4px\",\n      paddingTop: \"4px\",\n      height: \"100%\",\n      borderTop: `0px solid ${theme.colors.atmo1}`,\n      borderBottom: `${\"4px\"} solid ${theme.colors.atmo1}`,\n    },\n    selected: {\n      \"&$menu\": {\n        marginTop: 0,\n        paddingBottom: 0,\n        borderTop: \"none\",\n        borderBottom: `4px solid ${theme.colors.secondary}`,\n        paddingTop: \"4px\",\n        height: \"100%\",\n        \"& > * > span\": {\n          color: theme.colors.secondary,\n        },\n      },\n      \"&$menubar\": {\n        marginTop: 0,\n        paddingBottom: 0,\n        borderTop: \"none\",\n        borderBottom: `4px solid ${theme.colors.secondary}`,\n        paddingTop: \"4px\",\n        height: \"100%\",\n      },\n    },\n    link: {\n      textDecoration: \"none\",\n      ...item,\n    },\n    button: {\n      color: \"inherit\",\n      ...item,\n    },\n  }\n);\n"],"names":["item","border","cursor","padding","theme","space","xs","sm","height","display","alignItems","outline","outlineStyles","flexDirection","justifyContent","content","visibility","overflow","userSelect","pointerEvents","fontWeight","fontWeights","semibold","staticClasses","useClasses","createClasses","root","backgroundColor","colors","containerBackgroundHover","menu","marginTop","paddingBottom","paddingTop","borderTop","borderBottom","atmo2","menubar","atmo1","selected","secondary","color","link","textDecoration","button"],"mappings":";;;;;AAOA,MAAMA,OAAyB;AAAA,EAC7BC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,SAAU,GAAEC,YAAMC,MAAAA,MAAMC,EAAG,IAAGF,YAAAA,MAAMC,MAAME,EAAG;AAAA,EAC7CC,QAAQ;AAAA,EACRC,SAAS;AAAA,EACTC,YAAY;AAAA,EACZ,YAAY;AAAA,IACVC,SAAS;AAAA,EACX;AAAA,EACA,WAAW;AAAA,IACTA,SAAS;AAAA,EACX;AAAA,EACA,mBAAmB;AAAA,IACjB,GAAGC,WAAAA;AAAAA,EACL;AAAA,EACA,UAAU;AAAA,IACRH,SAAS;AAAA,IACTI,eAAe;AAAA,IACfH,YAAY;AAAA,IACZI,gBAAgB;AAAA,EAClB;AAAA,EACA,iBAAiB;AAAA,IACfC,SAAS;AAAA,IACTP,QAAQ;AAAA,IACRQ,YAAY;AAAA,IACZC,UAAU;AAAA,IACVC,YAAY;AAAA,IACZC,eAAe;AAAA,IACfC,YAAYhB,YAAAA,MAAMiB,YAAYC;AAAAA,IAE9B,iBAAiB;AAAA,MACfb,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAEa,MAAA;AAAA,EAAEc;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAC3C,qBACA;AAAA,EACEC,MAAM;AAAA,IACJjB,SAAS;AAAA,IACT,WAAW;AAAA,MACTkB,iBAAiBvB,YAAAA,MAAMwB,OAAOC;AAAAA,IAChC;AAAA,IACA,kBAAkB;AAAA,MAChBF,iBAAiBvB,YAAAA,MAAMwB,OAAOC;AAAAA,IAChC;AAAA,EACF;AAAA,EACAC,MAAM;AAAA,IACJC,WAAW;AAAA,IACXC,eAAe;AAAA,IACfC,YAAY;AAAA,IACZzB,QAAQ;AAAA,IACR0B,WAAW;AAAA,IACXC,cAAe,aAAY/B,YAAMwB,MAAAA,OAAOQ,KAAM;AAAA,EAChD;AAAA,EACAC,SAAS;AAAA,IACPN,WAAW;AAAA,IACXC,eAAe;AAAA,IACfC,YAAY;AAAA,IACZzB,QAAQ;AAAA,IACR0B,WAAY,aAAY9B,YAAMwB,MAAAA,OAAOU,KAAM;AAAA,IAC3CH,cAAe,GAAE,KAAM,UAAS/B,YAAAA,MAAMwB,OAAOU,KAAM;AAAA,EACrD;AAAA,EACAC,UAAU;AAAA,IACR,UAAU;AAAA,MACRR,WAAW;AAAA,MACXC,eAAe;AAAA,MACfE,WAAW;AAAA,MACXC,cAAe,aAAY/B,YAAMwB,MAAAA,OAAOY,SAAU;AAAA,MAClDP,YAAY;AAAA,MACZzB,QAAQ;AAAA,MACR,gBAAgB;AAAA,QACdiC,OAAOrC,YAAAA,MAAMwB,OAAOY;AAAAA,MACtB;AAAA,IACF;AAAA,IACA,aAAa;AAAA,MACXT,WAAW;AAAA,MACXC,eAAe;AAAA,MACfE,WAAW;AAAA,MACXC,cAAe,aAAY/B,YAAMwB,MAAAA,OAAOY,SAAU;AAAA,MAClDP,YAAY;AAAA,MACZzB,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAkC,MAAM;AAAA,IACJC,gBAAgB;AAAA,IAChB,GAAG3C;AAAAA,EACL;AAAA,EACA4C,QAAQ;AAAA,IACNH,OAAO;AAAA,IACP,GAAGzC;AAAAA,EACL;AACF,CACF;;;"}
+{"version":3,"file":"MenuItem.styles.cjs","sources":["../../../../../../src/components/Header/Navigation/MenuItem/MenuItem.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport type { CSSInterpolation } from \"@emotion/serialize\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nconst item: CSSInterpolation = {\n  border: \"none\",\n  cursor: \"pointer\",\n  padding: `${theme.space.xs} ${theme.space.sm}`,\n  height: \"100%\",\n  display: \"flex\",\n  alignItems: \"center\",\n  \"&:active\": {\n    outline: \"none\",\n  },\n  \"&:focus\": {\n    outline: \"none\",\n  },\n  \"&:focus-visible\": {\n    ...outlineStyles,\n  },\n  \"& span\": {\n    display: \"inline-flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n  },\n  \"& span::after\": {\n    content: \"attr(data-text)\",\n    height: 0,\n    visibility: \"hidden\",\n    overflow: \"hidden\",\n    userSelect: \"none\",\n    pointerEvents: \"none\",\n    fontWeight: theme.fontWeights.semibold,\n\n    \"@media speech\": {\n      display: \"none\",\n    },\n  },\n};\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvHeader-MenuItem\",\n  {\n    root: {\n      display: \"inline\",\n      \"&:hover\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n      },\n      \"&:focus-within\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n      },\n    },\n    menu: {\n      marginTop: 0,\n      paddingBottom: \"4px\",\n      paddingTop: \"4px\",\n      height: \"100%\",\n      borderTop: \"none\",\n      borderBottom: `4px solid ${theme.colors.atmo2}`,\n    },\n    menubar: {\n      marginTop: \"0px\",\n      paddingBottom: \"4px\",\n      paddingTop: \"4px\",\n      height: \"100%\",\n      borderTop: `0px solid ${theme.colors.atmo1}`,\n      borderBottom: `${\"4px\"} solid ${theme.colors.atmo1}`,\n    },\n    selected: {\n      \"&$menu\": {\n        marginTop: 0,\n        paddingBottom: 0,\n        borderTop: \"none\",\n        borderBottom: `4px solid ${theme.colors.secondary}`,\n        paddingTop: \"4px\",\n        height: \"100%\",\n        \"& > * > span\": {\n          color: theme.colors.secondary,\n        },\n      },\n      \"&$menubar\": {\n        marginTop: 0,\n        paddingBottom: 0,\n        borderTop: \"none\",\n        borderBottom: `4px solid ${theme.colors.secondary}`,\n        paddingTop: \"4px\",\n        height: \"100%\",\n      },\n    },\n    link: {\n      textDecoration: \"none\",\n      ...item,\n    } as CSSInterpolation,\n    button: {\n      color: \"inherit\",\n      ...item,\n    } as CSSInterpolation,\n  }\n);\n"],"names":["theme","outlineStyles","createClasses"],"mappings":";;;;;AAOA,MAAM,OAAyB;AAAA,EAC7B,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS,GAAGA,YAAM,MAAA,MAAM,EAAE,IAAIA,YAAA,MAAM,MAAM,EAAE;AAAA,EAC5C,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,IACV,SAAS;AAAA,EACX;AAAA,EACA,WAAW;AAAA,IACT,SAAS;AAAA,EACX;AAAA,EACA,mBAAmB;AAAA,IACjB,GAAGC,WAAA;AAAA,EACL;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,YAAYD,YAAAA,MAAM,YAAY;AAAA,IAE9B,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAEa,MAAA,EAAE,eAAe,WAAA,IAAeE,QAAA;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,WAAW;AAAA,QACT,iBAAiBF,YAAAA,MAAM,OAAO;AAAA,MAChC;AAAA,MACA,kBAAkB;AAAA,QAChB,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,MAChC;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,WAAW;AAAA,MACX,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,cAAc,aAAaA,YAAM,MAAA,OAAO,KAAK;AAAA,IAC/C;AAAA,IACA,SAAS;AAAA,MACP,WAAW;AAAA,MACX,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,WAAW,aAAaA,YAAM,MAAA,OAAO,KAAK;AAAA,MAC1C,cAAc,GAAG,KAAK,UAAUA,YAAAA,MAAM,OAAO,KAAK;AAAA,IACpD;AAAA,IACA,UAAU;AAAA,MACR,UAAU;AAAA,QACR,WAAW;AAAA,QACX,eAAe;AAAA,QACf,WAAW;AAAA,QACX,cAAc,aAAaA,YAAM,MAAA,OAAO,SAAS;AAAA,QACjD,YAAY;AAAA,QACZ,QAAQ;AAAA,QACR,gBAAgB;AAAA,UACd,OAAOA,YAAAA,MAAM,OAAO;AAAA,QACtB;AAAA,MACF;AAAA,MACA,aAAa;AAAA,QACX,WAAW;AAAA,QACX,eAAe;AAAA,QACf,WAAW;AAAA,QACX,cAAc,aAAaA,YAAM,MAAA,OAAO,SAAS;AAAA,QACjD,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,gBAAgB;AAAA,MAChB,GAAG;AAAA,IACL;AAAA,IACA,QAAQ;AAAA,MACN,OAAO;AAAA,MACP,GAAG;AAAA,IACL;AAAA,EACF;AACF;;;"}

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

@@ -17,16 +17,22 @@ const HvHeaderNavigation = (props) => {
     levels = 2,
     ...others
   } = useDefaultProps.useDefaultProps("HvHeaderNavigation", props);
-  const {
-    classes,
-    cx
-  } = Navigation_styles.useClasses(classesProp);
+  const { classes, cx } = Navigation_styles.useClasses(classesProp);
   const selectionPath = useSelectionPath.useSelectionPath(data, selected);
   const handleClick = (event, selection) => {
     event.preventDefault();
     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","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,cAAUY,OAAOC,SAAS;AAAA,EAAA;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;;;"}
+{"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":["useDefaultProps","useClasses","useSelectionPath","SelectionContext","jsx","FocusProvider","HvHeaderMenuBar"],"mappings":";;;;;;;;;AAiCa,MAAA,qBAAqB,CAAC,UAAmC;AAC9D,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,sBAAsB,KAAK;AAE/C,QAAM,EAAE,SAAS,GAAG,IAAIC,6BAAW,WAAW;AAExC,QAAA,gBAAgBC,iBAAAA,iBAAiB,MAAM,QAAQ;AAE/C,QAAA,cAA+C,CACnD,OACA,cACG;AACH,UAAM,eAAe;AAErB,cAAU,OAAO,SAAS;AAAA,EAAA;AAG5B,wCACGC,kCAAiB,UAAjB,EAA0B,OAAO,eAChC,UAACC,2BAAAA,IAAAC,aAAA,eAAA,EACC,UAACD,2BAAA,IAAA,OAAA,EAAI,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAC/C,UAAAA,2BAAA;AAAA,IAACE,QAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,SAAS;AAAA,MACT;AAAA,MACA,cAAc;AAAA,IAAA;AAAA,EAAA,GAElB,GACF,EACF,CAAA;AAEJ;;;"}

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

@@ -1,19 +1,19 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const classes = require("../../../utils/classes.cjs");
-const {
-  staticClasses,
-  useClasses
-} = classes.createClasses("HvHeader-Navigation", {
-  root: {
-    position: "absolute",
-    width: "100%",
-    height: "100%",
-    zIndex: 1,
-    top: "0px",
-    left: "0px"
+const { staticClasses, useClasses } = classes.createClasses(
+  "HvHeader-Navigation",
+  {
+    root: {
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      zIndex: 1,
+      top: "0px",
+      left: "0px"
+    }
   }
-});
+);
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;
 //# sourceMappingURL=Navigation.styles.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Navigation.styles.cjs","sources":["../../../../../src/components/Header/Navigation/Navigation.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvHeader-Navigation\",\n  {\n    root: {\n      position: \"absolute\",\n      width: \"100%\",\n      height: \"100%\",\n      zIndex: 1,\n      top: \"0px\",\n      left: \"0px\",\n    },\n  }\n);\n"],"names":["staticClasses","useClasses","createClasses","root","position","width","height","zIndex","top","left"],"mappings":";;;AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAC3C,uBACA;AAAA,EACEC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,QAAQ;AAAA,IACRC,KAAK;AAAA,IACLC,MAAM;AAAA,EACR;AACF,CACF;;;"}
+{"version":3,"file":"Navigation.styles.cjs","sources":["../../../../../src/components/Header/Navigation/Navigation.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvHeader-Navigation\",\n  {\n    root: {\n      position: \"absolute\",\n      width: \"100%\",\n      height: \"100%\",\n      zIndex: 1,\n      top: \"0px\",\n      left: \"0px\",\n    },\n  }\n);\n"],"names":["createClasses"],"mappings":";;;AAEa,MAAA,EAAE,eAAe,WAAA,IAAeA,QAAA;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,UAAU;AAAA,MACV,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,KAAK;AAAA,MACL,MAAM;AAAA,IACR;AAAA,EACF;AACF;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"useSelectionPath.cjs","sources":["../../../../../src/components/Header/Navigation/useSelectionPath.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nexport interface HvHeaderNavigationItemProp {\n  id: string;\n  label: string;\n  path?: string;\n  href?: string;\n  target?: string;\n  data?: HvHeaderNavigationItemProp[];\n}\n\nconst getSelectionPath = (\n  data: HvHeaderNavigationItemProp[] | undefined,\n  selectedId: string | undefined,\n  selection: string[] = [],\n  idx: number = -1,\n  parent: HvHeaderNavigationItemProp[] = []\n): string[] => {\n  data?.forEach((item: HvHeaderNavigationItemProp, i) => {\n    const hasData = item.data && item.data.length;\n\n    const isSelected = item.id === selectedId;\n\n    if (isSelected)\n      selection.push(...(idx > -1 ? [parent[idx].id] : []), item.id);\n\n    if (hasData) getSelectionPath(item.data, selectedId, selection, i, data);\n  });\n\n  return selection;\n};\n\nexport const useSelectionPath = (\n  data: HvHeaderNavigationItemProp[],\n  selectedId?: string\n): string[] => {\n  const [selectionPath, setSelectionPath] = useState<string[]>([]);\n\n  useEffect(() => {\n    const path = getSelectionPath(data, selectedId);\n\n    setSelectionPath(path);\n  }, [data, selectedId]);\n\n  return selectionPath;\n};\n"],"names":["getSelectionPath","data","selectedId","selection","idx","parent","forEach","item","i","hasData","length","isSelected","id","push","useSelectionPath","selectionPath","setSelectionPath","useState","useEffect","path"],"mappings":";;;AAWA,MAAMA,mBAAmBA,CACvBC,MACAC,YACAC,YAAsB,IACtBC,MAAc,IACdC,SAAuC,OAC1B;AACPC,QAAAA,QAAQ,CAACC,MAAkCC,MAAM;AACrD,UAAMC,UAAUF,KAAKN,QAAQM,KAAKN,KAAKS;AAEjCC,UAAAA,aAAaJ,KAAKK,OAAOV;AAE3BS,QAAAA;AACFR,gBAAUU,KAAK,GAAIT,MAAM,KAAK,CAACC,OAAOD,GAAG,EAAEQ,EAAE,IAAI,CAAE,GAAGL,KAAKK,EAAE;AAE3DH,QAAAA;AAAST,uBAAiBO,KAAKN,MAAMC,YAAYC,WAAWK,GAAGP,IAAI;AAAA,EAAA,CACxE;AAEME,SAAAA;AACT;AAEaW,MAAAA,mBAAmBA,CAC9Bb,MACAC,eACa;AACb,QAAM,CAACa,eAAeC,gBAAgB,IAAIC,MAAAA,SAAmB,CAAE,CAAA;AAE/DC,QAAAA,UAAU,MAAM;AACRC,UAAAA,OAAOnB,iBAAiBC,MAAMC,UAAU;AAE9Cc,qBAAiBG,IAAI;AAAA,EAAA,GACpB,CAAClB,MAAMC,UAAU,CAAC;AAEda,SAAAA;AACT;;"}
+{"version":3,"file":"useSelectionPath.cjs","sources":["../../../../../src/components/Header/Navigation/useSelectionPath.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nexport interface HvHeaderNavigationItemProp {\n  id: string;\n  label: string;\n  path?: string;\n  href?: string;\n  target?: string;\n  data?: HvHeaderNavigationItemProp[];\n}\n\nconst getSelectionPath = (\n  data: HvHeaderNavigationItemProp[] | undefined,\n  selectedId: string | undefined,\n  selection: string[] = [],\n  idx: number = -1,\n  parent: HvHeaderNavigationItemProp[] = []\n): string[] => {\n  data?.forEach((item: HvHeaderNavigationItemProp, i) => {\n    const hasData = item.data && item.data.length;\n\n    const isSelected = item.id === selectedId;\n\n    if (isSelected)\n      selection.push(...(idx > -1 ? [parent[idx].id] : []), item.id);\n\n    if (hasData) getSelectionPath(item.data, selectedId, selection, i, data);\n  });\n\n  return selection;\n};\n\nexport const useSelectionPath = (\n  data: HvHeaderNavigationItemProp[],\n  selectedId?: string\n): string[] => {\n  const [selectionPath, setSelectionPath] = useState<string[]>([]);\n\n  useEffect(() => {\n    const path = getSelectionPath(data, selectedId);\n\n    setSelectionPath(path);\n  }, [data, selectedId]);\n\n  return selectionPath;\n};\n"],"names":["useState","useEffect"],"mappings":";;;AAWA,MAAM,mBAAmB,CACvB,MACA,YACA,YAAsB,IACtB,MAAc,IACd,SAAuC,OAC1B;AACP,QAAA,QAAQ,CAAC,MAAkC,MAAM;AACrD,UAAM,UAAU,KAAK,QAAQ,KAAK,KAAK;AAEjC,UAAA,aAAa,KAAK,OAAO;AAE3B,QAAA;AACF,gBAAU,KAAK,GAAI,MAAM,KAAK,CAAC,OAAO,GAAG,EAAE,EAAE,IAAI,CAAC,GAAI,KAAK,EAAE;AAE3D,QAAA;AAAS,uBAAiB,KAAK,MAAM,YAAY,WAAW,GAAG,IAAI;AAAA,EAAA,CACxE;AAEM,SAAA;AACT;AAEa,MAAA,mBAAmB,CAC9B,MACA,eACa;AACb,QAAM,CAAC,eAAe,gBAAgB,IAAIA,MAAA,SAAmB,CAAE,CAAA;AAE/DC,QAAAA,UAAU,MAAM;AACR,UAAA,OAAO,iBAAiB,MAAM,UAAU;AAE9C,qBAAiB,IAAI;AAAA,EAAA,GACpB,CAAC,MAAM,UAAU,CAAC;AAEd,SAAA;AACT;;"}

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

@@ -5,27 +5,20 @@ const React = require("react");
 const reducer = (state, action) => {
   switch (action.type) {
     case "setItemFocused":
-      return {
-        itemFocused: action.itemFocused
-      };
+      return { itemFocused: action.itemFocused };
     default:
       return state;
   }
 };
-const initialState = {
-  itemFocused: void 0,
-  dispatch: void 0
-};
+const initialState = { itemFocused: void 0, dispatch: void 0 };
 const FocusContext = React.createContext(initialState);
 const FocusProvider = (props) => {
   const [state, dispatch] = React.useReducer(reducer, initialState);
-  const contextValue = React.useMemo(() => ({
-    ...state,
-    dispatch
-  }), [state, dispatch]);
-  const {
-    children
-  } = props;
+  const contextValue = React.useMemo(
+    () => ({ ...state, dispatch }),
+    [state, dispatch]
+  );
+  const { children } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(FocusContext.Provider, { value: contextValue, children });
 };
 exports.FocusContext = FocusContext;

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"],"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;;;"}
+{"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":["createContext","useReducer","useMemo"],"mappings":";;;;AAOA,MAAM,UAAU,CAAC,OAAO,WAAW;AACjC,UAAQ,OAAO,MAAM;AAAA,IACnB,KAAK;AACI,aAAA,EAAE,aAAa,OAAO;IAC/B;AACS,aAAA;AAAA,EACX;AACF;AAEA,MAAM,eAAe,EAAE,aAAa,QAAW,UAAU;AAE5C,MAAA,eAAeA,oBAGzB,YAAY;AAEF,MAAA,gBAAgB,CAAC,UAAU;AACtC,QAAM,CAAC,OAAO,QAAQ,IAAIC,MAAAA,WAAW,SAAS,YAAY;AAC1D,QAAM,eAAeC,MAAA;AAAA,IACnB,OAAO,EAAE,GAAG,OAAO;IACnB,CAAC,OAAO,QAAQ;AAAA,EAAA;AAEZ,QAAA,EAAE,SAAa,IAAA;AAErB,wCACG,aAAa,UAAb,EAAsB,OAAO,cAC3B,SACH,CAAA;AAEJ;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"SelectionContext.cjs","sources":["../../../../../../src/components/Header/Navigation/utils/SelectionContext.ts"],"sourcesContent":["import { createContext } from \"react\";\n\nexport const SelectionContext = createContext<string[]>([\"\"]);\n"],"names":["SelectionContext","createContext"],"mappings":";;;AAEO,MAAMA,mBAAmBC,MAAAA,cAAwB,CAAC,EAAE,CAAC;;"}
+{"version":3,"file":"SelectionContext.cjs","sources":["../../../../../../src/components/Header/Navigation/utils/SelectionContext.ts"],"sourcesContent":["import { createContext } from \"react\";\n\nexport const SelectionContext = createContext<string[]>([\"\"]);\n"],"names":["createContext"],"mappings":";;;AAEO,MAAM,mBAAmBA,MAAAA,cAAwB,CAAC,EAAE,CAAC;;"}

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

@@ -29,21 +29,14 @@ const HvInlineEditor = (props) => {
     disabled,
     ...others
   } = useDefaultProps.useDefaultProps("HvInlineEditor", props);
-  const {
-    classes,
-    cx
-  } = InlineEditor_styles.useClasses(classesProp);
+  const { classes, cx } = InlineEditor_styles.useClasses(classesProp);
   const [value, setValue] = useControlled.useControlled(valueProp, defaultValue);
   const [editMode, setEditMode] = React.useState(false);
   const [cachedValue, setCachedValue] = React.useState(value);
   const inputRef = React.useRef();
-  const {
-    activeTheme
-  } = useTheme.useTheme();
+  const { activeTheme } = useTheme.useTheme();
   const typographyStyles = activeTheme?.typography[variant] || {};
-  const {
-    lineHeight
-  } = typographyStyles;
+  const { lineHeight } = typographyStyles;
   React.useLayoutEffect(() => {
     const input = inputRef.current;
     if (editMode && input) {
@@ -72,22 +65,60 @@ const HvInlineEditor = (props) => {
     setValue(val);
     onChange?.(event, val);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.root, className), children: editMode && !disabled ? /* @__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
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.root, className), children: editMode && !disabled ? /* @__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,
+      disabled,
+      ...buttonProps,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Typography.HvTypography,
+        {
+          variant,
+          noWrap: true,
+          className: cx(classes.text, { [classes.textEmpty]: !value }),
+          ...typographyProps,
+          children: value || placeholder
+        }
+      )
     }
-  }, 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, disabled, ...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;

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

@@ -1 +1 @@
-{"version":3,"file":"InlineEditor.cjs","sources":["../../../../src/components/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef, useState } from \"react\";\n\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { HvButtonProps, HvButton } from \"@core/components/Button\";\nimport {\n  HvTypographyVariants,\n  HvTypographyProps,\n  HvTypography,\n} from \"@core/components/Typography\";\nimport { HvInput, HvInputProps } from \"@core/components/Input\";\n\nimport { staticClasses, useClasses } from \"./InlineEditor.styles\";\n\nexport { staticClasses as inlineEditorClasses };\n\nexport type HvInlineEditorClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvInlineEditorProps\n  extends HvBaseProps<HTMLDivElement, \"onBlur\" | \"onChange\"> {\n  /** The value of the form element. */\n  value?: string;\n  /** Whether the Edit icon should always be visible */\n  showIcon?: boolean;\n  /** Component to use as the input. The component \"inherit\" from `HvBaseInput` (such as `HvInput` or `HvTextArea`) */\n  component?: React.ElementType;\n  /** Variant of the HvTypography to display */\n  variant?: HvTypographyVariants;\n  /** Called when the input is blurred. */\n  onBlur?: (\n    event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n    value: string\n  ) => void;\n  /** Called when the input value changes. */\n  onChange?: (event: React.SyntheticEvent, value: string) => void;\n  /** Props passed to the HvButton component */\n  buttonProps?: HvButtonProps;\n  /** Props passed to the HvTypography text component */\n  typographyProps?: HvTypographyProps;\n  /** Whether the editor is disabled or not. */\n  disabled?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvInlineEditorClasses;\n}\n\n/**\n * An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nexport const HvInlineEditor = (props: HvInlineEditorProps) => {\n  const {\n    className,\n    classes: classesProp,\n    value: valueProp,\n    defaultValue,\n    showIcon,\n    component: InputComponent = HvInput,\n    variant = \"body\",\n    placeholder = \"Enter text\",\n    onBlur,\n    onChange,\n    onKeyDown,\n    buttonProps,\n    typographyProps,\n    disabled,\n    ...others\n  } = useDefaultProps(\"HvInlineEditor\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n  const [editMode, setEditMode] = useState(false);\n  const [cachedValue, setCachedValue] = useState(value);\n  const inputRef = useRef<HTMLInputElement>();\n  const { activeTheme } = useTheme();\n\n  const typographyStyles = activeTheme?.typography[variant] || {};\n  const { lineHeight } = typographyStyles;\n\n  useLayoutEffect(() => {\n    const input = inputRef.current;\n    if (editMode && input) {\n      input.focus();\n      input.select();\n    }\n  }, [editMode]);\n\n  const handleClick = () => {\n    setEditMode(true);\n    setCachedValue(value);\n  };\n\n  const handleBlur: HvInputProps[\"onBlur\"] = (event) => {\n    setEditMode(false);\n\n    const newValue = value || cachedValue; // empty values should be ignored\n    setValue(newValue);\n    onBlur?.(event, newValue);\n  };\n\n  const handleKeyDown: HvInputProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Esc\")) {\n      setEditMode(false);\n      setValue(cachedValue);\n    }\n    onKeyDown?.(event as any);\n  };\n\n  const handleChange: HvInputProps[\"onChange\"] = (event, val) => {\n    setValue(val);\n    onChange?.(event, val);\n  };\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {editMode && !disabled ? (\n        <InputComponent\n          inputRef={inputRef}\n          classes={{\n            root: classes.inputRoot,\n            input: classes.input,\n            inputBorderContainer: classes.inputBorderContainer,\n          }}\n          inputProps={{\n            style: {\n              ...typographyStyles,\n              height: InputComponent === HvInput ? lineHeight : undefined,\n            },\n          }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          {...others}\n        />\n      ) : (\n        <HvButton\n          variant=\"secondaryGhost\"\n          overrideIconColors={false}\n          endIcon={\n            <Edit\n              color=\"secondary_60\"\n              role=\"none\"\n              className={cx(classes.icon, {\n                [classes.iconVisible]: showIcon,\n              })}\n            />\n          }\n          className={cx(classes.button, {\n            [classes.largeText]: parseInt(lineHeight as string, 10) >= 28,\n          })}\n          onClick={handleClick}\n          disabled={disabled}\n          {...buttonProps}\n        >\n          <HvTypography\n            variant={variant}\n            noWrap\n            className={cx(classes.text, { [classes.textEmpty]: !value })}\n            {...typographyProps}\n          >\n            {value || placeholder}\n          </HvTypography>\n        </HvButton>\n      )}\n    </div>\n  );\n};\n"],"names":["HvInlineEditor","props","className","classes","classesProp","value","valueProp","defaultValue","showIcon","component","InputComponent","HvInput","variant","placeholder","onBlur","onChange","onKeyDown","buttonProps","typographyProps","disabled","others","useDefaultProps","cx","useClasses","setValue","useControlled","editMode","setEditMode","useState","cachedValue","setCachedValue","inputRef","useRef","activeTheme","useTheme","typographyStyles","typography","lineHeight","useLayoutEffect","input","current","focus","select","handleClick","handleBlur","event","newValue","handleKeyDown","isKey","handleChange","val","jsx","root","inputRoot","inputBorderContainer","style","height","undefined","HvButton","Edit","icon","iconVisible","button","largeText","parseInt","HvTypography","text","textEmpty"],"mappings":"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"}
+{"version":3,"file":"InlineEditor.cjs","sources":["../../../../src/components/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef, useState } from \"react\";\n\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { HvButtonProps, HvButton } from \"@core/components/Button\";\nimport {\n  HvTypographyVariants,\n  HvTypographyProps,\n  HvTypography,\n} from \"@core/components/Typography\";\nimport { HvInput, HvInputProps } from \"@core/components/Input\";\n\nimport { staticClasses, useClasses } from \"./InlineEditor.styles\";\n\nexport { staticClasses as inlineEditorClasses };\n\nexport type HvInlineEditorClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvInlineEditorProps\n  extends HvBaseProps<HTMLDivElement, \"onBlur\" | \"onChange\"> {\n  /** The value of the form element. */\n  value?: string;\n  /** Whether the Edit icon should always be visible */\n  showIcon?: boolean;\n  /** Component to use as the input. The component \"inherit\" from `HvBaseInput` (such as `HvInput` or `HvTextArea`) */\n  component?: React.ElementType;\n  /** Variant of the HvTypography to display */\n  variant?: HvTypographyVariants;\n  /** Called when the input is blurred. */\n  onBlur?: (\n    event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n    value: string\n  ) => void;\n  /** Called when the input value changes. */\n  onChange?: (event: React.SyntheticEvent, value: string) => void;\n  /** Props passed to the HvButton component */\n  buttonProps?: HvButtonProps;\n  /** Props passed to the HvTypography text component */\n  typographyProps?: HvTypographyProps;\n  /** Whether the editor is disabled or not. */\n  disabled?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvInlineEditorClasses;\n  /** The placeholder value of the input. */\n  placeholder?: string;\n}\n\n/**\n * An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nexport const HvInlineEditor = (props: HvInlineEditorProps) => {\n  const {\n    className,\n    classes: classesProp,\n    value: valueProp,\n    defaultValue,\n    showIcon,\n    component: InputComponent = HvInput,\n    variant = \"body\",\n    placeholder = \"Enter text\",\n    onBlur,\n    onChange,\n    onKeyDown,\n    buttonProps,\n    typographyProps,\n    disabled,\n    ...others\n  } = useDefaultProps(\"HvInlineEditor\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n  const [editMode, setEditMode] = useState(false);\n  const [cachedValue, setCachedValue] = useState(value);\n  const inputRef = useRef<HTMLInputElement>();\n  const { activeTheme } = useTheme();\n\n  const typographyStyles = activeTheme?.typography[variant] || {};\n  const { lineHeight } = typographyStyles;\n\n  useLayoutEffect(() => {\n    const input = inputRef.current;\n    if (editMode && input) {\n      input.focus();\n      input.select();\n    }\n  }, [editMode]);\n\n  const handleClick = () => {\n    setEditMode(true);\n    setCachedValue(value);\n  };\n\n  const handleBlur: HvInputProps[\"onBlur\"] = (event) => {\n    setEditMode(false);\n\n    const newValue = value || cachedValue; // empty values should be ignored\n    setValue(newValue);\n    onBlur?.(event, newValue);\n  };\n\n  const handleKeyDown: HvInputProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Esc\")) {\n      setEditMode(false);\n      setValue(cachedValue);\n    }\n    onKeyDown?.(event as any);\n  };\n\n  const handleChange: HvInputProps[\"onChange\"] = (event, val) => {\n    setValue(val);\n    onChange?.(event, val);\n  };\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {editMode && !disabled ? (\n        <InputComponent\n          inputRef={inputRef}\n          classes={{\n            root: classes.inputRoot,\n            input: classes.input,\n            inputBorderContainer: classes.inputBorderContainer,\n          }}\n          inputProps={{\n            style: {\n              ...typographyStyles,\n              height: InputComponent === HvInput ? lineHeight : undefined,\n            },\n          }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          {...others}\n        />\n      ) : (\n        <HvButton\n          variant=\"secondaryGhost\"\n          overrideIconColors={false}\n          endIcon={\n            <Edit\n              color=\"secondary_60\"\n              role=\"none\"\n              className={cx(classes.icon, {\n                [classes.iconVisible]: showIcon,\n              })}\n            />\n          }\n          className={cx(classes.button, {\n            [classes.largeText]: parseInt(lineHeight as string, 10) >= 28,\n          })}\n          onClick={handleClick}\n          disabled={disabled}\n          {...buttonProps}\n        >\n          <HvTypography\n            variant={variant}\n            noWrap\n            className={cx(classes.text, { [classes.textEmpty]: !value })}\n            {...typographyProps}\n          >\n            {value || placeholder}\n          </HvTypography>\n        </HvButton>\n      )}\n    </div>\n  );\n};\n"],"names":["HvInput","useDefaultProps","useClasses","useControlled","useState","useRef","useTheme","useLayoutEffect","isKey","jsx","HvButton","Edit","HvTypography"],"mappings":"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"}

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

@@ -4,10 +4,7 @@ const uikitStyles = require("@hitachivantara/uikit-styles");
 const classes = require("../../utils/classes.cjs");
 const BaseInput_styles = require("../BaseInput/BaseInput.styles.cjs");
 const Input_styles = require("../Input/Input.styles.cjs");
-const {
-  staticClasses,
-  useClasses
-} = classes.createClasses("HvInlineEditor", {
+const { staticClasses, useClasses } = classes.createClasses("HvInlineEditor", {
   root: {
     [`& .${BaseInput_styles.staticClasses.inputRoot}.${Input_styles.staticClasses.inputRoot}`]: {
       height: "100%",

package/dist/cjs/components/InlineEditor/InlineEditor.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InlineEditor.styles.cjs","sources":["../../../../src/components/InlineEditor/InlineEditor.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\nimport { inputClasses } from \"@core/components/Input\";\nimport { baseInputClasses } from \"@core/components/BaseInput\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvInlineEditor\", {\n  root: {\n    [`& .${baseInputClasses.inputRoot}.${inputClasses.inputRoot}`]: {\n      height: \"100%\",\n      minHeight: \"32px\",\n    },\n  },\n  inputBorderContainer: {\n    top: \"unset\",\n    bottom: 0,\n  },\n  input: {},\n  inputRoot: {},\n  text: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    alignSelf: \"center\",\n  },\n  largeText: {},\n  textEmpty: {\n    color: theme.colors.secondary_60,\n  },\n  button: {\n    padding: theme.spacing(\"6px\", \"8px\", \"5px\", \"8px\"),\n    minHeight: \"32px\",\n\n    boxSizing: \"border-box\",\n    cursor: \"text\",\n    height: \"100%\",\n    width: \"100%\",\n    maxWidth: \"100%\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n\n    backgroundColor: theme.colors.atmo1,\n    border: `1px solid transparent`,\n\n    \"&:hover, &:focus\": {\n      border: `1px solid ${theme.colors.primary}`,\n      backgroundColor: theme.colors.atmo1,\n\n      \"& $icon\": {\n        visibility: \"visible\",\n      },\n    },\n\n    \"&:active\": {\n      border: `1px solid ${theme.colors.secondary}`,\n      backgroundColor: \"transparent\",\n\n      \"& $icon\": {\n        visibility: \"visible\",\n      },\n    },\n\n    \"& > div\": {\n      width: \"100%\",\n    },\n    \"& > div > span\": {\n      width: \"100%\",\n    },\n  },\n  icon: {\n    cursor: \"pointer\",\n    visibility: \"hidden\",\n    alignSelf: \"center\",\n    height: \"16px\",\n    width: \"32px\",\n    minWidth: \"32px\",\n\n    \"& svg\": {\n      margin: theme.spacing(0, \"xs\"),\n    },\n  },\n  iconVisible: {\n    visibility: \"visible\",\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","baseInputClasses","inputRoot","inputClasses","height","minHeight","inputBorderContainer","top","bottom","input","text","overflow","textOverflow","whiteSpace","alignSelf","largeText","textEmpty","color","theme","colors","secondary_60","button","padding","spacing","boxSizing","cursor","width","maxWidth","justifyContent","alignItems","backgroundColor","atmo1","border","primary","visibility","secondary","icon","minWidth","margin","iconVisible"],"mappings":";;;;;;AAMa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,kBAAkB;AAAA,EAC3EC,MAAM;AAAA,IACJ,CAAE,MAAKC,+BAAiBC,SAAU,IAAGC,aAAaD,cAAAA,SAAU,EAAC,GAAG;AAAA,MAC9DE,QAAQ;AAAA,MACRC,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACAC,sBAAsB;AAAA,IACpBC,KAAK;AAAA,IACLC,QAAQ;AAAA,EACV;AAAA,EACAC,OAAO,CAAC;AAAA,EACRP,WAAW,CAAC;AAAA,EACZQ,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,IACZC,WAAW;AAAA,EACb;AAAA,EACAC,WAAW,CAAC;AAAA,EACZC,WAAW;AAAA,IACTC,OAAOC,YAAAA,MAAMC,OAAOC;AAAAA,EACtB;AAAA,EACAC,QAAQ;AAAA,IACNC,SAASJ,YAAMK,MAAAA,QAAQ,OAAO,OAAO,OAAO,KAAK;AAAA,IACjDlB,WAAW;AAAA,IAEXmB,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRrB,QAAQ;AAAA,IACRsB,OAAO;AAAA,IACPC,UAAU;AAAA,IACVC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IAEZC,iBAAiBZ,YAAAA,MAAMC,OAAOY;AAAAA,IAC9BC,QAAS;AAAA,IAET,oBAAoB;AAAA,MAClBA,QAAS,aAAYd,YAAMC,MAAAA,OAAOc,OAAQ;AAAA,MAC1CH,iBAAiBZ,YAAAA,MAAMC,OAAOY;AAAAA,MAE9B,WAAW;AAAA,QACTG,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IAEA,YAAY;AAAA,MACVF,QAAS,aAAYd,YAAMC,MAAAA,OAAOgB,SAAU;AAAA,MAC5CL,iBAAiB;AAAA,MAEjB,WAAW;AAAA,QACTI,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IAEA,WAAW;AAAA,MACTR,OAAO;AAAA,IACT;AAAA,IACA,kBAAkB;AAAA,MAChBA,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACAU,MAAM;AAAA,IACJX,QAAQ;AAAA,IACRS,YAAY;AAAA,IACZpB,WAAW;AAAA,IACXV,QAAQ;AAAA,IACRsB,OAAO;AAAA,IACPW,UAAU;AAAA,IAEV,SAAS;AAAA,MACPC,QAAQpB,YAAAA,MAAMK,QAAQ,GAAG,IAAI;AAAA,IAC/B;AAAA,EACF;AAAA,EACAgB,aAAa;AAAA,IACXL,YAAY;AAAA,EACd;AACF,CAAC;;;"}
+{"version":3,"file":"InlineEditor.styles.cjs","sources":["../../../../src/components/InlineEditor/InlineEditor.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\nimport { inputClasses } from \"@core/components/Input\";\nimport { baseInputClasses } from \"@core/components/BaseInput\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvInlineEditor\", {\n  root: {\n    [`& .${baseInputClasses.inputRoot}.${inputClasses.inputRoot}`]: {\n      height: \"100%\",\n      minHeight: \"32px\",\n    },\n  },\n  inputBorderContainer: {\n    top: \"unset\",\n    bottom: 0,\n  },\n  input: {},\n  inputRoot: {},\n  text: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    alignSelf: \"center\",\n  },\n  largeText: {},\n  textEmpty: {\n    color: theme.colors.secondary_60,\n  },\n  button: {\n    padding: theme.spacing(\"6px\", \"8px\", \"5px\", \"8px\"),\n    minHeight: \"32px\",\n\n    boxSizing: \"border-box\",\n    cursor: \"text\",\n    height: \"100%\",\n    width: \"100%\",\n    maxWidth: \"100%\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n\n    backgroundColor: theme.colors.atmo1,\n    border: `1px solid transparent`,\n\n    \"&:hover, &:focus\": {\n      border: `1px solid ${theme.colors.primary}`,\n      backgroundColor: theme.colors.atmo1,\n\n      \"& $icon\": {\n        visibility: \"visible\",\n      },\n    },\n\n    \"&:active\": {\n      border: `1px solid ${theme.colors.secondary}`,\n      backgroundColor: \"transparent\",\n\n      \"& $icon\": {\n        visibility: \"visible\",\n      },\n    },\n\n    \"& > div\": {\n      width: \"100%\",\n    },\n    \"& > div > span\": {\n      width: \"100%\",\n    },\n  },\n  icon: {\n    cursor: \"pointer\",\n    visibility: \"hidden\",\n    alignSelf: \"center\",\n    height: \"16px\",\n    width: \"32px\",\n    minWidth: \"32px\",\n\n    \"& svg\": {\n      margin: theme.spacing(0, \"xs\"),\n    },\n  },\n  iconVisible: {\n    visibility: \"visible\",\n  },\n});\n"],"names":["createClasses","baseInputClasses","inputClasses","theme"],"mappings":";;;;;;AAMO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,kBAAkB;AAAA,EAC3E,MAAM;AAAA,IACJ,CAAC,MAAMC,+BAAiB,SAAS,IAAIC,aAAa,cAAA,SAAS,EAAE,GAAG;AAAA,MAC9D,QAAQ;AAAA,MACR,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,sBAAsB;AAAA,IACpB,KAAK;AAAA,IACL,QAAQ;AAAA,EACV;AAAA,EACA,OAAO,CAAC;AAAA,EACR,WAAW,CAAC;AAAA,EACZ,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,WAAW;AAAA,EACb;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,WAAW;AAAA,IACT,OAAOC,YAAAA,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,IACN,SAASA,YAAM,MAAA,QAAQ,OAAO,OAAO,OAAO,KAAK;AAAA,IACjD,WAAW;AAAA,IAEX,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,YAAY;AAAA,IAEZ,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,IAC9B,QAAQ;AAAA,IAER,oBAAoB;AAAA,MAClB,QAAQ,aAAaA,YAAM,MAAA,OAAO,OAAO;AAAA,MACzC,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,MAE9B,WAAW;AAAA,QACT,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IAEA,YAAY;AAAA,MACV,QAAQ,aAAaA,YAAM,MAAA,OAAO,SAAS;AAAA,MAC3C,iBAAiB;AAAA,MAEjB,WAAW;AAAA,QACT,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IAEA,WAAW;AAAA,MACT,OAAO;AAAA,IACT;AAAA,IACA,kBAAkB;AAAA,MAChB,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IAEV,SAAS;AAAA,MACP,QAAQA,YAAA,MAAM,QAAQ,GAAG,IAAI;AAAA,IAC/B;AAAA,EACF;AAAA,EACA,aAAa;AAAA,IACX,YAAY;AAAA,EACd;AACF,CAAC;;;"}