@hitachivantara/uikit-react-core 5.39.2 → 5.39.4

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuBar.js","sources":["../../../../../src/Header/Navigation/MenuBar/MenuBar.tsx"],"sourcesContent":["import { MouseEvent } from \"react\";\n\nimport { HvBaseProps } from \"../../../types/generic\";\n\nimport { useDefaultProps } from \"../../../hooks/useDefaultProps\";\n\nimport { HvHeaderMenuItem } from \"../MenuItem\";\nimport { HvHeaderNavigationItemProp } from \"../useSelectionPath\";\nimport { Bar, BarProps, HvHeaderMenuBarClasses } from \"./Bar\";\n\nexport interface HvHeaderMenuBarProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  data: HvHeaderNavigationItemProp[];\n  type?: BarProps[\"type\"];\n  onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n  levels: number;\n  currentLevel: number;\n  classes?: HvHeaderMenuBarClasses;\n}\n\nexport const HvHeaderMenuBar = (props: HvHeaderMenuBarProps) => {\n  const {\n    data = [],\n    onClick,\n    type = \"menubar\",\n    levels,\n    currentLevel,\n    classes,\n    ...others\n  } = useDefaultProps(\"HvHeaderMenuBar\", props);\n  return (\n    <Bar data={data} type={type} classes={classes} {...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":[],"mappings":";;;;AAoBa,MAAA,kBAAkB,CAAC,UAAgC;AACxD,QAAA;AAAA,IACJ,OAAO,CAAC;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAE1C,SAAA,oBAAC,KAAI,EAAA,MAAY,MAAY,SAAmB,GAAG,QAChD,UAAA,KAAK,IAAI,CAAC,SACT;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IALK,KAAK;AAAA,EAOb,CAAA,EACH,CAAA;AAEJ;"}

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

@@ -0,0 +1,142 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useContext } from "react";
+import { isKey } from "../../../utils/keyboardUtils.js";
+import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
+import { FocusContext } from "../utils/FocusContext.js";
+import { SelectionContext } from "../utils/SelectionContext.js";
+import { useClasses } from "./MenuItem.styles.js";
+import { staticClasses } from "./MenuItem.styles.js";
+import { Bar } from "../MenuBar/Bar.js";
+import { HvTypography } from "../../../Typography/Typography.js";
+const traverseItem = (node) => {
+  let href;
+  let target;
+  if (node?.href) {
+    href = node?.href;
+    target = node?.target;
+  } else if (node?.data != null && node?.data?.length > 0) {
+    let i = 0;
+    while (href == null && i < node.data.length) {
+      const childNavItem = traverseItem(node?.data[i]);
+      if (childNavItem?.href != null) {
+        href = childNavItem?.href;
+        target = childNavItem?.target;
+        break;
+      }
+      i += 1;
+    }
+  }
+  return { href, target };
+};
+const HvHeaderMenuItem = (props) => {
+  const {
+    id,
+    item,
+    type,
+    onClick,
+    levels,
+    currentLevel,
+    classes: classesProp,
+    className
+  } = useDefaultProps("HvHeaderMenuItem", props);
+  const { classes, cx } = useClasses(classesProp);
+  const selectionPath = useContext(SelectionContext);
+  const { dispatch } = useContext(FocusContext);
+  const { data } = item;
+  const hasSubLevel = data && data.length;
+  const isMenu = type === "menu";
+  const isSelected = selectionPath?.[isMenu ? 1 : 0] === item.id;
+  const isCurrent = isSelected ? hasSubLevel ? true : "page" : void 0;
+  const actionHandler = (event) => {
+    if (event.type === "click" || isKey(event, "Enter") || isKey(event, "Space")) {
+      if (event.type === "click") {
+        event.currentTarget.blur();
+      }
+      onClick?.(event, item);
+    }
+  };
+  const handleFocus = (event) => {
+    dispatch?.({ type: "setItemFocused", itemFocused: event.currentTarget });
+  };
+  const itemProps = {
+    onClick: actionHandler,
+    onKeyDown: actionHandler,
+    onFocus: handleFocus
+  };
+  const label = /* @__PURE__ */ jsx(
+    HvTypography,
+    {
+      component: "span",
+      variant: isSelected ? "label" : "body",
+      "data-text": item.label,
+      children: item.label
+    }
+  );
+  let itemHref = item?.href;
+  let itemTarget = item?.target;
+  if (item?.href == null) {
+    const { href, target } = traverseItem(item);
+    itemHref = href;
+    itemTarget = target;
+  }
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      id,
+      className: cx(
+        classes.root,
+        {
+          [classes.menu]: isMenu,
+          [classes.menubar]: !isMenu,
+          [classes.selected]: !!isSelected
+        },
+        className
+      ),
+      children: [
+        itemHref ? /* @__PURE__ */ jsx(
+          "a",
+          {
+            className: classes.link,
+            href: itemHref,
+            target: itemTarget,
+            ...itemProps,
+            "aria-current": isCurrent,
+            "aria-label": item.label,
+            children: label
+          }
+        ) : (
+          // keeping this code path for backwards compatibility, but
+          // shouldn't really be used as it's not accessible
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: classes.button,
+              role: "button",
+              ...itemProps,
+              tabIndex: 0,
+              "aria-current": isCurrent,
+              children: label
+            }
+          )
+        ),
+        hasSubLevel && currentLevel < levels && currentLevel < 2 && /* @__PURE__ */ jsx(Bar, { data, type: "menu", children: data.map((itm) => /* @__PURE__ */ jsx(
+          HvHeaderMenuItem,
+          {
+            item: itm,
+            type: "menu",
+            onClick,
+            levels,
+            currentLevel: currentLevel + 1
+          },
+          itm.id
+        )) })
+      ]
+    },
+    item.label
+  );
+};
+export {
+  HvHeaderMenuItem,
+  staticClasses as headerMenuItemClasses
+};
+//# sourceMappingURL=MenuItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.js","sources":["../../../../../src/Header/Navigation/MenuItem/MenuItem.tsx"],"sourcesContent":["import React, { MouseEvent, useContext } from \"react\";\n\nimport { HvTypography } from \"../../../Typography\";\nimport { HvBaseProps } from \"../../../types/generic\";\nimport { isKey } from \"../../../utils/keyboardUtils\";\nimport { ExtractNames } from \"../../../utils/classes\";\n\nimport { useDefaultProps } from \"../../../hooks/useDefaultProps\";\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 = (\n  node: HvHeaderNavigationItemProp\n): { href?: string; target?: string } => {\n  let href: string | undefined;\n  let target: string | undefined;\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 = (props: HvHeaderMenuItemProps) => {\n  const {\n    id,\n    item,\n    type,\n    onClick,\n    levels,\n    currentLevel,\n    classes: classesProp,\n    className,\n  } = useDefaultProps(\"HvHeaderMenuItem\", props);\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          // Fix for a possible bug in playwright where, even though hidden from screen readers and not appearing in the accessibility\n          // tree, due to the styling duplication (span::after - using 'data-text'), locators have to double the name.\n          aria-label={item.label}\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":[],"mappings":"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"}

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

@@ -0,0 +1,102 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { outlineStyles } from "../../../utils/focusUtils.js";
+import { createClasses } from "../../../utils/classes.js";
+const item = {
+  border: "none",
+  cursor: "pointer",
+  padding: `${theme.space.xs} ${theme.space.sm}`,
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  "&:active": {
+    outline: "none"
+  },
+  "&:focus": {
+    outline: "none"
+  },
+  "&:focus-visible": {
+    ...outlineStyles
+  },
+  "& span": {
+    display: "inline-flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  "& span::after": {
+    content: "attr(data-text)",
+    height: 0,
+    visibility: "hidden",
+    overflow: "hidden",
+    userSelect: "none",
+    pointerEvents: "none",
+    fontWeight: theme.fontWeights.semibold,
+    "@media speech": {
+      display: "none"
+    }
+  }
+};
+const { staticClasses, useClasses } = createClasses(
+  "HvHeader-MenuItem",
+  {
+    root: {
+      display: "inline",
+      "&:hover": {
+        backgroundColor: theme.colors.containerBackgroundHover
+      },
+      "&:focus-within": {
+        backgroundColor: theme.colors.containerBackgroundHover
+      }
+    },
+    menu: {
+      marginTop: 0,
+      paddingBottom: "4px",
+      paddingTop: "4px",
+      height: "100%",
+      borderTop: "none",
+      borderBottom: `4px solid ${theme.colors.atmo2}`
+    },
+    menubar: {
+      marginTop: "0px",
+      paddingBottom: "4px",
+      paddingTop: "4px",
+      height: "100%",
+      borderTop: `0px solid ${theme.colors.atmo1}`,
+      borderBottom: `${"4px"} solid ${theme.colors.atmo1}`
+    },
+    selected: {
+      "&$menu": {
+        marginTop: 0,
+        paddingBottom: 0,
+        borderTop: "none",
+        borderBottom: `4px solid ${theme.colors.secondary}`,
+        paddingTop: "4px",
+        height: "100%",
+        "& > * > span": {
+          color: theme.colors.secondary
+        }
+      },
+      "&$menubar": {
+        marginTop: 0,
+        paddingBottom: 0,
+        borderTop: "none",
+        borderBottom: `4px solid ${theme.colors.secondary}`,
+        paddingTop: "4px",
+        height: "100%"
+      }
+    },
+    link: {
+      textDecoration: "none",
+      ...item
+    },
+    button: {
+      color: "inherit",
+      ...item
+    }
+  }
+);
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=MenuItem.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.styles.js","sources":["../../../../../src/Header/Navigation/MenuItem/MenuItem.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport type { CSSInterpolation } from \"@emotion/serialize\";\n\nimport { outlineStyles } from \"../../../utils/focusUtils\";\nimport { createClasses } from \"../../../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":[],"mappings":";;;AAOA,MAAM,OAAyB;AAAA,EAC7B,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS,GAAG,MAAM,MAAM,EAAE,IAAI,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,GAAG;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,YAAY,MAAM,YAAY;AAAA,IAE9B,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAEa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,WAAW;AAAA,QACT,iBAAiB,MAAM,OAAO;AAAA,MAChC;AAAA,MACA,kBAAkB;AAAA,QAChB,iBAAiB,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,aAAa,MAAM,OAAO,KAAK;AAAA,IAC/C;AAAA,IACA,SAAS;AAAA,MACP,WAAW;AAAA,MACX,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,MAC1C,cAAc,GAAG,KAAK,UAAU,MAAM,OAAO,KAAK;AAAA,IACpD;AAAA,IACA,UAAU;AAAA,MACR,UAAU;AAAA,QACR,WAAW;AAAA,QACX,eAAe;AAAA,QACf,WAAW;AAAA,QACX,cAAc,aAAa,MAAM,OAAO,SAAS;AAAA,QACjD,YAAY;AAAA,QACZ,QAAQ;AAAA,QACR,gBAAgB;AAAA,UACd,OAAO,MAAM,OAAO;AAAA,QACtB;AAAA,MACF;AAAA,MACA,aAAa;AAAA,QACX,WAAW;AAAA,QACX,eAAe;AAAA,QACf,WAAW;AAAA,QACX,cAAc,aAAa,MAAM,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/esm/Header/Navigation/Navigation.js

@@ -0,0 +1,40 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
+import { useClasses } from "./Navigation.styles.js";
+import { staticClasses } from "./Navigation.styles.js";
+import { FocusProvider } from "./utils/FocusContext.js";
+import { SelectionContext } from "./utils/SelectionContext.js";
+import { useSelectionPath } from "./useSelectionPath.js";
+import { HvHeaderMenuBar } from "./MenuBar/MenuBar.js";
+const HvHeaderNavigation = (props) => {
+  const {
+    data,
+    selected,
+    onClick,
+    className,
+    classes: classesProp,
+    levels = 2,
+    ...others
+  } = useDefaultProps("HvHeaderNavigation", props);
+  const { classes, cx } = useClasses(classesProp);
+  const selectionPath = useSelectionPath(data, selected);
+  const handleClick = (event, selection) => {
+    event.preventDefault();
+    onClick?.(event, selection);
+  };
+  return /* @__PURE__ */ jsx(SelectionContext.Provider, { value: selectionPath, children: /* @__PURE__ */ jsx(FocusProvider, { children: /* @__PURE__ */ jsx("nav", { className: cx(classes.root, className), ...others, children: /* @__PURE__ */ jsx(
+    HvHeaderMenuBar,
+    {
+      data,
+      type: "menubar",
+      onClick: handleClick,
+      levels,
+      currentLevel: 1
+    }
+  ) }) }) });
+};
+export {
+  HvHeaderNavigation,
+  staticClasses as headerNavigationClasses
+};
+//# sourceMappingURL=Navigation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.js","sources":["../../../../src/Header/Navigation/Navigation.tsx"],"sourcesContent":["import { MouseEvent } from \"react\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../../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":[],"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,IACD,gBAAgB,sBAAsB,KAAK;AAE/C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,gBAAgB,iBAAiB,MAAM,QAAQ;AAE/C,QAAA,cAA+C,CACnD,OACA,cACG;AACH,UAAM,eAAe;AAErB,cAAU,OAAO,SAAS;AAAA,EAAA;AAG5B,6BACG,iBAAiB,UAAjB,EAA0B,OAAO,eAChC,UAAC,oBAAA,eAAA,EACC,UAAC,oBAAA,OAAA,EAAI,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAC/C,UAAA;AAAA,IAAC;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/esm/Header/Navigation/Navigation.styles.js

@@ -0,0 +1,19 @@
+import { createClasses } from "../../utils/classes.js";
+const { staticClasses, useClasses } = createClasses(
+  "HvHeader-Navigation",
+  {
+    root: {
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      zIndex: 1,
+      top: "0px",
+      left: "0px"
+    }
+  }
+);
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Navigation.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.styles.js","sources":["../../../../src/Header/Navigation/Navigation.styles.tsx"],"sourcesContent":["import { createClasses } from \"../../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":[],"mappings":";AAEa,MAAA,EAAE,eAAe,WAAA,IAAe;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/esm/Header/Navigation/useSelectionPath.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectionPath.js","sources":["../../../../src/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":[],"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,IAAI,SAAmB,CAAE,CAAA;AAE/D,YAAU,MAAM;AACR,UAAA,OAAO,iBAAiB,MAAM,UAAU;AAE9C,qBAAiB,IAAI;AAAA,EAAA,GACpB,CAAC,MAAM,UAAU,CAAC;AAEd,SAAA;AACT;"}

package/dist/esm/Header/Navigation/utils/FocusContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusContext.js","sources":["../../../../../src/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":[],"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,eAAe,cAGzB,YAAY;AAEF,MAAA,gBAAgB,CAAC,UAAU;AACtC,QAAM,CAAC,OAAO,QAAQ,IAAI,WAAW,SAAS,YAAY;AAC1D,QAAM,eAAe;AAAA,IACnB,OAAO,EAAE,GAAG,OAAO;IACnB,CAAC,OAAO,QAAQ;AAAA,EAAA;AAEZ,QAAA,EAAE,SAAa,IAAA;AAErB,6BACG,aAAa,UAAb,EAAsB,OAAO,cAC3B,SACH,CAAA;AAEJ;"}

package/dist/esm/Header/Navigation/utils/SelectionContext.js.map

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

package/dist/esm/InlineEditor/InlineEditor.js

@@ -0,0 +1,126 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useState, useRef, useLayoutEffect } from "react";
+import { Edit } from "@hitachivantara/uikit-react-icons";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { useControlled } from "../hooks/useControlled.js";
+import { useTheme } from "../hooks/useTheme.js";
+import { isKey } from "../utils/keyboardUtils.js";
+import { useClasses } from "./InlineEditor.styles.js";
+import { staticClasses } from "./InlineEditor.styles.js";
+import { HvButton } from "../Button/Button.js";
+import { HvInput } from "../Input/Input.js";
+import { HvTypography } from "../Typography/Typography.js";
+const HvInlineEditor = (props) => {
+  const {
+    className,
+    classes: classesProp,
+    value: valueProp,
+    defaultValue,
+    showIcon,
+    component: InputComponent = HvInput,
+    variant = "body",
+    placeholder = "Enter text",
+    onBlur,
+    onChange,
+    onKeyDown,
+    buttonProps,
+    typographyProps,
+    disabled,
+    ...others
+  } = useDefaultProps("HvInlineEditor", props);
+  const { classes, cx } = useClasses(classesProp);
+  const [value, setValue] = useControlled(valueProp, defaultValue);
+  const [editMode, setEditMode] = useState(false);
+  const [cachedValue, setCachedValue] = useState(value);
+  const inputRef = useRef();
+  const { activeTheme } = useTheme();
+  const typographyStyles = activeTheme?.typography[variant] || {};
+  const { lineHeight } = typographyStyles;
+  useLayoutEffect(() => {
+    const input = inputRef.current;
+    if (editMode && input) {
+      input.focus();
+      input.select();
+    }
+  }, [editMode]);
+  const handleClick = () => {
+    setEditMode(true);
+    setCachedValue(value);
+  };
+  const handleBlur = (event) => {
+    setEditMode(false);
+    const newValue = value || cachedValue;
+    setValue(newValue);
+    onBlur?.(event, newValue);
+  };
+  const handleKeyDown = (event) => {
+    if (isKey(event, "Esc")) {
+      setEditMode(false);
+      setValue(cachedValue);
+    }
+    onKeyDown?.(event);
+  };
+  const handleChange = (event, val) => {
+    setValue(val);
+    onChange?.(event, val);
+  };
+  return /* @__PURE__ */ jsx("div", { className: cx(classes.root, className), children: editMode && !disabled ? /* @__PURE__ */ jsx(
+    InputComponent,
+    {
+      inputRef,
+      classes: {
+        root: classes.inputRoot,
+        input: classes.input,
+        inputBorderContainer: classes.inputBorderContainer
+      },
+      inputProps: {
+        style: {
+          ...typographyStyles,
+          height: InputComponent === HvInput ? lineHeight : void 0
+        }
+      },
+      value,
+      onBlur: handleBlur,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown,
+      ...others
+    }
+  ) : /* @__PURE__ */ jsx(
+    HvButton,
+    {
+      variant: "secondaryGhost",
+      overrideIconColors: false,
+      endIcon: /* @__PURE__ */ jsx(
+        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__ */ jsx(
+        HvTypography,
+        {
+          variant,
+          noWrap: true,
+          className: cx(classes.text, { [classes.textEmpty]: !value }),
+          ...typographyProps,
+          children: value || placeholder
+        }
+      )
+    }
+  ) });
+};
+export {
+  HvInlineEditor,
+  staticClasses as inlineEditorClasses
+};
+//# sourceMappingURL=InlineEditor.js.map

package/dist/esm/InlineEditor/InlineEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineEditor.js","sources":["../../../src/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef, useState } from \"react\";\n\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { HvButtonProps, HvButton } from \"../Button\";\nimport {\n  HvTypographyVariants,\n  HvTypographyProps,\n  HvTypography,\n} from \"../Typography\";\nimport { HvInput, HvInputProps } from \"../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":[],"mappings":"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"}

package/dist/esm/InlineEditor/InlineEditor.styles.js

@@ -0,0 +1,82 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.js";
+import { staticClasses as staticClasses$1 } from "../BaseInput/BaseInput.styles.js";
+import "../BaseInput/BaseInput.js";
+import { staticClasses as staticClasses$2 } from "../Input/Input.styles.js";
+import "../Input/Input.js";
+const { staticClasses, useClasses } = createClasses("HvInlineEditor", {
+  root: {
+    [`& .${staticClasses$1.inputRoot}.${staticClasses$2.inputRoot}`]: {
+      height: "100%",
+      minHeight: "32px"
+    }
+  },
+  inputBorderContainer: {
+    top: "unset",
+    bottom: 0
+  },
+  input: {},
+  inputRoot: {},
+  text: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    alignSelf: "center"
+  },
+  largeText: {},
+  textEmpty: {
+    color: theme.colors.secondary_60
+  },
+  button: {
+    padding: theme.spacing("6px", "8px", "5px", "8px"),
+    minHeight: "32px",
+    boxSizing: "border-box",
+    cursor: "text",
+    height: "100%",
+    width: "100%",
+    maxWidth: "100%",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    backgroundColor: theme.colors.atmo1,
+    border: `1px solid transparent`,
+    "&:hover, &:focus": {
+      border: `1px solid ${theme.colors.primary}`,
+      backgroundColor: theme.colors.atmo1,
+      "& $icon": {
+        visibility: "visible"
+      }
+    },
+    "&:active": {
+      border: `1px solid ${theme.colors.secondary}`,
+      backgroundColor: "transparent",
+      "& $icon": {
+        visibility: "visible"
+      }
+    },
+    "& > div": {
+      width: "100%"
+    },
+    "& > div > span": {
+      width: "100%"
+    }
+  },
+  icon: {
+    cursor: "pointer",
+    visibility: "hidden",
+    alignSelf: "center",
+    height: "16px",
+    width: "32px",
+    minWidth: "32px",
+    "& svg": {
+      margin: theme.spacing(0, "xs")
+    }
+  },
+  iconVisible: {
+    visibility: "visible"
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=InlineEditor.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InlineEditor.styles.js","sources":["../../../src/InlineEditor/InlineEditor.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\nimport { inputClasses } from \"../Input\";\nimport { baseInputClasses } from \"../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":["baseInputClasses","inputClasses"],"mappings":";;;;;;AAMO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM;AAAA,IACJ,CAAC,MAAMA,gBAAiB,SAAS,IAAIC,gBAAa,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,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,IACN,SAAS,MAAM,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,iBAAiB,MAAM,OAAO;AAAA,IAC9B,QAAQ;AAAA,IAER,oBAAoB;AAAA,MAClB,QAAQ,aAAa,MAAM,OAAO,OAAO;AAAA,MACzC,iBAAiB,MAAM,OAAO;AAAA,MAE9B,WAAW;AAAA,QACT,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IAEA,YAAY;AAAA,MACV,QAAQ,aAAa,MAAM,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,QAAQ,MAAM,QAAQ,GAAG,IAAI;AAAA,IAC/B;AAAA,EACF;AAAA,EACA,aAAa;AAAA,IACX,YAAY;AAAA,EACd;AACF,CAAC;"}